Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="page-menu-bar">
  <ul class="res-menu">
    <li class="res-menu-link"><a href="#about">ABOUT</a></li>
    <li class="res-menu-link"><a href="#services">SERVICES</a></li>
    <li class="res-menu-link"><a href="#products">PRODUCTS</a></li>
    <li class="res-menu-link"><a href="#contact">CONTACT</a></li>
  </ul>
  <ul class="page-menu">
    <li class="menu-link"><a class="link-a" href="#about">ABOUT</a></li>
    <li class="menu-link"><a class="link-b" href="#services">SERVICES</a></li>
    <li class="menu-link"><a class="link-c" href="#products">PRODUCTS</a></li>
    <li class="menu-link"><a class="link-d" href="#contact">CONTACT</a></li>
  </ul>
  <div class="res-menu-button">
    &equiv;
  </div>
</div>
<div class="pre-title">
  <div class="pre-title-line"></div>
  <div class="pre-title-text">
    KEIRAVILLE
  </div>
  <div class="pre-title-line"></div>
</div>
<h1>CUT &#8216;N&#8217; CURL</h1>
<h2>WOLLONGONG HAIR SALON</h2>
<div class="about-wrapper" id="about">
  <img src="http://i57.tinypic.com/2ni62ic.png" style="position: absolute; bottom: -40px; left: 0;">
<div class="about">
  <h3>Who We Are <span class="pink">&rhard;</span></h3>
  <p class="featured-text pink">
    Established in the 1960’s, Keiraville Cut ’n’ Curl has grown to be a professional, personalised, friendly salon that listens to the needs of all our clients.
  </p>
  <p>Our passion, for the whole family’s hairdressing needs, is achieved through our continuous training, as well as sourcing the best professional products to keep your hair looking and feeling great at all times.</p>
  <p>You will love our friendly professional team who strive to create the look you are after. With years of experience in the industry we pride ourselves on our high standards in everything we do and really focus on the important issue which is listening to you and what you want with your hair.</p>
</div><!--
--><img class="about-img" src="http://gyazo.com/f459d000338e201d11502c8e8dab2865.png">
</div>
<div class="service-bg-wrapper">
<div class="services-wrapper" id="services">
  <img src="http://i57.tinypic.com/2ni62ic.png" style="position: absolute; bottom: -40px; left: 33%;">
  <h3>What We Do <span class="pink">&rhard;</span></h3>
  <h4>STYLING <span class="pink">&amp;</span> CUTTING<div class="toggle-service">&Uarr;</div></h4>
  <p>Lay back and enjoy a relaxing shampoo, conditioning treatment and massage. We will assist you with a new style cut to suit you and your lifestyle. (Don’t be afraid to bring the picture of a new style or colour you desire, as a picture paints a 1000 words.)</p>
  <h4>COLOURING<div class="toggle-service">&Uarr;</div></h4>
  <p>Our colour choices are extensive over all ranges of the professional colour spectrum including- Permanent, Full Coverage to Demi Colours as well as all techniques such as Foil Highlights, Splicing, Base Colours, Full Head Lightening and Vibrant Fashion Colours.</p>
  <h4>PERMANENT WAVES<div class="toggle-service">&Uarr;</div></h4>
  <p>For the person who still wants curls, movement and bounce, give us a call so we can discuss your options.</p>
  <h4>BLOW-WAVING <span class="pink">&amp;</span> FORMAL STYLING<div class="toggle-service">&Uarr;</div></h4>
  <p>Whether you have a special occasion or you need time pampering yourself, we offer a fun relaxed atmosphere where you can get a stylish blow-wave or a glamorous up-do for that evening out.</p>
  <h4>TREATMENTS<div class="toggle-service">&Uarr;</div></h4>
  <p>We have a variety of treatments for both in salon or take home to keep your hair looking and feeling healthy. These specialised treatments will lock in your colour while nourishing and strengthening hair, giving it that extra shine and bounce we all love.</p>
</div>
</div>
<div class="products-wrapper" id="products">
  <img src="http://i57.tinypic.com/2ni62ic.png" style="position: absolute; bottom: -40px; left: 66%;">
  <h3>What We Use <span class="pink">&rhard;</span></h3>
  <div class="product">
    <img src="http://i62.tinypic.com/2ziab6e.jpg">
    <p>If you have tried the Morrocanoil Treatment Oil (it’s super food for your hair), you will love all the new additions like the Extra Volume Shampoo and Conditioner that will inject body and bounce to the finest hair. We are one of the few salons in the Illawarra that stocks the entire Retail Range.</p>
  </div><!--
