cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

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.

            
              <!-- This pen uses experimental CSS. Enable "experimental web platform features" in order to view this pen correctly. -->

<header>
    <nav>
        <h1><span>187 </span>droptheneedle</h1>
        <ul>
            <li><a class="selected" href="#one"><span>001 </span>home</a></li>
            <li><a href="#two"><span>002 </span>articles</a></li>
            <li><a href="#three"><span>003 </span>about us</a></li>
            <li><a href="#four"><span>004 </span>contact</a></li>
        </ul>
    </nav>
</header>
<main>
   <section id="one">
      <div class="box">
         <article>
   <img src="http://imb.ulximg.com/image/src/artist/1381260982_7d1af5350d0c0d189771c2140409cddf.jpg/26f5f8b2db9331df21ba4303cde26ba9/1381260982_72e46264afba5f79518f039e4f9df0f7.jpg" alt="Action Bronson" />
   <h2>Action Bronson Announces That He’ll Drop A New Project In Early 2016</h2>
   <p>More than likely, Action Bronson will remember 2015 for being a year packed with an equal amount of highs and lows. The Queens rapper dropped his well-received debut album, Mr. Wonderful, in March, and got another season of his entertaining Munchies
      cooking show, “Fuck, That’s Delicious,” off the ground. However, he also took some nasty Ls, like getting ethered in a beef by Tony Starks himself, Ghostface Killah, and sued for his use of samples.</p>
   <p>In any case, Bronsolini’s on that new-year-new-you vibe: He posted on Twitter recently that fans can expect his latest project to drop at the top of the new year.</p>
   <p>Fans should temper their excitement, however, at least until the hirsute rapper shares a downloadable file. Bronson also announced last year that he’d drop the last installment of his and Party Supplies’ excellent Blue Chips series, but there’s since
      been no further information released on that project.</p>
</article>
</div>
<div class="box">
   <article>
      <img src="https://images.rapgenius.com/e4e53b7f03232ca6164f65a599807578.1000x1000x1.jpg" alt="good kid, m.A.A.d city" />
      <h2>Kendrick Lamar’s ‘good kid, m.A.A.d city’ Short Film Has Finally Surfaced</h2>
      <p>Back in 2014, news broke that there was a short film circulating that was at least inspired by Kendrick Lamar’s classic good kid, m.A.A.d city, and may be an official, artistic piece of the entire presentation of the album. After a few local showings,
         buzz around the film mostly came and went. That was until it officially surfaced online Thursday morning.</p>
      <p>Directed by Kahlil Joseph, m.A.A.d is more of a collection of vibrant images set to Kendrick’s songs than an actual film, but it makes for interesting viewing nonetheless. K.Dot appears in the 15-minute film only via old home video from 1992, and
         briefly, so his connection to the short is almost entirely through his music.</p>
      <p>As of now the film has only been shown at a few film festivals and likely was never meant to be seen otherwise. While Kendrick initially toyed with the idea of an official GKMC short film, Joseph’s film never became that. Instead it was simply linked
         to Kendrick, and with the infusion of old home footage it obviously has the rapper’s blessing. In fact, according to DJ Booth, m.A.A.d was created after K. Dot and Joseph collaborated to create a video meant to be shown during Kendrick’s set
         on Kanye West’s Yeezus tour, and eventually some of that footage became Joseph’s film.</p>
   </article>
