diff --git a/css/style.css b/css/style.css
index 75e9841e..826148e3 100644
--- a/css/style.css
+++ b/css/style.css
@@ -6,3 +6,83 @@
  *    for example: General styles, Navigation styles, Hero styles, Footer etc.
  * 
  */
+
+
+
+ .header {
+    align-items: center;
+    justify-content: space-between;
+    height: 5rem;
+    margin-bottom: 1rem;
+    padding-top: 1rem;
+  }
+  
+  .navigation__list {
+    display: flex; 
+    list-style: none;
+    color: #3835f0;
+  }
+  
+  .navigation__item {
+    padding: 2rem;
+  }
+  
+  .navigation__link {
+
+    font-weight: 600;
+    text-transform: uppercase;
+    text-decoration: none;}
+
+.section{
+
+border-width: 0.1rem;
+  border-style: solid;
+  border-color: grey;
+  padding: 1rem;
+}
+
+.article_title {
+    color: #3835f0
+    }
+        
+.section:first-child {
+    background: #d4d3eb;
+}
+      
+.article__summary {
+margin-top: 0;
+margin-bottom: 1rem;
+        
+      }
+      
+     
+
+      
+.article__read-more a {
+        font-size: 0.85rem;
+        font-weight: 700;
+        color: #3835f0;
+        text-decoration: none;
+      }
+      
+.article__read-more a:hover,
+.article__read-more a:focus {
+text-decoration: underline;
+      }
+
+      .footer {
+        margin-top: 2rem;
+      }
+      
+      .footer__content {
+        border-top: 2px;
+        padding-top: 2rem;
+        padding-bottom: 2rem;
+      }
+      
+      .footer p {
+        padding-bottom: 1rem;
+        text-align: center;
+        font-size: 0.85rem;
+      }
+      
\ No newline at end of file
diff --git a/index.html b/index.html
index 67dfc7f5..fc3adbd4 100644
--- 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>The world's greatest capybara resource</title>
     <link
       href="//fonts.googleapis.com/css?family=Roboto:400,500,300"
       rel="stylesheet"
@@ -18,5 +18,79 @@
   <body>
     <!-- Add your HTML markup here -->
     <!-- Remember: Use semantic HTML tags like <header>, <main>, <nav>, <footer>, <section> etc -->
+      <header> 
+      
+      <nav>
+        <ul class="navigation__list">
+          <li class="navigation__item">
+            <a class="navigation__link" href="#">Home</a>
+          </li>
+          <li class="navigation__item">
+            <a class="navigation__link" href="#">Capybaras, what are they?</a>
+          </li>
+          <li class="navigation__item">
+            <a class="navigation__link" href="#">Visit a Capybara sanctuary</a>
+          </li>
+          <li class="navigation__item">
+            <a class="navigation__link" href="#">Contact</a>
+          </li>
+        </ul>
+      </nav>
+      </header>
+<main>
+  <section class="section">
+    <article>
+      <h1
+        class="article_title">What is a Capybara?</h1>
+        <p class ="article_summary">
+          "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
+          <p class="article__read-more">
+            <a href="#">
+              
+              Read More
+            </a>
+          </p>
+
+      </article>
+  </section>
+
+  <section class="section">
+    <article>
+      <h1
+        class="article_title">Where do Capybaras live?</h1>
+        <p class ="article_summary">
+          "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
+          <p class="article__read-more">
+            <a href="#">
+              
+              Read More
+            </a>
+          </p>
+
+      </article>
+  </section>
+
+  <section class="section">
+    <article>
+      <h1
+        class="article_title">What do Capybaras eat?</h1>
+        <p class ="article_summary">
+          "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
+          <p class="article__read-more">
+            <a href="#">
+              
+              Read More
+            </a>
+          </p>
+
+      </article>
+  </section>
+</main>
+<footer class="footer">
+  <div class="footer__content">
+    
+    <p>Website by Cat Smith</p>
+  </div>
+</footer>
   </body>
 </html>
