A Pen by Zaki Wasik.

index.html

<header class="row">
  <div class="container row">
  <div class="logo offset-1 col-2"><img src="https://dl.dropboxusercontent.com/u/706446/_linked%20stuff/rwd%20undervisning/site/logo_zoup.svg" alt="" /></div>
  <p class="tagline col-5 offset-3">
    "Zoup Brings You Delicious Hot Soup Over The Wire"
  </p>
  </div>
  <div class="row">
    <ul class="nav col-8 offset-3">
      <li><a href="#">Home</a></li>
      <li><a href="#">Recipes</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#"><button>Get Zoup'D!</button></a></li>
    </ul>
  </div>
</header>
<div class="main">
  <section class="introduction">
    <div class="row">
      <div class="col-8 offset-2">
        <p>Now you can have your soup over the internet! You can buy-as-you-go or choose one of our subscription plans. It’s delicios!</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Illi enim inter se dissentiunt. Quid est, quod ab ea absolvi et perfici debeat? Non modo carum sibi quemque, verum etiam vehementer carum esse? Ita prorsus, inquam; Tu vero, inquam, ducas licet, si sequetur; Quo igitur, inquit, modo? 
        Animum autem reliquis rebus ita perfecit, ut corpus; Utinam quidem dicerent alium alio beatiorem! Iam ruinas videres. Tecum optime, deinde etiam cum mediocri amico. Uterque enim </p>
      </div>
    </div>
    
  </section>
  <section class="how">
    <ul class="how-to-steps row">
      <li class="col-2 offset-2">
        <img src="https://dl.dropboxusercontent.com/u/706446/_linked%20stuff/rwd%20undervisning/site/pay.svg" alt="Pay" />
        <h2>1. Pay</h2>
      </li>
      <li class="col-2 offset-1">
        <img src="https://dl.dropboxusercontent.com/u/706446/_linked%20stuff/rwd%20undervisning/site/download.svg" alt="Download" />
        <h2>2. Download</h2>
      </li>
      <li class="col-2 offset-1">
        <img src="https://dl.dropboxusercontent.com/u/706446/_linked%20stuff/rwd%20undervisning/site/eat.svg" alt="Eat" />
        <h2>3. Eat</h2>
      </li>
    </ul>
  </section>
  <section class="plans row">
    <div class="month col-4">
      <h2>Monthly Boozt</h2>
      <p class="quote">"I like hot soup in the winther"</p>
      <p class="price">$60<small>/month</small></p>
      <ul class="features">
        <li>Unlimited soup for a month</li>
        <li>Meet soup enthusiasts online</li>
      </ul>
      <button class="pink">Uhhhm! I'm in!</button>
    </div>
    <div class="year col-4">
      <h2>The Prepper</h2>
      <p class="quote">"I admit it, I'm addicted!"</p>
      <p class="price">$650<small>/year</small></p>
      <ul class="features">
        <li>Unlimited soup for a year</li>
        <li>Meet online soup enthusiasts</li>
        <li>Build your own soup-loving action figure</li>
      </ul>
      <button class="purple">Best Value!</button>
    </div>
    <div class="to-go col-4">
      <h2>The Go-Getter</h2>
      <p class="quote">"I've got commitment issues"</p>
      <p class="price">$5<small>/month</small></p>
      <ul class="features">
        <li>Buy one soup</li>
        <li>No commitments</li>
      </ul>
      <button class="grey">Feed me now!</button>
    </div>
  </section>
  <section class="slider">
    <img src="https://dl.dropboxusercontent.com/u/706446/_linked%20stuff/rwd%20undervisning/site/soup_1024w.jpg" alt="Nice soup!" />
  </section>
</div>
<footer>
  <p class="copyright">©2014 Zoup  Company</p>
</footer>

RWD-Lesson-4.markdown

RWD Lesson 4

Task: Replace the fixed-width grid from lesson 3 with a fluid-width grid.

A Pen by Zaki Wasik on CodePen.

License.

script.js

/*

Steps:
1. Change body width to max-width: 1440px
2. change the col- loop:
    percentage( ( 1 / $columns ) * $i )
3. change the offset- loop (similar)
*/

style.scss

/* Colors */
$hot-pink: #f20ca2;
$superiour-purple: #a314ef;
$light-grey: #a6a6a6;
$dark-grey: #727372;
$black: #232323;
$white: #f2f2f2;

ul.nav, ul.how-to-steps {
  list-style-type: none;
  padding: 0;
  li {
    display: inline-block;
  }
}
html {
  box-sizing: border-box;
}
a {
  color: inherit;
  text-decoration: none;
}
a:hover {
  color: $light-grey;
}
body, p {
  font-family: 'Open Sans Condensed', sans-serif;
}
body {
  background-color: $white;
}
h1, h2, h3, h4, h5 {
  font-family: 'Luckiest Guy', sans-serif;  
}
ul.nav li {
  font-family: 'Luckiest Guy', sans-serif; 
}
button {
  margin: 1em;
  padding: 0.8em;
  padding-bottom: 0.5em;
  background: none;
  border: 3px solid $black;
  border-radius: 1em;
  font-size: 1.3em;
  font-family: 'Luckiest Guy', sans-serif;
  &.pink {
    color: $white;
    border: 3px solid $white;
    background-color: $hot-pink;
  }
  &.purple {
    color: $white;
    border: 3px solid $white;
    background-color: $superiour-purple;
  }
  &.grey {
    color: $white;
    border: 3px solid $white;
    background-color: $light-grey;
  }
}
header {
  background-color: $hot-pink;
  color: $white;
  padding-top: 2em;
  
  .logo {
    float: left;
  }
  .tagline {
    float: left;
    text-align: right;
    font-family: 'Luckiest Guy', sans-serif;
    font-size: 2em;
  }
  .nav {
    font-size: 1.3em;
    text-align: right;
    li {
      padding-right: 1em;
    }
    li:last-child {
      padding-right: 0;
    }
    
    button {
      color: $white;
      margin: 0;
      border: 3px solid $white;
    }
  }
}
section.introduction {
  color: $black;
  padding: 2em 0 2em 0;
}
section.how {
  padding: 2em 0 2em 0;
  background-color: $superiour-purple;
  color: $white;
  text-align: center;
}
section.plans {
  text-align: center;
  color: $white;
  
  > div {
    min-height: 380px;
    padding-top: 4em;
    padding-bottom: 2em;
  }
  
  p.price {
    font-family: 'Luckiest Guy', sans-serif;
    font-size: 2em;
    small {
       font-family: 'Open Sans Condensed', sans-serif;
      font-size: 0.4em;
    }
  }
  
  ul {
    text-align: left;
    width: 50%;
    margin-left: auto;
    margin-right: auto;
  }
  
  .month {
    background-color: $light-grey;
  }
  .year {
    background: $black;
  }
  .to-go {
    background-color: $dark-grey;
  }
}
section.slider {
  
}
footer {
  background-color: $black;
  color: $hot-pink;
  padding: 2em;
  margin-top: -4px;
  
  p.copyright {
    text-align: center;
  }
}

/* Lesson 2: Fluid-width grid */

$width: 960px;
$columns: 12;

body {
  width: $width;
}

img {
  max-width: 100%;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

[class*="col-"] {
  float: left;
}

@for $i from 1 through $columns {
  .col-#{$i} {
    width: $width/$columns * $i;
  }
  .offset-#{$i} {
    margin-left: $width/$columns * $i;
  }
}