</div>
<div class="box">
   <article>
      <img src="http://img2-ak.lst.fm/i/u/arO/2cc0be9e4b114e3fcea3ecaf64f7c4d1" alt="Isaiah Rashad" />
      <h2>Isaiah Rashad’s ‘Park’ Is A Perfect Precursor To His New Album, ‘The Sun’s Tirade’</h2>
      <p>If you want to know where Isaiah Rashad has been, his journey since Cilvia Demo is full of survival. He recently revealed his past addiction to Xanax and alcohol slowed his progress as an artist, and almost got him dropped from TDE. Luckily, ZayWop
         overcame that and has released his sophomore album, The Sun’s Tirade.</p>
      <p>The album is 17 tracks in length, and holds features from Kendrick Lamar, Jay Rock, SZA, Syd, and more. Songs like “4r Da Squaw” and “Free Lunch” come straight out of the Cilvia Demo sound, but Isaiah makes it known that he’s evolved since throughout.
         He’s using plenty of diverse producers, such as Mike Will Made It and DK The Punisher. An early favorite is “Stuck in the Mud” because you can’t beat those collaborations with SZA since the two make a perfect match.</p>
      <p>As for the title, it’s hard to interpret based on the subject matter found on the album. A tirade is considered to be a lengthy, mostly angry form of criticism or accusation. While the concepts of each song don’t exactly scream out happiness, they
         don’t come off as anger. Maybe The Sun’s Tirade is more-so a reflection of how the world is looking at him with everything that happened since his first album.</p>
   </article>
      </div>
   </section>
   <section id="two">
      <div class="box">
         <figure>
            <img src="http://www.puna.nl/wp-content/uploads/2016/03/1373305573_0c9dd50e8cdbae0eb2e397f53d8fc97c.jpg" alt="Freddie Gibbs" />
            <figcaption>Freddie Gibbs: Shadow of a Doubt</figcaption>
         </figure>
         <article id="homepage">
            <p>After dropping last year’s Piñata with Madlib and two subsequent EPs, Freddie Gibbs is back with his third full-length studio album. Shadow of a Doubt features over a dozen wide-ranging names contributing beats, from Canadian hitmaker Boi-1da to 808 Mafia’s Tarentino, and his roots and aspirations have never been clearer.</p>
            <p>Freddie Gibbs doesn’t believe in resting on his laurels. After dropping last year’s Piñata with Madlib at the helm — the rapper’s most commercially and critically successful project to date — he could have taken some well-deserved time off. Instead, he toured non-stop and played festivals, put out two EPs The Tonite Show with the Worlds Freshest and Pronto, and last but not least, became a father.</p>
            <p>Now with little advance notice, and a raised middle finger to Q4 release schedules and anyone foolish enough to be making their best-of year-end lists early, the pride of Gary, Ind. is back with his third full-length studio album. A quick scan of the credits reveals the biggest difference between Shadow of a Doubt and his last LP—instead of one singular producer, there’s over a dozen wide-ranging names contributing beats here from Canadian hitmaker Boi-1da to 808 Mafia’s Tarentino. While the final result is less cohesive, and could benefit from trimming two or three songs, there’s no denying Gibbs’ versatility. </p>
            <p class="last">If there’s any question as to whether or not acclaim has mellowed the man who frequently refers to himself as both "Gangsta Gibbs" and "Freddie Corleone", look no further than the two tracks that bookend the record. The sparse, atmospheric "Rearview", which opens with a "Welcome to Los Angeles International Airport" P.A., sees the rapper offer up a bullet point summary of his career to date before dismissing would-be copycats with trademark precision. In contrast, "Cold Ass Nigga" sees Gibbs with two feet on the gas, with frequent Kanye West collaborator Mike Dean providing a suitably urgent, glitchy trap beat. It’s nothing like anything else in Gibbs’ vast catalogue (its closest spiritual companion might be "Old English", his 2014 track with A$AP Ferg and Young Thug) and it’s proof that the 33 year old is still more than willing to push himself out of his sonic comfort zone.</p>
         </article>
      </div>
   </section>
   <section id="three">
            <div class="box">
         <article>
   <img src="http://imb.ulximg.com/image/src/artist/1381260982_7d1af5350d0c0d189771c2140409cddf.jpg/26f5f8b2db9331df21ba4303cde26ba9/1381260982_72e46264afba5f79518f039e4f9df0f7.jpg" alt="Action Bronson" />
   <h2>Action Bronson Announces That He’ll Drop A New Project In Early 2016</h2>
   <p>More than likely, Action Bronson will remember 2015 for being a year packed with an equal amount of highs and lows. The Queens rapper dropped his well-received debut album, Mr. Wonderful, in March, and got another season of his entertaining Munchies
      cooking show, “Fuck, That’s Delicious,” off the ground. However, he also took some nasty Ls, like getting ethered in a beef by Tony Starks himself, Ghostface Killah, and sued for his use of samples.</p>
   <p>In any case, Bronsolini’s on that new-year-new-you vibe: He posted on Twitter recently that fans can expect his latest project to drop at the top of the new year.</p>
   <p>Fans should temper their excitement, however, at least until the hirsute rapper shares a downloadable file. Bronson also announced last year that he’d drop the last installment of his and Party Supplies’ excellent Blue Chips series, but there’s since
      been no further information released on that project.</p>
