-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
80 lines (72 loc) · 2.86 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
<!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">
<title>First Landing Page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header">
<div class="top-bar">
<div class="logo">Header Logo
<div class="links">
<div>header link one</div>
<div>header link two</div>
<div>header link three</div>
</div>
</div>
</div>
<div class="hero">
<div class="text-container">
<h1>This website shows off some animals</h1>
<h2>I haven't decided if these should be my animals, or animals I find on free image sites. We'll see~</h2>
<button type="button"><a href="https://youtu.be/ZZ5LpwO-An4" target="_blank">Sign Up</a></button>
</div>
<div class="image-container">
<img class="spaniel" src="./images/spaniel.jpg">
</div>
</div>
</div>
<div class="second">
<div class="second-text">A selection of birds!</div>
<div class="icons">
<div class="individua-icons"><img class="image" src="./images/peacock.jpeg" alt="a photo of a peacock by Jos van Ouwerkerk">
<p>A photo of a peacock</p>
</div>
<div class="individual-icons"><img class="image" src="./images/parrots.jpeg" alt="a photo of a pair of red parrots by Jos van Ouwerkerk">
<p>A photo of a pair of parrots</p>
</div>
<div class="individual-icons"><img class="image" src="./images/grouse.jpeg" alt="a photo of a grouse by Jos van Ouwerkerk">
<p>A photo of a rock ptarmigan<p>
</div>
<div class="individual-icons"><img class="image" src="./images/heron.jpeg" alt="a photo of a heron by Jos van Ouwerkerk">
<p>A photo of a heron</p>
</div>
</div>
</div>
<div class="quote">
<blockquote cite="http://www.phys.unm.edu/~tw/fas/yits/archive/oliver_wildgeese.html">
You do not have to be good.
You do not have to walk on your knees
for a hundred miles through the desert repenting.
You only have to let the soft animal of your body
love what it loves.
Meanwhile the wild geese, high in the clean blue air,
are heading home again.
</blockquote>
<div class="citation">- Mary Oliver, <cite>Wild Geese</cite></div>
</div>
<div class="action">
<div class="action-header">
Follow that button!
<div class="action-sub">
If you click that button over there, you'll find even more animals
</div>
</div>
<div class="click-me">
<button class="click-me" type="button"><a href="https://youtu.be/ZZ5LpwO-An4">Click me!</a></button>
</div>
</div>
</body>