카테고리 없음
html/css/js 시험
별초롱언니
2025. 4. 28. 11:55
<!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>
<script src="./JS/dropdown.js" defer></script>
<script src="./JS/slide.js" defer></script>
<script src="./JS/tab.js" defer></script>
<link rel="stylesheet" href="./CSS/style.css">
<title>Document</title>
</head>
<body>
<header>
<div class="container">
<div id="nav">
<ul>
<li>HOME</li>
<li id="mainList">COMPANY<i class="fa-solid fa-angle-down"></i>
<ul id="subList" class="display_none">
<li>ABOUT US</li>
<li>OUR PEOPLE</li>
<li>TESTIMONIALS</li>
<li>FAQ</li>
<li>PRICINC</li>
</ul>
</li>
<li>PROJECTS</li>
<li>SERVICES</li>
<li>FEATURES</li>
<li>NEWS</li>
<li>CONTACT</li>
</ul>
</div>
<i class="fa-solid fa-magnifying-glass glass"></i>
</div>
</header>
<section id="main">
<div class="slidebox">
<div class="slides">
<div class="slide">
<div class="slide_img">
<img src="./img/slider_img/bg1.jpg">
</div>
<div class="slide_text">
<h2>17 YEARS OF EXCELLENCE IN</h2>
<h1>CONSTRUCTION INDUSTRY</h1>
<a href="#">OUR SERVICES</a>
<a href="#">CONTACT NOW</a>
</div>
</div>
<div class="slide">
<div class="slide_img">
<img src="./img/slider_img/bg2.jpg">
</div>
<div class="slide_text">
<h2>17 YEARS OF EXCELLENCE IN</h2>
<h1>CONSTRUCTION INDUSTRY</h1>
<a href="#">OUR SERVICES</a>
<a href="#">CONTACT NOW</a>
</div>
</div>
<div class="slide">
<div class="slide_img">
<img src="./img/slider_img/bg3.jpg">
</div>
<div class="slide_text">
<h2>17 YEARS OF EXCELLENCE IN</h2>
<h1>CONSTRUCTION INDUSTRY</h1>
<a href="#">OUR SERVICES</a>
<a href="#">CONTACT NOW</a>
</div>
</div>
</div>
<div id="slidebtn">
<i class="fa-solid fa-angle-left left"></i>
<i class="fa-solid fa-angle-right right"></i>
</div>
</div>
</section>
<section id="tab">
<div class="container">
<div class="tab_buttons">
<span id="tab1">SHOW ALL</span>
<span id="tab2">COMMERCIAL</span>
<span id="tab3">EDUCATION</span>
<span id="tab4">GOVERNMENT</span>
<span id="tab5">INFRASTRUCTURE</span>
<span id="tab6">RESIDENTIAL</span>
<span id="tab7">HEALTHCARE</span>
</div>
<div class="tab_contents">
<div class="tab_content tab1 tab3 tab7">
<div class="img_box">
<img src="./img/tab_img/project1.jpg">
</div>
<div class="sub_boxs">
<div class="sub_box">
<p>CAPITAL TELTWAY BULDING</p>
<button>COMMERCIAL, INTERIORS</button>
</div>
<div class="sub_box_icon">
<i class="fa-solid fa-plus"></i>
</div>
</div>
</div>
<div class="tab_content tab1 tab3 tab6 tab7">
<div class="img_box">
<img src="./img/tab_img/project2.jpg">
</div>
<div class="sub_boxs">
<div class="sub_box">
<p>CAPITAL TELTWAY BULDING</p>
<button>COMMERCIAL, INTERIORS</button>
</div>
<div class="sub_box_icon">
<i class="fa-solid fa-plus"></i>
</div>
</div>
</div>
<div class="tab_content tab1 tab2 tab5 tab6 tab7">
<div class="img_box">
<img src="./img/tab_img/project3.jpg">
</div>
<div class="sub_boxs">
<div class="sub_box">
<p>CAPITAL TELTWAY BULDING</p>
<button>COMMERCIAL, INTERIORS</button>
</div>
<div class="sub_box_icon">
<i class="fa-solid fa-plus"></i>
</div>
</div>
</div>
<div class="tab_content tab1 tab2 tab4 tab6">
<div class="img_box">
<img src="./img/tab_img/project4.jpg">
</div>
<div class="sub_boxs">
<div class="sub_box">
<p>CAPITAL TELTWAY BULDING</p>
<button>COMMERCIAL, INTERIORS</button>
</div>
<div class="sub_box_icon">
<i class="fa-solid fa-plus"></i>
</div>
</div>
</div>
<div class="tab_content tab1 tab2 tab4 tab3 tab5">
<div class="img_box">
<img src="./img/tab_img/project5.jpg">
</div>
<div class="sub_boxs">
<div class="sub_box">
<p>CAPITAL TELTWAY BULDING</p>
<button>COMMERCIAL, INTERIORS</button>
</div>
<div class="sub_box_icon">
<i class="fa-solid fa-plus"></i>
</div>
</div>
</div>
<div class="tab_content tab1 tab5 tab4">
<div class="img_box">
<img src="./img/tab_img/project6.jpg">
</div>
<div class="sub_boxs">
<div class="sub_box">
<p>CAPITAL TELTWAY BULDING</p>
<button>COMMERCIAL, INTERIORS</button>
</div>
<div class="sub_box_icon">
<i class="fa-solid fa-plus"></i>
</div>
</div>
</div>
</div>
</div>
</section>
<footer>
<div class="container">
<div class="footer_first">
<div class="footer_title">
<h2>ABOUT US</h2>
</div>
<div class="footer_logo">
<img src="./img/logo.png">
</div>
<div class="footer_text">
<p>Lorem ipsum dolor sit amet, consectetur <br>
adipisicing elit, sec do eiusmod tempor inci <br>
done idunt ut labore et dolore magma aliqua.</p>
</div>
<div class="footer_icons">
<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-github"></i>
</div>
</div>
<div class="footer_second">
<div class="footer_title">
<h2>WORKING HOURS</h2>
</div>
<div class="footer_text">
<p>We work 7 days a week, every day excluding <br>
major holidays. Contact us if you have an <br>
emergency, with our Hotline and Contact <br>
form.</p>
</div>
<div class="footer_day">
<div class="footer_day1">
<div>Monday - Friday : </div>
<div>10:00 - 16:00</div>
</div>
<div class="footer_day2">
<div>Saturday : </div>
<div>12:00 - 15:00</div>
</div>
<div class="footer_day3">
<div>Sunday and holidays : </div>
<div>09:00 - 12:00</div>
</div>
</div>
</div>
<div class="footer_third">
<div class="footer_title">
<h2>SERVICES</h2>
</div>
<div class="footer_third_text">
<div><i class="fa-solid fa-angle-right"></i>Pre-Construction</div>
<div><i class="fa-solid fa-angle-right"></i>General Contraction</div>
<div><i class="fa-solid fa-angle-right"></i>Construction Management</div>
<div><i class="fa-solid fa-angle-right"></i>Design and Build</div>
<div><i class="fa-solid fa-angle-right"></i>Self-perform Construction</div>
</div>
</div>
</div>
</footer>
</body>
</html>* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
list-style: none;
color: inherit;
}
.container {
width: 60%;
margin: 0 auto;
}
header {
background-color: rgb(15, 15, 15);
color: white;
padding: 20px 0;
}
header .container {
display: flex;
justify-content: space-between;
}
#nav > ul {
display: flex;
}
#nav > ul > li {
padding-right: 30px;
}
#mainList i {
padding-left: 10px;
}
#mainList {
position: relative;
}
#subList {
position: absolute;
top: 43px;
background-color: white;
color: black;
z-index: 1;
padding: 10px 20px;
}
#subList li {
line-height: 2;
border-bottom: 1px solid rgba(211, 211, 211, 0.623);
}
.display_none {
display: none;
}
#nav > ul > li:hover {
color: orange;
}
/* 슬라이더 */
.slidebox {
white-space: nowrap;
overflow-x: hidden;
position: relative;
}
.slides {
font-size: 0;
}
.slide {
width: 100%;
display: inline-block;
font-size: 16px;
position: relative;
transition: all 1.2s ease;
}
.slide img {
width: 100%;
}
.slide_text {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
color: white;
}
.slide_text h2 {
font-size: 32px;
font-weight: 200;
}
.slide_text h1 {
font-size: 60px;
margin-bottom: 20px;
}
.slide_text a {
border: 1px solid orange;
padding: 10px 20px;
margin-right: 10px;
}
.slide_text a:first-of-type {
background-color: orange;
}
#slidebtn i {
position: absolute;
top: 50%;
transform: translateY(-50%);
color: white;
font-size: 30px;
}
#slidebtn .left {
left: 30px;
}
#slidebtn .right {
right: 30px;
}
#slidebtn i:hover {
background-color: orange;
padding: 10px;
}
/* 탭 */
.tab_buttons {
margin: 30px 0;
line-height: 3;
border-bottom: 2px solid orange;
}
.tab_buttons span {
padding: 10px 20px 12px 20px;
cursor: pointer;
}
.tab_buttons span.active {
background-color: orange;
}
.tab_contents {
width: 100%;
height: 100%;
display: flex;
flex-wrap: wrap;
margin-bottom: 30px;
/* border: 5px solid blue; */
}
.tab_content {
flex: 1 1 33%;
position: relative;
overflow: hidden;
/* border: 2px solid red; */
}
.img_box img {
width: 100%
}
.img_box {
font-size: 0;
}
.sub_boxs {
width: 100%;
height: 100%;
background-color: rgba(43, 43, 43, 0.37);
position: absolute;
top: 0;
left: 0;
transform: translateY(-100%);
}
.tab_content:hover .sub_boxs {
transform: translateY(0%);
}
.sub_box {
position: absolute;
top: 50%;
left: 10%;
transform: translateY(-50%);
font-size: 20px;
color: white;
}
.sub_box button {
background-color: orange;
color: black;
font-size: 10px;
padding: 7px 7px;
border: none;
}
.sub_box_icon {
position: absolute;
left: 94%;
background-color: orange;
padding: 1px 6px;
color: white;
}
/* 푸터 */
footer {
background-color: black;
color: gray;
padding: 50px 0;
}
footer .container {
display: flex;
justify-content: space-between;
}
.footer_title h2 {
border-left: 1px solid orange;
color: white;
padding-left: 10px;
font-size: 18px;
margin-bottom: 30px;
}
.footer_text {
margin-bottom: 30px;
}
.footer_icons i{
padding-right: 20px;
}
.footer_day1,
.footer_day2,
.footer_day3 {
display: flex;
justify-content: space-between;
}
.footer_third_text {
line-height: 2.6;
}let main = document.querySelector("#mainList");
let sub = document.querySelector("#subList");
main.addEventListener("click",showSubList);
let cnt = 0;
function showSubList() {
cnt++;
if (cnt % 2 == 1) {
sub.classList.remove("display_none");
} else {
sub.classList.add("display_none");
}
}let left = document.querySelector(".left");
let right = document.querySelector(".right");
let slide = document.querySelectorAll(".slide");
left.addEventListener("click",leftsliding);
right.addEventListener("click",rightsliding);
let index = 0;
function leftsliding() {
index--;
if (index < 0) {
index = slide.length-1;
}
sliding();
}
function rightsliding() {
index++;
if (index >= slide.length) {
index = 0;
}
sliding();
}
function sliding() {
slide.forEach(function(slide) {
slide.style.transform = `translateX(${index*(-100)}%)`;
});
}let tab = document.querySelectorAll(".tab_buttons span");
let content = document.querySelectorAll(".tab_content");
for (let i = 0; i < tab.length; i++) {
tab[i].addEventListener("click",showTabContent);
tab[i].addEventListener("click",tabChangeColor);
}
function showTabContent() {
let tabClass = this.id;
content.forEach(function(content) {
if (tabClass === "all" || content.classList.contains(tabClass)) {
content.style.display = "block";
} else {
content.style.display = "none";
}
})
}
function tabChangeColor() {
tab.forEach(function(tab) {
tab.classList.remove("active");
})
this.classList.add("active");
}