<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/705381df09.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="./css/reset.css">
<script src="./js/dropdown.js" defer></script>
<script src="./js/slide.js" defer></script>
<script src="./js/tab.js" defer></script>
<script src="./js/hover.js" defer></script>
<title>Sparlex_conan</title>
</head>
<body>
<header id="header">
<!-- 헤더탑 -->
<div class="header_top">
<div class="container">
<!-- 헤더탑 왼쪽부분 -->
<div class="ht_left">
<a href="#"><i class="fa-solid fa-location-dot"></i>Find A Location</a>
<a href="#"><i class="fa-solid fa-phone"></i>+01234567890</a>
<a href="#"><i class="fa-solid fa-envelope"></i>Example@gmail.com</a>
</div>
<!-- 헤더탑 오른쪽부분 -->
<div class="ht_right">
<i class="fa-brands fa-facebook-f"></i>
<i class="fa-brands fa-twitter"></i>
<i class="fa-brands fa-instagram"></i>
<i class="fa-brands fa-linkedin-in"></i>
</div>
</div>
</div>
<!-- 헤더바텀 -->
<div class="header_bottom">
<div class="container">
<!-- 헤더바텀 왼쪽 -->
<div class="hb_left">
<a href="#">
<h1>Sparlex</h1>
</a>
</div>
<!-- 해더바텀 메뉴 -->
<div class="hb_nav">
<ul class="main_menu">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Price</li>
<li id="mainList">Pages<i class="fa-solid fa-angle-down down"></i>
<ul id="subList" class="display_none">
<li>Team</li>
<li>Testimonial</li>
<li>Gallery</li>
<li>Appointment</li>
<li>404 page</li>
</ul>
</li>
<li>Contact Us</li>
</ul>
</div>
<!-- 헤더바텀 오른쪽 -->
<div class="hb_right">
<i class="fa-solid fa-magnifying-glass glass"></i>
<a href="#">Book Appointment</a>
</div>
</div>
</div>
</header>
<section id="main">
<div class="slidebox">
<div class="slides">
<!-- 슬라이드 1 -->
<div class="slide">
<div class="slide_img">
<img src="./img/carousel-1.jpg" alt="슬라이드 이미지1">
</div>
<div class="slide_text">
<h3>SPA & BEAUTY CENTER</h3>
<h1>Massage Treatment</h1>
<p>Lorem rebum magna dolore amet lorem eirmod magna erat <br>
diam stet. Sadips duo stet amet amet ndiam elitr ipsum</p>
<a href="#">Get Start</a>
<a href="#">Book Now</a>
</div>
</div>
<!-- 슬라이드 2 -->
<div class="slide">
<div class="slide_img">
<img src="./img/carousel-2.jpg" alt="슬라이드 이미지1">
</div>
<div class="slide_text">
<h3>SPA & BEAUTY CENTER</h3>
<h1>Massage Treatment</h1>
<p>Lorem rebum magna dolore amet lorem eirmod magna erat <br>
diam stet. Sadips duo stet amet amet ndiam elitr ipsum</p>
<a href="#">Get Start</a>
<a href="#">Book Now</a>
</div>
</div>
<!-- 슬라이드 3 -->
<div class="slide">
<div class="slide_img">
<img src="./img/carousel-3.jpg" alt="슬라이드 이미지1">
</div>
<div class="slide_text">
<h3>SPA & BEAUTY CENTER</h3>
<h1>Massage Treatment</h1>
<p>Lorem rebum magna dolore amet lorem eirmod magna erat <br>
diam stet. Sadips duo stet amet amet ndiam elitr ipsum</p>
<a href="#">Get Start</a>
<a href="#">Book Now</a>
</div>
</div>
</div>
<!-- 슬라이드 버튼 -->
<div id="slidebtn">
<i class="fa-solid fa-arrow-left left"></i>
<i class="fa-solid fa-arrow-right right"></i>
</div>
</div>
</section>
<section id="tab">
<div class="container">
<div class="tab_title">
<div class="tab_sub_title">
<h2>OUR GALLERY</h2>
</div>
<div class="tab_main_title">
<h1>Let's See Our Gallery</h1>
</div>
<div class="tab_buttons">
<span id="tab1">All Gallery</span>
<span id="tab2">Skin Care</span>
<span id="tab3">Stream Bath</span>
<span id="tab4">Stone Therapy</span>
<span id="tab5">Face Massage</span>
</div>
</div>
<div class="tab_contents">
<div class="tab_content tab1 tab2">
<div class="tab_bg">
<span>Skin Care</span>
</div>
<div><i class="fa-solid fa-magnifying-glass-plus plus"></i></div>
<img src="./img/gallery-1.jpg">
</div>
<div class="tab_content tab1 tab3">
<div class="tab_bg">
<span>Skin Care</span>
</div>
<div><i class="fa-solid fa-magnifying-glass-plus plus"></i></div>
<img src="./img/gallery-2.jpg">
</div>
<div class="tab_content tab1 tab4">
<div class="tab_bg">
<span>Skin Care</span>
</div>
<div><i class="fa-solid fa-magnifying-glass-plus plus"></i></div>
<img src="./img/gallery-3.jpg">
</div>
<div class="tab_content tab1 tab5">
<div class="tab_bg">
<span>Skin Care</span>
</div>
<div><i class="fa-solid fa-magnifying-glass-plus plus"></i></div>
<img src="./img/gallery-4.jpg">
</div>
<div class="tab_content tab1 tab3">
<div class="tab_bg">
<span>Skin Care</span>
</div>
<div><i class="fa-solid fa-magnifying-glass-plus plus"></i></div>
<img src="./img/gallery-5.jpg">
</div>
<div class="tab_content tab1 tab4">
<div class="tab_bg">
<span>Skin Care</span>
</div>
<div><i class="fa-solid fa-magnifying-glass-plus plus"></i></div>
<img src="./img/gallery-6.jpg">
</div>
<div class="tab_content tab1 tab5">
<div class="tab_bg">
<span>Skin Care</span>
</div>
<div><i class="fa-solid fa-magnifying-glass-plus plus"></i></div>
<img src="./img/gallery-7.jpg">
</div>
<div class="tab_content tab1 tab2">
<div class="tab_bg">
<span>Skin Care</span>
</div>
<div><i class="fa-solid fa-magnifying-glass-plus plus"></i></div>
<img src="./img/gallery-8.jpg">
</div>
</div>
</div>
</section>
<section id="profileCard"></section>
<footer></footer>
</body>
</html>
/* 슬라이드 */
.slidebox {
width: 100%;
overflow: hidden;
position: relative;
white-space: nowrap;
}
.slides {
font-size: 0;
}
.slide {
display: inline-block;
font-size: 16px;
transition: all 1.2s ease;
}
.slide_img img {
width: 100%;
height: 1080px;
opacity: 0.7;
}
.slide_text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
text-align: center;
}
.slide_text h3{
color: var(--sub-color);
font-size: 24px;
font-weight: 300;
}
.slide_text h1 {
font-size: 75px;
margin-bottom: 10px;
}
.slide_text p {
font-size: 24px;
margin-bottom: 50px;
}
.slide_text a {
border-radius: 20px;
padding: 10px 30px;
margin-right: 20px;
}
.slide_text a:first-of-type {
background-color: white;
color: var(--sub-color);
}
.slide_text a:first-of-type:hover {
background-color: var(--main-color);
color: white;
transition: all 1.2s ease;
}
.slide_text a:last-of-type {
background-color: var(--sub-color);
color: white;
}
.slide_text a:last-of-type:hover {
background-color: var(--main-color);
transition: all 1.2s ease;
}
#slidebtn i {
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 40px;
color: var(--sub-color);
}
#slidebtn .left {
left: 30px;
}
#slidebtn .right {
right: 30px;
}
/* 탭 */
.tab_title {
text-align: center;
}
.tab_sub_title h2 {
color: var(--sub-color);
font-weight: 300;
}
.tab_main_title h1 {
font-size: 60px;
margin-bottom: 30px;
}
.tab_buttons {
margin-bottom: 50px;
}
.tab_buttons span {
cursor: pointer;
padding: 10px 30px;
border-radius: 30px;
border: 1px solid var(--sub-color);
background-color: var(--bg-color);
margin-right: 30px;
}
.tab_contents {
display: flex;
flex-wrap: wrap;
}
.tab_content {
position: relative;
overflow: hidden;
width: 300px;
margin-right: 20px;
}
.tab_content img {
width: 100%;
}
.tab_bg {
width: 100%;
height: 99%;
position: absolute;
top: 0;
left: 0;
transform: translateY(120%);
background-color: #cfcfcf65;
border-radius: 10px 10px 0 0;
transition: all 1.2s ease;
}
.tab_bg > span {
position: absolute;
top: 10%;
left: 50%;
transform: translate(-50%,-50%);
font-weight: 500;
color: var(--main-color);
}
.tab_content .plus {
position: absolute;
top: -50%;
left: 50%;
transform: translate(-50%,-50%);
}
.tab_content:hover .tab_bg {
transform: translateY(0%);
}
.tab_content:hover .plus {
top: 50%;
padding: 10px;
border-radius: 50%;
transition: all 1.2s ease;
background-color: var(--sub-color);
color: white;
}