gm

<div class="wrapper" style="
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
">
<style>html,
body,
.wrapper {
    height: 100%;
}

html,
body {
    padding: 0;
    margin: 0;
}

body {
    font: 1rem / 1.516 'Montserrat', Arial, sans-serif;
}

.wrapper {
    position: relative;
    background: url(https://source.unsplash.com/vZlTg_McCDo/1920x1080) no-repeat center center/cover;
}

.wrapper:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(33, 33, 33, 0.25);
}

header,
.content,
footer {
    position: absolute;
}

header,
footer {
    width: 100%;
}

header {
    top: 0;
    text-align: center;
}

.header__logo {
    max-width: 65px;
    fill: #fff;
}

.content {
    top: 140px;
    left: 50%;
    text-align: center;
    color: #fff;
    transform: translate(-50%, 0);
}

.content h1 {
    margin-top: 0;
}

.content form {
    margin: auto;
    display: table;
}

.content input {
    float: left;
    font-size: 16px;
    border: 1px solid #fff;
}

.content input[type=email] {
    padding: 12px;
    background: #fff;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

.content input[type=submit] {
    padding: 12px 24px;
    color: #fff;
    background: transparent;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    cursor: pointer;
    transition: all .235s ease-in-out;
}

.content input[type=submit]:hover {
    color: #212121;
    background: #fff;
}

.countdown {
    margin: auto;
    display: table;
    font-size: 28px;
    font-weight: 500;
}

.countdown > div {
    float: left;
    min-width: 80px;
}

.countdown span {
    position: relative;
    display: block;
    font-size: 16px;
    text-align: center;
}

.countdown span:before {
    content: '';
    position: absolute;
    top: -2px;
    right: 0;
    left: 0;
    margin-right: auto;
    margin-left: auto;
    width: 20px;
    height: 1px;
    background: #fff;
}

footer {
    padding-bottom: 12px;
    bottom: 0;
}

.footer__links {
    text-align: center;
    list-style-type: none;
}

.footer__links li {
    display: inline-block;
}

.footer__links li:nth-of-type(n+2) {
    margin-left: 12px;
}

.footer__links a {
    padding: 8px 0;
    display: block;
    width: 41px;
    text-align: center;
    color: #fff;
    border: 1px solid;
    border-radius: 50%;
    transition: opacity .235s ease-in-out;
}

.footer__links a:hover {
    opacity: .5;
}

.footer__links .fa {
    vertical-align: middle;
    font-size: 21px;
}</style>
  <header>
    <img src="https://1i276tlpzsba6c4ef4sj1952-wpengine.netdna-ssl.com/wp-content/uploads/2020/05/Logo-home-wide2-black.png" style="max-width: 300px;">

  </header>

  <main class="content">
    <h1>COMING SOON!</h1>

    <div class="countdown">
      <div class="countdown__days">
        <div class="number">20</div>
        <span class="">Days</span>
      </div>

      <div class="countdown__hours">
        <div class="number">0</div>
        <span class="">Hours</span>
      </div>

      <div class="countdown__minutes">
        <div class="number">0</div>
        <span class="">Minutes</span>
      </div>

      <div class="countdown__seconds">
        <div class="number">0</div>
        <span class="">Seconds</span>
      </div>
    </div>

    <p>Our website is under construction. We`ll be here soon<br>with our new awesome site.</p>


  </main>


  <div class="carousel-wrapper">
        <div class="carousel">
          <div><img src="https://cdn.shopify.com/s/files/1/0642/5513/1881/t/1/assets/1.jpg?v=1652300346"></div>
          <div><img src="https://cdn.shopify.com/s/files/1/0642/5513/1881/t/1/assets/2.jpg?v=1652300356"></div>
          <div><img src="https://cdn.shopify.com/s/files/1/0642/5513/1881/t/1/assets/3.jpg?v=1652300356"></div>
          <div><img src="https://cdn.shopify.com/s/files/1/0642/5513/1881/t/1/assets/4.jpg?v=1652300356"></div>
          <div><img src="https://cdn.shopify.com/s/files/1/0642/5513/1881/t/1/assets/5.jpg?v=1652300356"></div>
          <div><img src="https://cdn.shopify.com/s/files/1/0642/5513/1881/t/1/assets/6.jpg?v=1652300356"></div>
          <div><img src="https://cdn.shopify.com/s/files/1/0642/5513/1881/t/1/assets/7.jpg?v=1652300356"></div>
          <div><img src="https://cdn.shopify.com/s/files/1/0642/5513/1881/t/1/assets/8.jpg?v=1652300356"></div>
        </div>
  </div>

  <style> .carousel{
    width:90%;
    margin:0px auto;
    position: absolute;
    bottom: 10px;
  }
  .slick-slide{
    margin:10px;
  }
  .slick-slide img{
    width:100%;
    border: 2px solid #fff;
  }
    .slick-track{
    display: flex;
    }
    .carousel button{
        display: none !important;
    }
    @media (max-height: 495px){
      .carousel{
        display: none;
      }
    }
  </style>
  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"> </script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.8/slick.min.js"> </script>
  <script>
  $(document).ready(function(){
    $('.carousel').slick({
    slidesToShow: 3,
    dots:false,
    centerMode: true,
    autoplay: true,
    autoplaySpeed: 2500,
    });
  });
  </script>

  <script>(() => {
  // Specify the deadline date
  const deadlineDate = new Date("May 31, 2022 23:59:59").getTime();

  // Cache all countdown boxes into consts
  const countdownDays = document.querySelector(".countdown__days .number");
  const countdownHours = document.querySelector(".countdown__hours .number");
  const countdownMinutes = document.querySelector(
    ".countdown__minutes .number"
  );
  const countdownSeconds = document.querySelector(
    ".countdown__seconds .number"
  );

  // Update the count down every 1 second (1000 milliseconds)
  setInterval(() => {
    // Get current date and time
    const currentDate = new Date().getTime();

    // Calculate the distance between current date and time and the deadline date and time
    const distance = deadlineDate - currentDate;

    // Calculations the data for remaining days, hours, minutes and seconds
    const days = Math.floor(distance / (1000 * 60 * 60 * 24));
    const hours = Math.floor(
      (distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
    );
    const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    const seconds = Math.floor((distance % (1000 * 60)) / 1000);

    // Insert the result data into individual countdown boxes
    countdownDays.innerHTML = days;
    countdownHours.innerHTML = hours;
    countdownMinutes.innerHTML = minutes;
    countdownSeconds.innerHTML = seconds;
  }, 1000);
})();
</script>
</div>