footer done

roningrum · Aug 28, 2023 · 3968fa9 · 3968fa9
1 parent 395ebb8
commit 3968fa9
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 19 deletions.
diff --git a/assets/css/main.css b/assets/css/main.css
@@ -51,6 +51,7 @@ body {
   font-family: var(--font-default);
   color: var(--color-default);
   margin: 0;
+  height:100%;
   /* background-color:#FDF3F0 ; */
   background-image: url("../img/background.png");
   background-size: contain;
@@ -457,6 +458,7 @@ section {
   }
 }
 
+
 @media (min-width: 1280px) and (max-width: 1366px) {
   .navbar .dropdown .dropdown ul {
     left: -90%;
@@ -604,6 +606,10 @@ section {
 /*--------------------------------------------------------------
 # Featured Services Section
 --------------------------------------------------------------*/
+
+.featured-services .container-fluid{
+  background:white;
+}
 .featured-services .rumah-pelita-article{
   align-items: center;
   padding-bottom: 5rem;
@@ -1063,8 +1069,9 @@ section {
   text-transform: uppercase;
 }
 
-.article{
-  padding: 0 40px;
+.articles{
+  padding: 40px;
+  background-color: #FDF3F0;
 }
 
 .articles .rumah-pelita-article{
@@ -1195,6 +1202,10 @@ section {
   .swiper-slide{
     padding: 0;
   }
+
+  .hero .container{
+    height: 100vh;
+  }
 }
 
 @media only screen and (min-device-width:1280px){
@@ -2258,9 +2269,10 @@ section {
 }
 
 .hero .container{
-  height: 70vh;
+  /* height: 70vh; */
   width: 100% !important;
-  /* height: auto !important; */
+  /* min-height: 90%; */
+  height: 100vh;
   position: relative;
 }
 
@@ -2313,8 +2325,33 @@ section {
     width: 100px;
     height: 0px;
   }
+
+}
+
+@media only screen and (min-device-width: 1280px){
+  .hero .container{
+    width: 100% !important;
+    height: 65vh;
+    position: relative;
+  }
+}
+
+@media only screen and (min-device-width: 1400px){
+  .hero .container{
+    width: 100% !important;
+    height: 50vh;
+    position: relative;
+  }
+
+  body{
+    /* background-image: url("../img/background.png"); */
+    background-size: contain;
+    background-repeat: round;
+    /* background-repeat: no-repeat; */
+  }
 }
 
+
 .hero p {
   font-size:1.35em;
   margin-bottom: 40px;
@@ -2406,6 +2443,23 @@ section {
   background-color: var(--color-secondary);
   color: white;
 }
+
+.footer-content{
+  background-image:url("../img/icon/footer-area.png");
+  background-repeat:no-repeat;
+  background-position-x: right;
+}
+
+.footer-content{
+  padding: 5rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  align-content: flex-start;
+  row-gap: 55px;
+  flex-wrap: wrap;
+}
+
 .footer .footer-info{
   margin-bottom: 25px;
 }

diff --git a/assets/img/background.png b/assets/img/background.png
diff --git a/assets/img/icon/footer-area.png b/assets/img/icon/footer-area.png
diff --git a/index.html b/index.html
@@ -129,7 +129,7 @@ <h2 data-aos="fade-up">Anak Sehat, Indonesia Maju Bersama</h2>
     <!-- ======= Featured Services Section ======= -->
     <section id="featured-services" class="featured-services">
       <img class="cloud-image" src="assets/img/cloud-vector.svg" width="100%" alt="">
-      <div class="container-fluid" style="background-color: white;">
+      <div class="container-fluid">
         <div class="rumah-pelita-article">
           <div class="spark-image">
             <img src="assets/img/spark-article.svg" widt alt="">
@@ -272,8 +272,6 @@ <h4>Rumah Pelita Kota Semarang: Inovasi Kolaboratif untuk Meningkatkan Kualitas
           </div>
 
         </div>
-
-
       </div>
     </section><!-- End Featured Services Section -->
 
@@ -607,9 +605,8 @@ <h3 class="accordion-header">
 
   <!-- ======= Footer ======= -->
   <footer id="footer" class="footer">
-    <div class="container">
-      <section>
-        <div class="row">
+    <div class="container-fluid footer-content">
+       <div class="row g-4">
           <div class="col-lg-4 col-md-6 footer-info">
             <a href="index.html" class="logo d-flex align-items-center">
               <span> Sayang Anak </span>
@@ -635,20 +632,20 @@ <h4>Eksplor</h4>
           </div>
 
           <div class="col-lg-2 col-md-6 footer-links">
-            <h4>Eksplor</h4>
+            <h4>Tentang Kami</h4>
             <ul>
-              <li><a href="#"><img src="assets/img/icon/arrowright2.svg" /> Berita</a></li>
-              <li><a href="#"><img src="assets/img/icon/arrowright2.svg" /> Kontak</a></li>
-              <li><a href="#"><img src="assets/img/icon/arrowright2.svg" /> FAQ</a></li>
+              <li><a href="#"><img src="assets/img/icon/arrowright2.svg" />Profil</a></li>
+              <li><a href="#"><img src="assets/img/icon/arrowright2.svg" />Visi dan Misi</a></li>
+              <li><a href="#"><img src="assets/img/icon/arrowright2.svg" />Tim Kami</a></li>
             </ul>
           </div>
 
           <div class="col-lg-2 col-md-6 footer-links">
-            <h4>Eksplor</h4>
+            <h4>Informasi Kesehatan</h4>
             <ul>
-              <li><a href="#"><img src="assets/img/icon/arrowright2.svg" /> Berita</a></li>
-              <li><a href="#"><img src="assets/img/icon/arrowright2.svg" /> Kontak</a></li>
-              <li><a href="#"><img src="assets/img/icon/arrowright2.svg" /> FAQ</a></li>
+              <li><a href="#"><img src="assets/img/icon/arrowright2.svg" /> Nutrisi Anak</a></li>
+              <li><a href="#"><img src="assets/img/icon/arrowright2.svg" /> Perawat Kesehatan</a></li>
+              <li><a href="#"><img src="assets/img/icon/arrowright2.svg" /> Imunisasi</a></li>
             </ul>
           </div>
 
@@ -663,7 +660,6 @@ <h4>Hubungi Kami</h4>
             </ul>
           </div>
         </div>
-      </section>
 
     </div>
     <div class="copyright-footer" style="bottom: 0;">