<section class="num1">
  <h1>
    <span class="inner">
      Welcome to<br/>
      <span>Bonnie Scotland</span>
    </span>
  </h1>
</section>

<section class="num2">
  <div class="container">
    <p class="entypo-address">This picture was taken at the roadside of the road from <a href="https://goo.gl/maps/uiJAK">Inverness to Kyleakin</a> (Isle of Skye).</p>
  </div>
</section>

<section class="num3">
  <h1>
    <span class="inner">
      <span>Skye Bridge</span>
      <br/>At Sunset</span>
  </h1>
</section>

<section class="num4">
  <div class="container">
    <p class="entypo-light-down">Seeing the sun set in the sea behind the Skye Bridge at <a href="https://goo.gl/maps/BT8tn">Kyleakin</a> is a magical moment.</p>
  </div>
</section>

<section class="num5">
  <h1>
    <span class="inner">
      Hostel View at<br/>
      <span>Pitlochry</span>
    </span>
  </h1>
</section>

<section class="num6">
  <div class="container">
    <p class="entypo-heart-empty">Pitlochry is a very small and cozy town. The view from the <a href="https://goo.gl/maps/VORq9">hostel's</a> windowsill is fantastic because of the nearby pub.</p>
  </div>
</section>

<section class="num7">
  <h1>
    <span class="inner">
      Welcome at<br/>
      <span>Edradour Distillery</span>
    </span>
  </h1>
</section>

<section class="num8">
  <div class="container">
    <p class="entypo-map">If you're ever in the neighbourhood, check out Edradour <a href="https://goo.gl/maps/Dchte">Distillery</a>.</p>
  </div>
</section>

<section class="num9">
  <h1>
    <span class="inner">
      <span>Taste</span> of <span>Scotland</span>
    </span>
  </h1>
</section>

<section class="num10">
  <div class="container">
    <p class="entypo-water">The Scottish people are very hospitable and friendly. And they make the BEST whisky.</p>
  </div>
</section>

<section class="num11">
  <h1>
    <span class="inner">
      Go see<br/>
      <span>Hamish</span>
    </span>
  </h1>
</section>

<section class="num12">
  <div class="container">
    <p class="entypo-leaf top"><a href="https://goo.gl/maps/ak0Zr">Just go.</a> And see Hamish. He's a good guy.</p>
  </div>
</section>

<section class="num13">
  <h1>
    <span class="inner">
      <span>Castles</span>
      <br/>all over the place!
    </span>
  </h1>
</section>

<section class="num14">
  <div class="container">
    <p class="entypo-picture">If you happen to be around Inverness, stop at Urquheart Castle. Even if it's just for <a href="https://goo.gl/maps/FJ03f">the view</a> at Loch Ness.</p>
  </div>
</section>

<section class="num15">
  <h1>
    <span class="inner">
      <span>Talisker</span>
      <br/>distillery
    </span>
  </h1>
</section>

<section class="num16">
  <div class="container">
    <p class="entypo-droplet">When driving around on Skye, make sure to make a stop at the Talisker distillery. They have <a href="https://goo.gl/maps/EGTdJ">an amazing tour</a>!</p>
  </div>
</section>

<section class="num17">
  <h1>
    <span class="inner">
      Hidden<br/>
      <span>Fairy Magic</span>
    </span>
  </h1>
</section>

<section class="num18">
  <div class="container">
    <p class="entypo-feather">Want to see a place where you can feel the magic? Go to Fairy Glen. Hard to <a href="https://goo.gl/maps/Qes7g">find</a>, but worth the effort.</p>
  </div>
</section>

<section class="num19">
  <h1>
    <span class="inner">
      But always keep an eye on the <span>weather</span>
    </span>
  </h1>
</section>
@import 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/5175/utf-latest.min.css';
@import "https://fonts.googleapis.com/css?family=Bitter:700|Source+Sans+Pro:200";
@import url(http://weloveiconfonts.com/api/?family=entypo);

/* zocial */
[class*="entypo-"]:before {
  font-family: 'entypo', sans-serif;
  color: rgba(255, 255, 255, 0.5);
  font-size: 2em;
  line-height: 1;
  float: left;
  display: block;
  margin: .25em .75em .5em .25em;
}
.top:before { margin-top: 0; }

body {
  font: 700 2em/1.5 Bitter, serif;
  color: #ecf0f1;
  overflow-x: hidden;
}
section {
  position: absolute;
  width: 100%;
  height: 100%;
  display: table;
  background: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7") no-repeat center transparent fixed;
  background-size: cover;
}
.container,
h1 {
  margin: 0 auto;
  display: table-cell;
  vertical-align: middle;
  width: 92%;
  max-width: 56rem;
}
h1 {
  font: 200 2em/1 "Source Sans Pro", sans-serif;
  text-align: center;
  text-shadow: 1px 1px 0 #666;
}
.inner {
  background: rgba(255, 255, 255, 0.3);
  display: block;
  max-width: 56rem;
  margin: 0 auto;
  padding: .25em 0;
  border-radius: .0675em;
}
.inner span {
  font: 1.125em/1 "Bitter", sans-serif;
}
p {
  display: block;
  margin: 0 auto;
  max-width: 56rem;
}
a {
  color: rgba(255, 255, 255, .5);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, .5);
}
a:hover {
  color: #fff;
}
.num1 {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/5175/highlands-railway.jpg); }
.num2 { background-color: #12599B; }
.num3 { background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/5175/skye-bridge.jpg); }
.num4 { background-color: #f39c12; }
.num5 { background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/5175/hostel-view.jpg); }
.num6 { background-color: #e74c3c; }
.num7 { background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/5175/edradour-welcome.jpg); }
.num8 { background-color: #c0392b; }
.num9 { background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/5175/edradour-barrel.jpg); }
.num10 { background-color: #626A50 }
.num11 { background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/5175/hamish.jpg); }
.num12 { background-color: #2980b9; }
.num13 { background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/5175/urquheart.jpg); }
.num14 { background-color: #8e44ad; }
.num15 { background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/5175/talisker.jpg); }
.num16 { background-color: #7f8c8d; }
.num17 { background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/5175/fairy-glenn.jpg); }
.num18 { background-color: #16a085; }
.num19 { background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/5175/mountains.jpg); }
(function () {
  var sections = document.getElementsByTagName("section");
  
  for (var i = 0; i < sections.length; i += 1) {
    sections[i].style.top = 100 * i + "%";
  }
  
})();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.