<!DOCTYPE html>
<html lang="eng">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>네비게이션 만들기</title>
<style>
body {
font-family: 'Climate Crisis', cursive;
background-color: #5fb7ff;
line-height: 1.6em;
}
a {
text-decoration: none;
color: #fff;
}
.gnb {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 40px;
}
.gnb a {
display: block;
font-size: 30px;
margin: 20px 0;
transition: 0.5s;
}
.gnb:hover a {
opacity: 0.3;
}
.gnb a:hover {
opacity: 1;
}
.gnb a:before {
content: '\f105';
font-family: fontawesome;
margin-right: 10px;
opacity: 0;
}
.gnb a:hover:before {
opacity: 1;
}
</style>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<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=Climate+Crisis&family=Noto+Sans+KR:wght@500&display=swap"
rel="stylesheet"
/>
</head>
<body>
<div class="gnb">
<a href="#none">New Arrivals</a>
<a href="#none">Summer Collection</a>
<a href="#none">Winter</a>
<a href="#none">Special Offers</a>
<a href="#none">Trends</a>
</div>
</body>
</html>
🐢 💨 💨