전기차 광고 만들어보기
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>
'[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.06 |
| [HTML & CSS] 예제 (0) | 2023.08.04 |