Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                 <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
 <head>
  <link href="https://fonts.googleapis.com/css2?family=Do+Hyeon&display=swap" rel="stylesheet"> 
 <link href="https://fonts.googleapis.com/css2?family=Londrina+Solid:wght@900&display=swap" rel="stylesheet">
  </head>
  
<main id="main">
 <header id="head">
  <h1>Earl Sweatshirt</h1>
  <h2 id=title>The Black Sheep of rap</h2>
  </header>
 <body> 
  <figure id="img-div">
  <image id= "image" src= "https://upload.wikimedia.org/wikipedia/commons/7/79/Earl_Sweatshirt_Day_N_Night_Festival.png" alt="earl with his eyes closed facing the sun"/>
  <figcaption id="img-caption">
    earl with his eyes closed facing the sun
    </figcaption>  
  </figure>
  <section id="tribute-info">  
    <h3 id="who" ><u>Who is Earl Sweatshirt?</u></h3> 
    <p class="info"> <u>Thebe Neruda Kgositsile</u>, also known by his stage name "Earl Sweatshirt," at age 26, is an american rapper, songwriter, musician, record producer, poet, actor and videographer. He has 5 albums spanning from 2010-2019, and despite his age, due to his unique sound, His lyrical talent, and his girtty and raw approach to making music, he is widely considerd by many to be one of the most tanlented people in the rap game. And definitely one of my favorites
    <h3 class="early-life"><u>Thebe's early life</u></h3>
    <p class="info">Thebe was born on  February 24, 1994 in Chicago, Illinois. He was born to  Cheryl Harris, a law professor at University of California, Los Angeles. and Keorapetse Kgositsile a South African poet and political activist. His parents would seperate when he was only 8 years old. That moment would go on to have a big impact in his life and his music going further. He would start rapping as early as 8 years old. But in 2008 while he was in the 8th grade under the pseudonym "Sly Tendencies" is when he would truly being his musical journey. In 2009 he would be discoverd by Tyler The Creator via. his myspace page after he reached out and told Tyler that he was a fan of his work. Tyler reached out to sly, after liking the stuff he was putting out and he joined Tyler's rap group know as "Odd Future." Soon after that is when he changed his name to Earl Sweatshirt.</p>
    <h1><u>His Music</u></h1>
    <h2 class="album-title1">Earl</h2>
    <figure class="album1">
      <figcaption class="album-caption">earls frist mixtape cover</figcaption>
      <img class="album-img" src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fs-media-cache-ak0.pinimg.com%2F736x%2F3e%2F1c%2Ff7%2F3e1cf7c9e55a5354734242b4c066c832--hip-hop-albums-earl-sweatshirt.jpg&f=1&nofb=1" alt="Earl's frist album cover">
      </figure>
    <p class="info"><u>Earl</u> was his debut official mixtape, which was self-released in March 31, 2010. Most of the mixtape was produced by Tyler The Creator. It was named the 24th best album of 2010 by <strong>Complex.</strong>  Sometime after the release of the mixtape, he "got into some trouble with a couple of friends" and was sent away by his mother to Coral Reef Academy, a therapeutic retreat school for at-risk boys, located outside of the Samoan capital of Apia </p>
    <h2 class="album-title2">Doris</h2>
    <figure class="album2">
      <figcaption class="album-caption">Earl Sweatshirts frist debut album, <u>Doris</u></figcaption>
        <img class="album-img" src="https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fwww.playthishiphop.com%2Fwp-content%2Fuploads%2F2013%2F08%2FEarl-Sweatshirt-Doris.jpg&f=1&nofb=1" alt="Earl Sweatshirts frist debut album, Doris"> 
      </figure>
    <p class="info">
      Earls frist debut studio album, and his frist record back from his one and a half year hiatus back from Samoan was named <u>Doris</u> and was released in august, 2013. Doris was met with critical acclaim from music critics including <em>The Gardian</em> and <em>The Los Angeles Times.</em> The ablbum was also a commercial sucsess debuting at number five on the US Billboard 200 and number one on US Top Rap Albums chart. 
    </p>
    <h2 class="album-title3">I Dont Like sh*t I Dont Go Outside</h2>
      <figure class="album3">
        <figcaption class="album-caption">Earls Second studio album <u> I Dont Like Shit, I Dont Go Outside</u></figcaption>
        <img class="album-img" src="http://blastmagazine.com/wp-content/uploads/2015/03/I_Dont_Like_Shit_I_Dont_Go_Outside_An_Album_by_Earl_Sweatshirt.jpg" alt="Earls Second studio album I Dont Like Shit, I Dont Go Outside">
        </figure>
        <p class="info">Earls second studio album was titled <u>"I Dont Like Shit, I Dont Go Outside,"</u> and was released on March 22, 2015.</p>
    <h2 class="album-title4">Some Rap Songs</h2>
        <figure class="album4">
          <figcaption class="album-caption">earls 3rd album <u>Some Rap Songs</u></figcaption>
          <img class="album-img" src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fs3.amazonaws.com%2Ffactmag-images%2Fwp-content%2Fuploads%2F2018%2F11%2FSome-Rap-Songs1.jpg&f=1&nofb=1" alt="Cover of Earls 3rd album Some Rap Songs">
        </figure>
   <p class="info">Earl Sweatshirt came out with his 3rd studio album, which was titled, "Some Rap Songs," and was released on November 30, 2018. It would turn out to be his shorest album yet. Despite this a lot of his fans think that it was his best work up until that point. He decided to theam the album around his father death.</p>
    <h2 class="album-title5">Feet Of Clay</h2>
    <Figure class="album4">
      <figcaption class="album-caption">album art for Earls 4th studio project <u>"Feet Of Clay</u>"</figcaption>
      <img class="album-img" src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fconsequenceofsound.net%2Fwp-content%2Fuploads%2F2019%2F11%2FEarl-Sweatshirt-Feet-Of-Clay.jpg%3Fquality%3D80&f=1&nofb=1" alt="Album art for Earls 4th studio project feet of clay">
    </Figure>
      <p class="info">Feat Of Clay was released in November 1, 2019, and is an EP droped less than 12 months after "Some Rap Songs."</p>
    <h3>If you're interested in learning more about this amazing artist you can click on his <a target="_blank" id="tribute-link" href="https://www.thefamouspeople.com/profiles/earl-sweatshirt-42815.php"> <u>"The Famous People" page right here</u></a> </h3>
   </section>
  </main> 
