A Pen by Nick Roberts

Thumbnail
This awesome code was written by barricade823, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright barricade823 ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Nick Roberts</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="carousel-wrapper" style="height: 400px;">
  <span id="target-item-1"></span>
  <span id="target-item-2"></span>
  <span id="target-item-3"></span>
  <div class="carousel-item item-1">
    <h2>Item 1</h2>
    <p>Content goes here.</p>
    <a class="arrow arrow-prev" href="#target-item-3"></a>
    <a class="arrow arrow-next" href="#target-item-2"></a>
  </div>
  <div class="carousel-item item-2 light" style="background-color: royalblue;">
    <h2>Item 2</h2>
    <p>Content goes here.</p>
    <a class="arrow arrow-prev" href="#target-item-1"></a>
    <a class="arrow arrow-next" href="#target-item-3"></a>
  </div>
  <div class="carousel-item item-3">
    <h2>Item 3</h2>
    <p>Content goes here.</p>
    <a class="arrow arrow-prev" href="#target-item-2"></a>
    <a class="arrow arrow-next" href="#target-item-1"></a>
  </div>
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/barricade823/a-pen-by-nick-roberts-MweLJp */
.carousel-wrapper {
  position: relative;
  
  .carousel-item {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 25px 50px;
    opacity: 0
      
  }
}

Comments