HTML Code
<!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>Facebook</title>
<link rel="stylesheet" href="form7.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<main class="container">
<section class="left">
<img class="logo-facebook" src="https://static.xx.fbcdn.net/rsrc.php/y8/r/dF5SId3UHWd.svg" alt="facebook">
<h2>Facebook giúp bạn kết nối và chia sẻ với mọi người trong cuộc sống của bạn.</h2>
</section>
<section class="right">
<div class="upper-right">
<form class="login-form" action="" method="" name="login">
<div class="email-sdt">
<input type="text" name="email-sdt" placeholder="Email hoặc số điện thoại" id="email-sdt" autofocus/>
</div>
<div class="password">
<input type="password" name="mat-khau" placeholder="Mật khẩu" id="mat-khau">
</div>
<div class="password">
<button class="dang-nhap" type="submit">Đăng nhập</button>
</div>
</form>
<a class="quen-mat-khau" href="https://www.facebook.com/login/identify/?ctx=recover&ars=facebook_login&from_login_screen=0">Quên mật khẩu?</a>
<span class="line"></span>
<div class="tao-tai-khoan-moi">
<label id="tao-tai-khoan-moi" for="popup">Tạo tài khoản mới</label>
<!-- for la cho id -->
</div>
</div>
<input type="checkbox" id="popup">
<div class="popup">
<div class="popup-content">
<label id="close" for="popup"><img id="close" src="https://static.xx.fbcdn.net/rsrc.php/v3/y2/r/__geKiQnSG-.png" alt="close-button"></label>
<form class="tao-tai-khoan-moi" action="" name="tao-tai-khoan-moi">
<h2>Đăng ký</h2>
<p>Nhanh chóng và dễ dàng</p>
<span class="line-dang-ki"></span>
<div class="ho">
<input type="text" name="ho" placeholder="Họ" id="ho" autofocus required/>
</div>
<div class="ten">
<input type="text" name="ten" placeholder="Tên" id="ten" required/>
</div>
<div class="sdt-hoac-email">
<input type="text" name="sdt-hoac-email" placeholder="Số di động hoặc email" id="sdt-hoac-email" required/>
</div>
<div class="mat-khau-moi">
<input type="password" name="mat-khau-moi" placeholder="Mật khẩu mới" id="mat-khau-moi" required/>
</div>
<div class="ngay-sinh">
<p>Ngày sinh</p>
<input name="ngay" type=text id="ngay" value="5" required>
<select name="thang" id="thang" required>
<option value="">---</option>
<option value="thang-1">Tháng 1</option>
<option value="thang-2">Tháng 2</option>
<option value="thang-3" selected>Tháng 3</option>
<option value="thang-4">Tháng 4</option>
<option value="thang-5">Tháng 5</option>
<option value="thang-6">Tháng 6</option>
<option value="thang-7">Tháng 7</option>
<option value="thang-8">Tháng 8</option>
<option value="thang-9" selected>Tháng 9</option>
<option value="thang-10">Tháng 10</option>
<option value="thang-11">Tháng 11</option>
<option value="thang-12">Tháng 12</option>
</select>
<input name="nam" type="nam" id="nam" value="2021" required>
</div>
<p>Bằng cách nhấp vào đăng ký, bạn đồng ý với Điều khoản, Chính sách dữ liệu và Chính sách cookie của chúng tôi. Bạn có thể nhận được thông báo của chúng tôi qua SMS và hủy nhận bất kỳ lúc nào.</p>
<button type="submit" id="submit">Đăng ký</button>
</form>
</div>
</div>
</div>
<div class="below-right">
<p>Tạo Trang dành cho người nổi tiếng, nhãn hiệu hoặc doanh nghiệp.</p>
</div>
</section>
</main>
</body>
</html>
CSS Code
body {
background: #f0f2f5;
}
.container {
display: block;
width: 980px;
margin-left: auto;
margin-right: auto;
padding-top: 112px;
padding-bottom: 72px;
}
.left {
box-sizing: border-box;
display: inline-block;
width: 580px;
padding-right: 32px;
vertical-align: top;
}
.logo-facebook {
width: 301.06px;
margin: 0%;
}
.left h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 28px;
font-weight: normal;
width: 500px;
margin-top: 0%;
position: relative;
}
.right {
display: inline-block;
width: 396px;
vertical-align: top;
}
.upper-right {
align-items: center;
background-color: #fff;
border: none;
border-radius: 8px;
box-shadow: 0 2px 4px rgb(0 0 0 / 10%), 0 8px 16px rgb(0 0 0 / 10%);
box-sizing: border-box;
margin: 40px 0 0;
padding: 20px 0 28px;
width: 396px;
}
.login-form {
box-sizing: border-box;
width: 100%;
padding-left: 20px;
padding-right: 20px;
}
.email-sdt {
box-sizing: border-box;
width: 100%;
display: block;
padding: 6px;
}
.upper-right .login-form input {
box-sizing: border-box;
border-radius: 6px;
font-size: 17px;
padding: 14px 16px;
width: 100%;
border: 1px solid #dddfe2;
list-style: 16px;
vertical-align: middle;
}
.password {
padding: 14px 6px;
box-sizing: border-box;
width: 100%;
}
.dang-nhap {
box-sizing: border-box;
padding-top: 6px;
width: 100%;
margin-left: auto;
margin-right: auto;
cursor: pointer;
position: relative;
border-radius: 6px;
border: none;
font-size: 20px;
line-height: 48px;
padding: 0 16px;
width: 100%;
background-color: #1877f2;
color: white;
font-size: 20px;
font-weight: bolder;
}
.quen-mat-khau {
display: block;
color: #1877f2;
font-size: 14px;
font-weight: 500;
cursor: pointer;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
margin-top: 16px;
}
.line {
align-items: center;
border-bottom: 1px solid #dadde1;
display: flex;
margin: 20px 16px;
text-align: center;
}
.tao-tai-khoan-moi {
text-align: center;
}
#tao-tai-khoan-moi {
font-family: Arial, Helvetica, sans-serif;
padding-top: 6px;
border: none;
border-radius: 6px;
font-size: 17px;
line-height: 48px;
padding: 0 16px;
cursor: pointer;
display: inline-block;
text-decoration: none;
background-color: #42b72a;
color: #fff;
position: relative;
text-align: center;
}
#popup {
display: none;
}
#popup:not(:checked) + .popup {
visibility: hidden;
}
#popup:checked + .popup {
visibility: visible;
background-color: rgb(255 255 255 / 50%);
}
.popup {
box-sizing: border-box;
position: fixed;
/* Để căn giữa với position */
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.popup-content {
position: fixed;
box-sizing: border-box;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
border-radius: 8px;
overflow: hidden;
width: 432px;
padding: 10px;
box-shadow: 0 2px 4px rgb(0 0 0 / 10%), 0 8px 16px rgb(0 0 0 / 10%);
}
#close{
position: absolute;
right: 11px;
top: 11px;
cursor: pointer;
}
.tao-tai-khoan-moi > h2{
font-family: Helvetica, Arial, sans-serif;
text-align: left;
padding-left: 11px;
font-size: 30px;
margin-bottom: 0%;
margin-top: 0%;
}
h2 + p{
text-align: left;
font-family: Helvetica, Arial, sans-serif;
padding-left: 13px;
margin-top: 0%;
}
.ho {
display: inline-block;
border-color: #ccd0d5;
margin-left: 0%;
position:relative;
}
.ten {
display: inline-block;
border-color: #ccd0d5;
position:relative;
}
#ho,
#ten {
position: relative;
font-family: Helvetica, Arial, sans-serif;
font-size: 15px;
line-height: 16px;
padding: 12px;
border-radius: 5px;
width: 80%;
border: 1px solid #ccd0d5;
width: 160px;
margin-bottom: 11px;
}
#sdt-hoac-email:invalid {
border: 1px solid red;
}
#ho:invalid {
border: 1px solid red;
}
#ten:invalid{
border: 1px solid red;
}
#mat-khau-moi:invalid {
border-color: red;
}
.sdt-hoac-email {
width: 383px;
margin-left: auto;
margin-right: auto;
margin-bottom: 11px;
}
#sdt-hoac-email {
box-sizing: border-box;
border: 1px solid #ccd0d5;
border-radius: 5px;
border-color: #ccd0d5;
width: 100%;
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
line-height: 16px;
padding: 11px;
}
.mat-khau-moi {
width: 383px;
margin-left: auto;
margin-right: auto;
margin-bottom: 11px;
}
#mat-khau-moi {
box-sizing: border-box;
border: 1px solid #ccd0d5;
border-radius: 5px;
border-color: #ccd0d5;
width: 100%;
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
line-height: 16px;
padding: 11px;
}
.line-dang-ki {
align-items: center;
border-bottom: 1px solid #dadde1;
display: flex;
margin-top: 16px;
margin-bottom: 16px;
text-align: center;
width: 100%;
}
.ngay-sinh > p {
color: #606770;
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
font-weight: normal;
line-height: 20px;
margin-bottom: 0;
margin-top: 2px;
text-align: left;
padding-left: 11px;
}
.ngay-sinh{
display: block;
margin-left: 4px;
margin-right: 4px;
}
#ngay, #thang, #nam{
display: inline-block;
width: 30%;
border-radius: 4px;
color: #1c1e21;
font-family: Helvetica, Arial, sans-serif;
font-size: 15px;
font-weight: normal;
height: 36px;
line-height: 20px;
border: 1px solid #ccd0d5;
}
#thang {
height: 40px;
}
.ngay-sinh ~ p{
color: #777;
font-size: 11px;
font-family: Arial, Helvetica, sans-serif;
margin-left:14px ;
margin-right: 14px;
text-align: justify;
}
#submit {
background-color: #00a400;
border: none;
border-radius: 6px;
box-shadow: none;
color: #fff;
font-size: 18px;
font-weight: 600;
height: 36px;
overflow: hidden;
padding: 0 32px;
text-shadow: none;
}
#submit:hover{
background: linear-gradient(#79bc64, #578843);
}
.material-icons{
position: absolute ;
}
.below-right{
display: block;
font-family: Arial, Helvetica, sans-serif;
text-align: justify;
width: 100%;
margin-left: auto;
margin-right: auto;
font-size: 12px;
}
Hey! Let’s Connect.
Trang (Tee) Thao Nguyen
Trang "Tee" Nguyen 