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

              
                <section class="grid">
	<a href="http://www.reddit.com/r/design_critiques">		     
      <i class="ion-ribbon-a"></i>
      <span>/r/design_critiques</span>		
      <section class="info">
        <ol>
          <li>Constructive criticism is paramount</li>
          <li>Identify both positives and negatives</li>
          <li>Provide solutions or advice to fix the negatives</li> 
        </ol>
      </section>
    </a>
  <a href="http://www.reddit.com/r/webhosting">		
    <i class="ion-ios7-cloud"></i>
    <span>/r/webhosting</span>			
    <section class="info">
      <ol>
        <li>This is a place to discuss everything related to Webhosting</li>
        <li>shared hosting to dedicated servers, and everything in between</li>
        <li>Post reviews of your current and past hosts, pose questions to the community regarding your needs</li>       
      </ol>      
    </section> 
	</a>	
	<a href="http://www.reddit.com/r/crappydesign">		
    <i class="ion-thumbsdown"></i>
    <span>/r/crappydesign</span>			
    <section class="info">
      <ol>
        <li>This subreddit is dedicated to calling out crappy design</li>
        <li>KARMAWHORING IS ENCOURAGED IN THIS SUBREDDIT</li>
        <li>It's all about the laughs and enjoying your time here</li>
      </ol>      
    </section>
	</a>
	<a href="http://www.reddit.com/r/userexperience">		
    <i class="ion-ios7-star"></i>
    <span>/r/userexperience</span>		
    <section class="info">
      <ol>
        <li>Sagittis lobortis odio a consectetur lacus pharetra ridiculus in dui dui sit scelerisque nibh ut proin</li>
        <li>Nec arcu tempor pretium nostra dui a a dui ultrices</li>
        <li>Lacus vestibulum luctus lobortis ad nibh hac eu fringilla nisl</li>    
      </ol>      
    </section>
	</a>
	<a href="http://www.reddit.com/r/webdev">		
    <i class="ion-code"></i>
    <span>/r/webdev</span>			
    <section class="info">
      <ol>
        <li>Please provide links that are useful resources and will help out a community</li>
        <li>Please feel free to ask for help or advice, but if you do be as thorough as possible </li>
        <li>Please try to avoid posting memes, screenshots of bad websites or jokes</li> 
      </ol>
    </section> 
	</a>
	<a href="http://www.reddit.com/r/css">		
    <i class="css-logo"></i>
    <span class="css">/r/css</span>		
    <section class="info">
      <ol>
        <li>CSS, short for Cascading Style Sheets, is used almost universally across the web to affect the design and appearance of every website you visit</li>
        <li>Here in /r/css, you've got a place on reddit to talk about CSS</li>
        <li>We welcome all CSS discussion here</li>            
      </ol>      
    </section>
	</a>
	<a href="http://www.reddit.com/r/jquery">		
    <i class="jq-logo"></i>       
    <span class="jquery" >/r/jquery</span>			
    <section class="info">
      <ol>
        <li>News, articles, plugins and tutorials</li>
        <li>jQuery Core, jQuery UI, jQuery Mobile, and other related projects</li>
        <li>We welcome all jQuery (and related) discussion here</li>
      </ol>      
    </section>
	</a>
	<a href="http://www.reddit.com/r/javascript">		
    <i class="js-logo"></i>
    <span>/r/javascript</span>			
    <section class="info">
      <ol>
        <li>Posts must be related to JavaScript, even if indirectly</li>
        <li>Meme posts are prohibited</li>
        <li>If you'd like to show off your latest project, then that's great!</li>            
      </ol>      
    </section>
	</a>
	<a href="http://www.reddit.com/r/php">		
    <i class="php-logo"></i>
    <span class="php">/r/php</span>			
    <section class="info">
      <ol>
        <li>Posts must be related to PHP, even if indirectly</li>
        <li>Do not advertise, unless you are sharing PHP-relevant content</li>
        <li>Keep your personal conflicts private</li>            
      </ol>      
    </section>
	</a>
	<a href="http://www.reddit.com/r/wordpress">		
    <i class="wordpress-logo"></i>
    <span class="wordpress">/r/wordpress</span>			
    <section class="info">
      <ol>
        <li>This is not the place to share your blog or talk about blogging in general</li>
        <li>/r/WordPress is for WordPress discussion not design</li>
        <li>Don't use bitly or similar when posting links or links within comments</li>            
      </ol>      
    </section>
	</a>	
	<a href="http://www.reddit.com/r/talesfromdesigners">		
    <i class="ion-ios7-chatboxes"></i>
    <span>/r/talesfromdesigners</span>		
    <section class="info">
      <ol>
        <li>The subreddit for all your funny, embarrassing or depressing design related stories</li>
        <li>Limit submissions to self posts and keep clients and businesses anonymous</li>
        <li>Don't use bitly or similar when posting links or links within comments</li>            
      </ol>      
    </section>
	</a>
	<a href="http://www.reddit.com/r/webmarketing">		
    <i class="ion-arrow-graph-up-right"></i>
    <span>/r/webmarketing</span>			
    <section class="info">
      <ol>
        <li>This subreddit hosts discussions and links to articles about web marketing</li>
        <li>Email marketing, online PR, social media, SEO, ...</li>
        <li>We are all about the combination of different channels and content types to achieve maximum reach and ROI</li>    
      </ol>      
    </section>
	</a>
	<a href="http://www.reddit.com/r/dotcom">		
    <i class="ion-ios7-world"></i>
    <span>/r/dotcom</span>			
    <section class="info">
      <ol>
        <li>/r/DotCom is dedicated to bootstrapping internet business from the ground up</li>
        <li>Like anything else, building an internet business requires time, dedication and education</li>
        <li>Be wary of anyone promising overnight fortunes</li>    
      </ol>      
    </section>
	</a>
	<a href="http://www.reddit.com/r/somebodymakethis">		
    <i class="ion-ios7-lightbulb"></i>
    <span>/r/somebodymakethis</span>			
    <section class="info">
      <ol>
        <li>Got an idea for something that would be really damn cool, but don't have the time, money, or skills to pull it off yourself?</li>
        <li>Maybe someone else has the resources, but just lacks the idea</li>
        <li>Posts without a SMT: tag will be deleted. You may repost</li>    
      </ol>      
    </section>
	</a>
  <a href="http://www.reddit.com/r/design">		
    <i class="ion-contrast"></i>
    <span>/r/design</span>		
    <section class="info">
      <ol>
        <li>NO MEMES or other types of non-content</li>
        <li>Do not ask for free work</li>
        <li>Don't submit only your own work/projects</li>    
      </ol>      
    </section>
	</a>
