CodeYourFuture · RobCso · Jul 3, 2022 · Jul 3, 2022
diff --git a/css/style.css b/css/style.css
@@ -6,3 +6,132 @@
  *    for example: General styles, Navigation styles, Hero styles, Footer etc.
  * 
  */
+
+/* Using Roboto font added from Google. Set margin to 0 */
+
+ body {
+    margin: 0;
+    font-family:'Roboto'sans-serif;
+
+
+}
+
+header,
+main,
+footer {
+    max-width: 1200px;
+    margin: 0 auto ;
+    padding: 0 ;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+
+}
+
+
+header {
+    position: relative;
+    width: auto;
+    height: 250px;
+    display: block;
+}
+
+/* using a pseudoclass to adjust the background image opacity  */
+
+header::after {
+    content: "";
+    background-image: url(/images/img4.jpg);
+    position: absolute;
+    top: -55px;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    opacity: 0.3;
+    z-index: -1;
+    background-position: center;
+}
+
+
+h1 {
+    position: relative;
+    color: black;
+    font-size: 5rem;
+    line-height: 0.9;
+    text-align: center;
+}
+
+/* navigation bar */
+
+.navigation-list {
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    flex-direction: ;
+    height: 0.5rem;
+    margin-bottom: 1rem;
+    padding-top: 1rem;
+}
+
+.navigation-item {
+    list-style-type: none;
+    flex-direction: row;
+    font-size: 0.75rem;
+    padding: 0rem 1rem 0rem 0rem;
+
+}
+
+.navigation-link {
+    color: var(--grey-dark);
+    font-weight: 600;
+    text-transform: uppercase;
+    text-decoration: none;
+    padding: 0.5rem 0;
+}
+
+/* hover properties of the navigation bar */
+
+.navigation-link:hover {
+    background-color: coral;
+    color: darkgreen;
+    padding: 2px 5px;
+    border-radius: 2px;
+}
+
+
+main {
+    background-color: chartreuse;
+    font-size: initial ;
+    background-image: url(/images/img5.jpg);
+    background-position: center;
+    background-size: cover;
+}
+
+.first-article{
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    flex-direction: column;
+
+}
+
+.first-image,
+.second-image,
+.third-image
+ {
+    width: 400px;
+}
+
+/* use of :first-child pseudo class applied to the article  */
+
+article :first-child {
+    color: chocolate;
+}
+
+footer {
+    border-top: 2px solid ;
+    margin-top: 20px;
+    text-align: center;
+    background-color: aqua;
+}
+
diff --git a/images/img1.jpg b/images/img1.jpg
diff --git a/images/img2.jpg b/images/img2.jpg
diff --git a/images/img3.jpg b/images/img3.jpg
diff --git a/images/img4.jpg b/images/img4.jpg
diff --git a/images/img5.jpg b/images/img5.jpg
diff --git a/index.html b/index.html
@@ -6,7 +6,7 @@
       name="viewport"
       content="width=device-width, initial-scale=1, shrink-to-fit=no"
     />
-    <title>My Blog</title>
+    <title>Robert's Blog</title>
     <link
       href="//fonts.googleapis.com/css?family=Roboto:400,500,300"
       rel="stylesheet"
@@ -15,7 +15,57 @@
     <link rel="stylesheet" href="css/style.css" />
     <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
   </head>
+
   <body>
+
+    <header class="header">
+      <h1>This is Robert's blog</h1>
+      <p>Welcome to my first blog post. This blog will be about my journey to become a software developer and the mental health struggles that are getting in the way </p>
+
+      <nav class="navigation">
+        <ul class="navigation-list">
+          <li class="navigation-item">
+            <a class="navigation-link" href="#">Welcome</a>
+          </li>
+          <li class="navigation-item">
+            <a class="navigation-link" href="#">About</a>
+          </li>
+          <li class="navigation-item">
+            <a class="navigation-link" href="#">Contact</a>
+          </li>
+
+        </ul>
+      </nav>
+
+    </header>
+
+    <main>
+      <article class="first-article">                
+        <h3 class="first-sub">Why can't I just feel normal</h3>
+        <img src="images/img2.jpg" alt="person in distress holding his head" class="first-image">
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum minima vel, consequuntur possimus ducimus animi officiis cum quibusdam nam dicta delectus fuga quam ea maiores in accusamus consectetur distinctio odit?<a href="#">more</a></p>
+      </article>
+      <article class="second-article">
+        <h3 class="second-sub">The start of the journey</h3>
+        <img src="images/img1.jpg" alt="long road with a road sign journey start" class="second-image">
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur officia esse vitae veritatis debitis, sit maiores temporibus unde illum quos eius mollitia ducimus repellendus vero maxime, sequi, quae dolorem error.<a href="#">more</a></p>
+      </article>
+      <article class="third-article">
+        <h3 class="third-sub">The Solution (Hopefully)</h3>
+        <img src="images/img3.jpg" alt="quote Positivity is a superpower to get Happiness" class="third-image">
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe inventore et temporibus sint nesciunt, neque deleniti sit delectus dolorem repudiandae rerum quos dolorum sunt voluptatem magni. Dolorum quisquam quod adipisci?<a href="#">more</a></p>
+      </article>
+
+    </main>
+
+
+
+    <footer>
+      <p>Thank you for reading my blog post and stay Positive always</p>
+
+
+    </footer>
+
     <!-- Add your HTML markup here -->
     <!-- Remember: Use semantic HTML tags like <header>, <main>, <nav>, <footer>, <section> etc -->
   </body>