123

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>Smells Like Bakin' Cupcake Company</title>
  <link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen">
  <link rel="stylesheet" href="css/grid.css" type="text/css" media="screen">
  <link href='https://fonts.googleapis.com/css?family=Nunito' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
</head>
<body>
  <div class="container clearfix">
    <div class="grid_4">
      <img src="https://dl.dropboxusercontent.com/u/20444092/smells%20like%20bakin/img/logo.svg" alt="Smells Like Bakin" height="  190px" width: "140px">
    </div>
    <div class="grid_8 omega">
      <ul class="nav">
        <li><a href="#">About</a></li>
        <li><a href="#">Cupcakes &amp; Prices</a></li>
        <li><a href="#">Locations</a></li>
        <li class="last"><a href="#">Contact Us</a></li>
      </ul>
    </div>
    <div id="intro" class="grid_9">
      <h1>Opposites really do attract, especially in our kitchen! We combine unexpected flavors that melt together to create ironically delicious desserts.</h1>
      <p><a href="#" class="btn">Browse Our Cupcakes</a></p>
    </div>
    <div class="grid_3 omega">
      <img src="https://dl.dropboxusercontent.com/u/20444092/smells%20like%20bakin/img/you-bake-me-blush.svg" alt="You Bake Me Blush">
    </div>

    <div id="featured-cupcake" class="grid_7">
      <h2>Cupcake of the Week</h2>
      <p>This week’s featured cupcake is the <a href="#">Avocado Chocolate cupcake</a>. Its strange combo of flavors will kick your taste buds into fiesta mode!</p>
      <img src="https://dl.dropboxusercontent.com/u/20444092/smells%20like%20bakin/img/featured-cupcake.jpg" alt="Avocado Chocolate Cupcake" height="370px" width: "555px">
    </div>

    <div id="new-cupcakes" class="grid_5 omega">
      <h2>Fresh Out the Oven</h2>
      <p>Our newest cupcakes are <a href="#">Bacon Me Crazy</a> and <a href="#">Jalapeño So Spicy</a>. </p>
      <img src="https://dl.dropboxusercontent.com/u/20444092/smells%20like%20bakin/img/new-cupcake-bacon.jpg" alt="Bacon Me Crazy">
      <img src="https://dl.dropboxusercontent.com/u/20444092/smells%20like%20bakin/img/new-cupcake-jalapeno.jpg" alt="Jalapeno So Spicy">
    </div>


    <div class="grid_7">
      <h2>Inside the Kitchen</h2>
      <p>Smells Like Bakin’ started out in the garage of the husband wife duo Allison &amp; Joseph. Allison is the baker, and Joseph found a way for them to make a business out of her tasty treats. Flash forward to today and they have a successful store front, catering business and cupcake truck. </p>
      <p><a href="#" class="btn-small">Read More</a></p>
    </div>

    <div class="grid_5 omega">
      <h2>Get Bakin' with Us</h2>

      <div id="contact">
        <p>Call us: <span>1-555-CUP-CAKE</span><br>
        Email us: <a href="#">bakeon@smellslikebakin.com</a></p>
      </div>


      <p>We announce all of our new flavors first through Facebook &amp; Twitter, and even take requests!</p>
      <a href="https://www.facebook.com/SmellsLikeBakin"><img src="https://dl.dropboxusercontent.com/u/20444092/smells%20like%20bakin/img/facebook.svg" alt="Facebook"></a>
      <a href="https://twitter.com/#!/smellslikebakin"><img src="https://dl.dropboxusercontent.com/u/20444092/smells%20like%20bakin/img/twitter.svg" alt="Twitter"></a>
    </div>

    <div id="copyright" class="grid_12">
      <p>&copy; 2013 Smells Like Bakin' Cupcake Company. All Rights Reserved.</p>
    </div>

  </div>
</body>
</html>
            
          
!
            
              /*! normalize.css 2012-03-11T12:53 UTC - https://github.com/necolas/normalize.css */
 
/* =============================================================================
   HTML5 display definitions
   ========================================================================== */
 
/*
 * Corrects block display not defined in IE6/7/8/9 & FF3
 */
 
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section,
summary {
    display: block;
}
 
/*
 * Corrects inline-block display not defined in IE6/7/8/9 & FF3
 */
 
