<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container my-5"> <!-- ganti ke container-fluid biar lebar -->
<div class="text-center">
<h1 class="mt-5">Bootstrap 4 Horizontal Scrolling Card</h1>
<p class="subJudul mb-5">Kagebunshin no Javascript</p>
</div>
<div class="scrolling-wrapper row flex-row flex-nowrap mt-4 pb-4 pt-2">
<div class="col-5">
<div class="card kotakCard cardWarna1"></div>
</div>
<div class="col-4">
<div class="card kotakCard cardWarna2"></div>
</div>
<div class="col-5">
<div class="card kotakCard cardWarna3"></div>
</div>
<div class="col-4">
<div class="card kotakCard cardWarna4"></div>
</div>
</div>
</div>
.scrolling-wrapper {
overflow-x: auto; /*scroll bar horizontal*/
}
body {
background-color: #101419;
color: #fff;
font-family: 'system-ui';
}
h1 {
font-weight: 800;
font-size: 3em;
}
.subJudul {
font-size: 1.5em;
opacity: 0.65;
}
.kotakCard {
height: 250px;
background-color: #fff;
border: none;
background-position: center;
background-size: cover;
transition: all 0.2s ease-in-out;
border-radius: 24px;
}
.kotakCard:hover {
transform: translateY(-5px);
box-shadow: none;
cursor: pointer;
}
.cardWarna1 {
background: rgb(131,58,180);
background: linear-gradient(90deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%);
}
.cardWarna2 {
background: rgb(58,87,180);
background: linear-gradient(90deg, rgba(58,87,180,1) 0%, rgba(86,253,29,1) 50%, rgba(248,252,69,1) 100%);
}
.cardWarna3 {
background: rgb(34,193,195);
background: linear-gradient(95deg, rgba(34,193,195,1) 0%, rgba(214,161,48,1) 100%);
}
.cardWarna4 {
background: rgb(180,58,79);
background: linear-gradient(90deg, rgba(180,58,79,1) 0%, rgba(29,207,253,1) 50%, rgba(247,69,252,1) 100%);
}
