diff --git a/Sashmit/Readme.md b/Sashmit/Readme.md new file mode 100644 index 0000000..ece7b71 --- /dev/null +++ b/Sashmit/Readme.md @@ -0,0 +1 @@ +issue #1 diff --git a/Sashmit/image1.jpg b/Sashmit/image1.jpg new file mode 100644 index 0000000..a997bf9 Binary files /dev/null and b/Sashmit/image1.jpg differ diff --git a/Sashmit/login.css b/Sashmit/login.css new file mode 100644 index 0000000..d35b7c5 --- /dev/null +++ b/Sashmit/login.css @@ -0,0 +1,99 @@ +*{ + 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('image/image1.jpg'); + background-size:100vw; + background-repeat:no-repeat ; + background-position: center; +} +.wrapper{ + width: 420px; + background: transparent; + color: #fff; + border-radius: 10px; + padding: 30px 40px; +} +.wrapper h1{ + font-size: 36px; + text-align: center; +} +.wrapper .input-box{ + position: relative; + width: 100%; + height: 50px; + margin: 30px 0; +} +.input-box input{ + width: 100%; + height: 100%; + background: transparent; + border: none; + outline: none; + border: 2px solid rgba(255,255,255,.2); + border-radius: 40px; + font-size: 16px; + color: #fff; + padding: 20px 45px 20px 20px; +} +.input-box input::placeholder{ + color: #fff; +} +.input-box box-icon{ + position: absolute; + right: 20px; + top: 50%; + transform: translateY(-50%); + font: size 20px; +} +.wrapper .remember-forget{ + display: flex; + justify-content: space-between; + font-size: 14.5px; + margin: -15px 0 15px; +} +.remember-forget label input{ + accent-color: #fff; + margin-right: 3px; +} +.remember-forget a{ + color: #fff; + text-decoration: none; +} +.remember-forget a:hover{ + text-decoration: underline; +} +.wrapper .btn{ + width: 100%; + height: 45px; + background: #fff; + border: none; + outline: none; + border-radius: 40px; + box-shadow: 0 0 10px rgba(0,0,0,.1 ); + cursor: pointer; + font-size: 16px; + color: #333; + font-weight: 600; +} +.wrapper .register-link{ + font-size: 14.5px; + text-align: center; + margin: 20px 0 15px; +} +.register-link p a{ + color: #fff; + text-decoration: none; + font-weight: 600; +} +.register-link p a :hover{ + text-decoration: underline; +} \ No newline at end of file diff --git a/Sashmit/login.html b/Sashmit/login.html new file mode 100644 index 0000000..0fa2bbc --- /dev/null +++ b/Sashmit/login.html @@ -0,0 +1,35 @@ + + + + + + web1 + + + + +
+
+

LOGIN

+
+ + +
+
+ + +
+
+ + forgot password? + +
+ +
+

don't have an account ?register

+
+
+
+ + + \ No newline at end of file diff --git a/Sashmit11/index.html b/Sashmit11/index.html new file mode 100644 index 0000000..403abc2 --- /dev/null +++ b/Sashmit11/index.html @@ -0,0 +1,75 @@ + + + + + Responsive Registration Form + + + + +
+

Registration

+
+ +
+ Gender +
+ + + + + + +
+
+
+ +
+
+
+ + \ No newline at end of file diff --git a/Sashmit11/readme.md b/Sashmit11/readme.md new file mode 100644 index 0000000..37ab655 --- /dev/null +++ b/Sashmit11/readme.md @@ -0,0 +1 @@ +## issue11 diff --git a/Sashmit11/style.css b/Sashmit11/style.css new file mode 100644 index 0000000..3a31a17 --- /dev/null +++ b/Sashmit11/style.css @@ -0,0 +1,143 @@ +*{ + padding: 0; + margin: 0; + box-sizing: border-box; + font-family: sans-serif; +} + +body{ + display: flex; + height: 100vh; + justify-content: center; + align-items: center; + background: url(bg-image.jpg); + background-size: cover; +} + +.container{ + width: 100%; + max-width: 650px; + background: rgba(0, 0, 0, 0.5); + padding: 28px; + margin: 0 28px; + border-radius: 10px; + box-shadow: inset -2px 2px 2px white; +} + +.form-title{ + font-size: 26px; + font-weight: 600; + text-align: center; + padding-bottom: 6px; + color: white; + text-shadow: 2px 2px 2px black; + border-bottom: solid 1px white; +} + +.main-user-info{ + display: flex; + flex-wrap: wrap; + justify-content: space-between; + padding: 20px 0; +} + +.user-input-box:nth-child(2n){ + justify-content: end; +} + +.user-input-box{ + display: flex; + flex-wrap: wrap; + width: 50%; + padding-bottom: 15px; +} + +.user-input-box label{ + width: 95%; + color: white; + font-size: 20px; + font-weight: 400; + margin: 5px 0; +} + +.user-input-box input{ + height: 40px; + width: 95%; + border-radius: 7px; + outline: none; + border: 1px solid grey; + padding: 0 10px; +} + +.gender-title{ + color:white; + font-size: 24px; + font-weight: 600; + border-bottom: 1px solid white; +} + +.gender-category{ + margin: 15px 0; + color: white; +} + +.gender-category label{ + padding: 0 20px 0 5px; +} + +.gender-category label, +.gender-category input, +.form-submit-btn input{ + cursor: pointer; +} + +.form-submit-btn{ + margin-top: 40px; +} + +.form-submit-btn input{ + display: block; + width: 100%; + margin-top: 10px; + font-size: 20px; + padding: 10px; + border:none; + border-radius: 3px; + color: rgb(209, 209, 209); + background: rgba(63, 114, 76, 0.7); +} + +.form-submit-btn input:hover{ + background: rgba(56, 204, 93, 0.7); + color: rgb(255, 255, 255); +} + +@media(max-width: 600px){ + .container{ + min-width: 280px; + } + + .user-input-box{ + margin-bottom: 12px; + width: 100%; + } + + .user-input-box:nth-child(2n){ + justify-content: space-between; + } + + .gender-category{ + display: flex; + justify-content: space-between; + width: 100%; + } + + .main-user-info{ + max-height: 380px; + overflow: auto; + } + + .main-user-info::-webkit-scrollbar{ + width: 0; + } +} \ No newline at end of file