-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
138 lines (131 loc) · 4.96 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>The Odin Landing</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="header container">
<div class="title">Header Logo</div>
<ul class="links">
<li><a href="#">Link One</a></li>
<li><a href="#">Link Two</a></li>
<li><a href="#">Link Three</a></li>
</ul>
</div>
<div class="hero container">
<div class="content">
<h1 class="primary">
This website is
<i style="display: inline-block">Really Cool™</i>.
</h1>
<p class="secondary">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quos, vel
laborum veritatis nesciunt rerum ullam dolore, ad nisi qui accusamus,
similique iure. Sapiente repellat culpa provident voluptates fugit ab
saepe!
</p>
<div class="link-button"><a href="#">Sign Up</a></div>
</div>
<div class="image">
<img
width="640px"
height="960px"
src="https://images.unsplash.com/photo-1697456415682-77986ce135b8?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="A City Street in the Netherlands."
/>
<p>
Photo by
<a
href="https://unsplash.com/@dincturk?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash"
>seyfettin dincturk</a
>
on
<a
href="https://unsplash.com/photos/a-city-street-lined-with-parked-cars-and-tall-buildings-XgshgXIIWZc?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash"
>Unsplash</a
>
</p>
</div>
</div>
<div class="info container">
<h2 class="title">Some random information.</h2>
<ul class="content">
<li class="item">
<img
width="250px"
height="250px"
src="https://images.unsplash.com/photo-1587485715817-5e8c6fa2a903?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="Dutch bike parking lot."
/>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempora
dignissimos distinctio explicabo nisi exercitationem dicta!
</p>
</li>
<li class="item">
<img
width="250px"
height="250px"
src="https://images.unsplash.com/photo-1578163883439-fe475746b7a7?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="A quaint Dutch city street."
/>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempora
dignissimos distinctio explicabo nisi exercitationem dicta!
</p>
</li>
<li class="item">
<img
width="250px"
height="250px"
src="https://images.unsplash.com/photo-1580061800092-52ea96218caa?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="A Dutch street at dusk."
/>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempora
dignissimos distinctio explicabo nisi exercitationem dicta!
</p>
</li>
<li class="item">
<img
width="250px"
height="250px"
src="https://images.unsplash.com/photo-1707001473408-8223b98bdb13?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="A Dutch canal."
/>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempora
dignissimos distinctio explicabo nisi exercitationem dicta!
</p>
</li>
</ul>
</div>
<div class="quote container">
<p class="content">
I like cities. They're places where people get together and do
interesting things. But you got to admit that some cities are better
than others, and not all cities are great. Why is that?
</p>
<h3 class="author">-Jason, or Some Guy</h3>
</div>
<div class="container">
<div class="cta">
<div class="text">
<h3 class="primary">Call to action! Click it, now!</h3>
<p class="secondary">
Sign up for... uh... stuff, I guess. Lorem ipsum dolor, sit amet
consectetur adipisicing elit. Ea veniam hic voluptate cupiditate
natus sequi adipisci quas!
</p>
</div>
<div class="link-button"><a href="#">Sign Up</a></div>
</div>
</div>
<div class="footer container">
<p>Copyright © The Odin Project 2021</p>
</div>
</body>
</html>