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;
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>
Output:
Top comments (0)