Hero

JS/script.js

@@ -0,0 +1,65 @@
+function sticky_header() {
+  window.addEventListener("scroll", function () {
+    var header = document.querySelector("header");
+    header.classList.toggle("sticky", window.scrollY > 100);
+  });
+}
+
+function header_dropdown() {
+  const menuToggle = document.querySelector(".menu__toggle");
+  const links = document.querySelector(".links");
+  const nav = document.querySelector("nav");
+  const header = document.querySelector("header");
+
+  menuToggle.addEventListener("click", function () {
+    links.classList.toggle("open");
+    nav.classList.toggle("nav-open");
+    header.classList.toggle("head-open");
+    menuToggle.classList.toggle("active");
+  });
+
+  // ---------------------------------------------
+
+  const dropdown = document.querySelector(".dropdown");
+  const dropdownM = document.querySelector(".dropdown-menu");
+
+  dropdown.addEventListener("click", function () {
+    dropdownM.classList.toggle("dr-open");
+  });
+}
+
+function card_swiper() {
+  new Swiper(".slide-content", {
+    // slidesPerView: 3,
+    spaceBetween: 10,
+    loop: true,
+    centerSlide: "true",
+    fade: "true",
+    grabCursor: "true",
+    pagination: {
+      el: ".swiper-pagination",
+      clickable: true,
+      dynamicBullets: true,
+    },
+    navigation: {
+      nextEl: ".nav-right",
+      prevEl: ".nav-left",
+    },
+
+    breakpoints: {
+      0: {
+        slidesPerView: 1,
+      },
+      1300: {
+        slidesPerView: 2,
+      },
+      1700: {
+        slidesPerView: 3,
+      },
+    },
+  });
+}
+
+sticky_header();
+header_dropdown();
+card_swiper();

css/Card.css

@@ -0,0 +1,172 @@
+/* -------- CARD Starts Here ------------- */
+
+.carousel-body {
+  position: relative;
+  width: 100%;
+  height: 660px;
+  background: var(--gradient-2);
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  color: var(--secondary-text);
+  /* font-family: "Poppins", sans-serif; */
+  padding: 0 50px;
+}
+.carousel {
+  flex-basis: 60%;
+  /* overflow: hidden; */
+  max-width: 1400px;
+  transition: all 300ms ease;
+}
+.carousel-info {
+  flex-basis: 40%;
+}
+.slide-container {
+  position: relative;
+  padding: 60px 0 30px;
+  width: 100%;
+  /* background: rgb(201, 198, 198); */
+  /* overflow: hidden; */
+}
+.slide-content {
+  margin: 0 60px;
+  /* background-color: red; */
+  overflow: hidden;
+  /* border-radius: 25px; */
+}
+.card {
+  /* width:320px; */
+  /* border-radius: 25px; */
+  /* background-color: #fff; */
+}
+.image-content,
+.card-content {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  /* padding: 10px 14px; */
+}
+.image-content {
+  padding: 10px 14px;
+}
+.card-image {
+  /* position: relative; */
+  height: 400px;
+  width: 400px;
+  /* border-radius: 50%; */
+  padding: 3px;
+}
+.card-image .card-img {
+  height: 100%;
+  width: 100%;
+
+  object-fit: cover;
+  border-radius: 20px;
+}
+.button {
+  border: none;
+  font-size: 20px;
+  color: var(--secondary-text);
+  padding: 8px 16px;
+
+  /* background: #4070f4; */
+  background: #34a05f;
+
+  border-radius: 6px;
+  margin: 14px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+.button:hover {
+  color: var(--primary-text);
+  /* background: #265df2; */
+  background: #2b7a4a;
+}
+.swiper-custom-nav {
+  position: absolute;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 4rem;
+
+  /* color: #4070f4; */
+  color: #34a05f;
+}
+.nav-left,
+.nav-right {
+  cursor: pointer;
+}
+.nav-left:hover,
+.nav-right:hover {
+  /* color: #265df2; */
+  color: #2b7a4a;
+}
+.swiper-pagination {
+  --swiper-theme-color: #34a05f;
+}
+.swiper-pagination-bullet {
+  opacity: 1;
+}
+.swiper-pagination-bullet-active {
+  opacity: 1;
+}
+
+.carousel-info {
+  padding: 0px 60px 40px;
+  position: relative;
+}
+.carousel-info h1 {
+  font-size: 3rem;
+  margin-bottom: 20px;
+  font-weight: 600;
+}
+.carousel-info p {
+  font-size: 1.2rem;
+  font-weight: 400;
+}
+@media only screen and (max-width: 1700px) {
+  .carousel {
+    max-width: 950px;
+  }
+}
+@media only screen and (max-width: 1300px) {
+  .carousel {
+    max-width: 550px;
+  }
+  .carousel-info {
+    padding: 0px 30px 40px;
+  }
+}
+
+@media only screen and (max-width: 820px) {
+  .carousel-body {
+    flex-direction: column;
+    height: auto;
+  }
+  .carousel,
+  .carousel-info {
+    flex-basis: 100%;
+  }
+  .carousel-info h1 {
+    font-size: 2.3rem;
+  }
+  .carousel-info p {
+    font-size: 1rem;
+  }
+}
+
+@media only screen and (max-width: 530px) {
+  .swiper-custom-nav {
+    display: none;
+  }
+  .carousel-info {
+    margin-bottom: 40px;
+  }
+}
+
+/* -------- CARD Ends Here ------------- */