audio,
canvas,
video {
    display: inline-block;
    *display: inline;
    *zoom: 1;
}
 
/*
 * Prevents modern browsers from displaying 'audio' without controls
 * Remove excess height in iOS5 devices
 */
 
audio:not([controls]) {
    display: none;
    height: 0;
}
 
/*
 * Addresses styling for 'hidden' attribute not present in IE7/8/9, FF3, S4
 * Known issue: no IE6 support
 */
 
[hidden] {
    display: none;
}
 
 
/* =============================================================================
   Base
   ========================================================================== */
 
/*
 * 1. Corrects text resizing oddly in IE6/7 when body font-size is set using em units
 *    http://clagnut.com/blog/348/#c790
 * 2. Prevents iOS text size adjust after orientation change, without disabling user zoom
 *    www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/
 */
 
html {
    font-size: 100%; /* 1 */
    -webkit-text-size-adjust: 100%; /* 2 */
    -ms-text-size-adjust: 100%; /* 2 */
}
 
/*
 * Addresses font-family inconsistency between 'textarea' and other form elements.
 */
 
html,
button,
input,
select,
textarea {
    font-family: sans-serif;
}
 
/*
 * Addresses margins handled incorrectly in IE6/7
 */
 
body {
    margin: 0;
}
 
 
/* =============================================================================
   Links
   ========================================================================== */
 
/*
 * Addresses outline displayed oddly in Chrome
 */
 
a:focus {
    outline: thin dotted;
}
 
/*
 * Improves readability when focused and also mouse hovered in all browsers
 * people.opera.com/patrickl/experiments/keyboard/test
 */
 
a:hover,
a:active {
    outline: 0;
}
 
 
/* =============================================================================
   Typography
   ========================================================================== */
 
/*
 * Addresses font sizes and margins set differently in IE6/7
 * Addresses font sizes within 'section' and 'article' in FF4+, Chrome, S5
 */
 
h1 {
    font-size: 1.875em;
    margin: 1em 0;
}
 
h2 {
    font-size: 1.5em;
    margin: 0;
}
 
h3 {
    font-size: 1em;
    margin: 1em 0 0 0;
}
 
h4 {
    font-size: 1em;
    margin: 1.33em 0;
}
 
h5 {
    font-size: 0.83em;
    margin: 1.67em 0;
}
 
h6 {
    font-size: 0.75em;
    margin: 2.33em 0;
}
 
/*
 * Addresses styling not present in IE7/8/9, S5, Chrome
 */
 
abbr[title] {
    border-bottom: 1px dotted;
}
 
/*
 * Addresses style set to 'bolder' in FF3+, S4/5, Chrome
*/
 
b,
strong {
    font-weight: bold;
}
 
blockquote {
    margin: 1em 40px;
}
 
/*
 * Addresses styling not present in S5, Chrome
 */
 
dfn {
    font-style: italic;
}
 
/*
 * Addresses styling not present in IE6/7/8/9
 */
 
mark {
    background: #ff0;
    color: #000;
}
 
/*
 * Addresses margins set differently in IE6/7
 */
 
p,
pre {
    margin: 1em 0;
}
 
/*
 * Corrects font family set oddly in IE6, S4/5, Chrome
 * en.wikipedia.org/wiki/User:Davidgothberg/Test59
 */
 
pre,
code,
kbd,
samp {
    font-family: monospace, serif;
    _font-family: 'courier new', monospace;
    font-size: 1em;
}
 
/*
 * Improves readability of pre-formatted text in all browsers
 */
 
pre {
    white-space: pre;
    white-space: pre-wrap;
    word-wrap: break-word;
}
 
/*
 * 1. Addresses CSS quotes not supported in IE6/7
 * 2. Addresses quote property not supported in S4
 */
 
/* 1 */
 
q {
    quotes: none;
}
 
/* 2 */
 
q:before,
q:after {
    content: '';
    content: none;
}
 
small {
    font-size: 75%;
}
 
/*
 * Prevents sub and sup affecting line-height in all browsers
 * gist.github.com/413930
 */
 
sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}
 
sup {
    top: -0.5em;
}
 
sub {
    bottom: -0.25em;
}
 
 
/* =============================================================================
   Lists
   ========================================================================== */
 
/*
 * Addresses margins set differently in IE6/7
 */
 
dl,
menu,
ol,
ul {
    margin: 1em 0;
}
 
