-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
executable file
·130 lines (128 loc) · 4.75 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
<!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>Tulip Town</title>
<link
href="https://fonts.googleapis.com/css?family=Alice|Raleway&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="style.css" />
<script
src="https://kit.fontawesome.com/9faec82d34.js"
crossorigin="anonymous"
></script>
</head>
<body>
<header class="menu">
<h1 class="logo">
<img src="/images/logo.svg" alt="logo mark" class="logo-mark" />
<img src="/images/name.svg" alt="logo name" class="logo-name" />
</h1>
<ul class="nav">
<li><a href="">Local Attractions</a></li>
<li><a href="">Photo Gallery</a></li>
</ul>
</header>
<section class="intro">
<h2 class="intro__heading">
<span>Welcome to</span>
<span class="intro__heading__jumbo">Tulip Town</span>
</h2>
<div class="intro__img">
<img src="/images/03.jpg" alt="" />
</div>
<div class="intro__info">
<p class="intro__info__heading">
<strong>We're the Loveliest Village Around</strong>
</p>
<p class="intro__info__content">
From Tulips to avocado toast, we’re ready to welcome you to our cozy
little town. Whether you’re into the outdoors, a world-class brunch
(with mimosas a-plenty), or something in-between, we can’t wait to
greet you with open arms! Start planning your trip today!
</p>
</div>
<ul class="intro__social">
<li class="intro__social__item"><i class="fab fa-instagram"></i></li>
<li class="intro__social__item"><i class="fab fa-facebook"></i></li>
<li class="intro__social__item"><i class="fab fa-twitter"></i></li>
</ul>
</section>
<section>
<div class="section-header">
<h4 class="section-header__subtitle">Local Attractions</h4>
<h3 class="section-header__title">A Relaxing and Beautiful Town</h3>
</div>
<div class="attractions">
<img class="attraction-img" src="/images/02.jpg" alt="" />
<div class="attraction-info">
<p class="attraction-info__title">
<strong>Quaint & Quiet Cottages</strong>
</p>
<p class="attraction-info__content">
Did you know we hold the world record for most vine-covered cottages
in one city? It’s true! We have over 100 quaint cottages (with full
gardens of course) that are ready for you and your family. Better
yet, you can book your stay directly on our website!
</p>
</div>
<img class="attraction-img" src="/images/01.jpg" alt="" />
<div class="attraction-info">
<p class="attraction-info__title">
<strong>World-Renowned Tulips</strong>
</p>
<p class="attraction-info__content">
Every spring, you can visit Tulip Town and take a stroll through our
spectacular tulip gardens. Tulip Town grows more varieties of tulips
than anywhere in the world! Our tulips are orange, red, pink, and
yellow. And if you’re lucky, you might even spot the rare black and
duo colored tulips!
</p>
</div>
</div>
</section>
<section>
<div class="section-header">
<h4 class="section-header__subtitle">Photo Gallery</h4>
<h3 class="section-header__title">
Take a Visual Trip Around Tulip Town
</h3>
</div>
<div class="photo__gallery">
<div class="photo">
<img class="photo__img" src="/images/04.jpg" alt="" />
</div>
<div class="photo">
<img class="photo__img" src="/images/05.jpg" alt="" />
</div>
<div class="photo">
<img class="photo__img" src="/images/06.jpg" alt="" />
</div>
<div class="photo">
<img class="photo__img" src="/images/07.jpg" alt="" />
</div>
<div class="photo">
<img class="photo__img" src="/images/08.jpg" alt="" />
</div>
<div class="photo">
<img class="photo__img" src="/images/09.jpg" alt="" />
</div>
<div class="photo">
<img class="photo__img" src="/images/10.jpg" alt="" />
</div>
<div class="photo">
<img class="photo__img" src="/images/11.jpg" alt="" />
</div>
<div class="photo">
<img class="photo__img" src="/images/12.jpg" alt="" />
</div>
<div class="photo">
<img class="photo__img" src="/images/13.jpg" alt="" />
</div>
</div>
</section>
</body>
</html>