From d3be45e6c7d8ba30ba3d8cf686acf8be8733ab8f Mon Sep 17 00:00:00 2001 From: hill Date: Thu, 30 May 2024 19:58:05 +0800 Subject: [PATCH] Site updated: 2024-05-30 19:58:04 --- css/main.css | 2 +- html/ColorPicker/Color.html | 418 ++++++++++++++++++++++++++++++++++++ html/ColorPicker/main.css | 61 ++++++ html/Login/index.html | 403 ++++++++++++++++++++++++++++++++++ html/Login/main.css | 179 +++++++++++++++ html/Signin/README.html | 374 ++++++++++++++++++++++++++++++++ html/Signin/main.css | 92 ++++++++ html/Signin/signin.html | 399 ++++++++++++++++++++++++++++++++++ resource/index.html | 11 +- 9 files changed, 1933 insertions(+), 6 deletions(-) create mode 100644 html/ColorPicker/Color.html create mode 100644 html/ColorPicker/main.css create mode 100644 html/Login/index.html create mode 100644 html/Login/main.css create mode 100644 html/Signin/README.html create mode 100644 html/Signin/main.css create mode 100644 html/Signin/signin.html diff --git a/css/main.css b/css/main.css index 4e7806b..5681a98 100644 --- a/css/main.css +++ b/css/main.css @@ -1465,7 +1465,7 @@ pre code { vertical-align: middle; } .links-of-author a::before { - background: #ff01ff; + background: #e8fa91; display: inline-block; margin-right: 3px; transform: translateY(-2px); diff --git a/html/ColorPicker/Color.html b/html/ColorPicker/Color.html new file mode 100644 index 0000000..fac2ce5 --- /dev/null +++ b/html/ColorPicker/Color.html @@ -0,0 +1,418 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | Levi52's Blog + + + + + + + + + + + + + + + +
+ +
+
+
+
+
+ + + +
+
+ +
+ + + +

Levi52's Blog

+ + +

REMEMBER YOU WILL DIE

+
+ +
+
+ +
+
+
+ + + + + + + +
+
+
+ + + +
+ +
+ + + +
+
+
+ +
+
+
+
+ +
+ + + + + +
+ +
+ + + + + +
+ +

+

+ +
+ +
+ +
+ + + + +
+ + + + + + + Color Picker + + + +
+
+

color picker

+
+ + +
+

Travi5

+
+
+ + + + +
+ + + +
+ + + + + + +
+
+ + + + +
+ + + +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/html/ColorPicker/main.css b/html/ColorPicker/main.css new file mode 100644 index 0000000..83f3e8c --- /dev/null +++ b/html/ColorPicker/main.css @@ -0,0 +1,61 @@ +* +{ + padding: 0; + margin: 0; + box-sizing: border-box; +} +.picker +{ + display: flex; + justify-content: center; + align-items: center; + width: 100%; + height: 100vh; + background-color: aqua; +} +.picker_box +{ + width: 550px; + padding: 20px; + border: 4px solid; + border-radius: 12px; + background-color: rgba(255, 255, 255, 0.6); + box-shadow: 5px 5px rgba(0, 0, 0, 0.6); +} +.picker_title +{ + font-size: 30px; + font-weight: bold; + text-align: center; + letter-spacing: 2px; + text-transform: uppercase; + padding-bottom: 20px; +} +.picker_inputs +{ + display: flex; + justify-content: center; + align-items: center; + gap: 25px; +} +.picker_input +{ + display: block; + height: 30px; + border: 2px solid; + border-radius: 5px; + padding: 1px; +} +.picker_input--output +{ + text-align: center; + font-size: 15px; + font-weight: bold; + +} +.coder +{ + font-size:20px; + margin-top: 20px; + text-align: right; +} diff --git a/html/Login/index.html b/html/Login/index.html new file mode 100644 index 0000000..cf48a3e --- /dev/null +++ b/html/Login/index.html @@ -0,0 +1,403 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | Levi52's Blog + + + + + + + + + + + + + + + +
+ +
+
+
+
+
+ + + +
+
+ +
+ + + +

Levi52's Blog

+ + +

REMEMBER YOU WILL DIE

+
+ +
+
+ +
+
+
+ + + + + + + +
+
+
+ + + +
+ +
+ + + +
+
+
+ +
+
+
+
+ +
+ + + + + +
+ +
+ + + + + +
+ +

+

+ +
+ +
+ +
+ + + + +
+ + + + + + + Animated Login Form + + + +
+
+

Sign in

+
+ + Username + +
+
+ + Password + +
+
+ Forget Password + Sign up +
+ +
+
+ + +
+ + + +
+ + + + + + +
+
+ + + + +
+ + + +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/html/Login/main.css b/html/Login/main.css new file mode 100644 index 0000000..bf67a1d --- /dev/null +++ b/html/Login/main.css @@ -0,0 +1,179 @@ +/* @import url('http://fonts.googleapis.com/css2?family=Poppins/;wght@300;400;500;600;700;800;900&display=swap'); */ +* +{ + margin: 0; + padding: 0; + box-sizing: border-box; + +} +body +{ + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; + flex-direction: column; + background-color: #23242a; +} +.box +{ + position: relative; + width: 380px; + height: 420px; + background-color: #1c1c1c; + border-radius: 8px; + overflow: hidden; +} +.box::before +{ + content: ''; + position: absolute; + top: -50%; + left: -50%; + width: 380px; + height: 420px; + background: linear-gradient(0deg,transparent,#45f3ff,#45f3ff); + transform-origin: bottom right; + animation: animate 6s linear infinite; +} +@keyframes animate +{ + 0% + { + transform: rotate(0deg); + } + 100% + { + transform: rotate(360deg); + } +} +.box::after +{ + content: ''; + position: absolute; + top: -50%; + left: -50%; + width: 380px; + height: 420px; + background: linear-gradient(0deg,transparent,#45f3ff,#45f3ff); + transform-origin: bottom right; + animation: animate 6s linear infinite; + animation-delay: -3s; +} +@keyframes animate +{ + 0% + { + transform: rotate(0deg); + } + 100% + { + transform: rotate(360deg); + } +} +.form +{ + position: absolute; + inset: 2px; + background: #28292d; + z-index: 10; + border-radius: 8px; + padding: 50px 40px; + display: flex; + flex-direction: column; +} +.form h2 +{ + color: #45f3ff; + font-weight: bold; + text-align: center; + letter-spacing: 2px; +} +.inputBox +{ + position: relative; + width: 300px; + margin-top: 30px; +} +.inputBox input +{ + position: relative; + width: 100%; + padding: 20px 10px 10px; + background: transparent; + border: none; + outline: none; + color: #23242a; + font-size: 1em; + letter-spacing: 0.05em; + z-index: 10; +} +.inputBox span +{ + position: absolute; + left: 0; + padding: 20px 0px 10px; + font-size: 1em; + color: #8f8f8f; + pointer-events: none; + letter-spacing: 0.05em; + transition: 0.5s; +} +.inputBox input:valid ~ span, +.inputBox input:focus ~ span +{ + color: #45f3ff; + transform: translateY(-34px); + font-size: 0.75em; +} +.inputBox i +{ + position: absolute; + left: 0; + bottom: 0; + width: 100%; + height: 2px; + background: #45f3ff; + border-radius: 4px; + transition: 0.5s; + pointer-events: none; + z-index: 9; +} +.inputBox input:valid ~ i, +.inputBox input:focus ~ i +{ + height: 44px; +} +.links +{ + display: flex; + justify-content: space-between; +} +.links a +{ + margin: 10px 0; + font-size: 0.75em; + color: #8f8f8f; + text-decoration: none; +} +.links a:hover, +.links a:nth-child(2) +{ + color: #45f3ff; +} +input[type="submit"] +{ + border: none; + outline: none; + background: #45f3ff; + padding: 11px 25px; + width: 95px; + margin-top: 10px; + border-radius: 4px; + font-weight: bold; + cursor: pointer; +} +input[type="submit"]:active +{ + opacity: 0.8; +} diff --git a/html/Signin/README.html b/html/Signin/README.html new file mode 100644 index 0000000..dcceca2 --- /dev/null +++ b/html/Signin/README.html @@ -0,0 +1,374 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | Levi52's Blog + + + + + + + + + + + + + + + +
+ +
+
+
+
+
+ + + +
+
+ +
+ + + +

Levi52's Blog

+ + +

REMEMBER YOU WILL DIE

+
+ +
+
+ +
+
+
+ + + + + + + +
+
+
+ + + +
+ +
+ + + +
+
+
+ +
+
+
+
+ +
+ + + + + +
+ +
+ + + + + +
+ +

+

+ +
+ +
+ +
+ + + + +
+

Sign in

+
+ + + +
+ + + + + + +
+
+ + + + +
+ + + +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/html/Signin/main.css b/html/Signin/main.css new file mode 100644 index 0000000..9ae8144 --- /dev/null +++ b/html/Signin/main.css @@ -0,0 +1,92 @@ +* +{ + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: consolas; +} +body +{ + background: #343232; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; +} +.sign_box +{ + width: 280px; + height: 500px; + background: #000; + text-align: left; +} + +.title +{ + + font-size:35px; + font-weight: 800; + color: #6dabba; + margin-left: 5px; +} + +h6,p +{ + color: #6dabba; +} +.inputs p +{ + margin-top: 40px; + padding: 0 20px; +} +.password +{ + margin-top: 30px; +} +.inputs input +{ + background: transparent; + border: none; + outline: none; + color: aliceblue; + border-bottom: 1px solid rgba(240, 248, 255, 0.3); + margin: 20px; + padding: 5px; + width: 80%; + font-size: 15px; +} +.inputs input::placeholder +{ + color: #585b6c; +} +.btn +{ + text-align: center; + width: 100%; + padding-top: 30px; + +} +.btn button +{ + width: 82%; + border: none; + outline: none; + font-size: 15px; + height: 35px; + cursor: pointer; + border-radius: 2px; + color: #343232; + background: #8daaaa; +} +.btn h6 +{ + margin-top: 20px; + font-size: 12px; + font-weight: 100; + margin-right: 100px; +} +.btn h6 a +{ + color:#8daaaa; + text-decoration: none; +} \ No newline at end of file diff --git a/html/Signin/signin.html b/html/Signin/signin.html new file mode 100644 index 0000000..9292d4c --- /dev/null +++ b/html/Signin/signin.html @@ -0,0 +1,399 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | Levi52's Blog + + + + + + + + + + + + + + + +
+ +
+
+
+
+
+ + + +
+
+ +
+ + + +

Levi52's Blog

+ + +

REMEMBER YOU WILL DIE

+
+ +
+
+ +
+
+
+ + + + + + + +
+
+
+ + + +
+ +
+ + + +
+
+
+ +
+
+
+
+ +
+ + + + + +
+ +
+ + + + + +
+ +

+

+ +
+ +
+ +
+ + + + +
+ + + + + + + Sign in Page + + + +
+

Sign in

+
+

Username

+ +

Password

+ +
+
+ +
Not a member Sign Up
+
+
+ + + +
+ + + +
+ + + + + + +
+
+ + + + +
+ + + +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/resource/index.html b/resource/index.html index 7b9f77e..ac4d093 100644 --- a/resource/index.html +++ b/resource/index.html @@ -23,15 +23,15 @@ - + - + - + @@ -133,7 +133,7 @@