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 includes JSX processing.

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

Packages

Add Packages

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.

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

              
                <div class="container-fluid">

    
      <div class="nav">
        <a href="#">About</a>

      </div>
    </div>
  
    <div class="row top">
		<div class="text-center col-xs-12 col-sm-6 col-sm-offset-3">
			<h1 style="background-color:white; padding: 10px 13px; margin-top:-3px">Right Good Stuff.</h1>
		</div>
		<div class="col-sm-3 col-xs-5">
		<!--<img class="random" src="https://66.media.tumblr.com/819ecc91dd67989a0dfe18c2e9b9c9cb/tumblr_oarsbsYXAG1uupkrso1_400.png">-->
		</div>
	</div>

<div class="centered">
	
		<a class="boom button" href="http://www.booooooom.com/2016/07/08/invention-of-the-day-handheld-device-is-like-shazam-for-fonts/" target="_blank"><div class="balloon"><p>Handy Font Scanner</p></div></a>
		<a class="itsnicethat button" href="http://www.itsnicethat.com/news/mastercard-brand-mark-refresh-by-pentagram-150716" target="_blank"><div class="balloon"><p>Mastercard Rebrand</p></div></a>
		<a class="designmilk button" href="http://design-milk.com/minimalist-japanese-inspired-sneakers-bauhaus-twist/" target="_blank"><div class="balloon"><p>Bauhaus Sneakers</p></div></a>
		<a class="boom button" href="http://www.booooooom.com/2016/07/28/another-thing-from-good-thing/" target="_blank"><div class="balloon"><p>Another/Good Thing</p></div></a>
		<a class="eyeondesign button" href="http://eyeondesign.aiga.org/why-these-dutch-design-partners-call-themselves-a-team-not-a-studio/" target="_blank"><div class="balloon"><p>Dutch Design Partners</p></div></a>

		<a class="itsnicethat button" href="http://www.itsnicethat.com/news/david-shrigley-london-is-open-290716" target="_blank"><div class="balloon"><p>#LondonIs</p></div></a>
		<a class="eyeondesign button" href="http://eyeondesign.aiga.org/how-type-can-tell-the-history-of-your-city/" target="_blank"><div class="balloon"><p>Type + City History</p></div></a>
		<a class="button itsnicethat" href="http://www.itsnicethat.com/articles/nicer-tuesdays-july-review-270716" target="_blank"><div class="balloon"><p>Designs Layers</p></div></a>
		<a class="designmilk button" href="http://design-milk.com/furniture-goes-2d-3d/" target="_blank"><div class="balloon"><p>2-d to 3-d Furniture</p></div></a>
    <a class="designmilk button" href="http://design-milk.com/scratch-off-chart-essential-novels-keep-track-read/" target="_blank"><div class="balloon"><p>Scratch off Novel</p></div></a>
  <a class="dezeen button" href="http://www.dezeen.com/2016/08/01/dyslexic-designers-challenge-stigma-disorder-designjunction-exhibition-london-design-festival-2016/" target="_blank"><div class="balloon"><p>Dyslexic Designers</p></div></a>
  <a class="architizer button" href="http://architizer.com/blog/italy-museums/" target="_blank"><div class="balloon"><p>Beyond Rome</p></div></a>
  <a class="aisle button" href="http://www.aisleone.net/2016/05/04/build-nike-track-and-field/" target="_blank"><div class="balloon"><p>Build: Nike</p></div></a>
  <a class="colossal button" href="http://www.thisiscolossal.com/2016/08/cycle-human-form-animation-kouhei-nakama/" target="_blank"><div class="balloon"><p>Cycle</p></div></a>

  <a class="form button" href="http://formfiftyfive.com/2016/07/progress-packaging-2/" target="_blank"><div class="balloon"><p>Progress Packaging</p></div></a>

  <a class="beautiful button" href="http://beautifuldecay.com/2010/05/12/would-you-bu-this-milk/" target="_blank"><div class="balloon"><p>Audree Packaging</p></div></a>
		
  <a class="handsome button" href="http://www.handsomefrank.com/illustrators/thomas-danthony/" target="_blank"><div class="balloon"><p>Thomas Danthony</p></div></a>

		
