forked from CodeYourFuture/HTML-CSS-Coursework-Week1
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
129 lines (108 loc) · 6.65 KB
/
index.html
File metadata and controls
129 lines (108 loc) · 6.65 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<title>My Blog</title>
<link href="//fonts.googleapis.com/css?family=Roboto:400,500,300" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
</head>
<body>
<!-- Add your HTML markup here -->
<nav id="navbar">
<header class="site-header">South Africa's Beauty</header>
<ul class="nav-link">
<li><a href="#Home">Home</a></li>
<li><a href="#Mpumalanga">Mpumalanga</a></li>
<li><a href="#Drakensburg-Mountains">Drakensburg Mountains</a></li>
<li><a href="#Cape-Town">Cape Town</a></li>
</ul>
</nav>
<main class="container">
<section id="articles">
<article id="Home">
<h1>Beautiful Lands</h1>
<p>Seeing South Africa's natural land will make you see the wonders and Beauty of God's work,<br> yet many who
live here have never seen these places.</p>
<div class="img-col">
<img
src="https://images.unsplash.com/photo-1531200610487-70a1c45ef2f2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1421&q=80"
alt="" width="200" height="400" style=" border:5px solid blue;">
<img
src="https://images.unsplash.com/photo-1622397492747-e7b1ff40b8a5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80"
alt="" width="200" height="400" style=" border:5px solid blue;">
<img
src="https://images.unsplash.com/photo-1592478376978-cf8c385566f9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1074&q=80"
alt="" width="200" height="400" style=" border:5px solid blue;">
<img
src="https://images.unsplash.com/photo-1648831741383-7daf1223b358?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80"
alt="" width="200" height="400" style=" border:5px solid blue;">
</div>
</article>
<article id="Mpumalanga">
<h2>Mpumalanga</h2>
<div class="img-mpu">
<img src="https://www.sa-venues.com/attractions/gallery/mpumalanga/84/2.jpg" alt="" width="200" height="200" style=" border:5px solid blue">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTSqcfQaLZBFLIEooudgxPcnM1rty6IcwTxJw&usqp=CAU"
alt="" width="200" height="200" style=" border:5px solid blue">
<img
src="https://images.unsplash.com/photo-1499845786192-59a0e7a6ca23?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxjb2xsZWN0aW9uLXBhZ2V8MnwyMzU3ODUxfHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=500&q=60"
alt="" width="200" height="200" style=" border:5px solid blue;">
</div>
<p>
Mpumalanga's Panorama Route could be covered in one day, <br>but with so much to see it would be a real shame
to rush it. Hugging the edge of the Great Escarpment to the west of Kruger Park, there are epic views over the
Lowveld from such well-named spots as God's Window and Wonder View. Waterfalls pour over the cliff in many
places, among them Berlin, Lisbon, Mac Mac, Bridal Veil, Sabie and Horseshoe Falls.
</p>
<a href="https://www.mpumalanga.com/blog/the-top-ten-natural-attractions">More about this breathtaking
scenery</a>
</article>
<article id="Drakensburg-Mountains">
<h2>Drakensburg Mountains</h2>
<div class="img-dra">
<img
src="https://live.southafrica.net/media/19488/hiking-the-majestic-drakensberg.jpg?anchor=center&mode=crop&quality=100&width=1120&height=555&bgcolor=white&rnd=131432045770000000"
alt="" width="200" height="200"style=" border:5px solid blue;" >
<img
src="https://www.tripsavvy.com/thmb/dkT22t2VIk8HoCmZLPU49OwBEQg=/750x0/filters:no_upscale():max_bytes(150000):strip_icc():format(webp)/GettyImages-1323559863-b40e2448e6a843288ddc3c40ec2ecc16.jpg"
alt="" width="200" height="200" style=" border:5px solid blue;">
<img src="https://www.siyabona.com/images/ukhahlamba-drakensberg-786x416.jpg" alt="" width="200" height="200" style=" border:5px solid blue;">
</div>
<p>Much of South Africa stands on the Southern African plateau, between 1,000 and 2,100m high, whose edge
follows a large coastal plain around the country and divides it into Highveld and Bushveld.<br> This Great
Escarpment reaches its highest point in the east, along the border with Lesotho, where it is known as the
Drakensberg.<br> Nearly 3,500m at their highest, these peaks make up some of the most striking scenery in
Africa, if not the world, and are often touched with snow in winter.</p>
<a href="https://farandwild.travel/wilder/article/why-are-the-drakensberg-mountains-so-popular">Find more on
this magical mountain</a>
</article>
<article id="Cape-Town">
<h2>Cape Town</h2>
<div class="img-cap">
<img
src="https://dynamic-media-cdn.tripadvisor.com/media/photo-o/0e/75/bf/5c/driving-north-towards.jpg?w=1200&h=-1&s=1"
alt="" width="200" height="200" style=" border:5px solid blue;">
<img
src="https://dynamic-media-cdn.tripadvisor.com/media/photo-s/02/3c/1e/87/across-the-water-from.jpg?w=600&h=-1&s=1"
alt="" width="200" height="200" style=" border:5px solid blue;">
<img
src="https://images.unsplash.com/photo-1563656157432-67560011e209?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTB8fGNhcGUlMjB0b3dufGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60"
alt="" width="200" height="200" style=" border:5px solid blue;">
</div>
<p>Chapman's Peak is on Hout Bay, the next bay south of Cape Town. <br>It's famous for a road hacked out of the
sheer side of the mountain, a scenic drive that is familiar to every South African from glossy car
adverts.<br> The best way to fully enjoy the view, however, is with a hike that adds the road itself to the
spectacular view.</p>
<a href="http://www.dkvillas.co.za/2021/02/28/chapmans-peak-one-of-the-worlds-most-scenic-drives/">Read more
about this lovely drive.</a>
</article>
</section>
</main>
<footer>
<p>South Africa Beauty. All rights reserved.</p>
</footer>
<!-- Remember: Use semantic HTML tags like <header>, <main>, <nav>, <footer>, <section> etc -->
</body>
</html>