<div class="slide-container">
    <div class="slide">
       <div class="image-ctn">
         <img src="https://images.unsplash.com/photo-1526716121440-dc3b4f254a0a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1300&q=80" style="max-width: 100%"/>
       </div>
      <div class="text-ctn">
        <h1>Giant Panda</h1>
        <p>The giant panda, also known as panda bear or simply panda, is a bear native to south central China. It is easily recognized by the large, distinctive black patches around its eyes, over the ears, and across its round body.</p>
      </div>
    </div>
 
    <div class="slide">
       <div class="image-ctn">
         <img src="https://images.unsplash.com/photo-1551316679-9c6ae9dec224?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80" />
       </div>
      <div class="text-ctn">
        <h1>Elephant</h1>
        <p>Elephants, the largest existing land animals, are mammals of the family Elephantidae. Three species are currently recognised: the African bush elephant, the African forest elephant, and the Asian elephant.</p>
      </div>
    </div>      
    <div class="slide">
       <div class="image-ctn">
         <img src="https://images.unsplash.com/photo-1544779493-aa344a6ddaac?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80" />
       </div>
      <div class="text-ctn">
        <h1>Koala</h1>
        <p>The koala (Phascolarctos cinereus, or, inaccurately, koala bear) is an arboreal herbivorous marsupial native to Australia. It is the only extant representative of the family Phascolarctidae and its closest living relatives are the wombats, which comprise the family Vombatidae.</p>
      </div>
    </div>      
    
  </div>
:root {
 --color-lighter: #e6f8f9;  
 --color-light: #b1e8ed;
 --color-dark: #edb5f5;
 --color-darker: #e86ed0;
}

img {
  max-width: 100%;
}
h1 {
  font-size: 3rem;
}

p {
  font-size: 1.2rem;
}

.text-ctn {
  width: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 1em;
  height: 100%;
}

.image-ctn {
  width: 50%;
}

body {
  padding: 0;
  margin: 0;
  font-family: sans-serif;
}

.slide-container {
  scroll-snap-type: x mandatory;
  overflow-x: scroll;
  display: flex;
}

.slide {
  scroll-snap-align: end;
  min-width: 100vw;
  height: 100vh;
  display: flex;
}

.light {
  background-color: var(--color-light);
}

.lighter {
  background-color: var(--color-lighter);
}

.dark {
  background-color: var(--color-dark);
}

.darker {
  background-color: var(--color-darker);
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.