index.html

<!DOCTYPE html>
<html>
    <head>
        <title>✳ Visit Buenos Aires!</title>
        <meta charset="UTF-8">
        <meta name="author" content="L&T">
        <link rel="stylesheet" type="text/css" href="styles.css">
        <link rel="icon" href ="buenos_photos/logo.png" type = "image/x-icon">
    </head>
    <body>
        <ul class="nav-bar">
            <li class="menu-special-item"><a class="block" href="index.html" ><img src="buenos_photos/logo.png" alt="" width="150" height="30"></a></li>
            <li class="menu-item"><a class="block" href="contact.html"><strong>Contact</strong></a></li>
            <li class="menu-item"><a class="block" href="quiz.html"><strong>Quiz</strong></a> </li>
            <li class="menu-item"><a class="block" href="wheretostay.html"><strong>Where to Stay</strong></a></li>
            <li class="menu-item"><a class="block" href="howtotravel.html"><strong>How to Travel</strong></a></li>
            <li class="menu-item"><a class="block" href="history.html" ><strong>History</strong></a></li>
            <li class="menu-item"><a class="block" href="activities.html" ><strong>Activities</strong></a></li>
            <li class="menu-item"><a class="block" href="attractions.html" ><strong>Attractions</strong></a></li>
        </ul>
        <ul class="home-nav-bar">
            <li class="home-menu-item"><a href="#map">  <img src="buenos_photos/Homepage/maps_icon.webp" title="Google Maps" height="50px" width="45px"> </a></li>
            <li class="home-menu-item"><a href="#video">  <img src="buenos_photos/Homepage/yt.jpg" title="Youtube Video" height="50px" width="45px"> </a></li>
            
        </ul>


<div class="attraction-guide"><p><b>✳ Visit Buenos Aires</b> is a <b>travel guide-website</b><br> for <b>Argentina's</b> <b>capital</b>, <b>Buenos Aires!</b><br>
    You can explore the pages: <br><b>Attractions</b>, <b>Activities</b>, <b>History</b>, <b>How to Travel</b>, <b>Where to stay</b>, <b>Quiz</b> and <b>Contact</b>, <br>through the <b>menu</b>, at the <b>top</b> of the page,
    where <br>you will find detailed information</b> about the <b>sights</b>, <br><b>tourist activities</b>, <b>city history</b>, <br><b>flight travel info</b>, <b>hotels</b>, a<br> <b>Trivia Quiz</b> and our <b>contact info</b>,<br> respectively.<br>
    Finally, you can <b>return </b>to our <b>homepage</b> from <b>any page,</b><br> by <b>clicking</b> the <b>logo</b>, <b>at the top left</b> of the <b>menu!</b></div>
        


    
    <!-- Slideshow container -->
<div class="slideshow-container">

    <!-- Full-width images with number and caption text -->
    <div class="mySlides fade">
      <div class="numbertext">1 / 3</div>
      <img src="buenos_photos/Homepage/Slide/logo.jpg" style="width:100%">
      <div class="text">Visit Buenos Aires Logo</div>
    </div>
  
    <div class="mySlides fade">
      <div class="numbertext">2 / 3</div>
      <img src="buenos_photos/Homepage/Slide/lights.png" style="width:100%">
      <div class="text">The city's nightlife</div>
    </div>
  
    <div class="mySlides fade">
      <div class="numbertext">3 / 3</div>
      <img src="buenos_photos/Homepage/Slide/scraper.jpg" style="width:100%">
      <div class="text">Obelisco de Buenos Aires</div>
    </div>
  
    <!-- Next and previous buttons -->
    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
    <a class="next" onclick="plusSlides(1)">&#10095;</a>
  </div>
  <br>
  
  <!-- The dots/circles -->
  <div style="text-align:center">
    <span class="dot" onclick="currentSlide(1)"></span>
    <span class="dot" onclick="currentSlide(2)"></span>
    <span class="dot" onclick="currentSlide(3)"></span>
  </div>

  <div class="attraction-guide"><p>Strongly influenced by <b>European culture</b>, <b>Buenos Aires</b><br> is sometimes called the <b>"Paris of the South"</b><br> or the <b>"Paris of South America"</b>. It is one<br> of the most <b>complex</b> cities in Latin America,<br> known for its <b>architecture</b>, <b>nightlife</b><br> and <b>cultural events</b>. It is also<br> one of the <b>richest cities</b> in Latin America,<br> with a large <b>middle class</b> and a <b>large number</b> of residents <br>with <b>higher education</b>.</p></div>

    <div id="map">
        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d125004.94854408698!2d-58.50470565020342!3d-34.58186080353725!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x95bcca3b4ef90cbd%3A0xa0b3812e88e88e87!2sBuenos%20Aires%2C%20Argentina!5e0!3m2!1sen!2sgr!4v1732728385783!5m2!1sen!2sgr" width="550" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
    </div>
    <div id="video">
        <iframe width="550" height="500" src="https://www.youtube.com/embed/4sbYjI_AtmY?si=uJ-jZA5TZe2nMaSt" title="Buenos Aires Youtube Video Guide" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
    </div>









  <script>
    let slideIndex = 1;
    showSlides(slideIndex);
    
    function plusSlides(n) {
      showSlides(slideIndex += n);
    }
    
    function currentSlide(n) {
      showSlides(slideIndex = n);
    }
    
    function showSlides(n) {
      let i;
      let slides = document.getElementsByClassName("mySlides");
      let dots = document.getElementsByClassName("dot");
      if (n > slides.length) {slideIndex = 1}    
      if (n < 1) {slideIndex = slides.length}
      for (i = 0; i < slides.length; i++) {
        slides[i].style.display = "none";  
      }
      for (i = 0; i < dots.length; i++) {
        dots[i].className = dots[i].className.replace(" active", "");
      }
      slides[slideIndex-1].style.display = "block";  
      dots[slideIndex-1].className += " active";
    }
    </script>

    <footer>
            <p>&copy; 2024-2025 | Introduction to Computer Science<br>Athanasios Gourdomichalis & Leonidas Bouzas</p>
        </footer>
        <script src="main.js"></script>
      </body>
</html>