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 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>Everyday with Isa</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>

  <header>
    <nav id="navbar">
      <a class="button light">Light</a>
      <a class="button dark">Dark</a>
      <a class="menu">|||</a>
      <ul>
        <li><a href="#about">About</a></li>
        <li><a href="#guide">Guide</a></li>
        <li><a href="#tickets">Tickets</a></li>
        <li><a href="#dressing">Dressing</a></li>
        <li><a href="#content">Content</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <section id="about">
      <a href="#contact"><img
        src="https://s3.amazonaws.com/codecademy-content/courses/learn-html/elements-and-structure/profile.jpg"
        alt="beautiful girl sitting on sofa" /></a>
      <h3>by Isabelle Rodriguez | 1 day ago</h3>
    </section>

    <article id="guide">
      <h1>An Insider's Guide to NYFW</h1>
      <img src="https://s3.amazonaws.com/codecademy-content/courses/learn-html/elements-and-structure/image-one.jpg"
        alt="female model talking on her phone" />
      <p><a href="https://en.wikipedia.org/wiki/New_York_Fashion_Week" target="_blank">NYFW</a> can be both amazingly
        fun & incredibly overwhelming, especially if you've never been. Luckily, I'm here to give you an insider's guide
        and make your first show a pleasurable experience. By taking my tips and tricks, and following your gut, you'll
        have an unforgettable experience!</p>
    </article>

    <article id="tickets">
      <h2>Getting Tickets & Picking the Shows</h2>
      <img src="https://s3.amazonaws.com/codecademy-content/courses/learn-html/elements-and-structure/image-two.jpeg"
        alt="woman wearing black jacket" />
      <p>If you're lucky or connected you can get an invite, sans the price tag. But I wasn't so lucky or connected my
        first 2 years so I'm here to help you out. First, plan out which shows are most important to you and make a
        schedule and this is a biggie: SET A BUDGET. If you're worrying about blowing your cash the whole time you won't
        have fun. Then check out prices, days, and times and prioritize the designers you want to see most. Lastly,
        purchase your tickets and get excited!</p>
    </article>

    <article id="dressing">
      <h2>Dressing for The Shows</h2>
      <img src="https://s3.amazonaws.com/codecademy-content/courses/learn-html/elements-and-structure/image-three.jpeg"
        alt="man wearing elegant classic outfit" />
      <p>Always be true to your own sense of style, if you don't you'll be uncomfortable the whole time and it will
        show. Remember, NYFW is about expressing yourself and taking in what the designers have chosen to express
        through their new lines. Also it's important to wear shoes you'll be comfortable in all day. Obviously you want
        to look good, but you'll be on your feet all day long, so be prepared.</p>
    </article>

    <aside id="content">
      <h4>Related Content</h4>
      <ul>
        <li><a href="#">How To Style Boyfriend Jeans</a></li>
        <li><a href="#">When Print Is Too Much</a></li>
        <li><a href="#">The Overalls Trend</a></li>
        <li><a href="#">Fall's It Color: Blush</a></li>
      </ul>
    </aside>
  </main>

  <footer id="contact">
    <a href="mailto:isa@fashionblog.com"><strong>email</strong>: isa@fashionblog.com</a> |
    <strong>phone</strong>: 917-555-1098 | <strong>address</strong>: 371 284th St, New York, NY, 10001
  </footer>

  <script src="https://code.jquery.com/jquery-3.2.1.min.js"
    integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
  <script src="main.js"></script>

</body>

</html>
            
          
!
            
              /* resets */

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

/* global styles */

html {
  scroll-behavior: smooth;
}

body {
  background-color: rgb(255, 255, 255);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

h1, h2, h3, h4, p {
  margin: 10px;
}

a {
  text-decoration: none;
  color: rgb(75, 75, 150);
  font-weight: 500;
}

img:hover {
  cursor: pointer;
}

li {
  list-style-type: none;
}

header, nav, main {
  width: 740px;
  margin: 0 auto;
}

/* navbar section */

li a {
  color: rgb(240, 240, 255);
  font-weight: 700;
}

li a:hover {
  color: rgb(255, 255, 255);
}

.button {
  float: left;
  width: 46px;
  font-family: sans-serif;
  font-size: 1em;
  font-weight: 700;
  text-align: center;
  padding: 2px;
  margin: 8px 0px 8px 8px;
  border: none;
  border-radius: 5px;
}

.light {
  background-color: rgb(240, 240, 255);
  color: rgb(0, 0, 0);
  box-shadow: 0 3px rgb(140, 140, 180);
}

.light:hover {
  background-color: rgb(250, 250, 255);
  cursor: pointer;
}

.dark {
  background-color: rgb(120, 120, 160);
  color: rgb(240, 240, 255);
  box-shadow: 0 3px rgb(100, 100, 120);
}

.dark:hover {
  background-color: rgb(140, 140, 180);
  color: rgb(250, 250, 255);
  cursor: pointer;
}

.dark:active, .light:active {
  box-shadow: 0 0 rgb(0, 0, 0);
  transform: translateY(2px);
}

.menu {
  display: none;
  float: right;
  background-color: rgb(0, 0, 0);
  color: rgb(240, 240, 255);
  width: 26px;
  font-family: sans-serif;
  font-size: 1.4em;
  font-weight: 800;
  text-align: center;
  padding: 0px;
  margin: 4px;
  transform: rotate(90deg);
}

.menu:hover {
  cursor: pointer;
}

#navbar {
  background-color: black;
  position: fixed;
  text-align: center;
  top: 0px;
  height: 40px;
  border-radius: 0;
}

