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");
Expand for more options Login