123

Pen Settings

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

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <link href="https://fonts.googleapis.com/css?family=Alfa+Slab+One|Lato" rel="stylesheet">

<div class="container">
  <div class="jumbotron">
    <div class="row">
      <div class="col-xs-12">
        <h1 class="text-center">RuPaul Charles</h1>
        <h2 class="text-center">Drag mogul and entrepreneur</h2>
        <div class="thumbnail">
          <img src="http://tmlarts.com/wp-content/uploads/2016/11/13361106.jpg" alt="RuPaul, both in and out of drag" id="rupic"/>
          <div class="caption text-center">RuPaul Charles, both in drag and out of drag as the host of RuPaul's Drag Race</div>
        </div>
        <div class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3">
          <h3 class="text-center">RuPaul’s life and career have been bedazzled with milestones:</h3>
           <ul>
             <li><strong>1960:</strong> Born November 17, 1960, in San Diego, CA. Named by his mother, a Louisiana native, after “roux,” the base of gumbo and other creole stews and soups.</li>
             <li><strong>1967:</strong> Lives with three sisters and mother, Ernestine “Tony” Charles, after his parents divorced</li>
             <li><strong>1975:</strong> Moves to Atlanta, GA, with sister Renetta to study performing arts</li>
             <li><strong>1980s:</strong> RuPaul begins exploring drag and music, collaborating in bands such as WeeWee Pole and performing in the NY scene</li>
             <li><strong>1989:</strong> RuPaul appears in the video for B-52’s “Love Shack,” a taste of video fame to come</li>
             <li><strong>1992:</strong> Releases his first single “Supermodel,” soon to be available on his debut album.</li>
             <li><strong>1993:</strong> Tommy Boy Records releases <em>Supermodel of the World</em>, RuPaul’s first full-length studio album of dance music.</li>
             <li><strong>1994:</strong> Appears on Geraldo alongside several notorious NYC “club kids.”</li>
             <li><strong>1994:</strong> Becomes the face of the first ever MAC Cosmetics Viva Glam campaign.</li>
             <li><strong>1994:</strong> Charts at #7 in the UK Top 10 for a duet performance of “Don’t Go Breaking My Heart” with Elton John.</li>
             <li><strong>1995:</strong> Appears and performs in Lady Bunny’s <em>Wigstock: The Movie</em>.</li>
             <li><strong>1995:</strong> Releases first autobiography, <em>Lettin’ It All Hang Out</em>.</li>
             <li><strong>1996:</strong> VH1 airs the first episode of <em>The RuPaul Show</em>, co-hosted by Michelle Visage. The pair also cohost the morning show on WKTU with Lisa Taylor and Freddie Colon during this period.</li>
               <li><strong>1996:</strong> Releases second album <em>Foxy Lady</em> on Tommy Boy Records.</li>
               <li><strong>1997:</strong> Releases a third album <em>Ho, Ho, Ho</em>, themed around the holidays. Records a duet of “It’s Raining Men” with Martha Wash of the Weather Girls.</li>
             <li><strong>2002:</strong> Records the Eurodance track “You’re No Lady” with Brigitte Nielsen (credited as Gitta).</li>
               <li><strong>2004</strong>: Releases fourth album <em>Red Hot</em> on his own RuCo Inc. Music label. Despite receiving little attention by the press, its three singles all reached the top 10 dance chart, and the album charter at #9 on the Top Electronic Albums chart.</li>
             <li><strong>2007:</strong> Stars as the title character in the faux-blaxplotation drag film <em>Starrbooty</em>. RuPaul also released a soundtrack album to accompany the film.</li>
               <li><strong>2009</strong>: Logo airs the premiere of <em>RuPaul’s Drag Race</em>, a reality competition game show in which drag queens from all over compete to win the title of “America’s Next Drag Superstar.” The show's broadcast coincided with the releases of a new album, <em>Champion</em>.</li>
               <li><strong>2010</strong>: Publishes his second autobiography, <em>Workin’ It! RuPaul's Guide to Life, Liberty, and the Pursuit of Style</em>. Logo airs the premiere of his first <em>Drag Race</em> spin-off series, <em>RuPaul’s Drag U</em>, in which cisgender women are empowered through makeovers by popular drag queens.</li>
               <li><strong>2011</strong>: Coinciding with the final of season 3 of <em>RuPaul’s Drag Race</em>, RuPaul releases <em>Glamazon</em>, his sixth album.</li>
               <li><strong>2012</strong>: Due to popular demand, RuPaul produces and hosts another spin-off series, <em>RuPaul’s Drag Race: All Stars</em>, in which previously eliminated contestants from the original series returned to compete in teams.</li>
               <li><strong>2013</strong>: Partners with cosmetics brand ColorEvolution to sell a unisex perfume fragrance, Glamazon.</li>. Relives his radio days with co-host Michelle Visage on a new podcast, <em>What’s the Tee?</em>.
               <li><strong>2014</strong>: Appears as a co-host and judge on the Game Show Network reality-competition series <em>Skin Wars</em> alongside Rebecca Romijn.</li>
                 <li><strong>2015</strong>: Releases both <em>Realness</em>, his eighth studio album which ocincides with the premiere of the seventh season of <em>Drag Race</em>, and a new holiday-themed album <em>Slay Belles</em>, featuring appearances by Michelle Visage, Big Freedia, Todrick Hall, and more.</li>
                 <li><strong>2016</strong>: Hosts a new game show for Logo called <em>Gay For Play</em> and releases his tenth album, <em>Butch Queen</em>, just prior to the premiere of the eighth season of <em>Drag Race</em>. Wins the Primetime Emmy Award for Outstanding Host for a Reality or Reality-Competition Program.</li>
                 <li><strong>2017</strong>: Releases <em>Remember Me: Essential, Vol. 1</em>, a collection of new and old RuPaul songs featuring new artists. Also releases eleventh studio album, <em>American</em>, the same day that the first episode of the ninth season of <em>RuPaul’s Drag Race</em> airs on VH1 in a new Friday night timeslot.</li>
               
          </ul>
          <hr style="border-color: #FF0099 !important; margin-top:30px;"/>
          <blockquote>
            <p>“Having money, power, and respect pacifies the ego only temporarily and does nothing to relieve the deeper feeling of emptiness. We’re all sold on this idea that wholeness can be bought, married into, or wished real hard for, but the more substantial definition of success requires a lot more than just worldwide recognition and acquiring things.”</p>
            <footer>
              <cite>RuPaul Charles, from <span class="title">Workin’ It! RuPaul’s Guide to Life, Liberty, and the Pursuit of Style</cite>
            </footer>
          </blockquote>
          <hr style="border-color: #FF0099 !important; margin-top: -10px; margin-bottom:40px;"/>
          <h4 class="text-center">Read more about RuPaul’s career at <a href="https://en.wikipedia.org/wiki/RuPaul" target="_blank">Wikipedia</a>.</h4>
        </div>
      </div>
    </div>
  </div>
  <footer class="text-center">
    <img src="http://matthewmercer.com/images/mm-logo.png" width="50px" style="margin-bottom:8px;"/><br/>
    <p>Researched and programmed by <a href="http://www.matthewmercer.com" target="_blank">Matthew Mercer</a></p>
  </footer>
