-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
168 lines (160 loc) · 7.62 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
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
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" contents="width=device-width, initial-scale=1.0" />
<meta name="description" content="Learn about the Angry Spider and why he stole gems, and more, in this riveting first novel by a young author." />
<meta name="keywords" content="children story, children stories, spider, angry spider, bored web developer" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Lilita+One&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="./src/styles.css">
<title>The Angry Spider Who Stole Gems | Coming Soon to a retailer near you!</title>
</head>
<body>
<header>
<!-- NAV BAR -->
<nav>
<div id="nav-icon-dashboard">
<a href="" id="nav-menu">
<button>Menu</button>
</a>
</div>
</nav>
<!-- END NAV BAR-->
<!-- Hero section -->
<section id="hero">
<h1>
<span class="h1-pt1a">The </span>
<span class="h1-pt1">Angry Spider</span>
<br />
<span class="h1-pt2">~ who ~</span>
<br />
<span class="h1-pt3">Stole Gems</span>
</h1>
</section>
<!-- end Hero section -->
</header>
<main>
<section id="coming-soon-alert">
<h2>
Coming Soon!!
</h2>
<p class="tagline">
To Bookstores and Online Retailers...
</p>
<p class="eta-date">
January 2024 <span class="smaller-italic">(or sometime soon...)</span>
</p>
<!-- use form bold to handle email alert -->
<form enctype="multipart/form-data" method="post" action="https://formbold.com/s/6rYjK" class="sign-up">
<fieldset>Keep up with the Spider's latest antics!
<label for="sign-up-form">
<input id="sign-up-form" name="sign-up-form" type="email" placeholder="email" />
<input id="sign-up-button" name="sign-up-form" type="submit"
value="Yes!!" />
</label>
</fieldset>
</form>
</section>
<section id="book-info">
<div id="book-info-liner">
<div id="image-wrapper">
<img src="src/book-cover-1st-ed.jpg" alt="Book Cover, The Angry Spider Who Stole Gems, 1st ed."
width="200px" height="240px" />
</div>
<div class="book-qs">
<h3>Who is the Angry Spider?</h3>
<h3>Why is he angry?</h3>
<h3>Why did he steal gems?</h3>
<p class="desc">
Find out why, and more... a lot more... in the first of this riveting
series by young author, Trinny B., about a spider with anger issues, gems,
and ...oh, did we mention his love of broccoli?
</p>
</div>
</div>
<!-- Add pre-order sign up form here !!! Use form bold site to activate -->
<form method="post" action="" class="preorder">
<fieldset>Pre-order your copy today! - <span class="strike">$10.95 </span> $4.99 USD* (limited time offer!)
<label for="preorder-name">Name:
<input id="preorder-name"
name="preorder-name"
type="text"
placeholder="first and last name"
required
/>
</label>
<label for="preorder-email">Email:
<input id="preorder-email"
name="preorder-email"
type="email"
placeholder="email"
required
/>
</label>
<label for="preorder-phone">Ph. #:
<input id="preorder-phone" name="preorder-phone" type="tel" placeholder="(fyi... the author is chatty...) " />
</label>
<label for="preorder-cc">C.C. #:
<input id="preorder-cc"
name="preorder-cc"
type="password"
placeholder="you're giving your CC# to a 7 yr old?"
/>
</label>
<fieldset id="cc-info">
<label for="cc-exp-mo">Exp. Mo:
<select id="cc-exp-mo">
<option value=""></option>
<option value="jan">01</option>
<option value="feb">02</option>
<option value="mar">03</option>
<option value="apr">04</option>
<option value="may">05</option>
<option value="jun">06</option>
<option value="jul">07</option>
<option value="aug">08</option>
<option value="sep">09</option>
<option value="oct">10</option>
<option value="nov">11</option>
<option value="dec">12</option>
</select>
</label>
<label for="cc-exp-yr">Exp. Yr:
<select id="cc-exp-yr">
<option value=""></option>
<option value="2024">2024</option>
<option value="2025">2025</option>
<option value="2026">2026</option>
<option value="2027">2027</option>
<option value="2028">2028</option>
<option value="2029">2029</option>
<option value="2030">2030</option>
</select>
</label>
</fieldset>
<label for="preorder-button">
<input id="preorder-button" name="preorder-button" type="submit"
value="Pre-order my copy today!" />
</label>
<span class="fine-print">
*Taxes and other fees may apply.
<br />
Thank you for your pre-order, and for supporting a young author and her production team.
You will be notified by email once your new purchase becomes available.
</span>
</fieldset>
</form>
</section>
</main>
<footer>
<p>
© <span id="#current-year"></span> The Angry Spider
</p>
</footer>
<script src="./src/index.js"></script>
</body>
</html>