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 is required to process package imports. If you need a different preprocessor remove all packages first.

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

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="container-fluid">
  <div class="row">
    <div class="col-md-12 text-primary text-center">
      <img id="left" class="floatLeft" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/349822/SteelyDan1.jpg" alt="NYC 1972, The young pair of Donald Fagen and Walter Becker." title="NYC 1972, The young pair of Donald Fagen and Walter Becker."/>
    <img id="right" class="floatRight" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/349822/SteelyDan2.jpg" alt="Could not find info regarding this picture.  found on www.tunefind.com/artist/steely-dan, Older Walter Becker and Donald Fagen." title="Could not find info regarding this picture.  found on www.tunefind.com/artist/steely-dan, Older Walter Becker and Donald Fagen."/>
      <p class="top">The Music Of 
      <br />Steely Dan
    </div>
</div>
<br/>
<br/>
  <div class="row">
    <div class="col-md-12">
      <p class="section">Who is Steely Dan?
        <p>Steely Dan is an American jazz rock band whose music also blends elements of funk, R&B, and pop.  Founded by core members Walter Becker and Donald Fagen in 1972, the band enjoyed great critical and commercial success starting from the early 1970s
          until breaking up in 1981.  They reunited in 1993 and have toured steadily ever since.  Rolling Stone has called them "the perfect musical antiheroes for the Seventies". 

          <p>Albums were recorded with a revolving cast of session musicians, Steely Dan's music is characterized by complex jazz-influenced structures and harmonies. Becker and Fagen are whimsical, often sarcastic lyricists, having written "cerebral, wry and eccentric"
            songs about drugs, love affairs, gambling, and crime. The pair is also known for their near-obsessive perfectionism in the recording studio: Over the year they took to record Gaucho, an album of just seven songs, Becker and Fagen hired at
            least 42 studio musicians and 11 engineers.
    </div>
    <div class="col-md-12 tan">
      <p class="section">Album Timeline
        <p class="head">Can't Buy a Thrill - 1972
          <p>Steely Dan's debut album, with hit singles "Do It Again" and "Reelin' In the Years" reaching No. 6 and No. 11 respectively on the Billboard singles chart. Along with "Dirty Work" the songs became staples on classic rock radio.

            <p class="head">Pretzel Logic - 1974
              <p>A diverse set, includes the single "Rikki Don't Lose That Number" (No. 4) and a note-for-note rendition of Duke Ellington and James "Bubber" Miley's "East St. Louis Toodle-Oo".

                <p class="head">Katy Lied - 1975
                  <p>This album went gold on the strength of "Black Friday" and "Bad Sneakers",also included "Doctor Wu" and "Chain Lightning".

                    <p class="head">The Royal Scam - 1976
                      <p>This album sold well in the U.S.A. Dispite not having a hit single. "Haitian Divorce" (Top 20) drove sales in the UK, becoming Steely Dan's first major hit in that country.

                        <p class="head">Aja - 1977
                          <p>Reached the Top Five in the U.S. charts within three weeks, winning the Grammy award for "Engineer – Best Engineered Recording – Non-Classical." This was one of the first American LPs to be certified 'platinum' for sales of over
                            1 million albums. Featuring Michael McDonald's backing vocals, "Peg" (No. 11) was this album's first single, followed by "Josie" (No. 26) and "Deacon Blues" (No. 19).

                            <p class="head">Gaucho - 1980
                              <p>This album's first single, "Hey Nineteen", reached No. 10 on the pop chart in early 1981, and "Time Out of Mind" (featuring guitarist Mark Knopfler of Dire Straits) was a moderate hit in the spring. "My Rival" was featured
                                in John Huston's 1980 film Phobia.

                                <p class="head">Two Against Nature - 2000
                                  <p>Ended up winning four Grammy Awards: Best Engineered Album – Non-Classical, Best Pop Vocal Album, Best Pop Performance by Duo or Group with Vocal ("Cousin Dupree"), and Album of the Year (despite competition in this category
                                    from Eminem's The Marshall Mathers LP and Radiohead's Kid A).

                                    <p class="head">Everything Must Go - 2003
                                      <p>In contrast to their earlier work, this album tried to capture a live feel. Becker sang lead vocals on a Steely Dan studio album for the first time ("Slang of Ages" — he had sung lead on his own "Book of Liars" on
                                        Alive in America)
    </div>
  </div>
  <div class="row">
    <div class="col-md-12">
      <p class="section">Discography
        <p class="head">
          Click an album title for more information:
    </div>
  </div>
  <div class="row disc">
    <div class="col-md-3">
      <p class="s1 title">Can't Buy a Thrill (1972)
        <p class="s2 title">Countdown to Ecstasy (1973)
          <p class="s3 title">Pretzel Logic (1974)
            <p class="s4 title">Katy Lied (1975)
              <p class="s5 title">The Royal Scam (1976)
                <p class="s6 title">Aja (1977)
                  <p class="s7 title">Gaucho (1980)
                    <p class="s8 title">Two Against Nature (2000)
                      <p class="s9 title">Everything Must Go (2003)
    </div>

    <div class="d1 song col-md-7">
      <img src="https://upload.wikimedia.org/wikipedia/en/b/b2/Cant_buy_a_tcant_buy_a_thrill.jpg">
      </img>
      <ul class="list">
        <li>Do It Again
          <li>Dirty Work
            <li>Kings
              <li>Midnight Cruiser
                <li>Only A Fool Would Say That
                  <li>Reelin' In The Years
                    <li>Fire In The Hole
                      <li>Brooklyn (Owes The Charmer Under Me)
                        <li>Change Of The Guard
                          <li>Turn That Heartbeat Over Again
      </ul>
    </div>

    <div class="d2 song col-md-4">
      <img src="https://upload.wikimedia.org/wikipedia/en/7/7f/Steely_Dan-Countdown_to_Ecstacy.jpg">
      </img>
    <ul class="list">
        <li>Bodhisattva
          <li>Razor Boy
            <li>The Boston Rag
              <li>Your Gold Teeth
                <li>Show Biz Kids
                  <li>My Old School
                    <li>Pearl Of The Quarter
                      <li>King Of The World
      </ul>
    </div>

    <div class="d3 song col-md-4">
      <img src="https://upload.wikimedia.org/wikipedia/en/c/cd/Pretzel_Logic_album.jpg">
      </img>
