cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

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.

            
              <body>

  <header>
    <h1>Rik Mayall</h1>
    <h5>1958 - 2014</h5>
  </header>

  <figure id="mainpik">
    <img id="rikpik" src="https://res.cloudinary.com/perfidion/image/upload/v1472632821/rik-mayall3_zs8rne.jpg" alt="Rik Mayall" title="I don't have moments of weakness. I'm Rik Mayall. - Rik Mayall" />
    <figcaption>
      "I may be gloriously stupid, but if it helps people forget the grimness of life, then I'm happy."
    </figcaption>
  </figure>

  <section id="intro">

    <h3>"Are you trying to be funny?!"</h3>

    <article>
      <p>
        On June 9th 2014, something terrible happened. At the insultingly premature age of 56, Rik Mayall passed away.
      </p>
      <p>
        For those deprived few unfamiliar with his work, Richard Michael 'Rik' Mayall was a British comedy icon. His brand of focused lunacy, with a generous side of violent slapstick and grotesque facial expressions, made him both slightly frightening and incredibly funny. His partnership with best friend and fellow comedian, Adrian Edmondson, swiftly became the stuff of legend. An entire generation of British youth came of age clutching their sides in paroxysms of hysterical laughter as first, Rick and Vyvyan, then Richie and Eddie, mercilessly pummelled each other with verbal barbs and household appliances. It was carefully crafted chaos, held together with impeccable comic timing and a blatant disregard for personal safety. They were monstrously funny, and I laughed so hard I often thought I'd fracture a rib. Mayall's loss leaves a gaping chasm in the world of British comedy, and in the hearts of millions of fans for whom he will forever remain "the funniest man of his generation."
      </p>
      <p>
        Mayall's funeral was attended by many of the big names in British comedy, most of whom had worked with him at some point during their careers. Also in attendance was the late Alan Rickman, a huge fan of Mayall's, who himself passed away in January 2016.
      </p>
    </article>
  </section>

  <section id="legacy">
    
    <h3>A Legacy of Laughter</h3>

      <article>
        
        <figure id="rick_blurb">
          <img id="rick" src="https://res.cloudinary.com/perfidion/image/upload/v1472632813/rick_young_ones2_zxore2.jpg" alt="Rick - The Young Ones" title="That's just typical. Five minutes before the most important party of my life and the house is destroyed by a giant sandwich. - Rick" />
          <h4>The Young Ones</h4>
          <p>
            As Rick, self-styled "People's Poet", die-hard Cliff Richard fan and neurotic anarchist with delusions of grandeur, this was the role that made Mayall a household name. Starring alongside him were Adrian Edmondson as Vyvyan the punk, Nigel Planer as Neil the hippy, and Christopher Ryan as Mike the cool person. True to the chaotic spirit of the show, at the end of the final episode they all die when Vyvyan drives the double-decker bus they're in over a cliff.
          </p>
        </figure>

        <figure id="bstard_blurb">
          <img id="bstard" src="https://res.cloudinary.com/perfidion/image/upload/v1472632786/alan_bstard2_atkmse.jpg" alt="Tory MP - Alan B'Stard" title="Remember my friends, God is dead. Marx is also dead. But the market lives. The market must become your new God. - B'Stard" />
          <h4>The New Statesman</h4>
          <p>
            In an attempt to give the British conservative government "a ruddy good punch on the bottom", Mayall teamed up with writers Laurence Marks and Maurice Gran to create loathsome Tory MP, Alan B'Stard. A liar, a lecher, a thief and a genuinely awful human being, B'Stard epitomized the callousness and greed of 1980s Britain under Margaret Thatcher. One of the most successful British comedies of its time, The New Statesman ended with B'Stard declaring himself Lord Protector, proclaiming that Britain was now his "plaything".
          </p>
        </figure>

        <figure id="flash_blurb">
          <img id="flash" src="https://res.cloudinary.com/perfidion/image/upload/v1472632804/lord_flashheart2_me6evn.jpg" alt="Squadron Leader Lord Flashheart" title="Mind if I use your phone? If word gets out that I'm missing, 500 girls will kill themselves. - Lord Flashheart" />
          <h4>Lord Flashheart</h4>
          <p>
            Mayall made scene-stealing cameo appearances in another famous British comedy, Blackadder -- first as Mad Gerald, Edmund Blackadder's demented cell-mate in series one, and then in series two and four as the hyper-sexual, narcissistic, devil-may-care Lord Flashheart. Seemingly irresistible to women (and keenly aware of it), Flashheart would inevitably get both the girl and the glory, much to Blackadder's disgust.
          </p>
        </figure>

        <figure id="fred_blurb">
          <img id="fred" src="https://res.cloudinary.com/perfidion/image/upload/v1472632798/drop_dead_fred2_yakcqd.jpg" alt="Drop Dead Fred" title="Well, why don't we harpoon Charles straight through the head, drag him back to the apartment, and hit him with a hammer until he agrees to come back? - Drop Dead Fred" />
          <h4>Drop Dead Fred</h4>
          <p>
            In 1991, Mayall starred opposite Phoebe Cates in 'Drop Dead Fred'. Widely panned by critics and a box office flop at the time (Leonard Maltin called it "a putrid mess"), the movie has become something of a cult classic. Mayall portrays the titular Fred, Cates' imaginary friend who returns to help Cates' character, Elizabeth, get her disintegrating love-life and career back on track. Hilarity ensues.
          </p>
        </figure>

        <figure id="bottom_blurb">
          <img id="bottom" src="https://res.cloudinary.com/perfidion/image/upload/v1472632791/bottom_bench2_plcnnm.jpg" alt="Richie And Eddie" title="Look! We haven't got all night. We've got the whole street to do. Now, I've got my tights on, Eddie's wearing a banana, just give us some cash. - Richie" />
          <h4>Bottom</h4>
          <p>
            Richard 'Richie' Richard (Rik Mayall) and Edward 'Eddie' Elizabeth Hitler (Adrian Edmondson) live lives of quiet desperation in a squalid flat in Hammersmith, London. Unemployed and unemployable, their days consist of awful television, trips to the local pub and perpetual attempts to beat each other senseless. Favourite episodes include 'Hole', where they spend the entire show trapped at the top of a Ferris wheel, and 'Terror' which features the culinary abomination "sprouts mexicane", an electric cattle-prod and spontaneous bowel evacuation.
          </p>
        </figure>

      </article>

  </section>

  <section id="ade">
      "There were times when Rik and I were writing together when we almost died laughing.<br />
      They were some of the most carefree stupid days I ever had, and I feel privileged to have shared them with him.<br />
      And now he's died for real... without me.</br>
      Selfish bastard."<br />
      Adrian Edmondson - June 2014  
  </section>

  <footer>
    For more on Rik Mayall see his <a href="https://en.wikipedia.org/wiki/Rik_Mayall" target="_blank">Wikipedia</a> page. You might also enjoy this brilliant BBC tribute, "Rik Mayall - Lord Of Misrule", courtesy of <a href="https://youtu.be/JufLMRBJjpY" target="_blank">YouTube</a>.
  </footer>

