From 5c67016fc28a573789a8eb04b70538519fe8e31a Mon Sep 17 00:00:00 2001 From: "Gowrishankar V.V" <89328469+Gowrishankarvv@users.noreply.github.com> Date: Mon, 4 Oct 2021 14:14:45 +0530 Subject: [PATCH] Add files via upload simple html loginpage --- WebDev/login page html csss simple/index.html | 48 +++++++ WebDev/login page html csss simple/style.css | 127 ++++++++++++++++++ 2 files changed, 175 insertions(+) create mode 100644 WebDev/login page html csss simple/index.html create mode 100644 WebDev/login page html csss simple/style.css diff --git a/WebDev/login page html csss simple/index.html b/WebDev/login page html csss simple/index.html new file mode 100644 index 0000000..45daec0 --- /dev/null +++ b/WebDev/login page html csss simple/index.html @@ -0,0 +1,48 @@ + + + + + + + + + + + + +
+
+ Login +
+
+
+ + + +
+
+ + + +
+ + + +
+
+ +
+
+ + + + + + \ No newline at end of file diff --git a/WebDev/login page html csss simple/style.css b/WebDev/login page html csss simple/style.css new file mode 100644 index 0000000..cbb5b08 --- /dev/null +++ b/WebDev/login page html csss simple/style.css @@ -0,0 +1,127 @@ +@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap'); +*{ + margin: 0; + padding: 0; + +/*Created By GOWRISHANKARVV +github : https://github.com/Gowrishankarvv +website: https://gowrishankarvv.ml/ */ + + /* user-select: none; */ + box-sizing: border-box; + font-family: 'Poppins', sans-serif; +} +html,body{ + height: 100%; +} +body{ + display: grid; + place-items: center; + background: #dde1e7; + text-align: center; +} +.content{ + width: 330px; + padding: 40px 30px; + background: #dde1e7; + border-radius: 10px; + box-shadow: -3px -3px 7px #ffffff73, + 2px 2px 5px rgba(94,104,121,0.288); +} +.content .text{ + font-size: 33px; + font-weight: 600; + margin-bottom: 35px; + color: #595959; +} +.field{ + height: 50px; + width: 100%; + display: flex; + position: relative; +} +.field:nth-child(2){ + margin-top: 20px; +} +.field input{ + height: 100%; + width: 100%; + padding-left: 45px; + outline: none; + border: none; + font-size: 18px; + background: #dde1e7; + color: #595959; + border-radius: 25px; + box-shadow: inset 2px 2px 5px #BABECC, + inset -5px -5px 10px #ffffff73; +} +.field input:focus{ + box-shadow: inset 1px 1px 2px #BABECC, + inset -1px -1px 2px #ffffff73; +} +.field span{ + position: absolute; + color: #595959; + width: 50px; + line-height: 50px; +} +.field label{ + position: absolute; + top: 50%; + transform: translateY(-50%); + left: 45px; + pointer-events: none; + color: #666666; +} +.field input:valid ~ label{ + opacity: 0; +} +.forgot-pass{ + text-align: left; + margin: 10px 0 10px 5px; +} +.forgot-pass a{ + font-size: 16px; + color: #3498db; + text-decoration: none; +} +.forgot-pass:hover a{ + text-decoration: underline; +} +button{ + margin: 15px 0; + width: 100%; + height: 50px; + font-size: 18px; + line-height: 50px; + font-weight: 600; + background: #dde1e7; + border-radius: 25px; + border: none; + outline: none; + cursor: pointer; + color: #595959; + box-shadow: 2px 2px 5px #BABECC, + -5px -5px 10px #ffffff73; +} +button:focus{ + color: #3498db; + box-shadow: inset 2px 2px 5px #BABECC, + inset -5px -5px 10px #ffffff73; +} +.sign-up{ + margin: 10px 0; + color: #595959; + font-size: 16px; +} +.sign-up a{ + color: #3498db; + text-decoration: none; +} +.sign-up a:hover{ + text-decoration: underline; +} +/*Created By GOWRISHANKARVV +github : https://github.com/Gowrishankarvv +website: https://gowrishankarvv.ml/ */ \ No newline at end of file