Disini kita akan membuat form login mengunakan css dengan metode fluid layout ok langsung saja kita gas seperti biasa buat file html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Fluid Layout</title>
</head>
<body>
<form>
<input type="text" class="name" placeholder="Username">
<input type="text" class="email" placeholder="password">
<button>Login</button>
</form>
</body>
</html>
Setelah selesai membuat tampilan html kemudian buat file css untuk mengatur ukuran fluid layout
body{
display: grid;
place-items: center;
height: 100vha
color: #fff;
background: #0A1421;
}
form{
font-size: 16px;
border: 1px solid #ffffffbf;
overflow: auto;
resize: horizontal;
min-width: 200px;
border-radius: 5px;
padding: 20px;
display: flex;
flex-wrap: wrap;
gap: 6px;
}
input{
padding: 10px 14px;
outline: none;
color: #e2e2e2;
background: #dedede29;
border: 1px solid #ffffff8f;
border-radius: 4px;
}
.name{
flex: 1 0 130px;
}
.email{
flex: 1 0 130px;
}
button{
flex: 1 0 40px;
background: #0d6efd;
padding: 10px 10px;
border-radius: 4px;
font-size: 14px;
color: #e2e2e2;
outline: none;
border: 1px solid transparent;
}
0 Komentar