[HTML & CSS]

[HTML & CSS] 간단한 화면 만들어보기

북방바다코끼리표범 2023. 8. 12. 19:49
피자잇
페퍼로니 앤 치즈

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>
저작자표시