--><div class="product">
    <img src="http://i58.tinypic.com/29n7bdy.jpg">
    <p>Evo’s Retail Ranges have luxurious products that are sulphate, paraben, dea, tea and propylene free that give professional results while respecting the environment. The products in this range, we couldn’t live without, are the amazing haze styling powder (great for adding volume when you are suffering from the flop) and the water killer dry shampoo (get that clean, bouncy hair that feels and smells fresh again with just a quick spray).</p>
</div><!--
--><div class="product">
    <img src="http://i61.tinypic.com/qowrqu.jpg">
    <p>In today’s environmentally conscious age, Jeval Hair Colour focuses on blending technology with ecology. This results in hair colour that delivers absolute respect for your hair and the environment. The natural botanical plant base is kind and gentle to the hair and scalp, also ensuring longer lasting, rich shiny colours. With 108 colours to choose from, the combinations are only limited to your imagination.</p>
</div>
</div>
<div class="contact-wrapper" id="contact">
  <h3>Get in Touch <span class="pink">&rhard;</span></h3>
  <div class="contact-form">
    <form>
      <input type="text" placeholder="Name">
      <input type="text" placeholder="Email">
      <input type="text" placeholder="Phone">
      <textarea placeholder="Message"></textarea>
      <input class="form-submit" type="submit" value="Send Message">
    </form>
  </div><!--
--><div class="contact-side">
    <p>Keiraville Cut ‘n’ Curl is located at Shop 3/213 Gipps Road, Keiraville, a short 5 minute drive from Wollongong’s CBD and a short walk from the University of Wollongong, with plenty of convenient FREE parking.</p>
  <p><span class="pink">Phone:</span> 02-42298947<br>
    <span class="pink">Email: </span><a href="mailto:cutncurl@bigpond.net.au">cutncurl@bigpond.net.au</a></p>
  <p class="hours-heading">Trading Hours &profalar; </p>
  <p>MON: 9a-5p<br>
  TUE: 9a-3p<br>
  WED: 9a-5p<br>
  THU: 9a-5p<br>
  FRI: 9a-5p<br>
  SAT: 8a-12p</p>
  </div>
</div>

              
            
!

CSS

              
                html, body {
  background: #222;
  text-align: center;
  min-height: 2000px;
}

a {
  color: pink;
}

.pink {
  color: pink;
}

h1 {
  text-align: center;
  font-size: 180px;
  color: white;
  font-family: 'Raleway', sans-serif;
  font-weight: 100;
  padding: 40px;
  @media only screen and (max-width: 1240px) {
      font-size: 140px;
    }
  @media only screen and (max-width: 980px) {
      font-size: 100px;
    }
  @media only screen and (max-width: 724px) {
      font-size: 80px;
    }
  @media only screen and (max-width: 600px) {
      font-size: 60px;
    }
  @media only screen and (max-width: 600px) {
      font-size: 43px;
      padding: 20px;
    }
}

h2 {
  text-align: center;
  font-size: 36px;
  color: pink;
  font-family: 'Raleway', sans-serif;
  font-weight: 300;
  letter-spacing: 24px;
  padding-bottom: 20px;
  padding-top: 20px;
  @media only screen and (max-width: 1000px) {
      font-size: 24px;
    }
  @media only screen and (max-width: 840px) {
      font-size: 18px;
    font-weight: 400;
    letter-spacing: 12px;
    }
    @media only screen and (max-width: 610px) {
      font-size: 16px;
    font-weight: 400;
    letter-spacing: 6px;
    }
}

.pre-title {
  padding-top: 120px;
  display: block;
  text-align: center;
  .pre-title-text {
    color: white;
    vertical-align: middle;
    font-size: 64px;
    letter-spacing: 15px;
    font-family: 'Raleway', sans-serif;
    font-weight: 100;
    display: inline-block;
    @media only screen and (max-width: 768px) {
      font-size: 42px;
    }
    @media only screen and (max-width: 600px) {
      font-size: 30px;
    }
    @media only screen and (max-width: 400px) {
      font-size: 18px;
      font-weight: 400;
    }
  }
  .pre-title-line {
    display: inline-block;
    vertical-align: middle;
    height: 1px;
    width: 200px;
    background: pink;
    @media only screen and (max-width: 920px) {
      width: 100px;
    }
    @media only screen and (max-width: 600px) {
      width: 30px;
    }
  }
}

