Merge pull request #322 from Pratham-bit/main

Login Form Submitted
E-Cell-VSSUT · Oct 31, 2022 · ffb4567 · ffb4567
2 parents be38d91 + 3c5bb6a
commit ffb4567
Show file tree

Hide file tree

Showing 2 changed files with 289 additions and 0 deletions.
diff --git a/Pratham login/index.html b/Pratham login/index.html
@@ -0,0 +1,161 @@
+<!DOCTYPE html>
+<html lang="em">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" contents="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="css/all.css">
+    <title>Login form </title>
+    </head>
+
+    <body>
+        <div class="container">
+            <div class="heading">Login Form</div>
+            <form action="#">
+                <div class="card-details">
+                    <div class="card-box">
+                        <span class="details">Full Name</span>
+                        <input type="text" placeholder="Enter your full name">
+                    </div>
+                    <div class="card-box">
+                        <span class="details">Age</span>
+                        <input type="text" placeholder="Enter your age">
+                    </div>
+                    <div class="card-box">
+                        <span class="details">Email</span>
+                        <input type="email" placeholder="Enter your email">
+                    </div>
+                    <div class="card-box">
+                        <span class="details">Phone Number</span>
+                        <input type="phone number" placeholder="Enter Your phone number">
+                    </div>
+                    <div class="card-box">
+                        <span class="details">Password</span>
+                        <input type="password" placeholder="Enter your password">
+                    </div>
+                    <div class="card-box">
+                        <span class="details">Confirm Password</span>
+                        <input type="text" placeholder="Confirm your password">
+                    </div>
+                </div>  
+                <div class="circal-form">
+                    <span class="circal-title">Gender</span>
+                    <div class="category">
+                        <input type="radio" name="Gender">Female
+                        <input type="radio" name="Gender">Male
+                        <input type="radio" name="Gender">Other
+                 </div>
+                </div>  
+                <div cxlass="button">
+                    <input type="submit" value="Submit">
+                </div>   
+            </form>
+        </div>
+        </body>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    </body>
+
+    </body>
diff --git a/Pratham login/style.css b/Pratham login/style.css
@@ -0,0 +1,128 @@
+{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana,Sans-serif;
+}
+body{
+    color: rgb(157, 40, 40);
+    display: flex;
+    height: 100vh;
+    justify-content: center;
+    align-items: center;
+    background: linear-gradient(135deg, hsl(109, 60%, 72%), #ebed72);
+    background-repeat: no-repeat;
+    padding: 10px;
+}
+.container{
+    max-width: 700px;
+    width: ;
+    height: 450px;
+    padding: 25px 30px;
+    border-radius: 25px;
+    background: linear-gradient(135deg, #ef5c51a4, hsl(278, 100%, 86%));
+    background-repeat: no-repeat;
+}
+.container .heading{
+    font-size: 25px;
+    font-weight:500;
+    position: center;
+    text-align: center;
+    padding: 0 0px 20px 0;
+}
+.container .heading::before{
+    content: '';
+    position: absolute;
+    height: 3px;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    background-color: gray;
+
+}
+.container form .card-details{
+    margin-top: 25px;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+}
+form .card-details .card-box{
+    width: calc(100% / 2 - 20px);
+    margin-bottom: 15px;
+}
+.card-details .card-box .details{
+    display: block;
+    font-weight: 500;
+    margin-bottom: 5px;
+}
+.card-details .card-box input{
+    height: 45px;
+    width: 100%;
+    outline: none;
+    border-radius: 5px;
+    border: 1px solid #ccc;
+    padding left: 15px;
+    font size: 16px;
+    border-bottom-width: 2px;
+    transition: all 0.3s ease;
+}
+.card-details .card-box input:focus,
+.card-details .card-box input:valid{
+    border-color: black;
+}
+form .circal-form .circal-title{
+    font-size: 20px;
+    font-weight: 500;
+    border-bottom: 2px solid;
+}
+form .circal-form .category{
+    margin-top: 10px;
+    margin-bottom: 10px;
+}
+form .button{
+    text-align: center;
+}
+form .button input{
+    padding: 10px;
+    margin-top: 10px;
+    height: 100%;
+    width: 50%;
+    outline: none;
+    font-size: 18px;
+    font-weight: 500;
+    border-radius: 5px;
+    letter-spacing: 1px;
+    background: linear-gradient(135deg, hsl(190, 100%, 86%) ,#f6ba39);
+
+}
+form .button input:hover{
+    background:linear-gradient(135deg, hsl(190, 100%, 86%) ,#f6ba39)  ;
+}
+
+
+
+
+
+
+
+
+
+@media (max-width:584px) {
+.container{
+    max-width: 100%;
+}
+form .card-details .card-box{
+    margin-bottom: 15px;
+    width: 100%;
+}
+form .circal-form .category{
+    width: 100%;
+}
+.container form .card-details{
+    max-height: 300px;
+    overflow: scroll;
+}
+.card-details::_webkit-scrollbar{
+    width: 0%;
+}
+}