<main id="main">
  <h1 id="title">Dr. Ahmed Khaled Towfik</h1>
  <p>The man that writes words express our deep feelings.</p>
  <figure id="img-div">
    <img
      id="image"
      src="https://2.bp.blogspot.com/-pqICPhoxfas/XKPWYJ-y2vI/AAAAAAAAmog/okhk_Qx7tyMRT1lXo1eCCR8Yd9HzkL61ACLcBGAs/s1600/52569191_10156284244753722_962042862935998464_n.jpg"
      alt="Dr. Ahmed photo"
    />
    <figcaption id="img-caption">
      Dr. Towfik's photo and one of his quotes.
    </figcaption>
  </figure>
  <section id="tribute-info">
    <h3 id="headline"> About his life:
    </h3>
    <ul>
      <li><strong>(10 June 1962)</strong> - Born in the northern Egyptian city of Tanta</li>
      <li>
        <strong>(1985)</strong> - Tawfik graduated from Tanta University's medical school
      </li>
      <li>
        <strong>(1997)</strong> -  attained a PhD 
      </li>
      <li>
        <strong>(1992)</strong> - joined the Modern Arab Association publishing company and began writing his first series of novels the following year
      </li>
      <li>
        <strong>(1993)</strong> -  he published the first installment in his horror/thriller series Ma Waraa Al Tabiaa (Arabic: ما وراء الطبيعة‎), which translates to Beyond nature or "Metaphysics".
      </li>
      <li>
        <strong>(2 April 2018)</strong> - died at El Demerdash Hospital in Cairo, Egypt.
      </li>
  
    </ul>
   
    
      <p>“I'm not interested in how things were, or how we ended up where we are now. What interests me is what we are now and what we will be.”
      </p>
      <cite>-- Ahmed Khaled Towfik</cite>
    </blockquote>
    <h3>
      If you have time, you should read more about this incredible human being
      on his
      
      <a
        id="tribute-link" 
          href="https://ar.wikipedia.org/wiki/%D8%A3%D8%AD%D9%85%D8%AF_%D8%AE%D8%A7%D9%84%D8%AF_%D8%AA%D9%88%D9%81%D9%8A%D9%82"
        target="_blank"
        >Wikipedia entry</a
      >.
    </h3>
  </section>
</main>
html {
  /* Setting a base font size of 10px give us easier rem calculations
     Info: 1rem === 10px, 1.5rem === 15px, 2rem === 20px and so forth
   */
  font-size: 10px;
}

body {
  /* Native font stack https://getbootstrap.com/docs/4.2/content/reboot/#native-font-stack */
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
    'Helvetica Neue', Arial, sans-serif;
  font-size: 1.6rem;
  line-height: 1.5;
  text-align: center;
  color: #333;
  margin: 0;
}

h1 {
  font-size: 4rem;
  margin-bottom: 0;
}

@media (max-width: 460px) {
  h1 {
    font-size: 3.5rem;
    line-height: 1.2;
  }
}

h2 {
  font-size: 3.25rem;
}

a {
  color: #477ca7;
}

a:visited {
  color: #76538f;
}

#main {
  margin: 0px 40px;
  padding: 15px;
  border-radius: 5px;
  background: #eee;
}

@media (max-width: 460px) {
  #main {
    margin: 0;
  }
}

img {
  max-width: 60%;
  display: block;
  height: auto;
  margin:  auto;
}

#img-div {
  background: white;
  padding: 20px;
  margin: 0;
}

#img-caption {
  margin: 3px 0 5px 0;
}

@media (max-width: 460px) {
  #img-caption {
    font-size: 1.4rem;
  }
}

#headline {
  margin: 5px 0;
  text-align: center;
}

ul {
  max-width: 550px;
  margin: 0 auto 50px auto;
  text-align: left;
  line-height: 1.6;
}

li {
  margin: 16px 0;
  text-align: left;
}

blockquote {
  font-style: italic;
  max-width: 545px;
  margin: 0 auto 50px auto;
  text-align: left;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.