dd {
    margin: 0 0 0 40px;
}
 
/*
 * Addresses paddings set differently in IE6/7
 */
 
menu,
ol,
ul {
    padding: 0 0 0 40px;
}
 
/*
 * Corrects list images handled incorrectly in IE7
 */
 
nav ul,
nav ol {
    list-style: none;
    list-style-image: none;
}
 
 
/* =============================================================================
   Embedded content
   ========================================================================== */
 
/*
 * 1. Removes border when inside 'a' element in IE6/7/8/9, FF3
 * 2. Improves image quality when scaled in IE7
 *    code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/
 */
 
img {
    border: 0; /* 1 */
    -ms-interpolation-mode: bicubic; /* 2 */
}
 
/*
 * Corrects overflow displayed oddly in IE9
 */
 
svg:not(:root) {
    overflow: hidden;
}
 
 
/* =============================================================================
   Figures
   ========================================================================== */
 
/*
 * Addresses margin not present in IE6/7/8/9, S5, O11
 */
 
figure {
    margin: 0;
}
 
 
/* =============================================================================
   Forms
   ========================================================================== */
 
/*
 * Corrects margin displayed oddly in IE6/7
 */
 
form {
    margin: 0;
}
 
/*
 * Define consistent border, margin, and padding
 */
 
fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
}
 
/*
 * 1. Corrects color not being inherited in IE6/7/8/9
 * 2. Corrects text not wrapping in FF3
 * 3. Corrects alignment displayed oddly in IE6/7
 */
 
legend {
    border: 0; /* 1 */
    padding: 0;
    white-space: normal; /* 2 */
    *margin-left: -7px; /* 3 */
}
 
/*
 * 1. Corrects font size not being inherited in all browsers
 * 2. Addresses margins set differently in IE6/7, FF3+, S5, Chrome
 * 3. Improves appearance and consistency in all browsers
 */
 
button,
input,
select,
textarea {
    font-size: 100%; /* 1 */
    margin: 0; /* 2 */
    vertical-align: baseline; /* 3 */
    *vertical-align: middle; /* 3 */
}
 
/*
 * Addresses FF3/4 setting line-height on 'input' using !important in the UA stylesheet
 */
 
button,
input {
    line-height: normal; /* 1 */
}
 
/*
 * 1. Improves usability and consistency of cursor style between image-type 'input' and others
 * 2. Corrects inability to style clickable 'input' types in iOS
 * 3. Removes inner spacing in IE7 without affecting normal text inputs
 *    Known issue: inner spacing remains in IE6
 */
 
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
    cursor: pointer; /* 1 */
    -webkit-appearance: button; /* 2 */
    *overflow: visible;  /* 3 */
}
 
/*
 * Re-set default cursor for disabled elements
 */
 
button[disabled],
input[disabled] {
    cursor: default;
}
 
/*
 * 1. Addresses box sizing set to content-box in IE8/9
 * 2. Removes excess padding in IE8/9
 * 3. Removes excess padding in IE7
      Known issue: excess padding remains in IE6
 */
 
input[type="checkbox"],
input[type="radio"] {
    box-sizing: border-box; /* 1 */
    padding: 0; /* 2 */
    *height: 13px; /* 3 */
    *width: 13px; /* 3 */
}
 
/*
 * 1. Addresses appearance set to searchfield in S5, Chrome
 * 2. Addresses box-sizing set to border-box in S5, Chrome (include -moz to future-proof)
 */
 
input[type="search"] {
    -webkit-appearance: textfield; /* 1 */
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box; /* 2 */
    box-sizing: content-box;
}
 
/*
 * Removes inner padding and search cancel button in S5, Chrome on OS X
 */
 
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
}
 
/*
 * Removes inner padding and border in FF3+
 * www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/
 */
 
button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}
 
/*
 * 1. Removes default vertical scrollbar in IE6/7/8/9
 * 2. Improves readability and alignment in all browsers
 */
 
textarea {
    overflow: auto; /* 1 */
    vertical-align: top; /* 2 */
}
 
 
/* =============================================================================
   Tables
   ========================================================================== */
 
/*
 * Remove most spacing between table cells
 */
 
table {
    border-collapse: collapse;
    border-spacing: 0;
}


/*global*/
 
