Skip to content

Commit b4bddaf

Browse files
jeff-mzjeff-mz
committed
added project number 103
1 parent 1c11fd5 commit b4bddaf

File tree

10 files changed

+309
-118
lines changed

10 files changed

+309
-118
lines changed

‎103-halloween-landing-page/README.MD

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
# HALLOWEEN LANDING PAGE
2+
3+
A funny and cool landing page for halloween with animated elements
4+
5+
## Screenshots
6+
7+
![alt text](images/hero.png)
8+
9+
## TECHNOLOGIES
10+
11+
- HTML AND CSS
12+
13+
- [Bootstrap](https://getbootstrap.com/)
14+
15+
- [cursor effect](https://github.com/tholman/cursor-effects)

‎103-halloween-landing-page/images/bat.png

724 Bytes
Loading

‎103-halloween-landing-page/images/ghost.png

1.5 KB
Loading

‎103-halloween-landing-page/images/hero.png

660 KB
Loading

‎103-halloween-landing-page/images/illustration.png

427 KB
Loading

‎103-halloween-landing-page/images/shape-bg.png

266 KB
Loading

‎103-halloween-landing-page/images/side-ghost.png

1.82 KB
Loading

‎103-halloween-landing-page/index.html

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Happy Halloween 👻</title>
8+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
9+
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
10+
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
11+
12+
<link rel="stylesheet" href="./style.css">
13+
</head>
14+
15+
<body>
16+
<main style="background-color: #000; width: 100%;">
17+
<header style="position: relative;">
18+
<nav class="navbar navbar-expand-lg ">
19+
<div class="container-fluid ms-5 my-4">
20+
<a class="navbar-brand" href="#"><img src="./images/ghost.png" alt="Ghost icon"
21+
class="img-fluid animated-logo"></a>
22+
<button class="navbar-toggler text-bg-secondary border-0 btn-outline-danger" style="z-index: 10;"
23+
type="button" data-bs-toggle="collapse" data-bs-target="#menuItems" aria-controls="menuItems"
24+
aria-expanded="false" aria-label="Toggle navigation">
25+
<span class="navbar-toggler-icon text-danger" style="z-index: 10;"></span>
26+
</button>
27+
<div class="collapse navbar-collapse" id="menuItems">
28+
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
29+
<li class="nav-item mx-3">
30+
<a class="nav-link text-white active" aria-current="page" href="#">Home</a>
31+
</li>
32+
<li class="nav-item mx-3">
33+
<a class="nav-link text-white" href="#">Services</a>
34+
</li>
35+
<li class="nav-item mx-3">
36+
<a class="nav-link text-white" href="#">Success Stories </a>
37+
</li>
38+
<li class="nav-item mx-3">
39+
<a class="nav-link text-white" href="#">Blog </a>
40+
</li>
41+
<li class="nav-item mx-3"><button type="button"
42+
class="text-white btn btn-outline-danger ">Sign
43+
up</button>
44+
</li>
45+
</ul>
46+
</div>
47+
</div>
48+
</nav>
49+
<img src="./images/side-ghost.png" alt="ghost icon" class="img-fluid"
50+
style="position: absolute; top: 0; right: 0; z-index:2;">
51+
</header>
52+
53+
<section class="container">
54+
<!-- --------- CALL TO ACTION ----------- -->
55+
<div class="row custom-bg">
56+
<!-- <img src="./images/shape-bg.png" alt="shape of light" class="img-fluid " style="z-index: 1;"> -->
57+
<article class="col-sm-12 col-md-6">
58+
<h1 class="animated-text display-5 fw-bold text-white my-3">Halloween Products for your party
59+
<span>
60+
<img id="bat" src="./images/bat.png" alt="bat icon ">
61+
</span>
62+
</h1>
63+
<p class="fs-5 text-white opacity-50 ">Search anything for your party and get fast and fast!</p>
64+
<div class="my-4">
65+
<button class="btn btn-danger me-3">Sign up </button>
66+
<button class="btn btn-outline-danger ">View products </button>
67+
</div>
68+
<!-- ----------- BOX ---------------- -->
69+
<div class="my-4 p-3 rounded-2" style="background-color: #EA6623;max-width: 350px;">
70+
<i class="fa fa-gift" style="font-size:36px"></i>
71+
<p class="fw-bold fs-3 mb-0">Rewards & bonus <span>
72+
<i class="fa fa-chevron-circle-right" style="font-size:22px"></i>
73+
</span></p>
74+
<p class="fs-6">Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem repellendus
75+
possimus odio iusto id, sint doloribus tenetur.</p>
76+
</div>
77+
</article>
78+
79+
<!-- ----------------HALLOWEEN IMAGE ------------- -->
80+
<article class="col-sm-12 col-md-6">
81+
<div class="container"><img src="./images/illustration.png" class="img-fluid" alt="halloween icons"
82+
style="background-blend-mode: screen;">
83+
</div>
84+
</article>
85+
</div>
86+
</section>
87+
</main>
88+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
89+
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
90+
crossorigin="anonymous"></script>
91+
<script src="https://unpkg.com/cursor-effects@latest/dist/browser.js"></script>
92+
<script>
93+
window.addEventListener("load", (event) => {
94+
new cursoreffects.emojiCursor({ emoji: ["🔥", "👻", "🎃", '🦇'] });
95+
});
96+
</script>
97+
98+
</body>
99+
100+
</html>

‎103-halloween-landing-page/style.css

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
.btn-danger {
2+
background-color: #ea6623;
3+
}
4+
.btn-outline-danger {
5+
border-color: #ea6623;
6+
color: #ea6623;
7+
}
8+
9+
@media (min-width: 920px) {
10+
main {
11+
min-height: 100vh;
12+
background: url(./images/shape-bg.png) -100px -100px / cover no-repeat;
13+
}
14+
}
15+
.animated-logo {
16+
animation: anime1 5s linear infinite;
17+
}
18+
@keyframes anime1 {
19+
0% {
20+
transform: translate(40px, 18px);
21+
}
22+
25% {
23+
transform: translate(20px, 20px);
24+
}
25+
50% {
26+
transform: translate(0px, 5px);
27+
}
28+
100% {
29+
transform: translate(40px, 18px);
30+
}
31+
}
32+
.animated-text {
33+
animation: anime2 3s ease-in-out;
34+
}
35+
@keyframes anime2 {
36+
from {
37+
translate: 150vw 0;
38+
scale: 200% 1;
39+
}
40+
41+
to {
42+
translate: 0 0;
43+
scale: 100% 1;
44+
}
45+
}

0 commit comments

Comments
 (0)