Add files via upload

index.htm

@@ -22,7 +22,6 @@
  display: flex;
  justify-content: space-between;
  align-items: center;
- padding-bottom: 3vh;
  margin-left: 12%;
  margin-right: 12%;
  }
@@ -75,18 +74,17 @@
  .banner {
  display: flex;
  justify-content: center;
-  align-items: center;
- height: 300px; /* set the height of the section to a fixed value */
+  align-items: flex-start;
+
  }
  .banner img{
  width: 100%;
- margin-top:18%;
  }
  /* Style for intro section */
  .intro {
  width: 100%;
  background-color: #2A3566;
- padding-top:22.25%;
+ padding-top:2.25%;
  padding-bottom:3%;
  color: white;
  }
@@ -163,10 +161,53 @@
  margin: 0;
  font-family: 'Circular Light', sans-serif;
  }
+ .slider-container {
+ width: 50%;
+ margin: auto;
+ overflow: hidden;
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+
+ }
+
+ .slides {
+ display: flex;
+ transition: transform 0.5s ease-in-out;
+ }
+
+ .slide {
+ min-width: 100%;
+ box-sizing: border-box;
+ }
+
+ img {
+ width: 100%;
+ }
+
+ .slide-btn {
+ position: absolute;
+ margin-top: -20%;
+ margin-left: 12%;
+ margin-right: 12%;
+ font-size: 24px;
+ cursor: pointer;
+ color: black;
+ border: none;
+
+ border-radius: 50%;
+ }
+
+ .prev {
+ left: 10px;
+ }
+
+ .next {
+ right: 10px;
+ }
 
  footer {
  background-color: #2A3566;
  color: white;
+ margin-top:5%;
  padding-top: 3%;
  padding-bottom: 4%;
  padding-left: 12%;
@@ -189,15 +230,14 @@
 }
 
 
-
 @media screen and (max-width: 600px) {
  /* Styles for screens with a maximum width of 600px */
  .hamburger-menu {
  display: block;
  text-align: right;
  position: absolute;
  transform: translateY(100%);
- top: 0;
+ top: -13px;
  right: 0;
  padding: 15px; /* Adjust padding for better spacing */
  cursor: pointer;
@@ -212,8 +252,7 @@
  margin-bottom: 20px;
  }
  .banner img {
- margin-top: -15%;
- width: 175%;
+ width: 150%;
  }
 
  #left-text-1 {
@@ -248,25 +287,25 @@
  Padding-top: 5%;
  }
  .intro {
- margin-top:-12%;
+ margin-top:0%;
  }
  .intro-text {
  font-size: 5vw;
- margin-top: -15%;
+ margin-top: 4%;
  margin-left: -7%;
  margin-right: -15%;
  }
  #index-header3 {
  margin-top: 10%;
  }
  nav img {
- height: 125px;
+ height: 100px;
  margin: 0px;
  }
  nav {
  margin-left: 3%;
  margin-right: 3%;
- margin-bottom:-3%;
+ margin-bottom:0%;
  }
 
 
@@ -332,7 +371,7 @@
  <!-- Banner image -->
 
  <section class="banner">
- <img src="img-1.png" alt="Banner Image">
+ <img src="index-banner-short.png" alt="Banner Image">
  </section>
 
 
@@ -393,8 +432,25 @@ <h2 class="content-header">Getting in Touch</h2>
  <img src="index-img-3.png"alt="Image 1">
  </div>
  </div>
+
+ <div class="slider-container">
+ <div class="slides">
+ <div class="slide"><img src="home-gallery-1.png" alt="Home Gallery 1"></div>
+ <div class="slide"><img src="home-gallery-2.png" alt="Home Gallery 2"></div>
+ <div class="slide"><img src="home-gallery-3.png" alt="Home Gallery 3"></div>
+ <div class="slide"><img src="home-gallery-4.png" alt="Home Gallery 4"></div>
+ <div class="slide"><img src="home-gallery-5.png" alt="Home Gallery 5"></div>
+ <div class="slide"><img src="home-gallery-6.png" alt="Home Gallery 6"></div>
+ <!-- Add more slides as needed -->
+ </div>
 
+ <button class="slide-btn prev" onclick="prevSlide()">&#10094;</button>
+ <button class="slide-btn next" onclick="nextSlide()">&#10095;</button>
+ </div>
+
 </body>
+
+
 <footer>
  <div class="column">
  <img src="grecos-logo-2.png"alt="Logo" id="footer-logo">
@@ -430,4 +486,24 @@ <h2 class="footer-header">Contact Us</h2>
  navList.style.display = (navList.style.display === 'block' ? 'none' : 'block');
  });
  });
+
+ let currentIndex = 0;
+
+ function showSlide(index) {
+ const slides = document.querySelector('.slides');
+ const slideWidth = document.querySelector('.slide').clientWidth;
+ slides.style.transform = `translateX(-${index * slideWidth}px)`;
+ }
+
+ function nextSlide() {
+ const totalSlides = document.querySelectorAll('.slide').length;
+ currentIndex = (currentIndex + 1) % totalSlides;
+ showSlide(currentIndex);
+ }
+
+ function prevSlide() {
+ const totalSlides = document.querySelectorAll('.slide').length;
+ currentIndex = (currentIndex - 1 + totalSlides) % totalSlides;
+ showSlide(currentIndex);
+ }
 </script>