body {
    font-family: 'Nunito', sans-serif;
    color: #FAF3BC;
    background: #F0F8FF;
}
a {
    color: #A52A2A;
    text-decoration: none;
}
 
/*typography*/
 
 
h1 {
    font-size: 1.750em;
    letter-spacing:  -1.5px;
    color:#D2691E;
 
}
 
h2{
    font-size: 1.500em;
    color:#D2691E;
 
}
p{
    color:#8B0000;
}
 
/*buttons*/
 
 
.btn{
    color:#FAf3BC;
    background: #4FB69F  url('https://dl.dropboxusercontent.com/u/20444092/smells%20like%20bakin/css/img/bg-texture.jpg') no-repeat right top;
    padding: 15px 30px;
    margin: 40px 0px;
    border-radius: 20px;
    text-transform: uppercase;
}
 
.btn:hover {
    background-color: #4CC4A7;
}
 
/*navigation*/
 
 
ul.nav {
     
    margin: 120px 0 0 0; 
    float: right;
    list-style:none;
}
 
ul.nav li {
    float: left;
    margin-right: 40px;
     
}
 
ul.nav li a {
    font-size:1.3em;
    color: #D2691E;
}
 
ul.nav li a:hover {
    color: #DC143C;
}
 
/*content*/
 
#intro {
     
    margin: 30px 10px 75px 0; 
}
 
img {
    max-width: 100%;
}
 
#new-cupcakes img {
    border: 5px solid #FAf3BC ;
    margin: 0px 0 20px 0; 
}
 
#featured-cupcake img {
        border: 5px solid #FAf3BC ;
}
 
#copyright {
    border-top: 7px solid #2a0400;
    padding: 10px 0px;
    margin: 15px 0px;
    text-align: center;
}
/*media queries*/
 
/* Larger ----------- */
@media screen and (max-width: 1024px) {
 
 
#intro {
    width: 100%; 
}
#intro-img {
    display: none;
}
#intro h1 {
    margin:  0 0 5% 0;
}
#logo {
    width: 100%;
    text-align: center;
}
 
#logo object {
    max-width:  55%;
}
#nav {
    width: 100%;
}
#nav ul {
    margin: 0;
}
 
#nav ul li {
    float: left;
    margin: 5% 0 0 0;
    }
    #nav ul li.about {
        width: 15%;
    }
    #nav ul li.pricing {
        width: 35%;
    }
    #nav ul li.locations {
        width: 25%;
    }
    #nav ul li.contact {
        width: 25%;
        margin: 5% 0 2% 0;
    }
 
 
}
 
 
 
 
/* Smaller ----------- */
@media screen and (max-width : 650px) {
 
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
    width:100%;
}
#logo object {
    max-width: 60%;
}
#nav ul {
    margin: 5% 0;
}
 
#nav ul li a {
    -webkit-user-select: none;
    font-size: 1em;
}
 
#nav ul li {
    float: left;
    margin: 5% 0;
    }
    #nav ul  li.about {
        width: 20%;
        text-align: left;
    }
    #nav ul  li.pricing {
        width: 55%;
        text-align: center;
    }
    #nav ul  li.locations {
        width: 25%;
        text-align: right;
    }
    #nav ul  li.contact {
        width: 100%;
        margin: 0;
        font-size: 1em;
    }
 
 
#intro, #about {
    display: none;
}
#featured-cupcake, #new-cupcakes {
    margin: 5% 0;
}
 
}

/*
 Width: 1000px
 # Columns : 12 
 Column width: 65px
 Gutter : 20px 
 
 */
.grid_1 { width: 6.5%; }
.grid_2 { width: 15.0%; }
.grid_3 { width: 23.5%; }
.grid_4 { width: 32.0%; }
.grid_5 { width: 40.5%; }
.grid_6 { width: 49.0%; }
.grid_7 { width: 57.5%; }
.grid_8 { width: 66.0%; }
.grid_9 { width: 74.5%; }
.grid_10 { width: 83%; }
.grid_11 { width: 91.5%; } /* 915 px */
.grid_12 { width: 100%; }
 
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
    margin: 0 2% 1% 0;
    float: left;
    display: block;
}
 
.alpha{margin-left:0px;}
.omega{margin-right:0px;}
 
.container{
    width: 90%;
    max-width: 1000px;
    margin: auto;
}
 
 
 
.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}.clearfix:after{clear:both;content:' ';
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console