Hideo Kojima - Metal Gear Series Timeline
HTML
<main>
<div class="container">
<div class="name">
<h1 class="text-center">Hideo Kojima</h1>
<h5 class="text-center">Video game designer, director, producer and creator of the legendary series<br>Metal Gear Solid</h4>
</div>
<div class="photo">
<img src="https://res.cloudinary.com/edocha/image/upload/v1488906697/kojima.jpg" alt="Picture of Hideo Kojima" class="img-responsive rounded mx-auto d-block">
</div>
<div id="lists">
<p class="bold">Metal Gear Series Timeline</p>
<ul>
<li><span class="date">1987</span> - Metal Gear</li>
<li><span class="date">1990</span> - Metal Gear 2: Solid Snake</li>
<li><span class="date">1998</span> - Metal Gear Solid</li>
<li><span class="date">1999</span> - Metal Gear Solid: Integral</li>
<li><span class="date">2000</span> - Metal Gear: Ghost Babel</li>
<li><span class="date">2001</span> - Metal Gear Solid 2: Sons of Liberty</li>
<li><span class="date">2002</span> - The Document of Metal Gear Solid 2</li>
<li><span class="date">2002</span> - Metal Gear Solid 2: Substance</li>
<li><span class="date">2004</span> - Metal Gear Solid: The Twin Snakes</li>
<li><span class="date">2004</span> - Metal Gear Solid 3: Snake Eater</li>
<li><span class="date">2004</span> - Metal Gear Acid</li>
<li><span class="date">2005</span> - Metal Gear Acid 2</li>
<li><span class="date">2005</span> - Metal Gear Solid 3: Subsistence</li>
<li><span class="date">2006</span> - Metal Gear Solid: Digital Graphic Novel</li>
<li><span class="date">2006</span> - Metal Gear Solid: Portable Ops</li>
<li><span class="date">2007</span> - Metal Gear Solid: Portable Ops Plus</li>
<li><span class="date">2007</span> - Metal Gear Solid 2: Bande Dessinée</li>
<li><span class="date">2008</span> - Metal Gear Solid Mobile</li>
<li><span class="date">2008</span> - Metal Gear Acid Mobile</li>
<li><span class="date">2008</span> - Metal Gear Solid 4: Guns of the Patriots / Metal Gear Online</li>
<li><span class="date">2008</span> - Metal Gear Online: Gene Expansion</li>
<li><span class="date">2008</span> - Metal Gear Online: Meme Expansion</li>
<li><span class="date">2009</span> - Metal Gear Online: Scene Expansion</li>
<li><span class="date">2009</span> - Metal Gear Solid Touch</li>
<li><span class="date">2010</span> - Metal Gear Arcade</li>
<li><span class="date">2010</span> - Metal Gear Solid: Peace Walker</li>
<li><span class="date">2011</span> - Metal Gear Solid HD Collection</li>
<li><span class="date">2012</span> - Metal Gear Solid: Snake Eater 3D</li>
<li><span class="date">2013</span> - Metal Gear Rising: Revengeance</li>
<li><span class="date">2014</span> - Metal Gear Solid V: Ground Zeroes</li>
<li><span class="date">2015</span> - Metal Gear Solid V: The Phantom Pain</li>
</ul>
<p class="bold">Other notable series</p>
<ul>
<li>Snatcher</li>
<li>Tokimeki Memorial</li>
<li>Zone of the Enders</li>
<li>Boktai</li>
</ul>
</div>
<footer>
<p class="footer text-center">Source <a href="https://en.wikipedia.org/wiki/Hideo_Kojima">wikipedia</a>.</p>
</footer>
</div>
</div>
</main>
CSS
html, body {
margin: 0;
padding: 0;
}
body {
background: #fff url("http://www.leviathyn.com/wp-content/uploads/2013/02/metal_gear_solid_solid_snake_hd_wallpaper.jpg")no-repeat;
background-attachment: fixed;
background-size: 100%;
background-position: right bottom;
}
.container {
background-color: white;
padding: 0;
width: 80%;
opacity: 0.90;
}
.name, footer {
background-color: #1d1d1c;
color: white;
padding: 2%;
}
.photo {
padding: 1%;
}
img {
height: auto;
width: 50%;
}
#lists {
margin: 0;
padding: .5% 20% 2% 20%;
font-size: .9em;
}
ul {
margin-bottom: 0;
}
p {
margin: 0;
}
.footer {
font-size: 1.0em center;
}
JAVASCRIPT
$(".bold, .date").css("font-weight", "bold");
