console
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
*{
padding:0;
margin:0;
}
body{
background-color: #ffd787;
}
div{
width:300px;
height:400px;
background-color: #fff;
border-radius:5px;
text-align:center;
color:#2657A3;
margin:auto;
}
.p1{
height:100px;
background-image:url(./冲浪.jpg);
border-radius: 5px 5px 0 0;
}
.p2{
font-weight:bolder;
letter-spacing:3px;
margin-top:20px;
margin-bottom:40px;
position:relative;
}
.p2::after{
content:"hot";
background-color:#ffd787;
font-size:12px;
position:absolute;
top:-5px;
right:70px;
color:red;
}
.p3{
font-size:40px;
}
.p5{
font-size:12px;
margin-top:40px;
margin-bottom:20px;
}
.p6{
background-color:#2657A3;
color:#FFD787;
width:100px;
margin-left:100px;
border-radius:3px;
}
.p6:hover{
background-color:#FFD787;
color:#2657A3;
}
</style>
</head>
<body>
<div>
<p class="p1"></p>
<p class="p2">Kayaking</p>
<p class="p3">$39/4hs</p>
<p class="p4">per person</p>
<p class="p5">Drina,Serbia</p>
<p class="p6">choose date</p>
</div>
</body>
</html>