</body>
              
            
!

CSS

              
                html{
  color: white;
  background: url(https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fsecureservercdn.net%2F198.71.190.10%2F057.85e.myftpupload.com%2Fwp-content%2Fuploads%2F2015%2F03%2FI-Dont-Like-Shit-Front.png%3Ftime%3D1582402412&f=1&nofb=1);
  font-family: 'Do Hyeon', sans-serif;
}

main{
  margin: 20px;
}
  
#title{
  text-align: center;
  font-family: 'Londrina Solid', cursive;
  font-size: 35px;
  
}
h1{
  text-align: center;
  font-family: 'Londrina Solid', cursive;
  font-size: 50px;
  
}
#img-caption{
  text-align: center;
}
#image{
 max-width: 50%;
  display: block;
  height: auto;
  margin: 0 auto; 
  }
.info{
  font-size: 25px;
}
#who{
  text-align: center;
  font-size: 28px
}
.album-img{
  max-width: 50%;
  display: block;
  height: auto;
  margin: 0 auto;
}
a:hover{
  color: green;
}
a{
  color: red;
}
.album-caption{
  text-align: center;
}
p{
  padding-left: 20px;
  padding-right: 20px
  
}
.early-life{
  text-align: center;
  font-size: 28px;

}

.album-title1{
  text-align: center;
  font-size: 28px;
  color: cyan;
}
.album-title2{
  text-align: center;
  font-size: 28px;
  color: orange;
}
.album-title3{
  text-align: center;
  font-size: 28px;
  color: red;
}
.album-title4{
  text-align: center;
  font-size: 28px;
  color: purple;
}
.album-title5{
  text-align: center;
  font-size: 28px;
  color: yellow
}



              
            
!

JS

              
                
              
            
!
999px

Console