FCC: Tribute Page

fcc-tribute-page.markdown

FCC: Tribute Page

A Pen by Tracy on CodePen.

License.

index.html

<div id="main">
  <h1 id="title">Aretha Franklin</h1>
  <h2>The Queen of Soul </h2>
  <div id="img-div">
    <img id="image" src="https://s.blogcdn.com/www.stylelist.com/media/2013/03/aretha-franklin-style-1000km032413-01.jpg">
    <div id="img-caption">
      Aretha Franklin poses for a portrait at 21 years old.
    </div>
  </div>
  <div id="tribute-info">
      <h3 id="headline">Child Star to Cultural Icon:</h3>
    <p> Aretha started her career singing in her father's church. Her first hit "Respect" set her on the path to becoming the Queen of Soul. She was hugely successful, winning 18 Grammy awards and becoming the first female performer to be inducted into the Rock and Roll Hall of Fame. At the time of her death in 2018, she is still one of the best-selling musical artists of all time. In addition to her musical prowess, Aretha also was awarded U.S.A.’s highest civilian honor, The Presidential Medal Of Freedom.
    </p>
    <br/>
    <blockquote>"Being the Queen is not all about singing, and being a diva is not all about singing. It has much to do with your service to people. And your social contributions to your community and your civic contributions as well."
      <div align="right">--Aretha Franklin</div>
    </blockquote>
    <h2>You can find more about Aretha in her <a id="tribute-link" href="http://www.arethafranklin.net/biography/" target="_blank">biography</a>.</h2>
  </div>
</div>

script.babel

// coded by @ChaituVR
const projectName = 'tribute-page';
localStorage.setItem('example_project', 'Tribute Page');

scripts

<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

style.css

body{
  font-family:'Comfortaa', cursive;
  font-size: 1.5em;
  text-align:center;
  min-width:260px;
  color:#8E25E1;
}
h1 {
  font-family:'Monoton', cursive;
  font-size: 2.5em;
}
h3 {
  font-family: 'Baloo Bhai', cursive;
  font-size:1.5em;
}
#main{
  margin:30px auto;
  padding:15px;
  border:0px solid;
  border-radius:5px;
  background:#C1FCE9;
  align: center;
}
img{
  max-width: 100%; 
  display: block; 
  height: auto;
  margin: auto;
}
#img-div{
  margin:15px;
  margin-top:30px;
  width:100%;
  border:5px solid white;
  background:#F6FE80;
  }
#img-caption{
  margin:15px;
  font-size: 0.75em;
}
#headline{
  margin-top:50px;
  text-align:left;
}
blockquote{
  font-family: 'Baloo Bhai', cursive;
  font-size: 1.5em;
  width: 70%;
  height: 300px;
  border: 15px solid #F6FE80;
  padding: 5%;
  margin:auto;
  margin-bottom: 60px;
  background-image:     url("https://raw.githubusercontent.com/tracy522/Web-Resume/master/Transparent_Colorful_Notes.png");
  -webkit-background-size: 125%;
  -moz-background-size: 125%;
  -o-background-size: 125%;
  background-size: 125%;
  background-repeat:no-repeat;
  background-position: center;
}
#tribute-info {
   margin: 55px;
}