Tribute Page Project - Elon

Hey guys,

Just finished my first project and very curious for your feedback! :slight_smile:

It’s pretty basic and bootstrap only. I’m especially interested in how to improve the structure.

Project: https://codepen.io/myronPi/details/weoaZN/

Best,
Alex

So, I liked your tribute page; however, the text in the tribute section is almost illegible. I felt that there was no reason for you to use anything pass H3.
Please, check out the modifications that I made to your code in order to make the text more readable, and let me know if you agree or not. Cheers!

Elon Musk

"The visionary"

      <!-- panel for image -->
      <div class="thumbnail"><img src="https://upload.wikimedia.org/wikipedia/commons/archive/0/0c/20150215004354%21Elon_Musk%2C_Tesla_Factory%2C_Fremont_%28CA%2C_USA%29_%288765031426%29.jpg" alt="Elon Musk in front of a Tesla">
        <div class="caption text-center">"Elon Musk in front of a Tesla"
        </div>
      </div>
      <!--end of thumbnail-->
    </header>
    <article>
      <h2 class="text-center">Tribute Page</h2>
      <div class="row">
        <div class="col-xs-11 col-xs-offset-1 col-sm-10 col-sm-offset-1 col-md-10 col-md-offset-1">

          <h3>Early Life</h3>
          <ul>
            <li>June 28, 1971, born in Pretoria, Transvaal, South Africa,the son of Maye Musk (née Haldeman), a model and dietician from Regina, Saskatchewan, Canada</li>
            <li>In 1995, at age 24, Musk moved to California to begin a PhD in applied physics and materials science at Stanford University, but left the program after two days to pursue his entrepreneurial aspirations in the areas of the Internet, renewable
              energy and outer space. </li>
            <li>In 2002, he became a U.S. citizen.
            </li>
          </ul>
          <blockquote>
            <p><em>
 "Musk was severely bullied throughout his childhood, and was once hospitalized when a group of boys threw him down a flight of stairs and then beat him until he lost consciousness."
  </em></p>
            <footer>Source: <a href="https://en.wikipedia.org/wiki/Elon_Musk" target="_blank">Wikipedia</a></footer>
          </blockquote>
          <h3>Education</h3>
          <p>
            At the age of 17, Musk was accepted into Queen's University in Kingston, Ontario, for undergraduate study. In 1992, after spending two years at Queen's University, Musk transferred to the University of Pennsylvania, where in May 1997 he received a Bachelor
            of Science degree in physics from its College of Arts and Sciences, and a Bachelor of Science degree in economics from its Wharton School of Business. Musk extended his studies for one year to finish the second bachelor's degree. While
            at the University of Pennsylvania, Musk and fellow Penn student Adeo Ressi rented a 10-bedroom fraternity house, using it as an unofficial nightclub.
          </p>
          <h3>Career</h3>
          <ul>
            <li><a href="https://en.wikipedia.org/wiki/Zip2" target="_blank">Zip2</a></li>
            <li><a href="https://en.wikipedia.org/wiki/PayPal" target="_blank">X.com and PayPal</a></li>
            <li><a href="https://en.wikipedia.org/wiki/SpaceX" target="_blank">SpaceX</a></li>
            <li><a href="https://en.wikipedia.org/wiki/Tesla,_Inc." target="_blank">Tesla</a></li>
            <li><a href="https://en.wikipedia.org/wiki/SolarCity" target="_blank">SolarCity</a></li>
            <li><a href="https://en.wikipedia.org/wiki/Hyperloop" target="_blank">Hyperloop</a></li>
            <li><a href="https://en.wikipedia.org/wiki/OpenAI" target="_blank">OpenAI</a></li>
            <li><a href="https://en.wikipedia.org/wiki/The_Boring_Company" target="_blank">The Boring Company</a></li>
            <li><a href="https://en.wikipedia.org/wiki/Neuralink" target="_blank">Neuralink</a></li>
          </ul>
        </div>
      </div>
    </article>
  </div>
  <!--end of col-->
</div>
<!--end of row-->

Written and coded by myronPi

@sudjinn good input thanks!

The thing is that written as a <p> element the the font size somehow becomes huge, and bigger than h3. Any idea how that is possible?

I have not defined any font-sizes though.

Thanks!

Hey! Nice man!!
I’m also a big fan of ELON. keep it up!

I believe that the issue with the P and H3 tag can be resolved by simply deleting the bootstrap 3.3.5 and bootstrap 4.0.0 and replacing it with bootstrap 3. The bootstrap 3 that codepen uses is bootstrap 3.3.7.

Thanks, it still didn’t do the trick for some reason. Adding the font-size element to CSS with the keyword !important was the solution. I couldn’t figure out what the problem is unfortunately.

p { font-size: 100% !important; }