Pen Settings

HTML

CSS

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

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

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

Behavior

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.

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

              
                <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Carrot Landing Page</title>
    <link rel="stylesheet" type="text/css" href="carrot-landing.css">
</head>
<body>
        <div id="content-wrapper">
                <header id="header">
                  <div class="logo">
                    <div id="logo-img"><img id="header-img" src="https://image.ibb.co/epLFff/Carrot-PNG-Image.png" alt="logo showing bunch of carrots"></div>
                  </div>
                  <nav id="nav-bar">
                    <ul>
                      <li><a class="nav-link" href="#facts">Facts</a></li>
                      <li><a class="nav-link" href="#rumors">Rumors</a></li>
                      <li><a class="nav-link" href="#contacts">Contacts</a></li>
                      <li><a class="nav-link" href="#how-to-buy">How to buy</a></li>
                    </ul>
                  </nav>
                </header>
              </div>
  <main>
    <div class="container">
    <h1 id="company-name">The Perfect Carrot</h1>
    <blockquote>
      <p id="carrot-quote">If you truly get in touch with a piece of carrot, you get in touch with the soil, the rain, the sunshine. You get in touch with Mother Earth and eating in such a way, you feel in touch with true life, your roots, and that is meditation.
      </p>
      <footer class="blockquote-footer">
        <cite><a id="quote-source" href="https://www.theguardian.com/sustainable-business/zen-master-thich-nhat-hanh-love-climate-change">Thích Nhất Hạnh</a></cite>
      </footer>
      </blockquote>
    <section id="facts">
      <h2>Facts</h2>
      <h3>What do we know about carrots?</h3>
      <figure id="fact-illustrations">
        <div class="illustration"><img src="https://image.ibb.co/c2BFo0/agriculture-carrots-dirty-1268101.jpg
        " alt="farmer holding bunch of freshly picked carrots illustration"></div>
        <div class="illustration"><img src="https://image.ibb.co/gyDH1L/agriculture-breakfast-carrot-juice-162670.jpg
        " alt="fresh carrots and carrot juice illustration"></div>
        <div class="illustration"><img src="https://image.ibb.co/cFEeFf/adult-art-carrot-1036398.jpg
        " alt="the dark side of the carrot illustration"></div>
      </figure>
      <p>Carrots are spread far and wide. Some are tall. Some are short. Some are plump. Some are skinny. They truly come in all shapes and sizes, and no shape or size — or texture, or place of origin — is any less carrot than the others.</p>
      <p>All carrots are created equal, and that is a thing to remember. Not identical, never, but equal in rights and intrinsic value. Knowing that, never judge the carrot you see on a whim, by appearance or smell alone. It's the inside that matters, the deep carrot parts that glow in the dark and sparkle with rainbows, if only you look hard enough.</p>
      <p>Knowing a carrot — truly knowing a carrot, earning its trust and affection, and giving it yours in return, is one of those magical things that keep the world turning. Be open and gentle, respect your carrot's right to say "no", and one day you might find, that you have grown closer, and your life has become a whole lot more meaningful.</p>
    </section>
    <section id="rumors">
    <h2>Rumors</h2>
    <h3>What do we think we know about carrots?</h3>
    <figure id="rumor-illustrations">
        <div class="illustration"><img src="https://image.ibb.co/jTueWL/agriculture-carrots-close-up-143133.jpg
        " alt="carrot close-up illustration"></div>
        <div class="illustration"><img src="https://image.ibb.co/f0EwBL/blanched-broccoli-carrots-355458.jpg
        " alt="fresh carrots and broccoli blanched illustration"></div>
        <div class="illustration"><img src="https://image.ibb.co/mtXYrL/basket-carrots-close-up-37641.jpg
        " alt="carrots in basket illustration"></div>
      </figure>
      <p>We think we know a lot. We think the carrot has been around forever, and that there's nothing to learn from taking a closer look. We think nothing could be further away from cutting-edge tech than the regular household carrot.</p>
      <p>If humanity is to have a chance at survival, this is to be reconsidered. Parting with false beliefs may be hard, even painful. Be strong. Watch this video, and discover the true power of the modern-day carrot.</p>
      <div id="carrot-video"><h3 id="video-title">Introducing Carrot</h3>
      <iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/3exth3f2tIM" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
      </div>
      </section>
    </section>
    <section id="contacts">
      <h2>Contacts</h2>
      <h3>If you want to contact your Inner Carrot, this is the place to do so.</h3>
      <p>This first step may not come to you easily. That is to be expected. Do not hesitate, however. Take a breath. Relax. Put your hands on the keyboard and... type.</p>
      <p>The form provided below will provide you with everything you need to take the first step towards meeting your Inner Carrot. While providing your name and e-mail is not strictly necessary, this information will help your Inner Carrot to send you a proper reply and meet you halfway. Your personal information will be handled with due care and affection.</p>
      <p>Reaching your Inner Carrot is as easy as <strong>1-2-3!</strong></p>
      <form id="form" action="https://formspree.io/trafficfox@yandex.ru" method="post">
        <ol type="1" id="contact-guide">
          <li><label id="name-label" for="name"><p><strong>1. Enter your name.</strong>This will help your Inner Carrot know how to address you when it writes back.</p></label>
          <input id="name" type="text" class="input-field" placeholder="Enter your name" name="name" required></li>
          <li><label id="email-label" for="email"><p><strong>2. Enter an e-mail address.</strong>This will give your Inner Carrot an actual return address, so that you can receive your answer.</p></label></li>
          <input id="email" type="email" name="email" placeholder="Enter your e-mail">
          <li><label id="letter-label" for="letter"><p><strong>3. Write your letter.</strong> Really, just take a breath and start writing.</p></label></li>
          </ol>  
          <div id="letter">
          <textarea class="input-field" placeholder="Don't forget to breathe while you type." style="height:220px; width:440px; display:block; margin:auto" name="letter"></textarea>
          </div>
      <input id="submit" type="submit" value="Send" class="btn">
      </form>
    </section>
    <section id="how-to-buy">
      <h2>How to buy</h2>
      <h3>Deep inside, we all know it.</h3>
      <p>As you might have guessed, there is really no way to just go out and buy a carrot. Some things do not come with money, they come with good will, patience and kindness.</p>
      <p>If you're set on a monetary transaction, you can start out with trying the local grocery store.</p>
      <p>Remember, however, that there is always a carrot in search of a new loving home, and that buying a new one at the nearest shop may not be your only option. Ask your friends, maybe they have a carrot to share. Reach out to your local carrot shelter, see if they have one for adoption.</p>
      <p>Finding your true carrot may take some time. At times you may feel lonely and helpless, maybe eveb sad and forelorn. Carrotless times may seem harsh and pointless, a proof of universal futility. In those troubles, you're not alone. Remember, that at all times, all around you, there are fellow humans searching for their True Carrot. Remember, that some do not even know there's a carrot to seek. And when things seem to hard, get some rest. Eat some food and relax. Take a break.</p>
      <p>Above all, at all times remember that you're never truly alone. There's a bright Inner Carrot inside you.</p>
      <p>Use the <a id="form-link" href="#form">form</a> above if you're still struggling to get in touch with your Inner Carrot.</p>
      <p>May your Inner Carrot be with you.</p>
      <img id="goodbye-carrot" src="https://image.ibb.co/kB2egL/glass-of-carrot-juice-and-carrot.jpg" alt="small picture of carrot and carrot juice">
    </section>
    </div>
  </main>
  <footer>
      Copyright &copy Fox Larsson 2018
  </footer>