<ul class="list">
        <li>Rikki Don't Lose That Number
          <li>Night By Night
            <li>Any Major Dude Will Tell You
              <li>Barrytown
                <li>Parker's Band
                  <li>Through With Buzz
                    <li>Pretzel Logic
                      <li>With A Gun
                        <li>Charlie Freak
                          <li>Monkey In Your Soul
      </ul>
    </div>

    <div class="d4 song col-md-4">
      <img src="https://upload.wikimedia.org/wikipedia/en/7/7e/Steely_Dan-Katy_Lied.jpg">
      </img>
<ul class="list">
        <li>Black Friday
          <li>Bad Sneakers
            <li>Rose Darling
              <li>Daddy Don't Live In That New York City No More
                <li>Dr Wu
                  <li>Everyone's Gone To The Movies
                    <li>Your Gold Teeth II
                      <li>Chain Lightning
                        <li>Any World (That I'm Welcome To)
                          <li>Throw Back The Little Ones
      </ul>
    </div>

    <div class="d5 song col-md-4">
      <img src="https://upload.wikimedia.org/wikipedia/en/e/ec/The_Royal_Scam_album_cover.jpg">
      </img>
<ul class="list">
        <li>Kid Charlemagne
          <li>The Caves of Altamira
            <li>Don't Take Me Alive
              <li>Sign in Stranger
                <li>The Fez
                  <li>Green Earrings
                    <li>Haitian Divorce
                      <li>Everything You Did
                        <li>The Royal Scam
      </ul>
    </div>

    <div class="d6 song col-md-4">
      <img src="https://upload.wikimedia.org/wikipedia/en/4/49/Aja_album_cover.jpg">
      </img>
<ul class="list">
        <li>Black Cow
          <li>Aja
            <li>Deacon Blues
              <li>Peg
                <li>Home At Last
                  <li>I Got The News
                    <li>Josie
      </ul>
    </div>

    <div class="d7 song col-md-4">
      <img src="https://upload.wikimedia.org/wikipedia/en/8/8f/Steely_Dan_-_Gaucho.jpg">
      </img>
<ul class="list">
        <li>Babylon Sisters
          <li>Hey Nineteen
            <li>Glamour Profession
              <li>Gaucho
                <li>Time Out Of Mind
                  <li>My Rival
                    <li>Third World Man
      </ul>
    </div>

    <div class="d8 song col-md-4">
      <img src="https://upload.wikimedia.org/wikipedia/en/6/6b/Steelydan-twoagainstnature.jpg">
      </img>
<ul class="list">
        <li>Gaslighting abbie
          <li>What a shame about me
            <li>Two against nature
              <li>Janie runaway
                <li>Almost gothic
                  <li>Jack of speed
                    <li>Cousin dupree
                      <li>Negative girl
                        <li>West of hollywood
      </ul>
    </div>

    <div class="d9 song col-md-4">
      <img src="https://upload.wikimedia.org/wikipedia/en/4/47/Steelydan-everythingmustgo.jpg">
      </img>
<ul class="list">
        <li>The last mall
          <li>Things I miss the most
            <li>Blues beach
              <li>Godwhacker
                <li>Slang of ages
                  <li>Green book
                    <li>Pixeleen
                      <li>Lunch with gina
                        <li>Everything must go
      </ul>
    </div>
  </div>
<p class="footer text-center">
For more info about Steely Dan be sure to check out:
  <br />
  <a href="https://en.wikipedia.org/wiki/Steely_Dan" target="_blank">Steely Dan's Wikipedia Entry</a>
  <br />
  <a href="http://www.steelydan.com/" target="_blank">Steely Dan's Offical Web Page</a>
</div>
              
            
!

CSS

              
                .disc {
  margin-left: 350px;
  font-size: 18px;
  width: auto;
}

.song {
  font-size: 18px;
  display: none;
  width: auto;
}

.list {
  display: inline-block;
  vertical-align: top;
}

.tan {
  background-color: rgb(224, 198, 141);
}

p {
  font-size: 20px;
  margin-left: 200px;
  margin-right: 200px;
}

p.section {
  font-size: 24px;
  margin-left: 0px;
}

p.head {
  font-size: 22px;
  margin-left: 100px;
}

p.title {
  font-size: 18px;
  margin-left: 0px;
  margin-right: 0px;
}

p.top {
  font-size: 75px;
  vertical-align: middle;
  text-align: center;
}

p.footer {
  text-align: center;
  font-size: 16px;
}

.floatLeft {
  float: left;
}

.floatRight {
  float: right;
}

#left {
  display: none;
  width: 30%;
}

#right {
  display: none;
  width: 30%;
}

              
            
!

JS

              
                $(document).ready(function() {
  
  $('#left').fadeIn(1500).delay(3500)
  $('#right').fadeIn(1500).delay(3500)
  
  $(".s1").click(function() {
    $(".song").hide();
    $(".d1").fadeToggle("fast");
  });
  $(".s2").click(function() {
    $(".song").hide();
    $(".d2").fadeToggle("fast");
  });
  $(".s3").click(function() {
    $(".song").hide();
    $(".d3").fadeToggle("fast");
  });
  $(".s4").click(function() {
    $(".song").hide();
    $(".d4").fadeToggle("fast");
  });
  $(".s5").click(function() {
    $(".song").hide();
    $(".d5").fadeToggle("fast");
  });
  $(".s6").click(function() {
    $(".song").hide();
    $(".d6").fadeToggle("fast");
  });
  $(".s7").click(function() {
    $(".song").hide();
    $(".d7").fadeToggle("fast");
  });
  $(".s8").click(function() {
    $(".song").hide();
    $(".d8").fadeToggle("fast");
  });
  $(".s9").click(function() {
    $(".song").hide();
    $(".d9").fadeToggle("fast");
  });
});
              
            
!
999px

Console