diff --git a/css/main.css b/css/main.css
index cb7da19..cec4a27 100644
--- a/css/main.css
+++ b/css/main.css
@@ -59,8 +59,158 @@ textarea {
 
   body {
     font-family: "Exo", sans-serif;
+    font-weight: 400;
+    box-sizing: border-box;
   } 
 
+  .thin {
+    font-weight: 100;
+  }
+
+  .medium {
+    font-weight: 500;
+  }
+
+  .light-italic {
+    font-weight: 300;
+    font-style: italic;
+  }
+
+  .dark-gray {
+    color: #282828;
+  }
+
+  .salmon {
+    color: #ff6d6d;
+  }
+
+  .white {
+    color: white;
+  }
+
+  .salmon-button {
+    color: white;
+    background-color: #ff6d6d;
+    border-radius: 3px;
+    font-weight: 400;
+    padding: 10px 30px;
+    margin: 0;
+    font-size: 14pt;
+  }
+
+  .tiny {
+    font-size: 10pt;
+  }
+
+  .small {
+    font-size: 14pt;
+  }
+
+  .title {
+    font-size: 30pt;
+  }
+
+  #section-1 {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    background-image: url(/img/bg-1_sm.jpeg);
+    background-size: cover;
+    background-position: center;
+    height: 400px;
+  }
+
+  #section-1 h1 {
+    text-align: center;
+    max-width: 750px;
+    margin: 50px;
+  }
+
+  #section-1 .tiny {
+    color: white;
+  }
+
+  #section-2 {
+    display: grid;
+    grid-template-columns: 1fr 80vw 1fr;
+    grid-template-rows: auto auto auto;
+  }
+
+  #section-2-title {
+    grid-row: 1/2;
+    grid-column: 2/3;
+  }
+
+  #section-2-text {
+    grid-row: 3/4;
+    grid-column: 2/3;
+    text-align: center;
+  }
+
+  #section-2-img {
+    grid-row: 2/3;
+    grid-column: 2/3;
+    justify-self: center;
+  }
+
+  @media (min-width: 484px) {
+    #section-1 {
+      background-image: url(/img/bg-1_md.jpeg);
+      height: 550px;
+    }
+    #section-1 .tiny {
+      color:#282828;
+    }
+    #section-1 h1 {
+      font-size: 50pt;
+    }
+  }
+
+  @media (min-width: 1025px) {
+    #section-1 {
+      background-image: url(/img/bg-1_lg.jpeg);
+      min-height: 800px;
+    }
+    #section-2 {
+      grid-template-columns: 1fr max(40%);
+      grid-template-rows: auto auto auto auto;
+    }
+    #section-2-title {
+      grid-column: 1/2;
+      grid-row: 2/3;
+      padding-left: 10vw;
+      padding-right: 10vw;
+    }
+    #section-2-text {
+      grid-column: 1/2;
+      grid-row: 3/4;
+      text-align: left;
+      padding-left: 10vw;
+      padding-right: 10vw;
+    }
+    #section-2-img {
+      grid-column: 2/3;
+      grid-row:1/5;
+      justify-self: right;
+      padding: 10px;
+    }
+
+    #section-2-img img {
+      max-width: 100%;
+    }
+  }
+
+  @media (min-width: 1921px) {
+    #section-1 {
+      background-image: url(/img/bg-1_xl.jpeg);
+      min-height: 1100px;
+    }
+    #section-2 {
+      padding-left: 15vw;
+      padding-right: 15vw;
+    }
+  }
 
 /* ==========================================================================
    Helper classes
diff --git a/img/airplane.png b/img/airplane.png
new file mode 100644
index 0000000..932c97b
Binary files /dev/null and b/img/airplane.png differ
diff --git a/img/bg-1_lg.jpeg b/img/bg-1_lg.jpeg
new file mode 100644
index 0000000..e1747eb
Binary files /dev/null and b/img/bg-1_lg.jpeg differ
diff --git a/img/bg-1_md.jpeg b/img/bg-1_md.jpeg
new file mode 100644
index 0000000..e4377dc
Binary files /dev/null and b/img/bg-1_md.jpeg differ
diff --git a/img/bg-1_sm.jpeg b/img/bg-1_sm.jpeg
new file mode 100644
index 0000000..1ac73e8
Binary files /dev/null and b/img/bg-1_sm.jpeg differ
diff --git a/img/bg-1_xl.jpeg b/img/bg-1_xl.jpeg
new file mode 100644
index 0000000..f92bd67
Binary files /dev/null and b/img/bg-1_xl.jpeg differ
diff --git a/img/bg-2_lg.jpg b/img/bg-2_lg.jpg
new file mode 100644
index 0000000..d0b79eb
Binary files /dev/null and b/img/bg-2_lg.jpg differ
diff --git a/img/bg-2_md.jpeg b/img/bg-2_md.jpeg
new file mode 100644
index 0000000..06be2dc
Binary files /dev/null and b/img/bg-2_md.jpeg differ
diff --git a/img/bg-2_sm.jpeg b/img/bg-2_sm.jpeg
new file mode 100644
index 0000000..4bd39d9
Binary files /dev/null and b/img/bg-2_sm.jpeg differ
diff --git a/img/bulb.png b/img/bulb.png
new file mode 100644
index 0000000..6d34a78
Binary files /dev/null and b/img/bulb.png differ
diff --git a/img/dog-1_md.jpg b/img/dog-1_md.jpg
new file mode 100644
index 0000000..8d1e3d1
Binary files /dev/null and b/img/dog-1_md.jpg differ
diff --git a/img/dog-1_sm.jpeg b/img/dog-1_sm.jpeg
new file mode 100644
index 0000000..a3901b2
Binary files /dev/null and b/img/dog-1_sm.jpeg differ
diff --git a/img/dog-2_md.jpg b/img/dog-2_md.jpg
new file mode 100644
index 0000000..727b1da
Binary files /dev/null and b/img/dog-2_md.jpg differ
diff --git a/img/dog-2_sm.jpeg b/img/dog-2_sm.jpeg
new file mode 100644
index 0000000..1faba4f
Binary files /dev/null and b/img/dog-2_sm.jpeg differ
diff --git a/img/partner-logo-1.png b/img/partner-logo-1.png
new file mode 100644
index 0000000..5bbcfd8
Binary files /dev/null and b/img/partner-logo-1.png differ
diff --git a/img/partner-logo-2.png b/img/partner-logo-2.png
new file mode 100644
index 0000000..7c44633
Binary files /dev/null and b/img/partner-logo-2.png differ
diff --git a/img/partner-logo-3.png b/img/partner-logo-3.png
new file mode 100644
index 0000000..451434b
Binary files /dev/null and b/img/partner-logo-3.png differ
diff --git a/img/partner-logo-4.png b/img/partner-logo-4.png
new file mode 100644
index 0000000..cffafc8
Binary files /dev/null and b/img/partner-logo-4.png differ
diff --git a/img/partner-logo-5.png b/img/partner-logo-5.png
new file mode 100644
index 0000000..571480f
Binary files /dev/null and b/img/partner-logo-5.png differ
diff --git a/img/picture.png b/img/picture.png
new file mode 100644
index 0000000..5ea3ddc
Binary files /dev/null and b/img/picture.png differ
diff --git a/img/window-2.png b/img/window-2.png
new file mode 100644
index 0000000..1634f39
Binary files /dev/null and b/img/window-2.png differ
diff --git a/img/window.png b/img/window.png
new file mode 100644
index 0000000..7496d48
Binary files /dev/null and b/img/window.png differ
diff --git a/index.html b/index.html
index db36065..0b6a7cd 100644
--- a/index.html
+++ b/index.html
@@ -23,68 +23,79 @@
     <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
   <![endif]-->
 
-  <section>
-    <h1>Code Out This Layout So Flawlessly It'll Make Joel Cry</h1>
-    <a><p>TRY NOW</p></a>
-    <p>* This should all be text</p>
+  <section id="section-1">
+    <h1 class="dark-gray thin">Code Out This Layout So Flawlessly It'll Make Joel Cry</h1>
+    <a><p class="salmon-button">TRY NOW</p></a>
+    <p class="dark-gray tiny">* This should all be text</p>
   </section>
-  <section>
-    <div>
-      <p>JANUARY 28, 2016</p>
-      <h3>And here's a random photo of a dog <span>....</span></h3>
+
+  <section class="medium" id="section-2">
+    <div id="section-2-title">
+      <p class="salmon small">JANUARY 28, 2016</p>
+      <h3 class="dark-gray title">And here's a random photo of a dog <span class="salmon">....</span></h3>
     </div>
-    <div>
-      <picture></picture>
+    <div id="section-2-text" class="tiny">
+      <p class="dark-gray">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec id elit non mi porta gravida at eget metus. Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod. Vestibulum id ligula porta felis euismod semper.</p>
+      <p class="dark-gray">Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur. Donec ullamcorper nulla non metus auctor fringilla. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue.</p>
+    </div>
+    <div id="section-2-img">
+      <picture>
+        <source media="(min-width: 1025px)" srcset="/img/dog-1_md.jpg">
+        <img alt="Random Dog" src="/img/dog-1_sm.jpeg">
+      </picture>
     </div>
   </section>
-  <section>
-    <p>NEW FEATURES</p>
-    <h3>Some Awesome Columns</h3>
+
+  <section class="dark-gray medium" id="section-3">
+    <p class="salmon small">NEW FEATURES</p>
+    <h3 class="title">Some Awesome Columns</h3>
     <div>
       <img>
-      <p>Some awesome features</p>
-      <p>Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue.</p>
+      <p class="small">Some awesome features</p>
+      <p class="tiny">Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue.</p>
     </div>
     <div>
       <img>
-      <p>Some awesome features</p>
-      <p>Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue.</p>
+      <p class="small">Some awesome features</p>
+      <p class="tiny">Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue.</p>
     </div>
     <div>
       <img>
-      <p>Some awesome features</p>
-      <p>Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue.</p>
+      <p class="small">Some awesome features</p>
+      <p class="tiny">Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue.</p>
     </div>
   </section>
-  <section>
+
+  <section class="dark-gray medium" id="section-4">
     <div>
       <picture></picture>
     </div>
     <div>
-      <p>Start ASAP</p>
-      <h3>This is a pretty big project, you know <span>....</span></h3>
-      <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec id elit non mi porta gravida at eget metus. Curabitur blandit tempus porttitor. Etiasem malesuada magn. Vestibulum felis euismod semper.</p>
+      <p class="salmon small">Start ASAP</p>
+      <h3 class="title">This is a pretty big project, you know <span class="salmon">....</span></h3>
+      <p class="tiny">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec id elit non mi porta gravida at eget metus. Curabitur blandit tempus porttitor. Etiasem malesuada magn. Vestibulum felis euismod semper.</p>
     </div>
   </section>
-  <section>
+
+  <section class="white medium tiny" id="section-5">
     <div>
       <div>
         <img>
-        <p>Jonathon Doe</p>
-        <p>Co-Founder</p>
-        <p>“Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec id gravida at eget metus. Etiasem malesuada magn”</p>
+        <p class="small">Jonathon Doe</p>
+        <p class="salmon">Co-Founder</p>
+        <p class="light-italic">“Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec id gravida at eget metus. Etiasem malesuada magn”</p>
       </div>
       <div>
         <img>
-        <p>Jonathon Doe</p>
-        <p>Co-Founder</p>
-        <p>“Pellentesque ornare sem lacinia quam. Donec id elit non mi porta gravida at eget metus. Curabitur blandit tempus porttitor. Etiasem malesuada magn”</p>
+        <p class="small">Jonathon Doe</p>
+        <p class="salmon">Co-Founder</p>
+        <p class="light-italic">“Pellentesque ornare sem lacinia quam. Donec id elit non mi porta gravida at eget metus. Curabitur blandit tempus porttitor. Etiasem malesuada magn”</p>
       </div>
       <div>
         <img>
-        <p>Jonathon Doe</p>
-        <p>Co-Founder</p>
-        <p>“Aenean eu leo quam. Pellentesque ornare sem lacinia qua emere wancerid elit non mi porta gravida at eget metus. Curabitur blandit tempus porttitor. Etiasem malesuada magn”</p>
+        <p class="small">Jonathon Doe</p>
+        <p class="salmon">Co-Founder</p>
+        <p class="light-italic">“Aenean eu leo quam. Pellentesque ornare sem lacinia qua emere wancerid elit non mi porta gravida at eget metus. Curabitur blandit tempus porttitor. Etiasem malesuada magn”</p>
       </div>
     </div>
     <div>
@@ -97,56 +108,59 @@
       </ul>
     </div>
   </section>
-  <section>
+
+  <section class="dark-gray medium" id="section-6">
     <div>
-      <p>SERIOUSLY</p>
-      <h3>So start on this soon.</h3>
-      <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec id elit non mi porta gravida at eget metus. Curabitur blandit tempus porttitor. Etiasem malesuada magn. Vestibulum felis euismod semper.</p>
+      <p class="salmon small">SERIOUSLY</p>
+      <h3 class="title">So start on this soon.</h3>
+      <p class="tiny">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec id elit non mi porta gravida at eget metus. Curabitur blandit tempus porttitor. Etiasem malesuada magn. Vestibulum felis euismod semper.</p>
     </div>
     <div>
       <img>
     </div>
   </section>
-  <section>
-    <p>THIS FORM DOESN'T HAVE TO WORK</p>
-    <h3>But create it anyway. Use the right fields...</h3>
+
+  <section class="white" id="section-7">
+    <p class="salmon medium small">THIS FORM DOESN'T HAVE TO WORK</p>
+    <h3 class="medium title">But create it anyway. Use the right fields...</h3>
     <form>
       <input>
       <input>
       <input>
       <div>
         <img>
-        <p>30 days free trial for all.</p>
+        <p class="small">30 days free trial for all.</p>
       </div>
-      <button>TRY NOW</button>
+      <button class="salmon-button">TRY NOW</button>
     </form>
-    <p>And some small text should go here.</p>
+    <p class="tiny">And some small text should go here.</p>
   </section>
-  <footer>
-    <div>
+
+  <footer class="dark-gray tiny">
+    <div class="medium">
       <p>Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam.</p>
       <p>USA &  CAN: 1-888-123-4567</p>
       <p>Address: 34 Brokel Rd. NY</p>
     </div>
     <div>
-      <ul>Support
+      <ul><span class="medium small">Support</span>
         <li>Help Center</li>
         <li>Get Started</li>
         <li>Contact US</li>
-      </ul>>
+      </ul>
     </div>
     <div>
-      <ul>About US
+      <ul><span class="medium small">About US</span>
         <li>About Us</li>
         <li>Terms of Use</li>
         <li>Privacy Policy</li>
-      </ul>>
+      </ul>
     </div>
     <div>
-      <p>Get Newsletter</p>
+      <p class="medium small">Get Newsletter</p>
       <form>
         <input>
-        <button><img></button>
+        <button class="salmon-button"><img></button>
       </form>
       <ul>
         <li><img></li>