Skip to content

Commit

Permalink
Merge pull request #1278 from Soumya6Tiwari/branch2
Browse files Browse the repository at this point in the history 
 Issue Number: # 309 Added and Updated the caraousel
  • Loading branch information
@sunny0625
sunny0625 authored Jul 6, 2024
2 parents 529cc0a + 43eaf04 commit 4af33b2
Showing 1 changed file with 86 additions and 62 deletions.
148 changes: 86 additions & 62 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -100,105 +100,80 @@
</div>
</nav>

<section id="homeSlider" class="carousel slide carousel-fade bg-black" data-bs-ride="carousel">
<section id="homeSlider" class="carousel slide carousel-fade bg-black" data-bs-ride="carousel" data-bs-interval="5000">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-bs-target="#homeSlider" data-bs-slide-to="0" class="active"></li>
<li data-bs-target="#homeSlider" data-bs-slide-to="1"></li>
<li data-bs-target="#homeSlider" data-bs-slide-to="2"></li>
<li data-bs-target="#homeSlider" data-bs-slide-to="3"></li>
<li data-bs-target="#homeSlider" data-bs-slide-to="4"></li>
</ol>

<div class="carousel-inner">
<!-- Slide 1 -->
<div class="carousel-item active">
<div class="slider-bg d-flex justify-content-center">
<img src="Images/homeSliderImages/home-slider-1.jpg" class="homeimg">
<img src="Images/homeSliderImages/home-slider-1.jpg" class="homeimg" alt="Slide 1 Image">
</div>
<div class="carousel-caption d-flex flex-column justify-content-center h-100">
<p class="slider-subtitle slider-reveal">TRADITIONAL & HYGIENIC</p>
<h1 class="slider-title slider-reveal">
For the <span>love</span> of <br>
<span style="color:rgb(151, 33, 202);">delicious</span> food
</h1>
<p class="slider-text slider-reveal">
come with family & feel the joy of mouthwatering food
</p>
<a href="Html-files/menu.html" class="btn btn-danger slider-button slider-reveal mx-auto"
role="button">
<span class="text text-1">VIEW OUR MENU</span>
</a>
<h1 class="slider-title slider-reveal">For the <span>love</span> of <br><span style="color:rgb(151, 33, 202);">delicious</span> food</h1>
<p class="slider-text slider-reveal">Come with family & feel the joy of mouthwatering food</p>
<a href="Html-files/menu.html" class="btn btn-danger slider-button slider-reveal mx-auto" role="button"><span class="text text-1">VIEW OUR MENU</span></a>
</div>
</div>
<!-- Slide 2 -->
<div class="carousel-item">
<div class="slider-bg d-flex justify-content-center">
<img src="Images/homeSliderImages/home-slider-2.jpg" class="homeimg">
<img src="Images/homeSliderImages/home-slider-2.jpg" class="homeimg" alt="Slide 2 Image">
</div>
<div class="carousel-caption d-flex flex-column justify-content-center h-100">
<p class="slider-subtitle slider-reveal">DELIGHTFUL EXPERIENCE</p>
<h1 class="slider-title slider-reveal">
Flavors Inspired by <br>
the <span style="color:rgb(107, 107, 185);">Seasons</span>
</h1>
<p class="slider-text slider-reveal">
come with family & feel the joy of mouthwatering food
</p>
<a href="Html-files/menu.html" class="btn btn-danger slider-button slider-reveal mx-auto"
role="button">
VIEW OUR MENU
</a>
<h1 class="slider-title slider-reveal">Flavors Inspired by <br>the <span style="color:rgb(107, 107, 185);">Seasons</span></h1>
<p class="slider-text slider-reveal">Come with family & feel the joy of mouthwatering food</p>
<a href="Html-files/menu.html" class="btn btn-danger slider-button slider-reveal mx-auto" role="button">VIEW OUR MENU</a>
</div>
</div>
<!-- Slide 3 -->
<div class="carousel-item">
<div class="slider-bg d-flex justify-content-center">
<img src="Images/homeSliderImages/home-slider-3.jpg" class="homeimg">
<img src="Images/homeSliderImages/home-slider-3.jpg" class="homeimg" alt="Slide 3 Image">
</div>
<div class="carousel-caption d-flex flex-column justify-content-center h-100">
<p class="slider-subtitle slider-reveal">AMAZING & DELICIOUS</p>
<h1 class="slider-title slider-reveal">
Where every <span style="color:rgb(243, 239, 236)">flavour</span> <br>
tells a <span style="color:rgb(48, 226, 104);">story</span>
</h1>
<p class="slider-text slider-reveal">
come with family & feel the joy of mouthwatering food
</p>
<a href="Html-files/menu.html" class="btn btn-danger slider-button slider-reveal mx-auto"
role="button">
VIEW OUR MENU
</a>
<h1 class="slider-title slider-reveal">Where every <span style="color:rgb(243, 239, 236)">flavour</span> <br>tells a <span style="color:rgb(48, 226, 104);">story</span></h1>
<p class="slider-text slider-reveal">Come with family & feel the joy of mouthwatering food</p>
<a href="Html-files/menu.html" class="btn btn-danger slider-button slider-reveal mx-auto" role="button">VIEW OUR MENU</a>
</div>
</div>
<!-- Slide 4 -->
<div class="carousel-item">
<div class="slider-bg d-flex justify-content-center">
<img src="Images/homeSliderImages/home-slider-4.jpg" class="homeimg">
<img src="Images/homeSliderImages/home-slider-4.jpg" class="homeimg" alt="Slide 4 Image">
</div>
<div class="carousel-caption d-flex flex-column justify-content-center h-100">
<p class="slider-subtitle slider-reveal">EXPERIENCE A FEAST FOR THE SENSES</p>
<h2 class="slider-title slider-reveal">
Bring your loved ones <br>
and indulge
</h2>
<p class="slider-text slider-reveal">
come with family & feel the joy of mouthwatering food
</p>
<a href="Html-files/menu.html" class="btn btn-danger slider-button slider-reveal mx-auto"
role="button">
VIEW OUR MENU
</a>
<h2 class="slider-title slider-reveal">Bring your loved ones <br>and indulge</h2>
<p class="slider-text slider-reveal">Come with family & feel the joy of mouthwatering food</p>
<a href="Html-files/menu.html" class="btn btn-danger slider-button slider-reveal mx-auto" role="button">VIEW OUR MENU</a>
</div>
</div>

