From f9fa70a7574553bfe614550887130c968b854423 Mon Sep 17 00:00:00 2001
From: Atharv Joshi <joshiatharv1078@protonmail.com>
Date: Mon, 26 Jul 2021 15:56:50 +0530
Subject: [PATCH] changed banner image to carousel , added some media queries
 to prevent breaking of code

---
 css/style.css | 21 +++++++++++++++++++--
 index.html    | 45 ++++++++++++++++++++++++++++++++++++++++++++-
 2 files changed, 63 insertions(+), 3 deletions(-)

diff --git a/css/style.css b/css/style.css
index 03c0ed0..1d20e73 100644
--- a/css/style.css
+++ b/css/style.css
@@ -187,8 +187,7 @@ td {
 
 
 .banner {
-  background-image: url(../images/banner_2021.png);
-  background-position: center;
+  background-position: center ;
   background-repeat: no-repeat;
   -moz-background-size: cover;
   -o-background-size: cover;
@@ -197,6 +196,10 @@ td {
   margin-bottom: 30px;
 }
 
+.carousel-indicators{
+  margin: auto  !important;
+}
+
 #intro {
   display: table;
   width: 100%;
@@ -1817,4 +1820,18 @@ body.mobile-nav-active #mobile-nav-toggle {
   #mobile-nav-toggle {
     display: inline;
   }
+}
+
+@media only screen 
+  and (max-width : 768px) {
+    .banner {
+      min-height: 350px;
+    }
+}
+
+@media only screen 
+  and (max-width : 425px) {
+    .carousel-inner img{
+      height: 400px ;
+    }
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index 52e07b1..5f0bf5b 100644
--- a/index.html
+++ b/index.html
@@ -28,6 +28,7 @@
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
 
   <!-- Main Stylesheet File -->
   <link href="css/style.css" rel="stylesheet">
@@ -96,7 +97,48 @@
   ============================-->
 
 
-    <div class="banner"></div>
+    <div class="banner">
+
+      <div id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="carousel">
+        <!-- lower buttons -->
+        <div class="carousel-indicators">
+          <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
+          <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1" aria-label="Slide 2"></button>
+          <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="2" aria-label="Slide 3"></button>
+        </div>
+        <!-- lower buttons -->
+
+        <!-- images -->
+        <div class="carousel-inner">
+          <div class="carousel-item active" data-bs-interval="1000">
+            <img src="./images/banner_2021.png" class="d-block w-100" alt="...">
+          </div>
+
+          <div class="carousel-item" data-bs-interval="2000">
+            <img src="./images/banner_2021.png" class="d-block w-100" alt="...">
+          </div>
+
+          <div class="carousel-item">
+            <img src="./images/banner_2021.png" class="d-block w-100" alt="...">
+          </div>
+        </div>
+        <!-- images -->
+
+        <!-- side arrow buttons -->
+        <!-- <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="prev">
+          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+          <span class="visually-hidden">Previous</span>
+        </button>
+
+        <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="next">
+          <span class="carousel-control-next-icon" aria-hidden="true"></span>
+          <span class="visually-hidden">Next</span>
+        </button> -->
+        <!-- side arrow buttons -->
+        
+      </div>
+
+    </div>
 
 
   <!-- #intro -->
@@ -539,6 +581,7 @@ <h4>Contact Us</h4>
   <script src="lib/waypoints/waypoints.min.js"></script>
   <script src="lib/counterup/counterup.min.js"></script>
   <script src="lib/touchSwipe/jquery.touchSwipe.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
 
   <!-- Main Javascript File -->
   <script src="js/main.js"></script>