</article>
</div>
<div class="box">
   <article>
      <img src="https://images.rapgenius.com/e4e53b7f03232ca6164f65a599807578.1000x1000x1.jpg" alt="good kid, m.A.A.d city" />
      <h2>Kendrick Lamar’s ‘good kid, m.A.A.d city’ Short Film Has Finally Surfaced</h2>
      <p>Back in 2014, news broke that there was a short film circulating that was at least inspired by Kendrick Lamar’s classic good kid, m.A.A.d city, and may be an official, artistic piece of the entire presentation of the album. After a few local showings,
         buzz around the film mostly came and went. That was until it officially surfaced online Thursday morning.</p>
      <p>Directed by Kahlil Joseph, m.A.A.d is more of a collection of vibrant images set to Kendrick’s songs than an actual film, but it makes for interesting viewing nonetheless. K.Dot appears in the 15-minute film only via old home video from 1992, and
         briefly, so his connection to the short is almost entirely through his music.</p>
      <p>As of now the film has only been shown at a few film festivals and likely was never meant to be seen otherwise. While Kendrick initially toyed with the idea of an official GKMC short film, Joseph’s film never became that. Instead it was simply linked
         to Kendrick, and with the infusion of old home footage it obviously has the rapper’s blessing. In fact, according to DJ Booth, m.A.A.d was created after K. Dot and Joseph collaborated to create a video meant to be shown during Kendrick’s set
         on Kanye West’s Yeezus tour, and eventually some of that footage became Joseph’s film.</p>
   </article>
</div>
<div class="box">
   <article>
      <img src="http://img2-ak.lst.fm/i/u/arO/2cc0be9e4b114e3fcea3ecaf64f7c4d1" alt="Isaiah Rashad" />
      <h2>Isaiah Rashad’s ‘Park’ Is A Perfect Precursor To His New Album, ‘The Sun’s Tirade’</h2>
      <p>If you want to know where Isaiah Rashad has been, his journey since Cilvia Demo is full of survival. He recently revealed his past addiction to Xanax and alcohol slowed his progress as an artist, and almost got him dropped from TDE. Luckily, ZayWop
         overcame that and has released his sophomore album, The Sun’s Tirade.</p>
      <p>The album is 17 tracks in length, and holds features from Kendrick Lamar, Jay Rock, SZA, Syd, and more. Songs like “4r Da Squaw” and “Free Lunch” come straight out of the Cilvia Demo sound, but Isaiah makes it known that he’s evolved since throughout.
         He’s using plenty of diverse producers, such as Mike Will Made It and DK The Punisher. An early favorite is “Stuck in the Mud” because you can’t beat those collaborations with SZA since the two make a perfect match.</p>
      <p>As for the title, it’s hard to interpret based on the subject matter found on the album. A tirade is considered to be a lengthy, mostly angry form of criticism or accusation. While the concepts of each song don’t exactly scream out happiness, they
         don’t come off as anger. Maybe The Sun’s Tirade is more-so a reflection of how the world is looking at him with everything that happened since his first album.</p>
   </article>
      </div>
   </section>
   <section id="four">
         <div class="box">
         <figure>
            <img src="http://www.puna.nl/wp-content/uploads/2016/03/1373305573_0c9dd50e8cdbae0eb2e397f53d8fc97c.jpg" alt="Freddie Gibbs" />
            <figcaption>Freddie Gibbs: Shadow of a Doubt</figcaption>
         </figure>
         <article id="homepage">
            <p>After dropping last year’s Piñata with Madlib and two subsequent EPs, Freddie Gibbs is back with his third full-length studio album. Shadow of a Doubt features over a dozen wide-ranging names contributing beats, from Canadian hitmaker Boi-1da to 808 Mafia’s Tarentino, and his roots and aspirations have never been clearer.</p>
            <p>Freddie Gibbs doesn’t believe in resting on his laurels. After dropping last year’s Piñata with Madlib at the helm — the rapper’s most commercially and critically successful project to date — he could have taken some well-deserved time off. Instead, he toured non-stop and played festivals, put out two EPs The Tonite Show with the Worlds Freshest and Pronto, and last but not least, became a father.</p>
            <p>Now with little advance notice, and a raised middle finger to Q4 release schedules and anyone foolish enough to be making their best-of year-end lists early, the pride of Gary, Ind. is back with his third full-length studio album. A quick scan of the credits reveals the biggest difference between Shadow of a Doubt and his last LP—instead of one singular producer, there’s over a dozen wide-ranging names contributing beats here from Canadian hitmaker Boi-1da to 808 Mafia’s Tarentino. While the final result is less cohesive, and could benefit from trimming two or three songs, there’s no denying Gibbs’ versatility. </p>
            <p class="last">If there’s any question as to whether or not acclaim has mellowed the man who frequently refers to himself as both "Gangsta Gibbs" and "Freddie Corleone", look no further than the two tracks that bookend the record. The sparse, atmospheric "Rearview", which opens with a "Welcome to Los Angeles International Airport" P.A., sees the rapper offer up a bullet point summary of his career to date before dismissing would-be copycats with trademark precision. In contrast, "Cold Ass Nigga" sees Gibbs with two feet on the gas, with frequent Kanye West collaborator Mike Dean providing a suitably urgent, glitchy trap beat. It’s nothing like anything else in Gibbs’ vast catalogue (its closest spiritual companion might be "Old English", his 2014 track with A$AP Ferg and Young Thug) and it’s proof that the 33 year old is still more than willing to push himself out of his sonic comfort zone.</p>
         </article>
      </div>
   </section>
