diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 00000000..6f3a2913
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
\ No newline at end of file
diff --git a/hero-icon.png b/hero-icon.png
new file mode 100644
index 00000000..bc2ebf09
Binary files /dev/null and b/hero-icon.png differ
diff --git a/hero-slider-1.jpg b/hero-slider-1.jpg
new file mode 100644
index 00000000..92363397
Binary files /dev/null and b/hero-slider-1.jpg differ
diff --git a/hero-slider-2.jpg b/hero-slider-2.jpg
new file mode 100644
index 00000000..9900870c
Binary files /dev/null and b/hero-slider-2.jpg differ
diff --git a/hero-slider-3.jpg b/hero-slider-3.jpg
new file mode 100644
index 00000000..3ef66b0e
Binary files /dev/null and b/hero-slider-3.jpg differ
diff --git a/index.html b/index.html
index 2f5b3332..6a2068a6 100644
--- a/index.html
+++ b/index.html
@@ -78,13 +78,78 @@
     </nav>
     
 
-    <section class="intro_container">
-        <h1>Welcome to foodie!</h1>
-        <p>A place with plethora of flavours from different regions be it our country or abroad can be enjoyed, where we
-            try to make your dining experience memorable with tech facilities and customisation and leave an expression
-            which will bring you back to us.</p>
-        <button class="btn">Order Now</button>
+    <section class="hero text-center" aria-label="home" id="home">
+        <ul class="hero-slider" data-hero-slider>
+            <li class="slider-item active" data-hero-slider-item>
+                <div class="slider-bg">
+                    <img src="hero-slider-1.jpg" width="1880" height="950" class="img-cover">
+                </div>
+                <p class="label-2 section-subtitle slider-reveal">Tradational & Hygine</p>
+                <h1 class="display-1 hero-title slider-reveal">
+                    For the love of <br>
+                    delicious food
+                </h1>
+                <p class="body-2 hero-text slider-reveal">
+                    come with family & feel the joy of mouthwatering food
+                </p>
+
+                <a href="#" class="btn btn-primary slider-reveal">
+                    <span class="text text-1">View Our Menu</span>
+                    <span class="text text-2" aria-hidden="true">View Our Menu</span>
+                </a>
+            </li>
+
+            <li class="slider-item active" data-hero-slider-item>
+                <div class="slider-bg">
+                    <img src="hero-slider-2.jpg" width="1880" height="950" class="img-cover">
+                </div>
+                <p class="label-2 section-subtitle slider-reveal">delightful experience</p>
+                <h1 class="display-1 hero-title slider-reveal">
+                    Flavors Inspired by <br>
+                    the Seasons
+                </h1>
+
+                <p class="body-2 hero-text slider-reveal">
+                    come with family & feel the joy of mouthwatering food
+                </p>
+
+                <a href="#" class="btn btn-primary slider-reveal">
+                    <span class="text text-1">View Our Menu</span>
+                    <span class="text text-2" aria-hidden="true">View Our Menu</span>
+                </a>
+            </li>
+
+            <li class="slider-item active" data-hero-slider-item>
+                <div class="slider-bg">
+                    <img src="hero-slider-3.jpg" width="1880" height="950" class="img-cover">
+                </div>
+                <p class="label-2 section-subtitle slider-reveal">amazing & delicious</p>
+                <h1 class="display-1 hero-title slider-reveal">
+                    Where every flavour <br>
+                    tells a story
+                </h1>
+ 
+                <p class="body-2 hero-text slider-reveal">
+                    come with family & feel the joy of mouthwatering food
+                </p>
+
+                <a href="#" class="btn btn-primary slider-reveal">
+                    <span class="text text-1">View Our Menu</span>
+                    <span class="text text-2" aria-hidden="true">View Our Menu</span>
+                </a>
+            </li>
+        </ul>
+
+        <button class="slider-btn prev" aria-label="slide to previous" data-prev-btn>
+            <ion-icon name="chevron-back"></ion-icon>
+        </button>
+
 
+        <button class="slider-btn next" aria-label="slide to next" data-next-btn>
+            <ion-icon name="chevron-forward"></ion-icon>
+        </button>
+
+        
     </section>
 
     <section class="about_us">
