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

              
                <html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Li'l Sebastian Tribute Page</title>
    <!-- <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script> -->
    <link href="https://fonts.googleapis.com/css?family=Dancing+Script|PT+Sans+Narrow" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body id="main">
    <header>
      <div id="title">
        <p>In loving memory of</p>
        <h1>Li'l Sebastian</h1>
        <div id="img-div">
          <img id="image" src="https://78.media.tumblr.com/6e547b9d0ab8ba6bdb62788270b3977f/tumblr_pbqqcdhEDn1xzzgndo1_500.png" alt="Li'l Sebastians Portrait">
          <p  id="img-caption" class="sr-only">A beautiful portrait of Li'l Sebastian, showing him in side profile with a pale red headcollar.</p>
        </div>
      </div>
    </header>
    <div id="tribute-info">
      <div id="time-line">
        <h2>Time line</h2>
        <ul> <li>1987 - Born in Pawnee, Indiana</li>
          <li>1994-1998 - As a champion climber, he is a member of the Great Lakes Ski Patrol and Emergency Rescue Team. He serves as its captain from 1996-1998.</li>
          <li>Li'l Sebastian marries Li'l Agnes, who he met at a fund-raiser for then-Senator Evan Bayh. They divorce two years after.</li>
          <li>2002 - He participates in the celebrations for Queen Elizabeth II's Golden Jubilee, even marching in front of Buckingham Palace</li>
          <li>2006 - he receives his honorary degree from Notre Dame University</li>
          <li>2012 - Li'l Sebastian dies at the age of 25.</li>
        </ul>
      </div>
      <div id="obituary">
        <h2>Obituary</h2>
        <p>by Leslie Knope</p>
        <p>He was an animal, a legend, a friend. He was our beacon of light. He was Pawnee's horse. In what is surely the most monumental news to come out of Pawnee since the eradication of smallpox in 1993, it is with sorrow that we report Li'l Sebastian is dead. But he will never leave our hearts and our memories.</p>
        <p>Sebastian may have been li'l, but his impact on this town, and the Parks Department, was anything but li'l. When his owners, Michael and Elizabeth Stone, first discovered him, Elizabeth says it was "like seeing an angel and being punched in the gut at the same time - because as perfect as he was, we knew we'd never see anything that perfect again."</p>
        <p>In his final days, Li'l Sebastian was still entertaining boys and girls of all ages. What a workhorse! Despite being 25 years old, having cataracts in both eyes and severe arthritis, he was out there, with all of us, spreading joy and cheer. And now he, too, has left this earth.</p>
        <p>His legacy will live on. He sired over 200 mini-horse children, ensuring that future generations of Pawneeans, Americans and citizens of the world will continue laughing and sharing the joy of the Sebastian line.</p>
        <p>Li'l Sebastian, we miss you. But we know you are in heaven, looking down on us, doing your two favorite things: eating carrots and urinating freely.</p>
        <p>So gallop on, Li'l Sebastian, in that big horsey ring in the sky.</p>
      </div>
    </div>
    <div id="merch-area">
      <div id="merch-video" class="merch-1">
        <iframe width="85%"  src="https://www.youtube.com/embed/Fmc-b8owblg" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
        <p>Mouse Rat - Lil Sebastian<br> (Official Memorial Song)</p>
      </div>
      <div class="merch-2">
        <a href="https://www.amazon.de/Parks-Recreation-Sebastian-T-Shirt-Heather/dp/B01CH8DMWA"> <img src="https://78.media.tumblr.com/1d0cd61bb5aae37828a74f40938dcddd/tumblr_pbqxtp189I1xzzgndo1_1280.png" alt="Lil Sebastian shirt"> </a>
        <p>Buy Li'l Sebastian T-Shirts!</p>
      </div>
      <div class="merch-3">
        <a href="https://www.amazon.de/FunKo-13394-Actionfigur-Parks-Recreation/dp/B07171B3XT"> <img src="https://images-na.ssl-images-amazon.com/images/I/716Uxlm8XRL._SL1200_.jpg" alt="Lil Sebastian action figur"></a>
        <p>Buy Li'l Sebastian action figures!</p>
      </div>
      <div class="merch-4">
        <a href="https://www.amazon.de/Parks-Recreation-Seasons-Complete-disc/dp/B00XCDYQIO/ref=pd_cp_74_1?_encoding=UTF8&pd_rd_i=B00XCDYQIO&pd_rd_r=2a41b8c0-8661-11e8-8c63-09e670de25d0&pd_rd_w=ofX0x&pd_rd_wg=eAwyz&pf_rd_i=desktop-dp-sims&pf_rd_m=A3JWKAKR8XB7XF&pf_rd_p=5744958458707925633&pf_rd_r=1J02JNEAQNB4AJ2YK416&pf_rd_s=desktop-dp-sims&pf_rd_t=40701&psc=1&refRID=1J02JNEAQNB4AJ2YK416"> <img src="https://www.spoofee.com/images/dealofday/original/896413.jpg" alt="Parks and Recreation DVD box"></a>
        <p>Buy the complete series on DVD!</p>
      </div>
    </div>
    <footer id="footer-element">
      <div>
        <p>Li'l Sebastian is a fictional character appearing in the NBC comedy series "Parks and Recreation".<br>
        If you want to learn more about the show and Li'l Sebastian, you can check out the fan-made <a  id="tribute-link" target="_blank" href="http://parksandrecreation.wikia.com">Wiki Page</a>, or consider watching the show, which is available over <a target="_blank" href="https://www.netflix.com/title/70143842">Netflix</a> and <a target="_blank" href="https://www.amazon.de/Parks-and-Recreation-Staffel-1/dp/B012YACTKW">Amazon</a>.</p>
      </div>
    </footer>
  </body>
