-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
234 lines (232 loc) · 12.1 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
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
<!DOCTYPE html>
<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>The Circus Fixer</title>
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<header class="header">
<h1 class="header__title">
<span class="hidden">The Circus Fixer</span>
</h1>
<nav class="menu">
<ul class="menu__items">
<li class="menu__item">
<a class="menu__link" href="#home">Home</a>
</li>
<li class="menu__item">
<a class="menu__link" href="#about">About</a>
</li>
<li class="menu__item">
<a class="menu__link" href="#services">Services</a>
</li>
<li class="menu__item">
<a class="menu__link" href="#speciality">Speciality</a>
</li>
<li class="menu__item">
<a class="menu__link menu__link--blue" href="#order">Order a service</a>
</li>
</ul>
</nav>
</header>
<main class="content">
<section class="about" id="about">
<h2 class="subtitle--beige">About</h2>
<section class="about__info">
<h3 class="about__info__title">Who doesn't love<br /> to go to the circus?</h3>
<p class="about__info__descr">But working as a circus artist isn’t always fun and games unfortunately. It can be full of surprises and even dangerous
at times.</p>
<article class="about__part">
<h4 class="about__part__title">Who?</h4>
<p class="about__part__descr">After years of working at the circus as an acrobat myself, I realised the business could still use some improvements.
So after my retirement I decided to do some research and try to tackle all of the problems I ever crossed.</p>
</article>
<article class="about__part">
<h4 class="about__part__title">What?</h4>
<p class="about__part__descr">I am now happy to announce that I can help you with a solution to every possible problem at the circus, from mental
issues and even your phobias.</p>
</article>
<article class="about__part">
<h4 class="about__part__title">How?</h4>
<p class="about__part__descr">Since I am very much aware of the fact that a circus is always on the go, I provide a solution whenever and wherever
you want and always with the best results. You can easily contact me or schedule an appointment.</p>
</article>
</section>
</section>
<section class="services" id="services">
<h2>Services</h2>
<div class="services__wrapper">
<!-- send in the clowns -->
<article class="service service__clowns">
<div class="service__front service__clowns__front">
<h3>Send In<br />The Clowns</h3>
<p class="service__price">€85</p>
<img src="assets/img/clown.png" alt="Send In The Clowns">
</div>
<div class="service__back service__clowns__back hidden">
<p><strong>Coulrophobia</strong> or <strong>the fear of clowns</strong> is very common but not very handy for a circus artist.</p>
<p>The circus fixer will get rid of your biggest fears to make your life easier again by providing you with <strong>contact lenses</strong> which transform your image of
the <strong>clowns into sweet bunnies</strong>.</p>
</div>
</article>
<!-- tie the knot -->
<article class="service service__knot">
<div class="service__front service__knot__front">
<h3>Tie The Knot</h3>
<p class="service__price">€95</p>
<img src="assets/img/knot.png" alt="Tie The Knot">
</div>
<div class="service__back service__knot__back hidden">
<p>Being a human knot is the goal of every circus acrobat, but what if you are in a <strong>mental knot</strong>?</p>
<p>The circus fixer provides
<strong>mental help and therapy to untangle you</strong>. After this therapy, you’ll be the best version of yourself again.</p>
</div>
</article>
<!-- catching fire -->
<article class="service service__fire">
<div class="service__front service__fire__front">
<h3>Catching<br />Fire</h3>
<p class="service__price">€90</p>
<img src="assets/img/fire.png" alt="Catching Fire">
</div>
<div class="service__back service__fire__back hidden">
<p>Little accidents happen all the time but an accident with fire is not recommended.</p>
<p>The circus fixer provides you with
the <strong>ultimate solution for burns</strong>. Thanks to his <strong>drink Gaviscon</strong>, little firemen will <strong>heal your burns from inside out</strong>.</p>
</div>
</article>
<!-- make up your face -->
<article class="service service__makeup">
<div class="service__front service__makeup__front">
<h3>Make Up<br />Your Face</h3>
<p class="service__price">€105</p>
<img src="assets/img/makeup.png" alt="Make Up Your Face">
</div>
<div class="service__back service__makeup__back hidden">
<p>Tired of the everlasting need to put a big layer of <strong>make-up on your face</strong> every show?</p>
<p>The circus fixer provides you with
a <strong>facetuning mask</strong> that <strong>eliminates the need of make-up</strong>. You can be the star of the show, anytime and anywhere without
the hours behind your make-up table.</p>
</div>
</article>
<!-- go steady -->
<article class="service service__steady">
<div class="service__front service__steady__front">
<h3>Go Steady</h3>
<p class="service__price">€75</p>
<img src="assets/img/steady.png" alt="Go Steady">
</div>
<div class="service__back service__steady__back hidden">
<p><strong>Balancing on a cord</strong> isn’t easy but without your <strong>vestibular</strong> and your <strong>ears</strong>, it’s even harder.</p>
<p>With the help of the <strong>real
human clip-on-ears</strong>, your vestibular will be restored in no time to balance the cord like never before.</p>
</div>
</article>
<!-- bag of bones -->
<article class="service service__bones">
<div class="service__front service__bones__front">
<h3>Bag Of Bones</h3>
<p class="service__price">€80</p>
<img src="assets/img/bones.png" alt="Bag Of Bones">
</div>
<div class="service__back service__bones__back hidden">
<p>If your mental knot is resolved but you still struggle with the <strong>physical knot</strong> and your <strong>bones are always in your way</strong>.</p>
<p>The circus fixer comes to the rescue. Thanks to his <strong>silicone pills</strong>, your feet will be in your neck in no time.</p>
</div>
</article>
</div>
</section>
<section class="speciality" id="speciality">
<h2 class="subtitle--beige">Speciality</h2>
<div class="speciality__wrapper">
<img src="assets/img/fire-0.png" alt="Firebreather Image" class="speciality__img">
<div class="speciality__info">
<p class="speciality__intro">Fire breathing is maybe one of the most impressive acts at the circus but also one of the most dangerous. Accidents can
happen quickly and a burn hurts an awful lot!</p>
<p class="speciality__text">Therefore I introduced the medicine drink Gaviscon into the circus. The drink contains little firemen which float
through your body to heal the burn from inside out. It is the firemen’s duty to soothe and calm your body, starting
with the inside and by placing a soft and covering layer inside and around the wound. After only 5 to 10 minutes, the
layer will start to absorb the pain and the healing process will start.</p>
<p class="speciality__outro">Definitely a must-have for every firebreather at the circus!</p>
<input class="speciality__submit btn" type="submit" value="+1 for this service!" />
</div>
</div>
</section>
<section class="order" id="order">
<h2>Order a service</h2>
<p class="order__intro">
Since a circus is always on the go, you can easily chose when and
where you would like to make use of any of my solutions. Just let me
know which service you’d be interested in and I’ll get back to you
shortly to book the appointment.
</p>
<div class="order__wrapper">
<img src="assets/img/enveloppe.png" alt="order enveloppe image" width="410" height="374">
<form class="order-form" action="index.html" method="post">
<div class="order-form__part">
<select name="service" id="desired-service">
<option value="clowns">Your desired service</option>
<option value="clowns">Send in the clowns</option>
<option value="knot">Tie the knot</option>
<option value="Catching fire">Catching fire</option>
<option value="makup">Make up your face</option>
<option value="steady">Go steady</option>
<option value="bones">Bag of bones</option>
</select>
</div>
<div class="order-form__part">
<input type="text" class="order-form__part--short" name="firstname" size="50" placeholder="Firstname" />
<input type="text" class="order-form__part--short" name="lastname" size="50" placeholder="Lastname" />
</div>
<div class="order-form__part">
<input type="text" name="street" size="50" placeholder="Name of your circus" />
</div>
<div class="order-form__part">
<input type="tel" name="phonenumber" size="50" placeholder="Phonenumber" />
</div>
<div class="order-form__part">
<input type="email" name="email" placeholder="Emailaddress" />
</div>
<div class="order-form__part order-form__part--close">
<input type="checkbox" id="conditions" name="conditions" />
<label for="conditions">
I've read and accept the <a href="#">terms & conditions</a>
</label>
</div>
<div class="order-form__part">
<input class="order-form__submit btn" type="submit" value="Order Service" />
</div>
</form>
</div>
</section>
</main>
<footer class="footer">
<div class="footer__wrapper">
<div class="footer__contact">
<p class="footer__title">Contact</p>
<p class="footer__text">info@circusfixer.com</p>
<p class="footer__text">+32412 34 56 78</p>
<a href="https://www.facebook.com">
<img src="assets/img/iconfb.png" alt="facebook icon" class="footer__icon">
</a>
<a href="https://www.instagram.com">
<img src="assets/img/icontwitter.png" alt="twitter icon" class="footer__icon">
</a>
<a href="https://www.instagram.com">
<img src="assets/img/iconinstagram.png" alt="instagram icon" class="footer__icon">
</a>
</div>
<div class="footer__copyright">
<p class="footer__text">© 2019</p>
<p class="footer__text">Lieselot Geirnaert</p>
<p class="footer__text">Devine - Integration I</p>
</div>
</div>
</footer>
<script src="js/script.js"></script>
</body>
</html>