728x90
반응형
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>맥도날드</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<link
rel="icon"
href="https://www.mcdonalds.co.kr/kor/images/favicon.ico"
/>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Noto+Sans+KR"
/>
<style>
html {
scroll-behavior: smooth;
}
body {
font-weight: 700;
padding: 0;
margin: 0;
font-size: 18px;
font-family: "맑은 고딕";
}
div {
box-sizing: border-box;
}
.flex {
display: flex;
}
ul {
list-style: none;
padding-left: 0;
}
header {
position: sticky;
top: 0;
background-color: white;
z-index: 1;
}
#menu {
height: 140px;
justify-content: center;
align-items: center;
}
#menu > #logo {
height: 100px;
width: 100px;
margin-right: 100px;
}
#nav {
position: relative;
font-weight: bold;
height: 140px;
margin-bottom: 0;
}
#nav > li {
display: flex;
justify-content: center;
align-items: center;
margin-right: 85px;
}
#menu > #nav2 {
color: white;
font-size: 0.7em;
font-weight: bold;
box-sizing: border-box;
align-items: center;
}
#menu > #nav2 > #renter {
background-color: #db0007;
width: 72px;
padding: 5px 10px;
border-radius: 29px;
text-align: center;
margin: 5px;
}
#menu > #nav2 > #recruit {
background-color: #d87e00;
width: 72px;
padding: 5px 10px;
border-radius: 29px;
text-align: center;
margin: 5px;
}
#menu > #nav2 > #ENG {
background-color: #264a36;
width: 72px;
padding: 5px 10px;
border-radius: 29px;
text-align: center;
margin: 5px;
}
#menu > #nav2 > #search {
color: black;
font-size: 29px;
margin-left: 20px;
background-image: url("https://www.mcdonalds.co.kr/kor/images/common/ico_search.png");
background-size: 100%;
background-position: center;
background-repeat: no-repeat;
width: 36px;
height: 36px;
}
#ad > img {
width: 100%;
min-width: 1500px;
}
.carousel-caption {
display: flex;
align-items: center;
margin-left: 27%;
}
.pausebtn {
background-image: url("https://www.mcdonalds.co.kr/kor/images/main/bg_swiper_new.png");
width: 36px;
height: 36px;
background-position: -92px -36px;
}
.progress {
height: 5px;
width: 30%;
margin: auto;
margin-left: 10px;
}
.progress-bar {
width: 70%;
background-color: #ffba00;
height: 5px;
}
#lives {
width: 1180px;
margin: 0 auto;
margin-top: 20px;
}
#lives > h1 {
margin-bottom: 50px;
}
#lives > #wrap {
flex-wrap: wrap;
}
.item {
border-radius: 10px;
box-shadow: 0 3px 5px darkgrey;
margin-right: 40px;
margin-bottom: 30px;
}
.item:nth-child(3),
.item:nth-child(6) {
margin-right: 0;
}
.item > .image > img {
border-radius: 10px 10px 0 0;
}
.item > .title {
padding-left: 30px;
}
.item > .title > h3 {
margin: 10px 0;
font-size: 18px;
font-weight: 700;
margin-bottom: 50px;
}
/*더보기*/
#lives > #more {
background-image: url("https://www.mcdonalds.co.kr/kor/images/common/btn_more.png");
text-align: center;
width: 70px;
height: 70px;
margin: 20px auto;
background-position: center;
background-size: 100%;
background-repeat: no-repeat;
cursor: pointer;
}
footer {
background-color: #292929;
padding: 20px;
font-size: 14px;
}
footer > #frame {
width: 1180px;
margin: 0 auto;
justify-content: space-between;
}
#info1 {
margin-left: 0;
}
#info1 > li {
padding: 5px 0;
color: white;
}
#info1 > li:first-child {
color: #ffff00;
}
#info2 {
color: white;
opacity: 0.5;
flex: 3;
margin-left: 60px;
}
#info2 > li {
padding: 5px 0;
}
#sns > .icon {
background-image: url(https://www.mcdonalds.co.kr/kor/images/common/ico_sns.png);
background-repeat: no-repeat;
width: 40px;
height: 40px;
margin: 10px;
cursor: pointer;
}
#sns > .icon:nth-child(2) {
background-position: 0 -40px;
}
#sns > .icon:nth-child(3) {
background-position: 0 -80px;
}
#sns > .icon:nth-child(4) {
background-position: 0 -120px;
}
#sns > .icon:last-child {
background-image: url(https://www.mcdonalds.co.kr/kor/images/common/web_accessibility.png);
background-size: 100%;
background-repeat: no-repeat;
width: 100px;
height: 70px;
margin: 0;
margin-left: 5px;
}
#aside_fixed {
position: fixed;
top: 400px;
right: 200px;
background-color: rgba(255, 255, 255, 0);
width: 121px;
height: 121px;
}
#aside_fixed > div {
width: 100%;
height: auto;
margin: 20px auto;
}
#aside_fixed > #story {
display: block;
background-image: url("https://www.mcdonalds.co.kr/kor/images/common/btn_story_04.png");
background-position: center;
background-repeat: no-repeat;
background-size: 94px;
height: 121px;
width: 121px;
}
#aside_fixed > #McDelivery {
display: block;
background-image: url("https://www.mcdonalds.co.kr/kor/images/common/btn_delivery_04.png");
background-position: center;
background-repeat: no-repeat;
background-size: 94px;
height: 121px;
width: 121px;
}
#aside_fixed > a {
text-decoration: none;
}
#aside_fixed #top {
background-image: url("https://www.mcdonalds.co.kr/kor/images/common/btn_top_04.png");
background-position: center;
background-repeat: no-repeat;
background-size: 51px;
width: 51px;
height: 48px;
margin: auto;
}
.dropbox {
position: absolute;
width: 100%;
background-color: white;
height: 300px;
top: 140px;
border-top: 1px solid #ccc;
}
.dropbox:hover {
display: block;
}
.dropdownitem {
padding-top: 10px;
width: fit-content;
margin: auto;
margin-left: 550px;
}
.dropdownitem > ol {
list-style: none;
}
.dropdownitem > ol > li {
margin-bottom: 10px;
}
.hidden {
display: none;
}
</style>
</head>
<body>
<div id="root">
<header>
<div id="menu" class="flex">
<img
id="logo"
src="https://www.mcdonalds.co.kr/kor/images/common/logo.png"
alt="맥도날드"
/>
<nav>
<ul id="nav" class="flex">
<li>Menu</li>
<li>Store</li>
<li>What's New</li>
<li>Story</li>
</ul>
</nav>
<div id="nav2" class="flex">
<div id="renter">임차문의</div>
<div id="recruit">RECRUIT</div>
<div id="ENG">ENG</div>
<div id="search"></div>
</div>
</div>
</header>
<div></div>
<main>
<div id="ad">
<!-- Carousel -->
<div
id="demo"
class="carousel slide"
data-bs-ride="carousel"
>
<!-- Indicators/dots -->
<div class="carousel-indicators">
<button
type="button"
data-bs-target="#demo"
data-bs-slide-to="0"
class="active"
></button>
<button
type="button"
data-bs-target="#demo"
data-bs-slide-to="1"
></button>
<button
type="button"
data-bs-target="#demo"
data-bs-slide-to="2"
></button>
<button
type="button"
data-bs-target="#demo"
data-bs-slide-to="3"
></button>
</div>
<!-- The slideshow/carousel -->
<div class="carousel-inner">
<div class="carousel-item active">
<img
src="https://www.mcdonalds.co.kr/upload/main/banner/1688570206812.jpg"
alt="Los Angeles"
class="d-block"
style="width: 100%"
/>
<div class="carousel-caption">
<div class="pausebtn"></div>
<div class="progress">
<div class="progress-bar"></div>
</div>
</div>
</div>
<div class="carousel-item">
<img
src="https://www.mcdonalds.co.kr/upload/main/banner/1680589479787.jpg"
alt="Chicago"
class="d-block"
style="width: 100%"
/>
<div class="carousel-caption">
<div class="pausebtn"></div>
<div class="progress">
<div class="progress-bar"></div>
</div>
</div>
</div>
<div class="carousel-item">
<img
src="https://www.mcdonalds.co.kr/upload/main/banner/1685434290571.jpg"
alt="New York"
class="d-block"
style="width: 100%"
/>
<div class="carousel-caption">
<div class="pausebtn"></div>
<div class="progress">
<div class="progress-bar"></div>
</div>
</div>
</div>
<div class="carousel-item">
<img
src="https://www.mcdonalds.co.kr/upload/main/banner/1684299753643.jpg"
alt="New York"
class="d-block"
style="width: 100%"
/>
<div class="carousel-caption">
<div class="pausebtn"></div>
<div class="progress">
<div class="progress-bar"></div>
</div>
</div>
</div>
</div>
<!-- Left and right controls/icons -->
<button
class="carousel-control-prev"
type="button"
data-bs-target="#demo"
data-bs-slide="prev"
>
<span class="carousel-control-prev-icon"></span>
</button>
<button
class="carousel-control-next"
type="button"
data-bs-target="#demo"
data-bs-slide="next"
>
<span class="carousel-control-next-icon"></span>
</button>
</div>
</div>
<div id="lives">
<h1 style="font-weight: 700">McDonald's LIVE</h1>
<div id="wrap" class="flex">
<div class="item">
<div class="image">
<img
src="https://www.mcdonalds.co.kr/upload/main/card/1688536163368.jpg"
alt=""
/>
</div>
<div class="title">
<h3>땅 끝자락 진도에서 찾은<br />한국의 맛</h3>
</div>
</div>
<div class="item">
<div class="image">
<img
src="https://www.mcdonalds.co.kr/upload/main/card/1688536267129.jpg"
alt=""
/>
</div>
<div class="title">
<h3>
100% 우리 곡물로 살린<br />고소한 한국의 맛
</h3>
</div>
</div>
<div class="item">
<div class="image">
<img
src="https://www.mcdonalds.co.kr/upload/main/card/1689752728419.jpg"
alt=""
/>
</div>
<div class="title">
<h3>
맥크리스피 버거 세트 먹고?<br />슈퍼팝
페스티벌 가자!
</h3>
</div>
</div>
<div class="item">
<div class="image">
<img
src="https://www.mcdonalds.co.kr/upload/main/card/1686722914159.jpg"
alt=""
/>
</div>
<div class="title">
<h3>갓성비 간식 맛집, 맥도날드 해피 스낵!</h3>
</div>
</div>
<div class="item">
<div class="image">
<img
src="https://www.mcdonalds.co.kr/upload/main/card/1684299963307.jpg"
alt=""
/>
</div>
<div class="title">
<h3>여름의 맛!<br />겉바속쫄 맥윙!</h3>
</div>
</div>
<div class="item">
<div class="image">
<img
src="https://www.mcdonalds.co.kr/upload/main/card/1685434964328.jpg"
alt=""
/>
</div>
<div class="title">
<h3>
달콤한 아이스크림과<br />진~한 라떼의 만남!
</h3>
</div>
</div>
</div>
<div id="more"></div>
</div>
</main>
<footer>
<div id="frame" class="flex">
<ul id="info1">
<li>개인정보 처리방침</li>
<li>위치정보 이용약관</li>
<li>사이트맵</li>
<li>임차문의</li>
<li>고객문의</li>
<li>인재채용</li>
</ul>
<ul id="info2">
<li>한국맥도날드(유)</li>
<li>대표이사: 김기원</li>
<li>사업자등록번호: 101-81-26409</li>
<li>전화주문: 1600-5252</li>
<li>
COPYRIGHT © 2019 ALL RIGHTS RESERVED BY McDonald's.
</li>
</ul>
<ul id="sns" class="flex">
<li class="icon"></li>
<li class="icon"></li>
<li class="icon"></li>
<li class="icon"></li>
<li class="icon"></li>
</ul>
</div>
</footer>
<div id="aside_fixed">
<div id="story"></div>
<div id="McDelivery"></div>
<a href="#"><div id="top"></div></a>
</div>
</div>
<div class="dropbox hidden">
<div class="dropdownitem flex">
<ol>
<li>버거</li>
<li>맥런치</li>
<li>맥모닝</li>
<li>해피스낵</li>
<li>사이드&디저트</li>
<li>맥카페&음료</li>
<li>해피밀</li>
</ol>
<ol>
<li>매장찾기</li>
<li>맥딜리버리</li>
<li>맥드라이브</li>
<li>임차문의</li>
</ol>
<ol>
<li>프로모션</li>
<li>새로운 소식</li>
<li>이달의 해피밀</li>
</ol>
<ol>
<li>브랜드 소개</li>
<li>사회적 책임과 지원</li>
<li>맥도날드 품질 이야기</li>
<li>맥도날드 사람들</li>
</ol>
</div>
</div>
<script>
const menu1 = document.querySelector("#nav > li:nth-child(1)");
const menu2 = document.querySelector("#nav > li:nth-child(2)");
const menu3 = document.querySelector(" #nav > li:nth-child(3)");
const menu4 = document.querySelector(" #nav > li:nth-child(4)");
const dropbox = document.querySelector(".dropbox");
menu1.addEventListener("mouseover", (event) => {
menu1.style.borderBottom = "3px solid #ffba00 ";
dropbox.classList.remove("hidden");
});
menu1.addEventListener("mouseleave", (event) => {
menu1.style.border = "none";
dropbox.classList.add("hidden");
});
menu2.addEventListener("mouseleave", (event) => {
menu2.style.border = "none";
dropbox.classList.add("hidden");
});
menu2.addEventListener("mouseover", (event) => {
menu2.style.borderBottom = "3px solid #ffba00 ";
dropbox.classList.remove("hidden");
});
menu3.addEventListener("mouseleave", (event) => {
menu3.style.border = "none";
dropbox.classList.add("hidden");
});
menu3.addEventListener("mouseover", (event) => {
menu3.style.borderBottom = "3px solid #ffba00 ";
dropbox.classList.remove("hidden");
});
menu4.addEventListener("mouseleave", (event) => {
menu4.style.border = "none";
dropbox.classList.add("hidden");
});
menu4.addEventListener("mouseover", (event) => {
menu4.style.borderBottom = "3px solid #ffba00 ";
dropbox.classList.remove("hidden");
});
</script>
</body>
</html>728x90
반응형
