-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
178 lines (169 loc) · 8.55 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shoe Kloset | Home</title>
<link rel="stylesheet" href="./styles/style.css">
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Pompiere&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/08b596cacd.js" crossorigin="anonymous"></script>
</head>
<body class="home-page">
<a href="#main-content" class="skip-link">Skip to main content.</a>
<!---------- HEADER STARTS HERE ---------->
<header>
<div class="wrapper">
<div class="logo-and-nav-container">
<a href="#" class="logo">Shoe Kloset</a>
<nav>
<label for="ham-menu">
<i class="fa fa-bars"></i>
<span class="sr-only">Menu icon</span>
</label>
<input type="checkbox" id="ham-menu" name="ham-menu">
<ul class="header-menu">
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#about">About</a>
</li>
<li>
<a href="./blog.html">Blog</a>
</li>
<li>
<a href="./contact.html">Contact</a>
</li>
</ul>
</nav>
</div>
<div class="h1-and-img-container">
<h1 class="h1-main">Find something new</h1>
<img src="./assets/home-box-header.png" alt="a collection of four unique types of women's shoes lying on their sides with four balls on the ground around them for decorative purposes">
</div>
</div>
</header>
<!---------- MAIN STARTS HERE ---------->
<main id="main-content">
<!----- SECTION: ABOUT US ----->
<section class="about-section" id="about">
<div class="wrapper about-container">
<h2>What is under the sea?</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas eveniet explicabo a eaque tempora fugiat eum ea dicta, magnam, commodi error vitae voluptatum minus neque minima vel ratione sit quisquam.Illum vitae provident dolor at dolorum soluta, reprehenderit molestiae voluptas quam, dolore perferendis, illo aliquid eum beatae minus debitis consectetur esse quisquam odit magnam ut nisi eos blanditiis distinctio. Id?</p>
<a href="#" class="find-more">Find Out More</a>
</div>
</section>
<!----- SECTION: NEW ADDITIONS ----->
<section class="new-additions-section">
<div class="top-container wrapper">
<div class="image-container">
<img src="./assets/left-image.jpg" alt="a pair of nike, ankle-length snow boots laid down on snow">
</div>
<div class="text-container">
<div>
<h3>New Additions</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus, numquam, magnam sit dolorem excepturi voluptate tenetur quia molestias cum doloribus perspiciatis rerum!</p>
<a href="#" class="read-more">Read More</a>
</div>
</div>
</div>
<div class="bottom-container wrapper">
<div class="image-container">
<img src="./assets/right-image.jpg" alt="a variety of heels scattered on the floor">
</div>
<div class="text-container">
<div>
<h3>Too Many Options</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus, numquam, magnam sit dolorem excepturi voluptate
tenetur quia molestias cum doloribus perspiciatis rerum!</p>
<a href="#" class="read-more">Read More</a>
</div>
</div>
</div>
</section>
<!----- SECTION: ICONS ----->
<section class="icons-section">
<div class="wrapper">
<ul class="social-icons">
<li>
<a href="./contact.html">
<i class="fas fa-location-arrow" title="location"></i>
<span class="sr-only">location arrow symbol</span>
</a>
<div>
<h2>Locations</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci officiis vitae similique natus asperiores amet totam omnis numquam.</p>
</div>
</li>
<li>
<a href="#">
<i class="fas fa-users" title="users"></i>
<span class="sr-only">3 users symbol</span>
</a>
<div>
<h2>Community</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci officiis vitae similique natus asperiores amet totam omnis numquam.</p>
</div>
</li>
<li>
<a href="./blog.html">
<i class="fas fa-file" title="blogs"></i>
<span class="sr-only">file symbol</span>
</a>
<div>
<h2>Blog</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci officiis vitae similique natus asperiores amet totam omnis numquam.</p>
</div>
</li>
<li>
<a href="./contact.html">
<i class="fas fa-phone" title="phone"></i>
<span class="sr-only">phone symbol</span>
</a>
<div>
<h2>Get in Touch</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci officiis vitae similique natus asperiores amet totam omnis numquam..</p>
</div>
</li>
</ul>
</div>
<div class="image-container">
<img src="./assets/banner.jpg" alt="a pair of women's loafers placed decoratively next to a plant">
</div>
</section>
<!----- SECTION: POPULAR THIS MONTH ----->
<section>
<div class="wrapper popular-section">
<div class="image-container">
<img src="./assets/square-image.jpg" alt="a pair of thick wedges laid down on a sheet">
</div>
<div class="text-container">
<h2>Popular this month</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Est nostrum tempore et distinctio delectus dolorum odio consectetur accusantium, sequi, fugit necessitatibus tempora quisquam reprehenderit dicta sunt corporis perferendis. Non voluptatem asperiores itaque perferendis provident sapiente magnam, dicta perspiciatis id hic, obcaecati debitis?</p>
<a href="#" class="find-more">Find Out More</a>
</div>
</div>
</section>
<!----- SECTION: GALLERY ----->
<section class="gallery-section">
<div class="wrapper">
<ul>
<li>
<img src="./assets/gallery-image-1.jpg" alt="someones legs with bright sneakers on dangling over the side of a balcony above a parking lot">
</li>
<li>
<img src="./assets/gallery-image-3.jpg" alt="multiple pairs of bright shoes placed decorativle on a two-tier wodden ladder">
</li>
<li>
<img src="./assets/gallery-image-2.jpg" alt="a woman's feet with ankle length boots on standing on a wooden and concrete bridge">
</li>
</ul>
</div>
</section>
</main>
<!---------- FOOTER STARTS HERE ---------->
<footer>
<p>© Tenal Bourchier</p>
</footer>
</body>
</html>