Embedded Files
Title : HTML forms | Form design | Minimal Form Design
HTML :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="main.css">
<title>Login form</title>
</head>
<body>
<div class="form-container">
<div class="sidebar">
<p>Login to dive into world of creativity</p>
<img src="Images/image.png" alt="form_image">
</div>
<form action="#">
<h1>Login</h1>
<label>Username</label>
<input type="text">
<label>Password</label>
<input type="password">
<div class="terms">
<input type="checkbox">
<p>I agree to <a href="#">Terms and Conditions</a>
and <a href="#">Privacy Policy</a></p>
</div>
<button>Login</button>
</form>
</div>
</body>
</html>
CSS :
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: josefin sans;
}
:root {
--accent : #2962FF;
--secondary : #1DE9B6;
--white : #eeeeee;
}
body {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(to right ,var(--accent),var(--secondary));
}
.form-container {
width: 70%;
height: 85vh;
background: #fff;
display: flex;
justify-content: space-between;
align-items: center;
}
.sidebar {
width: 35%;
height: 100%;
background: var(--secondary);
display: flex;
justify-content: space-evenly;
align-items: center;
flex-direction: column;
}
.sidebar img {
width: 100%;
}
.sidebar p {
font-size: 2rem;
font-family: righteous;
width: 80%;
color:var(--accent)
}
form {
width: 65%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
form h1 {
font-size: 5rem;
color:var(--accent);
font-family: righteous;
margin: 0 0 50px 0;
}
input {
width: 50%;
padding: 10px 15px;
border: 2px solid var(--white);
background: var(--white);
outline: none;
margin-bottom: 25px;
font-size: 1.01rem;
}
label {
width: 50%;
padding: 0 0 10px 5px;
font-size: 1.1rem;
}
.terms {
width: 50%;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 1.01rem;
}
.terms input {
width: auto;
padding: 0;
margin: 0;
}
.terms p{
padding-left: 15px;
}
.terms a{
color:var(--accent);
text-decoration-color: var(--secondary);
}
button {
width: 50%;
padding: 12px 0;
border:none;
outline: none;
background: var(--accent);
color:var(--white);
font-size:1.1rem;
margin-top: 25px;
cursor: pointer;
transition: 0.3s;
}
button:hover {
background: var(--secondary);
color:var(--accent);
}
Page updated
Google Sites
Report abuse