Cara Membuat Halaman Testimonial Material Design

Exploit Tekloggers -Cara Membuat Halaman Testimonial Material Design| halo pada tutorial kali ini tekloggers akan membagikan sedikit tutorial mendesign sebuah web agar terlihat lebih fresh dengan material design.

Yap ,pada tutorial kali ini saya akan memberikan cara membuat halaman testimoni dengan bahasa pemrograman html ,CSS , & javascript.

Ok tanpa banyak basa-basi langsung saja kita mulai tutorial nya, pertama tama kita mulai membuat kerangka html nya

Salin kode berikut:

<section class="testimonial">
    <div class="container">
        <h1 class="testimonial__title">Client Testimonial</h1>
        <blockquote class="testimonial__quote">
            <p class="testimonial__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa fugit hic modi nisi blanditiis, possimus asperiores sint iusto dignissimos odio consequuntur, cumque nobis dicta rerum quisquam non placeat accusantium laborum!</p>
            <footer class="testimonial__meta">
                <img class="testimonial__img" src="https://s3.amazonaws.com/uifaces/faces/twitter/dannpetty/128.jpg" alt="Author" />
<!--                 <img class="testimonial__img" src="https://developmentseed.org/images/team/avatar-placeholder.png" alt="Author" /> -->
                <div>
                    <cite class="testimonial__author">Mike Smith</cite>
                    <br>
                    <span class="testimonial__position">Position</span>
                </div>
            </footer>
        </blockquote>
    </div>
</section>

Kemudian kita buat designya dengan cssnya

html,
body {
font: 16px Open sans, sans-serif;
}
a {
color: inherit;
text-decoration: none;
}
.testimonial {
padding: 5em 0;
background: #436BD7;
}
.testimonial__title {
margin: 0 0 0.9090909091em;
font-weight: normal;
font-size: 1.375rem;
color: rgba(255, 255, 255, 0.7);
}
.testimonial__quote {
display: flex;
align-items: center;
padding: 0;
border: none;
}
@media (max-width: 43.75em) {
.testimonial__quote {
flex-wrap: wrap;
}
}
.testimonial__quote footer::before {
content: "";
}
.testimonial__text {
display: flex;
align-items: center;
min-height: 9.0909090909em;
padding: 1.3636363636em 1.8181818182em;
font-size: 1.375rem;
line-height: 1.55;
color: #888;
background: white;
border-radius: 0 30px;
box-shadow: 0 10px 22px rgba(0, 0, 0, 0.2);
}
@media (min-width: 43.8125em) {
.testimonial__text {
max-width: 70%;
padding: 2.2727272727em 2.7272727273em;
padding-right: 4.0909090909em;
}
}
@media (max-width: 43.75em) {
.testimonial__text {
margin-bottom: 1.3636363636em;
}
}
@media (min-width: 43.8125em) {
.testimonial__text {
border-radius: 0 50px;
}
}
.testimonial__meta {
display: flex;
align-items: center;
}
.testimonial__img {
min-width: 5em;
width: 5em;
height: 5em;
margin-right: 1.25em;
font-size: 1rem;
border-radius: 50%;
background: white;
border: solid 2px white;
box-shadow: 0 10px 22px rgba(0, 0, 0, 0.2);
}
@media (min-width: 43.8125em) {
.testimonial__img {
min-width: 7.25em;
width: 7.25em;
height: 7.25em;
margin: 0 1.875em 0 -3.625em;
}
}
@media (min-width: 43.8125em) {
.testimonial__img {
border-width: 3px;
}
}
.testimonial__author {
font-size: 1.375rem;
line-height: 1.1;
color: white;
}
.testimonial__position {
font-size: 1rem;
color: rgba(255, 255, 255, 0.7);
}

Jika berhasil dan sesuai mengikuti tutorial di atas maka beginilah hasilnya:

See the Pen Client Testimonial by Maciej Leszczyński (@asistapl) on CodePen.0

Jika kalian punya masalah dengan kode diatas kalian bisa mendownload full source nya di github berikut 

Sekian tutorial mengenai cara membuat halaman testimonial keren material design ,semoga bermanfaat '-'