Merge pull request #120 from YooAshu/carousel

added carousel at top
tushargupta1504 · Oct 3, 2024 · 460ef11 · 460ef11
2 parents c6f819f + 7cc91ea
commit 460ef11
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 11 deletions.
diff --git a/img/HD-wallpaper-medical-hospital.png b/img/HD-wallpaper-medical-hospital.png
diff --git a/img/medicine-healthcare-people-conce.png b/img/medicine-healthcare-people-conce.png
diff --git a/img/surgery-1822458_640.png b/img/surgery-1822458_640.png
diff --git a/index.html b/index.html
@@ -52,7 +52,38 @@ <h3>Your Health, Our Priority</h3>
             <a href="#" class="btn">EXPLORE</a>
         </div>
 
+        <div style="height: 100vh; filter: brightness(0.7);">
+
+            <div id="carouselExampleFade" class="carousel slide carousel-fade" data-bs-ride="carousel" style="height: 100%;">
+                <div class="carousel-indicators">
+                    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
+                    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
+                    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
+                  </div>
+                <div class="carousel-inner" style="height: 100%;">
+                  <div class="carousel-item active">
+                    <img src="./img/HD-wallpaper-medical-hospital.png" class="d-block w-100" alt="...">
+                  </div>
+                  <div class="carousel-item">
+                    <img src="./img/medicine-healthcare-people-conce.png" class="d-block w-100" alt="...">
+                  </div>
+                  <div class="carousel-item">
+                    <img src="./img/surgery-1822458_640.png" class="d-block w-100" alt="...">
+                  </div>
+                </div>
+                <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleFade" 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="#carouselExampleFade" data-bs-slide="next">
+                  <span class="carousel-control-next-icon" aria-hidden="true"></span>
+                  <span class="visually-hidden">Next</span>
+                </button>
+              </div>
+        </div>
+
     </section>
+
 
     <!-- home section ends-->
 
@@ -267,7 +298,7 @@ <h6 class="card-text">Specializes in the medical care of infants, children</h5>
 
     <div class="bg-mavi py-5">
         <div class="container">
-            <div class="col d-flex flex-column">
+            <div class="col d-flex flex-column " id="bottom-carousel">
                 <div class="d-flex justify-content-center mb-5">
                     <div class="card-body text-center text-white w-50 d-flex flex-column">
                         <h1 class="card-title">''</h1>

diff --git a/style.css b/style.css
@@ -140,33 +140,41 @@ header .fa-bars{
 }
 
 .home{
-    display: flex;
-    align-items: center;
+    /* display: flex; */
+    /* align-items: center; */
     min-height: 100vh;
-    background: url(img/bg-home.png)no-repeat;
-    background-size: cover;
-    background-position: center;
+    /* background: url(img/bg-home.png)no-repeat; */
+    /* background-size: cover; */
+    /* background-position: center; */
+    padding: 0;
 }
 
 .home .content{
     max-width: 50rem;
+    position: absolute;
+    z-index: 1;
+    top: 50%;
+    transform: translateY(-50%);
+    left: 10%;
 }
 
 .home .content h3{
     font-size: 5rem;
-    color: #333;
+    color: #ffffff;
+    font-weight: bold;
+    text-shadow: 0 0 4px #ffffff;
 }
 
 .home .content span{
     font-size: 3.5rem;
-    color: var(--blue);
+    color: #a7e0ff;
     padding: 1rem 0;
     line-height: 1.5;
 }
 
 .home .content p{
     font-size: 1.5rem;
-    color: #000000;
+    color: #ffffff;
     padding: 1rem 0;
     line-height: 1.5;
 }
@@ -325,13 +333,13 @@ ul li .nav-link:hover{
     height: 200px;
 }
 
-.carousel-indicators button {
+#bottom-carousel .carousel-indicators button {
     width: 45px !important;
     height: 45px !important;
     border-radius: 50%;
 }
 
-.carousel-indicators button.active {
+#bottom-carousel .carousel-indicators button.active {
     width: 50px !important;
     height: 50px !important;
 }