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="card">
		<div class="front">
			<div class="title"><h2>CV Card</h2></div>
			<div class="top">
				<div class="img-container">
					<img src="https://cloud.githubusercontent.com/assets/8037580/18605095/32900176-7cbb-11e6-81c0-65c98e45e4bd.jpg" alt="image">
				</div>
			</div>
			<div class="description">
				<h1>Tom Hardy</h1>
				<p>Actor, Writer, Producer</p>
			</div>
			<div class="list">
				<ul>
					<li><a><i class="fa fa-user"></i>&nbsp;Profile</a></li>
					<li><a><i class="fa fa-gear"></i>&nbsp;Trivia</a></li>
					<li><a><i class="fa fa-film"></i>&nbsp;Filmography</a></li>
					<li><a><i class="fa fa-certificate"></i>&nbsp;Awards &amp; Nominations</a></li>
					<li><a><i class="fa fa-users"></i>&nbsp;Characters in Movies</a></li>
				</ul>
			</div>
		</div>
		<div class="list-content profile">
			<h3>Profile</h3>
			<div class="img-rounded">
				<img src="https://cloud.githubusercontent.com/assets/8037580/18605096/3c7a40e8-7cbb-11e6-8962-55bc7e070186.jpg" alt="image">
			</div>
			<ul class="list-border">
				<li>	
					<strong>
						Real Name:
					</strong>
					Edward Thomas "Tom" Hardy
				</li>
				<li>
					<strong>Birthdate:</strong>
					September 15, 1977
				</li>
				<li>
					<strong>
						Birthplace:
					</strong>
					Hammersmith, London, United Kingdom
				</li>
				 <li>
				 	<strong>
				 		Description:
				 	</strong>
						Hardy made his debut in the television show Band of Brothers in 2001 but he gain critical acclaim in the TV series the take, wuthering heights and his powerful performance in Bronson. He then continues to be in great films transforming into different characters such as Warrior, Locke, Legend,The Dark Knight Rises, The Revenant and Mad Max: Fury Road. 
				 </li>
				 <li>
				 	<strong>
				 		Quote:
				 	</strong>
						We&apos;re all flawed human beings and we all have a cauldron of psychosis which we have to unravel as we grow older and find the way we fit in to live our lives as best as possible.
				 </li>
				 <li>
				 	<strong>
				 		Social:
				 	</strong>
					<a href="https://tomhardyvariations.tumblr.com/" target="_blank" class="btn btn-info"><i class="fa fa-tumblr"></i> </a>&nbsp;
        <a href="https://www.instagram.com/tomhardyholdingdogs/?hl=en" target="_blank" class="btn btn-danger"><i class="fa fa-instagram"></i> </a>   
				
			</ul>
			<p>Disclaimer: Tom Hardy doesn't own any social media account. The social media sites are only fan page dedicated to him.</p>
			<a class="btn-close"><i class="fa fa-times"></i></a>
		</div>
		<div class="list-content movies">
			<h3>Filmography</h3>
			<ul class="list-border">
				<li>
					<h5>2001</h5>
					<span>Film: Black Hawk Down
					<br>
					TV Show: Band of Brothers</span>
				</li>
				<li>
					<h5>2002</h5>
					<span>Film: Star Trek:Nemesis</span>
				</li>
				<li>
					<h5>2004</h5>
					<span>Film: Layer Cake
					<br>
					Stage Credit: Festen</span>
				</li>
				<li>
					<h5>2006</h5>
					<span>Film: Minotaur, Marie Antoinette, Scenes of a sexual nature <br>
					TV Show: A for andromeda, Sweeney Todd </span>
				</li>
				<li>
					<h5>2008</h5>
					<span>Film: Rocknrolla, Bronson <br>
					TV Show: Wuthering Heights</span>
				</li>
				<li>
					<h5>2009</h5>
					<span>Film: Perfect, Thick as thieves <br>
					TV Show: The Take</span>
				</li>
				<li>
					<h5>2010</h5>
					<span>Film: Inception <br>
					Stage Credit: The long red road</span>
				</li>
				<li>
					<h5>2011</h5>
					<span>Film: Tinker Tailor Soldier Spy, Warrior</span>
				</li>
				<li>
					<h5>2012</h5>
					<span>Film: The Dark Knight Rises, Lawless</span>
				</li>
				<li>
					<h5>2013</h5>
					<span>Film: Locke</span>
				</li>
				<li><h5>2014</h5>
					<span>Film: The Drop <br>
					TV Show: Peaky Blinders </span>
				</li>
				<li>
					<h5>2015</h5>
					<span>Film: Child 44, London Road, Mad Max: Fury Road, The Revenant, Legend</span>
				</li>
				<li>
					<h5>2017</h5>
					<span>Film: Dunkirk<br>
					TV Show: Taboo</span>
				</li>
			</ul>
			<p>For a complete list of Tom Hardy's filmography visit <a href="http://www.imdb.com/name/nm0362766/?ref_=nv_sr_1#actor" target="_blank">www.IMDB.com</a></p>
			<a class="btn-close"><i class="fa fa-times"></i></a>
		</div>
		<div class="list-content trivia">
			<h3>Trivia</h3>
			<ol class="list-border">
				<li>
					He loves dogs. 
				</li>
				<li>
					He was awarded the 2003 London Evening Standard Theatre Award for Outstanding
					Newcomer for his performances in both In Arabia We&apos;d All be Kings and for
					his role as Luca in Blood.
				</li>
				<li>
					He made his debut in the war film Black Hawk Down.
				</li>
				<li>
					Hardy has also performed on British and American stages.
				</li>
				<li>
					For the film Bronson he put on three stone (19 kg/42 pounds).
				</li>
				<li>
					He once said &lsquo;I love to do things I haven&apos;t done before&rsquo;. 
					This mentality is probably why his career has been so interesting for us to 
					watch as audiences.
				</li>
				<li>
					Hardy named his childhood dog Max because he was a fan of the film Mad Max.
					For the two people who don&apos;t know, he later went on to play Mad Max 
					in the film Mad Max: Fury Road.
				</li>
				<li>
					He studied at Tower House School and Reed&apos;s School, then at Richmond 
					Drama School, and subsequently at the Drama Centre London.
				</li>
				<li>
					His acting idol is Gary Oldman, somebody he&apos;s now worked with four
					 times, in The Dark Knight Rises, Child 44, Lawless and Tinker Tailor Soldier Spy.
				</li>
				<li>
					Hardy joined Drama Centre London in September 1998, and was taken out early after
					 winning the part of US Army Private John Janovec in the award-winning HBO-BBC 
					 miniseries Band of Brothers.
				</li>
			</ol>
			<p>For more trivia about Tom Hardy visit 
				<a href="http://www.imdb.com/name/nm0362766/bio?ref_=nm_dyk_trv_sm#trivia" target="_blank">
					www.IMDB.com
				</a>
			</p>
			<a class="btn-close"><i class="fa fa-times"></i></a>
		</div>
		<div class="list-content awards">
			<h3>Awards &amp; Nominations</h3>
			<ul class="list-border">
				<li>
					<h4>Academy Award</h4>
					2016: Best Performance by an Actor in a supporting role for
					The Revenant(Nominated)
				</li>
				<li>
					<h4>BAFTA Award</h4>
					2011: Rising Star Award(Won) <br>
					2008: Best Actor: Stuart A Life Backwards(Nominated)
				</li>
				<li>
					<h4>Awards Circuit Community Award</h4>
					2015: Best Performance by an Actor in a supporting role for
					The Revenant(Nominated)
				</li>
				<li>
					<h4>BIFA Award</h4>
					2015: Best Actor for Legend(Won) <br>
					2013: Best Actor for Locke(Nominated)<br>
					2011: Best Supporting Actor for TTSS(Nominated)<br>
					2009: Best Actor for Bronson(Nominated)
				</li>
				<li>
					<h4>Critics Choice Award</h4>
					2016: Best Actor in an Action Movie for MMFR(Won), Best Supporting actor for the Revenant(Nominated)
				</li>
				<li>
					<h4>Chlotrudis Award</h4>
					2015: Locke(Won)
				</li>
				<li>
					<h4>Crime Thriller Award, UK</h4>
					2009: Best Lead Actor for the Take(Nominated)
				</li>
				<li>
					<h4>LA Film Critics Award</h4>
					2014: Best actor for Locke(Won)
				</li>
				<li>
					<h4>Nevada Film Critics society</h4>
					2015: Best Supporting Actor for the Revenant(Won)<br>
					2012: Best Actor for Warrior(Won)
				</li>
				<li>
					<h4>Sant Jordi Award</h4>
					2015: Best Foreign Actor for Locke and The Drop(Won)
				</li>
				<li>
					<h4>Satellite Award</h4>
					2015: Best Actor for Legend (Nominated)
				</li>
				<li>
					<h4>Toronto Film Critic Association Award</h4>
					2016: Best Actor for Legend(Won) <br>
					2015: Best Actor for Locke(Won)
				</li>
			</ul>
			<p>For a complete list of Tom Hardy's awards and nominations head to <a href="http://www.imdb.com/name/nm0362766/awards?ref_=nm_awd" target="_blank">IMDB.com</a></p>
			<a class="btn-close"><i class="fa fa-times"></i></a>
		</div>
		<div class="list-content quotes">
			<h3>Characters</h3>
			<p class="col-xs-10">Here are some of the characters that was humanized by Tom Hardy</p>
			<ul class="list-border gallery">
				<li class="col-xs-5">
					<img src="https://cloud.githubusercontent.com/assets/8037580/18605036/c6c63786-7cb9-11e6-93b7-af0db0718156.jpg" class="img-responsive" alt="">
					<h6>
						<strong>John Fitzgerald</strong> 
						<br>(The Revenant, 2015) 
					</h6>
				</li>
				<li class="col-xs-5">
					<img src="https://cloud.githubusercontent.com/assets/8037580/18604996/cad55a56-7cb8-11e6-97b9-c003c2aa3a80.jpg" class="img-responsive" alt="">
					<h6>
						<strong>Max Rockatansky</strong> 
						<br> (Mad Max:Fury Road, 2015)
					</h6>
				</li>
				<li class="col-xs-5">
					<img src="https://cloud.githubusercontent.com/assets/8037580/18605000/cae48b2a-7cb8-11e6-8f82-c00f606f267a.jpg" class="img-responsive" alt="">
					<h6><strong>Ivan Locke </strong> <br>(Locke, 2014)</h6>
				</li>
				<li class="col-xs-5">
					<img src="https://cloud.githubusercontent.com/assets/8037580/18604997/cadaa1dc-7cb8-11e6-9264-de736e71a693.jpg" class="img-responsive" alt="">
					<h6>
						<strong>Alfie Solomons</strong> 
						<br> (Peaky Blinders, 2013-present)
					</h6>
				</li>
				<li class="col-xs-5">
					<img src="https://cloud.githubusercontent.com/assets/8037580/18605093/fe8941a8-7cba-11e6-8be5-3fb1c6c0badd.jpg" class="img-responsive" alt="">
					<h6>
						<strong>James Delaney </strong> 
						<br>(Taboo, 2017)</h6>
				</li>
				<li class="col-xs-5">
					<img src="https://cloud.githubusercontent.com/assets/8037580/18604998/cadc68aa-7cb8-11e6-8a7d-a9be5bfe07e1.jpg" class="img-responsive" alt="">
					<h6><strong>Charles Bronson </strong> <br>(Bronson, 2009)</h6>
				</li>
				<li class="col-xs-5">
					<img src="https://cloud.githubusercontent.com/assets/8037580/18604999/cae31966-7cb8-11e6-8cb4-4889b5b1fae0.jpg" class="img-responsive" alt="">
					<h6>
						<strong>Reggie &amp; Ronnie Kray</strong> 
						<br>(Legend, 2015)
					</h6>
				</li>
				<li class="col-xs-5">
					<img src="https://cloud.githubusercontent.com/assets/8037580/18605001/caf70b9c-7cb8-11e6-8162-6e26dab86316.jpg" class="img-responsive" alt="">
					<h6>
						<strong>Bane </strong> 
						<br>(The dark knight rises, 2012)
					</h6>
				</li>
			</ul>
			<a class="btn-close"><i class="fa fa-times"></i></a>
		</div>
              
            