#navbar li {
  display: inline;
  line-height: 35px;
  padding: 20px;
}

/* about section */

#about {
  background-color: rgb(230, 230, 255);
  margin-top: 40px;
  border-radius: 0 0 10px 10px;
}

#about img {
  margin-top: 20px;
}

/* article section */

section, article, aside {
  text-align: center;
  overflow: auto;
  margin-bottom: 20px;
  border-radius: 10px;
}

article {
  background-color: rgb(240, 240, 255);
}

article h1, article h2 {
  background-color: rgb(220, 220, 255);
  border-bottom: 1px solid rgb(150, 150, 200);
  padding: 6px;
}

article p {
  background-color: rgb(220, 220, 255);
  border-top: 1px solid rgb(150, 150, 200);
  text-align: justify;
  padding: 10px;
}

/* content section */

#content {
  background-color: rgb(230, 230, 255);
  cursor: pointer;
}

#content ul {
  padding-bottom: 10px;
}

#content a {
  color: rgb(75, 75, 150);
  font-weight: 500;
  padding: 0;
}

/* contact section */

#contact {
  background-color: black;
  color: rgb(230, 230, 255);
  width: 100%;
  text-align: center;
  padding: 5px;
  border-radius: 0px;
}

#contact a {
  color: rgb(230, 230, 255);
  font-weight: 400;
}

/* media queries */

@media (min-width: 1024px) {
  #navbar {
    text-align: end;
  }
  header, nav, main {
    width: 60%;
    min-width: 740px;
  }
}

/* Galaxy S9/S9+ landscape */

@media (max-width: 740px) {
  #navbar li {
    padding: 15px;
  }
  header, nav, main {
    width: 100%;
  }
}

/* Galaxy S5, iPhone landscape */

@media (max-width: 660px) {
  #navbar li {
    padding: 10px;
  }
}

@media (max-width: 600px) {
  #navbar li {
    padding: 5px;
  }
}

/* dropdown menu */

@media (max-width: 540px) {
  li a {
    display: block;
    padding: 6px;
  }
  #navbar ul {
    display: none;
    background-color: rgb(100, 100, 120);
    position: relative;
    float: right;
    clear: both;
    width: 50%;
  }
  #navbar li {
    display: block;
    font-size: 1em;
    padding: 0px;
    border-color: rgb(50, 50, 50);
    border-style: solid;
    border-width: 0px 2px 2px 2px;
  }
  #navbar li:hover {
    box-shadow: inset 1px 1px 2px 0px rgb(210, 210, 210),
                inset -1px -1px 2px 0px rgb(210, 210, 210);
  }
  .menu {
    display: block;
  }
}

/* iPhone 6/7/8 Plus portrait */

@media (max-width: 420px) {
  h1, h2 {
    float: right;
    width: 65%;
    font-size: 1.2em;
    text-align: start;
    margin: 0;
    border-radius: 10px;
  }
  h3 {
    font-size: 0.9em;
    text-align: center;
    padding-bottom: 8px;
    margin: 0;
  }
  section, article, aside {
    margin-bottom: 4px;
  }
  #about {
    border-radius: 0;
  }
  #about img {
    float: none;
    width: 29%;
    padding: 8px;
    margin: 0;
  }
  article h1, article h2 {
    background-color: rgb(240, 240, 255);
    border-bottom: 0;
    padding: 4px 16px 0 0;
  }
  article p {
    display: none;
    width: 100%;
    padding: 8px;
    margin: 60px 0 15px 0;
  }
  article img {
    float: left;
    width: 35%;
    padding: 8px;
  }
  #content {
    margin-bottom: 0;
    border-radius: 0;
  }
  #content ul {
    display: none;
  }
  #contact {
    margin-top: 0;
  }
  #guide:hover, #tickets:hover, #dressing:hover {
    box-shadow: 0px 1px 3px 0px rgb(210, 210, 210),
                0px -1px 3px 0px rgb(210, 210, 210);
  }
}

/* iPhone 6/7/8 portrait */

@media (max-width: 380px) {
  #about img {
    width: 25%;
  }
  #contact {
    padding: 4px;
  }
}

/* Galaxy S5, S9 portrait */

