ElECTRIC CAR

다시 한번 성장하다
빠르고 똑똑하게

#에코그린 #전기차 #새로운_시작

위의 코드

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CANTATA</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="car.css">
  </head>
  <body>
    <div class="car">
      <h1 class="car-heading">CANTATA</h1>
      <p class="car-description">
        다시 한번 성장하다<br>
          빠르고 똑똑하게
      </p>
      <img class="car-image" src="https://c4.wallpaperflare.com/wallpaper/956/65/263/dark-car-vehicle-artwork-lamborghini-hd-wallpaper-preview.jpg">
      <div>
        <span class="hashtag">#에코그린</span>
        <span class="hashtag">#전기차</span>
        <span class="hashtag">#새로운_시작</span>
      </div>
    </div>
  </body>
</html>

<style>
@font-face {
  font-family: 'GmarketSansLight';
  font-style: normal;
  font-weight: normal;
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff')
    format('woff');
}

body {
  background: #ffffff;
  font-family: 'Noto Sans KR', sans-serif;
}

.car {
  background-color: #000000;
  color: #ffffff;
  font-size: 24px;
  margin: 40px auto;
  padding: 32px 0 24px;
  text-align: center;
  width: 600px;
  border-radius: 32px;
}

.car-heading {
  font-family: GmarketSansLight;
  font-size: 24px;
  font-weight: 300;
  margin: 0;
}

.car-description {
  color: #bababa;
  font-size: 10px;
  font-weight: 400;
  line-height: 14px;
  margin: 8px 0;
}

.car-image {
  width: 100%;
}

.hashtag {
  background: rgba(255, 255, 255, 0.05);
  color: #bababa;
  font-family: 'Noto Sans KR';
  font-size: 8px;
  font-weight: 400;
  line-height: 12px;
  margin: 0 8px;
  padding: 4px 8px;
  border-radius: 10px;
  border: 1px solid #bababa;
}
</style>

저작자표시