* 코딩의 민족
↓index.html
<!DOCTYPE html>
<html>
<head>
<title>냠냠의 민족</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<h1>냠냠의 민족</h1>
<h2>넌 냠냠할 때가 제일 이뻐</h2>
<div class="info">
<img src="images/chicken.jpg" width="300px" height="200px">
<div class="text">
<p class="food">달콤달달 양념치킨</p>
<p class="explain">주머니가 가벼운 당신의 마음까지 생각한 착한 가격!</p>
<div class="link">
<a href="#">바로 결제</a>
</div>
</div>
</div>
<div class="info">
<img src="images/sushi.jpg" width="300px" height="200px">
<div class="text">
<p class="food">싱싱 스시</p>
<p class="explain">주머니가 가벼운 당신의 마음까지 생각한 착한 가격!</p>
<div class="link">
<a href="#">바로 결제</a>
</div>
</div>
</div>
<div class="info">
<img src="images/burger.jpg" width="300px" height="200px">
<div class="text">
<p class="food">냠냠 햄버거</p>
<p class="explain">주머니가 가벼운 당신의 마음까지 생각한 착한 가격!</p>
<div class="link">
<a href="#">바로 결제</a>
</div>
</div>
</div>
<div class="info">
<img src="images/bibimbap.jpg" width="300px" height="200px">
<div class="text">
<p class="food">알록달록 비빔밥</p>
<p class="explain">주머니가 가벼운 당신의 마음까지 생각한 착한 가격!</p>
<div class="link">
<a href="#">바로 결제</a>
</div>
</div>
</div>
</body>
</html>
↓css
@font-face {
src: url("../fonts/BMJUA_otf.otf");
font-family: BMJUA;
}
* {
box-sizing: border-box;
font-family: BMJUA;
color: #58595b;
}
body {
background-color: #f0e8d9;
}
h1 {
text-align: center;
font-size: 64px;
margin-top: 76px;
}
h2 {
text-align: center;
font-size: 32px;
margin-top: 30px;
margin-bottom: 75px;
}
.info {
background-color: white;
margin-left: auto;
margin-right: auto;
width: 300px;
margin-bottom: 50px;
border-radius: 10px;
overflow: hidden;
}
.text {
padding: 20px;
}
.food {
font-size: 32px;
text-align: center;
margin-top: 0px;
margin-bottom: 20px;
}
.explain {
font-size: 16px;
margin-bottom: 16px;
}
.link {
text-align: center;
}
a {
color: #0000EE;
text-decoration: none;
font-size: 16px;
}
↓실행 결과 (https://bakey-api.codeit.kr/web/enrollments/60e42be122ff6d2ddf76e1b1/lessons/587/index.html)