</html>
              
            
!

CSS

              
                /* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

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;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* RESET END */

/* =====Custom Styles===== */
#main {
  background-color: #dbdbdb;
  font-family: 'PT Sans Narrow', sans-serif;
  font-size: calc(12px + (22 - 12) * ((100vw - 300px) / (1600 - 300)));
  margin: 20px;
}
h1 {
  font-family: 'Dancing Script', cursive;
  font-size: calc(30px + (70 - 30) * ((100vw - 300px) / (1600 - 300)));
}
h2 {
  font-size: calc(25px + (40 - 25) * ((100vw - 300px) / (1600 - 300)));
  margin: 16px 0 10px 20px;
}
h3 {
  font-size: calc(14px + (30 - 14) * ((100vw - 300px) / (1600 - 300)));
}
ul li {
  list-style-type: disc;
  margin: 0 20px 20px 28px;
} 

/* =====Header===== */
header {
  display: flex;
  background-color: white;
  background: linear-gradient(rgba(255,255,255,1), rgba(255,255,255,1), rgba(255,255,255,0.8), rgba(255,255,255,0.5), rgba(255,255,255,0), rgba(255,255,255,0), rgba(255,255,255,0)), url(https://78.media.tumblr.com/04ad4608d028b3883f6afe1f88e51cd6/tumblr_pblgo7ZE0e1xzzgndo1_1280.png);
  background-repeat: no-repeat;
    background-size: cover;
  height: 100vh;
  margin: 30px 0 0 0;
  text-align: center;
  justify-content: center;
  border-radius: 5px;
  border: solid white;
  border-width: 6px;
}
#title {
  padding: 30px 0;
}
.sr-only {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  top: auto;
  overflow: hidden;
}
#img-div {
  width: 100px;
  height: auto;
  margin: 0 auto;
}
#image {
  border-radius: 50%;
  border: solid white;
  border-width: 2px;
  margin-top: 10px;
  max-width: 100%;
  display: block;
}

/* =====Tribute Info===== */
#tribute-info {
  display: flex;
  flex-wrap: wrap;
}

/* =====Time line===== */
#time-line {
  margin: 20px 20px 20px 0;
  background-color: white;
  border-radius: 5px;
  flex: 1 1 200px;
}
#time-line ul {
  margin-left: 10px;
}

/* =====Obituary===== */
#obituary {
  margin: 20px 0 20px 0;
  background-color: white;
  border-radius: 5px;
  flex: 2 2 400px;
}
#obituary p {
  margin: 0 20px 20px 20px;
}

/* =====Footer===== */
#footer-element {
  display: flex;
  margin: 0 0 30px 0;
  background-color: white;
  border-radius: 5px;
}
#footer-element p {
  margin: 20px 20px 20px 20px;
  font-size: calc(11px + (18 - 11) * ((100vw - 300px) / (1600 - 300)));
}
a {
  color: #726337;
  text-decoration: none;
}
a:hover {
    color: #9b864d;
}

/* =====Merch===== */
#merch-area {
  display: flex;
  flex-wrap: wrap;
}
#merch-area div {
  flex: 1 1 150px;
  margin: 0 10px 20px 10px;
  background-color: white;
  border-radius: 5px;
}
#merch-area div img {
  width: 80%;
  margin: 10% 10% 0 10%;
}
#merch-area iframe {
  margin: 20px 20px 5px 20px;
}
#merch-area p {
  margin: 10px 20px 20px 20px;
}
              
            
!

JS

              
                
              
            
!
999px

Console