Bootstrap 4 dan Kartu Produk CCS3 dengan Transisi
April 07, 2022
Candil Kuya - Hallo Sobat Developers kembali lagi di blog saya, hari ini kita akan belajar web design mebuat Bootstrap 4 dan Kartu Produk CCS3 dengan Transisi sebuah tutorial pemrograman dasar hanya menggunakan CSS dan HTML yang bisa dijadikan refferensi pembelajaran untuk anda para pengunjung setia blog Candil Kuya, Silahkan di simak dan perhatikan baik-baik.
<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">
<br>
<h4>Bootstrap 4 and CCS3 Product Cards with Transition - Candil Kuya </h4>
<br>
<div class="row" id="ads">
<!-- Category Card -->
<div class="col-md-4">
<div class="card rounded">
<div class="card-image">
<span class="card-notify-badge">Low KMS</span>
<span class="card-notify-year">2018</span>
<img class="img-fluid" src="https://imageonthefly.autodatadirect.com/images/?USER=eDealer&PW=edealer872&IMG=USC80HOC011A021001.jpg&width=440&height=262" alt="Alternate Text" />
</div>
<div class="card-image-overlay m-auto">
<span class="card-detail-badge">Used</span>
<span class="card-detail-badge">$28,000.00</span>
<span class="card-detail-badge">13000 Kms</span>
</div>
<div class="card-body text-center">
<div class="ad-title m-auto">
<h5>Honda Accord LX</h5>
</div>
<a class="ad-btn" href="#">View</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card rounded">
<div class="card-image">
<span class="card-notify-badge">Fully-Loaded</span>
<span class="card-notify-year">2017</span>
<img class="img-fluid" src="https://imageonthefly.autodatadirect.com/images/?USER=eDealer&PW=edealer872&IMG=CAC80HOC021B121001.jpg&width=440&height=262" alt="Alternate Text" />
</div>
<div class="card-image-overlay m-auto">
<span class="card-detail-badge">Used</span>
<span class="card-detail-badge">$28,000.00</span>
<span class="card-detail-badge">13000 Kms</span>
</div>
<div class="card-body text-center">
<div class="ad-title m-auto">
<h5>Honda CIVIC HATCHBACK LS</h5>
</div>
<a class="ad-btn" href="#">View</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card rounded">
<div class="card-image">
<span class="card-notify-badge">Price Reduced</span>
<span class="card-notify-year">2018</span>
<img class="img-fluid" src="https://imageonthefly.autodatadirect.com/images/?USER=eDealer&PW=edealer872&IMG=USC80HOC091A021001.jpg&width=440&height=262" alt="Alternate Text" />
</div>
<div class="card-image-overlay m-auto">
<span class="card-detail-badge">Used</span>
<span class="card-detail-badge">$22,000.00</span>
<span class="card-detail-badge">8000 Kms</span>
</div>
<div class="card-body text-center">
<div class="ad-title m-auto">
<h5>Honda Accord Hybrid LT</h5>
</div>
<a class="ad-btn" href="#">View</a>
</div>
</div>
</div>
</div>
</div>
@import url('https://fonts.googleapis.com/css?family=Open+Sans');
@import url('https://fonts.googleapis.com/css?family=Montserrat');
body {
font-family: 'Montserrat', sans-serif;
}
/* Category Ads */
#ads {
margin: 30px 0 30px 0;
}
#ads .card-notify-badge {
position: absolute;
left: -10px;
top: -20px;
background: #f2d900;
text-align: center;
border-radius: 30px 30px 30px 30px;
color: #000;
padding: 5px 10px;
font-size: 14px;
}
#ads .card-notify-year {
position: absolute;
right: -10px;
top: -20px;
background: #ff4444;
border-radius: 50%;
text-align: center;
color: #fff;
font-size: 14px;
width: 50px;
height: 50px;
padding: 15px 0 0 0;
}
#ads .card-detail-badge {
background: #f2d900;
text-align: center;
border-radius: 30px 30px 30px 30px;
color: #000;
padding: 5px 10px;
font-size: 14px;
}
#ads .card:hover {
background: #fff;
box-shadow: 12px 15px 20px 0px rgba(46,61,73,0.15);
border-radius: 4px;
transition: all 0.3s ease;
}
#ads .card-image-overlay {
font-size: 20px;
}
#ads .card-image-overlay span {
display: inline-block;
}
#ads .ad-btn {
text-transform: uppercase;
width: 150px;
height: 40px;
border-radius: 80px;
font-size: 16px;
line-height: 35px;
text-align: center;
border: 3px solid #e6de08;
display: block;
text-decoration: none;
margin: 20px auto 1px auto;
color: #000;
overflow: hidden;
position: relative;
background-color: #e6de08;
}
#ads .ad-btn:hover {
background-color: #e6de08;
color: #1e1717;
border: 2px solid #e6de08;
background: transparent;
transition: all 0.3s ease;
box-shadow: 12px 15px 20px 0px rgba(46,61,73,0.15);
}
#ads .ad-title h5 {
text-transform: uppercase;
font-size: 18px;
}
***
Semoga saja code Bootstrap 4 dan Kartu Produk CCS3 dengan Transisi bisa dijadikan refferensi pembelajaran untuk anda yang masih awam terjun ke dalam dunia web programming, Semoga Bermanfaat and Hapy Ngoding.
Gunakan Live editor online untuk mencoba code diatas.
