From fed78b827f949ffac313f7373a6656437ce7f4de Mon Sep 17 00:00:00 2001 From: Chris Koetzee Date: Tue, 31 May 2022 18:15:20 +0200 Subject: [PATCH 1/3] first commit --- css/style.css | 94 +++++++++++++++++++++++++++++++++++++++++++++++++++ index.html | 92 ++++++++++++++++++++++++++++++++++++++----------- 2 files changed, 166 insertions(+), 20 deletions(-) diff --git a/css/style.css b/css/style.css index 75e9841e..b1483663 100644 --- a/css/style.css +++ b/css/style.css @@ -6,3 +6,97 @@ * for example: General styles, Navigation styles, Hero styles, Footer etc. * */ +body { + background: rgb(11, 155, 23); + background: linear-gradient(to bottom right, rgb(5, 95, 20) 0%, rgba(9,121,48,1) 35%, rgba(0,212,255,1) 100%); + background-repeat: no-repeat; + background-attachment: fixed; + background-size: cover; + + +} + +#navbar { + background: linear-gradient(to top, rgba(141, 157, 180, 0.7), rgba(15, 15, 214, 0.8)); + text-align: center; + transition: 1s; + width: 100%; + position: fixed; +} + +.nav-link { + text-shadow: rgba(18, 245, 139, 0.986) 0px 0px 10px; + font-size: 30px; + padding: 20px; + list-style-type: none; + +} + + +li { + display: inline; + padding: 5px; +} + +a { + color: black; +} + +.site-header { + text-shadow: rgba(18, 240, 173, 0.986) 0px 0px 10px; + font-size: 50px; + padding: 20px; +} + +#home { + + /* text-align: center; + font-size: 30px; + display: block; */ + height: 100vh; + text-align: center; + box-sizing: border-box; + padding: 100px; + +} + +h1 { + text-align: center; + font-size: 30px; + text-shadow: rgba(75, 245, 202, 0.986) 0px 0px 10px; +} + +p { + text-align: center; + font-size: 25px; + text-shadow: rgba(22, 133, 245, 0.986) 0px 0px 10px; +} + +#articles{ + text-align: center; + height: 100vh; + text-align: center; + box-sizing: border-box; + padding: 80px; +} + +#Mpumalanga{ + height: 100vh; + text-align: center; + box-sizing: border-box; + padding: 80px; +} + +#Drakensburg-Mountains{ + height: 100vh; + text-align: center; + box-sizing: border-box; + padding: 80px; +} + +#Cape-Town{ + height: 100vh; + text-align: center; + box-sizing: border-box; + padding: 80px; +} \ No newline at end of file diff --git a/index.html b/index.html index 67dfc7f5..471d7315 100644 --- a/index.html +++ b/index.html @@ -1,22 +1,74 @@ - - - - My Blog - - - - - - - - - + + + + + My Blog + + + + + + + +
+ + +
+

Beautiful Lands

+

Seeing South Africa's natural land will make you see the wonders and Beauty of God's work,
yet many who + live here have never seen these places.

+
+ +
+ +
+

Mpumalanga

+

Mpumalanga's Panorama Route could be covered in one day,
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.

+ More about this breathtaking scenery +
+ + +
+

Drakensburg Mountains

+

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.
This Great + Escarpment reaches its highest point in the east, along the border with Lesotho, where it is known as the + Drakensberg.
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.

+ Find more on this magical mountain +
+ + +
+

Cape Town

+

Chapman's Peak is on Hout Bay, the next bay south of Cape Town.
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.
The best way to fully enjoy the view, however, is with a hike that adds the road itself to the + spectacular view.