!

CSS

              
                h1, h2, h3, h4, h5, p, a, ul, ol{
  margin: 0;
  padding: 0;
}
html{
  font-size: 100%;
}
h1{
  text-align: center;
  color: #D1B57C;
  font-variant: small-caps;
  font-size: 28px;
  text-shadow: 0 1px 1px rgba(0,0,0,.2);
  animation: fadeInDown .4s ease-in-out;
}
h2{
  padding: 15px 10px;
  text-align: center;
  color: #D1B57C;
  font-size:26px;
  font-variant: small-caps;
  background: rgba(255,255,255,10); /*rgba(146, 147, 147, .8)*/
  text-shadow: 0 2px 3px rgba(0,0,0,.3);
  animation: fadeInOnly .5s ease-in-out;
  box-shadow: 0 3px 2px rgba(0,0,0,.1);
  -webkit-animation: fadeInOnly .8s linear ease-in-out;
}
h3{
  font-size: 25px;
  text-align: center;
  padding: 15px 10px;
  color: #D1B57C;/*rgba(75,75,75,.8)*/ 
  background: #FFF;
  font-weight: 600;
  font-variant: small-caps;
  border-bottom: 1px solid rgba(146,147,147,.2);
}
h4{
  font-variant: small-caps;
  font-weight: 200;
  color: #D1B57C;
}
h5{
  font-size: 18px;
  font-weight: 200;
  color: #D1B57C;
}
h6{
  font-variant: small-caps;
  font-size: 16px;
  color: #777;
}
a{
  cursor: pointer;
}
body{
			font-family: 'Hind Siliguri', sans-serif;
			background: rgba(90, 84, 84, .7) url('https://cloud.githubusercontent.com/assets/8037580/18605179/85a080d2-7cbd-11e6-9079-ec09a8024662.png')repeat;
			height: 100%;
			width: 100%;
			font-size: 15px;
			line-height: 1.5em;
		}
		.card{
			position: relative;
			width: 350px;
			height: auto;
			/*border: 1px solid #CCC;*/
			box-shadow: 0 2px 3px rgba(0,0,0,0.16), 0 2px 3px rgba(0,0,0,0.23);
			margin: 20px auto;
			background: #EEE;
}
		.top{
			padding-bottom: 150px;
		}
		.img-container img{
			height: 150px;
			width: 150px;
			left: 100px;
			top:50px;
			position: relative;
			overflow: hidden;
			border: 1px solid #DDD;
			padding: 5px;
			background: #FFF;
			border-radius: 50%;
			box-shadow: 0 1px 3px 0 rgba(75,75,75,0.5);
			animation: fadeInOnly .8s ease-in-out;
		}
		@keyframes fadeInOnly{
			0%{
				opacity: 0;
			}
			100%{
				opacity: 1;
			}
		}
		@-webkit-keyframes fadeInOnly{
			0%{
				opacity: 0;
			}
			100%{
				opacity: 1;
			}
		}
		@-moz-keyframes fadeInOnly{
			0%{
				opacity: 0;
			}
			100%{
				opacity: 1;
			}
		}
		@-o-keyframes fadeInOnly{
			0%{
				opacity: 0;
			}
			100%{
				opacity: 1;
			}
		}
		.img-rounded img{
		    position: relative;
		    border-radius: 50%;
			-moz-border-radius:50%;
			-webkit-border-radius:50%;
			border: 1px solid rgba(203,202,202,.2);
		    top:20px;
		    left: 0;
		    width: 100px;
		    height: 100px;
		    z-index: 10;
		    margin-left: 120px;
		    animation: fadeIn .8s ease-in-out;
		    margin-bottom: 20px;
		    background: rgba(0,0,0,.10);
		}
		.description{
			padding: 15px;
			position: absolute;
			line-height: 1.6em;
			top:260px;
			/*background: rgba(255,255,255,.9);
			top:380px;*/
			width: 100%;
		}
		.description p{
			animation: fadeInDown .6s ease-in-out;
			font-size: 15px;
			color: #888;
			text-align: center;
			text-shadow: 0 1px 1px rgba(0,0,0,.020);
		}
		@-webkit-keyframes fadeInDown {
		  from {
		    opacity: 0;
		    -webkit-transform: translate3d(0, -100%, 0);
		    transform: translate3d(0, -100%, 0);
		  }

		  to {
		    opacity: 1;
		    -webkit-transform: none;
		    transform: none;
		  }
		}
		@keyframes fadeInDown {
		  from {
		    opacity: 0;
		    -webkit-transform: translate3d(0, -100%, 0);
		    -o-transform: translate3d(0, -100%, 0);
		    transform: translate3d(0, -100%, 0);
		  }

		  to {
		    opacity: 1;
		    -webkit-transform: none;
		    transform: none;
		  }
		}
		.list li{
			list-style: none;
			background: rgba(255,255,255,10);
			display: block;
			border-bottom: 1px solid rgba(75,75,75,.080);
			font-size: 17px;
		}
		.list li a{
			display: block;
			text-decoration: none;
			padding: 15px 10px;
			color: #888;
			font-variant: small-caps;
			font-weight: 500;
			text-shadow: 0 1px 2px rgba(75, 75, 75, .1);
		}
