Slider Kata
<!DOCTYPE html>
<html>
<head>
<title>Belajar Koding Informatika MAN Kapuas</title>
<styl>
body {
margin: 0;
padding: 0;
font-family: 'Lato', sans-serif;
}
:root {
--dark-green: #9cc675;
--dark-yellow: #e89a3d;
--extra-light-brown:#fdf0d7;
--light-brown: #ecd5ab;
--dark-brown:#915b40;
--light-yellow:#f8e3a8;
--light-red:#f3ac99;
--light-teal:#a6c8cc;
--light-gray:#ddd5d6;
--theme-color2: #e89a3d;
}
.site-logo {
width: 218.33px !important;
margin-right: 50px;
}
.btn {
border-radius: 5px;
font-weight: normal;
font-size: 15px;
letter-spacing: 0.02em;
line-height: 12px;
text-align: center;
font-weight: 600;
font-size: 14px;
padding: 14px 30px;
cursor: pointer;
}
.btn-theme {
background: var(--theme-color1);
color: #212121;
}
.c-container {
margin: auto;
width: 93%;
position: relative;
z-index: 1;
}
.btn-outline-white {
color: #fff;
background-color: rgba(255, 255, 255, 0.1);
background-image: none;
border-width: 2px;
border-color: #fff;
font-weight: 500;
-webkit-transition: all .2s;
transition: all .2s;
}
.btn {
border-radius: 5px;
font-weight: normal;
font-size: 15px;
letter-spacing: 0.02em;
line-height: 12px;
text-align: center;
font-weight: 600;
font-size: 14px;
padding: 14px 30px;
cursor: pointer;
}
.btn-outline-white:hover {
background-color: #fff;
color: var(--text-dark);
}
/* common css up */
.testimonial p {
font-size: 28px;
letter-spacing: 0.02em;
line-height: 35px;
}
.testimonial .name {
font-weight: bold;
font-size: 18px;
letter-spacing: 0.04em;
line-height: 35px;
text-align: left;
}
.testimonial .designation {
font-size: 14px;
letter-spacing: 0.04em;
text-align: left;
color: #fff;
opacity: 0.65;
}
.unt {
margin-bottom: 20px;
margin-top: 60px;
}
.hero-text {
font-size: 30px;
letter-spacing: 0.02em;
color: #fff;
}
.gallery-thumbs {
height: 100%;
}
.gallery-thumbs .swiper-wrapper {
align-items: center;
}
.gallery-thumbs .swiper-slide {
background-position: center;
background-size: cover;
width: 250px !important;
height: 330px;
position: relative;
}
.gallery-thumbs .swiper-slide img {
filter: contrast(0.5) blur(1px);
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 10px;
}
.gallery-thumbs .swiper-slide-active img {
filter: contrast(1) blur(0px) !important;
}
.flex-row {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
}
.flex-row .flex-col {
-ms-flex-preferred-size: 0;
flex-basis: 0;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
max-width: 100%;
position: relative;
width: 100%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
.gallery-thumbs .swiper-wrapper {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.testimonial-section .quote {
width: 75%;
height: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
padding-left: 100px;
padding-right: 100px;
}
.swiper-container.testimonial {
height: 100vh;
}
.testimonial-section .user-saying {
background: var(--theme-color2);
width: 60%;
color: #fff;
height: 100%;
}
.testi-user-img {
width: 40%;
}
.testimonial-section {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
width: 100%;
height: 100%;
}
.testimonial-section .quote p {
font-size: 20px;
font-weight: 300;
line-height: 1.8;
font-style: italic;
margin: 0;
}
.quote-icon {
width: 38px;
display: block;
margin-bottom: 30px;
}</styl>
</head>
<body>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://md-aqil.github.io/images/swiper.min.css">
<title>Document</title>
<section class="spacer">
<div class="testimonial-section">
<div class="testi-user-img">
<div class="swiper-container gallery-thumbs">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img class="u3" src="https://images.pexels.com/photos/10041269/pexels-photo-10041269.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="">
</div>
<div class="swiper-slide">
<img class="u1" src="https://images.pexels.com/photos/8353832/pexels-photo-8353832.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="">
</div>
<div class="swiper-slide">
<img class="u2" src="https://images.pexels.com/photos/20752500/pexels-photo-20752500/free-photo-of-pria-laki-laki-lelaki-jam-tangan.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="">
</div>
<div class="swiper-slide">
<img class="u4" src="https://images.pexels.com/photos/17050138/pexels-photo-17050138/free-photo-of-pengusaha-pebisnis-mode-fashion.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="">
</div>
</div>
</div>
</div>
<div class="user-saying">
<div class="swiper-container testimonial">
<!-- Additional required wrapper -->
<div class="swiper-wrapper ">
<!-- Slides -->
<div class="swiper-slide">
<div class="quote">
<img class="quote-icon" src="https://md-aqil.github.io/images/quote.png" alt="">
<p>
“Jangan membenci mereka yang mengatakan hal buruk tuk menjatuhkanmu, karena merekalah yang buatmu semakin kuat setiap hari...“
</p>
<div class="name">-James Huge-</div>
<div class="designation">University Technology</div>
</div>
</div>
<div class="swiper-slide">
<div class="quote">
<img class="quote-icon" src="https://md-aqil.github.io/images/quote.png" alt="">
<p>
“Jangan pernah meremehkan diri sendiri. Jika kamu tak bahagia dengan hidupmu, perbaiki apa yang salah dan teruslah melangkah..“
</p>
<div class="name">-Erik Targey-</div>
<div class="designation">University Of Computer</div>
</div>
</div>
<div class="swiper-slide">
<div class="quote">
<img class="quote-icon" src="https://md-aqil.github.io/images/quote.png" alt="">
<p>
“Bukan bahagia yang menjadikan kita bersyukur, tetapi dengan bersyukurlah yang akan menjadikan hidup kita bahagia..“
</p>
<div class="name">-Andrea John-</div>
<div class="designation">University Creative</div>
</div>
</div>
<div class="swiper-slide">
<div class="quote">
<img class="quote-icon" src="https://md-aqil.github.io/images/quote.png" alt="">
<p>
“Rasa malas menghancurkan semua rencana besar yang sudah kita tata dengan baik..“
</p>
<div class="name">-William Jo-</div>
<div class="designation">University Nusantara</div>
</div>
</div>
</div>
<!-- If we need pagination -->
<div class="swiper-pagination swiper-pagination-white"></div>
</div>
</div>
</div>
</section>
<script src="https://md-aqil.github.io/images/swiper.min.js"></script>
<scrip>
var galleryThumbs = new Swiper('.gallery-thumbs', {
effect: 'coverflow',
grabCursor: true,
centeredSlides: true,
slidesPerView: '2',
// coverflowEffect: {
// rotate: 50,
// stretch: 0,
// depth: 100,
// modifier: 1,
// slideShadows : true,
// },
coverflowEffect: {
rotate: 0,
stretch: 0,
depth: 50,
modifier: 6,
slideShadows : false,
},
});
var galleryTop = new Swiper('.swiper-container.testimonial', {
speed: 400,
spaceBetween: 50,
autoplay: {
delay: 3000,
disableOnInteraction: false,
},
direction: 'vertical',
pagination: {
clickable: true,
el: '.swiper-pagination',
type: 'bullets',
},
thumbs: {
swiper: galleryThumbs
}
});
</scrip>
</body>
</html>
0 komentar: