HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html>
tag. If you want to add classes there that can affect the whole document, this is the place to do it.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. If you need things in the <head>
of the document, put that code here.
The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.
CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.
It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.
To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit-
or -moz-
.
We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).
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.
You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.
You can also link to another Pen here (use the .css
URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
JavaScript preprocessors can help make authoring JavaScript easier and more convenient.
Babel includes JSX processing.
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.
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
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.
Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.
All packages are different, so refer to their docs for how they work.
If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.
If active, Pens will autosave every 30 seconds after being saved once.
If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.
If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.
Visit your global Editor Settings.
<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">
≡
</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 ‘N’ 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">⇁</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">⇁</span></h3>
<h4>STYLING <span class="pink">&</span> CUTTING<div class="toggle-service">↟</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">↟</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">↟</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">&</span> FORMAL STYLING<div class="toggle-service">↟</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">↟</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">⇁</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">⇁</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 ⌮ </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>
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;
}
}
$(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');
}
});
Also see: Tab Triggers