<audio class="drop">
  <source src="http://travisneilson.com/assets/post-assets/047-poems/sound/water.mp3" type="audio/mp3"></source>
</audio>

</div>
<div class="overlay">
  <div class="about">
    <h2 class="text-center"> About </h2>
    <p> Right Good Stuff is a curated collection of the best of the web. We scour all of our favourite art and design blogs and websites to blah blah blah </p>
      
  </div>
</div>



  

  



              
            
!

CSS

              
                @import url(https://fonts.googleapis.com/css?family=Roboto:400,500,700)
@import url(https://fonts.googleapis.com/css?family=Raleway:400,500,600,700)
body
  background: lightblue
.nav
  padding-top: 13px
.nav a
  font-family: 'Roboto'
  font-size: 16px
  float: right
  margin-right: 30px
  background-color: white
  color: black
  padding: 3px 10px
  text-decoration: none
  link-style-display: none
  

.top
  padding-bottom: 25px
  width: 100%
  margin: 0px

h1
  display: inline-block
  text-align: center
  font-family: futura
  color: black
  font-size: 38px

.centered
  text-align: center
  max-width: 700px
  display: block
  margin: 0 auto


.random
  height: 70px
  margin: 10px
  margin-right: 20px
  float: right
  border-radius: 50%

.random:hover
  transform: scale(1.05) translate(0px, -3px)
  box-shadow: 0px 8px 4px -4px rgba(0,0,0,0.15)
  
.button
  position: relative
  display: inline-block
	
.button img
  display: inline-block
  height: 80px
  width: 80px
  margin-top: 40px
  border-radius: 50%
  box-shadow: 0px 3px 5px rgba(0,0,0,0.2)
  transition: all 150ms ease-in-out
  margin: 13px 23px
  
  
.button img:hover
  transform: scale(1.1) translate(0px, -4px)
  box-shadow: 0px 10px 5px -5px rgba(0,0,0,0.1)
 
.overlay
  position: absolute
  top: 0
  left: 0
  right: 0
  bottom: 0
  background-color: rgba(173, 216,230,0.9)
  display: flex
  justify-content: center
  align-items: center
  overflow: hidden
  opacity: 0
  pointer-events: none
  transition: all 100ms ease-in-out
  
.about
  margin-top: -110px
  position: relative
  width: 500px
  height: 300px
  background: white
  transform: translate(0px,-100px)
  transition: all 500ms cubic-bezier(0.25, 0.35, 0, 1.64)

  border-radius: 2px
  z-index: 2

.about p
  font-size: 18px
  font-family: roboto
  padding: 10px 30px
.about h2
  padding-top: 10px
  
.open
  opacity: 1
  pointer-events: auto
  .about
    transform: translate(0px,0px)

.balloon
  background-color: white
  height: 70px
  width: 110px
  border-radius: 30px 30px 30px 0px
  position: absolute
  display: none
  margin-left: 90px
  margin-top: -40px
  border: 2px black solid
  link-style-type: none
  text-decoration: none
  color: black
  line-height: 1
  font-family: futura
  z-index: 1
  box-shadow: 1px 3px 3px 1px rgba(0,0,0,0.2)
  


.button:hover
  .balloon
    transform-origin: left bottom
    animation: bounce-open 500ms ease-in-out
    display: inline-block
.balloon p
  top: 50%
  transform: translateY(-50%)
  position: absolute
  font-family: Raleway
  font-size: 13px
  font-weight: 500
  right: 0
  left: 0
  padding: 8px
  line-height: 1.4
  text-decoration: underline
  



@keyframes bounce-open
  0%
    opacity: 0
    transform: scale(0.3)
  50%
    opacity: 1
    transform: scale(1.05)
  65%
    transform: scale(.9)
  80%
    transform: scale(1.01)
  90%
    transform: scale(.97)
  100%
    transform: scale(1)
  
  
   




 

  
  
  
  

  
  
  
  
  
@media (max-width: 768px)
  h1
    font-size: 28px
  .random
    float: none
    margin-top: 18px
    height: 65px
  .button img
    margin: 8px
    height: 60px
    width: 60px
  .top
    padding-bottom: 10px
    padding-top: 10px
  .balloon
    margin-left: 57px
    margin-top: -45px
    
  .about
    height: 300px
    width: 300px
  .nav a
    margin-right: 48px
  .centered
    width: 100%
  a:nth-child(4n)
    .balloon
      border-radius: 30px 30px 0px 30px
      margin-left: -90px
      margin-top: -45px
      transform-origin: right bottom
  a:nth-child(4n).button:hover
    .balloon
      transform-origin: right bottom
  

		

  
  
  




  
              
            
!

JS

              
                $("a.boom").append("<img class='button-switch'	src='https://67.media.tumblr.com/e40508b3dda5229a6e868eaaccf428a3/tumblr_obbzjhG6RL1uupkrso1_100.png'>");
$("a.itsnicethat").append("<img src='https://66.media.tumblr.com/b40de9b52afda7468e5464d1918dd23a/tumblr_oaq9oqdxDv1uupkrso1_400.png'>");
$("a.designmilk").append("<img src='https://67.media.tumblr.com/6a10138a8b776645805bdf04360cce9d/tumblr_obbzd0SvhJ1uupkrso1_250.png'>")
$("a.eyeondesign").append("<img src='https://66.media.tumblr.com/7fc3dae33af52d89dd6e7a6471d92d93/tumblr_oarrouyLWC1uupkrso1_400.png'>")

$("a.dezeen").append("<img src='https://66.media.tumblr.com/b9bb42ec5144ff8ded841c0aa8ee5f79/tumblr_obc0uvDtdR1uupkrso1_250.jpg'>")

$("a.architizer").append("<img src='https://66.media.tumblr.com/59cfcb27553b6722e869fd9818159075/tumblr_obc14xsQeD1uupkrso1_400.jpg'>")

$("a.aisle").append("<img src='https://65.media.tumblr.com/1d2a33bdaaae733c21a110b9228aac9f/tumblr_obc1rj10j81uupkrso1_250.png'>")


$("a.colossal").append("<img src='https://67.media.tumblr.com/45f71c98c0a3cdb8b01f5766bc50a54c/tumblr_obc20tFtcs1uupkrso1_400.jpg'>")


$("a.form").append("<img src='https://65.media.tumblr.com/fd94c5eeaff543461cf5f8142287e0e5/tumblr_obc2puiAhy1uupkrso1_400.jpg'>")


$("a.beautiful").append("<img src='https://66.media.tumblr.com/4a520e91f7f4589f661a9686d2049473/tumblr_obc30pRkJp1uupkrso1_250.jpg'>")

$("a.handsome").append("<img style='background-color: white' src='https://67.media.tumblr.com/2ed315499bc33b9acc7bb143964f3b24/tumblr_obc39ec8J71uupkrso1_250.png'>")

/*
$(".button-switch").mouseover(function(){
this.src='https://66.media.tumblr.com/18299d456717ba77e6c1d9670ce9f3d9/tumblr_oapzc7QB2e1uupkrso1_100.png';
}).mouseout(function(){
this.src='https://65.media.tumblr.com/7510be5ac587b09cbf38e7dd3b968b04/tumblr_oaot6lEtzA1uupkrso1_75sq.png';
});
*/
$(".nav a").click(function(){
  $(".overlay").addClass("open")
  
});
$(".overlay").click(function(){
  $(".overlay").removeClass("open")
});
var drop=$(".drop")[0];

$(".button").mouseenter(function(){
  $(".drop")[0].play();
});


  
  

              
            
!
999px

Console