uploaded images, styled first two sections

mdr19002 · May 8, 2020 · 5ff4f8c · 5ff4f8c
1 parent 28853ae
commit 5ff4f8c
Show file tree

Hide file tree

Showing 23 changed files with 215 additions and 51 deletions.
diff --git 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
diff --git a/img/bg-1_lg.jpeg b/img/bg-1_lg.jpeg
diff --git a/img/bg-1_md.jpeg b/img/bg-1_md.jpeg
diff --git a/img/bg-1_sm.jpeg b/img/bg-1_sm.jpeg
diff --git a/img/bg-1_xl.jpeg b/img/bg-1_xl.jpeg
diff --git a/img/bg-2_lg.jpg b/img/bg-2_lg.jpg
diff --git a/img/bg-2_md.jpeg b/img/bg-2_md.jpeg
diff --git a/img/bg-2_sm.jpeg b/img/bg-2_sm.jpeg
diff --git a/img/bulb.png b/img/bulb.png
diff --git a/img/dog-1_md.jpg b/img/dog-1_md.jpg
diff --git a/img/dog-1_sm.jpeg b/img/dog-1_sm.jpeg
diff --git a/img/dog-2_md.jpg b/img/dog-2_md.jpg
diff --git a/img/dog-2_sm.jpeg b/img/dog-2_sm.jpeg
diff --git a/img/partner-logo-1.png b/img/partner-logo-1.png
diff --git a/img/partner-logo-2.png b/img/partner-logo-2.png
diff --git a/img/partner-logo-3.png b/img/partner-logo-3.png
diff --git a/img/partner-logo-4.png b/img/partner-logo-4.png
diff --git a/img/partner-logo-5.png b/img/partner-logo-5.png
diff --git a/img/picture.png b/img/picture.png
diff --git a/img/window-2.png b/img/window-2.png
diff --git a/img/window.png b/img/window.png
diff --git 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>