forked from udacity/cd0428-landing-page
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
executable file
·72 lines (64 loc) · 3.86 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!DOCTYPE >
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Manipulating the DOM</title>
<!-- Load Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Fira+Sans:900|Merriweather&display=swap" rel="stylesheet"> <!-- Load Styles -->
<link href="css/styles.css" rel="stylesheet">
</head>
<body>
<!-- HTML Follows BEM naming conventions
IDs are only used for sections to connect menu achors to sections -->
<header class="page__header">
<nav class="navbar__menu">
<ul id="navbar__list"></ul>
</nav>
</header>
<main>
<header class="main__hero">
<h1>Happy Halloween</h1>
</header>
<!-- Each Section has an ID (used for the anchor) and
a data attribute that will populate the li node.
Adding more sections will automatically populate nav.
The first section is set to active class by default -->
<nav class="navbar__menu">
</nav>
<section id="section1" data-nav="Section 1" class="your-active-class">
<div class="landing__container">
<h2>Spooky Stories</h2>
<p>Imagine a gathering of friendly ghosts sitting around a campfire, sharing their favorite spooky stories. Halloween is the perfect time to gather 'round with your pals and get spooked with tales of werewolves, haunted houses, and the mysterious case of the disappearing candy. It's the season to let your imagination run wild and keep the ghost stories, even the silliest ones, alive.</p>
<p>The Ghostly Gathering</p>
</div>
</section>
<section id="section2" data-nav="Section 2">
<div class="landing__container">
<h2>Tricks & Treats</h2>
<p>Halloween is that time of year when you can be anyone you want—whether it's a magical unicorn, a mischievous ghost, or a dancing pumpkin. You get to fill your bag with more candy than you ever thought possible. And let's not forget about toilet paper mummies and spooky pranks, guaranteed to bring a giggle or two. But most importantly, Halloween is about embracing your inner child, wearing costumes, and sharing smiles, which makes it one of the most delightful holidays on the calendar.</p>
<p>Why Halloween is Fun!</p>
</div>
</section>
<section id="section3" data-nav="Section 3">
<div class="landing__container">
<h2>Bootiful Crafts</h2>
<p>Halloween crafts are the best because they turn ordinary things into something extraordinary. From carving pumpkins that seem to smile back at you, to turning empty milk jugs into glowing ghost lanterns—Halloween crafts let you express your unique spook-tacular style. Whether you're making witch broomsticks from pretzel sticks or a Frankenstein-inspired ice cream sundae, this season is all about being creative, a little spooky, and having a 'fang-tastic' time!</p>
<p>Creativity with a Dash of Spook</p>
</div>
</section>
<section id="section4" data-nav="Section 4">
<div class="landing__container">
<h2>Ghastly Decorations</h2>
<p>Transform your home into a haunted haven with a spine-tingling array of decorations. From cobwebs that glisten with ghostly dew to jack-o'-lanterns that cast an eerie glow, Halloween decorations can turn your place into a chilling masterpiece. Create a ghoulish graveyard in your front yard, adorn your windows with spooky silhouettes, and let your creativity run wild. Whether it's a witch's cauldron bubbling with fog or a skeleton crew lounging in the garden, Halloween is your canvas to craft a creepy, kooky, and altogether ooky atmosphere.</p>
<p>Haunted House Magic</p>
</div>
</section>
</main>
<footer class="page__footer">
<p>© Stephanie Stewart Digital Design</p>
</footer>
<script src="js/app.js"></script>
</body>
</html>