-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
169 lines (169 loc) · 5.5 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
169
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="/images/favicon.ico" rel="icon" type="image/x-icon" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/utilities.css" />
<title>David Archuleta</title>
</head>
<body>
<section class="hero">
<div class="hero-text">
<h1>David Archuleta</h1>
<h2>Cactus Superstar</h2>
</div>
</section>
<section class="about">
<div class="container grid about-head p-4">
<div>
<h2 class="xl">Who Is He?</h2>
<div class="about-text">
<p>
David Archuleta isn't just any cactus, he's the real deal. Though
he shares the namesake of the former American Idol contestant,
this David is far from a runner-up.
</p>
</div>
</div>
<img
src="images/david_icon.png"
alt="David being a cute lil' cactus"
loading="lazy"
/>
</div>
</section>
<section class="skills">
<div class="container">
<div class="skill">
<img
src="./images/david_sing.png"
alt="David singin' the blues"
loading="lazy"
/>
<div class="card text-center">
<h2 class="lg">SINGER</h2>
<button class="btn">
<a
href="https://www.youtube.com/watch?v=LkesIsPGlSU"
target="_blank"
rel="noreferrer noopener"
>New Single</a
>
</button>
</div>
</div>
<div class="skill left-overlap">
<img
src="./images/david_outside.png"
alt="David being absolutely iconic"
loading="lazy"
/>
<div class="card lg text-center">
<h2 class="lg">INFLUENCER</h2>
<button class="btn">
<a
href="https://thecactusbrand.co/"
target="_blank"
rel="noreferrer noopener"
>Clothing Brand</a
>
</button>
</div>
</div>
<div class="skill">
<img
src="./images/david_bike.png"
alt="David on his bike"
loading="lazy"
/>
<div class="card lg text-center">
<h2 class="lg">ATHLETE</h2>
<button class="btn">
<a
href="https://www.letour.fr/en/landing-page"
target="_blank"
rel="noreferrer noopener"
>Next Event</a
>
</button>
</div>
</div>
</div>
</section>
<section class="faq">
<div class="container">
<h2 class="xl">Ask David</h2>
<p class="lead">Click a question to see his answer</p>
<div class="grid">
<div class="questions card">
<h3 data-toggle="close" data-target="#close1">
Q: "Wait you aren't the real David Archuleta?"
</h3>
<div id="close1" class="close">
<p>
David: "Yes, yes, I get this question a lot, probably my most
asked question. I am in fact, not the human version of David
Archuleta, but I like to think my friend Alex gave me his name
because I too am a teenage heartthrob."
</p>
</div>
<h3 data-toggle="close" data-target="#close2">
Q: "Are you staying hydrated?"
</h3>
<div id="close2" class="close">
<p>
David: "Oh. I'm ALWAYS hydrated! Even if Alex forgets to give me
a sip every once in a while (which... is unfortunately quite
often... we're working on it) I always have a lot more water
stored in my lil' bod."
</p>
</div>
<h3 data-toggle="close" data-target="#close3">
Q: "What kind of cactus are you?"
</h3>
<div id="close3" class="close">
<p>David: *shrugs in plant*</p>
</div>
<h3 data-toggle="close" data-target="#close4">
Q: "Is it true what they said about you on TikTok?"
</h3>
<div id="close4" class="close">
<p>
David: "I think people aren't taking the term 'industry plant'
literally enough."
</p>
</div>
</div>
<div class="actually-ask card">
<h3 class="md">Got A Question?</h3>
<form
action="https://formspree.io/f/mqknygdl"
method="POST"
class="ask-form"
>
<input type="email" name="email" placeholder="Email" required />
<textarea
name="message"
placeholder="Question"
required
></textarea>
<button class="btn" type="submit">Ask</button>
</form>
</div>
</div>
</div>
</section>
<footer class="footer py-2">
<div class="container grid grid-3">
<div>
<h1>Designed by Alex</h1>
<p>Copyright © 2022</p>
</div>
</div>
</footer>
<script src="./script.js"></script>
</body>
</html>