forked from zero-to-mastery/Halloween-Hacktoberfest-Edition
-
Notifications
You must be signed in to change notification settings - Fork 0
/
designs.html
147 lines (140 loc) · 5.79 KB
/
designs.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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
<!DOCTYPE html>
<html lang="en">
<head id="head">
<!-- Head information is dynamically loaded -->
<!-- If you need to include a different stylesheet do so below -->
<script src="./js/cssLoad.js"></script> <!-- Dynamically Imports css -->
<link href="./css/pumpkinDesigns.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="./css/fog.css" />
<link href="https://fonts.googleapis.com/css?family=Aclonica" rel="stylesheet">
</head>
<body>
<div id="myNav">
<!-- NavBar is dynamically loaded -->
<!-- If you need to include links check out ./js/headFoot.js -->
</div>
<div id='fog-roll'>
<img src="https://media.giphy.com/media/xEjTM5COAKyNa/giphy-downsized.gif" />
</div>
<div id="page-title" class="top-margin">
<div class="container">
<h1>Pumpkin Designs</h1>
</div>
</div>
<div>
<section id="pumpkin-designs" class="my-5">
<div class="container">
<form action="" role="search" class="search-form">
<input type="submit" value="" class="search-submit">
<input type="search" name="q" class="search-text" onkeyup="searchDesign()" placeholder="Search Designs..."
autocomplete="off">
</form>
</div>
<div class="container designs-c">
<h2>Cute</h2>
<div class="row">
<div class="col-md-4 col-sm-6">
<div class="card" id="card">
<img class="card-img-top" class="cute" src="./images/pumpkins/cutepump1.jpg" alt="pumpkin funny nose">
<div class="card-body">
<h3>Mice and Friend</h3>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="card" id="card">
<img class="card-img-top" class="cute" src="./images/pumpkins/pumpkin4.jpg" alt="pumpkin funny nose">
<div class="card-body">
<h3>Happy Pumpkin</h3>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="card" id="card">
<img class="card-img-top" class="cute" src="./images/pumpkins/pumpkin6.jpg" alt="pumpkin funny nose">
<div class="card-body">
<h3>Classicly Carved</h3>
</div>
</div>
</div>
</div>
</div>
<div class="container designs-c">
<h2>Spooky</h2>
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="card" id="card">
<img class="card-img-top" class="spooky" src="./images/pumpkins/pumpkin1.jpg" alt="pumpkin witch">
<div class="card-body">
<h3>The Witch</h3>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="card" id="card">
<img class="card-img-top" lass="spooky" src="./images/pumpkins/pumpkin2.jpg" alt="pumpkin jester">
<div class="card-body">
<h3>Jester</h3>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="card" id="card">
<img class="card-img-top" lass="spooky" src="./images/pumpkins/pumpkin3.jpg" alt="pumpkin ghosts">
<div class="card-body">
<h3>Ghosts</h3>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="card" id="card">
<img class="card-img-top" lass="spooky" src="./images/pumpkins/pumpkin5.jpg" alt="pumpkin scary">
<div class="card-body">
<h3>Sharp teeth</h3>
</div>
</div>
</div>
</div>
</div>
</section>
<section id=carve>
<div class="container designs-c">
<h2>How to Carve a Pumpkin</h2>
<p>Now that you have an idea of what sort of design you would like, it's time to learn how to actually carve a
pumpkin! Here are some best practices.</p>
<br>
<p>First, you must find the right size pumpkin for you. For beginner pumpkin carvers, a large pumpkin is
recommended, as you will have less opportunity to hurt yourself while trying to cut into the pumpkin's rind.</p>
<br>
<p>Next, use a sharp, serrated knife to cut a circle around the top of the pumpkin, creating a lid. It should be
large enough that you can reach your hand into the hole. The lid will also help later on, when you need to place a
candle inside to light up your jack-o-lantern's face.</p>
<br>
<p>Here comes the messy part! Scoop out the pulp and seeds inside the pumpkin using a spoon or ice cream scooper.
If you are someone who loves to bake or cook, use your findings to make some <a href="recipes.html">pumpkin
muffins</a> ^_^ For the rest of us schmoes, throw that pulp away! </p>
<br>
<p>After all that work, you can finally carve a design on the outside of your pumpkin. If you have a stencil or a
design picked out, it might help to use a black marker to trace the design on the pumpkin. You could also create
your own drawing with the marker, or just carve the pumpkin free-handed. Do what feels comfortable for you.</p>
<br>
<p>Once you've finished carving, place your candle inside the pumpkin. You may need to carve a little stand for the
candle so it doesn't fall over. Then, place your finished product somewhere others can admire it. Happy Halloween!</p>
<br>
</div>
</section>
<div id="myFoot">
<!-- Footer is dynamically loaded -->
<!-- If you need to include links check out ./js/headFoot.js -->
</div>
<div id="endScripts">
<!-- Global script files are imported from ./js/headFoot.js -->
<!-- Add page specific link below this line -->
<!-- <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> -->
<!-- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> -->
</div>
<!-- Loads Nav & Footer - IMPORTANT -->
<script src="./js/headFoot.js"></script>
<script src="./js/designs.js"></script>
</body>
</html>