From 6138a3a5a8195f1b03a4921eec04f4cd90a6c3dc Mon Sep 17 00:00:00 2001 From: poorvikaa08 Date: Wed, 2 Oct 2024 23:36:21 +0530 Subject: [PATCH 1/2] create login and signup page --- index.html | 13 +++++- login.html | 43 +++++++++++++++++ signup.html | 93 +++++++++++++++++++++++++++++++++++++ styles.css | 130 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 278 insertions(+), 1 deletion(-) create mode 100644 login.html create mode 100644 signup.html create mode 100644 styles.css diff --git a/index.html b/index.html index db9f616..53fe1a7 100644 --- a/index.html +++ b/index.html @@ -41,7 +41,10 @@

HARD WORK

IS FOR EVERY SUCCESS

Start by taking inspirations, continue it to give inspirations

- + + + +
@@ -574,6 +577,14 @@

NEWSLETTER

+ + + + diff --git a/login.html b/login.html new file mode 100644 index 0000000..2c85dbd --- /dev/null +++ b/login.html @@ -0,0 +1,43 @@ + + + + + + Login + + + + +
+
+

Login

+ +
+ + +
+
+ + +
+
+ + Forgot Password +
+ +
+

Don't have an account? Register

+
+
+
+ + + + + + \ No newline at end of file diff --git a/signup.html b/signup.html new file mode 100644 index 0000000..6fc512c --- /dev/null +++ b/signup.html @@ -0,0 +1,93 @@ + + + + + + Register + + + + +
+
+

Create Account

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

Already have an account? Login

+
+
+
+ + + + diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..f903888 --- /dev/null +++ b/styles.css @@ -0,0 +1,130 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: "Poppins", sans-serif; +} + +body { + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; + background-image: url("https://images.pexels.com/photos/841130/pexels-photo-841130.jpeg"); + background-size: cover; + background-position: center; + background-repeat: no-repeat; +} + +.wrapper { + width: 420px; + background: rgba(255, 255, 255, 0.3); + border: 2px solid rgba(255, 255, 255, 0.2); + backdrop-filter: blur(9px); + color: #000000; + border-radius: 12px; + padding: 30px 40px; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); +} + +.wrapper h2 { + font-size: 28px; + color: #000000; + text-align: center; +} + +.wrapper .input-box { + position: relative; + width: 100%; + height: 50px; + margin: 30px 0; +} + +.input-box input { + width: 100%; + height: 100%; + background: #d3d3d3; + outline: none; + border: 2px solid rgba(255, 255, 255, .2); + border-radius: 40px; + font-size: 16px; + color: #2e2e2e; + padding: 20px 45px 20px 20px; /* Adjust padding to make space for the eye icon */ +} + +.input-box input::placeholder { + color: #7c7a7a; +} + +.input-box i { + position: absolute; + right: 20px; /* Adjust position as needed */ + top: 30%; + transform: translate(-50%); + font-size: 20px; + cursor: pointer; /* Indicate that the icon is clickable */ +} +.remember-forgot { + display: flex; + justify-content: space-between; + font-size: 14.5px; + margin: -15px 0 15px; +} + +.remember-forgot label input { + accent-color: #000000; + margin-right: 3px; +} + +.remember-forgot a { + color: #050505; /* Original link color */ + text-decoration: none; +} + +.remember-forgot a:hover { + text-decoration: underline; /* Hover effect */ + color: #000000; /* Change color on hover if desired */ +} + +/* Styles for showing and hiding passwords */ +.input-box i.bx-show { + color: #007bff; /* Color when the password is visible */ +} + +.input-box i.bx-hide { + color: #7c7a7a; /* Default color when the password is hidden */ +} + +.wrapper .btn { + width: 100%; + height: 45px; + background: #dc030a; + border: none; + outline: none; + border-radius: 40px; + box-shadow: 0 0 10px rgba(0, 0, 0, .1); + cursor: pointer; + font-size: 16px; + color: #ffffff; + font-weight: 600; +} + +.wrapper .btn:hover { + background-color: rgb(135, 6, 12); +} + +.wrapper .register-link { + font-size: 14.5px; + text-align: center; + margin: 20px 0 15px; +} + +.register-link p a { + color: #000000; + text-decoration: none; + font-weight: 600; +} + +.register-link p a:hover { + text-decoration: underline; +} From 06caf27a5f4e0ca9f0593cac24a962ce32352110 Mon Sep 17 00:00:00 2001 From: poorvikaa08 Date: Thu, 3 Oct 2024 12:35:39 +0530 Subject: [PATCH 2/2] update login & signup page --- signup.html | 2 +- styles.css | 13 ++++++++++++- 2 files changed, 13 insertions(+), 2 deletions(-) diff --git a/signup.html b/signup.html index 6fc512c..6fde190 100644 --- a/signup.html +++ b/signup.html @@ -33,7 +33,7 @@

Create Account

-
+
diff --git a/styles.css b/styles.css index f903888..57579ca 100644 --- a/styles.css +++ b/styles.css @@ -32,7 +32,11 @@ body { color: #000000; text-align: center; } - +.wrapper h1 { + font-size: 28px; + color: #000000; + text-align: center; +} .wrapper .input-box { position: relative; width: 100%; @@ -119,6 +123,13 @@ body { margin: 20px 0 15px; } + +.wrapper .btn:active { + background-color: #004494; + transform: scale(1); +} + + .register-link p a { color: #000000; text-decoration: none;