DEV Community

Alaguselvan T
Alaguselvan T

Posted on

Login Form -Instagram

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form</title>

<style>
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family: Arial, sans-serif;
}

body{
    height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    background: linear-gradient(to left, #e9513d, #8a2be2);
}

.container{
    border: 1px solid blueviolet;
    background:white;
    padding:25px;
    border-radius:15px;
    width:300px;

}

h1{
    font-family: cursive;
    text-align:center;
    margin-bottom:10px;
    color: #E1306C;
    font-weight: bold;
}


hr{
    margin-bottom:15px;
}


.form-group{
    margin-bottom:12px;
}


label{
    display:block;
    margin-bottom:5px;
    font-size:14px;
}

input{
    width:100%;
    padding:8px;
    border-radius:6px;
    border:1px solid #ccc;
}

.gender{
    display:flex;
}

a{
    font-size:13px;
    display:block;
    text-align:right;

}

button{
    width:100%;
    padding:10px;
    border:none;
    border-radius:20px;
    background:linear-gradient(to left ,rgb(33, 145, 139),rgb(198, 37, 204));
    color:white;
    margin-top:8px;
    cursor:pointer;
}

.or{
    text-align:center;
    margin:10px ;
    font-size:13px;
}
</style>

</head>

<body>

<div class="container">

    <h1>Instagram</h1>
    <hr>

    <form>

        <div class="form-group">
            <label>Name</label>
            <input type="text" placeholder="Enter your Name">
        </div>

        <div class="form-group">
            <label>Age</label>
            <input type="number" placeholder="Enter your Age">
        </div>

        <div class="form-group">
            <label>Gender</label>
            <div class="gender">
                <label><input type="radio" name="gender"> Male</label>
                <label><input type="radio" name="gender"> Female</label>
            </div>
        </div>

        <div class="form-group">
            <label>Address</label>
            <input type="text" placeholder="Enter Address">
        </div>

        <a href="#">Forgot password?</a>

        <div class="or">------------ OR ------------</div>

        <button type="submit">Submit</button>
        <button type="button">Sign Up</button>

    </form>

</div>

</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Output:

New Css used in this code:
Introducting Font family in Universal Selector:
font-family: Arial, sans-serif;

Linear Gradient color:
linear-gradient in CSS means smoothly changing from one color to another color in a straight line.
background: linear-gradient(to left, #e9513d, #8a2be2);

Font Cursive:
Make a font Curve
font-family: cursive;

Font Bold:
Make a font Bold
font-weight: bold;

Display-Block:
No other elements will be allowed in that same width.It will block the entire width for that element
display:block;

Cursor Pointer:
whenever the mouse is pointing the element It will be changed to the pointer.
cursor:pointer;

Font Size:
Declaring the Font Size
font-size:13px;

Top comments (0)