<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class='container'>
<div class='info'>
<h1> Party Menu</h1>
<p> Tiệc nhằm chúc mừng các bạn học sinh hoàn thành khóa học level 1</p>
<ol>
<li> Bánh donut sốt sô cô la</li>
<li> Pancake si rô lá phong </li>
<li> Bánh kem red velvet</li>
<li> Bánh sô cô la oreo</li>
</ol>
</div>
<div class= 'hinh' id='pic1'>
<img src="uploads/42-20250705193013.jpeg"/>
</div>
<div class= 'hinh' id='pic2'>
<img src="uploads/42-20250705193222.jpeg"/>
</div>
<div class = 'hinh' id='pic3'>
<img src="uploads/42-20250705194014.jpeg"/>
</div>
<div class = 'hinh' id='pic4'>
<img src="uploads/42-20250705194235.jpeg"/>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
.container{
background-color: #cea3ff;
width: 600px;
height:300px;
position:relative;
}
.hinh {
width: 150px;
height: 150px;
}
.info {
position:absolute;
width:300px;
}
#pic1 {
background-color: #ffafa3;
position:absolute;
left: 300px;
}
#pic2 {
background-color: #ffd3a3;
position:absolute;
left: 450px;
}
#pic3 {
background-color:#fff4a3;
position:absolute;
left: 450px;
top: 150px;
}
#pic4 {
background-color: #ceffa3;
position:absolute;
left: 300px;
top: 150px;
}
img {
width:150px;
height:150px;
}
h1 {
color:red;
}
p {
color: brown;
}
li {
color: brown;
}