Showcase Template - CSS Grid

by. tetangga-sebelah.com

HTML

<div class="grid">
  <div class="item">
    <h3>Nama Template</h3>
    <small>by. OTWNikah.com</small>
    <div style="background-image:url(https://nmoinvaz.gitlab.io/webshot/images/microsoft.com.jpg);">
    </div>
    <p>Exclusive Rate Design</p>
    <b>IDR. 175.000,-</b>
    <a class="lihat" href="https://www.tetangga-sebelah.com" target="_blank">Lihat</a><a class="gunakan">Gunakan</a>
  </div>
  <div class="item">
    <h3>Nama Template</h3>
    <small>by. OTWNikah.com</small>
    <div style="background-image:url(https://page2images.files.wordpress.com/2013/12/website-screenshot-api.png);">
    </div>
    <p>Exclusive Rate Design</p>
    <b>IDR. 175.000,-</b>
    <a class="lihat" href="https://www.tetangga-sebelah.com" target="_blank">Lihat</a><a class="gunakan">Gunakan</a>
  </div>
  <div class="item">
    <h3>Nama Template</h3>
    <small>by. OTWNikah.com</small>
    <div style="background-image:url(https://nmoinvaz.gitlab.io/webshot/images/microsoft.com.jpg);">
    </div>
    <p>Exclusive Rate Design</p>
    <b>IDR. 175.000,-</b>
    <a class="lihat" href="https://www.tetangga-sebelah.com" target="_blank">Lihat</a><a class="gunakan">Gunakan</a>
  </div>
  <div class="item">
    <h3>Nama Template</h3>
    <small>by. OTWNikah.com</small>
    <div style="background-image:url(https://page2images.files.wordpress.com/2013/12/website-screenshot-api.png);">
    </div>
    <p>Exclusive Rate Design</p>
    <b>IDR. 175.000,-</b>
    <a class="lihat" href="https://www.tetangga-sebelah.com" target="_blank">Lihat</a><a class="gunakan">Gunakan</a>
  </div>
  <div class="item">
    <h3>Nama Template</h3>
    <small>by. OTWNikah.com</small>
    <div style="background-image:url(https://nmoinvaz.gitlab.io/webshot/images/microsoft.com.jpg);">
    </div>
    <p>Exclusive Rate Design</p>
    <b>IDR. 175.000,-</b>
    <a class="lihat" href="https://www.tetangga-sebelah.com" target="_blank">Lihat</a><a class="gunakan">Gunakan</a>
  </div>
  <div class="item">
    <h3>Nama...

CSS

* {
  margin:0px;
  padding:0px;
  outline:none;
  text-decoration:none;
  font-family:helvetica,sans-serif;
}
body {
  font-size:16px;
  background:#eee;
}
.grid {
  width:960px;
  max-width:calc(100% - 40px);
  margin:auto;
  display: grid;
  grid-template-columns: auto auto auto;
  grid-gap: 20px;
  padding: 20px;
}
@media(max-width:768px) {
  .grid {
    grid-template-columns: auto auto;
  }
}
@media(max-width:480px) {
  .grid {
    grid-template-columns: auto;
  }
}
.grid .item {
  background:#fff;
  text-align: center;
}
.grid .item h3 {
  display:block;
  margin:30px 0 5px;
}
.grid .item small {
  opacity:.5;
}
.grid .item div {
  box-shadow:inset 0 4px 0 rgba(0,0,0,.1), inset 0 -4px 0 rgba(0,0,0,.1);
  display:block;
  margin:20px 0;
  min-height:200px;
  background-size:cover;
  background-position:top center;
  transition: all 2s;
}
.grid .item:hover div {
  background-position:bottom center;
}
.grid .item b {
  display:block;
  margin:10px 0;
}
.grid .item a {
  color:#464646;
  cursor:pointer;
  display:inline-block;
  border:none;
  padding:none;
  width:50%;
  padding:10px 0;
  box-shadow:inset 0 1px 0 0 rgba(0,0,0,.1);
}
.grid .item a:last-of-type {
  background:#3897f0;
  color:#fff;
}
.grid .item a:hover {
  box-shadow:inset 0 1px 0 0 rgba(0,0,0,.1), inset 0 -3px 0 0 rgba(0,0,0,.1)
}
.grid .item a:active {
  box-shadow:inset 0 1px 0 0 rgba(0,0,0,.1);
}

JavaScript

$(document).ready(function(){
  $(".gunakan").click(function(){
    alert("Berhasil digunakan!");
  });
});