h3 {
  font-family: 'Raleway', sans-serif;
  color: white;
  text-align: left;
  font-weight: 400;
  font-size: 32px;
  margin-bottom: 40px;
  @media only screen and (max-width: 1140px) {
      padding: 20px;
    }
}

.about h3 {
  @media only screen and (max-width: 1140px) {
      padding: 0;
    }
}

.page-menu-bar {
  .page-menu {
    @media only screen and (max-width: 768px) {
      display: none;
    }
  }
  background: #222;
  @media only screen and (max-width: 768px) {
      background: none;
    }
  display: block;
  width: 100%;
  position: fixed;
  z-index: 9999;
  li {
    display: inline-block;
    margin: 20px 40px 16px 40px;
    a {
      color: #999;
      text-decoration: none;
      font-family: 'Raleway', sans-serif;
      font-weight: 300;
      font-size: 20px;
      &:hover {
        color: white;
      }
    }
    .selected {
      font-weight: 400;
      color: pink;
    }
  }
}

.res-menu-button {
  text-align: right;
  color: #999;
  &:hover {
    color: white;
  }
  cursor: pointer;
  padding-right: 20px;
  font-size: 56px;
  display: none;
  @media only screen and (max-width: 768px) {
      display: block;
    }
}

.res-menu {
  display: none;
  li {
    display: block;
    padding: 0;
    margin: 0;
    a {
      display: block;
      padding: 16px;
      background: #222;
      border-bottom: 1px solid #333;
      color: white;
      &:hover {
        color: pink;
      }
    }
  }
}

.about {
  margin-top: 40px;
  margin-bottom: 40px;
  display: inline-block;
  text-align: left;
  margin-right: 60px;
  @media only screen and (min-width: 1141px) {
      width: 684px;
    }
  @media only screen and (max-width: 1140px) and (min-width: 769px) {
      width: 60%;
    }
  @media only screen and (max-width: 768px) {
      display: block;
      padding: 20px;
      margin-right: 0;
    }
  .featured-text {
    font-family: Georgia, serif;
    font-weight: bold;
    font-style: italic;
    color: pink;
  }
  p {
    display: block;
    color: white;
    font-family: 'Raleway', sans-serif;
    line-height: 1.5;
    font-size: 18px;
    text-align: justify;
    margin-bottom: 20px;
  }
}

.about-wrapper {
  padding-top: 40px;
  border-bottom: 3px dashed #333;
  margin: 0 auto;
  @media only screen and (min-width: 1141px) {
      width: 1140px;
    }
  @media only screen and (max-width: 1140px) {
      display: block;
    }
  position: relative;
}

.about-img {
  display: inline-block;
  vertical-align: top;
  border-radius: 50%;
  @media only screen and (min-width: 1141px) {
      width: 394px;
    }
  @media only screen and (max-width: 1140px) {
      width: 30%;
    }
  @media only screen and (max-width: 768px) {
      display: none;
    }
  margin-top: 40px;
  margin-bottom: 40px;
}

.service-bg-wrapper {
    background-image: url('http://i58.tinypic.com/rk9bvl.jpg');
  background-size: cover;
  margin-bottom: -3px;
}

.services-wrapper {
  text-align: left;
  position: relative;
  padding-top: 80px;
  margin: 0 auto;
    @media only screen and (min-width: 1141px) {
      width: 1140px;
    }
  @media only screen and (max-width: 1140px) {
      display: block;
    }
  padding-bottom: 60px;
  border-bottom: 3px dashed #333;
  p {
    display: block;
    vertical-align: top;
    font-family: 'Raleway', sans-serif;
    color: white;
    font-weight: 200;
    font-size: 20px;
    line-height: 1.5;
    padding: 20px 20px 20px 20px;
  }
}

h4 {
  display: block;
  background: #111;
  border-bottom: 1px solid pink;
  color: white;
  text-align: left;
  padding: 20px;
  font-family: 'Raleway', sans-serif;
  font-size: 24px;
  margin: 20px 0;
}

.toggle-service {
  float: right;
  color: white;
  cursor: pointer;
}

