WLCR Exercise

index.html

<div class="container">
  <img src="https://s20.postimg.org/guzgtp9ej/Product_Image_Carousel.jpg" alt="backpack" class="b--body__img">
  <header>
    <a href="#">
      <img src="https://s20.postimg.org/ffxw4z0lp/Logo_2x.png" alt="POLER"></a>
    <a href="#">
      <img src="https://s20.postimg.org/3qtwh01x9/Alt_Logo_2x.png" alt="Camp Vibes Club"></a>
  </header>
  <div class="container--productInfo">
    <section class="b--product">
      <h1>Mountain Rolltop</h1>
      <p>The perfect "do everything" pack. With an adjustable rolltop closure and compression straps, the Mountain Rolltop cinches down to be your compact day-to-day commuter pack, or you can expand it to hold additional layers and gear while out playing in the mountains.</p>
      <a href="#"><i class="fab fa-instagram"></i></a>
      <a href="#"><i class="fab fa-twitter"></i></a>
      <a href="#"><i class="fab fa-facebook"></i></a>
    </section>
    <section class="b--cta">
      <p>Only 17 Left in stock</p>
      <p>Act fast!!</p>
      <span id="timer"> </span>
      <button class="purchase">Buy Now</button>
      <div class="pricing">
        <p>$99</p>
        <p>$40</p>
       </div>
      <p>Limit 3 per customer.</p>
    </section>
  </div>
</div>

script.js

function startTimer(duration, display) {
    var timer = duration, hours, minutes, seconds;
    setInterval(function () {
    		hours   = parseInt(timer / 3600, 10)
        minutes = parseInt((timer / 60) % 60, 10)
        seconds = parseInt(timer % 60, 10);
        
				hours		=	hours 	< 10 ? "0" + hours	 : hours;
        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;

        display.textContent = hours + ":" +  minutes + ":" + seconds;

        if (--timer < 0) {
            timer = duration;
        }
    }, 1000);
}

window.onload = function () {
    var twoHours = 60 * 60 * 2,
        display = document.querySelector('#timer');
    startTimer(twoHours, display);
};

style.scss

@import url('https://fonts.googleapis.com/css?family=Lato:300,400,900');

$background: #e3e1e5;
$font-stack: 'Lato', sans-serif;


body {
  box-sizing: border-box;
  background-color: $background;
  font-family: $font-stack;
  font-size: 1rem;
  line-height: 1.5em;
}

.container {
  position: relative;
}
  
.b--body__img {
  height: 100%;
  width: 100%;
}
 
header {
  display: flex;
  justify-content: space-between;
}

header a {
  &:first-of-type img {
    width: 120px;
    height: 39px;
    position: absolute;
    top: 0;
    padding-top: 32px;
    padding-left: 32px;
  }

  &:nth-of-type(2) img {
    width: 214px;
    height: 38px; 
    position: absolute;
    top: 0;
    right: 0;
    padding-top: 32px;
    padding-right: 32px;
  } 
}

.container--productInfo {
  display: flex;
  justify-content: space-between;
  position: absolute;
  top: 35%;
}

.b--product { 
  max-width: 35%;
  padding-left: 32px;
  background-color: rgba(255, 255, 255, 0.2);
  height: 14rem;
  padding: 88px 40px;
  
  h1 {
  font-size: 3rem;
  font-weight: 900;
  padding-bottom: 40px;
  }
  
  p {
    padding-bottom: 40px;
  }
  
  a {
    margin-right: 0.5rem;
    text-decoration: none;
  }
  
}

.b--cta {
  width: 30%;
  padding-right: 56px;
  background-color: rgba(255, 255, 255, 0.2);
  height: 25rem;
  display: grid;
  
  
  p:nth-of-type(-n + 2) {
    font-weight: 300;
    color: #d4432f;
    margin: auto;
  }
  
  .pricing {
    display: grid;
    grid-template-columns: 1fr 1fr;
  
  
    p:nth-of-type(1) {
      font-size: 36px;
      display: inline-block;
      font-weight: 300;
      grid-row: 2;
      justify-self: start;
      
    }
  
    p:nth-of-type(2) {
      font-size: 48px;
      display: inline-block;
      font-weight: 300;
      grid-row: 2;
      justify-self: end;
    }
   }
  
  p:last-child {
    font-weight: 300;
    font-size: 18px;
    display: block;
    margin: auto;
  }
  
  .purchase {
    border: none;
    background-color: #d4432f;
    color: #fff;
    font-size: 28px;
    font-weight: 900;
    text-transform: uppercase;
    width: 11.25rem;
    height: 4rem;
    display: block;
    margin: auto;
  }
  
  span {
    font-size: 3.75rem;
    font-weight: 900;
    display: block;
    margin: auto;
  }
  
  
}

wlcr-exercise.markdown

WLCR Exercise

A Pen by Marco Wright on CodePen.

License.