<!-- PC 버전 -->
<div class="navbar_main">
<a class="navbar_logo" href="#">로고</a>
<div class="navbar_links">
<a href="#">ABOUT</a>
<a href="#">WORKS</a>
<a href="#">NEWS</a>
<a href="#">CONTACT</a>
</div>
</div>
/* PC 버전 */
.navbar_main {
position: fixed;
top: 0;
left: 0;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 0;
color: #000;
z-index: 999;
animation: navbarBottom 1s forwards;
}
.navbar_links {
margin-right: 10%;
}
.navbar_links a {
text-decoration: none;
color: #000;
margin-right: 4rem;
font-size: 0.9rem;
font-weight: 600;
position: relative;
padding: 0.5rem 0;
}
.navbar_links a:last-child {
margin-right: 0;
}
.navbar_links a::before {
content: '';
position: absolute;
bottom: -1px;
left: 50%;
width: 0;
height: 3px;
background-color: #792626;
transition: width 0.2s ease-in-out, left 0.2s ease-in-out;
}
.navbar_links a:hover::before {
width: 100%;
left: 0;
}
.navbar_logo {
margin-left: 10%;
text-decoration: none;
color: #000;
font-size: 2.3rem;
font-weight: 500;
}
.navbar_scroll {
background-color: #fff;
z-index: 5;
border-bottom: 1px solid gray;
}
.navbar_scroll div a {
color: black;
}
.navbar_scroll a {
color: black;
}
@keyframes navbarBottom {
0% {
transform: translateY(-70%);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.