Skip to content

Commit 15958f7

Browse files
solygambassolygambas
committed
add promo code
1 parent d3ee43b commit 15958f7

File tree

4 files changed

+141
-0
lines changed

4 files changed

+141
-0
lines changed

‎88-promo code/index.html

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!-- Based on Build a CSS Christmas Present that Opens & Closes by Shaun Pelling - The Net Ninja (2020)
2+
see: https://www.youtube.com/watch?v=EudYjHN7StE -->
3+
4+
<!DOCTYPE html>
5+
<html lang="en">
6+
<head>
7+
<meta charset="UTF-8" />
8+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
9+
<link rel="stylesheet" href="style.css" />
10+
<title>Promo Code</title>
11+
</head>
12+
<body>
13+
<div class="present" id="present">
14+
<div class="lid">
15+
<span></span>
16+
</div>
17+
<div class="promo">
18+
<p>20% off promo</p>
19+
<h2>ILOVEYOU</h2>
20+
</div>
21+
<div class="box">
22+
<span></span>
23+
<span></span>
24+
</div>
25+
</div>
26+
<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.4.0/dist/confetti.browser.min.js"></script>
27+
<script src="script.js"></script>
28+
</body>
29+
</html>

‎88-promo code/script.js

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
const present = document.getElementById("present");
2+
3+
present.addEventListener("mouseenter", () => {
4+
confetti();
5+
});
6+
present.addEventListener("touchstart", () => {
7+
confetti();
8+
});

‎88-promo code/style.css

+103
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Itim&display=swap");
2+
3+
* {
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
background-color: #333;
9+
font-family: "Itim", cursive;
10+
height: 100vh;
11+
overflow: hidden;
12+
margin: 0;
13+
display: flex;
14+
justify-content: center;
15+
align-items: center;
16+
}
17+
18+
.present {
19+
width: 410px;
20+
max-width: 90vw;
21+
margin: 0 auto;
22+
cursor: pointer;
23+
}
24+
25+
.box {
26+
width: 400px;
27+
max-width: 90vw;
28+
height: 250px;
29+
}
30+
31+
.box,
32+
.lid {
33+
background: radial-gradient(white 15%, transparent 15.1%),
34+
radial-gradient(white 15%, transparent 15.1%), rgb(240, 58, 58);
35+
background-position: 0 0, 25px 25px;
36+
background-size: 50px 50px;
37+
position: relative;
38+
margin: 0 auto;
39+
}
40+
41+
.lid {
42+
width: 400px;
43+
max-width: 90vw;
44+
height: 70px;
45+
box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.2);
46+
z-index: 1;
47+
padding: 0 2px;
48+
background-color: rgb(216, 52, 52);
49+
top: 0;
50+
left: 0;
51+
transition: top ease-out 0.5s, left ease-out 0.5s, transform ease-out 0.5s;
52+
}
53+
54+
.box span,
55+
.lid span {
56+
position: absolute;
57+
display: block;
58+
background: rgba(235, 199, 0, 0.8);
59+
box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.1);
60+
}
61+
62+
.box span:first-child {
63+
width: 100%;
64+
height: 60px;
65+
top: 80px;
66+
}
67+
68+
.box span:last-child,
69+
.lid span {
70+
width: 60px;
71+
height: 100%;
72+
left: 170px;
73+
}
74+
75+
.promo {
76+
font-size: 30px;
77+
color: white;
78+
text-align: center;
79+
position: relative;
80+
height: 0;
81+
top: 10px;
82+
transition: all ease-out 0.7s;
83+
}
84+
85+
.promo p {
86+
font-size: 24px;
87+
margin: 0;
88+
}
89+
90+
.promo h2 {
91+
font-size: 40px;
92+
margin: 0;
93+
}
94+
95+
.present:hover .lid {
96+
top: -100px;
97+
transform: rotateZ(10deg);
98+
left: 10px;
99+
}
100+
101+
.present:hover .promo {
102+
top: -80px;
103+
}

‎README.md

+1
Original file line numberDiff line numberDiff line change
@@ -93,6 +93,7 @@
9393
| 85 | [Sneaker Shop](https://github.com/solygambas/html-css-fifty-projects/tree/master/85-sneaker%20shop) | [Live Demo](https://codepen.io/solygambas/full/KKazqNZ) |
9494
| 86 | [Coming Soon Page](https://github.com/solygambas/html-css-fifty-projects/tree/master/86-coming%20soon%20page) | [Live Demo](https://codepen.io/solygambas/full/bGgwNaM) |
9595
| 87 | [Sliding Sign In & Sign Up Form](https://github.com/solygambas/html-css-fifty-projects/tree/master/87-sliding%20signin%20signup%20form) | [Live Demo](https://codepen.io/solygambas/full/bGgwoGm) |
96+
| 88 | [Promo Code](https://github.com/solygambas/html-css-fifty-projects/tree/master/88-promo%20code) | [Live Demo](https://codepen.io/solygambas/full/wvggBXe) |
9697

9798
This repository is mostly based on 2 courses by Brad Traversy (2020):
9899

0 commit comments

Comments
 (0)