Skip to content
This repository was archived by the owner on Jan 14, 2024. It is now read-only.

ZA2-TersiaKoetzee HTML-CSS-Coursework-Week1 #131

Open
tersiakoetzee wants to merge 3 commits into
base: master
Choose a base branch
from
Open

ZA2-TersiaKoetzee HTML-CSS-Coursework-Week1 #131

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
fed78b8
first commit
ChrisKoetzee May 31, 2022
4984982
layout changes
ChrisKoetzee Jun 1, 2022
466ab00
final commit for this homework
ChrisKoetzee Jun 2, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
135 changes: 135 additions & 0 deletions css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,3 +6,138 @@
* for example: General styles, Navigation styles, Hero styles, Footer etc.
*
*/
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: 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;
}


h1 {
text-align: center;
font-size: 30px;
text-shadow: rgba(46, 243, 7, 0.986) 0px 0px 10px;
}

h2 {
text-shadow: rgba(36, 241, 9, 0.986) 0px 0px 10px;
}

p {

text-align: center;
font-size: 25px;
text-shadow: rgba(22, 133, 245, 0.986) 0px 0px 10px;
}



147 changes: 127 additions & 20 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,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 -->
<!-- Remember: Use semantic HTML tags like <header>, <main>, <nav>, <footer>, <section> etc -->
</body>
</html>

<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>