-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
208 lines (189 loc) · 9.99 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
<!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>Sanctuary Helpers</title>
<script src="https://kit.fontawesome.com/b328a1c9de.js"></script>
<link rel="apple-touch-icon" sizes="180x180" href="assets/favicons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="assets/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="assets/favicons/favicon-16x16.png">
<link rel="manifest" href="assets/favicons/site.webmanifest">
<link href="https://fonts.googleapis.com/css?family=Kumar+One|Kumar+One+Outline|Lato:400,700&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="styles/style.css">
</head>
<body>
<!-- header -->
<header class="index-header">
<div class="wrapper">
<!-- nav -->
<nav>
<label for="menu-toggle">
<i class="fa fa-bars" aria-label="Website Menu"></i>
</label>
<input type="checkbox" id="menu-toggle" name="menu-toggle">
<ul class="header-nav">
<li>
<a href="index.html">Home</a>
</li>
<li>
<a href="blog.html#about">About</a>
</li>
<li>
<a href="blog.html">Blog</a>
</li>
<li>
<a href="contact.html">Contact</a>
</li>
</ul>
</nav>
<h1 class="index-h1">Sanctuary Helpers</h1>
</div>
<div class="index-header-img">
<img src="assets/header-box.png" class="index-header-img"
alt="Two blue velvet chairs side by side with two green pillows on the left chair. The chairs are in a white room with white wood flooring.">
</div>
</header>
<!-- main -->
<main class="index-main">
<!-- materials -->
<section class="materials">
<div class="wrapper">
<div class="text-content">
<h2>Discovering New Materials</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repudiandae reiciendis, iusto nesciunt
magni necessitatibus blanditiis vitae quasi a ad consequatur error, impedit cupiditate.
Incidunt, tenetur mollitia sapiente reprehenderit error fuga nihil asperiores non magnam
laboriosam maxime obcaecati eveniet ipsa expedita laborum vitae corporis iusto sed iure
consequuntur voluptates ullam. Eligendi.</p>
<a href="contact.html" class="button-link">Find Out More</a>
</div>
<figure class="materials-image">
<img src="assets/small-box.jpg"
alt="A living room with a glass lamp with a round lampshade on two nesting metal side tables, a grey three-seater couch, a large rectangular glass coffee table, and a light blue and green abstract painting on the unfinished cement wall">
</figure>
</div>
</section>
<!-- gallery -->
<section class="index-gallery">
<div class="wrapper">
<ul>
<li class="index-gallery-list">
<img src="assets/gallery-image-1.jpg"
alt="An emerald coloured dresser with two picture frames and a wooden vase displayed on top with a white brick wall in the background">
</li>
<li class="index-gallery-list">
<img src="assets/gallery-image-2.jpg"
alt="A living room with a yellow ochre leather couch, a large black round wooden coffee table and a white leather ottoman. Three throw pillows with multi coloured polka dots sit on the couch">
</li>
<li class="index-gallery-list">
<img src="assets/gallery-image-3.jpg"
alt="A dark grey handwoven egg-shaped outdoor chair in the middle of a living room surrounded with other living room furniture and Edison lighting">
</li>
</ul>
</div>
</section>
<!-- page links with descriptions -->
<section class="index-pages">
<div class="wrapper">
<div class="pages-content">
<span class="index-icon">
<i class="fas fa-home" aria-hidden="true"></i>
</span>
<div class="pages-text-content">
<a href="contact.html">Customized Offers</a>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugiat laudantium expedita quas
nostrum voluptas eaque pariatur aperiam beatae perspiciatis sint, debitis quis, itaque,
deserunt magnam!</p>
</div>
</div>
<div class="pages-content">
<span class="index-icon">
<i class="fas fa-users" aria-hidden="true"></i>
</span>
<div class="pages-text-content">
<a href="contact.html">Community</a>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quasi, placeat quia eveniet iusto
numquam omnis porro dolorum doloremque quisquam, dolore accusantium officia molestiae
deserunt reprehenderit.</p>
</div>
</div>
<div class="pages-content">
<span class="index-icon">
<i class="fas fa-file" aria-hidden="true"></i>
</span>
<div class="pages-text-content">
<a href="blog.html">Blog</a>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Modi ad vitae dolor. Aspernatur
tempora sit accusamus, doloremque ad voluptate doloribus ipsam perferendis molestiae, harum
dicta!</p>
</div>
</div>
<div class="pages-content">
<span class="index-icon">
<i class="fas fa-phone" aria-hidden="true"></i>
</span>
<div class="pages-text-content">
<a href="contact.html">Get in touch</a>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi, sit eum quia voluptates
sint laudantium quo quibusdam, omnis aliquid obcaecati veritatis provident quisquam
explicabo doloribus!</p>
</div>
</div>
</div>
</section>
<!-- programs + locations -->
<section class="index-programs-locations">
<div class="index-programs">
<figure class="programs-locations-image">
<img src="assets/left-image.jpg"
alt="A white and bamboo dining set with geometric white chairs. A bonsai tree sits on the dining table">
</figure>
<div class="programs-locations-text-content">
<h2>Group Programs</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae, alias veniam nam
consequatur unde dolor maxime libero quibusdam omnis aliquid ducimus saepe illum delectus quasi.
</p>
<a href="contact.html" class="button-link">Read More</a>
</div>
</div>
<div class="index-locations">
<div class="programs-locations-image">
<img src="assets/right-image.jpg"
alt="Two cane outdoor chairs flank a glass-topped barrel-shaped cane table in front of a white washed building with blue wooden windows and doors. Black and white geometric throw pillows sit on the chairs. A vase and large shallow bowl sit on top of the coffee table">
</div>
<div class="programs-locations-text-content">
<h2>New Locations</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero est nesciunt obcaecati minima nam
quasi aperiam officia animi? Explicabo fugit tempora obcaecati maiores eius omnis!</p>
<a href="contact.html" class="button-link">Read More</a>
</div>
</div>
</section>
<!-- full-bleed banner -->
<figure class="index-full-bleed">
<img src="assets/banner-image.jpg"
alt="Two round beige velvet chairs flank a cognac three-seater couch with a round glass-topped wooden coffee table in the middle">
</figure>
<!-- search by style -->
<section class="index-style">
<div class="wrapper">
<div class="index-style-text-content">
<h2>Search by style</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates facilis nulla velit, fuga,
dignissimos veritatis laborum, maxime placeat vel deleniti sed non est inventore quae numquam
nisi! Inventore, corporis magnam culpa sapiente facere expedita earum optio placeat, et soluta
animi.</p>
<a href="contact.html" class="button-link">Find out more</a>
</div>
</div>
</section>
</main>
<!-- footer -->
<footer>
<p>Copyright © 2019 HackerYou</p>
</footer>
</body>
</html>