diff --git a/Sign_In_And_Sign_up_page/index.html b/Sign_In_And_Sign_up_page/index.html new file mode 100644 index 0000000..fc2a619 --- /dev/null +++ b/Sign_In_And_Sign_up_page/index.html @@ -0,0 +1,49 @@ + + + + + + + + +
+
Sign Up
+
+
+
+
+ Full Name + +
+
+ Username + +
+
+ Email + +
+
+ Phone Number + +
+
+ Password + +
+
+ Confirm Password + +
+
+
+ +
+ 
Already have an account ?
+ Login +
+
+
+ + + diff --git a/Sign_In_And_Sign_up_page/style.css b/Sign_In_And_Sign_up_page/style.css new file mode 100644 index 0000000..b526f70 --- /dev/null +++ b/Sign_In_And_Sign_up_page/style.css @@ -0,0 +1,148 @@ +@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap'); +*{ + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Poppins',sans-serif; +} +body{ + height: 100vh; + display: flex; + justify-content: center; + align-items: center; + padding: 10px; + background: black; +} +.container{ + max-width: 700px; + width: 100%; + background: linear-gradient(135deg, #71b7e6, #9b59b6); + + padding: 25px 30px; + border-radius: 5px; + box-shadow: 0 5px 10px rgba(0,0,0,0.15); +} +.container .title{ + font-size: 25px; + font-weight: 500; + position: relative; +} +.container .title::before{ + content: ""; + position: absolute; + left: 0; + bottom: 0; + height: 3px; + width: 30px; + border-radius: 5px; + background: linear-gradient(135deg, #71b7e6, #9b59b6); +} +.content form .user-details{ + display: flex; + flex-wrap: wrap; + justify-content: space-between; + margin: 20px 0 12px 0; +} +form .user-details .input-box{ + margin-bottom: 15px; + width: calc(100% / 2 - 20px); +} +form .input-box span.details{ + display: block; + font-weight: 500; + margin-bottom: 5px; +} +.user-details .input-box input{ + height: 45px; + width: 100%; + outline: none; + font-size: 16px; + border-radius: 5px; + padding-left: 15px; + border: 1px solid #ccc; + border-bottom-width: 2px; + transition: all 0.3s ease; +} +.user-details .input-box input:focus, +.user-details .input-box input:valid{ + border-color: #9b59b6; +} + form .gender-details .gender-title{ + font-size: 20px; + font-weight: 500; + } + form .category{ + display: flex; + width: 80%; + margin: 14px 0 ; + justify-content: space-between; + } + form .category label{ + display: flex; + align-items: center; + cursor: pointer; + } + form .category label .dot{ + height: 18px; + width: 18px; + border-radius: 50%; + margin-right: 10px; + background: #d9d9d9; + border: 5px solid transparent; + transition: all 0.3s ease; +} + #dot-1:checked ~ .category label .one, + #dot-2:checked ~ .category label .two, + #dot-3:checked ~ .category label .three{ + background: #9b59b6; + border-color: #d9d9d9; + } + form input[type="radio"]{ + display: none; + } + form .button{ + height: 45px; + margin: 35px 0 + } + form .button input{ + height: 100%; + width: 100%; + border-radius: 5px; + border: none; + color: #fff; + font-size: 18px; + font-weight: 500; + letter-spacing: 1px; + cursor: pointer; + transition: all 0.3s ease; + background: linear-gradient(135deg,black, grey); + } + form .button input:hover{ + /* transform: scale(0.99); */ + background: linear-gradient(135deg,black,#71b7e6); + + } + @media(max-width: 584px){ + .container{ + max-width: 100%; +} +form .user-details .input-box{ + margin-bottom: 15px; + width: 100%; + } + form .category{ + width: 100%; + } + .content form .user-details{ + max-height: 300px; + overflow-y: scroll; + } + .user-details::-webkit-scrollbar{ + width: 5px; + } + } + @media(max-width: 459px){ + .container .content .category{ + flex-direction: column; + } +} diff --git a/Sign_In_And_Sign_up_page/test.html b/Sign_In_And_Sign_up_page/test.html new file mode 100644 index 0000000..b010721 --- /dev/null +++ b/Sign_In_And_Sign_up_page/test.html @@ -0,0 +1,33 @@ + + + + Login Form + + + +

Login Page


+
+
+ + +

+ + +

+
+ +
+
+ + + Remember me +

+ Forgot Password +
+
+ + \ No newline at end of file diff --git a/Sign_In_And_Sign_up_page/test1.css b/Sign_In_And_Sign_up_page/test1.css new file mode 100644 index 0000000..6f46dad --- /dev/null +++ b/Sign_In_And_Sign_up_page/test1.css @@ -0,0 +1,74 @@ +body { + margin: 0; + padding: 0; + background-color: black; + font-family: "Arial"; +} +.login { + width: 382px; + overflow: hidden; + margin: auto; + margin: 20 0 0 450px; + padding: 80px; + + background: linear-gradient(135deg, #71b7e6, #9b59b6); + + border-radius: 15px; +} +h1 { + text-align: center; + color: white; + padding: 20px; +} +label { + color: white; + font-size: 15px; +} +#Uname { + width: 300px; + height: 30px; + border: none; + border-radius: 3px; + padding-left: 8px; +} +#Pass { + width: 300px; + height: 30px; + border: none; + border-radius: 3px; + padding-left: 8px; +} +#log { + width: 300px; + height: 30px; + border: none; + border-radius: 17px; + padding-left: 7px; + color: blue; +} +span { + color: white; + font-size: 17px; +} +a { + float: right; + color: white; +} + +form .button input { + height: 100%; + width: 82%; + border-radius: 5px; + border: none; + color: #fff; + font-size: 25px; + font-weight: 500; + letter-spacing: 1px; + cursor: pointer; + transition: all 0.3s ease; + background: linear-gradient(135deg, black, grey); +} +form .button input:hover { + /* transform: scale(0.99); */ + background: linear-gradient(135deg, black, #71b7e6); +}