@@ -383,6 +448,62 @@ <h4>Follow Us</h4>
         </button>
         <!--Scroll top button finish-->
     </div>
+    <script>
+        const heroSlider = document.querySelector("[data-hero-slider]"); 
+const heroSliderItems = document.querySelectorAll("[data-hero-slider-item]");
+const heroSliderPrevBtn = document.querySelector("[data-prev-btn]");
+const heroSliderNextBtn = document.querySelector("[data-next-btn]");
+
+let currentSlidePos = 0;
+let lastActiveSliderItem = heroSliderItems[0];
+
+const updateSliderPos = function () {
+    lastActiveSliderItem.classList.remove("active");
+    heroSliderItems[currentSlidePos].classList.add("active");
+    lastActiveSliderItem = heroSliderItems[currentSlidePos];
+}
+
+const slideNext = function () {
+    if (currentSlidePos >= heroSliderItems.length - 1) {
+      currentSlidePos = 0;  
+    }   else { 
+        currentSlidePos++;
+    }
+
+    updateSliderPos();
+    }
+heroSliderNextBtn.addEventListener("click", slideNext);
+
+const slidePrev = function () {
+    if (currentSlidePos <= 0) {
+        currentSlidePos = heroSliderItems.length - 1;
+    } else {
+        currentSlidePos--;
+    }
+
+    updateSliderPos();
+}
+
+heroSliderPrevBtn.addEventListener("click", slidePrev);
+
+// auto slide 
+
+let autoSlideInterval;
+
+const autoSlide = function () {
+    autoSlideInterval = setInterval(function (){
+        slideNext();
+    }, 7000);
+};
+
+addEventOnElements([heroSliderNextBtn, heroSliderPrevBtn], "mouseover", function (){
+    clearInterval(autoSlideInterval);
+});
+
+addEventOnElements([heroSliderNextBtn, heroSliderPrevBtn], "mouseover", autoSlide);
+
+window.addEventListener("load", autoSlide);
+    </script>
 
     <script src="Html-files/top.js"></script>
     <script>
diff --git a/style.css b/style.css
index 21537805..f31cd3bc 100644
--- a/style.css
+++ b/style.css
@@ -1148,4 +1148,320 @@ padding-left:2px;
     height: 3rem;
   }
   