+ Read more about this lovely drive. +
+ +
+ + + + + +
+ + + + \ No newline at end of file From 4984982b4b620b3ef23abb0391d692f735b5dbd9 Mon Sep 17 00:00:00 2001 From: Chris Koetzee Date: Wed, 1 Jun 2022 18:16:58 +0200 Subject: [PATCH 2/3] layout changes --- css/style.css | 197 ++++++++++++++++++++++++++++++-------------------- index.html | 111 ++++++++++++++++++++-------- 2 files changed, 200 insertions(+), 108 deletions(-) diff --git a/css/style.css b/css/style.css index b1483663..48675b28 100644 --- a/css/style.css +++ b/css/style.css @@ -6,97 +6,138 @@ * for example: General styles, Navigation styles, Hero styles, Footer etc. * */ -body { - background: rgb(11, 155, 23); - background: linear-gradient(to bottom right, rgb(5, 95, 20) 0%, rgba(9,121,48,1) 35%, rgba(0,212,255,1) 100%); + body { + background: linear-gradient(to bottom right, rgb(5, 95, 20) 0%, rgba(9, 121, 48, 1) 35%, rgba(0, 212, 255, 1) 100%); background-repeat: no-repeat; background-attachment: fixed; background-size: cover; - -} - -#navbar { - background: linear-gradient(to top, rgba(141, 157, 180, 0.7), rgba(15, 15, 214, 0.8)); - text-align: center; - transition: 1s; - width: 100%; - position: fixed; } -.nav-link { - text-shadow: rgba(18, 245, 139, 0.986) 0px 0px 10px; - font-size: 30px; - padding: 20px; - list-style-type: none; - -} - - -li { - display: inline; - padding: 5px; -} -a { - color: black; -} -.site-header { - text-shadow: rgba(18, 240, 173, 0.986) 0px 0px 10px; - font-size: 50px; + #navbar { + background: linear-gradient(to top, rgba(141, 157, 180, 0.7), rgba(15, 15, 214, 0.8)); + text-align: center; + transition: 1s; + width: 100%; + position: fixed; + + + } + + + + .nav-link { + text-shadow: rgba(18, 245, 139, 0.986) 0px 0px 10px; + font-size: 30px; + padding: 10px 20px; + + } + + .nav-link a{ + color: black; + } + + + #navbar li { + display: inline; + padding: 5px; + } + + .site-header { + text-shadow: rgba(18, 240, 173, 0.986) 0px 0px 10px; + font-size: 50px; + padding: 20px; + } + + + article:first-child { + background: #1bf5af; + } + + + + #home { + height: 100vh; + text-align: center; + box-sizing: border-box; + padding: 200px; + margin: 500px; + } + + .img-col { + display: flex; + justify-content: center; + padding: 20px; + + } + + #articles { + text-align: center; + box-sizing: border-box; + padding: 200px; + + } + + #Mpumalanga { + height: 100vh; + text-align: center; + box-sizing: border-box; + padding: 200px; + } + + .img-mpu{ + display: flex; + justify-content: center; + padding: 20px; + } + + + #Drakensburg-Mountains { + height: 100vh; + text-align: center; + box-sizing: border-box; + padding: 200px; + } + + .img-dra{ + display: flex; + justify-content: center; + padding: 20px; + } + + + #Cape-Town { + height: 100vh; + justify-content: center; + box-sizing: border-box; + padding: 200px; + + } + .img-cap{ + display: flex; + justify-content: center; padding: 20px; -} + } + -#home { + h1 { + text-align: center; + font-size: 30px; + text-shadow: rgba(46, 243, 7, 0.986) 0px 0px 10px; + } - /* text-align: center; - font-size: 30px; - display: block; */ - height: 100vh; - text-align: center; - box-sizing: border-box; - padding: 100px; - -} + h2 { + text-shadow: rgba(36, 241, 9, 0.986) 0px 0px 10px; + } -h1 { - text-align: center; - font-size: 30px; - text-shadow: rgba(75, 245, 202, 0.986) 0px 0px 10px; -} + p { -p { - text-align: center; - font-size: 25px; - text-shadow: rgba(22, 133, 245, 0.986) 0px 0px 10px; -} + text-align: center; + font-size: 25px; + text-shadow: rgba(22, 133, 245, 0.986) 0px 0px 10px; + } -#articles{ - text-align: center; - height: 100vh; - text-align: center; - box-sizing: border-box; - padding: 80px; -} - -#Mpumalanga{ - height: 100vh; - text-align: center; - box-sizing: border-box; - padding: 80px; -} -#Drakensburg-Mountains{ - height: 100vh; - text-align: center; - box-sizing: border-box; - padding: 80px; -} -#Cape-Town{ - height: 100vh; - text-align: center; - box-sizing: border-box; - padding: 80px; -} \ No newline at end of file diff --git a/index.html b/index.html index 471d7315..f516cddd 100644 --- a/index.html +++ b/index.html @@ -12,61 +12,112 @@ -
- - -
-

Beautiful Lands

-

Seeing South Africa's natural land will make you see the wonders and Beauty of God's work,
yet many who - live here have never seen these places.

-
+ + +
+ +
- + + +
+

Beautiful Lands

+

Seeing South Africa's natural land will make you see the wonders and Beauty of God's work,
yet many who + live here have never seen these places.

+
+ + + + +
+ +
+

Mpumalanga

-

Mpumalanga's Panorama Route could be covered in one day,
but with so much to see it would be a real shame +

+ + + + + + + +
+

+ Mpumalanga's Panorama Route could be covered in one day,
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.

- More about this breathtaking scenery + places, among them Berlin, Lisbon, Mac Mac, Bridal Veil, Sabie and Horseshoe Falls. +

+ More about this breathtaking + scenery
- +

Drakensburg Mountains

+
+ + + +

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.
This Great Escarpment reaches its highest point in the east, along the border with Lesotho, where it is known as the Drakensberg.
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.

- Find more on this magical mountain -
+ Find more on + this magical mountain + + -

Cape Town

+
+ + + +

Chapman's Peak is on Hout Bay, the next bay south of Cape Town.
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.
The best way to fully enjoy the view, however, is with a hike that adds the road itself to the spectacular view.

- Read more about this lovely drive. + Read more + about this lovely drive.
- - - - -
From 466ab0088db4224ec041c10309b3a420ebfbf103 Mon Sep 17 00:00:00 2001 From: Chris Koetzee Date: Thu, 2 Jun 2022 13:35:59 +0200 Subject: [PATCH 3/3] final commit for this homework --- index.html | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index f516cddd..885d9fb4 100644 --- a/index.html +++ b/index.html @@ -13,7 +13,7 @@
+ +
+

South Africa Beauty. All rights reserved.

+