html
<!DOCTYPE html>
<html lang="kor">
<head>
<!-- 구글폰트 link -->
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@500&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="wrap">
<div class="intro_bg">
<div class="header">
<div class="searchArea">
<form>
<input type="search" placeholer="Search">
<span>검색</span>
</form>
</div>
<ul class="nav">
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">SERVICE</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>
<div class="intro_text">
<h1>총알오징어, 세마리에 만원</h1>
<h4 class="contents1">우리는 전기를 이용해 실수인척 새끼 오징어를 불법 포획합니다</h4>
</div>
</div>
</div>
<!-- intro end -->
<ul class="amount">
<li>
<div>
<div class="contents1">지금까지 해먹은 돈</div>
<div class="result">$128,021</div>
</div>
</li>
<li>
<div>
<div class="contents1">씨를 말린 오징어 마리수</div>
<div class="result">93,234</div>
</div>
</li>
<li>
<div>
<div class="contents1">최종 목표 마리수</div>
<div class="result">100,000+</div>
</div>
</li>
<li>
<div>
<div class="contents1">와사비 간장</div>
<div class="result">57,221,084</div>
</div>
</li>
</ul>
</body>
</html>css
* {
/* 구글폰트 css */
font-family: 'Noto Sans KR', sans-serif;
/* 기본속성 제거 */
list-style: none;
text-decoration: none;
border-collapse: collapse;
margin: 0px;
padding: 0px;
color: #000;
}
h1 {
size: 48px;
font-weight: 100;
}
.contents1 {
font-size: 20px;
font-weight: 100;
}
.result {
font-size: 24px;
}
.intro_bg {
background-image: url("image/intro.png");
width: 100%;
height: 718px;
}
.header {
display: flex;
width: 1280px;
margin: auto;
height: 86px;
}
.searchArea {
width: 300px;
height: 40px;
background: rgba(0, 0, 0, 0.5);
border-radius: 5px;
margin-top: 24px;
}
.searchArea>form>input {
border: none;
width: 250px;
height: 40px;
background: rgba(0, 0, 0, 0);
color: #fff;
padding-left: 10px;
}
.searchArea>form>span {
width: 50px;
color: #fff;
font-weight: bold;
cursor: pointer;
}
.nav {
display: flex;
justify-content: flex-end;
line-height: 86px;
width: calc(1280px - 300px);
}
.nav>li {
margin-left: 84px;
}
.nav>li>a {
color: #fff;
}
.intro_text {
width: 100%;
margin: 231px auto 231px auto;
font-color: #fff;
text-align: center;
}
.intro_text>h1,
.intro_text>h4 {
color: #fff;
}
.amount {
position: relative;
top: -66px;
display: flex;
width: 1280px;
background: #fff;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
margin: auto;
}
.amount>li {
flex: 1;
height: 132px;
}
.amount>li>div {
text-align: center;
margin-top: 37px;
height: 57px;
}
.amount>li:not(:last-child)>div {
border-right: 1px solid #E1E1E1;
}
안녕하세요!!