-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
349 lines (315 loc) · 17.7 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
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
<!DOCTYPE html>
<html>
<head>
<title>My Blog</title>
<link rel="stylesheet" type="text/css" href="reset.css">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="partstyle.css">
<link href="https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap" rel="stylesheet">
<!-- Latest compiled and minified CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Latest compiled JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<!-- Header -->
<nav class="header">
<span class="logo">WOWWEB</span>
<ul>
<li><a href="#">CRYPTOCURRENCY</a></li>
<li><a href="#">CREATOR ECONOMY</a></li>
<li><a href="#">NFT</a></li>
<li><a href="#">PODCAST</a></li>
</ul>
</nav>
<!-- Banner -->
<div class="banner">
<h2 class="mt-5 text-muted">WEB FOR CREATORS, ARTIST AND CRYPTO ENTHUSIASTS</h2>
<h1>WOW<strong class="text-muted">WEB</strong></h1>
</div>
<div class="row m-1 mt-5">
<div class="col-md-6">
<div class="row g-0 overflow-hidden flex-md-row mb-4 shadow-sm position-relative">
<div class="col p-4 d-flex flex-column position-static">
<strong class="d-inline-block mb-2 text-muted">World</strong>
<h3 class="mb-0">Featured post</h3>
<div class="mb-1 text-muted">Nov 12</div>
<p class="card-text mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="stretched-link text-decoration-none">Continue reading</a>
</div>
<div class="col-auto d-sm-block d-lg-block">
<img style="width:auto; height:250px;" src="https://images.unsplash.com/photo-1641941003546-bd3a3456f5ba?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80" class="img-fluid">
</div>
</div>
</div>
<div class="col-md-6">
<div class="row g-0 overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
<div class="col p-4 d-flex flex-column position-static">
<strong class="d-inline-block mb-2 text-success">Design</strong>
<h3 class="mb-0">Post title</h3>
<div class="mb-1 text-muted">Nov 11</div>
<p class="mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="stretched-link text-decoration-none text-warning">Continue reading</a>
</div>
<div class="col-auto d-sm-block d-lg-block">
<img style="width:auto; height:250px;" src="https://images.unsplash.com/photo-1641941054759-8957451f98c1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80" class="img-fluid">
</div>
</div>
</div>
</div>
<!-- Journal -->
<!-- <div class="journal">
<div class="first photo">
<div class="image-container">
<img src="image/abe.jpg">
</div>
<span class="caption">Joseph Abe Ansah Adeabah</span>
</div>
<p>
<span class="first-letter">I</span> am in the Great Sahara Desert for the third sundown in a row. Fouad and I pass back and forth a sun-bleached map of the stars. It’s more of a tug-of-war to be honest. With what remains of the daylight, we commit to memory the positions of spots on the page. We hope to find some correlation in its negative, which slides overhead as the sun rapidly dies.
</p>
<p>
"Navigating by night is always easier." Fouad flicks these English words as ash from a cigarette. "You’ll see."
</p>
<p>
"We won't see anything. That's my point!"
</p>
<p>
How did we get here?
</p>
<p>
It started eight days ago when I arrived in Malilla on the boat from Malaga. The sun hit me like a judgement as I stepped onto the gangplank. A bit about Morocco:
</p>
<div class="photo">
<div class="image-container">
<img src="https://content.codecademy.com/courses/freelance-1/unit-6/project-morocco/photo2.png">
</div>
<span class="caption">The long and winding road to Merrakec</span>
</div>
<p>
Morocco has a population of over 33.8 million and an area of 446,550 km2 (172,410 sq mi). Its capital is Rabat, and the largest city is Casablanca. Other major cities include Marrakesh, Tangier, Tetouan, Sale, Fes, Agadir, Meknes, Oujda, Kenitra, and Nador. A historically prominent regional power, Morocco has a history of independence not shared by its neighbours.
</p>
<span class="quote">"Navigating by night is always easier."</span>
<p>
Since the foundation of the first Moroccan state by Idris I in 789, the country has been ruled by a series of independent dynasties, reaching its zenith under the Almoravid and Almohad dynasty, spanning parts of Iberia and Northwestern Africa. Marinid and Saadi dynasties continued the struggle against foreign domination, and Morocco remained the only North-African country to avoid Ottoman occupation.
</p>
<p>
The Alaouite dynasty, the current ruling dynasty, seized power in 1666. In 1912 Morocco was be divided into a French and Spanish protectorates, with an international zone in Tangier, and regained its independence in 1956. Moroccan culture is a blend of Arab, indigenous Berber, Sub-Saharan African, and European influences.
</p>
<div class="photo">
<div class="image-container">
<img src="https://content.codecademy.com/courses/freelance-1/unit-6/project-morocco/photo3.png">
</div>
<span class="caption">A stall at the Jemaa El Fnaa street market</span>
</div>
<p>
Morocco claims the non-self-governing territory of Western Sahara as its Southern Provinces. Morocco annexed the territory in 1975, leading to a guerrilla war with indigenous forces until a cease-fire in 1991. Peace processes have thus far failed to break the political deadlock.
</p>
<p>
Morocco is a constitutional monarchy with an elected parliament. The King of Morocco holds vast executive and legislative powers, especially over the military, foreign policy and religious affairs. Executive power is exercised by the government, while legislative power is vested in both the government and the two chambers of parliament, the Assembly of Representatives and the Assembly of Councillors. The king can issue decrees called dahirs which have the force of law. He can also dissolve the parliament after consulting the Prime Minister and the president of the Constitutional court.
</p>
<span class="quote">“Navigating by night is always easier.”</span>
<p>
Morocco's predominant religion is Islam, and the official languages are Arabic and Tamazight. Moroccan dialect, referred to as Darija, and French are also widely spoken. Morocco is an influential member of the Arab League and a part of the Union for the Mediterranean. It has the fifth largest economy of Africa.
</p>
<div class="photo">
<div class="image-container">
<img src="https://content.codecademy.com/courses/freelance-1/unit-6/project-morocco/photo4.png">
</div>
<span class="caption">The desert at night is strange and beautiful</span>
</div>
</div> -->
<div class="container-fluid">
<h1 class="mt-5 text-center mb-5">The Modern Internet And Profit</h1>
<div class="row mb-5">
<div class="col">
<img src="https://images.unsplash.com/photo-1640622842924-3ae860f77265?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1172&q=80" class="img-fluid">
</div>
<div class="col">
<img src="https://images.unsplash.com/photo-1638913662380-9799def8ffb1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" class="img-fluid">
</div>
<div class="col">
<img src="https://images.unsplash.com/photo-1524758631624-e2822e304c36?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" class="img-fluid">
</div>
<!-- <div class="col">
<img src="https://images.unsplash.com/photo-1593642533144-3d62aa4783ec?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1169&q=80" class="img-fluid">
</div>
<div class="col">
<img src="https://images.unsplash.com/photo-1641933819359-ddd67ee1c0c0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" class="img-fluid">
</div> -->
</div>
<hr>
<div class="row">
<div class="col">
<div class="card card-dark rounded-0 bg-white">
<div class="card-body">
<h3 class="card-title text-dark">Bitcoin is Huge Chale!</h3>
<p class="card-text">Bitcoin is rising, Are you in or out? Here's how I can help you cash out in...</p>
<a href="#" class="btn btn-outline-secondary">Read More</a>
</div>
</div>
</div>
<div class="col">
<div class="card card-dark rounded-0 bg-white">
<div class="card-body">
<h3 class="card-title text-dark">Dogecoin, A Prank?</h3>
<p class="card-text">What do you know about Dogecoin? Can I help you cash out from there?..</p>
<a href="#" class="btn btn-outline-secondary">Read More</a>
</div>
</div>
</div>
<!-- <div class="col">
<div class="card card-dark bg-info">
<div class="card-body">
<h3 class="card-title">Get Invested Creating </h3>
<p class="card-text">Did you know that people are investing in the content creation space?</p>
<a href="#" class="btn btn-outline-secondary">Read More</a>
</div>
</div>
</div> -->
<!-- <div class="col">
<div class="card card-dark bg-success">
<div class="card-body">
<h3 class="card-title">Don't be Deceived!</h3>
<p class="card-text">Most People with huge social media followers are backed with investors...</p>
<a href="#" class="btn btn-outline-light">Read More</a>
</div>
</div>
</div> -->
<div class="col">
<div class="card card-dark rounded-0 bg-white">
<div class="card-body">
<h3 class="card-title text-dark">Start as Pro Miner</h3>
<p class="card-text">Check out the 3 Ways You can kickstart your investment in cryptocurrency</p>
<a href="#" class="btn btn-outline-secondary">Read More</a>
</div>
</div>
</div>
<!-- break -->
<div class="col-12 p-2"></div>
<!-- row 2 -->
<!-- <div class="col">
<div class="card card-dark bg-dark">
<div class="card-body">
<h3 class="card-title text-light">The Creator Wow</h3>
<p class="card-text text-light">These 3 Tiktok stars know it all, and wait!, they know what you want...</p>
<a href="#" class="btn btn-outline-secondary">Read More</a>
</div>
</div>
</div>
<div class="col">
<div class="card card-dark bg-info">
<div class="card-body">
<h3 class="card-title">He's just as Young</h3>
<p class="card-text">See how this kid is challenging Methusella. I am stunned...</p>
<a href="#" class="btn btn-outline-secondary">Read More</a>
</div>
</div>
</div> -->
<div class="col">
<div class="card card-dark rounded-0 bg-white">
<div class="card-body">
<h3 class="card-title text-dark">Your Creator Master</h3>
<p class="card-text">These People wants to invest in your next content, Tweet them...</p>
<a href="#" class="btn btn-outline-secondary">Read More</a>
</div>
</div>
</div>
<div class="col">
<div class="card card-dark rounded-0 bg-white">
<div class="card-body">
<h3 class="card-title text-dark">Let's begin and move</h3>
<p class="card-text ">These two queens didn't know people were watching them...</p>
<a href="#" class="btn btn-outline-secondary">Read More</a>
</div>
</div>
</div>
<div class="col">
<div class="card card-dark rounded-0 bg-white">
<div class="card-body">
<h3 class="card-title text-dark">The Wow Artist &...</h3>
<p class="card-text">Some people are creative but others are genius and he just showed it...</p>
<a href="#" class="btn btn-outline-secondary">Read More</a>
</div>
</div>
</div>
</div>
<div class="row mt-5 mb-5">
<div class="col">
<img src="https://images.unsplash.com/photo-1598136490941-30d885318abd?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1169&q=80" class="img-fluid">
</div>
<div class="col">
<img src="https://images.unsplash.com/photo-1640622307985-eaa37b36077f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" class="img-fluid">
</div>
</div>
</div>
<h1>The Women's World</h1>
<section>
<article class="breaking">
<img src="https://images.unsplash.com/photo-1611679782010-5ac7ff596d9a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1172&q=80" alt="Photograph of a flying saucer over the US Capitol building">
<h1>Washington D.C. Attacked By Flying Saucers</h1>
<h2>Dateline Washington D.C.</h2>
<h3>Frank Bragg reporting</h3>
<p>The country was brought to a standstill today when flying saucers – presumably from Mars, although Venusians have also been suspected – appeared over the nation’s capital, intent on destruction. Curiously, they only attacked Pennsylvania Avenue, and have not appeared elsewhere in the country.
</article>
<article>
<img src="https://images.unsplash.com/photo-1593642634443-44adaa06623a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1025&q=80" alt="Photograph of a Bigfoot">
<h1>Bigfoot Discovered, Commended, Rewarded</h1>
<h2>Dateline Washington State</h2> <h3>Jessica Walsh reporting</h3>
<p>The first conclusive proof of the elusive Sasquatch was found today, when one of the ape-men was found and killed by a hunter in the north-eastern corner of the state.
<p>The hunter plans to tour the pelt in the fall.
</article>
<article>
<img src="https://images.unsplash.com/photo-1633114073219-8c81a6bdb356?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" alt="Photograph of an alligator emerging from an open manhole cover">
<h1>Nest of Alligators Found in New York Sewers</h1>
<h2>Dateline New York City</h2>
<h3>Ted Sturgis reporting</h3>
<p>Years of rumours were confirmed yesterday when a nest of alligators were found in the sewers of New York City, just south of Times Square. The largest, which locals have dubbed “Mugsy”, measures over 21 feet long.
</article>
</section>
<!-- Footer -->
<footer class="mt-5">
<div class="image-container">
<img src="https://content.codecademy.com/courses/freelance-1/unit-6/project-morocco/author.png">
</div>
<div class="content">
<p>
<span class="author">Joe Abe Ansah</span> is the Founder and Creative Director of WowWeb.
After graduating from the <em>UENR</em>, he piloted a biplane on a two-year voyage from <em>Anchorage</em>, <em>Alaska</em> to <em>Isafjorour</em>, <em>Iceland</em> stopping along the way for adventures throughout Europe.
</p>
<p>
Since then, he has camped on all seven continents, and has been recognized worldwide for his spare, ageless prose. Aoife's new novel, <em>Tide Blade</em>, is currently available from <em>Walrus Publishing</em>.
</p>
</div>
</footer>
<div class="footer-dark">
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-3 item">
<h2>Services</h2>
<ul>
<li><a href="#">Web design</a></li>
<li><a href="#">Development</a></li>
<li><a href="#">Hosting</a></li>
</ul>
</div>
<div class="col-sm-6 col-md-3 item">
<h2>About</h2>
<ul>
<li><a href="#">Company</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Careers</a></li>
</ul>
</div>
<div class="col-md-6 item text">
<h2>WoWWeb</h2>
<p>Praesent sed lobortis mi. Suspendisse vel placerat ligula. Vivamus ac sem lacus. Ut vehicula rhoncus elementum. Etiam quis tristique lectus. Aliquam in arcu eget velit pulvinar dictum vel in justo.</p>
</div>
<div class="col item social"><a href="#"><i class="fa fa-facebook"></i></a><a href="#"><i class="fa fa-twitter"></i></a><a href="#"><i class="fa fa-snapchat"></i></a><a href="#"><i class="fa fa-instagram"></i></a></div>
</div>
<p class="copyright">Company Name © 2022</p>
</div>
</div>
</body>
</html>