</div>

            
          
!
            
              body {
  font-family: 'Lato', sans-serif;
  background-color: #FF0099;
  color: #666666;
}

footer p {
  color: #FFFFFF;
  font-style: normal !important;
}

cite {
  color: #666666; !important;
}

h1 {
  font-family: 'Alfa Slab One', cursive;
  color: #FFFFFF !important;
  text-shadow: 2px 2px 4px #000000;
}

h2 {
  margin-bottom: 40px;
  margin-top: 5px;
  font-size: 24px;
  font-family: 'Lato', sans-serif;
  font-weight:100 !important;
}

h3 {
  margin-bottom: 20px;
}

.jumbotron {
  background-color: #ffddea;
  margin: 50px auto 0px auto;
}

#rupic {
  margin-bottom: 5px;
}

.caption {
  color: #999 !important;
}

blockquote {
  margin-top: 20px;
  border-left: none;
  font-weight: 100;
  font-size: 20px;
  line-height: 1.3em;
}

footer {
  margin-bottom:20px;
}


hr { 
    display: block;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    margin-left: auto;
    margin-right: auto;
    border-width: 1px;
  border-color:#ffb2dc;
}

/* unvisited link */
a:link {
    color: #000;
}

/* visited link */
a:visited {
    color: #999;
}

/* mouse over link */
a:hover {
    color: #CC0000;
}

/* selected link */
a:active {
    color: #FFF;
}
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console