반응형
Furniture Shop
'가구계의 아마존', Furniture Shop이 블랙 프라이데이를 맞아 할인 쿠폰을 제공하려고 합니다.
'쿠폰 받기' 버튼을 누르면 팝업이 1초 이내에 부드럽게 나타나고, '확인' 버튼 또는 키보드의 esc 키를 누르면 팝업이 1초 이내에 부드럽게 없어져야 합니다.
<!DOCTYPE html>
<html>
<head>
<title>Furniture Shop</title>
<meta charset="utf-8" />
<link href="styles.css" rel="stylesheet" />
</head>
<body>
<div class="navbar">
<a href="#" id="logo">
<img src="logo.png" width="165">
</a>
<ul id="menu">
<li><a href="#">SHOP</a></li>
<li><a href="#">CART</a></li>
<li><a href="#">LOGIN</a></li>
</ul>
</div>
<div class="hero-header">
<div class="info">
<h1>블랙 프라이데이 슈퍼 세일</h1>
<h2>최대 50% 할인의 혜택을 받아보세요!</h2>
<button id="popup-trigger">쿠폰 받기</button>
</div>
</div>
<div id="popup" role="alert">
<div id="popup-container">
<h3>다운 완료!</h3>
<p>내 쿠폰함에서 확인하세요!</p>
<button id="close-btn">확인</button>
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script>
$('#popup-trigger').on('click', popupFadeIn);
function popupFadeIn() {
$('#popup').fadeIn(500);
}
$('#close-btn').on('click', popupFadeOut);
function popupFadeOut() {
$('#popup').fadeOut(500);
}
$(document).on('keydown', pushEscKey);
function pushEscKey(event) {
if(event.which == '27') {
$('#popup').fadeOut(500);
}
}
</script>
</body>
</html>
* {
box-sizing: border-box;
}
body {
margin: 0;
min-width: 992px;
font-family: "Helvetica";
}
/* navbar */
.navbar {
height: 75px;
padding-left: 30px;
padding-right: 30px;
}
.navbar #logo {
line-height: 75px;
}
.navbar #logo img {
vertical-align: middle;
}
.navbar #menu {
float: right;
list-style: none;
padding: 0;
margin: 0;
}
.navbar #menu li {
float: left;
margin-left: 50px;
line-height: 75px;
}
.navbar #menu li a {
color: #545454;
font-size: 13px;
text-decoration: none;
}
/* hero header */
.hero-header {
height: calc(100vh - 75px);
background-image: url("hero_image.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
position: relative;
}
.info {
width: 380px;
position: absolute;
left: 15%;
top: 100px;
}
.info h1 {
font-size: 52px;
color: #4A4A4A;
margin: 0;
margin-bottom: 20px;
}
.info h2 {
font-size: 19px;
color: #4A4A4A;
margin: 0;
margin-bottom: 30px;
}
.info button {
background: #856246;
box-shadow: 3px 3px 8px 0 rgba(0,0,0,0.20);
border-radius: 5px;
padding: 15px 30px;
color: white;
font-size: 19px;
cursor: pointer;
}
/* popup */
#popup {
position: fixed;
left: 0;
top: 0;
height: 100%;
width: 100%;
background-color: rgba(0,0,0,0.50);
display: none;
}
#popup-container {
position: relative;
width: 90%;
max-width: 400px;
margin: 4em auto;
background: #FFF;
border-radius: .25em .25em .4em .4em;
text-align: center;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
padding: 20px;
}
#popup-container h3 {
font-size: 20px;
color: #4A4A4A;
}
#popup-container p {
font-size: 20px;
color: #797979;
}
#popup-container button {
background: #856246;
border-radius: 100px;
color: white;
padding: 10px 68px;
cursor: pointer;
font-size: 16px;
}
#popup-container .cd-buttons:after {
content: "";
display: table;
clear: both;
}
#popup-container .cd-buttons li {
float: left;
width: 50%;
list-style: none;
}본 내용은 Codeit의 'jQuery' 강의를
참고하여 작성한 내용입니다.
반응형
'Front-end > jQuery' 카테고리의 다른 글
| [jQuery 활용하기] 03. jQuery 2 (0) | 2021.02.23 |
|---|---|
| [jQuery 활용하기] 03. jQuery 2 (0) | 2021.02.22 |
| [jQuery 활용하기] 01. jQuery 1 (0) | 2021.02.19 |
| [jQuery 활용하기] 01. jQuery 1 (0) | 2021.02.19 |
| [jQuery 활용하기] 01. jQuery 1 (0) | 2021.02.19 |