finished about page section

Author: Alisher778

assets/images/about/interview1.webp

@@ -0,0 +1,15 @@
+function setActiveButton(e) {
+  console.log(e, e.getAttribute('data-target'))
+  // Remove active class from selected button groups
+  document.querySelectorAll('.btn-group button').forEach(item => {
+    item.classList.remove('active');
+  });
+
+  // Remove active class from selected inner-tabs
+  document.querySelectorAll('.inner-tab').forEach(item => {
+    item.classList.remove('active');
+  });
+
+  e.classList.add('active');
+  document.querySelector(e.getAttribute('data-target')).classList.add('active');
+}

assets/images/about/interview2.webp

@@ -29,4 +29,88 @@
             }
         }
     }
+    .services-item__icon {
+        font-size: 45px;
+        ;
+    }
+    .services-title {
+        font-size: 20px;
+        &:hover {
+            color: $orange;
+            font-size: 20px;
+        }
+    }
+    .interview__item {
+        display: flex;
+        align-items: flex-start;
+        justify-content: flex-start;
+    }
+    .interview__item-img {
+        width: 170px;
+        height: 170px;
+        object-fit: cover;
+        border-radius: 14px;
+    }
+    .interview__item-content {
+        padding: 0 15px;
+        h3 {
+            margin-top: 0;
+            font-size: 20px;
+            &:hover {
+                color: $orange;
+            }
+        }
+        a {
+            position: relative;
+            color: $orange;
+            text-decoration: none;
+            i {
+                position: absolute;
+                z-index: -1;
+                right: 0;
+                top: 5px;
+                transition: 0.4s;
+            }
+            &:hover i {
+                z-index: 1;
+                right: -25px;
+                transition: 0.4s;
+            }
+        }
+    }
+    .exibition__item {
+        position: relative;
+        transition: 0.5s;
+        .exibition__item-wrapper {
+            height: 250px;
+            overflow: hidden;
+            border-radius: 10px;
+        }
+        img {
+            width: 100%;
+            height: 250px;
+            object-fit: cover;
+            border-radius: 10px;
+            transition: 0.5s;
+        }
+        h3 {
+            opacity: 0;
+            position: absolute;
+            bottom: -3px;
+            left: 15px;
+            right: 15px;
+            padding: 45px 15px 30px;
+            border-bottom-left-radius: 10px;
+            border-bottom-right-radius: 10px;
+            background: linear-gradient(180deg, rgb(140 140 140 / 7%) 14%, rgb(0 0 0 / 77%));
+        }
+        &:hover h3 {
+            opacity: 1;
+            transition: 0.5s;
+        }
+        &:hover img {
+            transform: scale(1.1);
+            transition: 0.5s;
+        }
+    }
 }