<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>FutureTech – The Future is Now</title>
  <link rel="icon" href="../../icons/logo-icon.png">
  <link rel="stylesheet" href="../../styles/image-slider.css">
  <link rel="stylesheet" href="../../styles/general-body.css"> 
  <link rel="stylesheet" href="../../styles/header-footer.css"> 
</head>

<body>
  <%- include('../partials/header') %>

  <br> 

  <div id="quote" style="text-align:center; font-style:italic; padding: 10px;"></div>
  <div id="quoter" style="text-align:center; font-style:italic;"></div>

  <section class="slider-container">
    <div class="slider" id="imageSlider">
      <div class="slide">
        <img src="../../images/news/scientists.jpg" alt="Molecular Stabilizer Lab">
        <div class="caption">Molecular Stabilizer Lab</div>
      </div>
      <div class="slide">
        <img src="../../images/news/robotics.jpg" alt="Design and Manufacturing Lab">
        <div class="caption">Design and Manufacturing Lab</div>
      </div>
      <div class="slide">
        <img src="../../images/news/portals.jpg" alt="Portal Experimentation Lab">
        <div class="caption">Portal Experimentation Lab</div>
      </div>
      <div class="slide">
        <img src="../../images/news/android.jpg" alt="Android Development Lab">
        <div class="caption">Android Development Lab</div>
      </div>
    </div>

    <div class="dots" id="dotsContainer">
      <span class="dot active" data-slide="0"></span>
      <span class="dot" data-slide="1"></span>
      <span class="dot" data-slide="2"></span>
      <span class="dot" data-slide="3"></span>
    </div>
  </section>

  <%- include('../partials/footer') %>

  <!-- All the JavaScripts to run -->

  <script src="../../scripts/quotes.js"></script>
  <script src="../../scripts/slider-script.js"></script>
  <script src="../../scripts/captions.js"></script>
  
</body>
</html>
