iggajewski · iggajewski · May 10, 2020 · May 9, 2020 · May 10, 2020 · May 10, 2020
diff --git a/week1/1-advanced-css/Screenshot_2020-05-09 CSS Diner.png b/week1/1-advanced-css/Screenshot_2020-05-09 CSS Diner.png
diff --git a/week1/3-website/asteroid.jpg b/week1/3-website/asteroid.jpg
diff --git a/week1/3-website/catgirls.jpg b/week1/3-website/catgirls.jpg
diff --git a/week1/3-website/coronavirus.jpg b/week1/3-website/coronavirus.jpg
diff --git a/week1/3-website/css/background.jpg b/week1/3-website/css/background.jpg
diff --git a/week1/3-website/css/style.css b/week1/3-website/css/style.css
@@ -1,8 +1,189 @@
-/**
- * Add your custom styles below
- * 
- * Remember: 
- * - Be organised, use comments and separate your styles into meaningful chunks
- *    for example: General styles, Navigation styles, Hero styles, Footer etc.
- * 
- */
+@import url('https://fonts.googleapis.com/css2?family=Muli:wght@200;300;600&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Righteous&display=swap');
+
+/* CSS for the navigation bar */
+#nav-bar
+{
+    position: fixed;
+    top: 0px;
+    background-color: #fff;
+    width: 100%;
+    height: 50px;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    padding-left: 50px;
+    font-family: "Muli:wght@200", sans-serif;
+}
+
+#nav-bar > ul 
+{
+    width: 50vw;
+    display: flex;
+    flex-direction: row;
+    justify-content: right;
+    padding-right: 100px;
+}
+
+#nav-bar > ul > li 
+{
+    padding-left: 10px;
+    padding-right: 10px;
+    list-style: none;
+}
+
+a {
+    color: black;
+    text-decoration: none;
+  }
+
+
+/* CSS for the main content */
+section 
+{
+    margin-bottom: 100px;
+    margin-top: 100px;
+    max-width: 1200px;
+    text-align: center;
+    margin: auto;
+}
+h1
+{
+    font-family: "Muli:wght@300", sans-serif;
+}
+
+h2
+{
+    font-family: "Muli:wght@300", sans-serif;
+}
+
+h3
+{
+    font-family: "Righteous", sans-serif;
+    font-size: 36px;
+    padding-top: 256px;
+    padding-bottom: 64px;
+}
+
+p
+{
+    font-family: "Muli:wght@200", sans-serif;
+    text-align: left;
+}
+
+/* CSS for the header */
+header
+{
+    color: #fff;
+    background-image: url("background.jpg");
+    max-width: 100%;
+    margin-top: 50px;
+    padding-top: 150px;
+    padding-bottom: 150px;
+}
+
+#home-box
+{
+    background-color: rgba(0, 0, 0, 0.5);
+    width: 512px;
+    margin: auto;
+    padding: 40px;
+}
+
+#home-box > p
+{
+    text-align: center;
+}
+
+/* CSS for the about section */
+#about > h3
+{
+    text-align: right;
+}
+
+#about-box
+{
+    background-color: #f2f2f2;
+    display:flex;
+    margin-left: 15px;
+    margin-right: 15px;
+    padding: 64px;
+}
+
+#about-box p
+{
+    margin-left: 64px;
+}
+
+.art-img
+{
+    width: 100%;
+    height: auto;
+}
+
+/* CSS for the article section */
+#articles > h3
+{
+    text-align: left;
+}
+
+#art-box
+{
+    display:flex;
+    justify-content: center;
+}
+
+article:first-child > a > button
+{
+    background-color: #daa520;
+}
+
+button
+{
+    background-color: #c0c0c0;
+    font-family: "Muli:wght@200", sans-serif;
+    margin-bottom: 30px;
+    padding: 10px;
+    border: 1px solid #000;
+}
+
+article
+{
+    background-color: #f2f2f2;
+    margin-left: 15px;
+    margin-right: 15px;
+    flex: 1 1 0;
+}
+
+article > p
+{
+    margin: 20px;
+}
+
+/* CSS for the footer */
+footer
+{
+    background-color: #808080;
+    margin-top: 256px;
+    padding-bottom: 10px;
+    text-align: center;
+}
+
+#external
+{
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+}
+
+.social-media
+{
+    width: 32px;
+    height: 32px;
+    padding: 20px;
+}
+
+footer > p
+{
+    text-align: center;
+}
diff --git a/week1/3-website/iconfinder_Circled_Facebook_svg_5279111.svg b/week1/3-website/iconfinder_Circled_Facebook_svg_5279111.svg
diff --git a/week1/3-website/iconfinder_Circled_Instagram_svg_5279112.svg b/week1/3-website/iconfinder_Circled_Instagram_svg_5279112.svg
diff --git a/week1/3-website/iconfinder_Circled_Twitter_svg_5279123.svg b/week1/3-website/iconfinder_Circled_Twitter_svg_5279123.svg
diff --git a/week1/3-website/index.html b/week1/3-website/index.html
@@ -12,11 +12,84 @@
       rel="stylesheet"
       type="text/css"
     />
