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="container-fluid">
    <div class="well">
        <div class="top text-center">
            <h1><b>My Chemical Romance</b></h1>
            <h3><em>The true lives of the Fabulous Killjoys</em></h3>
        </div>
        <div class="image">
            <div class="jumbotron">
                <div class="row band">
                    <div class="col-md-12 col-lg-12">
                        <a href="https://play.spotify.com/artist/7FBcuc1gsnv6Y1nwFtNRCb" target="_blank">
                            <img src="https://i.sli.mg/WUNc7p.jpg" class="img-responsive" alt="My Chemical Romance members">
                        </a>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-3 col-xs-6 col-lg-3 albums">
                        <a href="#" target="_blank">
                            <img src="https://i.sli.mg/7RXYez.jpg" class="img-responsive bullets" alt="I Brought You My Bullets, You Brought Me Your Love album art">
                        </a>
                    </div>
                    <div class="col-md-3 col-xs-6 col-lg-3 albums">
                        <a href="https://play.spotify.com/album/3DuiGV3J09SUhvp8gqNx8h" target="_blank">
                            <img src="https://i.sli.mg/x9zr5S.jpg" class="img-responsive revenge" alt="Three Cheers For Sweet Revenge album art">
                        </a>
                    </div>
                    <div class="col-md-3 col-xs-6 col-lg-3 albums">
                        <a href="https://play.spotify.com/album/0FZK97MXMm5mUQ8mtudjuK" target="_blank">
                            <img src="https://i.sli.mg/xSAvY9.jpg" class="img-responsive black-parade" alt="The Black Parade album art">
                        </a>
                    </div>
                    <div class="col-md-3 col-xs-6 col-lg-3 albums">
                        <a href="https://play.spotify.com/album/2wPnKggTK3QhYAKL7Q0vvr" target="_blank">
                            <img src="https://i.sli.mg/WFMV9m.jpg" class="img-responsive danger-days" alt="Danger Days album art">
                        </a>
                    </div>
                </div>
                <div class="row caption">
                    <div class="text-center">
                        <h4><em>
                            The band and their albums in chronological order (not including singles or live albums)
                        </em></h4>
                    </div>
                </div>
            </div>
        </div>
        <div class="details">
            <div class="row">
                <div class="links">
                    <div class="col-md-1 col-lg-1 col-lg-offset-1">
                        <div class="dropdown">
                            <button class="btn btn-secondary-outline dropdown-toggle" type="button" id="listenMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <i class="fa fa-music"></i>  Listen
                            </button>
                            <div class="dropdown-menu" aria-labelledby="listenMenu">
                                <ul class="drop-items">
                                    <li><a class="dropdown-item" href="https://play.spotify.com/artist/7FBcuc1gsnv6Y1nwFtNRCb" target="_blank"><i class="fa fa-spotify"></i> Spotify</a></li>

                                    <li id="soundcloud"><a class="dropdown-item" href="https://soundcloud.com/my-chemical-romance" target="_blank"><i class="fa fa-soundcloud"></i> Soundcloud</a></li>

                                    <li><a class="dropdown-item" href="https://itunes.apple.com/us/artist/my-chemical-romance/id14748659" target="_blank"><i class="fa fa-apple"></i> iTunes</a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="dropdown">
                            <button class="btn btn-secondary-outline dropdown-toggle" type="button" id="infoMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <i class="fa fa-info"></i>  More info
                            </button>
                            <div class="dropdown-menu" aria-labelledby="listenMenu">
                                <ul class="drop-items">
                                    <li><a class="dropdown-item" href="http://www.mychemicalromance.com/" target="_blank">Website</a></li>

                                    <li><a class="dropdown-item" href="https://en.wikipedia.org/wiki/My_Chemical_Romance" target="_blank">Wikipedia</a></li>

                                    <li><a class="dropdown-item" href="http://mychemicalromance.wikia.com/wiki/Main_Page" target="_blank">MCR Wiki</a></li>

                                    <li><a class="dropdown-item" href="https://voat.co/v/mychemicalromance" target="_blank">Voat Subverse</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-8 col-lg-6 col-md-offset-1 col-lg-offset-1">
                    <div class="summary">
                        <p>
                            My Chemical Romance was the greatest post-hardcore rock band ever. They burned brightly from 2001 to 2013, a total of 12 years. The band consisted of lead vocalist Gerard Way (centered in the photo above), guitarists Ray Toro (center-right) and Frank
                            Iero (right-most), bassist Mikey Way (center-left), and several drummers. Bob Bryar was the dummer for most of the band's existence, and so is pictured above (left-most).
                        </p>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="timeline">
                    <div class="col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3">
                        <h4><b>A timeline of MCR</b></h4>
                        <ul>
                            <li><b>2001-2002 -- Formation:</b>
                                <p>
                                    On September 11, 2001, Gerard Way watched the attacks on the World Trade Center from his office in New York City. Shortly after, he formed a band with drummer Matt Pelissier and wrote their first song, "Skylines and Turnstiles" to express his feelings
                                    about the attacks. The band soon recruited guitarist Ray Toro because Gerard wasn't able to play guitar and sing at the same time.
                                </p>
                                <p>
                                    The trio band recorded their first demo CD in Matt's attic, including the "Skylines and Turnstiles". After hearing the demo, Gerard's little brother Mikey Way decided to drop out of college and join the band. The band was signed to Eyeball Records, where
                                    they met Frank Iero, lead guitarist and vocalist for Pencey Prep. When Pencey Prep broke up, Frank joined My Chemical Romance just in time to record the band's first album, <em>I Brought You My Bullets, You Brought Me Your Love</em>                                    (left-most album above).
                                </p>
                            </li>
                            <li><b>2003-2006 -- Three Cheers For Sweet Revenge and Life On The Murder Scene:</b>
                                <p>
                                    In 2003, My Chemical Romance was signed to the Reprise Records label, and began work on a second album after a tour with Avenged Sevenfold. The 2003 album, <em>Three Cheers For Sweet Revenge</em> (center-left album
                                    above) went platinum just over a year later. In 2004, co-founder Matt Pelissier was replaced with drummer Bob Bryar.
                                </p>
                                <p>
                                    In 2005, the band opened for Green Day on their American Idiot tour, then co-headlined the 2005 Warped Tour with Fall Out Boy. Later that year, they also co-headlined a US tour with Alkaline Trio and Teggie and the Full Effect. In 2006, they released
                                    their first live album, <em>Life on the Murder Scene</em>.
                                </p>
                            </li>
                            <li><b>2006-2008 -- The Black Parade</b>
                                <p>
                                    In 2006, the band began recording their third studio album, <em>The Black Parade</em> (center-right album above). The record took the form of a rock opera, centered around the death of The Patient. The songs chronicles
                                    The Patient's experience and emotions as he leaves life, remembering important moments in his life, and the arrival of death in the form of a black parade. The story is insipred by Gerard's belief that upon death, one
                                    leaves life in the form of a prominent memory. In the album, The Patient is met by a dark version of the memory of his father taking him to a parade as a child.
                                </p>
                                <p>
                                    During filming of the "Famous Last Words" music video, Gerard pulled a ligament in his ankle and Bob Bryar burned his leg and developed a staph infection. These injuries resulted in the cancellation of a few tour dates. It hit number 2 on the US <em>Billboard 200</em>                                    and achieved platinum status in seven countries, and double platinum in the UK.
                                </p>
                            </li>
                            <li><b>2009-2012 -- Danger Days:</b>
                                <p>
                                    Production of the band's fourth full-length studio album was announced in May of 2009. In an interview, Gerard Way said the record would be a rock album, saying to <em>NME</em>, "I think [the next album] will definitely
                                    stripped down. I think the band misses being a rock band. ...it's not going to be hiding under a veil of fiction or uniforms or makeup anymore." In a later interview with <em>PopEater</em>, Gerard said "over the years
                                    that we've been hearing ourselves live and hearing us on records, we kind of prefer the live. THere's more of a garage feel and more energy ... That's the goal for the next [album]." Later in 2009, in another interview,
                                    he said that the band's fourth album would be their defining work.
                                </p>
                                <p>
                                    The band annouced at the San Diego Comic-Con 2010 that the album had been completed, and in September, the title was announced through a trailer video on YouTube. It would be called <em>Danger Days: The True Lives of the Fabulous Killjoys</em>                                    (right-most album above). During the time since the initial announcement of the album, drummer Bob Bryar was replaced by Michael Pedicone without explaination. During the album's subsequent tour, Pedicone was removed
                                    from the band after being caught stealing. Jarrod Alexander was recruited as a touring drummer for the remainder of the tour.
                                </p>
                            </li>
                            <li><b>2012-2013 -- Fifth album</b>
                                <p>
                                    In February 2012, the band said on their official website that they had been building a studio in LA to record their fifth album, known only as <em>MCR5</em>. However, no news of the album followed, and on March 22,
                                    2013, My Chemical Romance announced their breakup on their website.
                                </p>
                                <p> In the announcement, Gerard posted a blog stating only the following:
                                </p>
                                <p><em>
                                    "Being in this band for the past 12 years has been a true blessing. We've gotten to go places we never knew we would. We've been able to see and experience things we never imagined possible. We've shared the stage with people we admire, people we look up to, and best of all, our friends. And now, like all great things, it has come time for it to end. Thanks for all of your support, and for being part of the adventure."
                                </em></p>
                                <p>
                                    In 2014, the band released a greatest hits album titled <em>May Death Never Stop You</em>, including many of their best performing songs from all albums, as well as three songs from their original demo CD, notably their
                                    first song, "Skylines and Turnstyles".
                                </p>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="facts">
                    <div class="col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3">
                        <h4><b>A few fun facts about MCR</b></h4>

                        <p>The name of the band was suggested by bassist Mikey Way, who was working at Barnes & Noble when he came across the book <em>Ecstasy: Three Tales of Chemical Romance</em> by Irvine Welsh.
                            <p>

                                <p>At the first live performance of <em>The Black Parade</em>, before the band came on stage, there was an announcement that My Chemical Romance wasn't able to make it to the show, so another group, The Black Parade, would
                                    be playing instead. After overwhelming audience disapproval, it became evident that it was just My Chemical Romance under an alter-ego for the album.</p>

                                <p>The band included a hidden song on their album, <em>The Black Parade</em> titled "Blood". The song emphasizes the pressure and demand the band felt from fans, demanding more "blood" regardless of how much they gave. A lyric
                                    from the song which encapsulates this feeling comes in the last refrain: "I gave you blood, blood, gallons of the stuff, I gave you all that you can drink and it has never been enough."</p>
                    </div>
                </div>
            </div>
            <div class="row" id="quote">
                <div class="quote">
                    <div class="col-md-6 col-md-offset-3 col-sm-6 col-sm-offset-3 col-xs-12 col-lg-4 col-lg-offset-4">
                        <h2>"I am not afraid to keep on living / I am not afraid to walk this world alone"</h2>
                        <h5>--My Chemical Romance, "Famous Last Words", the climax to <em>The Black Parade</em></h5>
                    </div>
                </div>
            </div>
            <div class="row" id="video">
                <div class="video">
                    <div class="col-md-8 col-md-offset-2 col-sm-8 col-sm-offset-2 col-xs-12 col-lg-6 col-lg-offset-3">
                        <div class="well">
                            <!-- 16:9 aspect ratio responsive YouTube embed -->
                            <div class="embed-responsive embed-responsive-16by9">
                                <iframe width="420" height="315" src="https://www.youtube.com/embed/8bbTtPL1jRs" allowfullscreen></iframe>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="footer">
                <h6>
                    Page created by <a href="https://github.com/Raindeer44" target="_blank">Jade Thornton</a>, information taken from <a href="http://mychemicalromance.wikia.com/wiki/Main_Page" target="_blank">My Chemical Romance Wiki</a>
                </h6>
            </div>
        </div>
    </div>
</div>
              
            
!

CSS

              
                body {
    margin-top: 50px;
    font-family: "Droid Sans", sans-serif;
    color: #E8E8E8;
    background-color: #6B6B6B
}

.well {
    background-color: black;
}

.jumbotron {
    background-color: #6B6B6B;
    margin-top: 30px;
}

.btn {
    background-color: black;
}

.dropdown-menu {
    background-color: #6B6B6B;
}

#listenMenu {
    text-indent: -0.2em;
}

.drop-items {
    list-style-type: none;
    text-indent: -1em;
}

#soundcloud {
    text-indent: -1.15em;
}

.dropdown-item {
    color: #E8E8E8;
}

.details {
    display: block;
    margin: auto;
}

.caption {
    margin-top: 10px;
    margin-bottom: -30px;
}

.top h1 {
    font-size: 4em;
}

#video,
#quote {
    margin-top: 40px;
}

.footer {
    text-align: center;
    margin-top: 150px;
}
              
            
!

JS

              
                $(document).ready(function() {
    $(iframe).addClass("embed-responsive-item");
});

$('.dropdown-toggle').dropdown()
              
            
!
999px

Console