.list li a i{
  color:#D1B57C;
  padding-right:5px;
}
		.list li:first-child{
			animation: slideInLeft .2s ease-in-out;
		}
		.list li:nth-child(2){
			animation: slideInLeft .4s ease-in-out;
		}
		.list li:nth-child(3){
			animation: slideInLeft .6s ease-in-out;
		}
		.list li:nth-child(4){
			animation: slideInLeft .8s ease-in-out;
		}
		.list li:last-child{
			animation: slideInLeft 1s ease-in-out;
			border: 0;
		}
		/*.list li:nth-child(2n+1){
			background: #FAFAFA;
		}*/
		.list li a:hover{
			background: rgba(0,0,0,.4);
			color: #FFF !important;
		}
		.list li span i{
			display: block;
		}
		@keyframes slideInLeft {
		  from {
		    -webkit-transform: translate3d(-25%, 0, 0);
		    transform: translate3d(-25%, 0, 0);
		    visibility: visible;
		  }

		  to {
		    -webkit-transform: translate3d(0, 0, 0);
		    transform: translate3d(0, 0, 0);
		  }
		}

		@-webkit-keyframes slideInLeft{
		   from {
		    -webkit-transform: translate3d(-25%, 0, 0);
		    transform: translate3d(-25%, 0, 0);
		    visibility: visible;
		  }

		  to {
		    -webkit-transform: translate3d(0, 0, 0);
		    transform: translate3d(0, 0, 0);
		  }
		}
		@-moz-keyframes slideInLeft{
		   from {
		    -webkit-transform: translate3d(-25%, 0, 0);
		    transform: translate3d(-25%, 0, 0);
		    visibility: visible;
		  }

		  to {
		    -webkit-transform: translate3d(0, 0, 0);
		    transform: translate3d(0, 0, 0);
		  }
		}
		@-o-keyframes slideInLeft{
		   from {
		    -webkit-transform: translate3d(-25%, 0, 0);
		    transform: translate3d(-25%, 0, 0);
		    visibility: visible;
		  }

		  to {
		    -webkit-transform: translate3d(0, 0, 0);
		    transform: translate3d(0, 0, 0);
		  }
		}
		.list-content{
			background: #F5F5F5;
			position: absolute;
			top:0;
			bottom: 0;
			height: auto;
			z-index: 10;
			display: none;
			animation: fadeIn .5s ease-in-out;
			overflow: scroll;
      overflow-x:hidden;
		}
		.list-border li{
			list-style: none;
			padding: 10px;
			padding-bottom: 10px;
			color: #888;
			margin: 10px 15px 10px 15px;
			background: #FFF;
			border: 1px solid rgba(203,202,202,.4);
			border-radius: 4px;
			animation: fadeInUp .8s ease-in-out;
		}
		@keyframes fadeIn{
			from{
				opacity: 0;
				transform: rotateY(180deg);
				transform-style: preserve-3d;
			}
			to{
				opacity: 1;
			}
		}
		@-webkit-keyframes fadeIn{
			from{
				opacity: 0;
				transform: rotateY(180deg);
				transform-style: preserve-3d;
			}
			to{
				opacity: 1;
			}
		}
		@-moz-keyframes fadeIn{
			from{
				opacity: 0;
				transform: rotateY(180deg);
				transform-style: preserve-3d;
			}
			to{
				opacity: 1;
			}
		}
		@-o-keyframes fadeIn{
			from{
				opacity: 0;
				transform: rotateY(180deg);
				transform-style: preserve-3d;
			}
			to{
				opacity: 1;
			}
		}
		@keyframes fadeInUp {
		  from {
		    opacity: 0;
		    -webkit-transform: translate3d(0, 50%, 0);
		    transform: translate3d(0, 50%, 0);
		  }

		  to {
		    -webkit-transform: none;
		    transform: none;
		  }
		}
		@-webkit-keyframes fadeInUp{
		   from {
		    opacity: 0;
		    -webkit-transform: translate3d(0, 50%, 0);
		    transform: translate3d(0, 50%, 0);
		  }

		  to {
		    opacity: 1;
		    -webkit-transform: none;
		    transform: none;
		  }
		}
		@-moz-keyframes fadeInUp{
			from {
		    opacity: 0;
		    -webkit-transform: translate3d(0, 50%, 0);
		    transform: translate3d(0, 50%, 0);
		  }

		  to {
		    opacity: 1;
		    -webkit-transform: none;
		    transform: none;
		  }
		}
		@-o-keyframes fadeInUp{
			from {
		    opacity: 0;
		    -webkit-transform: translate3d(0, 50%, 0);
		    transform: translate3d(0, 50%, 0);
		  }

		  to {
		    opacity: 1;
		    -webkit-transform: none;
		    transform: none;
		  }
		}
		.profile ul{
			margin-top: 20px;
		}
		.profile li strong{
			color: #56b880;
			font-weight: 200;
		}
		.profile p{
			margin: 10px;
			padding: 10px;
			color: #777;
		}
		.movies p{
			padding: 10px;
			margin: 10px;
			color: #888;
		}
		.movies li a{
			text-decoration: none;
		}
		.movies li span{
			color: rgba(75,75,75,.8);
		}
		::-webkit-scrollbar{
			width: 8px;
		}
		::-webkit-scrollbar-track{
			background: #EEE;
		}
		::-webkit-scrollbar-thumb{
			background: #000;
		}
		::-webkit-scrollbar-button{
			background: #CCC;
		}
		::-webkit-scrollbar-corner{
			background: #EEE;
		}
		.trivia p{
			padding: 10px;
			margin: 10px;
		}
		.awards p{
			padding: 10px;
			margin: 10px;
		}
		.btn-close{
			font-size: 20px;
			position: absolute;
			top:10px;
			left:5px;
			cursor: pointer;
			text-align: center;
			/*background: #92C7C7;
			border-radius: 50%;*/
			-moz-border-radius:50%;
			-webkit-border-radius:50%;
			line-height: 35px;
			width: 35px;
			height: 35px;
			-webkit-transition: all 0.3s;
		    -moz-transition: all 0.3s;
		    -ms-transition: all 0.3s;
		    -o-transition: all 0.3s;
		    transition: all 0.3s;
		}
		a.btn-close i{
			color: rgba(0, 0, 0, .4);
		}
		.btn-close:hover{
			animation: fa-spin-fast .5s ease-in-out;
			-moz-animation:fa-spin-fast .5s ease-in-out;
			-webkit-animation: fa-spin-fast .5s ease-in-out;
		}
		@-webkit-keyframes fa-spin-fast {
		    0% {
		        -webkit-transform: rotate(0deg);
		        transform: rotate(0deg);
		    }
		    100% {
		        -webkit-transform: rotate(359deg);
		        transform: rotate(359deg);
		    }
		}
		@keyframes fa-spin-fast{
			 0% {
		        -webkit-transform: rotate(0deg);
		        transform: rotate(0deg);
		    }
		    100% {
		        -webkit-transform: rotate(359deg);
		        transform: rotate(359deg);
		    }
		}
		@-moz-keyframes fa-spin-fast{
			 0% {
		        -webkit-transform: rotate(0deg);
		        transform: rotate(0deg);
		    }
		    100% {
		        -webkit-transform: rotate(359deg);
		        transform: rotate(359deg);
		    }
		}
		@-o-keyframes fa-spin-fast{
			 0% {
		        -webkit-transform: rotate(0deg);
		        transform: rotate(0deg);
		    }
		    100% {
		        -webkit-transform: rotate(359deg);
		        transform: rotate(359deg);
		    }
		}
		.fa-lg{
			font-size: 20px;
			color: #878;
		}
		.fa-times{
			color: #888;
		}
		.gallery li{
			margin: 10px 10px 10px 15px;
		}
		.quotes p{
			color: rgba(203,202,202,.8);
			padding: 10px;
			margin: 10px 10px 0 10px;
			animation: fadeInUp .8s ease-in-out;
		}
		
              
            
!

JS

              
                $(function(){
		$('.list li:first-child').click(function(){
			 window.setTimeout(function() {
           $('.profile').slideToggle();
                }, 300);
		});
		$('.list li:nth-child(2)').click(function(){
			 window.setTimeout(function(){
			$('.trivia').slideToggle();
					},300);
		});
		$('.list li:nth-child(3)').click(function(){
			 window.setTimeout(function(){
			$('.movies').slideToggle(); 
					},300);
		});
		$('.list li:nth-child(4)').click(function(){
			 window.setTimeout(function(){
			$('.awards').slideToggle();
				}, 300);
		});
		$('.list li:nth-child(5)').click(function(){
			 window.setTimeout(function(){
			$('.quotes').slideToggle();
				}, 300);
		});
		$('.btn-close').click(function(){
			$('.list-content').hide(300);
		});
	});
              
            
!
999px

Console