<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/rachelychoi/pen/zdqajy?depth=everything&order=popularity&page=45&q=movie&show_forks=false" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://use.fontawesome.com/3049adcafe.js"></script>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'>
<style class="cp-pen-styles">@import url('https://fonts.googleapis.com/css?family=Julius+Sans+One|Open+Sans:300,400');
body, html {
height: 100%;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
}
h1 {
font-family: 'Julius Sans One', sans-serif;
font-size: 4.5rem;
letter-spacing: 0.5rem;
}
p {
margin-top: 1rem;
}
a {
color:#5bc0de;
}
a:hover {
color: #31b0d5;
text-decoration: none;
}
#hm {
min-height: 100%;
}
.heading {
color: #FFF;
left: 0;
position: absolute;
text-align: center;
top: 40%;
width: 100%;
}
.middle {
color: #FFF;
left: 0;
position: absolute;
text-align: center;
top: 30%;
width: 100%;
}
.bg-img1 {
background: linear-gradient(rgba(0,0,0,.3), rgba(0,0,0,.3)), url('https://s1.postimg.org/6qinigr33/howls_moving_castle_scene.jpg');
}
.bg-img2 {
background: linear-gradient(rgba(0,0,0,.3), rgba(0,0,0,.3)), url('https://s1.postimg.org/84aadrqcf/spirited_away.gif');
}
.parallax {
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
min-height: 100%;
position: relative;
}
.container {
margin-right: auto;
margin-left: auto;
max-width: 850px;
}
.card {
margin-bottom: 1rem;
margin-top: 1rem;
}
.card-text {
font-size: 1rem;
font-weight: 300;
}
@media only screen and (max-device-width: 1024px) {
.parallax {background-attachment: scroll;}
.heading {top: 30%;}
.middle {top: 15%;}
}
</style></head><body>
<div class="container-fluid parallax bg-img1">
<div class="heading text-center">
<h2>The Films of</h2>
<h1 class="text-uppercase">Hayao Miyazaki</h1>
</div>
</div>
<div class="container-fluid py-5 bg-faded" id="hm">
<div class="container">
<div class="row py-2">
<div class="col-sm-12">
<img src="https://s1.postimg.org/6y18huvq7/hayao_miyazaki.jpg" class="img-fluid rounded-circle mx-auto d-block" alt="Hayao Miyazaki">
</div>
</div>
<div class="row py-2">
<p class="text-center lead">Hayao Miyazaki (宮崎駿, born January 5, 1941) is a Japanese film director, producer, screenwriter, animator, author, manga artist, and co-founder of Studio Ghibli.</p>
</div>
<div class="row py-1">
<div class="col-sm-12">
<img src="https://s1.postimg.org/pb6vpjcin/studio_ghibli_logo.png" class="img-fluid mx-auto d-block" alt="Studio Ghibli logo">
</div>
</div>
</div>
</div>
<div class="container-fluid parallax bg-img2">
<div class="middle">
<div class="container pb-4" style="max-width: 500px">
<blockquote class="text-right">
<i class="fa fa-quote-left fa-3x fa-pull-left" aria-hidden="true"></i>
<p class="mb-1 lead">Many of my movies have strong female leads—brave, self-sufficient girls that don’t think twice about fighting for what they believe in with all their heart. They’ll need a friend, or a supporter, but never a saviour.</p>
<footer class="blockquote-footer text-uppercase text-white mb-4">Hayao Miyazaki</footer>
</blockquote>
</div>
<div class="container pt-4">
<h2 class="text-center mb-4">Here are some of his amazing films...</h2>
<i class="fa fa-angle-double-down fa-5x" aria-hidden="true"></i>
</div>
</div>
</div>
<!-- FILM CARDS -->
<div class="container pb-3 pt-5">
<!-- ROW 1 -->
<div class="card-deck">
<div class="card">
<img class="card-img-top img-fluid" src="https://s1.postimg.org/tghsbgaan/nauticaa.jpg" alt="Nausicaä of the Valley of the Wind (1984)">
<div class="card-block">
<h4 class="card-title">Nausicaä of the Valley of the Wind <small class="text-muted">(1984)</small></h4>
<p class="card-text">Taking place in a post-apocalyptic world in the far future, the film tells the story of Nausicaä, the young princess of the Valley of the Wind. She becomes embroiled in a struggle with Tolmekia, a kingdom that tries to use an ancient weapon to eradicate a jungle of mutant giant insects, and attempts to stop the Tolmekians from enraging these creatures. (From <a href="https://en.wikipedia.org/wiki/Nausicaä_of_the_Valley_of_the_Wind_(film)" target="_blank" class="card-link"><cite>Wikipedia</cite></a>)</p>
</div>
<div class="card-footer">
<a href="https://www.themoviedb.org/movie/81" target="_blank" class="card-link">The Movie DB</a>
</div>
</div>
<div class="card">
<img class="card-img-top img-fluid" src="https://s1.postimg.org/7z1h6zcpr/castle_in_the_sky.jpg" alt="Castle in the Sky (1986)">
<div class="card-block">
<h4 class="card-title">Castle in the Sky <small class="text-muted">(1986)</small></h4>
<p class="card-text"><cite>Castle in the Sky</cite> follows the adventures of a young boy and girl attempting to keep a magic crystal from a group of military agents and pirates, while searching for a legendary floating castle. (From <a href="https://en.wikipedia.org/wiki/Castle_in_the_Sky" target="_blank" class="card-link"><cite>Wikipedia</cite></a>)</p>
</div>
<div class="card-footer">
<a href="https://www.themoviedb.org/movie/10515" target="_blank" class="card-link">The Movie DB</a>
</div>
</div>
</div>
<!-- ROW 2 -->
<div class="card-deck">
<div class="card">
<img class="card-img-top img-fluid" src="https://s1.postimg.org/9x854z57j/my_neighbor_totoro.jpg" alt="My Neighbor Totoro (1988)">
<div class="card-block">
<h4 class="card-title">My Neighbor Totoro <small class="text-muted">(1988)</small></h4>
<p class="card-text"><cite>My Neighbor Totoro</cite> tells the story of the two young girls, Satsuki and Mei, and their interactions with friendly wood spirits in postwar rural Japan. (From <a href="https://en.wikipedia.org/wiki/My_Neighbor_Totoro" target="_blank" class="card-link"><cite>Wikipedia</cite></a>)</p>
</div>
<div class="card-footer">
<a href="https://www.themoviedb.org/movie/8392-tonari-no-totoro" target="_blank" class="card-link">The Movie DB</a>
</div>
</div>
<div class="card">
<img class="card-img-top img-fluid" src="https://s1.postimg.org/ll26ziucf/kikis_delivery_service.jpg" alt="Kiki’s Delivery Service (1989)">
<div class="card-block">
<h4 class="card-title">Kiki’s Delivery Service <small class="text-muted">(1989)</small></h4>
<p class="card-text">An adaptation of the 1985 novel of the same name by Eiko Kadono, the film tells the story of a young witch, Kiki, who moves to a new town and uses her flying ability to earn a living. (From <a href="https://en.wikipedia.org/wiki/Kiki%27s_Delivery_Service" target="_blank" class="card-link"><cite>Wikipedia</cite></a>)</p>
</div>
<div class="card-footer">
<a href="https://www.themoviedb.org/movie/16859" target="_blank" class="card-link">The Movie DB</a>
</div>
</div>
</div>
<!-- ROW 3 -->
<div class="card-deck">
<div class="card">
<img class="card-img-top img-fluid" src="https://s1.postimg.org/ovvlwiqlb/porco_rosso.jpg" alt="Porco Rosso (1992)">
<div class="card-block">
<h4 class="card-title">Porco Rosso <small class="text-muted">(1992)</small></h4>
<p class="card-text"><cite>Porco Rosso</cite> tells a story of an Italian World War I ex-fighter ace, now living as a freelance bounty hunter chasing "air pirates" in the Adriatic Sea. However, an unusual curse has transformed him into an anthropomorphic pig. Once called Marco Pagot, he is now known to the world as "Porco Rosso", Italian for "Red Pig." (From <a href="https://en.wikipedia.org/wiki/Porco_Rosso" target="_blank" class="card-link"><cite>Wikipedia</cite></a>)</p>
</div>
<div class="card-footer">
<a href="https://www.themoviedb.org/movie/11621-kurenai-no-buta" target="_blank" class="card-link">The Movie DB</a>
</div>
</div>
<div class="card">
<img class="card-img-top img-fluid" src="https://s1.postimg.org/fclx32333/princess_mononoke.jpg" alt="Princess Mononoki (1997)">
<div class="card-block">
<h4 class="card-title">Princess Mononoki <small class="text-muted">(1997)</small></h4>
<p class="card-text">Set in the late Muromachi period (approximately 1336 to 1573) of Japan with fantasy elements, the film tells the story of the young Emishi prince Ashitaka's involvement in a struggle between the gods of a forest and the humans who consume its resources. (From <a href="https://en.wikipedia.org/wiki/Princess_Mononoke" target="_blank" class="card-link"><cite>Wikipedia</cite></a>)</p>
</div>
<div class="card-footer">
<a href="https://www.themoviedb.org/movie/128" target="_blank" class="card-link">The Movie DB</a>
</div>
</div>
</div>
<!-- ROW 4 -->
<div class="card-deck">
<div class="card">
<img class="card-img-top img-fluid" src="https://s1.postimg.org/v1x239kin/spirited_away.jpg" alt="Spirited Away (2001)">
<div class="card-block">
<h4 class="card-title">Spirited Away <small class="text-muted">(2001)</small></h4>
<p class="card-text"><cite>Spirited Away</cite> tells the story of Chihiro, a sullen ten-year-old girl who, while moving to a new neighborhood, enters the spirit world. After her parents are transformed into pigs by the witch Yubaba, Chihiro takes a job working in Yubaba's bathhouse to find a way to free herself and her parents and return to the human world. (From <a href="https://en.wikipedia.org/wiki/Spirited_Away" target="_blank" class="card-link"><cite>Wikipedia</cite></a>)</p>
</div>
<div class="card-footer">
<a href="https://www.themoviedb.org/movie/129" target="_blank" class="card-link">The Movie DB</a>
</div>
</div>
<div class="card">
<img class="card-img-top img-fluid" src="https://s1.postimg.org/o140ddcf3/howls_moving_castle.jpg" alt="Howl's Moving Castle (2004)">
<div class="card-block">
<h4 class="card-title">Howl’s Moving Castle <small class="text-muted">(2004)</small></h4>
<p class="card-text">Based on the novel of the same name by Diana Wynne Jones, the film is set in a fictional kingdom where both magic and early 20th century technology are prevalent, against the backdrop of a war with another kingdom. The film tells the story of a young hatter named Sophie after she is turned into an old woman by a witch's curse. She encounters a wizard named Howl, and gets caught up in his resistance to fighting for the king. (From <a href="https://en.wikipedia.org/wiki/Howl%27s_Moving_Castle_(film)" target="_blank" class="card-link"><cite>Wikipedia</cite></a>)</p>
</div>
<div class="card-footer">
<a href="https://www.themoviedb.org/movie/4935" target="_blank" class="card-link">The Movie DB</a>
</div>
</div>
</div>
<!-- ROW 5 -->
<div class="card-deck">
<div class="card">
<img class="card-img-top img-fluid" src="https://s1.postimg.org/bxyopt1cv/ponyo.jpg" alt="Ponyo (2008)">
<div class="card-block">
<h4 class="card-title">Ponyo <small class="text-muted">(2008)</small></h4>
<p class="card-text">Inspired by the Hans Christian Andersen story, <cite>The Little Mermaid</cite>, the film centers on a goldfish named Ponyo who befriends a five-year-old human boy, Sōsuke, and wants to become a human girl. (From <a href="https://en.wikipedia.org/wiki/Ponyo" target="_blank" class="card-link"><cite>Wikipedia</cite></a>)</p>
</div>
<div class="card-footer">
<a href="https://www.themoviedb.org/movie/12429" target="_blank" class="card-link">The Movie DB</a>
</div>
</div>
<div class="card">
<img class="card-img-top img-fluid" src="https://s1.postimg.org/symmvlkpr/the_wind_rises.jpg" alt="The Wind Rises (2013)">
<div class="card-block">
<h4 class="card-title">The Wind Rises <small class="text-muted">(2013)</small></h4>
<p class="card-text"><cite>The Wind Rises</cite> is a fictionalized biopic of Jiro Horikoshi (1903–1982), designer of the Mitsubishi A5M fighter aircraft and its successor, the Mitsubishi A6M Zero, used by the Empire of Japan during World War II. The film is adapted from Miyazaki’s manga of the same name, which was in turn loosely based on the 1937 short story The Wind Has Risen by Tatsuo Hori. (From <a href=" https://en.wikipedia.org/wiki/The_Wind_Rises" target="_blank" class="card-link"><cite>Wikipedia</cite></a>)</p>
</div>
<div class="card-footer">
<a href="https://www.themoviedb.org/movie/149870-kaze-tachinu" target="_blank" class="card-link">The Movie DB</a>
</div>
</div>
</div>
<div class="row my-4">
<div class="col-sm-12 text-center">
<a href="https://en.wikipedia.org/wiki/Works_of_Hayao_Miyazaki" target="_blank" class="btn btn-info">More works of Hayao Miyazaki</a>
</div>
</div>
<p class="text-center mb-4">
<a data-toggle="collapse" href="#clickme" aria-expanded="false" aria-controls="Collapse"><small>click me</small></a>
</p>
<div class="collapse mb-5" id="clickme">
<div class="well">
<img src="https://s1.postimg.org/830ckcoin/spirited_away2.gif" class="img-fluid rounded mx-auto d-block">
</div>
</div>
<div class="row mb-5">
<img src="https://s1.postimg.org/42t783y1r/totoro1.png" class="img-fluid mx-auto d-block" alt="Totoro">
</div>
<hr>
<footer class="text-center">
<p><i class="fa fa-code fa-1x" aria-hidden="true"></i> by <a href="https://codepen.io/rachelychoi/" target="_blank" class="card-link">Rachel</a></p>
</footer>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js'></script>
</body></html>
