Membuat Bagian Testimonial Yang Nice and Clean Untuk Situs Web

Membuat Bagian Testimonial Yang Nice and Clean Untuk Situs Web – Pada tutorial kali ini kita akan membuat bagian testimonial yang nice and clean untuk situs web yang kamu miliki. Tutorial ini membutuhkan dua buah file yaitu HTML dan CSS. Implementasi untuk membuat bagian testimonial yang nice and clean untuk situs web dapat dilihat sebagai berikut.

HTML

 

<html>
<head>
  <title>Testimoni 1</title>
</head>
<body>
  <div class="container">
    <div class="testimonial">
    
    <img class="testimonial_avatar" src="https://www.inpows.com/media/2020/01/boy.png"/>
    <div class="testimonial_user">
      <h3 class="user_name">
      User 1
      </h3>
      <h4 class="user_website">
      Inpows
      </h4>
    </div>
    <p class="testimonial_text">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sollicitudin est urna, nec pharetra sem rhoncus a. Donec enim urna, malesuada et diam eget, varius mattis turpis. Quisque pellentesque in velit eget malesuada. Morbi blandit mi in dolor varius tincidunt. Mauris pulvinar magna nunc, quis ornare orci tincidunt id. Donec sed laoreet ligula, eu aliquet tortor.
    </p>
    </div>
  </div>
</body>
</html>

 

CSS

 

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  width: 95%;
  margin: 0 auto;
}

.testimonial {
  position: relative;
  background-color: #FAFAFA;
  color: #424242;
  border-radius: 4px;
  padding: 2rem 2rem 3rem 2rem;
  margin: 0 1.5 rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}

.testimonial_avatar {
  border-radius: 50%;
  max-width: 4rem;
  position: absolute;
  top: -1.5rem;
  left: 0;
  right: 0;
  margin: 0 auto;
  box-shadow: 0 3px 6px rgb(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

.testimonial_user {
  text-align: center;
  margin: 1.5rem 0 1rem 0;
}

.user_name {
  font-size: 1.15rem;
  margin-top: 0.5rem;
}

.user_website {
  color: #BDBDBD;
  margin-top: 0.4rem;
  font-size: 0.85rem;
  letter-spacing: 0.03rem;
}

.testimonial_text {
  text-align: center;
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.85rem;
}

 

Hasil yang dibuat dapat kamu lihat melalui jsfiddle berikut.

Avatar
Temukan kode-kode Java, Kotlin, Python dan bahasa pemrograman lainnya hanya di www.inpows.com. Kontak: editor@inpows.com
Back To Top