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

              
                <html lang="en">

<body>
  <div id="wrapper">
    <main id="content">
      <div class="imageOne">
      </div>
      <header class="header">
        <h1>Tribute to Barack Hussein Obama II</h1>
      </header>
      <div class="text">
        <p>
          Born Aug. 4, 1961, Honolulu, Hawaii, U.S.), 44th president of the
          U.S. (2009–17). Obama graduated from Columbia University (1983) and
          Harvard Law School (1991), where he was the first African American
          to serve as president of the Harvard Law Review.
        </p>
        <p>
          Before winning the presidency, Obama represented Illinois in the
          U.S. Senate (2005–08). He was the third African American to be
          elected to that body since the end of Reconstruction (1877).
        </p>
        <figure id="img2"><img src="https://www.dropbox.com/s/uoj8hfiwug4kygz/obama_family_256.jpg?raw=1" alt="image of obama family" /></figure>
        <p>
          In 1992, Obama married Michelle Robinson, a lawyer who had also
          excelled at Harvard Law. Their daughters, Malia and Sasha, were born
          in 1998 and 2001, respectively. Obama was elected to the Illinois
          Senate in 1996, and then to the U.S. Senate in 2004.
        </p>

        <p>
          Some pundits instantly pronounced him a future president, but most
          did not expect it to happen for some time. Nevertheless, in 2008 he
          was elected over Arizona Senator John McCain by 365 to 173 electoral
          votes.
        </p>
        <figure id="img3"><img src="https://www.dropbox.com/s/0r80yxqt568jx89/michelle_obama_256.jpg?raw=1" alt="image of michelle obama reading book to audience" /></figure>

        <p>
          One of Barack Obama's most significant accomplishments as president
          was health care reform. In 2010, he signed the Patient Protection
          and Affordable Care Act into law.
        </p>
        <p>
          This law became so associated with Barack Obama that it is sometimes
          referred to as "Obamacare." This law is intended to help poor people
          to be able to afford health insurance and to provide quality health
          care for all Americans.
        </p>
        <h2>Facts</h2>
        <ul id="facts">
          <li>
            In 2012 Obama became the first U.S. president to officially
            sanction same-sex marriage.
          </li>
          <li>
            In 2009, Obama became the fourth president to receive the Nobel
            Peace Prize.
          </li>
          <li>
            He won a Grammy Award in 2006 for his voice on the audio book
            Dreams From My Father.
          </li>
          <li>
            In 2008 and again in 2012, he was named Time magazine’s “Person of
            the Year.”
          </li>

        </ul>
      </div>
      <footer></footer>
    </main>
  </div>
</body>

</html>
              
            
!

CSS

              
                img {
  max-width: 100%;
  display: block;
  height: auto;
}
h1 {
  margin: 0;
  text-align: center;
}
h2 {
  margin: 0;
  text-align: center;
}
p {
  padding: 0;
  margin: 0;
  display: block;
  line-height: 1.7em;
}

ul {
  margin: 0;
  padding: 0;
}

