<!-- main -->
  <div id="main">
    <div class="inner">
      <h1>About Me</h1>
      <div class="row bottom-2">
        <p style="margin-bottom: -5em;"><span class="image left">
        <img src="assets/images/about_me.jpg" alt="About me-photo" 
        width="250" height="250"/></span>
          Hi! My name is Juan Carlos Chávez Cortés, I was born on April 
          the 9th of 2003 in Acapulco but I moved to Puebla to study 
          mechatronics engineering at Ibero's university...</p>
      </div>
    </div>
  </div>

<!-- main about -->
  <div id="about_top">
    <div class="inner">
      <h2 style="font-size: 2.2em; margin-bottom: 0.5em; text-align: 
      center; color: #ffffff; text-shadow: 2.5px  0px 0px #48603b,
      0px  2.5px 0px #48603b, -2.5px  0px 0px #48603b,
      0px -2.5px 0px #48603b;">Previous work</h2>  <p_white><strong>
      These are some of the final projects I have done for the different 
      subjects I've taken over this years of my career</strong>​</p_white>
      <br><br>
      <section style="margin-top: -1.5em;" class="tiles">
        <article class="style1">
          <span class="image"><img src="assets/images/previouswork1_p1.jpg" 
            onmouseover="this.src='assets/images/previouswork1_p2.jpg'"
            onmouseout="this.src='assets/images/previouswork1_p1.jpg'">
          </span>
        </article>
        <article class="style1">
          <span class="image"><img src="assets/images/previouswork1_p1.jpg" 
            onmouseover="this.src='assets/images/previouswork1_p2.jpg'"
            onmouseout="this.src='assets/images/previouswork1_p2.jpg'">
          </span>
        </article>
          <article class="style1">
          <span class="image"><img src="assets/images/previouswork3_p1.jpg" 
              onmouseover="this.src='assets/images/previouswork3_p2.jpg'"
              onmouseout="this.src='assets/images/previouswork3_p1.jpg'">
          </span></article></section><br><br>
    </div>
  </div>