css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

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.

            
              <head>
    <link href='https://fonts.googleapis.com/css?family=Volkhov:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
    <meta charset="UTF-8">
    <title>Lifehouse Chronicles</title>
</head>

<body>
    <h1>Lifehouse</h1>
    <h3>A History of the Ill Fated Project by The Who</h3>

    <figure class="ss_container"><img id="prev_arrow" class="arrow" src="http://findicons.com/files/icons/2232/wireframe_mono/48/rnd_br_prev.png" alt="previous arrow"> 
    <ul>
        <li id="1" class="hideable" style="display: block;"><img class= "centered" src="http://farm4.static.flickr.com/3148/2962473922_f8500784cf_o.jpg">
        <figcaption>Alternate cover of Who's Next.</figcaption></li>
        <li id="2" class="hideable"><img class= "centered" src="https://i.ytimg.com/vi/IxfZS1kgnAo/hqdefault.jpg">
        <figcaption>The rear cover of Who's Next showing the band backstage at De Montfort Hall, Leicester, amongst a debris of furniture.</figcaption></li>
        <li id="3" class="hideable"><img class= "centered" src="http://assets.sheetmusicplus.com/product/Look-Inside/covers/19507079.jpg">
        <figcaption>Pete with his A.R.P. synthesizer's.</figcaption></li>
        <!-- ... and so on -->
    </ul>
    <img id="next_arrow" class="arrow" src="http://findicons.com/files/icons/2232/wireframe_mono/48/rnd_br_next.png" alt="next arrow">
    </figure>

    <div class="container">

        <section>
            <p class="intro">In September 1970, Townshend penned a song called "Pure and Easy", about the One Note, the first song written specifically for <a href="https://en.wikipedia.org/wiki/Lifehouse_%28rock_opera%29">Lifehouse.</a> In the following two months he wrote approximately 20 additional songs, recording intricate home demos of each. Rather than attempting to tell the story through the lyrics, as he had done with Tommy, the songs were stand-alone pieces, meant to be elucidated by the movie and detailed sleeve notes to be included with the album. Most of those songs were recorded by the Who in two sessions in the winter of 1970/1971, as well as several "rehearsals" accompanied by guitarist Leslie West of the band Mountain and an impromptu live concert at the Young Vic Theatre in London in April 1971.</p>

            <p>While Townshend had high hopes for the project, others were sceptical. Universal Studios, which had recently inked a two-film deal with the Who for the rights to a film version of Tommy, was not impressed by the screenplay Townshend offered them. A series of spontaneous concerts the Who had held in London failed to produce usable material, and it soon became apparent that the project was doomed to failure. Though many of the songs written for Lifehouse came to be released on the Who album Who's Next, Lifehouse was to remain unfinished for nearly thirty years.</p>

            <aside>
                <iframe width="475" height="350" src="https://www.youtube.com/embed/6ZwOq0tTEPE" frameborder="0" allowfullscreen></iframe>
                <figcaption>How did Townshend get that sound on Baba O'Riley?</figcaption>
            </aside>

            <p> Townshend's Lifehouse was to be a rock opera all right, but it was to be a musical for screen with footage of the Who performing the story's soundtrack. This desire of Townshend's to move into film had a practical purpose: in part, it was to get the Who off the endless slogging of the road for sometimes years at a time. It was also Townshend attempting to move himself into other areas like fiction and theater and away from the constrictions placed on him as a "rock musician." This contradicted the ambitions of the Who's then-manager Kit Lambert, who wanted to make a film of Tommy by any means necessary -- even without the approval and participation of Townshend -- as his first feature, a project Townshend wanted nothing to do with. In short, according to Townshend, who had made contact with Universal about Lifehouse, Lambert made his own film, the disastrous Tommy, by derailing the Lifehouse project using his influence with people at the band's label and elsewhere by telling them the entire thing was too big and unruly for pop music, that Lifehouse was unworkable. The project was abandoned, but never let go of. The Who recorded a number of the songs for Lifehouse, produced by Glyn Johns, who talked them out of a concept album and into a strong pop album. Those sessions, minus the classic "Pure and Easy" also recorded then, resulted in the record Who's Next. </p>
            <p>Here's Pete's 1999 recounting of the original plot:</p>

            <blockquote>A self-sufficient, drop-out family group farming in a remote part of Scotland decide to return South to investigate rumours of a subversive concert event that promises to shake and wake up apathetic, fearful British society. Ray is married to Sally, they hope to link up with their daughter Mary who has run away from home to attend the concert. They travel through the scarred wasteland of middle England in a motor caravan, running an air-conditioner they hope will protect them from pollution. They listen, furtively, to old rock records which they call 'Trad'. Up to this time they have survived as farmers, tolerated by the government who are glad to buy most of their produce. Those who have remained in urban areas suffer repressive curfews and are more-or-less forced to survive in special suits, like space-suits, to avoid the extremes of pollution that the government reports.</blockquote>

            <p>Lifehouse is the story set in a "near distant" future, where government was no longer interested in interpersonal relationships between humans; their interest was the complete dependence of the individual on the power structure. To that end, they manufactured a story of a pollution crisis so bad, everyone was required to wear "lifesuits." Lifesuits were articles of clothing that simulated all experiences so the person wearing it wouldn't have to leave her or his dwelling place if he or she didn't want to. They were designed, programmed, and plugged into a huge mainframe grid by a media mogul named Jumbo, who was more powerful than the government who appointed him to head this project. His media company provided medicine, sleeping gas, food, and programming so intense and compressed it would allow, according to Townshend's notes, "an individual to live out tens of thousands of lifetimes in a very short period." It also did away with any need for art. </p>

            <p>The story begins when a dropout farming family in a remote part of Scotland hears about a subversive rock concert in London that their daughter runs away from home to attend. The farmers don't wear lifesuits because they live far to the north and are supposedly out of the pollution's range. They are tolerated by the power structure because the farmers grow produce the government is only too happy to buy. Bobby is the story's hero. He hacks into the grid and discovers its fatal flaw. He plans to stage a concert called the Lifehouse in which each individual will be able to become a unique, blueprinted part of a piece of music, a song that hacks into the mainframe of the grid, distorts its data, and short circuits its fictions, allowing everyone to shed their suits and start living again. That song would have the power of liberating not only their minds, but also their bodies from the lifesuits as well -- all through the power of rock & roll -- which would have been supplied by the Who, of course.</p>
        </section>

    </div>



    <footer>
        <h4> Album Credits</h4>
        <ul>
            <h5>The Who</h5>
            <li>Roger Daltrey: Vocals</li>
            <li>John Entwistle: Bass Guitar [Horns] & Vocals</li>
            <li>Keith Moon: Drums</li>
            <li>Pete Townshend: Guitar, VCS3, organ, A.R.P. synthesizer, vocals, piano on "Baba O'riley"</li>
        </ul>
        <ul>
            <h5>Additional musicians</h5>
            <li>Dave Arbus - violin on "Baba O'riley"</li>
            <li>Nicky Hopkins - piano on "The Song Is Over"</li>
        </ul>

        <ul>
            <h5>Production</h5>
            <li>The Who – production</li>
            <li>Glyn Johns – associate production, recording, mixing
            </li>
            <li>Violin on 'Baba O'Riley' produced by Keith Moon</li>
            <li>Executive producers: Kit Lambert, Chris Stamp & Pete Kameron.</li>
            <li>John Kosh – album design</li>
            <li>Ethan Russell – photography</li>
        </ul>

    </footer>
