main.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="main.css" />
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>식단 계획 홈페이지</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript">
window.onload = function() {
// 팝업 창 열기
var popup = window.open('', 'popup', 'width=420,height=480');
// 팝업 창 위치 조정
popup.moveTo(100, 100);
// 팝업 창에 이미지 표시
popup.document.write('<img src="image/popup.png" alt="팝업 이미지">');
};
/* 메인페이지 menu_slider */
$(document).ready(function() {
//기본으로 샐러드 메뉴 표시
$('#salad_sa').show();
// 메뉴 클릭 시 해당 메뉴 컨텐츠 표시
$('.menu-link').click(function() {
var target = $(this).data('target');
$('.mealplan_menu_slider').hide();
$('#' + target).show();
// 스크롤을 해당 메뉴로 이동
$('html, body').animate({
scrollTop: $('#' + target).offset().top
}, 500);
});
});
</script>
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div id="site-header">
<div class="top_util">
<ul class="menu_list" id="menu_list_header">
<li class="join"><a href="#">회원가입 </a> <a href="#">|</a>
<li class="login"><a href="#"> 로그인 </a> <a href="#">|</a>
<li class="cart"><a href="#"> 장바구니</a>
</ul>
</div>
<nav class="navbar navbar-expand-lg">
<div class="container-fluid" id="header-inner">
<a class="navbar-brand" href="#"><img src="image/MealPlan2.jpg"></a>
<form class="d-flex">
<input type="search" style="width: 300px;" class="form-control"
placeholder="Search">
<button type="submit" class="btn btn-outline-success"
style="margin-left: 5px;">Search</button>
</form>
</div>
</nav>
</div>
<nav id="gnb">
<ul class="menu">
<!-- nav카테고리 시작 -->
<li><a class="dp1" href="#">메뉴소개</a>
<div>
<ul class="submenu">
<li><a href="#">샌드위치</a></li>
<li><a href="#">샐러드</a></li>
<li><a href="#">브리또</a></li>
<li><a href="#">포케</a></li>
<li><a href="#">요거트</a></li>
<li><a href="#">음료</a></li>
</ul>
</div></li>
<li><a class="dp1" href="#">이용방법</a>
<div>
<ul class="submenu">
<li><a href="#">이용방법</a></li>
<li><a href="#">단체메뉴 이용방법</a></li>
</ul>
</div></li>
<li><a class="dp1" href="#">새소식</a>
<div>
<ul class="submenu">
<li><a href="#">이벤트 프로모션</a></li>
<li><a href="#">뉴스 공지사항</a></li>
<li><a href="#">광고영상</a></li>
</ul>
</div></li>
<li><a class="dp1" href="#">매장 찾기</a>
<div></div></li>
<li><a class="dp1" href="#">문의</a>
<div></div></li>
<li><a class="dp1" href="#">온라인 주문</a>
<div>
<ul class="submenu">
<li><a href="#">상점</a></li>
</ul>
</div></li>
</ul>
<!-- nav카테고리 끝 -->
</nav>
</div>
<div>
<!-- 중앙 캐러셋 시작 -->
<div id="carouselExample" class="carousel slide"
data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExample"
data-bs-slide-to="0" class="active"></button>
<button type="button" data-bs-target="#carouselExample"
data-bs-slide-to="1"></button>
</div>
<div class="carousel-inner">
<!-- 0 이미지 시작 -->
<div class="carousel-item active">
<img src="image/slide_4.png" class="d-block w-100">
</div>
<!-- 0 이미지 끝 -->
<!-- 1 이미지 시작 -->
<div class="carousel-item">
<img src="image/slide3.png" class="d-block w-100">
</div>
<!-- 1 이미지 끝 -->
</div>
<!--end of .carousel-inner-->
<button class="carousel-control-prev" type="button"
data-bs-target="#carouselExample" data-bs-slide="prev">
<span class="carousel-control-prev-icon"></span> <span
class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button"
data-bs-target="#carouselExample" data-bs-slide="next">
<span class="carousel-control-next-icon"></span> <span
class="visually-hidden">Next</span>
</button>
</div>
<!--중앙 캐러셀 끝 -->
<!-- 중앙 Menu 시작 -->
<div class="section_mealplan_menu">
<div class="hd">
<div>
<h2>MealPlan's Menu</h2>
</div>
<div class="tab">
<ul>
<li><a href="#" class="menu-link" data-target="salad_sa" style="color:gray;">샐러드 </a></li>
<li><a href="#" style="color:gray;">|</a></li>
<li><a href="#" class="menu-link" data-target="poke_po" style="color:gray;">포케 </a></li>
<li><a href="#" style="color:gray;">|</a></li>
<li><a href="#" class="menu-link" data-target="sabdwich_sw" style="color:gray;">샌드위치 </a></li>
<li><a href="#" style="color:gray;">|</a></li>
<li><a href="#" class="menu-link" data-target="britto_br" style="color:gray;">브리또</a></li>
</ul>
</div>
</div>
<!-- menu slider 시작 -->
<div class="mealplan_menu_slider_wrapper">
<!-- 샐러드 시작 -->
<div class="mealplan_menu_slider" id="salad_sa" style="display: none;">
<div>
<ul>
<li>
<div class="wrap">
<div class="img"><img alt="아보카도 닭가슴살 샐러드" src="image/salad1.png"></div>
<p>아보카도 닭가슴살 샐러드</p>
</div>
</li>
<li>
<div class="wrap" >
<div class="img"><img alt="쉬림프 샐러드" src="image/salad2.png" style="margin:5px;"></div>
<p>쉬림프 샐러드</p>
</div>
</li>
<li>
<div class="wrap">
<div class="img"><img alt="치킨 샐러드" src="image/salad6.png" style="margin:5px;"></div>
<p>치킨 샐러드</p>
</div>
</li>
<li>
<div class="wrap">
<div class="img"><img alt="연어 샐러드" src="image/salad4.png" style="margin:13px;"></div>
<p>연어 샐러드</p>
</div>
</li>
</ul>
</div>
</div>
<div class="mealplan_menu_slider" id="poke_po" style="display: none;">
<div>
<ul>
<li>
<div class="wrap">
<div class="img"><img alt="연어 포케" src="image/poke1.png" style="margin:5px;"></div>
<p style="padding-top:17px;">연어 포케</p>
</div>
</li>
<li>
<div class="wrap" >
<div class="img"><img alt="참치 포케" src="image/poke2.png"></div>
<p style="padding-top:3px;">참치 포케</p>
</div>
</li>
<li>
<div class="wrap">
<div class="img"><img alt="쉬림프 포케" src="image/poke3.png" style="margin:5px;"></div>
<p style="padding-top:17px;">쉬림프 포케</p>
</div>
</li>
</ul>
</div>
</div>
<div class="mealplan_menu_slider" id="sabdwich_sw" style="display: none;">
<div>
<ul>
<li>
<div class="wrap">
<div class="img"><img alt="햄 치즈 토마토 샌드위치" src="image/sandwich1.png"></div>
<p style="padding-top:40px;">햄 치즈 토마토 샌드위치</p>
</div>
</li>
<li>
<div class="wrap" >
<div class="img"><img alt="바질 토마토 크로와상 샌드위치" src="image/sandwich2.png" style="margin:5px;"></div>
<p style="padding-top:40px;">바질 토마토 크로와상 샌드위치</p>
</div>
</li>
<li>
<div class="wrap">
<div class="img"><img alt="스테이크 샌드위치" src="image/sandwich3.png" style="margin:5px;"></div>
<p style="padding-top:40px;">스테이크 샌드위치</p>
</div>
</li>
</ul>
</div>
</div>
<div class="mealplan_menu_slider" id="britto_br" style="display: none;">
<div>
<ul>
<li>
<div class="wrap">
<div class="img"><img alt="소고기 브리또" src="image/britto1.png"></div>
<p style="padding-top:40px;">소고기 브리또</p>
</div>
</li>
<li>
<div class="wrap" >
<div class="img"><img alt="치킨 브리또" src="image/britto1.png" style="margin:5px;"></div>
<p style="padding-top:40px;">치킨 브리또</p>
</div>
</li>
<li>
<div class="wrap">
<div class="img"><img alt="멕시칸 브리또" src="image/britto1.png" style="margin:5px;"></div>
<p style="padding-top:40px;">멕시칸 브리또</p>
</div>
</li>
</ul>
</div>
</div>
</div>
<!-- menu slider 끝 -->
</div>
<!-- 중앙 Menu 끝 -->
<br> <br> <br> <br> <br> <br> <br>
<!-- footer 시작 -->
<div id="footer">
<div class="content">
<div class="util_menu">
<ul>
<li><a href="#">이용약관</a> |</li>
<li><a href="#"><strong> 개인정보처리방침</strong></a> |</li>
<li><a href="#"> 점주관리자</a></li>
</ul>
</div>
<span class="addr">서울시 서초구 강남대로 강남빌딩 15층</span>
</div>
</div>
<!-- footer 끝 -->
</div>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"
type="text/javascript"></script>
</body>
</html>
main.css
@charset "UTF-8";
* {
padding: 0;
margin: 0;
}
#header-inner img {
width: 130px;
height: 70px;
}
a {
text-decoration: none;
font-size: 20px;
}
ul {
display: flex;
justify-content: flex-end;
list-style: none;
padding-right: 20px;
}
li {
list-style: none;
}
.menu_list a { /*회원가입, 로그인, 장바구니 */
text-decoration: none;
color: #808080;
}
.menu {
width: 100%;
overflow: hidden;
margin: 5px auto;
}
.menu li {
text-align: left;
line-height: 40px;
width: 200px;
padding-left: 10px;
}
.menu li:hover .submenu {
display: block;
height: 250px; /*서브메뉴 li한개의 높이 50*5*/
transition-duration: 1s;
z-index: 2; /*carousel 위로 submenu가 보여지게 index를 제일 높게 설정*/
}
.menu a {
text-decoration: none;
color: #000;
}
.submenu a {
text-decoration: none;
font-size: 16px;
}
.submenu li {
line-height: 50px;
background-color: #e2f1bb;
z-index: 1;
}
.submenu {
display: none;
position: absolute;
}
.carousel slide {
top: 0;
z-index: 0;
}
.container {
position: relative;
}
#footer {
background-color: #292929;
color: #666666;
}
.section_mealplan_menu {
width: 100%;
}
.hd {
margin:20px;
display:flex;
height:160px;
align-items:center;
}
.hd a {
text-decoration: none;
margin:20px;
font-weight: bolder;
}
.tab {
display:flex;
margin-left:auto;
}
.section_mealplan_menu .hd h2 {
color: #292929;
font-size: 40px;
font-weight: bold;
text-indent: 1.2em;
background: url("image/avocado.png");
background-repeat: no-repeat;
background-size: 60px 60px;
height:120px;
}
p{
font-weight: bolder;
font-size:20px;
text-align:center;
}
.wrap img{
margin:0px 50px;
}
'개발 작품' 카테고리의 다른 글
| [프로젝트 회고] 세미 프로젝트를 마치며 (0) | 2024.01.01 |
|---|---|
| 상품 (0) | 2023.11.10 |
| 게시판 (0) | 2023.11.10 |
| 이력서 만들기 [HTML] (0) | 2023.10.17 |
