kurang footer

roningrum · Aug 25, 2023 · ca2f06b · ca2f06b
1 parent e19702c
commit ca2f06b
Show file tree

Hide file tree

Showing 3 changed files with 175 additions and 110 deletions.
diff --git a/assets/css/main.css b/assets/css/main.css
@@ -1045,6 +1045,10 @@ section {
   text-transform: uppercase;
 }
 
+.article{
+  padding: 0 40px;
+}
+
 .articles .rumah-pelita-article{
   align-items: center;
   padding-bottom: 5rem;
@@ -1097,14 +1101,15 @@ section {
 }
 
 .articles .card{
-  /* width: 100%; */
+  /* width: 100%;
+  height: 100%; */
   display: flex;
   /* width: 290px; */
   padding: 20px;
   flex-direction: column;
   justify-content: center;
   align-items: flex-start;
-  gap: 15px;
+  /* gap: 15px; */
 }
 
 .articles .card .card-body{
@@ -1137,15 +1142,14 @@ section {
     /* right: 1rem; */
     width: 100%;
     height: 100%;
-    padding: 40px;
-
+    padding: 40px ;
  }
 
  .swiper-slide{
-  margin:0 40px;
+  margin: 0 30px;
   overflow:hidden;
   display: flex;
-  justify-content: center;
+  justify-content: start;
   align-items: center;
  }
 
@@ -1165,40 +1169,15 @@ section {
   background-color: var(--color-primary);
 }
 
- /* .slide1{
-    background: #96AED0;
- }
-
- .slide2{
-    background:#FD6D72;
- }
- .slide3{
-    background:#79B465;
- }
- .slide4{
-    background: #F6D155;
- }
- .slide5{
-    background: #BD86D2;
- } */
-
-/* .articles .testimonial-item p {
-  font-style: italic;
-  margin: 0 auto 15px auto;
-} */
-
-/* .articles .swiper-pagination {
-  margin-top: 20px;
-  position: relative;
-} */
-
-/* @media (min-width: 992px) {
-  .articles .testimonial-item p {
-    width: 80%;
+@media only screen and (min-device-width:320px) and (max-device-width: 768px){
+  .articles .card{
+    width: 100%;
+    /* height: 100%; */
   }
-} */
-
-
+  .swiper-slide{
+    padding: 0;
+  }
+}
 
 /*--------------------------------------------------------------
 # Call To Action Section
@@ -1407,20 +1386,131 @@ section {
 }
 
 .kontak{
-  background: #1D64EE;
+  padding: 8px 0 0 0;
+  min-height: 60vh;
+}
+
+.kontak-bg{
+  padding: 80px 0;
   height: 60vh;
 }
 
+.kontak .wrapper{
+  display: flex;
+  flex-wrap: wrap;
+  inline-size: fit-content;
+  margin-block: 1em;
+  margin-inline: auto;
+  gap: 50px;
+  justify-content: center;
+}
+
 .kontak .decor{
-  top:0;
-
+  width: 100%;
+  position: relative;
+  left: -33px;
+  top: -18px;
+  bottom: -18px;
+}
+/* .kontak-content{
+  padding: 30px;
+} */
+
+.kontak h5,h2, a{
+  color: #fff;
+}
+
+.kontak h5{
+  font-family: var(--font-primary);
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;
+  letter-spacing: 1px;
+  text-transform: uppercase;
+}
+
+.kontak h2{
+  font-family: var(--font-secondary);
+  font-size: 40px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;
+  letter-spacing: 0.4px;
+}
+
+.kontak .call-center{
+  text-align:center;
+  margin: auto;
+}
+
+.kontak a{
+  font-family: Urbanist;
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;
+}
+
+.kontak a:hover{
+  color:#FDAC41;
+}
+
+.kontak a i{
+  margin-right: 1rem;
+}
+
+
+.kontak .btn-outline {
+  width: 225px;
+  border-color: var(--color-primary);
+  padding: 16px 30px;
+  font-size:20px;
+  background: #fff;
+  color : var(--color-primary);
+  font-family: var(--font-primary);
+  font-weight: 700;
+  border-radius: 100px;
+}
+
+.kontak .btn-outline:hover {
+  background-color: var(--color-primary);
+  border-color: var(--color-primary);
+  color:white;
 }
 
 /*--------------------------------------------------------------
 # Frequently Asked Questions Section
 --------------------------------------------------------------*/
 .faq {
-  padding-top: 80px;
+  background: #fff;
+}
+
+.faq .header-title {
+  align-items: center;
+  padding-right: 64px;
+  padding-left:64px;
+  padding-bottom: 5rem;
+  text-align: center;
+}
+
+.faq .header-title h5 {
+  font-size: 20px;
+  letter-spacing: 1px;
+  text-transform: uppercase;
+  color: #EA5455;
+  font-weight: 700;
+  word-wrap: break-word;
+}
+
+.faq .header-title h3 {
+  padding: 0;
+  font-size: 40px;
+  line-height: 50px;
+  color: #151C43;
+  font-family: var(--font-secondary);
+  font-weight: 600;
+  word-wrap: break-word;
 }
 
 .faq .accordion-item {
@@ -1453,26 +1543,18 @@ section {
   box-shadow: none;
 }
 
-.faq .question-icon {
-  position: absolute;
-  top: 14px;
-  left: 25px;
-  font-size: 20px;
-  color: var(--color-primary);
-}
-
 .faq .accordion-button:after {
   position: absolute;
   right: 15px;
   top: 15px;
 }
 
-.faq .accordion-body {
+/* .faq .accordion-body {
   padding: 0 30px 25px 60px;
   border: 0;
   background: rgba(14, 29, 52, 0.03);
   border-radius: 5px;
-}
+} */
 
 /*--------------------------------------------------------------
 # Testimonials Section

diff --git a/assets/js/main.js b/assets/js/main.js
@@ -136,29 +136,18 @@ document.addEventListener('DOMContentLoaded', () => {
 
   new Swiper('.articles-swiper', {
     slidesPerView : 4,
-    spaceBetweent : 30,
     loop: true,
-    grabCursor: 'true',
+    // slidesPerView: 'auto',
+    autoplay: {
+      delay: 5000,
+      disableOnInteraction: false
+    },
     pagination: {
       el: ".swiper-pagination",
       clickable: true,
-      // dynamicBullets: true,
+      dynamicBullets: true,
     },
-  //   breakpoints:{
-  //     0: {
-  //         slidesPerView: 1,
-  //     },
-  //     520: {
-  //         slidesPerView: 2,
-  //     },
-  //     950: {
-  //         slidesPerView: 3,
-  //     },
-  // },
-  //   // navigation: {
-    //   nextEl: '.swiper-button-next',
-    //   prevEl: '.swiper-button-prev',
-    // }
+
   });
 
   /**