</body>
</html>
            
          
!
            
              /* HTML5 Browser reset
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

body {
    font-family: 'Volkhov', serif;
    background-color: fff;
}

h1  {
    
    font-size: 64px;
    line-height: 73px;
    font-style: normal;
    font-weight: 600;
    margin: 5px;
    padding: 5px;
    text-align: center;
}

h3  {
    font-size: 28px;
    text-align: center;
    font-style: normal;
    font-weight: 400;
    margin-bottom: 25px;
}

h5  {
    font-weight:600;
}

.container aside  {
    float:right;
    margin-top: 160px ;
    padding: 24px 10px;
    width:30%;
}

.container p  {
    margin-top: 5px;
    margin-left: 8px;
    margin-right: 5px;
    padding-right: 60px;
    font-family: 'Volkhov', serif;
    font-weight: 400;
    font-size: 17px;
    font-style: normal;
    line-height: 26px;
    margin-right: 50px;
    text-indent: 50px;
}

 .container .intro  {
    font-family: 'Volkhov', serif;
    font-size: 21px;
    line-height: 28px;
    font-style:normal;
    font-weight: 400;
}

/*Note also that since pseudo-elements are not simple selectors, they are not a valid argument to :not(). So we had to do the not first paragraph this way.*/
 .container p:first-child {
    text-indent: 0px;
}

