페퍼로니 앤 치즈
18,000 원
고소 & 짭쪼름한 페퍼로니가 가득, 피자잇 대표 피자.
피자 매니아들에게 꾸준한 사랑을 받고 있는 근본 피자입니다.
(팬 피자로만 주문이 가능하며, 온라인 주문 시 5% 할인된 가격에 맛보실 수 있습니다.)
html 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>피자코딩</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="pizza.css">
</head>
<body>
<div class="card">
<h1 class="title" style="color: #ffffff;>페퍼로니 앤 치즈</h1>
<h2 class="price" style="color: #ffffff;>18,000 원</h2>
<p class="description" style="color: #ffffff;>
고소 & 짭쪼름한 페퍼로니가 가득, 도미노피자의 대표 피자.<br>
피자 매니아들에게 꾸준한 사랑을 받고 있는 근본 피자입니다.
</p>
<div class="buttons">
<a class="order" href="https://web.dominos.co.kr/gate">
품절
</a>
</div>
<p class="note">(팬 피자로만 주문이 가능하며, 온라인 주문 시
5% 할인된 가격에 맛보실 수 있습니다.)</p>
</div>
</body>
</html>css 코드
<style>
body {
font-family: 'Noto Sans KR', sans-serif;
margin: 0;
}
.card {
background-image:
linear-gradient(90deg, rgba(0, 0, 0, 1) 40%, rgba(0, 0, 0, 0)),
url('https://cdn.dominos.co.kr/admin/upload/goods/20200311_x8StB1t3.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
color: #ffffff;
line-height: 1.7;
margin: 40px auto;
padding: 40px;
width: 480px;
box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.4);
}
.title {
font-size: 20px;
margin: 8px 0;
}
.price {
font-size: 16px;
font-weight: 800;
margin: 8px 0;
}
.description {
color: #a7a7a7;
font-size: 10px;
margin: 8px 0;
}
.buttons {
margin: 16px 0;
}
.order {
background-color: #f13030;
color: #ffffff;
font-weight: 800;
padding: 6px 16px;
text-decoration: none;
opacity: 0.5;
}
.note {
color: #676767;
font-size: 7px;
line-height: 10px
}
</style>'[HTML & CSS]' 카테고리의 다른 글
| [HTML & CSS] 간단한 화면 만들어보기 (11) | 2023.08.14 |
|---|---|
| [HTML & CSS] 간단한 광고 화면 만들어보기 (9) | 2023.08.13 |
| [HTML & CSS] 간단한 홈페이지 만들어보기 (0) | 2023.08.06 |
| [HTML & CSS] 간단한 광고 만들어보기 (0) | 2023.08.05 |
| [HTML & CSS] 예제 (0) | 2023.08.04 |