</section>
              
            
!

CSS

              
                @import "compass/css3";

$main-color: #2c3e50; //BG COLOR
$secondary-color: #e74c3c; //HOVER COLOR
$icon-size: 100px; // Only changes CSS,JQ,JS,PHP,WP- because I had to use actual images for that.

@import url(https://code.ionicframework.com/ionicons/1.5.2/css/ionicons.min.css);
@import url(https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic&subset=latin,latin-ext);

body,html,p,a,span{
  padding: 0;
  margin: 0;  
  -webkit-font-smoothing: antialiased;  
  color: #fff;
  text-decoration: none;
  font-family: 'Lato', serif; 
  font-weight: 300;
}
.grid {
  width: 100%;
  height: 100%;
  position: absolute;    
  a{
    padding: 0;
    margin: 0;
    position: relative;
    width: percentage(1/5);
    height: percentage(1/3);    
    float: left;    
    overflow: hidden;
    background: $main-color;
    &:-webkit-any-link{
      text-decoration: none;
    }     
    span{
      position: absolute;
      bottom: .6em;
      left: 50%;  
      @include translateX(-50%);
      @include transition (all .5s .1s ease);
      font-size: 1.5em;
      color: #fff;
    }
    i{
      position: absolute;
      left: 50%;
      top: 50%;
      @include transform (translateX(-50%) translateY(-50%));
      @include transition (all .5s .1s ease);
      font-size: 6.8em;
    }    
    .info{
      color: #fff;
      text-decoration: none;  
      position: absolute;
      width: 85%;
      top: 50%;
      left: 50%;
      @include transform (translateX(-50%) translateY(-50%));
      li{
        list-style-type: circle;
        @include translateX(150%);
        @include transition(all .5s ease);
        padding: .2em 0;
      }      
    }
    .css-logo{
        background-image: url(https://i.imgur.com/2Sacl3P.png);        
        background-size: 100%;
        background-repeat: no-repeat;        
        width: $icon-size;
        height: $icon-size;
      }
    .jq-logo{
        background-image: url(https://i.imgur.com/H1CXucS.png);
        background-size: 100%;
        background-repeat: no-repeat;           
        width: $icon-size*2;
        height: $icon-size*2;
      }
    .js-logo{
        background-image: url(https://i.imgur.com/LMnGxpE.png);
        background-size: 100%;
        background-repeat: no-repeat;       
        width: $icon-size;
        height: $icon-size;
      }
    .php-logo{
       background-image: url(https://i.imgur.com/QmJasqB.png);
        background-size: 100%;
        background-repeat: no-repeat;        
        width: $icon-size*1.5;
        height: $icon-size*1.5;
      }
    .wordpress-logo{
        background-image: url(https://i.imgur.com/g6DjpC1.png);
        background-size: 100%;
        background-repeat: no-repeat;        
        height: $icon-size;
        width: $icon-size;        
      }    
  }
}
// MEDIA QUERIES //
@media (min-width: 1024px){
  .grid{
    a{
      &:nth-child(odd){
        background-color: lighten($main-color, 3%);
      } 
    }
  }
}
@media (max-width: 1024px){
  .grid{
    a{ width: percentage(1/4);      
      i{
        font-size: 5.8em;
      }
      .css-logo, .js-logo, .wordpress-logo{
        width: $icon-size/1.4;
        height: $icon-size/1.4;
      }
      .jq-logo{
        width:$icon-size*1.3;
        height:$icon-size*1.3;
      }
      .php-logo{
        width:$icon-size;
        height:$icon-size;
      }
      span{
        font-size: 1.25em;
      }
      .info{
        li{
          font-size: 80%;
        }
      }
    }
  }
}
@media (min-width: 751px) and (max-width: 1024px){
  .grid{
    a{
      &:nth-child(odd){
        background-color: $main-color;
      }  
      &:nth-child(1){
        background-color: lighten($main-color, 3%);
      }
      &:nth-child(3){
        background-color: lighten($main-color, 3%);
      }
      &:nth-child(6){
        background-color: lighten($main-color, 3%);
      }
      &:nth-child(8){
        background-color: lighten($main-color, 3%);
      }
      &:nth-child(9){
        background-color: lighten($main-color, 3%);
      }
      &:nth-child(11){
        background-color: lighten($main-color, 3%);
      }
      &:nth-child(14){
        background-color: lighten($main-color, 3%);
      }
    }
  }
}
@media (min-width: 551px) and (max-width: 750px){
  .grid{
    a{
      width: percentage(1/3);
      &:nth-child(odd){
        background-color: lighten($main-color, 3%);
      } 
    }
  }
}
@media (max-height: 620px){
  .grid{
    a{
      i{
        font-size: 4em;
      }
      .css-logo, .js-logo, .wordpress-logo{
        width: $icon-size/1.7;
        height: $icon-size/1.7;
      }
      .php-logo{
        width: $icon-size/1.2;
        height: $icon-size/1.2;
      }
      .jq-logo{
        width:$icon-size*1.15;
        height:$icon-size*1.15;
      }
    }
  }
}

@media (min-width: 321px) and (max-width: 550px){
  .grid{
    a{
      width: percentage(1/2);
      &:nth-child(1){
        background-color: lighten($main-color, 3%);
      } 
      &:nth-child(4){
        background-color: lighten($main-color, 3%);
      } 
      &:nth-child(5){
        background-color: lighten($main-color, 3%);
      } 
      &:nth-child(8){
        background-color: lighten($main-color, 3%);
      } 
      &:nth-child(9){
        background-color: lighten($main-color, 3%);
      } 
      &:nth-child(12){
        background-color: lighten($main-color, 3%);
      } 
      &:nth-child(13){
        background-color: lighten($main-color, 3%);
      }
    }
  }
}

@media (max-width: 320px){
  .grid{
    a{
      width: percentage(1/1);
      &:nth-child(2n+1){
        background-color: lighten($main-color, 3%);
      }
    }
  }
}

// HOVER EFFECTS //

.grid{
  a{
    @include transition (all .5s ease);
    &:hover{      
      z-index: 15;      
      background: $secondary-color;     
    }
  }
}

.grid a:hover .info li{
  @include translateX(0%);
}
.grid a:hover span{
  @include translateX(-500%);
}
.grid a:hover i{
  @include transform (translateX(-450%) translateY(-50%));
}
              
            
!

JS

              
                /* 

--- EDIT: It's now responsive and should work well all around--- 

Made for 4th Community Challenge over at http://www.reddit.com/r/web_design/comments/2f97yk/community_challenge_design_a_link_page/

Icons used- http://ionicons.com (I couldn't find all of the code-language icons as a webfont, so I had to edit them and use them as images.) 

*/

              
            
!
999px

Console