//1680px
@media screen and (max-width: 105em) {
  #wrapper {
    width: 92%;

    margin-right: auto;
    margin-left: auto;
    padding: 0;
    font-family: "Verdana", Arial, Helvetica, sans-serif;
    height: auto;
  }
  main#content {
    display: grid;
    grid-template-columns: 42% repeat(2, 1fr);
    grid-template-rows: 50px 50% 1fr;
    grid-column-gap: 5px;
    grid-row-gap: 5px;
    background-image: url("https://www.dropbox.com/s/sctzjny21qoeblh/pngfind.com-obama-png-309556-height-800px.png?raw=1");
    background-size: auto;
    background-repeat: no-repeat;
    background-position: left;
    transition: all 0.1s ease-in-out;
    height: 100vh;
  }
  figure {
    width: 30%;
    margin: 0;
    padding: 0;
    img {
      display: block;
    }
    figcaption {
      background-color: #fff;
      padding: 0.5em;
      margin-top: 0.25em;
      border: 5px solid #000;

      p {
        line-height: 1.7em;
        background-color: #fff;
        display: block;
      }
    }
  }

  .imageOne {
    grid-area: 1 / 1 / 4 / 2;
  }
  .header {
    grid-area: 1 / 2 / 2 / 4;
    background-color: #282a3f;
    color: #fff;
    h1 {
      line-height: 50px;
    }
  }
  .text {
    grid-area: 2 / 2 / 4 / 4;
    padding: 0;
    padding: 0.5em;
    background-color: rgba(255, 255, 255, 0.7);
    h2 {
      display: block;
      clear: right;
      text-align: left;
      line-height: 40px;
      width: 100%;
      background-color: #282a3f;
      color: #fff;
      text-indent: 0.25em;
      margin-bottom: 0.5em;
    }

    ul#facts {
      width: auto;

      li {
        background-color: #fff;
        display: block;
        line-height: 20px;
        margin-bottom: 0.2em;
        padding: 0.2em 0;

        &::before {
          content: "✨";
        }
      }
    }

    figure#img2 {
      float: right;
      padding-left: 0.25em;
      padding-top: 0.25em;
      margin-left: 0.25em;
      margin-bottom: 0.25em;
      width: auto;
    }

    figure#img3 {
      float: right;
      padding-left: 0.25em;
      padding-top: 0.25em;
      margin-left: 0.25em;
      margin-bottom: 1em;
      width: auto;
    }

    p {
      line-height: 1.8em;
      display: block;
      margin-bottom: 0.5em;
    }
  }

  footer {
    height: 80px;
  }
}

//1440px
@media screen and (max-width: 90em) {
  #wrapper {
    width: 94%;
  }
  main#content {
    display: grid;
    grid-template-columns: 45% repeat(2, 1fr);
  }
  figure {
    img {
      display: block;
    }
    figcaption {
      background-color: #fff;

      p {
        line-height: 1.7em;
        font-size: 0.95em;
      }
    }
  }

  .imageOne {
    grid-area: 1 / 1 / 4 / 2;
  }
  .header {
    grid-area: 1 / 2 / 2 / 4;

    h1 {
      line-height: 50px;
      font-size: 1.8em;
    }
  }
  .text {
    grid-area: 2 / 2 / 4 / 4;
    h2 {
      font-size: 1.4em;
    }
    p {
      font-size: 0.95em;
    }
    figure#img2 {
      width: 37%;
    }

    figure#img3 {
      width: 37%;
    }
  }
  ul#facts {
    li {
      font-size: 0.9em;
    }
  }

  footer {
    height: 80px;
  }
}

//1280px
@media screen and (max-width: 80em) {
  #wrapper {
    width: 96%;
  }
  main#content {
    display: grid;
  }
  figure {
    img {
      display: block;
    }
    figcaption {
      background-color: #fff;

      p {
        line-height: 1.7em;
      }
    }
  }

  .imageOne {
    grid-area: 1 / 1 / 4 / 2;
  }
  .header {
    grid-area: 1 / 2 / 2 / 4;

    h1 {
      line-height: 50px;
      font-size: 1.6em;
    }
  }
  .text {
    grid-area: 2 / 2 / 4 / 4;
    h2 {
      font-size: 1.3em;
    }
    p {
      font-size: 0.9em;
    }
    figure#img2 {
      width: 40%;
    }

    figure#img3 {
      width: 40%;
    }
  }

  ul#facts {
    li {
      font-size: 0.9em;
    }
  }

  footer {
    height: 80px;
  }
}

//1024px
@media screen and (max-width: 64em) {
  #wrapper {
    width: 98%;
  }
  main#content {
    display: grid;
    grid-template-columns: 45% repeat(2, 1fr);
    background-image: url("https://www.dropbox.com/s/q5raqaqe60kxdin/pngfind.com-obama-png-309471-800px.png?raw=1");
    background-position: -80px;
    transition: all 0.1s ease-in-out;
  }
  figure {
    img {
      display: block;
    }
    figcaption {
      background-color: #fff;

      p {
        line-height: 1.7em;
      }
    }
  }

  .imageOne {
    grid-area: 1 / 1 / 4 / 2;
  }
  .header {
    grid-area: 1 / 2 / 2 / 4;

    h1 {
      line-height: 50px;
      font-size: 1.4em;
    }
  }
  .text {
    grid-area: 2 / 2 / 4 / 4;
    h2 {
      font-size: 1.2em;
    }
    p {
      font-size: 0.9em;
    }
  }

  ul#facts {
    li {
      font-size: 0.9em;
    }
  }

  footer {
    height: 80px;
  }
}