@media (max-width: 360px) {
  #about img {
    width: 24%;
  }
  #contact {
    min-height: 47px;
    padding: 2px;
    font-size: 0.9em;
  }
}

/* iPhone 5/SE portrait */

@media (max-width: 320px) {
  #contact {
    padding: 5px;
    font-size: 0.8em;
  }
}
            
          
!
            
              $(document).ready(() => {

  // toggle the Related Content
  $('#content h4').on('click', () => {
    $('#content ul').toggle();
  });

  // toggle the Blog Posts
  $('img').on('click', event => {
    $(event.currentTarget).siblings('p').toggle();
  });

  // toggle the Menu
  $('.menu').on('click', () => {
    $('#navbar ul').toggle();
  });

  // hide dropdown Menu on click if width <= 540px 
  $(document).on('click', event => {
    if (!$(event.target).closest('.menu').length & window.matchMedia('(max-width: 540px)').matches) {
      $('#navbar ul').fadeOut(400);
    }
  });

  // handling the window resize for navbar Menu
  $(window).resize(() => {
    if (window.matchMedia('(max-width: 540px)').matches) {
      $('#navbar ul').hide();
    } else if (!window.matchMedia('(max-width: 540px)').matches) {
      $('#navbar ul').show();
    }
  });

  // light mode
  $('.light').on('click', () => {
    $('body').css({
      color: 'rgb(0, 0, 0)',
      backgroundColor: 'rgb(255, 255, 255)',
    });
    $('#guide a, #content a').css({
      color: 'rgb(75, 75, 150)'
    });
    $('article').css({
      backgroundColor: 'rgb(240, 240, 255)'
    });
    $('article p').css({
      backgroundColor: 'rgb(220, 220, 255)',
      borderTop: '1px solid rgb(150, 150, 200)'
    });
    $('#navbar, #contact').css({
      backgroundColor: 'black'
    });
    $('#about, #content').css({
      backgroundColor: 'rgb(230, 230, 255)'
    });
  });

  // light mode media queries
  $('.light').on('click', () => {
    if (window.matchMedia('(max-width: 420px)').matches) {
      // max-width: 420px
      $('article h1, article h2').css({
        backgroundColor: 'rgb(240, 240, 255)',
        borderBottom: '0'
      });
    } else {
      // width > 420px
      $('article h1, article h2').css({
        backgroundColor: 'rgb(220, 220, 255)',
        borderBottom: '1px solid rgb(150, 150, 200)'
      });
    }
  });

  // handling resize for light mode colors
  $(window).resize(() => {
    if (window.matchMedia('(max-width: 420px)').matches & $('body').css('background-color') == 'rgb(255, 255, 255)') {
      $('article h1, article h2').css({
        backgroundColor: 'rgb(240, 240, 255)',
        borderBottom: '0'
      });
    } else if (!window.matchMedia('(max-width: 420px)').matches & $('body').css('background-color') == 'rgb(255, 255, 255)') {
      $('article h1, article h2').css({
        backgroundColor: 'rgb(220, 220, 255)',
        borderBottom: '1px solid rgb(150, 150, 200)'
      });
    }
  });

  // dark mode
  $('.dark').on('click', () => {
    $('body').css({
      color: 'rgb(210, 210, 210)',
      backgroundColor: 'rgb(0, 0, 0)',
    });
    $('#guide a, #content a').css({
      color: 'rgb(230, 230, 255)'
    });
    $('article').css({
      backgroundColor: 'rgb(80, 80, 85)'
    });
    $('article p').css({
      backgroundColor: 'rgb(55, 55, 64)',
      borderTop: '1px solid rgb(0, 0, 0)'
    });
    $('#navbar, #contact').css({
      backgroundColor: 'black'
    });
    $('#about, #content').css({
      backgroundColor: 'rgb(76, 76, 85)'
    });
  });

  // dark mode media queries
  $('.dark').on('click', () => {
    if (window.matchMedia('(max-width: 420px)').matches) {
      $('article h1, article h2').css({
        backgroundColor: 'rgb(80, 80, 85)',
        borderBottom: '0'
      })
    } else {
      $('article h1, article h2').css({
        backgroundColor: 'rgb(55, 55, 64)',
        borderBottom: '1px solid rgb(0, 0, 0)'
      });
    }
  });

  // handling resize for dark mode colors
  $(window).resize(() => {
    if (window.matchMedia('(max-width: 420px)').matches & $('body').css('background-color') == 'rgb(0, 0, 0)') {
      $('article h1, article h2').css({
        backgroundColor: 'rgb(80, 80, 85)',
        borderBottom: '0'
      });
    } else if (!window.matchMedia('(max-width: 420px)').matches & $('body').css('background-color') == 'rgb(0, 0, 0)') {
      $('article h1, article h2').css({
        backgroundColor: 'rgb(55, 55, 64)',
        borderBottom: '1px solid rgb(0, 0, 0)'
      });
    }
  });

});
            
          
!
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