Pen Settings

HTML

About HTML Preprocessors

HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.

Learn more · Versions

Adding Classes

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html> tag. If you want to add classes there that can affect the whole document, this is the place to do it.

About the <head>

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. If you need things in the <head> of the document, put that code here.

!
Insecure Resource

The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.

CSS

About CSS Preprocessors

CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.

Learn more · Versions

CSS Base

About CSS Base

It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.

Vendor Prefixing

About Vendor Prefixing

To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit- or -moz-.

We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

Powered by Algolia
About External Resources

You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.

You can also link to another Pen here (use the .css URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ add another resource

JavaScript

About JavaScript Preprocessors

JavaScript preprocessors can help make authoring JavaScript easier and more convenient.

Learn more · Versions

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.

Powered by Algolia
About External Resources

You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.

If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.

You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ 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.

Powered by Algolia
About Packages

Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.

All packages are different, so refer to their docs for how they work.

If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.

Behavior

Auto Save

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 

              
                <div class="spacer"></div>
<div class="container">
  <div class="section">
    <div class="left">
      <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ratione, ex! Dicta natus, iste ipsa provident fugiat molestias impedit suscipit repellat a voluptatem obcaecati voluptas pariatur consequuntur officia, nemo reiciendis rerum? Facilis minus fugit amet totam quae obcaecati, alias nemo, vero enim in nobis earum quo beatae vitae aliquid modi dignissimos.</p>
      <p>Laborum distinctio odit dolores quae eaque, ad fugiat quod corrupti, consequatur architecto vero voluptate ab mollitia ipsam dolorum quibusdam explicabo, laudantium id excepturi! Aspernatur explicabo ex similique molestiae soluta saepe. Dicta veniam perferendis dolorum repudiandae architecto in nulla molestias, sit sint ex aut obcaecati. Odio in numquam corporis possimus illum.</p>
      <p>Esse totam veritatis dignissimos distinctio qui, aliquam odio eos porro voluptatibus mollitia unde nesciunt nostrum vel expedita explicabo repellendus molestiae voluptas commodi aut blanditiis? Ratione blanditiis asperiores ullam facere laborum repellendus laboriosam, sequi repudiandae perspiciatis modi impedit. Harum nihil doloribus, hic eius rem voluptatibus aliquam nemo tempore, illum, placeat provident.</p>
      <p>Eaque voluptas ex facilis quasi explicabo voluptatum eos deleniti reiciendis officiis fugiat autem blanditiis rem similique consequuntur ducimus nam, corrupti, maxime a voluptatem alias quam nostrum nulla porro! Sunt nulla saepe voluptas rem velit enim, tempore recusandae adipisci nam perferendis explicabo porro earum? Molestiae, iure repellendus soluta totam culpa iusto.</p>
      <p>Magni excepturi autem quaerat molestias quidem fugiat cum accusamus illum nulla, similique repellendus delectus fugit dolore! Eaque voluptatem temporibus ab repellendus officiis, delectus distinctio totam nostrum odio quasi minus. Quos, tenetur eaque aspernatur soluta eius sit hic nobis quo voluptates doloremque rerum explicabo veritatis placeat illo earum consectetur quia optio!</p>
      <p>Cumque debitis, error temporibus deserunt veritatis dicta maiores maxime sit, tempora quaerat excepturi culpa ad tempore quae, distinctio perferendis quasi magni et vitae obcaecati tenetur! Tenetur eveniet, at recusandae consequatur, soluta vitae delectus explicabo, ratione provident libero saepe asperiores ut modi iusto laboriosam quia inventore debitis possimus. Qui, dolor mollitia.</p>
      <p>Magnam quod minus debitis ratione culpa? Atque repellat quisquam est architecto neque eos officiis hic vitae tempore voluptatum quis modi nobis repudiandae ullam veritatis commodi placeat dolores, quo a numquam beatae ipsum? Neque architecto inventore at rerum consequuntur molestias fugiat nulla quam laborum asperiores, distinctio, repellendus saepe suscipit tempore adipisci?</p>
      <p>Sapiente consequuntur iste nihil, corporis laborum recusandae, deserunt, asperiores magnam repellat sit animi vitae ipsam ducimus architecto error! Nam excepturi explicabo magnam laboriosam. Error laborum at facere blanditiis commodi officiis reiciendis eligendi, eos magni qui modi nulla excepturi doloremque ipsum placeat fugit voluptatem cupiditate molestias corporis recusandae, voluptates ratione. Magnam.</p>
      <p>Rem ratione in, quae modi cupiditate culpa quibusdam minus commodi inventore incidunt, minima sint suscipit laborum ipsum soluta alias. Ea quis itaque enim magnam reiciendis mollitia eligendi commodi rem quibusdam fugiat, sapiente ab quas in est officia delectus! Eos rem ullam modi corrupti quis id ut quidem tempore obcaecati consectetur.</p>
      <p>Repellendus possimus sequi, ea perspiciatis amet, ullam provident libero eveniet, illo enim corrupti ad laborum praesentium fugiat? Sequi id doloremque totam sint perferendis, repellendus voluptatibus, necessitatibus voluptate officiis sed iusto minima, suscipit ullam iste numquam pariatur inventore maxime earum facere laudantium nostrum voluptatum? Dolore enim repudiandae quia sunt neque. Atque.</p>
      <p>Laboriosam esse autem, eligendi quibusdam voluptatum in excepturi itaque repudiandae rem, quod id inventore? Eligendi ut illum, commodi cupiditate ducimus doloremque culpa sed nam veniam dolores obcaecati! Omnis minus debitis, nihil, alias cum in sed facilis asperiores obcaecati odio temporibus exercitationem ex quidem eligendi qui quos nisi! Aspernatur, dolorum atque.</p>
      <p>Dolorem delectus at vel illum ullam, aut doloremque voluptatum doloribus odio quos atque explicabo ex mollitia pariatur suscipit eos ut et dicta sequi nesciunt! Ad, magnam illo sit quisquam totam reiciendis exercitationem quod deleniti, eum id quibusdam fugiat repellendus corporis molestias accusamus soluta, modi eveniet! Alias debitis natus doloribus atque!</p>
      <p>Maiores saepe, possimus molestiae, cum fuga deserunt porro ut quas doloremque veritatis odit soluta id, voluptatum doloribus velit quisquam? Architecto magni quo aut voluptas recusandae dolorem sed, repellat fugiat vel accusamus ab omnis vero deserunt modi animi consequuntur corrupti repellendus, eius inventore dolores, quas molestias ex totam amet. Beatae, quisquam!</p>
      <p>Est, velit illo. Aut rerum eligendi nobis sunt omnis quas quisquam quia sapiente fuga quis, possimus, animi qui vero hic ipsam maxime, earum reprehenderit velit atque inventore optio corporis at. Alias est dolor culpa necessitatibus adipisci eveniet velit illo animi, eaque voluptate aliquam doloremque tempore magnam et natus. Maiores, id.</p>
      <p>Impedit excepturi magni ut totam nemo accusantium est. Asperiores, quasi quaerat corrupti eligendi tempore velit repudiandae autem atque adipisci sit blanditiis accusantium fugiat, eos nulla obcaecati quia dolore laboriosam neque exercitationem rem cum maiores, omnis ipsa. Nostrum, eveniet sit. Eius vitae voluptates, fuga natus tenetur soluta distinctio ut non deserunt.</p>
    </div>
    <div class="right">
      <img src="https://plus.unsplash.com/premium_photo-1674458852390-ac22d6c502d7?q=40&w=1000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="">
    </div>
  </div>
  <div class="section">
    <div class="left">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat dolore porro error impedit inventore quibusdam assumenda nemo quasi pariatur. In magnam ullam est, sint possimus iusto dolorem ducimus esse provident perspiciatis quibusdam id saepe illo recusandae eveniet facere. In, recusandae!</p>
      <p>Vel quod illum maiores saepe minima doloremque, inventore perferendis aut fugit quae enim adipisci temporibus autem, nam tempore unde. At, cum. Obcaecati praesentium laudantium ipsam eveniet quidem dolorem voluptate veritatis nostrum amet assumenda doloremque necessitatibus optio quae, beatae qui delectus.</p>
      <p>Perspiciatis dignissimos adipisci ratione similique fuga quae, aspernatur excepturi consequuntur quaerat eum deserunt molestiae alias architecto quibusdam, ducimus perferendis esse. Harum itaque, inventore libero dolores unde maxime, praesentium natus minima temporibus veritatis odit et nulla fugit velit neque consequuntur eius!</p>
      <p>Eius adipisci facilis magni ad officiis a est veniam, quod voluptatum perferendis dolores, mollitia accusamus ipsum quos. Magni placeat rerum maxime! Qui neque fugit impedit, deleniti totam et ut dolores? Rem vitae quo ad nihil ullam tempore eveniet blanditiis eos.</p>
      <p>Hic voluptates unde explicabo tempora, dolores iste quam vero corrupti repellendus. Ipsam rerum dignissimos minus sint itaque voluptatem officia, perferendis voluptatum similique ut eligendi hic cumque. Atque magni ipsa in consectetur provident quisquam reprehenderit, rem, vel, ut consequatur tempore! Assumenda!</p>
      <p>Reiciendis, voluptatem impedit ex minima commodi incidunt odit ratione quibusdam suscipit, aliquid totam excepturi voluptatum eligendi quidem necessitatibus. Dolor labore eum debitis consequatur et magni obcaecati totam ratione veritatis perferendis culpa officiis expedita repellat eos distinctio, nihil quaerat. Id, veritatis.</p>
      <p>Libero, voluptatibus facilis quisquam exercitationem necessitatibus eius illo non in, quod nesciunt commodi. Laborum excepturi id expedita ratione, atque deserunt illo recusandae eius totam perferendis impedit est reprehenderit placeat alias iure pariatur dolore eligendi aliquam! Tenetur magnam commodi saepe reprehenderit.</p>
      <p>Repudiandae, reprehenderit voluptas neque itaque nisi dignissimos aliquam ipsum recusandae accusantium dolores praesentium nam modi inventore? Explicabo labore magnam debitis quibusdam deleniti. Porro quis officia, impedit error magni quae voluptatum eligendi voluptates tempore unde minus at alias dolorem debitis! Magnam.</p>
      <p>Libero suscipit accusantium vitae quasi possimus maiores cum necessitatibus cumque, asperiores aliquid ad atque magni amet consequuntur delectus error voluptate unde maxime quod modi natus? Quisquam mollitia laborum fuga sequi quaerat veritatis ipsam eum, debitis reiciendis deleniti sapiente accusantium id!</p>
      <p>Voluptatum incidunt suscipit magnam ipsa! Sint sit quod modi ipsa error ratione debitis dolorum ipsam iste numquam rem necessitatibus fuga tempora, quisquam beatae temporibus eveniet fugit laudantium dolore harum sed corrupti! Eligendi, eius enim quibusdam iure architecto consectetur reprehenderit aliquam.</p>
    </div>
    <div class="right">
      <img src="https://images.unsplash.com/photo-1605235904519-846654176ffc?q=40&w=1000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="">
    </div>
  </div>
  <div class="section">
    <div class="left">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Est quae distinctio voluptatum! Aliquid deleniti debitis quasi. Excepturi, provident. Sequi inventore ad sit corrupti doloribus non dolore odio perspiciatis ea consequuntur, fugit, quia vel molestias aspernatur placeat adipisci rerum. Aliquam, dolorem?</p>
      <p>Tempore veritatis consectetur magnam sit aliquid consequuntur ab, sequi, omnis incidunt ipsum hic maiores amet! Nisi eveniet sint cum quasi sequi ullam officiis culpa consectetur quam ipsam necessitatibus, incidunt veniam debitis velit. Asperiores illum laboriosam qui accusantium inventore non rerum!</p>
      <p>Maiores dolore esse porro ex repudiandae incidunt velit molestias tempore deleniti labore ad molestiae, obcaecati adipisci numquam ipsam perferendis beatae optio at nesciunt ut dignissimos aliquam culpa. Accusantium repudiandae perspiciatis quae hic obcaecati, suscipit officia, nam, placeat quaerat eligendi harum?</p>
      <p>Cumque neque placeat corrupti! Quia doloremque laudantium corporis sed adipisci sapiente, distinctio soluta nisi sequi accusamus earum maxime tempore, doloribus dolore laboriosam repudiandae et cumque officiis dolor possimus. Necessitatibus quisquam sint perspiciatis et nisi omnis sit quod. Consequatur, laborum facere.</p>
      <p>Molestiae nostrum eveniet, exercitationem praesentium a nemo, reprehenderit vel alias culpa quisquam quasi! Laborum, aliquid? Ipsum molestiae temporibus delectus modi iusto magni nihil itaque non provident, nisi repudiandae unde quae, dolorum distinctio aliquam sint vitae optio nam ea, numquam asperiores!</p>
      <p>Architecto sint, libero fuga soluta nisi facere nesciunt quaerat. Quo inventore repellendus dolorum, et amet eveniet tenetur harum cupiditate eos. Repellat labore et explicabo officia est atque, quis voluptas soluta debitis molestias eius reprehenderit ullam totam quaerat, a recusandae ad.</p>
      <p>Mollitia quasi soluta, quidem architecto natus in totam accusamus doloremque quam rerum sunt nemo error, eveniet laborum libero velit. At doloribus labore eveniet non debitis necessitatibus asperiores autem. Voluptatem, dolores! Maiores, pariatur ad. Repellat facilis sit ipsa maiores enim temporibus?</p>
      <p>Cupiditate vitae, voluptatibus id, exercitationem sed odio laborum magnam libero voluptatem necessitatibus iusto animi aliquam et quam sequi, sit similique aperiam. Illum reiciendis saepe perferendis esse eum eaque. Sapiente asperiores inventore ipsum earum eos nulla vel laudantium ducimus officia nihil!</p>
      <p>Qui, aliquam at atque, cupiditate dolores reiciendis odit odio dolorum sapiente maxime illo rerum consequuntur ex quod tenetur minus a, nam nihil omnis repudiandae consectetur laboriosam suscipit? Aliquid nostrum nobis perspiciatis saepe consectetur adipisci, soluta id quidem quae tempora omnis.</p>
      <p>Nemo ea doloremque, nihil ab quisquam iste delectus laboriosam saepe vitae? Soluta repellendus dolorum eos ea minus fuga eaque dolores. Deleniti natus sunt qui architecto explicabo repudiandae soluta id quod, dignissimos eos ea! Minus aliquid itaque excepturi esse, nesciunt vel!</p>
      <p>Ut accusamus ipsum quos, minus repudiandae ex dignissimos vel facilis fugit, assumenda voluptates quae soluta aliquid recusandae cumque atque iusto? Hic quos voluptates nostrum. Cupiditate perspiciatis nulla libero, temporibus nobis quo nemo ex omnis. Accusantium voluptatibus corrupti explicabo temporibus dolorum?</p>
      <p>Ipsam voluptatum nam ullam delectus nostrum minima sit qui quidem ex sapiente rem perferendis repudiandae, quasi explicabo accusamus exercitationem molestias repellat esse quia asperiores minus. Impedit voluptatibus totam vel! Eveniet in quas vitae laudantium hic dolor sunt nesciunt mollitia iusto?</p>
    </div>
    <div class="right">
      <img src="https://images.unsplash.com/photo-1486578077620-8a022ddd481f?q=40&w=1000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="">
    </div>
  </div>
  <div class="section">
    <div class="left">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum cumque eligendi quibusdam voluptatum illum nobis, deleniti corrupti. Laudantium delectus mollitia porro facere, voluptatem ipsum ex natus doloremque, voluptate alias dicta similique placeat molestiae ipsa minima nam, consectetur nisi odio a voluptates fugit. Vel, deserunt error.</p>
      <p>Doloribus sint nisi deleniti laudantium eveniet quidem dolorem optio magni quibusdam esse, at obcaecati. Velit laboriosam voluptate quo sapiente, exercitationem iure perspiciatis vitae provident nisi esse libero ea! Id, fugit magnam reiciendis fuga ducimus ut? Blanditiis et neque, sint incidunt suscipit nesciunt ea corporis dolorum!</p>
      <p>Omnis alias quia deserunt debitis veniam nulla unde eligendi qui id minus eaque ipsa mollitia explicabo ratione quis, sit ullam officia. Ipsum, eligendi quis illo ea iure possimus ipsam magni asperiores ex modi voluptas expedita assumenda vero, saepe, quidem eveniet quae molestias exercitationem natus molestiae?</p>
      <p>Earum suscipit magnam saepe, culpa, harum explicabo hic dolorem neque qui, ratione quisquam reprehenderit nam recusandae. Iure, optio quam praesentium porro sint expedita harum, itaque laboriosam officiis cum inventore nemo natus? At animi aperiam eum sapiente dolore deleniti in voluptatum. Eveniet nam possimus quisquam incidunt!</p>
      <p>Praesentium similique aspernatur illum alias temporibus labore eum amet libero laborum modi asperiores nihil, provident sed deserunt, aliquam consectetur laboriosam natus. Nesciunt quae fugit blanditiis aut, magnam perspiciatis, voluptatem reprehenderit expedita ex id porro, corrupti molestias vitae velit atque natus soluta error repellendus aspernatur recusandae!</p>
      <p>Quas minima in explicabo facere quidem itaque veniam sapiente eligendi commodi debitis, nemo voluptatibus asperiores suscipit illum quaerat! Numquam laboriosam neque debitis, necessitatibus aperiam earum corrupti in ullam expedita nobis totam hic animi dolor. Cum minus expedita quas rerum asperiores sint nemo accusamus illum officiis!</p>
      <p>Delectus ipsum corrupti vero fuga tempore, veniam fugit sunt obcaecati voluptatem voluptas in commodi minus blanditiis soluta quasi. Maiores saepe reiciendis nulla beatae eveniet repellendus sequi nisi, error voluptas sint earum quas ipsum iste illo laborum, suscipit labore corrupti. Magni corrupti qui harum consequatur nisi?</p>
      <p>Quasi perspiciatis a, pariatur, ea, quia voluptatem suscipit sapiente explicabo architecto exercitationem nesciunt? Libero rerum reprehenderit ipsam magni velit enim explicabo quis commodi dolor hic magnam voluptate saepe fugit et molestiae nulla, corporis at repellendus minus doloremque dignissimos, quasi non! Voluptates iure fugit error nesciunt?</p>
      <p>Libero fugit vel dolorem corporis minus ab vitae saepe consectetur error. Porro fuga quos consequuntur temporibus distinctio quae minus delectus illo cum aliquam tempore quaerat hic doloribus recusandae iure labore ipsum ducimus eos, enim vel vero! Incidunt suscipit nemo eaque, voluptatem impedit enim itaque provident!</p>
      <p>Voluptatum aspernatur, eos, quasi alias, maxime sint a corporis rerum tempore amet impedit facere. Dignissimos perspiciatis, cumque, ullam nisi assumenda hic illo quaerat saepe sed quisquam ea maxime impedit. Labore totam, laborum eos minus, porro quae, quia iste eveniet commodi id ipsam illo amet excepturi.</p>
      <p>Saepe nesciunt inventore ipsum? Itaque ratione delectus explicabo. Optio voluptates, fuga enim necessitatibus aut maxime sit accusamus temporibus voluptatum ducimus eum quod laborum expedita, minima a, quaerat officiis laudantium consequuntur cupiditate tempora eligendi dolor deserunt autem illo. Sit adipisci non iure voluptate, facilis nobis commodi?</p>
      <p>Vitae necessitatibus voluptatem voluptas inventore provident aliquam quia earum, omnis ipsum quod iure dicta labore fuga, est ratione delectus harum iusto quam nam eum. Assumenda, aliquam. Architecto unde magni hic, perferendis similique fugiat itaque dicta, tempore modi nostrum minima quisquam vel cum fuga numquam iure!</p>
      <p>Fuga nostrum odio modi, aut minima cum voluptatum nulla saepe asperiores dolores dignissimos consequatur, ea adipisci? Fugit, saepe voluptates provident aspernatur sunt quos corrupti doloribus, quisquam ipsa doloremque error animi praesentium nemo, eveniet assumenda quibusdam adipisci. Sint est quam cumque recusandae dolorum totam incidunt qui!</p>
      <p>Et numquam aut doloribus dolorem alias, eos quibusdam pariatur praesentium atque veritatis voluptatibus sed id a possimus tempore voluptate! Vero, deserunt eaque sed voluptate adipisci, dolorum repellat ab minima dolores autem quia enim quibusdam ducimus veniam totam facere magni numquam? Quasi itaque ipsa id perferendis!</p>
    </div>
    <div class="right">
      <img src="https://images.unsplash.com/photo-1512988442538-a42600ac4634?q=40&w=1000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="">
    </div>
  </div>
</div>
<div class="spacer"></div>
!

CSS 

              
                @import url("https://fonts.googleapis.com/css2?family=Signika+Negative:wght@400;600&display=swap");

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-size: 20px;
  font-family: "Signika Negative", sans-serif, Arial;
}

.spacer {
  width: 100%;
  height: 100vh;
  background-color: coral;
}

.container {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}

.section {
  display: flex;
  width: 100%;
}

.left,
.right {
  width: 50%;
  padding: 1rem;
  overflow: hidden;
}

.right {
  display: flex;
  justify-content: center;
}

.right img {
  max-height: 400px;
  max-width: 49vw;
}
!

JS 

              
                console.clear();
const sections = gsap.utils.toArray(".section");

sections.forEach((section, i) => {
  const img = section.querySelector("img");
  const nextSection = sections[i + 1];
  ScrollTrigger.create({
    trigger: section,
    start: "top top",
    end: "bottom top+=" + (img.clientHeight + 32),
    pin: img,
    pinSpacing: false,
    markers: true
  });
});
!
999px

Console