.contact-wrapper {
  text-align: left;
    @media only screen and (min-width: 1141px) {
      width: 1140px;
    }
  @media only screen and (max-width: 1140px) {
      display: block;
    }
  margin: 0 auto;
  padding-top: 60px;
  padding-bottom: 100px;
  .contact-form {
    @media only screen and (min-width: 1141px) {
      width: 684px;
    }
    @media only screen and (max-width: 1140px) and (min-width: 961px){
      width: 58%;
      padding: 20px;
    }
    @media only screen and (max-width: 960px) {
      display: block;
      padding: 20px;
    }
    margin-right: 60px;
    display: inline-block;
    vertical-align: top;
    input {
      display: block;
      width: 90%;
      @media only screen and (max-width: 960px) {
        display: block;
        width: 100%;
      }
      padding: 16px;
      background: none;
      color: #777;
      border: 1px solid #777;
      font-family: 'Raleway', sans-serif;
      font-size: 21px;
      margin-bottom: 20px;
    }
    textarea {
      display: block;
      width: 90%;
      @media only screen and (max-width: 960px) {
        display: block;
        width: 100%;
      }
      padding: 16px;
      background: none;
      color: #777;
      border: 1px solid #777;
      font-family: 'Raleway', sans-serif;
      font-size: 21px;
      margin-bottom: 20px;
      height: 200px;
    }
    .form-submit {
      color: pink;
      width: 95%;
      @media only screen and (max-width: 960px) {
        display: block;
        width: 100%;
      }
      border-color: pink;
      cursor: pointer;
    }
    .pressed {
      background: #141414;
    }
  }
  .contact-side {
    @media only screen and (min-width: 1141px) {
      width: 396px;
    }
    @media only screen and (max-width: 1140px) and (min-width: 961px) {
      width: 30%;
    }
    @media only screen and (max-width: 960px) {
        display: block;
      padding: 20px;
      }
    padding-top: 20px;
    border-top: 4px solid #222;
    display: inline-block;
    vertical-align: top;
    p {
      color: white;
      font-family: 'Raleway', sans-serif;
      font-size: 18px;
      line-height: 1.8;
      margin-bottom: 20px;
    }
    .hours-heading {
      font-size: 24px;
      color: pink;
    }
  }
}

.products-wrapper {
  position: relative;
  margin: 0 auto;
  padding-top: 60px;
  padding-bottom: 60px;
  border-bottom: 3px dashed #333;
  @media only screen and (min-width: 1141px) {
    width: 1140px;
  }
  @media only screen and (max-width: 1140px) {
    display: block;
  }
}

.product {
  @media only screen and (min-width: 1141px) {
    width: 380px;
    display: inline-block;
  }
  @media only screen and (max-width: 1140px) and (min-width: 769px){
    width: 33%;
    display: inline-block;
  }
  @media only screen and (max-width: 768px) {
    display: block;
    padding: 20px;
  }
  vertical-align: top;
  img {
    border-radius: 50%;
  }
  p {
    font-family: 'Raleway', sans-serif;
    color: #aaa;
    font-size: 18px;
    line-height: 1.7;
    padding: 20px;
  }
}
              
            
!

JS

              
                $(function() {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});

$(function() {
  $('.res-menu-button').click(function() {
    if ($('.res-menu').css("display") != "none") {
      $('.res-menu').slideUp(1000);
    }
    else {
      $('.res-menu').slideDown(1000);
    }
  });
});

$(function() {
  $('.form-submit').mousedown(function() {
    $('.form-submit').addClass("pressed");
  });
  $('.form-submit').mouseup(function() {
    $('.form-submit').removeClass("pressed");
  });
});

$(window).scroll(function() {
  var scrollPos = $(window).scrollTop(),
  aboutPos = $('.about-wrapper').offset().top,
  servicePos = $('.services-wrapper').offset().top,
  productPos = $('.products-wrapper').offset().top,
  contactPos = $('.contact-wrapper').offset().top;
  
  if (scrollPos >= aboutPos && scrollPos < servicePos) {
    $('.link-a').addClass('selected');
  }
  else {
    $('.link-a').removeClass('selected');
  }
  
  if (scrollPos >= servicePos && scrollPos < productPos) {
    $('.link-b').addClass('selected');
  }
  else {
    $('.link-b').removeClass('selected');
  }
  
  if (scrollPos >= productPos && scrollPos < contactPos) {
    $('.link-c').addClass('selected');
  }
  else {
    $('.link-c').removeClass('selected');
  }
  
  if (scrollPos >= contactPos) {
    $('.link-d').addClass('selected');
  }
  else {
    $('.link-d').removeClass('selected');
  }
  
});
              
            
!
999px

Console