JamesTheHacker/grid.scss

## grid.scss
@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap/variables";
@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins";
@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap/grid";
@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap/responsive-utilities";

.row {
  @include make-row();
}

#content {
  @include container-fixed;
}

#promo-header {
  @include make-sm-column(12);
}

#subscribe {
  @include make-sm-column(12);
}

#video {
  @include make-sm-column(12);
}

#factoid {
  @include make-sm-column(12);
}

## index.html
<!doctype html>
<html class="no-js" lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">

    <title></title>

    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/app.css" />
  </head>
  <body>
    <!--[if lte IE 9]>
      <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]-->

    <div id="content">
      <div class="row">
        <div id="promo-header">
            <img width="100%" src="/images/promo.jpg">
        </div>

        <div id="subscribe">
          <h2>To claim your coupon simply fill in the following details</h2>
          <form name="subscribe">
            <div>
              <label>Firstname</label>
              <input type="text" name="firstname" />
            </div>

            <div>
              <label>Surname</label>
              <input type="text" name="surname" />
            </div>

            <div>
              <label>Email</label>
              <input type="text" name="email" />
            </div>

            <div>
              <label>Telephone</label>
              <input type="text" name="telephone" />
            </div>

            <div>
              <label>Postcode</label>
              <input type="text" name="postcode" />
            </div>

            <div>
              <label>Have you seen this product on TV?</label>
              <select name="question">
                <option value>Please Select</option>
                <option value="Y">Yes</option>
                <option value="N">No</option>
              </select>
            </div>

            <button class="btn">Get Your Coupon</button>
            <small>Please note: Only one coupon available per person and only one email address allowed per person. Coupon valid 02.10.17 - 31.03.18. Redeemable by UK residents 18+ only in participating stores only.</small>
          </form>
        </div>

        <div id="video">
          <div id="video-container">
            <iframe src="https://www.youtube.com/embed/ZZa7Kgo0apA" frameborder="0" allowfullscreen></iframe>
          </div>
          <div id="description">
            <h2>Princes Tuna New York Deli Fillers with Sweet Potato</h2>
            <p>Would you like to try this quick and easy lunch?</p>
          </div>
        </div>

        <div id="factoid">
          <h2>Celebrity dietician Lucy Jones and Princes are working together to show families how they can eat well with canned fish.</h2>
          <p>Did you know our Tunner fillers are:</p>
          <ul>
            <li>High in protein</li>
            <li>Low in saturated fat</li>
            <li>A quick and easy lunch</li>
          </ul>
          <a href="#" class="btn">Learn More</a>
        </div>
      </div>
    </div>

    <script src="app.js"></script>
    <script>
      window.ga=function(){ga.q.push(arguments)};ga.q=[];ga.l=+new Date;
      ga('create','UA-XXXXX-Y','auto');ga('send','pageview')
    </script>
    <script src="https://www.google-analytics.com/analytics.js" async defer></script>
  </body>
</html>
	@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap/variables";
	@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins";
	@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap/grid";
	@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap/responsive-utilities";

	.row {
	@include make-row();
	}

	#content {
	@include container-fixed;
	}

	#promo-header {
	@include make-sm-column(12);
	}

	#subscribe {
	@include make-sm-column(12);
	}

	#video {
	@include make-sm-column(12);
	}

	#factoid {
	@include make-sm-column(12);
	}
	<!doctype html>
	<html class="no-js" lang="">
	<head>
	<meta charset="utf-8">
	<meta http-equiv="x-ua-compatible" content="ie=edge">

	<title></title>

	<meta name="description" content="">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="/app.css" />
	</head>
	<body>
	<!--[if lte IE 9]>
	<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]-->

	<div id="content">
	<div class="row">
	<div id="promo-header">
	<img width="100%" src="/images/promo.jpg">
	</div>

	<div id="subscribe">
	<h2>To claim your coupon simply fill in the following details</h2>
	<form name="subscribe">
	<div>
	<label>Firstname</label>
	<input type="text" name="firstname" />
	</div>

	<div>
	<label>Surname</label>
	<input type="text" name="surname" />
	</div>

	<div>
	<label>Email</label>
	<input type="text" name="email" />
	</div>

	<div>
	<label>Telephone</label>
	<input type="text" name="telephone" />
	</div>

	<div>
	<label>Postcode</label>
	<input type="text" name="postcode" />
	</div>

	<div>
	<label>Have you seen this product on TV?</label>
	<select name="question">
	<option value>Please Select</option>
	<option value="Y">Yes</option>
	<option value="N">No</option>
	</select>
	</div>

	<button class="btn">Get Your Coupon</button>
	<small>Please note: Only one coupon available per person and only one email address allowed per person. Coupon valid 02.10.17 - 31.03.18. Redeemable by UK residents 18+ only in participating stores only.</small>
	</form>
	</div>

	<div id="video">
	<div id="video-container">
	<iframe src="https://www.youtube.com/embed/ZZa7Kgo0apA" frameborder="0" allowfullscreen></iframe>
	</div>
	<div id="description">
	<h2>Princes Tuna New York Deli Fillers with Sweet Potato</h2>
	<p>Would you like to try this quick and easy lunch?</p>
	</div>
	</div>

	<div id="factoid">
	<h2>Celebrity dietician Lucy Jones and Princes are working together to show families how they can eat well with canned fish.</h2>
	<p>Did you know our Tunner fillers are:</p>
	<ul>
	<li>High in protein</li>
	<li>Low in saturated fat</li>
	<li>A quick and easy lunch</li>
	</ul>
	<a href="#" class="btn">Learn More</a>
	</div>
	</div>
	</div>

	<script src="app.js"></script>
	<script>
	window.ga=function(){ga.q.push(arguments)};ga.q=[];ga.l=+new Date;
	ga('create','UA-XXXXX-Y','auto');ga('send','pageview')
	</script>
	<script src="https://www.google-analytics.com/analytics.js" async defer></script>
	</body>
	</html>