JSFiddle - React, Tailwind, and code Playground

by lun471k

HTML

<!-- INFORMATIONS DE CONTACT -->

	<header id="contact-header">
		<h1>Lorem ipsum.</h1>
		<div id="contact-information"><div class="sub-contact-information">Lorem ipsum dolor sit amet,</div> <div class="sub-contact-information">consectetur adipisicing elit.</div></div>
	</header>

	<main>

		<!-- MENU PRINCIPAL -->

		<nav id="main-menu">
			<ul>
				<li><a href="#contact-header">Lorem ipsum.</a></li>
				<li><a href="#experience-header">Lorem ipsum.</a></li>
				<li><a href="#skills-header">Lorem ipsum.</a></li>
				<li><a href="#portfolio-header">Lorem ipsum.</a></li>
			</ul>
		</nav>

		

		<!-- CONTENU PRINCIPAL -->

		<!-- EXPÉRIENCE -->
		<section id="experience-section">
			<header id="experience-header">
				<h1 class="section-title font-effect-3d"><a class="show-experience" href="#">Lorem ipsum.</a></h1>
			</header>

			<article id="experience-content" class="content">
				<header class="">
					MON CONTENU EXPERIENCE
				</header>
			</article>
		</section>

	</main>

CSS

html,body{
	cursor:default;
	user-select:none;
	-webkit-user-select:none;
	font-family:"Open Sans";
	background-color:#DDD;
	height:100%;
	width:100%;
}
html:hover main{
	-webkit-filter:blur(0px);
	-webkit-transition: all 0.5s ease-in;

}
main{
	-webkit-filter:blur(8px);
	-webkit-transition: 120s ease-out;
}
#contact-header{
	margin:0 auto;
	width:auto;
	text-align:center;
	text-shadow:5px 5px 2px #FFF;
	-webkit-transition: all 0.5s cubic-bezier(0.200, -0.320, 0.855, 1.385);
}
.section-title{
	font-family:"Roboto", "Tangerine";
	color:transparent;
	-webkit-filter: blur(1px);
	text-shadow:0px 0px 5px #FFF;
	width:auto;
	 -webkit-transition: all 0.6s cubic-bezier(0.200, -0.320, 0.855, 1.385);
	 width:300px;
}
.section-title .show-portfolio
{
	color:#91cfa1;
}
section .section-title:hover
{
	color:#AAA;
	text-outline:#000;
	-webkit-filter: blur(0.1px);
	text-shadow:0px 1px 5px #AAA;
	cursor:default;
	user-select:none;
	-webkit-user-select:none;
}
section .section-title a:hover
{
	text-decoration: none;
	 -webkit-transition: all 0.6s cubic-bezier(0.200, -0.320, 0.855, 1.385);
}
.content, .content-shown
{
	z-index:10000;
	position:absolute;
	
	width:80%;
	height:80%;

	
	font-family:"tangerine";
	font-size:2em;
}
.content{
	top:-200px;
	left:-500px;
	opacity:0.5;
	height:0px;
	width:0px;
	color:rgba(255,255,255,0);
	padding:0;
	margin:0;
	background-color:#FFF;
	-webkit-transition: 0.5s cubic-bezier(0.200, -0.320, 0.855, 1.385);
	-moz-transition: 0.5s cubic-bezier(0.200, -0.320, 0.855, 1.385);
	-ms-transition: 0.5s cubic-bezier(0.200, -0.320, 0.855, 1.385);
	-o-transition: 0.5s cubic-bezier(0.200, -0.320, 0.855, 1.385);
	transition: 0.5s cubic-bezier(0.200, -0.320, 0.855, 1.385);
}
.content-shown{
	top:13%;
	left:10%;
	opacity:1;
	color:rgba(255,255,255,1);
	border-radius:8px;
	box-shadow:3px 3px 15px #333;
	padding:20px;
	
	-webkit-transition: 0.5s cubic-bezier(0.200, -0.320, 0.855, 1.385), color 1.3s cubic-bezier(0.100, 1.650, 0.990, -0.560), background-color 1.2s...

JavaScript

$('.section-title a').click(function(){

			var section =  $(this).attr('class').substr($(this).attr('class').indexOf('w-')+2,$(this).attr('class').length);
			
			$.each($('.content-shown'),function(){
				if($(this).attr('id') != (section+"-content"))
					$(this).removeClass('content-shown').addClass('content');
			});
			if($('#'+section+'-content').hasClass('content-shown'))
			{
				$('#'+section+'-content').removeClass('content-shown').addClass('content');
				
			}
			else
			{
				$('#'+section+'-content').removeClass('content').addClass('content-shown');
				$('.content-shown').click(function(event){
				    event.stopPropagation();
				});
				setTimeout(function(){$('html').click(function(){
					$('#'+section+'-content').removeClass('content-shown').addClass('content');
					$('html').off('click');
				});},100);
			}

		});