Updates to Projects Page

Export/assets/css/Carousel---Slider-With-Animation.css

@@ -0,0 +1,168 @@
+.carousel-item {
+  height: 600px;
+  position: relative;
+  overflow: hidden;
+}
+
+.carousel-item img {
+  height: 100%;
+  width: 100%;
+  object-fit: cover;
+  transition: transform 1s ease;
+}
+
+.carousel-caption {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  text-align: center;
+  width: 100%;
+  padding: 0;
+}
+
+.carousel-text-container {
+  position: relative;
+  z-index: 4;
+  opacity: 0;
+  transform: translateX(100px);
+  transition: all 1s ease;
+}
+
+.carousel-button {
+  transition: all 1s ease;
+}
+
+.carousel-button .btn {
+  background-color: #38c3ff;
+  color: #ffffff;
+  border: none;
+  padding: 0.75rem 1.5rem;
+  font-size: 1.2em;
+  border-radius: 5px;
+  cursor: pointer;
+  z-index: 7;
+}
+
+.carousel-overlay {
+  position: absolute;
+  top: -100%;
+  left: 50%;
+  transform: translateX(-50%);
+  width: calc(70% - 450px);
+  height: 170%;
+  background-color: rgba(89,170,204,0.6);
+  z-index: 2;
+  transition: all 1s ease;
+  border-radius: 4px;
+  padding-top: 50px;
+  display: block;
+}
+
+.carousel-item.active img {
+  transform: translateX(0);
+}
+
+.carousel-item.active .carousel-text-container {
+  opacity: 1;
+  transform: translateX(0);
+  transition-delay: 0.2s;
+}
+
+.carousel-item.active .carousel-button {
+  opacity: 1;
+  transition-delay: 1.2s;
+}
+
+.carousel-item.active .carousel-overlay {
+  top: -50px;
+}
+
+.heading_titles {
+  margin-top: 70px !important;
+  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
+  font-weight: 700;
+}
+
+.btn_view_more {
+  margin-top: 15px;
+  z-index: 3 !important;
+  opacity: 1;
+  position: relative;
+}
+
+@media (max-width: 1480px) {
+  .carousel-overlay {
+    width: calc(60% + 50px);
+  }
+}
+
+@media (max-width: 768px) {
+  .btn_view_more {
+    /*margin-top: 15px;*/
+    z-index: 3 !important;
+  }
+}
+
+@media (max-width: 768px) {
+  .carousel-button .btn {
+    font-size: 1em;
+    padding: 0.5rem 1rem;
+  }
+}
+
+@media (max-width: 768px) {
+  .carousel-item {
+    height: 500px;
+    z-index: 7;
+  }
+}
+
+@media (max-width: 768px) {
+  .carousel-overlay {
+    width: calc(80% + 50px);
+  }
+}
+
+@media (max-width: 576px) {
+  .carousel-button .btn {
+    font-size: 0.8em;
+    padding: .4rem .8rem;
+  }
+}
+
+@media (max-width: 576px) {
+  .carousel-item {
+    height: 400px;
+  }
+}
+
+@media (max-width: 576px) {
+  .carousel-overlay {
+    width: calc(90% + 50px);
+  }
+}
+
+.small_heading {
+  text-shadow: 2px 2px 8px rgb(67,67,67);
+}
+
+.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
+  --bs-gutter-x: 1.5rem;
+  --bs-gutter-y: 0;
+  width: 100%;
+  padding: 0px;
+  margin: 0px;
+  padding-right: calc(var(--bs-gutter-x) * .5);
+  padding-left: calc(var(--bs-gutter-x) * .5);
+  margin-right: auto;
+  margin-left: auto;
+  padding: 0px;
+  margin: 0px;
+}
+
+.container-fluid {
+  padding: 0px;
+  margin: 0px;
+}
+

Export/assets/css/styles.css

@@ -234,3 +234,7 @@
   object-fit: cover;
 }
 
+.dropdown:hover .dropdown-menu {
+  display: block;
+}
+