<div class="wrapper">
<div class="heading">
header
</div>
<div class="body">
<div class="img">ad</div>
<div class="contents">
<div class="about">about</div>
<div class="news">news</div>
</div>
<div class="img">ad</div>
</div>
<div class="footer">
copyright
</div>
</div>
.wrapper {
width: 1440px;
margin: 0 auto;
display: flex;
flex-direction: column;
}
.heading {
background-color: #a9a9a9;
padding: 16px;
}
.body {
display: flex;
}
.img {
width: 10%;
background-color: #add8e6;
padding: 16px;
}
.contents {
width: 80%;
display: flex;
flex-direction: column;
}
.about {
background-color: #98fb98;
padding: 16px;
}
.news {
background-color: #f5deb3;
padding: 16px;
text-align: right;
}
.footer {
text-align: center;
background-color: #e9967a;
padding: 16px;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.