</body>
</html>
              
            
!

CSS

              
                @import url('https://fonts.googleapis.com/css?family=Merienda|Sigmar+One');
@import url('https://fonts.googleapis.com/css?family=Open+Sans');
@import url('https://fonts.googleapis.com/css?family=Oswald');
@import url('https://fonts.googleapis.com/css?family=Kodchasan');
html, body {
    margin: 0;
    padding: 0;
}
#main {
    width: 100%;
    margin-bottom: 0px;
    padding-bottom: 0px;
}
#content-wrapper {
    margin: 0px auto 0px auto;
}
/* style nav bar */
header {
  position: fixed;
  width: 100%;
  top: 0;
  display: flex;
  flex-wrap: wrap;
  padding-top: 15px;
  background-image: linear-gradient(white 83%, rgba(255, 255, 255, 0.5));
  z-index: 1;
}
@media (max-width: 1068px) {
    header {
        padding-top: 0;
        position: relative;
    }
  }
/*the div for logo image and text*/

#nav-bar {
 flex: 1;
 padding: 0;
 margin: 0;
}
@media (max-width: 1068px) {
    nav {
        padding-top: 0;
    }
  }
ul li {
  list-style: none;
  border-right: 1px dotted rgb(0, 0, 0);
  padding: 0px 45px;
  text-transform: uppercase;
}
@media (max-width: 1068px) {
    li {
        border-right: none;
        text-align: right;
    }
  }
  @media (max-width: 580px) {
    li {
        text-align: center;
        font-size: 1em;
    }
  }
