-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
284 lines (221 loc) · 10.9 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
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
<!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>OYODO</title>
</head>
<body class="site-content">
<header class="site-header">
<nav class="header-nav content">
<span class="brand">OYODO</span>
<button id="hamburger" class="hamburger"></button>
<ul id="nav-ul">
<li><a href="" class="active">Home</a></li>
<li><a href="">Bapibus</a></li>
<li><a href="">Ultricies</a></li>
<li><a href="">Bibendum</a></li>
<li><a href="">Magna</a></li>
</ul>
</nav>
<div class="header-banner content">
<section class="orange">
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum consequatur odit reiciendis eos minima ipsum, ea quaerat! Iusto sit fuga officia perspiciatis enim aliquam maxime alias provident, similique voluptatum quas?</span>
</section>
</div>
</header>
<main class="main-site-content content">
<div class="main-article-plus-sidebar">
<section class="one-article-and-contd">
<article class="main-article">
<h3>Lorem ipsum dolor sit amet</h3>
<p class="majora">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta quisquam rerum, aspernatur itaque, porro amet ex dolorum
quis dignissimos quaerat minus, debitis non voluptatum. Dicta, ratione consectetur consequuntur similique sit.
</p>
<p class="minora">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi autem in quibusdam ducimus tempora debitis quae. Error
corporis dolores, perferendis optio, provident deserunt quibusdam maxime suscipit officiis id eius, odit?
</p>
<div class="normala">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos dolor laboriosam cumque iste corrupti, aliquam debitis
pariatur! Voluptatum quis quam dolorem nulla illum? Minima voluptatibus quae ab, iure, eum qui. Lorem ipsum dolor
sit amet, consectetur adipisicing elit. Delectus velit consequuntur repellat, qui fuga illo iste cum. Exercitationem
recusandae minus voluptates, modi, consequuntur autem. Delectus eius reiciendis consequatur ipsa distinctio!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum atque, quaerat nulla, magnam pariatur vero
</p>
<blockquote class="float-right">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere similique natus fugiat aliquam saepe fugit reiciendis nam
<footer>-John Doe</footer>
</blockquote>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque provident ut numquam explicabo nostrum ipsa, eos optio adipisci, quibusdam doloribus, eveniet, cum hic. Laboriosam reprehenderit quas iste minima. Quisquam, consectetur.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium nobis sunt atque, veniam reiciendis labore eos ex iure exercitationem, esse cupiditate ad ipsa aliquam voluptatibus porro maxime ipsum? Et, aut.
libero tenetur harum quibusdam fugit quam architecto unde. Beatae, odio vel officiis cupiditate ratione et. Lorem
</p>
<p>
ipsum dolor sit amet, consectetur adipisicing elit. Ex est ab quia quam rem, quibusdam earum voluptatibus natus
facere provident, ea nobis libero a, labore voluptates porro rerum, soluta culpa.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt sequi eos, sapiente fugit blanditiis, eveniet eius expedita minima ipsum mollitia aut minus hic placeat nulla aliquam. Officiis harum quae quas.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae eveniet, corporis totam nesciunt unde illo. Aliquid perspiciatis sunt fugit ducimus ex et commodi doloribus. Doloremque in ipsa fuga saepe deleniti.
</p>
</div>
</article>
<section class="contd">
<h4 class="bordered-heading">
<span>More in this series</span>
</h4>
<article class="slab">
<img src="images/salmon.jpeg" alt="Tasty Salmon">
<section class="img-info">
<h4>Tasty Salmon</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel, quasi dolorem. Nemo inventore eius dolorem, autem mollitia tempora, ipsum quasi tenetur ut, laborum eaque quisquam repellendus error omnis sunt deserunt.
</p>
</section>
</article>
<article class="slab">
<img src="images/rice-ball.jpeg" alt="Healthy Rice Ball">
<section class="img-info">
<h4>Healthy Rice Ball</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere accusamus aut accusantium dolore sequi aliquid suscipit id ullam dolor, saepe assumenda nam repellat quos ipsam voluptatibus, perferendis in eius non.
</p>
</section>
</article>
</section>
</section>
<aside class="sidebar">
<section class="sub-menu">
<h5>Submenu</h5>
<ul>
<li><a href="#0">Home</a></li>
<li><a class="active" href="#1">Examples</a></li>
<li><a href="#2">Contact</a></li>
<li><a href="#3">About</a></li>
</ul>
</section>
<section class="contact">
<div class="dummy">
<img src="images/earth-space.jpg" alt="The earth." class="cover">
<img src="images/handsome.jpeg" alt="Handsome male here!" class="profile-pic">
</div>
<div class="contact-data">
<dl>
<div class="data-piece">
<dt>Name</dt>
<dd>Le Lorem</dd>
</div>
<div class="data-piece">
<dt>Email</dt>
<dd>[email protected]</dd>
</div>
<div class="data-piece">
<dt>Phone</dt>
<dd>+967 111 1111</dd>
</div>
</dl>
</div>
<div class="contact-me">
<h5>Send me a message</h5>
<form>
<label for="subject">Subject</label>
<input type="text" name="subject" id="subject" placeholder="e.g. Fantastic Job Offer">
<label for="message">Message</label>
<textarea name="message" id="message" cols="4" rows="4" maxlength="120"></textarea>
<span class="character-count"><span id="current">0</span>/120</span>
<button class="submit-btn" type="submit">Submit</button>
</form>
</div>
<div class="map-section">
<h5>Or meet up with me</h5>
<div id="map"></div>
<div class="additional-address">
<span class="line-useless">markdown town</span>
<span class="line-useless">somewhere</span>
<span class="line-useless">nowhere</span>
</div>
</div>
</section>
</aside>
</div>
<section class="more-articles">
<h4 class="bordered-heading">
<span>Related Articles</span>
</h4>
<section class="chips">
<div class="chip">
<img src="images/muffin.jpg" alt="That's a nice muffin">
<div class="chip-content">
<h4>That's a nice muffin</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque quam deleniti recusandae assumenda impedit maiores distinctio velit modi, eius numquam, temporibus est necessitatibus tempora nostrum, laudantium harum voluptas suscipit, animi.
</p>
</div>
</div>
<div class="chip">
<img src="images/pasta.jpg" alt="I love pasta.">
<div class="chip-content">
<h4>I love pasta</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem ut, esse fugit? Modi eaque possimus praesentium tenetur, vitae ab. Illum quis commodi numquam sunt soluta hic minima ad nesciunt pariatur.</p>
</div>
</div>
<div class="chip">
<img src="images/chocolate-cake.jpeg" alt="I'm addicted to chocolate cake.">
<div class="chip-content">
<h4>I'm addicted to chocolate cake</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque quam deleniti recusandae assumenda impedit maiores distinctio velit modi, eius numquam, temporibus est necessitatibus tempora nostrum, laudantium harum voluptas suscipit, animi.
</p>
</div>
</div>
<div class="chip">
<img src="images/pancakes.jpeg" alt="Pancakes are awesome">
<div class="chip-content">
<h4>Pancakes are awesome</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque quam deleniti recusandae assumenda impedit maiores distinctio velit modi, eius numquam, temporibus est necessitatibus tempora nostrum, laudantium harum voluptas suscipit, animi.
</p>
</div>
</div>
<div class="chip">
<img src="images/tastytasty.jpeg" alt="Fast food goes down my throat fast">
<div class="chip-content">
<h4>Fast Food!</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque quam deleniti recusandae assumenda impedit maiores distinctio velit modi, eius numquam, temporibus est necessitatibus tempora nostrum, laudantium harum voluptas suscipit, animi.
</p>
</div>
</div>
</section>
</section>
</main>
<footer class="site-footer">
<section class="footer-content content">
<ul class="footer-unit">
<h5>About us</h5>
<li><a href="#0">Laura Wilson</a></li>
<li><a href="#1">Fredrick Crockford</a></li>
<li><a href="#2">James Douglas</a></li>
<li><a href="#3">Alex Benson</a></li>
</ul>
<ul class="footer-unit">
<h5>Legal</h5>
<li><a href="#0">Privacy Policy</a></li>
<li><a href="#1">Copyright</a></li>
<li><a href="#2">Stakeholders</a></li>
</ul>
<ul class="footer-unit">
<h5>Developers</h5>
<li><a href="#0">Evan You</a></li>
<li><a href="#1">Dan Abramov</a></li>
<li><a href="#2">Rich Hickey</a></li>
<li><a href="#3">Taylor Otwell</a></li>
</ul>
</section>
</footer>
</body>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAllZisevtHx0WYfo6nOLdEtzYUv50Y5gI&callback=initMap"></script>
</html>