카테고리 없음
재윤
TaeSeok_Yang
2023. 9. 3. 20:56
<!DOCTYPE html>
<html>
<head>
<title>JaeYoon's secret diary</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="body">
<div class="top">
<div class="title">
2023 JaeYoon's secret diary
</div>
<div class="end">
<a href="#">
<div class="end_btn">
close diary
</div>
</a>
</div>
</div>
<div class="middle">
<ul class="month_box">
<li class="month"><span class="month_text">January</span></li>
<li class="month"><span class="month_text">February</span></li>
<li class="month"><span class="month_text">March</span></li>
<li class="month"><span class="month_text">April</span></li>
<li class="month"><span class="month_text">May</span></li>
<li class="month"><span class="month_text">June</span></li>
<li class="month"><span class="month_text">July</span></li>
<li class="month"><span class="month_text">August</span></li>
<li class="month"><span class="month_text">September</span></li>
<li class="month"><span class="month_text">October</span></li>
<li class="month"><span class="month_text">November</span></li>
<li class="month"><span class="month_text">December</span></li>
</ul>
</div>
<div class="bottom">
Made by Jeong
</div>
</div>
</body>
</html>
*{
margin: 0;
padding: 0;
}
body{
width: 1000px;
margin: 0 auto;
background-color: #1893da;
}
.body{
width: 1000px;
height: 3250px;
background-color: #2fe417;
}
.top{
width: 1000px;
height: 150px;
border-bottom: 5px solid #1b068f;
}
.middle{
width: 1000px;
height: 3000px;
}
.bottom{
width: 1000px;
height: 100px;
border-top: 5px solid #1b068f;
text-align: center;
line-height: 100px;
font-size: 20px;
color:#d60e0e;
background-color: #85baf7;
}
.title{
width: 780px;
height: 150px;
float: left;
padding-left: 20px;
line-height: 150px;
font-size: 50px;
font-weight: bold;
color: #0af0f0;
text-shadow:-10px 10px 5px #1cb90e;
}
.end{
width: 200px;
height: 150px;
float: left;
}
a{
text-decoration: none;
}
.end_btn{
width: 150px;
height: 60px;
background-color: #1f0361;
float: right;
margin-top: 50px;
margin-right: 30px;
border-radius: 15px;
text-align: center;
color: #ffffff;
font-size: 25px;
line-height: 60px;
}
.month_box{
width: 1000px;
}
.month{
width: 900px;
height: 150px;
margin-top: 30px;
margin-left: 50px;
background-color: #27a8fd;
list-style: none;
border-radius: 15px;
}