CodeYourFuture · gynaa78 · Jul 17, 2021 · Jul 17, 2021 · Jul 17, 2021
diff --git a/blog1.jpg b/blog1.jpg
diff --git a/blog2.jpg b/blog2.jpg
diff --git a/blog3.jpg b/blog3.jpg
diff --git a/css/style.css b/css/style.css
@@ -1,8 +1,168 @@
-/**
- * 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.
- * 
- */
+body {
+    font-family: Arial;
+    padding: 20px;
+    background: #849b9a;
+
+
+  }
+
+  /* Header/Blog Title */
+  .header {
+    padding: 30px;
+    font-size: 40px;
+    text-align: center;
+    padding: 0px 20px;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  background-color: rgb(97, 94, 94);
+  }
+
+  #nav-bar {
+    font-size: 1.2rem;
+    padding-top: 0.3rem;
+    padding-bottom: 0.3rem;
+  }
+  #nav-bar .container {
+
+    display: grid;
+    /* grid-template-columns: repeat(2, 1fr); */
+  }
+
+  #nav-bar .nav {
+    color: black;
+    font-size: larger;
+    justify-self: flex-end;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  #nav-bar .nav a {
+    padding: 0 1rem;
+  }
+  #nav-bar .nav a:hover {
+    color: #555;
+  }
+
+  /* Create two unequal columns that floats next to each other */
+  /* Left column */
+  .leftcolumn {
+    float: left;
+    width: 75%;
+  }
+
+  /* Right column */
+  .rightcolumn {
+    float: right;
+    width: 25%;
+    padding-left: 20px;
+  }
+
+  /* Fake image */
+  .fakeimg {
+    background-color: #aaa;
+    width: 100%;
+    padding: 0px;
+  }
+
+  /* Add a card effect for articles */
+  .card {
+    background-color: white;
+    padding: 20px;
+    margin-top: 20px;
+
+  }
+
+  /* Clear floats after the columns */
+  .row:after 
+  {
+    content: "";
+    display: table;
+    clear: both;
+  }
+
+  /* Footer */
+  .footer {
+    padding: 20px;
+    text-align: center;
+    background: #ddd;
+    margin-top: 20px;
+  }
+  article :first-child {
+    color:rgb(248, 20, 12);
+  }
+  li {
+    list-style: none;
+  }
+  /* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
+  @media screen and (max-width: 800px) {
+    .leftcolumn, .rightcolumn {
+      width: 100%;
+      padding: 0;
+    }
+  }body {
+    font-family: Arial;
+    padding: 20px;
+    background: #f1f1f1;
+  }
+
+  /* Header/Blog Title */
+  .header {
+    padding: 30px;
+    font-size: 40px;
+    text-align: center;
+    background: white; 
+  }
+
+  /* Create two unequal columns that floats next to each other */
+  /* Left column */
+  .leftcolumn {
+    float: left;
+    width: 75%;
+  }
+
+  /* Right column */
+  .rightcolumn {
+    float: left;
+    width: 25%;
+    padding-left: 20px;
+  }
+
+  /* Fake image */
+  .fakeimg {
+    background-color: #aaa;
+    width: 100%;
+    padding: 0px;
+  }
+
+  /* Add a card effect for articles */
+  .card {
+    background-color: white;
+    padding: 20px;
+    margin-top: 20px;
+
+
+  }
+
+  /* Clear floats after the columns */
+  .row:after {
+    content: "";
+    display: table;
+    clear: both;
+  }
+
+  /* Footer */
+  .footer {
+    padding: 20px;
+    text-align: center;
+    background: #ddd;
+    margin-top: 20px;
+  }
+
+  /* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
+  @media screen and (max-width: 800px) {
+    .leftcolumn, .rightcolumn {
+      width: 100%;
+      padding: 0;
+    }
+  }
diff --git a/index.html b/index.html
@@ -1,22 +1,110 @@
 <!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 http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="./css/style.css">
+    <title>My Coding Journey Blog</title>
+</head>
+<body>
+    <div class="container">
+         <div class="header">
+          <header id="header">
+            <nav id="nav-bar">
+              <div class="container">
+                <ul class="nav">
+                  <li><a class="nav-link" href="#home">Home</a></li>
+                  <li><a class="nav-link" href="#about">About</a></li>
+                  <li><a class="nav-link" href="#contact">Contact</a></li>
+                </ul>
+              </div>
+            </nav>
+          </header>
+        <h2>My Coding Journey</h2>
+        <!-- Summary of Blog -->
+        <p>This is a blog journal about my coding journey and everything in between</p>
+      </div>
+
+         <!-- Articles Section generated with lorem Ipsum, cool, huh? -->
+      <div class="row">
+        <div class="leftcolumn">
+
+          <div class="card">
+           <article>
+                <h2>The Outset of my Journey</h2>
+            <h3>Everything you need to know about my journey with CYF July 10, 2021</h3>
+            <!-- The closest image I found that looked like me -->
+            <a target="_blank" href="https://codeyourfuture.io/"> 
+              <img class="fakeimg" src="blog1.jpg" /> 
+            </a>
+
+               <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptate culpa obcaecati dolores fugiat quibusdam delectus, ea in sit quasi labore error nemo, dignissimos accusamus vel consectetur nam perferendis harum praesentium dicta illo minus quas! Rerum animi velit aut quibusdam nihil! Tenetur recusandae aperiam consequuntur est earum alias numquam libero consectetur repudiandae labore! Fuga in excepturi at repudiandae iusto veritatis inventore beatae assumenda nihil laborum explicabo ducimus, nesciunt doloribus blanditiis necessitatibus reprehenderit ea magni quibusdam nisi perferendis. Amet dolorum est iste quod officia sunt voluptas harum molestias enim consectetur libero, architecto repellendus quibusdam mollitia perferendis sint veritatis corrupti neque. Explicabo, molestias?</p>
+            </article>
+          </div>
+
+          <div class="card">
+            <article>
+                <h2>Learning all about Coding</h2>
+                <h3>Decoding Coding! Demystifying what coding is. June 15, 2021</h3>
+                <a target="_blank" href="https://www.w3schools.com/"> 
+                  <img class="fakeimg" src="blog2.jpg" /> 
+                </a>
+
+                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptate culpa obcaecati dolores fugiat quibusdam delectus, ea in sit quasi labore error nemo, dignissimos accusamus vel consectetur nam perferendis harum praesentium dicta illo minus quas! Rerum animi velit aut quibusdam nihil! Tenetur recusandae aperiam consequuntur est earum alias numquam libero consectetur repudiandae labore! Fuga in excepturi at repudiandae iusto veritatis inventore beatae assumenda nihil laborum explicabo ducimus, nesciunt doloribus blanditiis necessitatibus reprehenderit ea magni quibusdam nisi perferendis. Amet dolorum est iste quod officia sunt voluptas harum molestias enim consectetur libero, architecto repellendus quibusdam mollitia perferendis sint veritatis corrupti neque. Explicabo, molestias?</p>
+             </article>
+          </div>
+
+
+          <div class="card">
+            <article>
+                <h2>Unleash your Creativity!</h2>
+            <h3> Coding is about Being Creative May 25, 2021</h3>
+            <a target="_blank" href="https://codepen.io"> 
+              <img class="fakeimg" src="blog3.jpg" />
+            </a>
+
+                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptate culpa obcaecati dolores fugiat quibusdam delectus, ea in sit quasi labore error nemo, dignissimos accusamus vel consectetur nam perferendis harum praesentium dicta illo minus quas! Rerum animi velit aut quibusdam nihil! Tenetur recusandae aperiam consequuntur est earum alias numquam libero consectetur repudiandae labore! Fuga in excepturi at repudiandae iusto veritatis inventore beatae assumenda nihil laborum explicabo ducimus, nesciunt doloribus blanditiis necessitatibus reprehenderit ea magni quibusdam nisi perferendis. Amet dolorum est iste quod officia sunt voluptas harum molestias enim consectetur libero, architecto repellendus quibusdam mollitia perferendis sint veritatis corrupti neque. Explicabo, molestias?</p>
+             </article>
+          </div>
+        <!-- </div> -->
+
+
+        <div class="center">
+          <div class="card">
+            <h2>About Me</h2>
+            <!-- <div class="fakeimg" style="height:100px;">Image</div> -->
+            <!-- <img src="https://images.pexels.com/photos/1779487/pexels-photo-1779487.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="" srcset=""> -->
+            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis rerum assumenda, expedita voluptas vero officiis, ab reiciendis porro quas ducimus quia facilis sint cum unde fugiat quod eaque, dolores et.</p>
+          </div>
+
+          <!-- <div class="footer"> -->
+
+
+          <div class="card">
+
+
+            <h3>Follow Me</h3>
+            <p></p>
+            <div>
+              <!-- <h2>Social Connect</h2> -->
+              <a href="https://twitter.com">
+                <i class="fab fa-twitter fa-2x"></i> </a
+              ><a href="https://facebook.com">
+                <i class="fab fa-facebook fa-2x"></i> </a
+              ><a href="https://youtube.com">
+                <i class="fab fa-youtube fa-2x"></i>
+              </a>
+            </div>
+          </div>
+
+
+
+      <div class="footer">
+        <h2>Footer</h2>
+
+          </div>
+
+
+</body>
+</html>