li:last-child {
    border-style: none;
}
ol li {
    list-style: none;
}
ul {
  display: flex;
  flex-wrap: wrap;
  background: none;
  justify-content: flex-end;
  padding: 25px 5px 0px 5px;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
} 
@media (max-width: 1068px) {
    ul {
        padding-top: 0;
    }
  }
@media (max-width: 580px) {
    ul {
        flex-direction: column;
        text-align: right;
    }
}
#header-img{
 max-width: 360px;
 padding: 15px 10px 0px 10px;
}
@media (max-width: 1068px) {
    #logo-img {
        width: 380px;
    }
    @media (max-width: 580px) {
        
        #header-img {
            width: 100%;
        }
        #logo-img {
            width: 100%;
        }
}
}
@media (max-width: 580px) {
        
    #logo {
        justify-content: center;
    }
}
.nav-link {
    color: black;
    text-decoration: none;
}
.nav-link:hover {
    color: white;
    text-shadow: 0 0 16px rgb(253, 117, 6), 0 0 16px rgb(253, 117, 6), 0 0 16px rgb(253, 117, 6), -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

/* style content*/

.container {
margin: 150px auto 20px auto;
width: 80%;
line-height: 1.5em;
text-align: justify;
font-family: 'Open Sans', sans-serif;
}
@media (max-width: 600px) {
.container {
    width: 90%; 
    margin: auto;
}
}
#company-name {
    font-family: 'Oswald', sans-serif;
    font-size: 3em;
    text-align: center;
    padding-top: 50px;
    padding-bottom: 30px;
  }
  @media (max-width: 580px) {
    #company-name {
        font-size: 2.4em;
    }
  }
  h2 {
      text-transform: uppercase;
      font-size: 22px;
  }
  h3 {
      margin-top: 0;
      text-align: center;
      text-decoration: underline dotted black;
  }
p {
    margin-top: 10px;
}
blockquote {
    max-width: 550px;
    background: rgba(253, 175, 6, 0.044);
    border-left: 15px solid rgba(253, 175, 6, 0.336);
    border-radius: 2px;
    margin: auto;
    padding: 15px 85px;
    font-family: 'Kodchasan', sans-serif;
    font-size: 1.15em;
    font-weight: 500;
}
#quote-source {
    text-decoration: none;
    font-weight: 600;
    color: black;
}
.blockquote-footer {
    text-align: right;
}
section {
    display: flex;
    flex-direction: column;
    padding-top: 50px;
}
figure {
    display: flex;
    justify-content: space-between;
    margin-bottom: 40px;
}
.illustration {
    border: 1px solid rgba(253, 175, 6, 0.938);
    border-radius: 4px;
    padding: 5px;
    margin-top: 20px;
    width: 26%;
}
img {
    width: 100%;
    height: 100%;
}
#carrot-video {
    padding-top: 30px;
    display: flex;
    flex-direction: column;
}
#video {
    align-self: center;
    border: 1px solid rgba(253, 175, 6, 0.938);
    border-radius: 4px;
    padding: 5px;
}
form {
    margin-top: 30px;
}
input {
    height: 20px;
    width: 240px;
    border-radius: 2px;
    padding: 3px;
    display: block;
    margin: auto;
}
#submit {
    height: 40px;
    width: 160px;
    border-radius: 4px;
    padding: 3px;
    font-size: 18px;
    font-weight: 200;
    text-transform: uppercase;
    color: black;    
    background-color: white;
    border: 2px dotted rgb(2, 1, 0);
    
}

#submit:hover { 
    box-shadow: 0 0 16px  rgba(60, 116, 23, 0.616);
    text-shadow: 0 0 16px rgb(253, 117, 6);
}

#letter { 
    margin: 25px auto 40px auto;
}
textarea {
    max-width: 90%;
    border-radius:2px;
    padding: 10px;
    box-shadow: 0 0 16px rgb(253, 117, 6);

}
#form-link {
    color: rgb(185, 99, 29);
}
@media (max-width: 1068px) {
#video {
        width: 90%;
    }
  }
  #goodbye-carrot {
      max-width: 250px;
      height: auto;
      margin: auto;
      padding-top: 10px;
  }
 
  footer {
      padding-bottom: 10px;
      text-align: center;
      padding-top: 10px;
      border-top: 1px dotted black;
  }
  
              
            
!

JS

              
                // coded by @atjonathan
const projectName = 'product-landing-page';
localStorage.setItem('example_project', 'Product Landing Page');
// REPLACE CDN WITH GITCDN!!!

              
            
!
999px

Console