728x90
๋ฐ˜์‘ํ˜•
<!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;
}

728x90
๋ฐ˜์‘ํ˜•
์ €์ž‘์žํ‘œ์‹œ ๋น„์˜๋ฆฌ ๋ณ€๊ฒฝ๊ธˆ์ง€ (์ƒˆ์ฐฝ์—ด๋ฆผ)

'๐Ÿ’œ 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

ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”