From 7d5899106ef88a30dd36087315cebcd7ccd9b232 Mon Sep 17 00:00:00 2001 From: Priyatham-sai-chand Date: Mon, 23 Nov 2020 22:19:49 +0530 Subject: [PATCH] log in ui revamp --- public/index.html | 1 + src/components/LogInContainer.js | 3 +- src/components/NavBar.js | 7 +++ src/components/PricingPlan.js | 3 ++ src/components/SignIn.js | 2 +- src/components/SignUp.js | 2 +- src/components/pricing-plan.css | 7 ++- src/login_reg.css | 44 ++++++++++----- src/navbar.css | 91 +++++++++++++++++++++++++++++--- 9 files changed, 138 insertions(+), 22 deletions(-) diff --git a/public/index.html b/public/index.html index 9b56871..bb40a93 100644 --- a/public/index.html +++ b/public/index.html @@ -27,6 +27,7 @@ --> + diff --git a/src/components/LogInContainer.js b/src/components/LogInContainer.js index fb11718..a5da05a 100644 --- a/src/components/LogInContainer.js +++ b/src/components/LogInContainer.js @@ -12,7 +12,8 @@ class LogInContainer extends Component {
- locaft +

locaft

+
diff --git a/src/components/NavBar.js b/src/components/NavBar.js index 9e5231d..16c1ea0 100644 --- a/src/components/NavBar.js +++ b/src/components/NavBar.js @@ -12,6 +12,12 @@ class NavBar extends Component { return(
+ + + + +
diff --git a/src/components/PricingPlan.js b/src/components/PricingPlan.js index c40e071..922f476 100644 --- a/src/components/PricingPlan.js +++ b/src/components/PricingPlan.js @@ -8,6 +8,9 @@ class PricingPlan extends Component { return(
+
+
+
diff --git a/src/components/SignIn.js b/src/components/SignIn.js index 38fc5ad..89f341c 100644 --- a/src/components/SignIn.js +++ b/src/components/SignIn.js @@ -46,7 +46,7 @@ class SignInForm extends Component {
- Create an account + Not a member?
diff --git a/src/components/SignUp.js b/src/components/SignUp.js index 13be839..9eedaad 100644 --- a/src/components/SignUp.js +++ b/src/components/SignUp.js @@ -57,7 +57,7 @@ class SignUpForm extends Component {
- I'm already member + already a member?
diff --git a/src/components/pricing-plan.css b/src/components/pricing-plan.css index f03dd23..fad8e16 100644 --- a/src/components/pricing-plan.css +++ b/src/components/pricing-plan.css @@ -1,5 +1,10 @@ -.pricing-plan { +.pricing-plan-container +{ + background: white; +} +.pricing-plan { + background: white; width:300px; border-radius: 25px; box-shadow: 0 0 5px rgba(0,0,0,0.2); diff --git a/src/login_reg.css b/src/login_reg.css index 0fd1cbb..557a341 100644 --- a/src/login_reg.css +++ b/src/login_reg.css @@ -7,7 +7,11 @@ .Apper__Aside { width: 50%; background-color: #66DAC7; - text-align: center; + display:flex; + align-items: center; + justify-self: center; + + } .Apper__Form { @@ -22,11 +26,27 @@ justify-content: flex-end; margin-bottom: 10%; } -.Apper__Aside__Text{ - display: -webkit-flex; - display: flex; - align-items: center; - justify-self: center; +.Apper__Aside__text{ + display: flex; + justify-content: center; + align-items: center; +} +.Apper__Aside__text p{ + + font-family: "Ubuntu"; + font-size: 5rem; + font-weight: bold; + position: relative; + color: white; + text-decoration: none; + text-transform: lowercase; + left: 150%; + margin-right: -50%; + transform: translate(-50%, -50%); + margin: 0; + + flex-grow: 1; + } .PageSwitcher__Item { @@ -90,8 +110,8 @@ .FormField__Label { display: block; text-transform: uppercase; - font-size: .9em; - color: #000000; + font-size: 1.25em; + color: #4C5D72; text-align: start; margin-left:45px; @@ -100,10 +120,10 @@ width: 85%; background-color: transparent; border: none; - color: white; + color: #4C5D72; outline: none; border-bottom: 1px solid #445366; - font-size: 1em; + font-size: .9em; font-weight: 300; padding-bottom: 10px; margin-top: 10px; @@ -128,8 +148,8 @@ color: #66707D; text-decoration: none; display: inline-block; - border-bottom: 1.5px solid #225E62; padding-bottom: 5px; + margin-left: 12px; } .FormField__CheckboxLabel { @@ -143,7 +163,7 @@ } .FormField__TermsLink { - color: white; + color: #646F7D; border-bottom: 1px solid #199087; text-decoration: none; display: inline-block; diff --git a/src/navbar.css b/src/navbar.css index 1d67a0e..4f106e9 100644 --- a/src/navbar.css +++ b/src/navbar.css @@ -2,14 +2,15 @@ * { box-sizing: border-box; + + text-decoration: none; } body { -background: #66bfbf; } header{ - +background: #66bfbf; position: fixed; top: 0; left: 0; @@ -18,7 +19,7 @@ header{ justify-content: space-between; align-items: center; transition: 0.6s; - padding: 20px 25px; + padding: 10px 15px; z-index: 100000; font-family: Ubuntu; @@ -38,7 +39,6 @@ header .logo{ text-decoration: none; text-transform: lowercase; padding-left: 100px; - transition: 0.6s; } header ul { @@ -53,20 +53,99 @@ header ul li { position: relative; list-style: none; + + } header ul li a { position: relative; - margin: 0 15px; - text-decoration: none; + margin: 5px 15px; + text-transform: uppercase; color: #fff; letter-spacing: 2px; font-weight: 500px; + padding: 5px 0; transition: 0.6s; +} +header ul li a:before{ + position: absolute; + content: ''; + left:0; + bottom: 0; + height: 15px; + width:100%; + background: #ffffff; + transform: scaleX(0); + transform-origin: right; + transition: transform .4s linear; +} +header ul li a:hover:before{ + + transform: scaleX(1); + transform-origin: left; } header.sticky ul li a{ color: #fff; } +.checkbtn +{ + color:white; + font-size: 30px; + float:right; + line-height: 80px; + margin-right: 40px; + cursor: pointer; + display: none; + +} +#check{ + display: none; +} + +@media (max-width: 1118px){ + header .logo{ + left: 8%; + } +} +@media (max-width: 944px){ + header .logo{ + left: 6%; + top: 20px; + width: 1030px; + + } +} +@media (max-width: 860px){ + label #btn{ + display: block; + } + ul { + position: fixed; + width: 100%; + height: 100vh; + background: #66bfbf; + text-align: center; + transition: all .5s; + } + header ul li{ + + display: block; + margin: 50px 0; + line-height: 30px; + + } + nav ul li a{ + + font-size: 20px; + } + label #check:checked ~ ul{ + + + } + + + +} \ No newline at end of file