<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- -->
<div id='container'>
<div id='banner1'>
<div id="banner-img-container">
<img src='uploads/4-20250802200447.png'>
</div> <!--tag close của banner-img-container-->
<h3>Nickname:Hưng</h3>
<p>i'm a student</p>
</div> <!--tag close của banner1-->
<div id='banner2'>
<div class="text-column">
<h3>Sở thích: Thể thao</h3>
<p>Thể thao giúp giảm căng thẳng và đồng thời giúp tăng cường sức khỏe và giảm cân</p>
</div> <!--close text-column-->
<div class="img-column">
<img src="https://bizweb.dktcdn.net/100/180/757/files/hinh-dang-bong-ro.jpg?v=1524849622241.jpg">
</div> <!--close img-column-->
</div> <!--tag close của banner2-->
<div id='banner3'>
<div class="text-column">
<h3>Sở thích2: Chơi điện tử</h3>
<p>Chơi điện tử giúp giảm nhiều căng thẳng sau khi học tập</p>
</div> <!--close text-clomn-->
<div class="img-column">
<img src='https://images.pexels.com/photos/442576/pexels-photo-442576.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500'>
</div> <!--close img-column-->
</div> <!--tag close của banner3-->
<div id='banner4'>
<div class="text-column">
<h3>Sở thích3: Đi du lịch</h3>
<p>Đi du lịch giúp chúng ta có nhiều hoạt động thú vị bên gia đình</p>
</div> <!--close text-clomn-->
<div class="img-column">
<img src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTizMTNiwFIgXvaV1YEI2_Cu2mZgyV6NXhK8Q&s'>
</div> <!--close img-column-->
</div><!--tag close của banner4-->
</div><!--tag close của container-->
<script src="script.js"></script>
</body>
</html>
#container {
border:solid grey;
width:600px;
height:auto;
}
#banner1{
width:auto;
height:auto;
border:solid #73a7fa;
text-align:center;
}
#banner2 {
border:solid #bc6ed4;
width:auto;
height:auto;
}
#banner3 {
border:solid #996f03;
width:auto;
height:auto;
}
#banner4 {
border:solid #2931cc;
width:auto;
height:auto;
}
#banner-img-container{
width:80px;
height:80px;
margin-left:260px;
}
img{
width:80px;
height:80px;
}
@keyframes SlideX{
0% {transform:translateX(400px) }
100% {transform:translateX(0px) }
}
@keyframes Simulation {
0% {transform:translateY(0px) }
50% {
transform: translateY(50px) rotate(-180deg) scale(2);
}
100% {transform:translateY(200px) }
}
@keyframes rerere {
0% { transform: translateY(0px); }
100% { transform: translateY(100px); }
}
.img-column{
padding-left: 230px;
animation-name:SlideX;
animation-duration:2s;
animation-iteration-count:infinite;
}
.text-column{
padding-left: 20px;
animation: rerere 1s infinite alternate;
}