<!DOCTYPE html>
<html lang="ko">
<link rel="stylesheet" href="240320_ํค๋.css">
<head>
<meta charset="UTF-8">
<title>ํค๋๋ง๋ค๊ธฐ ์ฐ์ต</title>
<script src="https://kit.fontawesome.com/265655aec0.js" crossorigin="anonymous"></script>
</head>
<body>
<header>
<svg xmlns='http://www.w3.org/2000/svg' width='100' height='32.939' viewBox='0 0 100 32.939'><g id='Logo' transform='translate(-88.414 -468.005)'><path id='패스_1' data-name='패스 1' d='M150.8,496.543l0-24.144a4.325,4.325,0,0,1,4.316-4.394h.47a4.394,4.394,0,0,1,4.394,4.394v24.144a4.394,4.394,0,0,1-4.4,4.39h-.5a4.3,4.3,0,0,1-4.282-4.39' transform='translate(-30.302)' fill='#002053'/><path id='패스_2' data-name='패스 2' d='M218.424,470.885l9.763,15.889c2.107,3.434,2.6,4.327,2.6,6.853a7.254,7.254,0,0,1-6.818,7.048H210.773a4.117,4.117,0,0,1-4.343-4.067v-.279a4.341,4.341,0,0,1,4.343-4.342l8.086,0c.509,0,.822-.069.96-.387a.855.855,0,0,0-.133-.939l-5.757-9.238c-.093-.155-.2-.367-.379-.367s-.313.212-.393.379l-8.792,15.1c-1.373,2.392-2.981,4.146-5.382,4.146H182.069a6.878,6.878,0,0,1-6.426-6.429V472.412a4.347,4.347,0,0,1,4.342-4.349h.555a4.351,4.351,0,0,1,4.348,4.349l0,17.839a1.146,1.146,0,0,0,1.185,1.179l8.4,0a3.259,3.259,0,0,0,3.131-1.818l11.306-18.729a5.462,5.462,0,0,1,4.834-2.739,5.246,5.246,0,0,1,4.682,2.739' transform='translate(-42.369 -0.028)' fill='#002053'/><path id='패스_3' data-name='패스 3' d='M98.841,501.022a1.181,1.181,0,0,0-1.18,1.184l0,6.076a4.345,4.345,0,0,1-4.346,4.344h-.555a4.345,4.345,0,0,1-4.341-4.344V497.233a5.1,5.1,0,0,1,5.177-5.177h17.652a4.348,4.348,0,0,1,4.343,4.344v.281a4.343,4.343,0,0,1-4.343,4.341Z' transform='translate(-0.001 -11.682)' fill='#002053'/><path id='패스_4' data-name='패스 4' d='M92.809,469.229h20.567a4.323,4.323,0,0,1,4.392,4.31v.273a4.393,4.393,0,0,1-4.392,4.4H92.809a4.4,4.4,0,0,1-4.4-4.4v-.3a4.3,4.3,0,0,1,4.4-4.279' transform='translate(0 -0.595)' fill='#002053'/></g></svg>
<nav id="main-menu-nav">
<ul>
<li>WOMAN</li>
<li>MEN</li>
<li>KIDS</li>
<li>BRAND</li>
</ul>
</nav>
<nav>
<ul>
<li><i class="fa-solid fa-magnifying-glass"></i></li>
<li><i class="fa-regular fa-map"></i></li>
<li id="main-menu-li">
<i class="fa-regular fa-user"></i>
<div id="user-menu-div">
<a href="#">๋ก๊ทธ์ธ</a>
<a href="#">ํ์๊ฐ์
</a>
<a href="#">์์ด๋/๋น๋ฐ๋ฒํธ ์ฐพ๊ธฐ</a>
<a href="#">์ด๋ฒคํธ</a>
</div>
</li>
<li><i class="fa-solid fa-bars"></i></li>
</ul>
</nav>
</header>
<main>
<video muted loop autoplay src="https://filacdn.styleship.com/filacontent2/data/contentsfile/mov_top_our sport_d_240229.mp4">"></video>
<section>
<h1>SO-HEE IN FILA'S SPRING</h1>
<button>์์ธํ๋ณด๊ธฐ</button>
<div id="carousel-bar-container">
<!-- ํ๋ก๊ทธ๋์ค๋ฐ ๊ฐ์ ๋๋์ bar / carousel: ์์ง์ด๋ ๋ฐ -->
<!-- ๊ฐ๋๋ค๋ ๊ธด ์ (๋ชธ์ฒด) -->
<div id="carousel-bar-body">
<!-- ์์ง์ด๋ ๊ตต์ ํต -->
<div></div>
</div>
<!-- ํ์ดํ๋ค -->
<div id="arrows-container">
<i class="fa-solid fa-chevron-left"></i>
<i class="fa-solid fa-chevron-right"></i>
</div>
</div>
</section>
</main>
</body>
</html>@font-face { /* ์น์์ ๋ฐ์์ฐ๋ ์นํฐํธ */
font-family: 'SUIT-Regular';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: SUIT-Regular;
}
a {
text-decoration: none;
color: black;
}
/*******************************/
header{
position: fixed;
box-sizing: border-box;
width: 100vw;
background-color: white;
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 50px; /* ์์๋, ์์ */
z-index: 99;
}
ul{
list-style: none;
}
li {
display: inline-block;
padding: 10px 0;
margin: 0 15px;
font-size: 1rem;
cursor: pointer;
}
#main-menu-nav li{
border: 3px solid white;
font-weight: bold;
}
#main-menu-nav li:hover{
border-bottom: 2px solid black;
}
/****************************************/
#main-menu-li:hover #user-menu-div{
display: flex;
}
#main-menu-li{
transition-duration: 1s;
}
#user-menu-div{
position: absolute;
display: none;
right: 25px;
margin-top: 10px;
flex-direction: column;
width: 190px;
box-shadow: 0 0 9px dimgray ; /* ์, ๋ค, ํผ์ง์ ๋, ์์ */
background-color: white;
font-size: 0.92rem;
font-weight: bold;
padding: 20px 17px;
border-radius: 0.7rem;
transition-duration: 1s;
}
#user-menu-div > a{
color: black;
margin: 5px 0;
}
#user-menu-div > a:hover{
color: rgba(100,100,100,0.9);
}
/****************************************/
main{
background-color: black;
width: 100vw;
height: 100vh;
display: flex;
}
video {
width: 100%;
object-fit: cover;
}
/****************************************/
main{
position: relative;
}
main > section{
position: absolute;
bottom: 80px;
width: 80%;
left: 50%;
transform: translateX(-50%); /* left๋ง ํ๋ฉด ์์์ ๊ธฐ์ค 50%๋ผ์ transform์ผ๋ก -50% ๊ฐ์ค์ผํจ ! */
padding: 10px 10px; /* ์์๋, ์์ */
color: white;
/*background-color: white;*/
}
h1{
font-size: 2.8rem;
margin: 20px 0;
}
main > section > button {
font-size: 1.2rem;
font-weight: bold;
color: white;
padding: 13px 23px;
border: 1px solid white;
border-radius: 1.8rem;
background-color: unset; /* ์์ด ์๋๊ฑฐ */
margin-bottom: 25px;
cursor: pointer;
}
main button:hover{
color: black;
background-color: white;
}
/****************************************/
#carousel-bar-container{
display: flex;
align-items: center;
}
#carousel-bar-body{
display: flex;
align-items: center;
padding-right: 15px;
height: 2px;
background-color: rgba(0,0,0,0.3);
flex: 1;
}
/* ์์ง์ด๋ ๊ตต์ ํต */
#carousel-bar-body > div{
width: 500px;
height: 3.5px;
background-color: rgba(0,0,0,0.6);
border-radius: 4.3px;
}
/****************************************/
#arrows-container > i {
padding: 3px 5px;
font-size: 1.4rem;
cursor: pointer;
}
'๐ Academy. > HTML,CSS' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| HTML&CSS ์ค์ต10 (์ ๋ฆฌx) (0) | 2024.03.23 |
|---|---|
| HTML&CSS ์ค์ต9 (์ ๋ฆฌx) (0) | 2024.03.23 |
| HTML&CSS 25์ผ์ฐจ (์ ๋ฆฌx) (0) | 2024.03.23 |
| HTML&CSS 24์ผ์ฐจ (์ ๋ฆฌx) (0) | 2024.03.23 |
| HTML&CSS 23์ผ์ฐจ (์ ๋ฆฌx) (0) | 2024.03.23 |
