-
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
290 lines (289 loc) · 10.6 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
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
<!-- https://yarduon.com -->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Beefriends</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<meta name="description" content="Simple pretty landing page about bees" />
<link rel="icon" href="./img/favicon.png" />
<link rel="stylesheet" href="./css/reset.css" />
<link rel="stylesheet" href="./css/fonts.css" />
<link rel="stylesheet" href="./css/position.css" />
<link rel="stylesheet" href="./css/main.css" />
<link rel="stylesheet" href="./css/responsive.css" />
</head>
<body class="flex column laila relative">
<input
class="absolute invisible fixed hidden flex-r"
type="checkbox"
id="burger"
/>
<header
class="header fixed max-width flex justify-space-around align-center white-background"
>
<a class="flex justify-center align-center" href="#about-us">
<div class="logo flex align-center">
<img
srcset="./img/logos/beefriends.png 430w"
sizes="144px"
alt="Bee inside a house"
/>
<h1 class="sriracha black-text hidden-z">Beefriends</h1>
</div>
</a>
<label
class="burger flex-r hidden flex justify-center align-center dark-purple-background round-corners touch hidden-z"
for="burger"
>
<img
src="./img/icons/burger.svg"
alt="White burger icon"
width="28px"
height="28px"
/>
</label>
<nav class="nav max-width-r flex align-center hidden-r">
<ul class="flex justify-space-around border-purple max-width-r">
<li class="max-width-r flex-r hidden-z">
<a
class="black-text bold sans-serif max-width-r max-height-r flex-r"
href="#about-us"
>Abous us</a
>
</li>
<li class="max-width-r flex-r hidden-z">
<a
class="black-text bold sans-serif max-width-r max-height-r flex-r"
href="#team"
>Our team</a
>
</li>
<li class="max-width-r flex-r hidden-z">
<a
class="black-text bold sans-serif max-width-r max-height-r flex-r"
href="#sign-up"
>Sign up</a
>
</li>
</ul>
</nav>
</header>
<div class="max-width max-height hidden burger-opacity absolute"></div>
<main class="main flex column">
<section
class="big-section flex align-center justify-center relative"
id="about-us"
>
<div
class="opacity-container hidden-r opacity-about max-height z-index-0 absolute max-width"
></div>
<article class="white-text relative height-z">
<h2 class="text-shadow hidden-z">Are you looking for a hive?</h2>
<p class="subtitles text-height text-shadow text-justify">
In Beefriends we believe every bee is important for our group. No
matter how big or little you are, we are looking for you. Would you
like to spend the rest of your eight weeks of life with us? Then,
what are you waiting for? Let us enslave you!
</p>
<button
class="dark-purple-background white-text text-shadow round-corners bold touch"
id="sign"
>
Sign up
</button>
</article>
<article class="relative">
<img
class="img-big hidden-r border-purple border-curves"
alt="Bees working in a hive"
src="./img/pictures/large/workers_large.png"
srcset="./img/pictures/large/workers_large.png 400w"
sizes="400px"
/>
</article>
</section>
<section
class="flex column align-center justify-center gallery text-center max-width overflow-hidden"
id="team"
>
<h3
class="flex justify-center white-text text-shadow dark-purple-background max-width"
>
Our team
</h3>
<article class="gallery-container flex justify-center wrap">
<div class="item-gallery flex column align-center">
<h4
class="title-gallery dark-purple-background white-text text-shadow round-corners"
>
Matthew
</h4>
<img
class="fake-border dark-purple-background hidden-z"
srcset="
./img/pictures/large/matthew_large.png 265w,
./img/pictures/small/matthew_small.png 200w
"
sizes="(max-width: 760px) 200px, 265px"
alt="One bee working hard at the gym"
src="./img/pictures/large/matthew_large.png"
/>
<p class="subtitles text-justify text-height italic padding-text-z">
This little fella is working hard. He should bee promoted soon.
</p>
</div>
<div class="item-gallery flex column align-center">
<h4
class="title-gallery dark-purple-background white-text text-shadow round-corners"
>
Queen Sloth
</h4>
<img
class="fake-border dark-purple-background hidden-z"
srcset="
./img/pictures/large/queen_sloth_large.png 265w,
./img/pictures/small/queen_sloth_small.png 200w
"
sizes="(max-width: 760px) 200px, 265px"
alt="Queen bee eating popcorn on a sofa"
src="./img/pictures/large/queen_sloth_large.png"
/>
<p class="subtitles text-height italic padding-text-z">
Just look at her! She is not doing anything like a real queen.
</p>
</div>
<div class="item-gallery flex column align-center">
<h4
class="title-gallery dark-purple-background white-text text-shadow round-corners"
>
Max and Lou
</h4>
<img
class="fake-border dark-purple-background hidden-z"
srcset="
./img/pictures/large/max_and_lou_large.png 265w,
./img/pictures/small/max_and_lou_small.png 200w
"
sizes="(max-width: 760px) 200px, 265px"
alt="Two astronauts bees into space"
src="./img/pictures/large/max_and_lou_large.webp"
/>
<p class="subtitles text-height italic padding-text-z">
Super-duper duo. They're still trying to get galactic pollen.
</p>
</div>
<div class="item-gallery flex column align-center">
<h4
class="title-gallery dark-purple-background white-text text-shadow round-corners"
>
Also this guy
</h4>
<img
class="fake-border dark-purple-background hidden-z"
srcset="
./img/pictures/large/weird_guy_large.png 265w,
./img/pictures/small/weird_guy_small.png 200w
"
sizes="(max-width: 760px) 200px, 265px"
alt="Two astronauts bees into space"
src="./img/pictures/large/weird_guy_large.png"
/>
<p class="subtitles text-height italic padding-text-z">
Yeah! This one... He is... I don't even know who he is. Why is
here? Just look at him!
</p>
</div>
</article>
</section>
<section
class="flex justify-center align-center container-quote overflow-hidden relative max-height height-z"
>
<div
class="opacity-container absolute max-width max-height z-index-0"
></div>
<article class="flex column quote relative">
<p class="white-text italic text-shadow">
One day, one bee say to the other: Doesn't matter if you are the
strongest or the clevest guy of your hive. What really matter if you
are cute enough to get some wine. Yeah, you don't need wine, but I
wanted a rhyme.
</p>
<p class="author self-flex-end white-text bold text-shadow">
-Some bee
</p>
</article>
</section>
<section class="signup flex justify-center align-center height-z">
<article
class="flex align-center justify-space-around dark-purple-background white-text sign round-corners height-z"
>
<div>
<h4 class="bold text-shadow">Are you still here?</h4>
<p class="subtitles text-shadow">
Stop wasting your eight weeks of life on internet and just join
our hive.
</p>
</div>
<div>
<button
class="dark-purple-background white-text text-shadow bold round-corners touch hidden-z"
id="sign-up"
>
Sign up
</button>
</div>
</article>
</section>
</main>
<footer
class="footer dark-purple-background white-text flex justify-center align-center relative height-z"
>
<div
class="footer-left flex justify-center align-center max-width max-height relative overflow-hidden"
>
<div
class="opacity-container absolute max-width max-height z-index-0"
></div>
<p
class="subtitles text-shadow relative text-justify padding-text hidden-r"
>
All images and backgrounds have been generated by
<a class="white-text bold" href="https://openai.com/dall-e-2/"
>DALLE-2</a
>
according a description in natural language.
</p>
<p
class="subtitles text-shadow relative text-justify padding-text padding-text-z hidden p-m"
>
All images have been generated by
<a
class="white-text bold"
href="https://openai.com/dall-e-2/"
target="_blank"
rel="noreferrer"
>DALLE-2</a
>.
</p>
</div>
<div
class="footer-right flex justify-center align-center max-height black-background"
>
<a
class="max-height flex justify-center align-center"
href="https://yarduon.com"
target="_blank"
rel="noreferrer"
>
<img
class="penguin"
srcset="./img/logos/white_penguin_128x128.png 310w"
sizes="128px"
alt="White penguin in a suit"
/>
</a>
</div>
</footer>
</body>
</html>