How to Book and gallery section of homepage

uzaaaiiir · Jun 4, 2023 · 4a46014 · 4a46014
1 parent a54fcc2
commit 4a46014
Show file tree

Hide file tree

Showing 9 changed files with 307 additions and 97 deletions.
diff --git a/assets/haircuts-carousel/man-img-1.jpg b/assets/haircuts-carousel/man-img-1.jpg
diff --git a/assets/haircuts-carousel/man-img-2.jpg b/assets/haircuts-carousel/man-img-2.jpg
diff --git a/assets/haircuts-carousel/man-img-3.jpg b/assets/haircuts-carousel/man-img-3.jpg
diff --git a/assets/haircuts-carousel/man-img-4.jpg b/assets/haircuts-carousel/man-img-4.jpg
diff --git a/assets/haircuts-carousel/man-img-5.jpg b/assets/haircuts-carousel/man-img-5.jpg
diff --git a/assets/haircuts-carousel/man-img-6.jpg b/assets/haircuts-carousel/man-img-6.jpg
diff --git a/css/style.css b/css/style.css
@@ -80,6 +80,10 @@ box-shadow: 0 2.4rem 4.8rem rgba(0, 0, 0, 0.075);
 
 */
 
+body {
+    padding-top: 8rem;
+}
+
 .navbar {
     font-family: "Raleway", sans-serif;
     font-weight: 600;
@@ -144,12 +148,88 @@ box-shadow: 0 2.4rem 4.8rem rgba(0, 0, 0, 0.075);
 }
 
 .heading-secondary {
+    font-family: "Playfair Display SC", serif;
+    font-weight: 600;
+    font-size: 2.8rem;
 }
 
 .heading-tertiary {
     font-family: "Raleway", sans-serif;
     font-size: 1.3rem;
 }
 
+.btn-style {
+    font-family: "Raleway", sans-serif;
+    font-family: 1rem;
+}
+
 .subheading {
 }
+
+/*********************************/
+/* -------- HERO SECTION --------*/
+/*********************************/
+
+.hero-img,
+.grayscale-img {
+    filter: brightness(60%);
+    filter: grayscale(80%);
+}
+
+/**********************************/
+/* -------- MEDIA QUERIES --------*/
+/**********************************/
+
+@media (max-width: 87em) {
+    .heading-primary {
+        font-size: 3rem;
+    }
+
+    .heading-secondary {
+        font-size: 2.5rem;
+    }
+}
+
+@media (max-width: 50em) {
+    .heading-primary {
+        font-size: 2.8rem;
+    }
+
+    .heading-secondary {
+        font-size: 2rem;
+    }
+}
+
+/* CAROUSEL */
+@media (max-width: 767px) {
+    .carousel-inner .carousel-item > div {
+        display: none;
+    }
+    .carousel-inner .carousel-item > div:first-child {
+        display: block;
+    }
+}
+
+.carousel-inner .carousel-item.active,
+.carousel-inner .carousel-item-next,
+.carousel-inner .carousel-item-prev {
+    display: flex;
+}
+
+/* medium and up screens */
+@media (min-width: 768px) {
+    .carousel-inner .carousel-item-end.active,
+    .carousel-inner .carousel-item-next {
+        transform: translateX(25%);
+    }
+
+    .carousel-inner .carousel-item-start.active,
+    .carousel-inner .carousel-item-prev {
+        transform: translateX(-25%);
+    }
+}
+
+.carousel-inner .carousel-item-end,
+.carousel-inner .carousel-item-start {
+    transform: translateX(0);
+}