Keeping the web classy
Since 2009
Nick LaDart nladart
nladart
/ index.html
Created
August 12, 2013 16:49
A CodePen by Nick LaDart. Fixed nav hover effect - Testing out a new design concept with a pseudo element hover effect using css-transitions.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <header class="header" role="banner"> | |
| <h1 class="logo"> | |
| <a href="#">Terence <span>Devine</span></a> | |
| </h1> | |
| <div class="nav-wrap"> | |
| <nav class="main-nav" role="navigation"> | |
| <ul class="unstyled list-hover-slide"> | |
| <li><a href="#">About</a></li> | |
| <li><a href="#">Work</a></li> | |
| <li><a href="#" class="is-current">Contact</a></li> |
nladart
/ index.haml
Created
August 15, 2013 04:30
A CodePen by Abderrahmane-TJ. The Mother, the daughter and her children - There is nothing interesting to say about this pen. Other than the fact that it is the first time I had a go on css3 animations and transform.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .c | |
| .intro.animation | |
| .r | |
| .r | |
| .r.red | |
| .r | |
| .r.red | |
| .r.red | |
| .r | |
| .r |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <br> | |
| <h1>Comprehensive SASS/SCSS Tutorial</h1> | |
| <h3>Examine CSS Window</h3><p>or</p><h3><a href="http://dl.dropbox.com/u/32649907/sass-tut.html" target="_blank">View Online</a></h3> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <link href='http://fonts.googleapis.com/css?family=Roboto+Slab' rel='stylesheet' type='text/css'> | |
| <div class="title">A cool effect <span class="small">scroll down to see it</span></div> | |
| <div class="container"> | |
| <section class="stuff1"></section> | |
| <section class="stuff2"></section> | |
| </div> |
nladart
/ index.markdown
Created
August 16, 2013 07:39
A CodePen by Nick LaDart. Cascading Style Sheets - Saw this on Elliot Jay Stock's photo on Instagram (http://instagram.com/p/cYuVYrAiyT/#).
nladart
/ index.html
Created
August 16, 2013 07:45
A CodePen by Simon Coudeville. Animated CSS ribbon - Another CSS ribbon. Using only the :before and :after pseudo elements to build a rounded shadow corner. Or whatever you would call them.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <a class="media-image" href="#"> | |
| <div class="image-frame"> | |
| <div class="image-ratio"> | |
| <img src="http://placeimg.com/250/165/arch" alt=""/> | |
| </div> | |
| <span class="label label-new"> | |
| Label | |
| </span> | |
| </div> | |
| </a> |
nladart
/ index.html
Created
August 16, 2013 07:51
A CodePen by Nick LaDart. HTML5 Range Input - HTML5 Range Input
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <form> | |
| <div> | |
| <label>Product Filter</label> | |
| <input type="range" name="range" min="0" max="4000" step="50" value="1000" /> | |
| <output for="range"></output> | |
| </div> | |
| <div> | |
| <label>Product Filter</label> | |
| <input type="range" name="range1" min="0" max="4000" step="50" value="2000" /> | |
| <output for="range1"></output> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div id="accordian"> | |
| <ul> | |
| <li> | |
| <h3><span class="icon-dashboard"></span>Dashboard</h3> | |
| <ul> | |
| <li><a href="#">Reports</a></li> | |
| <li><a href="#">Search</a></li> | |
| <li><a href="#">Graphs</a></li> | |
| <li><a href="#">Settings</a></li> | |
| </ul> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| a.icon-facebook href="#" | |
| a.icon-twitter href="#" | |
| a.icon-google-plus href="#" | |
| a.icon-tumblr href="#" | |
| a.icon-pinterest href="#" | |
| a.icon-youtube href="#" | |
| a.icon-instagram href="#" |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <section> | |
| <div id="icon-wrapper"> | |
| <a href="map.html"> | |
| <div class="icons"> | |
| <div class="icon-slide-container"> | |
| <img class="slide-icon" alt="The Kite Map Logo" height="100" src="http://thekitemap.com/images/slide/view-map.jpg"> | |
| </div> | |
| </div> | |
| </a> | |