Quentin's Interests 3.0

Quentin's Interests 3.0.html

<div class="topdiv">
  <h1>Quentin's Page of Interests</h1>
  <p class="subtitle"><b>The world wants to know: <em>Who is Quentin Ruiz-Esparza?</em></b><br>Read this page to learn about Quentin's likes (<em>and maybe his dislikes</em>)!</p>
</div>
<div class="cleardiv">
  <h2>What's Your Top 5?</h2>
  <p>Quentin was recently asked about <b>his top 5</b> movies, musicians, and places he has visited. Here are his answers!</p>
</div>
<div class="boxdiv">
  <h3>Movies</h3>
  <p>Here are Quentin's top five favorite movies:</p>
  <ol>
    <li><a href="http://www.imdb.com/title/tt0080684/" target="_blank">Star Wars: The Empire Strikes Back</a></li>
    <li><a href="http://www.imdb.com/title/tt0071562/" target="_blank">The Godfather: Part II</a></li>
    <li><a href="http://www.imdb.com/title/tt0046250/" target="_blank">Roman Holiday</a></li>
    <li><a href="http://www.imdb.com/title/tt0128853/" target="_blank">You've Got Mail</a></li>
    <li><a href="http://www.imdb.com/title/tt1490017/" target="_blank">The Lego Movie</a></li>
  </ol>
</div>
<div class="boxdiv">
  <h3>Music Artists</h3>
  <p>Quentin loves to see the following bands / musical artists in concert whenever he gets the opportunity!</p>
  <ul>
    <li>Ben Folds (<a href="https://www.benfolds.com/" target="_blank">website</a> | <a href="https://www.benfolds.com/tour-dates" target="_blank">concert dates</a>)</li>
    <li>Corinne Bailey Rae (<a href="http://www.corinnebaileyrae.com/" target="_blank">website</a> | <a href="http://www.bandsintown.com/CorinneBaileyRae" target="_blank">concert dates</a>)</li>
    <li>OK Go (<a href="http://okgo.net/" target="_blank">website</a> | <a href="http://okgo.net/shows/" target="_blank">concert dates</a>)</li>
    <li>Hello Seahorse! (<a href="http://www.helloseahorse.com/" target="_blank">website</a> | <a href="http://www.bandsintown.com/HelloSeahorse!" target="_blank">concert dates</a>)</li>
    <li>Dengue Fever (<a href="http://denguefevermusic.com/" target="_blank">website</a> | <a href="http://www.bandsintown.com/DengueFever" target="_blank">concert dates</a>)</li>
  </ul>
</div>

<div class="tablediv">
  <h3>Places I've Visited</h3>
  <table>
    <tr>
      <td><img src="https://upload.wikimedia.org/wikipedia/commons/1/13/WashMonument_WhiteHouse.jpg" />
        <p>Washington, DC, USA</p>
      </td>
    </tr>
    <tr>
      <td><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/33/Amsterdam%2C_the_Netherlands_-_Rapenburgwal.jpg/800px-Amsterdam%2C_the_Netherlands_-_Rapenburgwal.jpg" />
        <p>Amsterdam, The Netherlands</p>
      </td>
    </tr>
    <tr>
      <td><img src="https://upload.wikimedia.org/wikipedia/commons/2/26/Geneva-aerial-view.JPG" />
        <p>Geneva, Switzerland</p>
      </td>
    </tr>
    <tr>
      <td><img src="https://upload.wikimedia.org/wikipedia/commons/2/26/Tomb_of_Safdarjung_Panorama,_New_Delhi.jpg" />
        <p>Delhi, India</p>
      </td>
    </tr>
    <tr>
      <td><img src="https://c1.staticflickr.com/9/8471/8146329571_9ae22e7872_b.jpg" />
        <p>Chiang Mai, Thailand</p>
      </td>
    </tr>
  </table>
</div>
<div class="cleardiv">
  <p>I hope you've enjoyed my page!</p>
</div>

quentin-s-interests-3-0.markdown

Quentin's Interests 3.0

A Pen by Justin Shi on CodePen.

License.

style.css

body {
  /*Background color for entire page*/
  background-color: GhostWhite;
}

.topdiv {
  /*Styling the top "header" for my page*/
  border-top-style: solid;
  border-bottom-style: solid;
  border-color: RoyalBlue;
  border-width: 1px;
  padding-left: 5px;
  font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
  text-align: center;
}

.subtitle {
  /*Making subtitle font a little bigger*/
  /*Also using em instead of px for font sizes for more consistent experience for both desktop and mobile devices*/
  font-size: 1.4em;
}

.cleardiv {
  /*A simple div*/
  font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
}

.boxdiv {
  /*A blue box with rounded corners div*/
  background-color: AliceBlue;
  border: solid;
  border-width: 1px;
  border-color: CornflowerBlue;
  margin: 0px 2px 15px 2px;
  padding: 0px 17px 5px 17px;
  border-radius: 25px;
  font-family: Verdana, Geneva, sans-serif;
}

.tablediv {
  /*A blue div that covers the full widith of the page*/
  background-color: RoyalBlue;
  width: 100%;
  margin: 0px 0px 0px -9px;
  padding: 2px 9px 0px 0px;
  color: GhostWhite;
  font-family: Verdana, Geneva, sans-serif;
}

.tablediv h3 {
  text-align: center;
}

.tablediv p {
  margin-top: 0px;
  margin-bottom: 20px;
  font-size:1em;
 
}

h1 {
  font-size: 2em;
}

h2 {
  font-size: 1.5em;
}

h3 {
  font-size: 1.2em;
}

p {
  font-size: 1em;
}

img {
  width: 30em;
  border: solid;
  border-width: 1px;
  border-color: GhostWhite;
}

li {
  font-size: 1em;
}

table {
  /*puts table in the center of the page*/
  margin: auto;
}