<!-- Slide 5 -->
<div class="carousel-item">
<div class="slider-bg d-flex justify-content-center">
<img src="Images/homeSliderImages/home-slider-5.jpg" class="homeimg">
<img src="Images/homeSliderImages/home-slider-5.jpg" class="homeimg" alt="Slide 5 Image">
</div>
<div class="carousel-caption d-flex flex-column justify-content-center h-100">
<p class="slider-subtitle slider-reveal">SAVOR THE TASTE OF TRADITION</p>
<h1 class="slider-title slider-reveal">
Where every bite <br>
tells a story
</h1>
<p class="slider-text slider-reveal">
come with family & feel the joy of mouthwatering food
</p>
<a href="Html-files/menu.html" class="btn btn-danger slider-button slider-reveal mx-auto"
role="button">
VIEW OUR MENU
</a>
<h1 class="slider-title slider-reveal">Where every bite <br>tells a story</h1>
<p class="slider-text slider-reveal">Come with family & feel the joy of mouthwatering food</p>
<a href="Html-files/menu.html" class="btn btn-danger slider-button slider-reveal mx-auto" role="button">VIEW OUR MENU</a>
</div>
</div>
</div>

<!-- Controls -->
<button class="carousel-control-prev" type="button" data-bs-target="#homeSlider" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
Expand All @@ -208,6 +183,55 @@ <h1 class="slider-title slider-reveal">
<span class="visually-hidden">Next</span>
</button>
</section>

<!-- Add some custom CSS for transitions and responsiveness -->
<style>
.slider-bg {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
}

.homeimg {
width: 100%;
height: 100%;
object-fit: cover;
}

.carousel-caption {
text-align: center;
text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);
}

.slider-reveal {
animation: fadeInUp 1.5s ease-in-out;
}

@keyframes fadeInUp {
from {
opacity: 0;
transform: translate3d(0, 40px, 0);
}
to {
opacity: 1;
transform: none;
}
}

@media (max-width: 768px) {
.slider-title {
font-size: 1.5rem;
}
.slider-subtitle, .slider-text {
font-size: 1rem;
}
.carousel-caption {
padding-bottom: 3rem;
}
}
</style>


<section class="about_us pt-5">
<div class="hstack discount-rolling">
Expand Down

0 comments on commit 4af33b2

Please sign in to comment.