Skip to content

Commit

Permalink
artikel done. kurang kontak, faq
Browse files Browse the repository at this point in the history
  • Loading branch information
@roningrum
roningrum committed Aug 22, 2023
1 parent cc3eb26 commit e19702c
Show file tree
Hide file tree
Showing 7 changed files with 180 additions and 25 deletions.
113 changes: 113 additions & 0 deletions assets/css/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1096,6 +1096,109 @@ section {
color:white;
}

.articles .card{
/* width: 100%; */
display: flex;
/* width: 290px; */
padding: 20px;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 15px;
}

.articles .card .card-body{
flex: 1 0 0;
gap: 15px;
}

.articles .card h3{
color: #151C43;
font-family: Outfit;
font-size: 18px;
font-style: normal;
font-weight: 600;
line-height: 30px;
text-align:start;
}

.articles .card h5{
padding: 0;
font-size: 20px;
font-family: var(--font-secondary);
letter-spacing: 1px;
color: #EA5455;
font-weight: 700;
text-align:start;
word-wrap: break-word;
}

.swiper {
/* right: 1rem; */
width: 100%;
height: 100%;
padding: 40px;

}

.swiper-slide{
margin:0 40px;
overflow:hidden;
display: flex;
justify-content: center;
align-items: center;
}

.swiper-pagination-bullet{
width: 17px;
height: 13px;
flex-shrink: 0;
border-radius: 30px;
background: #A4C4FA;
}

.swiper-pagination-bullet-active {
width: 55px;
height: 13px;
flex-shrink: 0;
border-radius: 30px;
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%;
}
} */



/*--------------------------------------------------------------
# Call To Action Section
Expand Down Expand Up @@ -1303,6 +1406,16 @@ section {
}
}

.kontak{
background: #1D64EE;
height: 60vh;
}

.kontak .decor{
top:0;

}

/*--------------------------------------------------------------
# Frequently Asked Questions Section
--------------------------------------------------------------*/
Expand Down
Binary file added assets/img/icon/stone.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/img/kognisi.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/img/makanan.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/img/musim-hujan.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
27 changes: 27 additions & 0 deletions assets/js/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -134,6 +134,33 @@ document.addEventListener('DOMContentLoaded', () => {
}
});

new Swiper('.articles-swiper', {
slidesPerView : 4,
spaceBetweent : 30,
loop: true,
grabCursor: 'true',
pagination: {
el: ".swiper-pagination",
clickable: true,
// dynamicBullets: true,
},
// breakpoints:{
// 0: {
// slidesPerView: 1,
// },
// 520: {
// slidesPerView: 2,
// },
// 950: {
// slidesPerView: 3,
// },
// },
// // navigation: {
// nextEl: '.swiper-button-next',
// prevEl: '.swiper-button-prev',
// }
});

/**
* Animation on scroll function and init
*/
Expand Down
65 changes: 40 additions & 25 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -402,47 +402,62 @@ <h5 class="header-section">Artikel Terbaru</h5>
<div class="d-flex align-items-top justify-content-center">
<h3>Informasi Seputar Kesehatan Anak</h3>
</div>
<div class="article-slider swiper-wrapper">
<div class="article-slider">
<div class="row g-4">
<div class="col-lg-3 col-md-6">
<div class="card-articles card">
<h5> Hello</h5>
<p>Hellow</p>

<div class="swiper articles-swiper">
<div class="swiper-wrapper">

<div class="swiper-slide slide1">
<div class="card">
<img src="assets/img/kid.png" width="100%" class="card-img" alt="">
<div class="card-body">
<h5>Kesehatan Imunisasi</h5>
<h3>Pentingnya Imunisasi pada Anak</h3>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="card-articles card">
<h5> Hello</h5>
<p>Hellow</p>
</div>
<div class="swiper-slide slide2">
<div class="card">
<img src="assets/img/musim-hujan.png" width="100%" class="card-img" alt="">
<div class="card-body">
<h5>Kesehatan Imunisasi</h5>
<h3>Tips Menjaga Kesehatan Anak di Musim Hujan</h3>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="card-articles card">
<h5> Hello</h5>
<p>Hellow</p>
</div>
<div class="swiper-slide slide3">
<div class="card">
<img src="assets/img/makanan.png" width="100%" class="card-img" alt="">
<div class="card-body">
<h5>Kesehatan Imunisasi</h5>
<h3>5 Makanan Untuk Tumbuh Kembang Anak</h3>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="card-articles card">
<h5> Hello</h5>
<p>Hellow</p>
</div>
<div class="swiper-slide slide4">
<div class="card">
<img src="assets/img/kognisi.png" width="100%" class="card-img" alt="">
<div class="card-body">
<h5>Kesehatan Imunisasi</h5>
<h3>Peran Orang Tua Dalam Kognisi Anak</h3>
</div>
</div>
</div>
</div>
<div class="swiper-pagination"></div>
</div>



<button type="submit" class="btn btn-outline"><span>Lihat Artikel Lainya</span></button>

</div>
<button type="submit" class="btn btn-outline mt-4"><span>Lihat Artikel Lainya</span></button>
</div>
</div>
</div>
</section>


<section class="kontak">
<div class="decor">
<img src="assets/img/icon/stone.png"style="position:relative;">
</div>
</section>


<!-- ======= Frequently Asked Questions Section ======= -->
<section id="faq" class="faq">
Expand Down

0 comments on commit e19702c

Please sign in to comment.