</main>
            
          
!
            
              /* html & body */

html, body, header {
   height: 100%;
}

body {
   background-color: #fff;
   color: #000;
   font-family: 'helvetica neue', sans-serif;
   font-size: 62.5%;
}

/* header & nav */

header {
   float: left;
}

header h1 {
   font-size: 3em;
   font-weight: 700;
   margin: 30px 0 0 14%;
}

nav {
   height: 100%;
   position: fixed;
   width: 25%;
}

nav ul {
   bottom: 0;
   margin: 0 0 100px 14%;
   position: absolute;
   transition: margin-bottom 0.4s;
}

nav ul li {
   margin-top: 40px;
}

nav ul li:hover span {
   color: #000;
}

nav ul li a {
   color: #000;
   font-size: 1.4em;
   font-weight: 300;
   text-decoration: none;
   transition: font-size 0.4s, font-weight 0.4s;
}

span {
   color: #eee;
   font-size: 12.6px;
   font-weight: 200;
   margin-right: 10px;
   transition: color 0.8s;
}

.selected {
   font-size: 5em;
   font-weight: 700;
}

/* main */

main {
   float: right;
   margin: 0 2.5%;
   width: 70%;
}

section {
   align-items: flex-start;
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: space-between;
   opacity: 0;
   position: absolute;
   transition: opacity 0.6s;
}

section#one {
   /*display: flex;*/
   opacity: 1;
}

.box {
   flex: 1;
   min-width: 230px;
   padding: 30px 30px 0 0;
}

article#homepage {
   column-count: auto;
   column-gap: 30px;
   column-rule: 1px #eee dotted;
   column-width: 350px;
   margin: 30px 0;
}

h1 {
   font-size: 5em;
   font-weight: 700;
}

h2 {
   font-size: 2em;
   font-weight: 700;
   margin: 20px 0 25px 0;;
}

p {
   font-size: 1.4em;
   font-weight: 200;
   letter-spacing: 0.025em;
   line-height: 1.4em;
   margin-bottom: 25px;
   text-align: justify;
}

.last {
    margin: 0;
}

figure {
   position: relative;
}

figcaption {
   background-color: #000;
   bottom: 0;
   color: #fff;
   font-size: 4em;
   font-weight: 700;
   line-height: 1.2em;
   margin: 30px;
   padding: 10px;
   position: absolute;
}

img {
   max-width: 100%;
}

/* media query */

@media screen and (max-width: 1125px) {
   nav {
      width: 30%;
   }

   main {
      width: 65%;
   }

   figcaption {
      font-size: 3em;
   }
}

@media screen and (max-width: 940px) {
   header h1 {
      font-size: 2em;
   }
   
   span {
      font-size: 8px;
   }
   
   .selected {
      font-size: 3.5em;
   }
}
            
          
!
            
              function main() {
   var anchorItems = document.getElementsByTagName('a');
   var spanItems = document.getElementsByTagName('span');
   var sections = document.getElementsByTagName('section');
   var list = document.getElementsByTagName('ul')[0];

   for (var i = 0; i < anchorItems.length; i++) {
      anchorItems[i].onclick = function() {
         for (var i = 0; i < anchorItems.length; i++) {
            anchorItems[i].classList.remove('selected');
         }
         for (var i = 0; i < sections.length; i++) {
            sections[i].style.opacity = '0';
         }
         this.classList.add('selected');
         var href = this.getAttribute('href');
         document.querySelector(href).style.opacity = '1';
         if (href === '#one') {
            list.style.marginBottom = '100px';
         } else if (href === '#two') {
            list.style.marginBottom = '150px';
         } else if (href === '#three') {
            list.style.marginBottom = '200px';
         } else if (href === '#four') {
            list.style.marginBottom = '250px';
         }
      }
   }
}

window.onload = function() {
   main();
}
            
          
!
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.
Loading ..................

Console