//800px
@media screen and (max-width: 50em) {
  #wrapper {
    width: 98%;
  }
  main#content {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 60% 50px 1fr;
    background-position: center;
  }
  figure {
    img {
      display: block;
    }
    figcaption {
      background-color: #fff;

      p {
        line-height: 1.7em;
      }
    }
  }

  .imageOne {
    grid-area: 1 / 1 / 2 / 3;
  }
  .header {
    grid-area: 2 / 1 / 3 / 3;

    h1 {
      line-height: 50px;
      font-size: 1.4em;
    }
  }
  .text {
    grid-area: 3 / 1 / 4 / 3;
    h2 {
      font-size: 1.3em;
    }

    p {
      font-size: 0.85em;
    }
  }

  ul#facts {
    li {
      font-size: 0.85em;
    }
  }

  footer {
    height: 80px;
  }
}

//600px / 37.5em
@media screen and (max-width: 667px) {
  #wrapper {
    width: 98%;
  }
  main#content {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 60% 50px 1fr;
    background-position: center;
  }
  figure {
    img {
      display: block;
    }
    figcaption {
      background-color: #fff;

      p {
        line-height: 1.7em;
      }
    }
  }

  .imageOne {
    grid-area: 1 / 1 / 2 / 3;
  }
  .header {
    grid-area: 2 / 1 / 3 / 3;
    h1 {
      line-height: 50px;
      font-size: 1.4em;
    }
  }
  .text {
    grid-area: 3 / 1 / 4 / 3;

    h2 {
      clear: left;
      font-size: 1.2em;
    }
    figure#img2 {
      float: right;
    }

    figure#img3 {
      float: left;
      padding-right: 0.25em;
      padding-top: 0.25em;
      margin-right: 0.25em;
      margin-bottom: 0.25em;
    }

    p {
      font-size: 0.85em;
      background-color: rgba(255, 255, 255, 0.9);
    }
  }

  ul#facts {
    li {
      font-size: 0.85em;
    }
  }

  footer {
    height: 80px;
  }
}

//480px
@media screen and (max-width: 30em) {
  #wrapper {
    width: 98%;
  }
  main#content {
    display: grid;
  }
  figure {
    img {
      display: block;
    }
    figcaption {
      background-color: #fff;

      p {
        line-height: 1.7em;
      }
    }
  }

  .imageOne {
    grid-area: 1 / 1 / 2 / 3;
  }
  .header {
    grid-area: 2 / 1 / 3 / 3;

    h1 {
      line-height: 50px;
      font-size: 1.3em;
    }
  }
  .text {
    grid-area: 3 / 1 / 4 / 3;
    h2 {
      clear: left;
      font-size: 1.1em;
    }
    p {
      font-size: 0.8em;
      line-height: 1.8em;
    }
  }
  ul#facts {
    li {
      font-size: 0.8em;
      line-height: 30px;
    }
  }

  footer {
    height: 80px;
  }
}

@media screen and (max-width: 360px) {
  #wrapper {
    width: 98%;
  }
  main#content {
    display: grid;
  }

  .imageOne {
    grid-area: 1 / 1 / 2 / 3;
  }
  .header {
    grid-area: 2 / 1 / 3 / 3;

    h1 {
      line-height: 50px;
      font-size: 1.25em;
    }
  }
  .text {
    grid-area: 3 / 1 / 4 / 3;
    h2 {
      clear: left;
      font-size: 1em;
    }
    p {
      font-size: 0.8em;
    }
    figure#img2 {
      width: 48%;
    }

    figure#img3 {
      width: 48%;
    }
  }

  footer {
    height: 80px;
  }
}

              
            
!

JS

              
                
              
            
!
999px

Console