generated from KabohaJeanMark/html-css-linter-template
-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
195 lines (193 loc) · 9.74 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="author" content="Kaboha Jean Mark">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Jersey Directory</title>
<link
rel="stylesheet"
href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"
integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="css/styles.css">
<link rel="shortcut icon" href="assets/jjlogo.jpeg">
<script src="https://unpkg.com/scrollreveal"></script>
</head>
<body>
<header>
<nav class="nav">
<div class="logo-div">
<h1><i class="fas fa-tshirt"></i> jersey directory</h1>
</div>
<div class="nav-links">
<a href="search.html"><i class="fas fa-search"></i><span class="hide">JERSEYS</span></a>
<a href="#"><i class="fas fa-user"></i><span class="hide">ABOUT</span></a>
<a href="#"><i class="fas fa-rss-square"></i><span class="hide">BLOG</span></a>
<a href="#"><i class="fas fa-bars"></i><span class="hide">MORE</span></a>
</div>
</nav>
</header>
<main>
<section class="landing-image">
<div class="landing-text">
<div class="text-heading">
<h2>JERSEY DIRECTORY... YOUR GATEWAY TO QUALITY KITS IN UG</h2>
</div>
<div class="landing-form">
<form method="POST" class="search-form">
<label for="search">SEARCH BY KEY WORD:</label>
<div class="form-container">
<input type="text" id="search" required>
<a href="search.html" class="landing-button">SEARCH</a>
</div>
</form>
</div>
<div class="walkthrough">
<a href="#work">How it works?</a>
</div>
</div>
</section>
<section class="work">
<div class="work-header">
<h3>Jean's directory works in 4 simple steps</h3>
</div>
<div class="work-items">
<article class="item">
<div class="item-icon">
<i class="fas fa-search fa-2x"></i>
</div>
<div class="item-text">
<h4>1 - SEARCH</h4>
<p> Browse through the different categories and images to find out what you are looking for. There are various options among the different leagues and countries.
</p>
</div>
</article>
<article class="item">
<div class="item-icon">
<i class="fas fa-pencil-alt fa-2x"></i>
</div>
<div class="item-text">
<h4>2 - BRAND</h4>
<P>Customize with details about the favourite name and number. Here you re able to make the jersey tell your story for example the day you met your beloved and stand for perfect anniversary gifts. </P>
</div>
</article>
<article class="item">
<div class="item-icon">
<i class="fas fa-shopping-cart fa-2x"></i>
</div>
<div class="item-text">
<h4>3 - PAY</h4>
<p>Make a one time payment through Mobile Money channels to confirm order so that processing and work is underway.</p>
</div>
</article>
<article class="item">
<div class="item-icon">
<i class="fas fa-truck fa-2x"></i>
</div>
<div class="item-text">
<h4>4 - DELIVERY</h4>
<p>Provide your location details to enable delivery to your preferred destination within the next 12 hours.</p>
</div>
</article>
</div>
</section>
<section class="examples">
<article class="article-example example-1">
<div class="article-example-container">
<div class="article-text">
<h4>Over 1000 orders already </h4>
<p>Join a pool of esteemed and happy clientele who have received value for money. We have a large network of clientel served from a various diaspora to choose from</p>
<div class="link">
<a href="#">Find a jersey</a>
</div>
</div>
<div class="article-image">
<img src="assets/ugy.png" alt="ug">
</div>
</div>
</article>
<article class="article-example example-2">
<div class="article-example-container">
<div class="article-text">
<h4>Enjoy your unique custom kits</h4>
<p>Want to tell the story about how you met? Please do try engraving on your jerseys. Customization always adds a unique touch to things. You live a legacy leaving your story in the footprints of the sands of time</p>
<div class="link">
<a href="#">Find a jersey</a>
</div>
</div>
<div class="article-image">
<img src="assets/arsenal-branded.jpg" alt="arsenal">
</div>
</div>
</article>
<article class="article-example example-3">
<div class="article-example-container">
<div class="article-text">
<h4>Anytime, Anywhere</h4>
<p>Delivery happens all days of the week and if upcountry special effort is made for Sundays. So, what are you waiting for? Pick up that phone and give us a call. We will be there come rain or shine.</p>
<div class="link">
<a href="#">Find a jersey</a>
</div>
</div>
<div class="article-image">
<img src="assets/pr-mobile-landing-improved.png" alt="jd">
</div>
</div>
</article>
</section>
</main>
<footer>
<nav class="footer-nav">
<div class="row-1">
<div class="links-1">
<a href="#">HOME</a>
<a href="search.html">SEARCH</a>
<a href="#">ABOUT US</a>
<a href="#">ADVERTISE</a>
</div>
<div class="logo">
<a href="#"><i class="fas fa-tshirt fa-2x"></i></a>
</div>
<div class="links-2">
<a href="#">FACEBOOK</a>
<a href="#">TWITTER</a>
<a href="#">BLOG</a>
<a href="#">GOOGLE +</a>
</div>
</div>
<div class="row-2">
<div class="subscribe">
<h6>SUBSCRIBE</h6>
<form method="POST" class="subscribe-form">
<input type="text" placeholder="[email protected]">
<button type="submit">send</button>
</form>
</div>
<div class="contact footer-hide">
<h6>CONTACT</h6>
<p>have a question or submission?</p>
<a href="#">[email protected]</a>
</div>
<div class="about footer-hide">
<h6>ABOUT</h6>
<p>jersey-directory is a web app that enhances the shopping experience of customers in need of custom tailored jerseys to suite their needs through a simplified visual walk-through. <span class="red-p">Learn more?</span></p>
</div>
</div>
<div class="footer-bottom-container">
<div class="footer-bottom">
<a href="#"><i class="fab fa-facebook"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fas fa-rss-square"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-linkedin-in"></i></a>
</div>
<div class="right-bottom footer-hide">
<p>© 2021 ALL RIGHTS RESERVED POWERED BY <span style="font-weight:bold">JEAN'S DIRECTORY</span></p>
</div>
</div>
</nav>
</footer>
</body>
</html>