Day 1 #100DaysOfCode
Hôm nay tôi sẽ thực hiện một dự án cho riêng mình, nói dự án thì thấy nó ghê ghê sao đó kaka, nói chung thấy mọi người đang thử thách #100DaysOfCode. Nên thử làm theo mọi người xem sao kaka, Đầu tiên hãy hóa thân vào một người chưa biết gì về code, để thử thách #100DaysOfCode xem sao.
Day 1: Ngày đầu tiên em đến trường ... và thầy cô giáo dạy nhiều thứ và em về nhà làm bài tập như sau: hãy làm bài tập về nhà tạo một Form Login Using Html+Css
Đầu tiên mình nhìn giao diện bên trên và mình đã thực hiện code như sau:
Code Html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Login</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Oswald&display=swap" rel="stylesheet">
</head>
<body>
<div class="form_hoa">
<div class="box_login">
<form action="" method="POST">
<h2>Login Cpanel</h2>
<div class="row-item">
<label for="email">Email</label>
<input type="email" name="email" placeholder="Enter Email" />
</div>
<div class="row-item">
<label for="password">Password</label>
<input type="password" name="password" placeholder="Enter Password" />
</div>
<div class="row-item">
<button type="submit">Login</button>
</div>
</form>
</div>
</div>
</body>
</html>
Đoạn code trên mình viết Form html, đồng thời có chèn một thư viện font google vào để font chữ cho đẹp đẹp tí, nói chung mình tệ về giao diện lắm chắc mọi người thấy xấu là chắc rồi :)
Tiếp theo mình viết CSS cho Form Login trên như sau:
*{margin:0;padding:0}
body{
width:100%;
margin: 0 auto;
max-width: 1350px;
font-family: 'Oswald', sans-serif;
background: #F0E4E4;
}
.form_hoa{
width: 40%;
margin: auto;
}
.form_hoa>.box_login{
width: 100%;
margin-top: 30%;
background-color: #d5d5d5;
box-shadow: 0 0 2px #000;
border-radius: 10px;
padding: 20px;
box-sizing: border-box;
}
.box_login form h2{
text-align: center;
color:#000;
font-size: 30px;
}
.box_login form>div{
padding: 5px 0px;
}
.box_login form label{
padding: 3px 0;
display: block;
font-weight: bold;
}
.box_login form input{
width: 100%;
border:none;
background-color: #fff;
padding: 15px;
border-radius: 5px;
box-sizing: border-box;
}
.box_login form button{
width: 100%;
border:none;
background: #333;
color:#fff;
padding: 11px;
border-radius: 5px;
box-sizing: border-box;
text-align: center;
font-size: 20px;
}
Okay, vậy là xong, chỉ là HTML/CSS thôi, nên cũng khá là phức tạp với một người mới vào lớp như mình, nói chung vậy là tạm ổn của (Day 1 #100DaysOfCode)