<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>본푸드</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "맑은 고딕";
font-size: 16px;
line-height: 1.5;
}
table {
border-collapse: collapse;
}
ol, ul {
list-style: none;
}
#wrap {
margin: 0px auto;
width: 1200px;
}
#wrap h1 {
margin: 45px;
font-size: 40px;
text-align: center;
}
#wrap span {
color: #5f952f;
}
#wrap h2 {
margin-bottom: 15px;
}
.giftBon {
margin-right: 15px;
padding: 50px;
width: 370px;
height: 415px;
float: left;
background: url("./images/lounge_01.jpg") no-repeat;
}
.question {
margin-bottom: 15px;
width: 815px;
float: left;
}
.food {
padding: 50px;
width: 400px;
float: left;
background: url("./images/lounge_02.jpg") no-repeat;
}
.ca {
padding: 50px;
width: 400px;
float: right;
background: url("./images/lounge_03.jpg") no-repeat;
}
.service {
padding: 50px;
width: 815px;
float: left;
background: url("./images/lounge_04.jpg") no-repeat;
}
</style>
</head>
<body>
<div id="wrap">
<h1><span>Bon</span> Lounge</h1>
<div class="giftBon">
<h2><span>기프트본</span> 선물하기</h2>
<p>
감사한 분들께 따뜻한 마음을 전하는 <br>
또 다른 선물, 기프트본
</p>
</div> <!-- giftBon end -->
<div class="question">
<div class="food">
<h2><span>위탁급식</span>문의</h2>
<p>
본푸드서비스만의 <br>
5가지 약속
</p>
</div> <!-- food end -->
<div class="ca">
<h2><span>특수상권</span> 입점문의</h2>
<p>
프리미엄 특수상권 <br>
중심 출점
</p>
</div> <!-- ca end -->
</div> <!-- question end -->
<div class="service">
<h2><span>고객의</span> 소리</h2>
<p>
고객의 목소리에 귀를 기울이는 <br>
본푸드 서비스 입니다.
</p>
</div> <!-- service end -->
</div> <!-- wrap end -->
</body>
</html>
Engineering is the closest thing to magic that exists in the world.