<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/_gwen2405/pen/rraWPX?depth=everything&order=popularity&page=31&q=movie&show_forks=false" />
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css'><link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
<style class="cp-pen-styles">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;
}
</style></head><body>
<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> Profile</a></li>
<li><a><i class="fa fa-gear"></i> Trivia</a></li>
<li><a><i class="fa fa-film"></i> Filmography</a></li>
<li><a><i class="fa fa-certificate"></i> Awards & Nominations</a></li>
<li><a><i class="fa fa-users"></i> 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'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>
<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'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 ‘I love to do things I haven't done before’.
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'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's School, then at Richmond
Drama School, and subsequently at the Drama Centre London.
</li>
<li>
His acting idol is Gary Oldman, somebody he'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 & 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 & 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>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script >$(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);
});
});
//# sourceURL=pen.js
</script>
</body></html>
