<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<title>Insert title here</title>
<style>
/* Remove the navbar's default rounded borders and increase the bottom margin */
.navbar {
margin-bottom: 50px;
border-radius: 0;
}
/* Remove the jumbotron's default bottom margin */
.jumbotron {
margin-bottom: 0;
}
/* Add a gray background color and some padding to the footer */
footer {
background-color: #f2f2f2;
padding: 25px;
}
</style>
</head>
<body>
<div class="jumbotron">
<div class="container text-center">
<h1>Online Store</h1>
<p>Mission, Vission & Values</p>
</div>
</div>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar">안녕</span>
<span class="icon-bar">안여언리ㅏㄴ이ㅏㄹㄴ이롱나ㅣㅗ라로아</span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Logo제현아 너가 하는 부분이야</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Deals</a></li>
<li><a href="#">Stores</a></li>
<li><a href="#">Contact</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Your Account</a></li>
<li><a href="#"><span class="glyphicon glyphicon-shopping-cart"></span> Cart</a></li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="panel panel-primary">
<div class="panel-heading">김치찌개 레시피</div>
<div class="panel-body"><img src="https://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="../image/레스토랑.jpg"></div>
<div class="panel-footer">Buy 50 mobiles and get a gift card</div>
</div>
</div>
<div class="col-sm-4">
<div class="panel panel-danger">
<div class="panel-heading">BLACK FRIDAY DEAL</div>
<div class="panel-body"><img src="https://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image"></div>
<div class="panel-footer">Buy 50 mobiles and get a gift card</div>
</div>
</div>
<div class="col-sm-4">
<div class="panel panel-success">
<div class="panel-heading">BLACK FRIDAY DEAL</div>
<div class="panel-body"><img src="https://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image"></div>
<div class="panel-footer">Buy 50 mobiles and get a gift card</div>
</div>
</div>
</div>
</div><br>
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="panel panel-primary">
<div class="panel-heading">BLACK FRIDAY DEAL</div>
<div class="panel-body"><img src="https://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image"></div>
<div class="panel-footer">Buy 50 mobiles and get a gift card</div>
</div>
</div>
<div class="col-sm-4">
<div class="panel panel-primary">
<div class="panel-heading">BLACK FRIDAY DEAL</div>
<div class="panel-body"><img src="https://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image"></div>
<div class="panel-footer">Buy 50 mobiles and get a gift card</div>
</div>
</div>
<div class="col-sm-4">
<div class="panel panel-primary">
<div class="panel-heading">BLACK FRIDAY DEAL</div>
<div class="panel-body"><img src="https://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image"></div>
<div class="panel-footer">Buy 50 mobiles and get a gift card</div>
</div>
</div>
</div>
</div><br><br>
<footer class="container-fluid text-center">
<p>Online Store Copyright</p>
<form class="form-inline">Get deals:
<input type="email" class="form-control" size="50" placeholder="Email Address">
<button type="button" class="btn btn-danger">Sign Up</button>
</form>
</footer>
</body>
</html>
-----------------------------------------------------------------------------------------------------
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
/* Remove the navbar's default rounded borders and increase the bottom margin */
.navbar {
margin-bottom: 50px;
border-radius: 30;
background : #4682B4;
}
/* Remove the jumbotron's default bottom margin */
.jumbotron {
margin-bottom: 0;
}
/* Add a gray background color and some padding to the footer */
footer {
background-color: #f2f2f2;
padding: 25px;
}
.panel-heading , .panel-footer {
text-align : center;
}
</style>
</head>
<script>
</script>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Logo</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Deals</a></li>
<li><a href="#">Stores</a></li>
<li><a href="#">Contact</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Your Account</a></li>
<li><a href="#"><span class="glyphicon glyphicon-shopping-cart"></span> Cart</a></li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="panel panel-primary">
<div class="panel-heading">이탈리안 쉐프의 하루를 경험하세요</div>
<div class="panel-body"><img src= class="img-responsive" style="width:100%" alt="이탈리안요리"></div>
<div class="panel-footer">티본스테이크 / 마르게리타 피자 / 라자냐</div>
</div>
</div>
<div class="col-sm-4">
<div class="panel panel-danger">
<div class="panel-heading">한식의 진수 : 김영하쉐프와 함께 </div>
<div class="panel-body"><img src="https://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image"></div>
<div class="panel-footer">궁중요리 / 수라상의 기본</div>
</div>
</div>
<div class="col-sm-4">
<div class="panel panel-success">
<div class="panel-heading">미국의 홈파티 화려하게 즐기자</div>
<div class="panel-body"><img src="https://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image"></div>
<div class="panel-footer">버팔로윙 / 칠면조 요리 / 치즈버거 / 구벤샌드위치 / 시카고피자 </div>
</div>
</div>
</div>
</div><br>
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="panel panel-primary">
<div class="panel-heading">프랑스 르꼬라라 레드 스타 쉐프의 <br> 프랑스디저트 세계</div>
<div class="panel-body"><img src="https://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image"></div>
<div class="panel-footer">마카롱 / 에끌레어 / 오페라 / 몽블랑 </div>
</div>
</div>
<div class="col-sm-4">
<div class="panel panel-primary">
<div class="panel-heading">한식디저트의 우아함</div>
<div class="panel-body"><img src="https://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image"></div>
<div class="panel-footer">떡케이크 / 한과 / 약과</div>
</div>
</div>
<div class="col-sm-4">
<div class="panel panel-primary">
<div class="panel-heading">칵테일의 향긋함과 달큰함에 취하는 칵테일파티</div>
<div class="panel-body"><img src="https://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image"></div>
<div class="panel-footer">마르게리타 / 마티니 / 크렘 드 카시스</div>
</div>
</div>
</div>
</div><br><br>
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="panel panel-primary">
<div class="panel-heading">요리초보의 장금이 되기</div>
<div class="panel-body"><img src="https://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image"></div>
<div class="panel-footer">김치찌개 / 떡국 / 김밥</div>
</div>
</div>
<div class="col-sm-4">
<div class="panel panel-primary">
<div class="panel-heading">유투버 블루베리소녀의 케이크 클래스</div>
<div class="panel-body"><img src="https://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image"></div>
<div class="panel-footer">레드벨벳 크림치즈케이크 / <br>크림치즈 필링 당근 케이크</div>
</div>
</div>
<div class="col-sm-4">
<div class="panel panel-primary">
<div class="panel-heading">귀여운 꼬마들을 위한 도시락 행진곡</div>
<div class="panel-body"><img src="https://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image"></div>
<div class="panel-footer">도시락 5종 세트 </div>
</div>
</div>
</div>
</div><br><br>
<footer class="container-fluid text-center">
<p>Online Store Copyright</p>
<form class="form-inline">Get deals:
<input type="email" class="form-control" size="50" placeholder="Email Address">
<button type="button" class="btn btn-danger">Sign Up</button>
</form>
</footer>
</body>
</html>
댓글
댓글 쓰기