Tribute-Page

index.html

<main id="main">
  <h1 id="title">2 P A C : T H U G  L I F E</h1>
  <p><i>The Rose that grew from the concrete</i></p>
  <figure id="img-div">
    <img src="https://sitecoreaudioprod.umusicpub.com/sitecore_media/F80F6FA4-CE51-475C-88A2-B81C5340F615.jpg?cc=116201745446PM" alt="2Pac">
    <figcaption id="img-caption">
      Tupac Shakur AKA 2Pac, was a revolutionary vocal activist turned gangsta rapper from the early 1990s.
    </figcaption>
  </figure>
  <section id="tribute-info">
    <h3 id="headline">A brief timeline of Tupac Shakur:</h3>
    <ul>
      <li>
      <strong>Born: June 16, 1971, East Harlem, New York, NY</strong></li>
      <li>
        <strong>1988</strong> - Tupac Shakur begin his journey when he move to Marin City, Californiaa from Baltimore, Maryland.
        It was in Marin City, where Shakur found himself as an artist. Where he was able to express himself thru his peotry and music.
      </li>

      <li>
        <strong>1989-1993</strong> - Tupac, who grew up in New York, and went by the stage name MC New York.
        He later was known for the popular song "Same Song", which debuted in 1991 on the film <i>Nothing But Trouble</i>.
        In November 1992, Shakur dropped <i>2Pacalypse Now</i>, which was widely known as an underground NY feel Album.
      </li>

      <li>
        <strong>1993</strong> - The Rise of Thug Life: Shakur formed the group Thug Life, with the help of his friends he released <i> Thug Life: Volume 1</i>.
        By the end of 1994, the album have became gold which was a success for the new formed group. It was within this year and the next albums where Shakur's music became dark,
        and more gritty to the stories behind coming from the ghetto.
      </li>
      <li>
        <strong>1995</strong> - Shakur by now was on the top charts, with his first album single in February 1995, <i>Dear Mama</i> would become <thead>
  the most succesful single in Rap Singles.
        </thead>
      </li>
      <iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/Mb1ZvUDvLDY?start=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      <li>
        <strong>1995-1996: The downfall of a rising star</strong> - In 1995 Tupac was incarcerated for sexual assault, he served 9 months. This began a spiral of events for the artist, after coming out of prison he
        came back into the booth harder than ever. The energy later led to a rap battle between 2Pac and Biggie AKA Notorious B.I.G. In these final years of 2Pac's life, was filled with drug and violence channeling the drama around the artist.

      </li>
      <li>
        <strong>1996</strong> -Tupac Shakur is gunned on Las Vegas Blvd., and dies at the age of 25 years old. Till today, his homicide is an unsolved case.
      </li>



    </ul>
    <blockquote
      cite="http://news.rediff.com/report/2009/sep/14/pm-pays-tribute-to-father-of-green-revolution-borlaug.htm"
    >
    <img src="https://cdn.everydaypower.com/wp-content/uploads/2019/06/tupac-quotes.jpg" alt="2Pac">
      <p>
        "The seed must grow regardless of the fact that it’s planted in stone.""
      </p>

      <cite>-- Tupac Shakur</cite>
    </blockquote>
    <h3>
      Read more about this Rap Legend
      <a
        id="tribute-link"
        href="https://en.wikipedia.org/wiki/Tupac_Shakur"
        target="_blank"
        >Wikipedia entry</a
      >.
    </h3>
  </section>
</main>

script.js

//project by Juan nevarez//
const projectName = 'tribute-page';
localStorage.setItem('example_project', 'Tribute Page');

style.css

tml {
  /* 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: #fff;
  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: #8e1600;
}

a:visited {
  color: #00000;
}

#main {
  margin: 30px 8px;
  padding: 15px;
  border-radius: 5px;
  background: #000000;
}

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

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

#img-div {
  background: black;
  padding: 10px;
  margin: 0;
}

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

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

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

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

li {
  margin: 16px 0;
}

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

tribute-page.markdown

Tribute-Page

A Pen by John Nevarez on CodePen.

License.