diff --git a/week-06/css/styles.css b/week-06/css/styles.css
new file mode 100644
index 0000000..9d75287
--- /dev/null
+++ b/week-06/css/styles.css
@@ -0,0 +1,236 @@
+/* main body */
+body {
+    font-family: 'Raleway', sans-serif;
+}
+
+/* unordered list */
+ul {
+    padding-left: 0;
+}
+
+/* header 1 & 2 */
+h1, h2 {
+    font-family: 'Cinzel Decorative', cursive;
+}
+
+/* link */
+a {
+    color: whitesmoke;
+    text-decoration: none;
+    padding: 10px 15px;
+}
+
+/* Nav Bar */
+nav {
+    padding: 0;
+}
+
+.banner {
+    margin: 0 0 30px;
+}
+
+/* base class details */
+.home_article {
+    margin: 5px;
+    background-color: LightGray;
+    padding: 10px;
+}
+
+.koos {
+    font-size: 24px;
+    font-weight: bold;
+}
+
+/* flex container */
+.navContainer {
+    /*border-radius: 10px;*/
+    background: rgb(46, 44, 47);
+    background: linear-gradient(0deg, rgba(46, 44, 47, 1) 0%, rgba(110, 121, 122, 1) 50%, rgba(46, 44, 47, 1) 100%);
+    /*box-shadow: 0 -5px 3px -3px black, 0 5px 3px -3px black;*/
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    font-family: "Raleway", sans-serif;
+}
+
+/* prime header */
+.prime {
+    font-family: 'Cabin Sketch', cursive;
+}
+
+/* flex item */
+.navItem {
+    background: rgb(46, 44, 47);
+    background: linear-gradient(0deg, rgba(46, 44, 47, 1) 0%, rgba(110, 121, 122, 1) 50%, rgba(46, 44, 47, 1) 100%);
+    display: flex;
+    flex-grow: inherit;
+}
+
+/* hover style */
+.navItem:hover {
+    background: rgb(34, 34, 34);
+    background: linear-gradient(0deg, rgba(34, 34, 34, 1) 0%, rgba(84, 84, 84, 1) 50%, rgba(34, 34, 34, 1) 100%);
+    box-shadow: inset 0 0 10px #000000;
+}
+
+/* active style */
+.active {
+    background: rgb(34, 34, 34);
+    background: linear-gradient(0deg, rgba(34, 34, 34, 1) 0%, rgba(84, 84, 84, 1) 50%, rgba(34, 34, 34, 1) 100%);
+    box-shadow: inset 0 0 10px #000000;
+}
+
+/* change font style */
+.kyk {
+    font-style: italic;
+}
+
+.center {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+/* Mobile devices */
+@media screen and (max-width: 480px) {
+    body {
+        background-color: red;
+    }
+
+    /* flex container */
+    .navContainer {
+        height: 40px;
+        font-size: 0.9rem;
+    }
+
+    h1 {
+        font-size: medium;
+    }
+
+    .banner {
+        margin: 0 0 10px;
+    }
+}
+
+/* iPads, Tablets. */
+@media screen and (min-width: 481px) {
+    body {
+        background-color: orange;
+    }
+
+    /* add radius to article style */
+    .home_article {
+        border-radius: 14px;
+    }
+
+    /* flex container */
+    .navContainer {
+        height: 40px;
+        font-size: 1rem;
+    }
+
+    /* flex item */
+    .navItem {
+        height: 40px;
+    }
+
+    .banner {
+        margin: 0 0 15px;
+    }
+}
+
+/* Small screens, laptops */
+@media screen and (min-width: 769px) {
+    body {
+        background-color: #589ddb;
+    }
+
+    /* increase the font size of class piet */
+    .piet {
+        font-size: 20px;
+    }
+
+    .navContainer {
+        height: 50px;
+        font-size: 1.4rem;
+    }
+
+    /* flex item */
+    .navItem {
+        height: 50px;
+    }
+
+    .banner {
+        margin: 0 0 20px;
+    }
+}
+
+/* Desktops, large screens. */
+@media screen and (min-width: 1025px) {
+
+    h1 {
+        font-size: 60px;
+    }
+
+    body {
+        background-color: green;
+    }
+
+    main {
+        display: table;
+    }
+
+    #left {
+        float: left;
+        width: 47%;
+    }
+
+    #right {
+        float: right;
+        width: 47%;
+    }
+
+    .piet {
+        font-size: 28px;
+        text-shadow: 1px 2px 2px;
+    }
+
+    /* change font style */
+    .kyk {
+        text-shadow: 0 0;
+    }
+
+    /* flex container */
+    .navContainer {
+        height: 50px;
+        font-size: 1.6rem;
+    }
+
+    /* flex item */
+    .navItem {
+        height: 50px;
+    }
+}
+
+/* Extra large screens, TV. */
+@media screen and (min-width: 1201px) {
+
+    h1 {
+        font-size: 72px;
+    }
+
+    body {
+        background-color: white;
+    }
+
+    /* flex container */
+    .navContainer {
+        height: 60px;
+        font-size: 2rem;
+    }
+
+    /* flex item */
+    .navItem {
+        height: 60px;
+    }
+}
diff --git a/week-06/html/about.html b/week-06/html/about.html
new file mode 100644
index 0000000..5be1580
--- /dev/null
+++ b/week-06/html/about.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <!-- The head element contains machine-readable elements -->
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <!-- Page Title tag-->
+    <title>About</title>
+    <!-- Link tag to stylesheet -->
+    <link href="../css/styles.css" rel="stylesheet" type="text/css">
+    <!-- Links to Google Font -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <!-- Primary Font Cabin Sketch Bold 700 -->
+    <!-- Secondary Architects Daughter Regular 400 -->
+    <!-- Typography Font Raleway Regular 400 -->
+    <link href="https://fonts.googleapis.com/css2?family=Cabin+Sketch:wght@700&family=Cinzel+Decorative:wght@700&family=Raleway&display=swap" rel="stylesheet">
+</head>
+<body>
+<!-- All content goes in the body element -->
+
+<!-- Header element -->
+<header>
+    <h1>About</h1>
+    <!-- Nav tag -->
+    <nav>
+        <!-- Unordered list tag -->
+        <ul class="navContainer">
+            <!-- list item tag -->
+            <li class="navItem">
+                <!-- a tag to create a link (empty for now) -->
+                <a href="../html/index.html">HOME</a>
+            </li>
+            <li class="navItem active">
+                <a href="#">ABOUT</a>
+            </li>
+            <li class="navItem">
+                <a href="../html/examples.html">EXAMPLES</a>
+            </li>
+            <li class="navItem">
+                <a href="../html/contact.html">CONTACT</a>
+            </li>
+        </ul>
+    </nav>
+</header>
+
+<!-- Main element -->
+<main>
+    <!-- Article element -->
+    <!-- class home_article is set to background color lightgray and padding 10px -->
+    <article id="left" class="home_article">
+        <!-- Header 2 tag -->
+        <h2>First Header</h2>
+        <!-- Paragraph tag -->
+        <p class="piet">Maecenas quis odio sit <span class="kyk">amet ipsum maximus</span> egestas. Maecenas gravida magna vehicula quam pulvinar varius.
+            Vestibulum venenatis quam enim, a eleifend tortor blandit non. </p>
+    </article>
+    <article id="right" class="home_article">
+        <!-- Header 2 tag -->
+        <h2>Second Header</h2>
+        <!-- Paragraph tag -->
+        <p class="piet">Maecenas quis odio sit amet ipsum maximus egestas. Maecenas gravida magna vehicula quam pulvinar varius.
+            Vestibulum venenatis quam enim, a eleifend tortor blandit non. </p>
+    </article>
+</main>
+
+<!-- Footer element -->
+<footer>
+    <!-- Paragraph tag -->
+    <p class="koos">Footer goes here.</p>
+</footer>
+</body>
+</html>
diff --git a/week-06/html/contact.html b/week-06/html/contact.html
new file mode 100644
index 0000000..e74d3b5
--- /dev/null
+++ b/week-06/html/contact.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <!-- The head element contains machine-readable elements -->
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <!-- Page Title tag-->
+    <title>Contact</title>
+    <!-- Link tag to stylesheet -->
+    <link href="../css/styles.css" rel="stylesheet" type="text/css">
+    <!-- Links to Google Font -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <!-- Primary Font Cabin Sketch Bold 700 -->
+    <!-- Secondary Architects Daughter Regular 400 -->
+    <!-- Typography Font Raleway Regular 400 -->
+    <link href="https://fonts.googleapis.com/css2?family=Cabin+Sketch:wght@700&family=Cinzel+Decorative:wght@700&family=Raleway&display=swap" rel="stylesheet">
+</head>
+<body>
+<!-- All content goes in the body element -->
+
+<!-- Header element -->
+<header>
+    <h1>Contact</h1>
+    <!-- Nav tag -->
+    <nav>
+        <!-- Unordered list tag -->
+        <ul class="navContainer">
+            <!-- list item tag -->
+            <li class="navItem">
+                <!-- a tag to create a link (empty for now) -->
+                <a href="../html/index.html">HOME</a>
+            </li>
+            <li class="navItem">
+                <a href="../html/about.html">ABOUT</a>
+            </li>
+            <li class="navItem">
+                <a href="../html/examples.html">EXAMPLES</a>
+            </li>
+            <li class="navItem active">
+                <a href="#">CONTACT</a>
+            </li>
+        </ul>
+    </nav>
+</header>
+
+<!-- Main element -->
+<main>
+    <!-- Article element -->
+    <!-- class home_article is set to background color lightgray and padding 10px -->
+    <article id="left" class="home_article">
+        <!-- Header 2 tag -->
+        <h2>First Header</h2>
+        <!-- Paragraph tag -->
+        <p class="piet">Maecenas quis odio sit amet ipsum maximus egestas. Maecenas gravida magna <span class="kyk">vehicula quam pulvinar</span> varius.
+            Vestibulum venenatis quam enim, a eleifend tortor blandit non. </p>
+    </article>
+    <article id="right" class="home_article">
+        <!-- Header 2 tag -->
+        <h2>Second Header</h2>
+        <!-- Paragraph tag -->
+        <p class="piet">Maecenas quis odio sit amet ipsum maximus egestas. Maecenas gravida magna vehicula quam pulvinar varius.
+            Vestibulum venenatis quam enim, a eleifend tortor blandit non. </p>
+    </article>
+</main>
+
+<!-- Footer element -->
+<footer>
+    <!-- Paragraph tag -->
+    <p class="koos">Footer goes here.</p>
+</footer>
+</body>
+</html>
diff --git a/week-06/html/examples.html b/week-06/html/examples.html
new file mode 100644
index 0000000..c06b67c
--- /dev/null
+++ b/week-06/html/examples.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <!-- The head element contains machine-readable elements -->
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <!-- Page Title tag-->
+    <title>Examples</title>
+    <!-- Link tag to stylesheet -->
+    <link href="../css/styles.css" rel="stylesheet" type="text/css">
+    <!-- Links to Google Font -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <!-- Primary Font Cabin Sketch Bold 700 -->
+    <!-- Secondary Architects Daughter Regular 400 -->
+    <!-- Typography Font Raleway Regular 400 -->
+    <link href="https://fonts.googleapis.com/css2?family=Cabin+Sketch:wght@700&family=Cinzel+Decorative:wght@700&family=Raleway&display=swap" rel="stylesheet">
+</head>
+<body>
+<!-- All content goes in the body element -->
+
+<!-- Header element -->
+<header>
+    <h1>Examples</h1>
+    <!-- Nav tag -->
+    <nav>
+        <!-- Unordered list tag -->
+        <ul class="navContainer">
+            <!-- list item tag -->
+            <li class="navItem">
+                <!-- a tag to create a link (empty for now) -->
+                <a href="../html/index.html">HOME</a>
+            </li>
+            <li class="navItem">
+                <a href="../html/about.html">ABOUT</a>
+            </li>
+            <li class="navItem active">
+                <a href="#">EXAMPLES</a>
+            </li>
+            <li class="navItem">
+                <a href="../html/contact.html">CONTACT</a>
+            </li>
+        </ul>
+    </nav>
+</header>
+
+<!-- Main element -->
+<main>
+    <!-- Article element -->
+    <!-- class home_article is set to background color lightgray and padding 10px -->
+    <article id="left" class="home_article">
+        <!-- Header 2 tag -->
+        <h2>First Header</h2>
+        <!-- Paragraph tag -->
+        <p class="piet">Maecenas quis odio sit amet ipsum maximus egestas. Maecenas gravida magna vehicula quam pulvinar varius.
+            Vestibulum venenatis quam enim, a eleifend tortor blandit non. </p>
+    </article>
+    <article id="right" class="home_article">
+        <!-- Header 2 tag -->
+        <h2>Second Header</h2>
+        <!-- Paragraph tag -->
+        <p class="piet">Maecenas quis odio sit amet ipsum maximus egestas. Maecenas gravida <span class="kyk">magna vehicula quam</span> pulvinar varius.
+            Vestibulum venenatis quam enim, a eleifend tortor blandit non. </p>
+    </article>
+</main>
+
+<!-- Footer element -->
+<footer>
+    <!-- Paragraph tag -->
+    <p class="koos">Footer goes here.</p>
+</footer>
+</body>
+</html>
diff --git a/week-06/html/index.html b/week-06/html/index.html
new file mode 100644
index 0000000..fe12fa0
--- /dev/null
+++ b/week-06/html/index.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <!-- The head element contains machine-readable elements -->
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <!-- Page Title tag-->
+    <title>Llewellyn van der Merwe: Week 6</title>
+    <!-- Link tag to stylesheet -->
+    <link href="../css/styles.css" rel="stylesheet" type="text/css">
+    <!-- Links to Google Font -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <!-- Primary Font Cabin Sketch Bold 700 -->
+    <!-- Secondary Cinzel Decorative 700 -->
+    <!-- Typography Font Raleway Regular 400 -->
+    <link href="https://fonts.googleapis.com/css2?family=Cabin+Sketch:wght@700&family=Cinzel+Decorative:wght@700&family=Raleway&display=swap"
+          rel="stylesheet">
+</head>
+<body>
+<!-- All content goes in the body element -->
+
+<!-- Header element -->
+<header>
+    <h1 class="prime">Llewellyn van der Merwe</h1>
+    <!-- Nav tag -->
+    <nav>
+        <!-- Unordered list tag -->
+        <ul class="navContainer">
+            <!-- list item tag -->
+            <li class="navItem active">
+                <!-- a tag to create a link -->
+                <a href="#">HOME</a>
+            </li>
+            <li class="navItem">
+                <a href="../html/about.html">ABOUT</a>
+            </li>
+            <li class="navItem">
+                <a href="../html/examples.html">EXAMPLES</a>
+            </li>
+            <li class="navItem">
+                <a href="../html/contact.html">CONTACT</a>
+            </li>
+        </ul>
+    </nav>
+</header>
+
+<!-- Main element -->
+<main>
+    <div class="banner">
+        <picture>
+            <source srcset="../images/image3.jpg" media="(max-width: 769px)">
+            <source srcset="../images/image2.jpg" media="(max-width: 1025px)">
+            <img src="../images/image1.jpg" alt="Sunsets over the Atlantic" style="width: 100%" class="center">
+        </picture>
+    </div>
+    <!-- Article element -->
+    <div>
+        <!-- class home_article is set to background color lightgray and padding 10px -->
+        <article id="left" class="home_article">
+            <!-- Header 2 tag -->
+            <h2>First Header</h2>
+            <!-- Paragraph tag -->
+            <p class="piet">Maecenas quis odio sit amet ipsum maximus egestas. Maecenas gravida magna vehicula quam
+                pulvinar varius.
+                Vestibulum venenatis quam enim, a eleifend tortor blandit non. </p>
+        </article>
+        <article id="right" class="home_article">
+            <!-- Header 2 tag -->
+            <h2>Second Header</h2>
+            <!-- Paragraph tag -->
+            <p class="piet">Maecenas quis odio sit <span class="kyk">amet ipsum maximus</span> egestas. Maecenas gravida
+                magna vehicula quam pulvinar varius.
+                Vestibulum venenatis quam enim, a eleifend tortor blandit non. </p>
+        </article>
+    </div>
+</main>
+
+<!-- Footer element -->
+<footer>
+    <!-- Paragraph tag -->
+    <p class="koos">Footer goes here.</p>
+</footer>
+</body>
+</html>
diff --git a/week-06/images/image1.jpg b/week-06/images/image1.jpg
new file mode 100644
index 0000000..b1b7ed5
Binary files /dev/null and b/week-06/images/image1.jpg differ
diff --git a/week-06/images/image2.jpg b/week-06/images/image2.jpg
new file mode 100644
index 0000000..3fe1b2f
Binary files /dev/null and b/week-06/images/image2.jpg differ
diff --git a/week-06/images/image3.jpg b/week-06/images/image3.jpg
new file mode 100644
index 0000000..b6724d3
Binary files /dev/null and b/week-06/images/image3.jpg differ