From 092845f4c1d70524a02116ae12f2fbf2664288ac Mon Sep 17 00:00:00 2001 From: Keerthana Pravallika Samudrala <66155737+KeerthanaPravallika@users.noreply.github.com> Date: Mon, 31 Oct 2022 17:51:17 +0530 Subject: [PATCH 1/2] Create index.html --- web/NeumorphicLoginPage/index.html | 26 ++++++++++++++++++++++++++ 1 file changed, 26 insertions(+) create mode 100644 web/NeumorphicLoginPage/index.html diff --git a/web/NeumorphicLoginPage/index.html b/web/NeumorphicLoginPage/index.html new file mode 100644 index 0000000..354cc4e --- /dev/null +++ b/web/NeumorphicLoginPage/index.html @@ -0,0 +1,26 @@ + + + + + + repl.it + + + +
+ +
Tech Geek
+
+ + + + + +
+
Forgot password? . Sign Up for Teck Geek
+
+ + + + + From ddcd30d83a9f39d57c2abe73f47777365e9e6125 Mon Sep 17 00:00:00 2001 From: Keerthana Pravallika Samudrala <66155737+KeerthanaPravallika@users.noreply.github.com> Date: Mon, 31 Oct 2022 17:51:41 +0530 Subject: [PATCH 2/2] Create style.css --- web/NeumorphicLoginPage/style.css | 128 ++++++++++++++++++++++++++++++ 1 file changed, 128 insertions(+) create mode 100644 web/NeumorphicLoginPage/style.css diff --git a/web/NeumorphicLoginPage/style.css b/web/NeumorphicLoginPage/style.css new file mode 100644 index 0000000..c768ad2 --- /dev/null +++ b/web/NeumorphicLoginPage/style.css @@ -0,0 +1,128 @@ +/* Importing font*/ +@import url('https://fonts.googleapis.com/css2?family=KoHo:wght@500&display=swap'); + + +/* Body */ +body{ + margin:0; + width:100vm; + height:100vh; + background:#ecf0f3; + display:flex; + align-items:center; + text-align:center; + place-items:center; + overflow:hidden; + font-family: 'KoHo', sans-serif; + +} + + +.container{ + width:350px; + height:520px; + background:#ecf0f3; + padding:40px; + border-radius:20px; + box-sizing : border-box; + box-shadow : 14px 14px 20px #cbced1, -14px -14px 20px white; + + /* Centering the div element*/ + position: absolute; + top:0; + bottom: 0; + left: 0; + right: 0; + margin: auto; +} + +/* Logo */ +.brand-logo{ + height:100px; + width:100px; + background:url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTinbvOM0q29f5Ul01M4SrtmXFR1qvjIpOfo6xx5KRaGvtLlGILE5A-xXoSxDY2geCiK4g&usqp=CAU"); + background-size: 160px; + background-position:-30px; + margin:auto; + border-radius:50%; + box-sizing : border-box; + box-shadow:7px 7px 10px #cdced1, -7px -7px 10px white; +} + /* ---------------------- */ + +/* Title */ +.title{ + margin-top:10px; + font-weight:900; + font-size:1.6rem; + color: #1DA1F2; + letter-spacing:1px; +} + +/* --------------- */ + +/* Input fields */ + +.inputsFields{ + text-align:left; + margin-top:30px; +} +label,input,button{ + display:block; + width:100%; + padding:0; + border:none; + outline:none; + box-sizing : border-box; +} + +label{ + margin-bottom:4px; + font-size:16px; +} +label:nth-of-type(2){ + margin-top:14px; +} + +input{ + background: #ecf0f3; + padding:10px; + padding-left:20px; + font-size:14px; + border-radius:50px; + height:50px; + box-shadow:inset 6px 6px 6px #cdced1, inset -6px -6px 6px white; +} + +input::placeholder{ + color:gray; +} + +button{ + margin-top:20px; + background:#1DA1F2; + height:40px; + border-radius:20px; + cursor:pointer; + font-weight:900; + font-family: 'KoHo', sans-serif; + letter-spacing:1px; + box-shadow:6px 6px 6px #cdced1, -6px -6px 6px white; + transition:0.5s; +} +button:hover{ + box-shadow:none; +} + /* --------------------------- */ +.line{ + color:#1DA1F2; + font-size:13px; + letter-spacing:0.2px; + margin-top:15px; +} + +#dot{ + vertical-align: super; + font-weight:600; +} +