-}
\ No newline at end of file
+}
+
+
+/*Slider*/
+.hero .slider-btn {
+  display: none;
+}
+
+.hero {
+  position: relative;
+  padding: 120px;
+  min-height: 97vh;
+  overflow: hidden;
+  z-index: 1;
+}
+
+.hero .slider-item {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 100%;
+  height: 100%;
+  display: grid;
+  place-content: center;
+  padding-block-start: 100px;
+  opacity: 0;
+  visibility: hidden;
+  transition: 1000ms ease;
+  z-index: 1;
+}
+
+.hero .slider-item.active {
+  opacity: 1;
+  visibility: visible;
+}
+
+.hero .slider-bg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  transform: scale(1.15);
+  pointer-events: none;
+  user-select: none;
+  z-index: -1;
+}
+
+.hero .slider-item.active .slider-bg {
+  animation: smoothScale 7s linear forwards;
+}
+
+@keyframes smoothScale {
+  0% {
+    transform: scale(1);
+  }
+
+  100% {
+    transform: scale(1.15);
+  }
+}
+
+.hero .section-subtitle::after {
+  margin-block: 14px 20px;
+}
+
+.hero.text {
+  margin-block: 10px 40px;
+}
+
+.hero .btn {
+  margin-inline: auto;
+}
+
+.hero-btn {
+  position: absolute;
+  bottom: 15px;
+  right: 15px;
+  z-index: 2;
+  background-color: hsl(38, 61%, 73%);
+  width: 110px;
+  height: 110px;
+  padding: 12px;
+  transform: scale(0.6);
+}
+
+.hero-btn img {
+  margin-inline: auto;
+  margin-block-end: 6px;
+}
+
+.hero-btn .span {
+  color:  hsla(0, 0%, 0%, 1);
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.15em;
+  line-height: 0.2em;
+}
+
+.hero-btn::after {
+  inset: 0;
+  border: 1px solid hsl(38, 61%, 73%);
+  animation: rotate360 15s linear infinite;
+}
+
+.slider-reveal {
+  transform: translateY(30px);
+  opacity: 0;
+}
+
+.hero .slider-item.active .slider-reveal {
+  animation: sliderReveal 1s ease forwards;
+}
+
+@keyframes sliderReveal {
+  0% {
+    transform: translateY(30px);
+    opacity: 0;
+  }
+
+  100% {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+.hero .slider-item.active .section-subtitle {
+  animation-delay: 500ms;
+}
+
+.hero .slider-item.active .hero-title {
+  animation-delay: 1000ms;
+}
+
+.hero .slider-item.active .hero-text {
+  animation-delay: 1.5s;
+}
+
+.hero .slider-item.active .btn {
+  animation-delay: 2s;
+}
+
+
+.hero .slider-btn {
+  display: grid;
+  position: absolute;
+  z-index: 1;
+  color: brown;
+  font-size: 2.4rem;
+  border: 1px solid hsl(0, 0%, 6%);
+  width: 45px;
+  height: 45px;
+  place-items: center;
+  top: 50%;
+  transform: translateY(-50%) rotate(45deg);
+  transition: 250ms ease;
+}
+
+.hero .slider-btn ion-icon { transform: rotate(-45deg);}
+
+.hero .slider-btn.prev { left: 30px;}
+
+.hero .slider-btn.next { right: 30px;}
+
+.hero .slider-btn:is(:hover, :focus-visible) {
+  background-color: hsl(38, 61%, 73%);
+  color:  #dddddd;
+}
+
+.hero-btn { transform: scale(0.7);}
+
+.img-cover {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.section-subtitle {
+  position: relative;
+  color: hsl(38, 61%, 73%);
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.4em;
+  margin-block-end: 12px;
+}
+
+.section-subtitle::after {
+  display: block;
+  width: 100px;
+  margin-inline: auto;
+  margin-block-start: 5px;
+}
+
+
+.btn {
+  position: relative;
+  color: #dddddd;
+  font-size: 1.2rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 3px;
+  max-width: max-content;
+  border: 2px solid #dddddd;
+  padding: 12px 45px;
+  overflow: hidden;
+  z-index: 1;
+}
+
+.btn::before {
+  content: "";
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 200%;
+  height: 200%;
+  border-radius: 50%;
+  background-color: hsl(38, 61%, 73%);
+  transition: 500ms ease;
+  z-index: -1;
+}
+
+.btn .text {
+  transition: 250ms ease;
+}
+
+.btn .text-2 {
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  min-width: max-content;
+  color: hsla(40, 12%, 5%, 1);
+}
+
+.btn:is(:hover, :focus-visible)::before {
+  bottom: -50%;
+}
+
+.btn:is(:hover, :focus-visible) .text-1 {
+  transform: translateY(-40px);
+}
+
+.btn:is(:hover, :focus-visible) .text-2 {
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.btn-secondary {
+  background-color: hsl(38, 61%, 73%);
+  color: hsla(0, 0%, 0%, 1);
+}
+
+.btn-secondary::before {
+  background-color: hsla(40, 12%, 5%, 1);
+}
+
+.btn-secondary .text-2 {
+  color: hsla(0, 0%, 100%, 1);
+}
+
+.has-before,
+.has-after {
+position: relative;
+z-index: 1;
+}
+
+.has-before::before,
+.has-after::after {
+content: "";
+position: absolute;
+}
+
+.section {
+position: relative;
+padding-block: 70px;
+overflow: hidden;
+z-index: 1;
+}
+
+.display-1,
+.title-1,
+.title-2
+{
+color: hsla(0, 0%, 100%, 1);
+font-family: var(--fontFamily-forum);
+font-weight: 400;
+line-height: 1.2em;
+}
+
+.display-1 {
+font-size: calc(1.3rem + 6.7vw);
+line-height: 1em;
+}
+
+.tittle-1 {
+font-size: calc(1.6rem + 1.2vw);
+}
+
+.tittle-2 {
+font-size: 2.2rem;
+}
+
+.body-2 {
+font-size: 1.6rem;
+line-height: 1.6em;
+color: #dddddd;
+}
+
+.label-2 {
+font-size: 1.2rem;
+}
+
+.btn-primary {
+  --bs-btn-bg: #c63232;
+}