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. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ 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

              
                <div class="jumbotron">
  <h1>SANTIGOLD</h1>
  <img src="http://www.clashmusic.com/sites/default/files/styles/article_feature/public/legacy/files/santigold1.jpg?itok=uzoMM-iT" class="img-responsive" alt="santigold">
</div>

<div class="container-fluid">

  <div class="row">
    <div class="col-xs-4 col-md-4">
      <img src="http://ecx.images-amazon.com/images/I/71ss4pW3TxL._SL1096_.jpg" class="img-responsive " alt="santogold">

      <p> Eponym album - 2008</p>
      <ol>
        <li><a href="https://www.youtube.com/watch?v=ciJDA0tcQfs&index=7&list=PLAD265E7B760BC6BD">L.E.S. Artistes</a></li>
        <li>You'll Find a Way</li>
        <li> Shove It (feat. Spank Rock)</li>
        <li> Say Aha</li>
        <li>Creator (vs. Switch & Freq Nasty)</li>
        <li> My Superman</li>
        <li> Lights Out</li>
        <li> Starstruck</li>
        <li> Unstoppable</li>
        <li> I'm a Lady (feat. Trouble Andrew)</li>
        <li>Anne</li>
        <li>You'll Find a Way (Switch & Sinden Remix)</li>
      </ol>

    </div>
    <div class="col-xs-4 col-md-4">

      <img src="https://upload.wikimedia.org/wikipedia/en/e/ed/Santigold_-_Master_of_My_Make-Believe.jpg" class="img-responsive" alt="santigold">

      <p>Master of My Make-Believe - 2012</p>
      <ol>
        <li>GO! (featuring Karen O)</li>
        <li> <a href="https://www.youtube.com/watch?v=mIMMZQJ1H6E&index=5&list=PLAD265E7B760BC6BD">Disparate Youth </a></li>
        <li>God from the Machine</li>
        <li>Fame</li>
        <li>Freak Like Me</li>
        <li>This Isn't Our Parade</li>
        <li>The Riot's Gone</li>
        <li>Pirate in the Water</li>
        <li><a href="https://www.youtube.com/watch?v=SZoHSce004M&list=PLAD265E7B760BC6BD&index=4">The Keepers</a></li>
        <li>Look at These Hoes</li>
        <li><a href="https://www.youtube.com/watch?v=cxdQ_uD5IWk&index=6&list=PLAD265E7B760BC6BD">Big Mouth</a></li>
      </ol>

    </div>
    <div class="col-xs-4 col-md-4">

      <img src="http://cdn2.pitchfork.com/albums/22746/e0111392.jpeg" class="img-responsive" alt="99cents">

      <p> 99 cents - 2016</p>
      <ol>
        <li><a href="https://www.youtube.com/watch?v=WM71W6eI34w&list=PLAD265E7B760BC6BD&index=1">Can't get enough of myself (feat. b.c)</a></li>
        <li>Big boss big time business</li>
        <li>Banshee</li>
        <li><a href="https://www.youtube.com/watch?v=F8xS1FqQzjQ&list=PLFnWppz5oc5JVf8FiRzD9Z60IlMBKAyTL">Chasing shadows</a></li>
        <li>Walking in a circle</li>
        <li><a href="https://www.youtube.com/watch?v=i0PD1nVz0kA&list=PLAD265E7B760BC6BD&index=3">Who be lovin me </a></li>
        <li>Rendez vous girl</li>
        <li>Before the fire</li>
        <li>All i got</li>
        <li>Outside the war</li>
        <li>Run the races</li>
        <li>Who i thought you were</li>
      </ol>
    </div>
  </div>
  <!---------------------->
    <!------------------------>
</div>
<div class="history">
  <h3><strong>Santi White (born September 25, 1976), better known by her stage name Santigold, is an American singer and producer. </strong></h3>

  <p>
    White has a mezzo-soprano vocal range, and her style has been compared often to that of M.I.A. In response to the comparison, White stated that they are both "women who have similar influences and have worked with some of the same people," but that her
    "music is different and she wasn't influenced by what the press was saying", adding: "I can't think of anybody who would be a better fit of somebody who I'm like... I think what's accurate about that comparison is that she's an artist who has loads
    of different influences... and is putting things together in a way that's unexpected and genreless." Santigold and her friend Amanda Blank have been described as being part of "a new crop of young, multicultural, female acts in the wake of M.I.A.
    causing a stir on the Internet and in indie-label conference rooms." White has also revealed her appreciation of new wave music, saying that "My Superman" is an interpolation of a Siouxsie and the Banshees' song, "Red Light." The singer has also stated
    that she is inspired by 1980s pop music, feeling that it "had a depth to it," and that she hopes to "bring back some more good pop songs." The singer's main influences are James Brown and Aretha Franklin and she has cited Devo as her "ultimate favorite
    band."<br/> White also grew up listening to a lot of reggae, jazz, Fela Kuti and Nigerian music.
  </p>
</div>

<div class="links">
  <p>If you want to know more about Santigold, got to read <a href="https://en.wikipedia.org/wiki/Santigold" target="_blank">Wiki</a>, <a href="http://tumblr.santigold.com" taget="_blank">or go to her very good tumblr</a>, <a href="https://www.youtube.com/user/ibelieveinsantogold"
      target="_blank">Watch and Listen Her on Youtube.</a></p>
  <p>Little tribute coded by <a href="https://twitter.com/julie_alary" target="_blank">Julie Alary</a><a href="https://www.freecodecamp.com" target="_blank">, <br/>for Free Code Camp</a></p>
</div>
<!------------------------------->

              
            
!

CSS

              
                /*--------param general---------*/

body {
  font-family: 'Lobster', Helvetica;
}


/*--------jumbotron-----------*/

.jumbotron {
  background: url("http://cdn2.pitchfork.com/albums/22746/e0111392.jpeg") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  text-align: center;
  color: yellow;
  text-shadow: 5px 5px 10px black;
}

.jumbotron img {
  margin: 0 auto;
}


/*-------param discographie---*/

.container-fluid .row {
  background: #F3EB19;
  padding-top: 30px;
  margin-top: -30px;
}

.container-fluid .row p {
  text-align: center;
}

.row img {
  width: 300px;
  margin: 0 auto;
}

.history {
  background-color: black;
  color: #F3EB19;
  text-align: justify;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 10px;
  padding-right: 10px;
  font-size:1.2em;
}
.history h3 {
  text-align:center;
}
.row a {
  text-decoration:none;
  color:#222222;
}
.row a:hover{
  color:red;
}
/*----------footer links--------------------*/
.links {
  background-color:#F3EB19;
  text-align:center;
  height:150px;
}
.links a {
  text-decoration:none;
  color:black;
  font-size:1.2em;
}
.links a:hover {
  color:red;
}
.links p {
  font-size:1.2em;
}
/*----------responsive---------------*/
@media screen and (max-width: 480px)
{
 
 
}
@media screen and (max-width: 320px)
{
  .links {
    height:200px;
  }
  .row li {
    font-size:0.8em;
    text-align:center;
  }
}

/*--------------test----*/
.glyphicon-cd {
  font-size: 4em;
  color: black;
}


/*------disc ++---------------*/

.glyphicon-cd {
  font-size: 4em;
  color: black;
}
/*------disc ++---------------*/


              
            
!

JS

              
                
              
            
!
999px

Console