diff --git a/index.html b/index.html index 4d9c5598..030785c3 100644 --- a/index.html +++ b/index.html @@ -359,6 +359,8 @@

You Dont Need JavaScript

Loader 11 Loader 12 Loader 13 + + @@ -444,6 +446,7 @@

You Dont Need JavaScript

Glassmorphism Login Page + Registration Form diff --git a/registration form/index.html b/registration form/index.html new file mode 100644 index 00000000..5d1f7c86 --- /dev/null +++ b/registration form/index.html @@ -0,0 +1,108 @@ + + + + + + + Responsive Registration Form + + + + + +
+ +
Registration Form
+ +
+ +
+ + +
+ +
+ + +
+ +
+ +
+ + +
+ +
+ + +
+ +
+ +
+ +

Gender

+ +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ +
+ +
+ + + + + +
+ +
+ + +
+ + + +
+ +
+ + + + +
+ +
+ + + +
+ +
+ + + + \ No newline at end of file diff --git a/registration form/style.css b/registration form/style.css new file mode 100644 index 00000000..8a9eb71a --- /dev/null +++ b/registration form/style.css @@ -0,0 +1,157 @@ +@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600&display=swap'); + +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: "Poppins", sans-serif; + user-select: none; +} + +body { + min-height: 100vh; + display: flex; + align-items: center; + justify-content: center; + padding: 20px; + background: rgb(130, 106, 251); +} + +.container { + position: relative; + max-width: 700px; + width: 100%; + background: #fff; + padding: 25px; + border-radius: 8px; + box-shadow: 0 0 15px rgba(0, 0, 0, 0.1); +} + +.container header { + font-size: 1.5rem; + color: #333; + font-weight: 500; + text-align: center; +} + +.container .form { + margin-top: 30px; +} + +.form .input-box { + width: 100%; + margin-top: 20px; +} + +.input-box label { + color: #333; +} + +.form :where(.input-box input, .select-box) { + position: relative; + height: 50px; + width: 100%; + outline: none; + font-size: 1rem; + color: #707070; + margin-top: 8px; + border: 1px solid #ddd; + border-radius: 6px; + padding: 0 15px; + outline: none; + -webkit-tap-highlight-color: transparent; +} + +.input-box input:focus { + box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1); +} + +.form .column { + display: flex; + column-gap: 15px; +} + +.form .gender-box { + margin-top: 20px; +} + +.gender-box h3 { + color: #333; + font-size: 1rem; + font-weight: 400; + margin-bottom: 8px; +} + +.gender { + outline: none; + -webkit-tap-highlight-color: transparent; +} + +.form :where(.gender-option, .gender) { + display: flex; + align-items: center; + column-gap: 15px; + flex-wrap: wrap; +} + +.form .gender { + column-gap: 5px; + cursor: pointer; +} + +.gender input { + accent-color: rgb(130, 106, 251); +} + +.form :where(.gender input, .gender label) { + cursor: pointer; +} + +.gender label { + color: #707070; +} + +.address :where(input, .select-box) { + margin-top: 20px; +} + +.select-box select { + height: 100%; + width: 100%; + outline: none; + border: none; + color: #707070; + font-size: 1rem; +} + +.form button { + height: 55px; + width: 100%; + color: #fff; + font-size: 1rem; + font-weight: 400; + border: none; + margin-top: 30px; + cursor: pointer; + border-radius: 6px; + transition: all 0.2s ease; + background-color: rgb(130, 106, 251); + outline: none; + -webkit-tap-highlight-color: transparent; +} + +.form button:hover { + background-color: rgb(88, 56, 250); +} + +/* Responsive */ + +@media screen and (max-width: 500px) { + .form .column { + flex-wrap: wrap; + } + + .form :where(.gender-option, .gender) { + row-gap: 15px; + } +} \ No newline at end of file