<header>
  <div class="container">
    <h1>Responsive Containers</h1>
    <p>Create content for large screens</p>
  </div>
</header>
<main class="container">
  <h2>Lorem Ipsum</h2>
  <img class="float-right" src="https://images.pexels.com/photos/6118899/pexels-photo-6118899.jpeg" alt="balloons" />
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis tenetur nobis quos impedit ullam deleniti! Porro quod quae et at laboriosam, praesentium illum voluptatibus dolorum exercitationem eum eligendi molestias magni?
    Odit, facere. Corrupti natus placeat perferendis neque assumenda saepe, optio, similique temporibus dolore molestiae odio quasi officiis, culpa deleniti sit. Saepe quas eaque temporibus ullam consequuntur soluta adipisci illum ea!
    Repudiandae illum rerum illo animi cupiditate! Inventore illum officiis aliquid vel ullam deserunt ipsum ut. Dicta laudantium tempora voluptatum illum ullam quam fugiat adipisci qui, dolore consectetur suscipit sapiente necessitatibus.</p>
  <div class="clearfix"></div>
  <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Illo dicta accusantium cum sunt totam harum quaerat, aut, magni repellendus doloribus aperiam iste. Eius culpa fugit facilis error odio a dolore!
    Natus dignissimos amet maxime. Odio, voluptate eaque. Reprehenderit ad hic sint a consequuntur quibusdam blanditiis, quasi sit explicabo eum et soluta tempore velit nemo laudantium ipsam eveniet ea amet voluptatem!</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis maxime earum iusto. Necessitatibus possimus amet, est maiores cum nulla rerum distinctio saepe fuga. Est sit eum sint, iusto nulla deleniti.
    Eius laudantium rem fugiat, aliquam expedita aut, aliquid, praesentium deleniti minus enim saepe laboriosam autem ex voluptatum totam dolorem architecto nam incidunt labore ipsa est blanditiis iusto. Quod, in voluptates.
    Repellat, est, possimus dicta unde repudiandae tempore vel ducimus cum ex, impedit quia hic? Molestias itaque quas aliquam placeat earum qui officiis accusamus. Velit error nihil maxime accusamus nostrum dolores?</p>
  <img class="float-left" src="https://images.pexels.com/photos/6118899/pexels-photo-6118899.jpeg" alt="balloons" />
  <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Est vitae blanditiis ducimus consectetur, voluptates commodi, eos, cum rem quo dolorem ab. Illo itaque saepe laborum fuga sunt ut fugit modi!
    Sed, fugit dolore odit alias maxime nesciunt nam enim saepe magni sequi! Dolore reprehenderit sapiente, animi, cupiditate repudiandae, nesciunt optio quam consectetur assumenda debitis est voluptates accusamus sint modi fuga!
    Nostrum ipsa iusto inventore sunt temporibus nam animi cum, distinctio dolore culpa sed voluptatum ipsum delectus optio, similique fugit quidem et? Aliquid voluptatibus nemo deleniti soluta, provident facilis modi nulla?
    Pariatur illo dolorem ipsam ut non consectetur, alias sed similique magnam sapiente debitis illum quis libero ducimus vel nam odio, omnis eum. Debitis, dolorem! Fugit consectetur officia excepturi eaque modi?
    Quasi sed iure eum facere consectetur itaque aperiam hic molestias expedita, dolore libero veniam excepturi, reiciendis sint. Laborum dolorum animi voluptatum atque, architecto ratione quibusdam facere, veritatis dolor placeat aliquam.</p>
</main>

<footer>
  <p>
    Pen by <a href="https://www.jemimaabu.com" target="_blank">Jemima Abu</a><span style="color: #D11E15"> &#9829;</span>
  </p>
</footer>
@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');

body {
  font-family: 'Inter', sans-serif;
  margin: 0;
  background-color: #eaeaea;
}

.container {
  max-width: 900px;
  width: 100%;
  padding: 0 0.5rem;
  margin: auto;
}

header {
  text-align: center;
  color: white; 
  min-height: 45vh;
  display: flex;
  justify-content: center;
  background-image: url('https://images.pexels.com/photos/1229861/pexels-photo-1229861.jpeg');
  background-size: cover;
  background-position: center;
}

h1 {
  font-size: 4.25em;
  margin: 1rem 0;
}

header p {
  margin-top: 0;
  font-size: 1.5em;
}

main {
  margin: 1rem;
}

h2 {
  text-align: center;
  padding-bottom: 1rem;
  border-bottom: 1px solid grey;
}

p {
  font-size: 1.2em;
  line-height: 1.5;
}

.clearfix {
  clear: both;
}

section {
  display: flex;
  justify-content: space-between;
}

img {
  width: 300px;
  max-width: 100%;
  float: right;
  margin-bottom: 1em;
}

.float-right {
  float: right;
  margin-left: 1em;
}

.float-left {
  float: left;
  margin-right: 1em;
}

footer {
  text-align: center;
  padding: 0.5rem 0;
  background-color: #eaeaea90;
}

footer p {
  font-size: 0.75rem;
  margin: 0.25rem 0;
  color: #221133;
}

footer a {
  text-decoration: none;
  color: inherit;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.