</body>
            
          
!
            
              body { /* set body spacing, color and wrap */
    margin: 60px;
    background-color: #3F2860;
    text-overflow: clip;
    word-wrap: break-word;
    color: #202020;
}

header { /* set font and alignment for header */
    background-color: #7A9A95;
    border-radius: 35px;
    padding: 5px;
    font-family: 'Playfair Display', serif;
    margin: auto auto 40px auto;
    width: 45%;
    text-align: center;
}

header > h1 { /* set header h1 font size */
    font-size: 72px;
}

header > h5 { /* set header h5 font size */
    font-size: 42px;
}

img { /* set all image borders */
    border-radius: 35px;
    border-width: 2px;
    border-style: solid;
    border-color: black;
    max-width: 100%;
}

figcaption { /* set font and font size for captions */
    font-family: 'Handlee', cursive;
    font-size: 24px;
    padding: 20px;
}

#mainpik { /* set spacing for primary image box */
    text-align: center;
    background-color: #90C5A9;
    background-size: contain;
    border-radius: 35px;
    padding: 0px 0px 15px 0px;
    width: 45%;
    margin: 10px auto 10px auto;
}

#rikpik { /* set border radius for primary image */
    border-radius: 35px 35px 0px 0px;
    max-width: 100%;
}

#rick { /* set spacing for legacy image */
    float: left;
    max-width: 150px;
    max-height: 200px;
    margin: 0px 30px 30px 0px;
}

#rick_blurb { /* set padding for legacy text */
    padding: 20px 20px 80px 20px;
    background-color: #90C5A9;
    border-radius: 35px;
    margin: 20px 20px 20px 20px;
}

#bstard {
    float: right;
    max-width: 150px;
    max-height: 200px;
    margin: 0px 0px 30px 30px;
}

#bstard_blurb {
    padding: 20px 20px 80px 20px;
    background-color: #90C5A9;
    border-radius: 35px;
    margin: 20px 20px 20px 20px;
}

#flash {
    float: left;
    max-width: 150px;
    max-height: 200px;
    margin: 0px 30px 30px 0px;
}

#flash_blurb {
    padding: 20px 20px 80px 20px;
    background-color: #90C5A9;
    border-radius: 35px;
    margin: 20px 20px 20px 20px;
}

#fred {
    float: right;
    max-width: 150px;
    max-height: 200px;
    margin: 0px 0px 30px 30px;
}

#fred_blurb {
    padding: 20px 20px 80px 20px;
    background-color: #90C5A9;
    border-radius: 35px;
    margin: 20px 20px 20px 20px;
}

#bottom {
    float: left;
    max-width: 150px;
    max-height: 200px;
    margin: 0px 30px 30px 0px;
}

#bottom_blurb {
    padding: 20px 20px 80px 20px;
    background-color: #90C5A9;
    border-radius: 35px;
    margin: 20px 20px 20px 20px;
}

#legacy p {
    padding: 0px;
}

#legacy h4 {
    text-align: left;
}

p { /* set font info for all paragraphs */
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 18px;
    line-height: 1.5em;
}

p::first-letter { /* set enlarged capital letters */
    font-size: 175%;
    padding: 1.2px;
}

section > h3 {
    font-size: 36px;
    text-align: center;
    font-family: Georgia, 'Times New Roman', Times, serif;
}

section > article > figure > h4 {
    font-size: 30px;
    font-family: Georgia, 'Times New Roman', Times, serif;
}

section {
    background-color: #7A9A95;
    border-radius: 35px;
}

#intro { /* set spacing for introduction */
    padding: 20px 40px;
    margin: 40px 0px 40px 0px;
}

#intro article {
    background-color: #90C5A9;
    border-radius: 35px;
    padding: 20px 40px 20px 40px;
    margin: 20px 0px 20px 0px;
}

#legacy { /* set spacing for legacy */
    padding: 20px 20px;
    margin: 40px 0px 40px 0px;
}

#ade {
    font-family: 'Handlee', cursive;
    font-size: 24px;
    padding: 40px;
    margin: 40px 0px 40px 0px;
    text-align: center;
}

footer { /* all settings for footer */
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 18px;
    line-height: 1.5em;
    background-color: #90C5A9;
    border-radius: 35px;
    padding: 40px;
    text-align: center;
}

a:link {
    color: blue;
}

a:visited {
    color: purple;
}
            
          
!
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