Document
Congratulations!
You can get
75% off
Here is your code
LBSAVE75
Redeem
const getDiscountBtn = document.querySelector(".get-discount-btn");
const couponContainer = document.querySelector(".coupon-container");
const closeBtn = document.querySelector(".coupon-container .close");
getDiscountBtn.addEventListener("click", () => {
couponContainer.classList.add("active");
});
closeBtn.addEventListener("click", () => {
couponContainer.classList.remove("active");
});
.coupon-container .close {
width: 24px;
position: absolute;
top: 16px;
right: 16px;
z-index: 2;
cursor: pointer;
}
.coupon-container {
position: relative;
font-family: "Roboto", sans-serif;
max-width: 350px;
text-align: center;
background: #a3f9ff;
margin: 100px auto 30px auto;
opacity: 0;
pointer-events: none;
transform: translateY(30px);
transition: all 400ms ease;
}
.coupon-container.active {
opacity: 1;
pointer-events: auto;
transform: translateY(0);
}
.coupon-container .gift {
position: absolute;
width: 180px;
top: -120px;
left: 50%;
transform: translateX(-50%);
}
.coupon-container .bg {
position: absolute;
left: 0;
top: 0;
width: 100%;
}
.coupon-container h2,
.coupon-container p,
.coupon-container .discount,
.coupon-container .code,
.coupon-container .btn {
position: relative;
}
.coupon-container h2 {
color: #023047;
font-weight: 900;
font-size: 30px;
padding-top: 70px;
margin-bottom: 0;
}
.coupon-container p {
font-size: 18px;
color: #023047;
margin: 8px;
}
.coupon-container .discount {
font-family: "Poppins", sans-serif;
font-size: 56px;
font-weight: 300;
color: #076170;
}
.coupon-container .code {
font-size: 45px;
font-weight: 900;
}
.coupon-container .btn {
text-decoration: none;
background: #e63946;
padding: 16px;
display: inline-block;
width: 100%;
color: #fff;
box-sizing: border-box;
margin-top: 24px;
font-size: 24px;
font-weight: 900;
text-transform: uppercase;
transition: all 300ms ease;
}
.coupon-container .btn:hover {
background: #e22535;
}
.get-discount-btn {
padding: 8px 32px;
background: #023047;
color: #fff;
border: none;
font-size: 18px;
cursor: pointer;
}
0 Comments