-    <link rel="stylesheet" href="css/style.css" />
-    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
+    <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>   
+    <nav id="nav-bar">
+      <p>The Random Test Blog</p>
+      <ul>
+        <li><a class="nav-link" href=#home>Home</a></li>
+        <li><a class="nav-link" href=#about>Blog</a></li>
+        <li><a class="nav-link" href=#articles>Articles</a></li>
+        <li><a class="nav-link" href=#footer>Contact</a></li>
+      </ul>
+    </nav>
+
+    <header id="home">
+      <div id="home-box">
+        <h1>This is my test blog website</h1>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit nam libero tellus.</p>
+      </div>
+    </header>
+
+    <section id="about">
+      <h3>ABOUT</h3>
+      <div id="about-box">
+        <img class="art-img" src="inspirational.jpg" alt="random inspirational picture">
+        <div>
+          <h2>Test Blog</h2>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam libero tellus, tincidunt in turpis facilisis, rutrum dignissim nisl. Nulla at enim at eros ornare viverra ac vitae nibh. Donec tellus risus, scelerisque sed purus ut, molestie dignissim quam. Duis dapibus id neque ut aliquam.</p>
+        </div>
+      </div>
+    </section>
+
+    <section id="articles">
+      <h3>ARTICLES</h3>
+      <div id="art-box">
+        <article>
+          <img class="art-img" src="catgirls.jpg" alt="picture of catgirls">
+          <h2>Catgirls!</h2>
+          <p>Mauris vitae placerat nisi. Mauris at erat enim. Morbi lorem tortor, tempor sit amet mauris a, iaculis convallis elit. Vivamus convallis aliquet fringilla. Nam dignissim arcu non sem luctus, ut convallis diam eleifend. Morbi iaculis sem ut neque elementum, et commodo enim gravida. Nulla maximus turpis faucibus elit condimentum facilisis.</p>
+          <a href=# class="button">
+            <button>Continue reading</button>
+          </a>
+        </article>
+
+        <article>
+          <img class="art-img" src="asteroid.jpg" alt="picture of an asteroid hitting earth">
+          <h2>The end of the world?</h2>
+          <p>Mauris vitae placerat nisi. Mauris at erat enim. Morbi lorem tortor, tempor sit amet mauris a, iaculis convallis elit. Vivamus convallis aliquet fringilla. Nam dignissim arcu non sem luctus, ut convallis diam eleifend. Morbi iaculis sem ut neque elementum, et commodo enim gravida. Nulla maximus turpis faucibus elit condimentum facilisis.</p>
+          <a href=# class="button">
+            <button>Continue reading</button>
+          </a>
+        </article>
+
+        <article>
+          <img class="art-img" src="coronavirus.jpg" alt="picture of coronaviruses">
+          <h2>Coronavirus</h2>
+          <p>Mauris vitae placerat nisi. Mauris at erat enim. Morbi lorem tortor, tempor sit amet mauris a, iaculis convallis elit. Vivamus convallis aliquet fringilla. Nam dignissim arcu non sem luctus, ut convallis diam eleifend. Morbi iaculis sem ut neque elementum, et commodo enim gravida. Nulla maximus turpis faucibus elit condimentum facilisis.</p>
+          <a href=# class="button">
+            <button>Continue reading</button>
+          </a>
+        </article>
+      </div>
+    </section>
+
+    <footer id="footer">
+      <nav id="external">
+        <a href = "https://www.facebook.com/">
+          <img class="social-media" src="iconfinder_Circled_Facebook_svg_5279111.svg" alt="Facebook">
+        </a>
+        <a href = "https://www.instagram.com/">
+          <img class="social-media" src="iconfinder_Circled_Instagram_svg_5279112.svg" alt="Facebook">
+        </a>
+        <a href = "https://www.twitter.com/">
+          <img class="social-media" src="iconfinder_Circled_Twitter_svg_5279123.svg" alt="Facebook">
+        </a>
+      </nav>
+      <p>© Copyright 2020. All rights reserved.</p>
+    </footer>
   </body>
-</html>
+</html>
diff --git a/week1/3-website/inspirational.jpg b/week1/3-website/inspirational.jpg