<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Esportes</title>
</head>
<body>
    <div id="showcase">
        <div class="showcase-text-container parallax">
            <div class="showcase-content">
                <h1>This is a Cave.</h1>
                <p>Do not go into this cave. These people are a prime example of what not to do and I'm pretty sure one of them isn't even a human.</p>
            </div>
        </div>
          <div class="parallax overlay-parallax">
          </div>
        <div class="showcase-background parallax">
          <div id="carousel" class="carousel slide carousel-fade" data-ride="carousel">
          <div class="carousel-inner">
            <div class="carousel-item active">
              <img class="d-block" src="https://images.unsplash.com/photo-1530236209717-4534816b9f6d?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=e38edd7b112a976922c3d44a81549bd7" alt="First slide">
            </div>
            <div class="carousel-item">
              <img class="d-block" src="https://images.unsplash.com/photo-1511122663218-255ef2f76363?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=622ceb8c6b9caa84b5e88dbf531424af" alt="Second slide">
            </div>
            <div class="carousel-item">
              <img class="d-block" src="https://images.unsplash.com/photo-1502027566796-ed21d1abd7fc?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=22a4918c74aaea7a11f56d4143c5fd7d" alt="Third slide">
            </div>
          </div>
        </div>
        </div>
          <div class="height"></div>

          <script>
            $('.carousel').carousel({
                interval: 5000,
                pause: false
                })
          </script>
</body>
</html>