.container p:first-child:first-letter {
    font-size:2.5em;
    line-height: 1em;
}

a {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    color: #0645ad;
    text-decoration: none;
}

a:hover {
    color: cornflowerblue;
}


blockquote {
  font-family: 'Volkhov', serif;
  background: #f9f9f9;
  border-left: 10px solid #554c4c;
  margin: 1.5em 50px;
  padding: 0.5em 10px;
  quotes: "\201C""\201D""\2018""\2019";
}

blockquote:before {
  color: #ccc;
  content:open-quote;
  font-size: 5em;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;
}

blockquote:after {
  color: #ccc;
  content: close-quote;
  font-size: 4em;
  line-height: 0.1em;
  margin-left: 0.25em;
  vertical-align: -0.4em;
}

blockquote p {
  display: inline;
}

/* Styles for Slider */

.hideable {
    display: none;
}

.ss_container  {
    float:left;
    width: 650px;
    height: 775px;
    margin: 8px;
    margin-top: 110px;
    overflow: hidden;
}

.ss_container ul>img  {
  position: relative;
  max-width: 100%;
  max-height: 100%;
  margin: auto;
}


img {
    border-radius: 2%;
}

img.centered {
   display: block;
   margin: auto;
 }

figcaption  {
    margin-top: 5px;
    font-size: 18px;
    font-style: oblique;
    font-weight: 900;
    text-align: center;
}
 
#next_arrow  {
    position: absolute;
    top: 300px;
    margin-left: 580px;
    background: #fff;
    border-radius: 50px;
}

#next_arrow:hover  {
   opacity: .7;
}

#prev_arrow  {
    position: absolute;
    top: 300px;
    margin-left: 30px;
    background: #fff;
    border-radius: 50px;
}

#prev_arrow:hover  {
    opacity: .7;
}

/* End of Slider Styling */


footer {
    clear:both;
    font-family: 'Volkhov', serif;
    margin-left: 100px;
}

footer::before {
    background-color: #215a93;
    content: "";
    display: inline-block;
    height: 3px;
    margin: 25px 0 5px -95px;
    width: 400px;
    
}

footer ul:first-of-type  {
   margin-bottom: 25px ;
}

footer ul {
    font-size: 18px;
    margin-top: 16px;
    list-style-type: none;
    
}



footer h4  {
    margin-top: 25px;
    font-size:22px;
    font-weight: 700;
    margin-left: 150px;
}



            
          
!
            
              direction = null; // boolean value: true or false. If true, go to NEXT slide; otherwise go to PREV slide

        // Event Listener for Back/Forward buttons. Have to use a for loop because arrow is an array because 
        // of multiple instances on the page.
        var arrow = document.getElementsByClassName("arrow");
        for (var i = 0; i < arrow.length; i++) {
            arrow[i].addEventListener("click", function () {
                var arrowClicked = this.id;
                if (arrowClicked == "next_arrow") {
                    direction = true;
                    toggleSlide(direction);
                } else {
                    direction = false;
                    toggleSlide(direction);
                }
            }); // End EventListener
        } // End for loop

        function toggleSlide(direction) {
            var elements = document.getElementsByClassName("hideable"); // gets all the "slides" in our slideshow
            // Find the LI that's currently displayed
            var visibleID = getVisible(elements);
            // elements[visibleID].setAttribute("id", "fade_in");
            elements[visibleID].style.display = "none"; // hide the currently visible LI
            if (!direction) {
                var makeVisible = prev(visibleID, elements.length); // get the previous slide
            } else {
                var makeVisible = next(visibleID, elements.length); // get the next slide
            }
            elements[makeVisible].style.display = "block"; // show the previous or next slide
            // document.getElementById("fade_in").remove();
            // elements[visibleID].style.opacity = "1";
        }

        function getVisible(elements) {
            var visibleID = -1;
            for (var i = 0; i < elements.length; i++) {
                if (elements[i].style.display == "block") {
                    visibleID = i;
                }
            }
            return visibleID;
        }

        function prev(num, arrayLength) {
            if (num == 0) return arrayLength - 1;
            else return num - 1;
        }

        function next(num, arrayLength) {
            if (num == arrayLength - 1) return 0;
            else return num + 1;
        }
            
          
!
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.
Loading ..................

Console