<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class='container'>
<div class='info'>
<h2>PARTY MENU</h2>
<h3>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</h3>
<P>1. Bánh oreo</P>
<P>2. Bánh oreo</P>
<P>3. Bánh oreo</P>
<P>4. Bánh oreo</P>
</div>
<div class='hinh' id='pic1'>
<img src='https://th.bing.com/th/id/OIP.VeHAJWJNV2xhjCcSfpNOswHaHa?w=185&h=185&c=7&r=0&o=7&dpr=1.5&pid=1.7&rm=3' />
</div>
<div class='hinh' id='pic2'>
<img src='https://th.bing.com/th/id/OIP.xdRVfV63CGAGXkZc1QAAgQHaHa?w=197&h=197&c=7&r=0&o=7&dpr=1.5&pid=1.7&rm=3' />
</div>
<div class='hinh' id='pic3'>
<img src='https://th.bing.com/th/id/OIP.JJGqlsctlnlVu_MD1C3uvAHaLH?w=122&h=183&c=7&r=0&o=7&dpr=1.5&pid=1.7&rm=3' />
</div>
<div class='hinh' id='pic4'>
<img src='https://th.bing.com/th/id/OIP.PL9y5RUm6mS-veNjUoa4XgHaE8?w=275&h=183&c=7&r=0&o=7&dpr=1.5&pid=1.7&rm=3' />
</div>
</div>
<script src="script.js"></script>
</body>
</html>
.container {
background-color:grey;
width:600px;
height:300px;
position:relative;
}
.hinh{
width:150px;
height:150px;
}
.info {
position:absolute;
width:300px;
}
img {
width:150px;
height:150px;
}
#pic1 {
background-color:yellow;
position:absolute;
left:300px;
}
#pic2 {
background-color:green;
position:absolute;
left:450px;
}
#pic3 {
background-color:black;
position:absolute;
left:450px;
top:150px;
}
#pic4 {
background-color:grey;
position:absolute;
left:300px;
top:150px;
}