diff --git a/index.html b/index.html
index 76254c13..3a676485 100644
--- a/index.html
+++ b/index.html
@@ -20,8 +20,7 @@
   </head>
 
   <body>
-    <div class="header">
-
+    <header>  <!-- changed--> 
         <a href="#">
           <img
             src="images/bikes-for-refugees_logo.jpg"
@@ -29,8 +28,7 @@
             class="header__logo"
           />
         </a>
-
-        <div>
+        <nav> <!---- changed---> 
           <ul class="navigation__list">
             <li class="navigation__item">
               <a class="navigation__link" href="#">Home</a>
@@ -45,13 +43,13 @@
               <a class="navigation__link" href="#">Contact Us</a>
             </li>
           </ul>
-        </div>
+        </nav>
 
-        <button>Donate Now</button>
+        <button class="button_orange">Donate Now</button>
 
-    </div>
+    </header>
 
-    <div class="content">
+    <main> <!---- div class="content"---> 
         <div class="main">
           <div class="alert">
             You've helped us give <span class="text-highlight">72</span> bikes
@@ -64,14 +62,14 @@ <h1>Bikes for Refugees</h1>
               Providing donated bikes and accessories to refugees and asylum
               seekers in Scotland.
             </p>
-            <button>Donate a bike today</button>
-            <button>Volunteer</button>
+            <button class="button_orange">Donate a bike today</button>
+            <button class="button_white">Volunteer</button>
           </div>
 
           <div>
             <h2 class="heading-underline">Learn more</h2>
 
-            <div>
+            <div class="learn_more">
               <div class="article">
                 <h3 class="article__title">Why do refugees need bikes?</h3>
                 <p class="article__summary">
@@ -108,11 +106,11 @@ <h3 class="article__title">How can I help?</h3>
         <div class="sidebar">
           <h2 class="heading-underline">Upcoming events</h2>
 
-          <div class="article">
-            <img
+          <div class="article side" >
+            <img 
               class="article__thumbnail"
-              src="spring-fundraisers_thumbnail.jpg"
-              alt=""
+              src="images/spring-fundraisers_thumbnail.jpg"
+              alt="spring-fundraisers_thumbnail "
             />
             <div class="article__content">
               <h3 class="article__title">
@@ -125,11 +123,11 @@ <h3 class="article__title">
             </div>
           </div>
 
-          <div class="article">
+          <div class="article side">
             <img
               class="article__thumbnail"
-              src="bikes-for-refugees_logo.jpg"
-              alt=""
+              src="images/bikes-for-refugees_logo.jpg"
+              alt="bikes-for-refugees_logo"
             />
             <div class="article__content">
               <h3 class="article__title">
@@ -138,11 +136,11 @@ <h3 class="article__title">
             </div>
           </div>
 
-          <div class="article">
+          <div class="article side">
             <img
               class="article__thumbnail"
-              src="edinburgh-damascus_thumbnail.png"
-              alt=""
+              src="images/edinburgh-damascus_thumbnail.png"
+              alt="edinburgh-damascus_thumbnail"
             />
             <div class="article__content">
               <h3 class="article__title">
@@ -164,9 +162,9 @@ <h3 class="article__title">
             All Facebook events
           </a>
         </div>
-    </div>
+      </main> <!---- /div---> 
 
-    <div class="footer">
+    <footer> <!----class="footer"--->
       <div class="footer__content">
         <p>
           <strong>Bikes for Refugees Scotland is a volunteer-led project to help
@@ -174,6 +172,6 @@ <h3 class="article__title">
         </p>
         <p>Website by Code Your Future</p>
       </div>
-    </div>
+    </footer>
   </body>
 </html>
diff --git a/styles/style.css b/styles/style.css
index 4d1c088e..cb2ca495 100644
--- a/styles/style.css
+++ b/styles/style.css
@@ -34,9 +34,9 @@ p {
   margin-bottom: 0;
 }
 
-.header,
-.content,
-.footer {
+header, /* ! */
+main, /* .content */
+footer { /* .footer */
   padding: 0 1.5rem;
   max-width: 1200px;
   margin: 0 auto;
@@ -44,7 +44,7 @@ p {
 
 /* Header */
 
-.header {
+header {    /* ! */
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -67,6 +67,7 @@ p {
 
 .navigation__item {
   padding: 0.5rem 0;
+  margin:0 15px;
 }
 
 .navigation__link {
@@ -100,11 +101,15 @@ p {
 
 /* Content */
 
-.content {
+main { /* .content */
   display: flex;
   flex-direction: column;
 }
 
+.learn_more{
+  display: flex;
+}
+
 /* Alert */
 
 .alert {
@@ -120,8 +125,12 @@ p {
 /* hero */
 
 .hero {
-  background-image: url("header-bike.jpg");
-  background-color: var(--grey-light);
+  background-image: url("/images/header-bike.jpg");
+  background-color: var(--grey-light);padding: 10px;
+  color: white;
+  height: 260px;
+  padding: 70px 40px 0px 40px;
+  margin-bottom: 50px;
 }
 
 .hero h1 {
@@ -217,11 +226,12 @@ p {
   display: flex;
   flex-direction: column;
   min-width: 350px;
+  align-items: end;
 }
 
 /* Footer */
 
-.footer {
+footer { /* .footer */
   margin-top: 2rem;
 }
 
@@ -231,7 +241,7 @@ p {
   padding-bottom: 2rem;
 }
 
-.footer p {
+footer p { /* .footer p */
   padding-bottom: 1rem;
   text-align: center;
   font-size: 0.85rem;
@@ -240,7 +250,7 @@ p {
 /* Media queries */
 
 @media screen and (min-width: 992px) {
-  .content {
+  main { /* .content */
     flex-direction: row;
   }
 
@@ -248,3 +258,44 @@ p {
     padding-right: 2rem;
   }
 }
+.article.side{
+    display:flex;
+  /*-justify-content: space-between;-*/ 
+  
+}
+.article img {
+  margin-right: 10px;
+}
+
+.article {
+  border: 1px solid grey;
+  border-radius: 5px;
+  padding: 10px;
+  margin: 5px;
+}
+.button_orange{
+  color: white;
+  background-color:orange;
+  border:none ;
+  border-radius: 5px;
+  padding: 5px 10px;
+}
+.button_white{
+  color: orange;
+  background-color: white;
+  
+  border:none;
+  border-radius: 5px;
+  padding: 5px 10px;
+}
+.navigation__link:hover{
+  color: orange;
+}
+.button_orange:hover{
+  color: orange;
+  background-color: white;
+}
+.button_white:hover{
+   color: white;
+  background-color:orange;
+}
\ No newline at end of file
