액티비티 예약 홈페이지 만들어보기!
예약 가능한 액티비티와 불가능한 액티비티 표시 화면 구현
New this week
여행에 다채로운 색을 입혀 줄 흥미로운 액티비티를 찾아보세요.
위의 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>New this week</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="activity.css">
</head>
<body>
<div class="header">
<div class="header-container">
<h1 class="header-title">New this week</h1>
<p class="header-description">여행에 다채로운 색을 입혀 줄 흥미로운 액티비티를 찾아보세요.</p>
</div>
</div>
<div id="desert" class="activity">
<h2 class="activity-title">낙타와 함께하는 사막 여행</h2>
<p class="activity-date">2025.07.26. ~ 2025.07.27.</p>
<a class="activity-join">시작하기</a>
</div>
<div id="paragliding" class="activity">
<h2 class="activity-title">넓은 하늘로 패러글라이딩</h2>
<p class="activity-date">2025.08.02. ~ 2025.08.03.</p>
<a class="activity-join">시작하기</a>
</div>
<div id="ducks" class="activity">
<h2 class="activity-title">귀여운 오리 구경</h2>
<p class="activity-date">2025.11.02. ~ 2025.11.03.</p>
<a class="activity-join", href="https://search.naver.com/search.naver?where=nexearch&sm=top_hty&fbm=0&ie=utf8&query=%EB%A7%88%EA%B0%90">마감</a>
</div>
<div id="versailles" class="activity">
<h2 class="activity-title">루이 14세의 베르사이유 궁전</h2>
<p class="activity-date">2025.11.15. ~ 2025.11.16.</p>
<a class="activity-join">시작하기</a>
</div>
</body>
</html>
<style>
body {
font-family: 'Noto Sans KR', sans-serif;
margin: 0 0 140px;
}
.header {
background-color: #f3f3f3;
margin-bottom: 32px;
padding: 64px 0px 32px;
}
.header-container {
margin: 0 auto;
width: 600px;
}
.header-title {
font-size: 32px;
font-weight: 700;
line-height: 46px;
margin: 8px 0;
}
.header-description {
color: #a6a6a6;
font-size: 16px;
font-weight: 400;
line-height: 23px;
margin: 8px 0;
}
#desert {
background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0)),
url('./activity-desert.png');
box-shadow: 0px 4px 28px rgba(0, 0, 0, 0.2);
}
#paragliding {
background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0)),
url('./activity-paragliding.png');
box-shadow: 0px 4px 28px rgba(0, 0, 0, 0.2);
}
#ducks {
background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0)),
url('./activity-duck.png');
box-shadow: 0px 4px 28px rgba(0, 0, 0, 0.2);
opacity: 0.3;
}
#versailles {
background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0)),
url('./activity-versailles.png');
box-shadow: 0px 4px 28px rgba(0, 0, 0, 0.2);
}
.activity {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
color: #ffffff;
height: 185px;
margin: 24px auto;
padding: 40px;
width: 520px;
}
.activity-title {
font-size: 20px;
font-weight: 700;
line-height: 29px;
margin: 0;
}
.activity-date {
font-size: 12px;
font-weight: 400;
margin: 8px 0;
}
.activity-join {
background: rgba(0, 0, 0, 0.15);
display: inline-block;
font-size: 12px;
font-weight: 700;
margin: 22px 0;
padding: 8px 24px;
}
</style>'[HTML & CSS]' 카테고리의 다른 글
| [HTML & CSS] 간단한 화면 만들어보기 (11) | 2023.08.14 |
|---|---|
| [HTML & CSS] 간단한 광고 화면 만들어보기 (9) | 2023.08.13 |
| [HTML & CSS] 간단한 화면 만들어보기 (0) | 2023.08.12 |
| [HTML & CSS] 간단한 광고 만들어보기 (0) | 2023.08.05 |
| [HTML & CSS] 예제 (0) | 2023.08.04 |