JSFiddle - React, Tailwind, and code Playground

by Ken Z

HTML

<body>

	<header>
    		<div class="header-info-nav">
            
				<a class="about" href="/about">ABOUT</a>
                <a class="contact" href="/contact">CONTACT</a>
				<a class="blog" href="http://www.chrisriesner.tumblr.com" target="_blank">BLOG</a>
            
            </div>
            
            
    		<div class="header-logo-nav">
                <a href="index.html">
                <div class="logo-text"> 
                    CHRIS
                        <img class="logo" src="img/logo-cr-photo.png" width="33" height="33" alt="CR LOGO">
                    RIESNER
                </div>
                </a>
			</div>
        
        
		
            


	</header>


    <nav class="serries">
    	<div class="nav-serries-open">
            <a href="#"><div class="nav-line nav-line-top"></div></a>
                <div class="nav-serries-inner">
                    <ul>
                        <li><h1>SERRIES</h1></li>
                        <li><a href="#">LIVE YOUNG</a></li>
                        <li><a class="current" href="#">KEEP MOVING</a></li>
                        <li><a href="#">FLOATING</a></li>
                        <li><a href="#">INNER TREES</a></li>
                        <li><a href="#">WITHOUT YOU</a></li>
                    </ul>
                    <ul>
                        <li><h1>STORIES</h1></li>
                        <li><a href="#">SONORA TRIP</a></li>
                        <li><a href="#">TRIFECTA</a></li>
                        <li><a href="#">BIKES N ART</a></li>
                        <li><a href="#">FIRE N TUNES</a></li>
                    </ul>
                    <ul>
                        <li><h1>INFO</h1></li>
                        <li><a href="#">ABOUT</a></li>
                        <li><a href="#">CONTACT</a></li>
                        <li><a href="#">BLOG</a></li>
                    </ul>
                </div> <!-- SERRIES-INNER -->
            <a href="#"><div class="nav-line...

CSS

/*********************************************
PHOTO PORTFOLIO GLOBAL STYLES
**********************************************/


/* RESET */

body {
	margin:0;
	padding:0 0 0 0;
	background-color:#FCFCFC;
	
	overflow-y:hidden;
}

html * {
  color-profile: sRGB;
  rendering-intent: auto; }

*{
	margin:0;
	padding:0;
	outline:0;
	outline:none;
	border:0 none;
	text-decoration:none;
	vertical-align: baseline;
	}

a img, :link img, :visited img {
	border: 0;
	}

img{border:0}

ul, ol, li{
	list-style:none;
	padding:0;
	margin:0;
}



/* ---------------------------------- */



/* GLOBAL STYLES*/



*{
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size:8px;
	font-style:normal;
	font-weight:normal;
	line-height:12px;
	letter-spacing:2px;
	font-color:#808080;
}

p{
	font-size: 12px;
	line-height: 17px;
	letter-spacing: 1px;
	text-indent: 38px;
	margin-top: 5px;
	padding: 5px 15px;
	color:#666;
	text-align:center;

}

h1{
	font-weight:bold;
	letter-spacing:2px;
	color:#808080;

}
	
#container {
	width:100%;
	height:100%;
	margin:0 auto;
}


a{
	text-decoration:none;
	outline:none;
	color:#808080;
}


a:hover{
	color:#C30;
	opacity:.7;
}



::-moz-selection {
	color: white;
	background: #999;
	text-shadow: none; 
	}
	
::selection {
	color: white;
	background: #999;
	text-shadow: none; 
	}
	   

.less{display:none;}

/* use to turn on and off laoding */
.loading-screen{display:none;}


/* ---------------------------------- */







/* HEADER LOGO PAGE TOP */

header{
	display:block;
	width: 420px;
	height: 60px;
	
	position:fixed;
	top:-41px;
	left:50%;
	margin-left:-210px;
	
	padding-top: 8px;
	
	text-align: center;	
	
}

.header-info-nav {
	border-bottom: 1px solid #808080;
	width:280px;
	
	display:inline-block;

}

.header-info-nav a { 
	font-weight:bold;
	letter-spacing:2px;
	color:#808080;
	
	padding: 10px;
	display:inline-block;

}


/*.about {
	border-right: 1px solid #808080;
}

.blog {
	border-left: 1px solid #808080;
}
*/

.contact {
	border-right:...

JavaScript

$(function () {   
	
	
	//IMAGE-CONTAINER
	
		var distance = 600,
			docWidth = $(window).width(),
			scrollPos;
		
		// ARROW-NEXT
		$(".arrow-next").click(function() {
			$("html:not(:animated), body:not(:animated)").animate(
				// amount to scroll
				{scrollLeft: "+=" + docWidth}, 400);
				
			   
		
		}); // /ARROW-NEXT
		
		
		// GALLERY 100% height
		$('.image-container').click(function(){
			$('.image-container img').animate({'height': '100%'},900) 
			.animate({'margin': '0'},900); 
		
		});
	
		//REMOVE HEIGHT ?
		/*$('.image-container').click(function(){
			$('.image-container img').animate({'height': '0'},900)
			.animate({'margin': '0'},900); 
		
		});*/
	
	
	
	
	// PAGE LEFT
		$('.nav-serries-open').hover(function(){
			$('.nav-line-top').animate({'top': 0},400);
			$('.nav-line-bottom').animate({'top': 0},400)
			$('.nav-serries-inner').delay(0).slideDown(); 
		});
		
		$('nav.serries').mouseleave(function(){
			$('.nav-line-top').animate({'top': 150},400);
			$('.nav-line-bottom').animate({'top': 150},400)
			$('.nav-serries-inner').delay(200).slideUp(); 
			
		})
		
		
		
	// PAGE TOP
		// SHOW SERRIES INFO BOX
		$('.header-logo-nav').hover(function(){
			$('header').delay(200).animate({'top': -8},400); 
		});
		
		// HIDE SERRIES INFO BOX
		$('header').mouseleave(function(){
			$(this).delay(0).animate({'top': -41},400); 
		})
		
		
	// PAGE BOTTOM
		// SHOW SERRIES INFO BOX
		$('.serries-title, .serries-material').hover(function(){
			$('.serries-info-box').delay(200).animate({'bottom': 230},600); 
		});
		
		// HIDE SERRIES INFO BOX
		$('.serries-info-box').mouseleave(function(){
			$(this).delay(0).animate({'bottom': 0},600); 
		});
	
});