Scribd
Upload
3 views6 pages

Lab 4

The document is an HTML structure for a webpage featuring a header and two main sections: 'featured' and 'secondary', each containing items with images and content. The CSS styles define the layout and appearance of these sections, including flexbox properties for alignment and spacing. Additionally, there is a JSON-like structure representing user data with fields for username, password, type, createdAt, and lastLogin timestamps.

Uploaded by

02 Anh Trương
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
3 views6 pages

Lab 4

The document is an HTML structure for a webpage featuring a header and two main sections: 'featured' and 'secondary', each containing items with images and content. The CSS styles define the layout and appearance of these sections, including flexbox properties for alignment and spacing. Additionally, there is a JSON-like structure representing user data with fields for username, password, type, createdAt, and lastLogin timestamps.

Uploaded by

02 Anh Trương
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 6

<!

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="lab4.css">
<title>Document</title>
</head>
<body>
<header class='header'>
<div class="header_item">Anh</div>
<div class="header_item">Anh</div>
<div class="header_item">Anh</div>
<div class="header_item">Anh</div>
<div class="header_item">Anh</div>
<div class="header_item">Anh</div>
</header>
<div class="wapper">
<div class="featured">

<div class="featured_item">
<img class="image" src="anh.png">
<div class="content">anh ddepj trai so maaoyj vieetj nam</div>
</div>
<div class="featured_item">
<img class="image" src="anh.png">
<div class="content">anh ddepj trai so maaoyj vieetj nam</div>
</div>
<div class="featured_item">
<img class="image" src="anh.png">
<div class="content">anh ddepj trai so maaoyj vieetj nam</div>
</div>
</div>
<div class="secondary">

<div class="secondary_item">
<img class="image" src="anh.png">
<div class="content">anh ddepj trai so maaoyj vieetj nam</div>
</div>
<div class="secondary_item">
<img class="image" src="anh.png">
<div class="content">anh ddepj trai so maaoyj vieetj nam</div>
</div>

</div>
</div>
</body>
</html>

.header{
display: flex;
justify-content: space-around;
align-items: center;
height: 80px;
background-color: rgb(154, 226, 202);
}
.header_item{
border: solid 1px black;
border-bottom:solid 2px black ;
background-color: aqua;
height: 30px;
width: 80px;
text-align: center;
}

.wapper{

height: 100%;
width: 100%;
padding-top: 20px;
display: flex;
justify-content: center;
align-items: center;

.featured{
margin-right: 20px;
border-radius: 20px;
border: solid 5px aquamarine;
height: 800px;
width: 40%;
background-color: rgba(127, 255, 212, 0.519);

.secondary{
border: solid 5px rgb(12, 226, 36);
border-radius: 20px;
height: 800px;
width: 40%;
background-color: rgba(12, 226, 37, 0.707);
}

.featured_item{

display: flex;
justify-content: space-around;
border: solid 5px rgba(182, 193, 183, 0.699);

border-radius: 20px;
}

.featured_item .image{
object-fit: cover;
height: 200px;
width: 200px;
}
.featured_item .content{

height: 200px;
width: 200px;
}
.secondary_item{
border: solid 5px rgba(182, 193, 183, 0.699);

border-radius: 20px;
}

.secondary_item .image{
object-fit: cover;
height: 200px;
width: 200px;
}
.secondary_item .content{

height: 200px;
width: 200px;
}

{
"_id": ObjectId("..."),
"username": "user",
"password": "hashed_password", // Mã hóa mật khẩu
"type": ["admin", "customer"], // Vai trò của người dùng
"createdAt": Date("2023-10-11T10:00:00Z"),
"lastLogin": Date("2023-10-10T10:00:00Z")
}

You might also like