WebDev Tips . Creating a simple and clean testimonials section with CSS

Creating a simple and clean testimonials section with CSS

#175

HTML - CSS

April 01, 2020

alt text

Happy Friday guys! 😎

So, so since a lot of you guys have been asking me for more tips on UI & CSS I decided to show you how we can easily create a nice and clean testimonials section for a website.

<div class="container">


    <div class="testimonial">
        <img class="testimonial__avatar" src="user1.jpg"/>
        <div class="testimonial__user">
            <h3 class="user__name">Eric Thomson</h3>
            <h4 class="user__company">Amazon</h4>
        </div>
        <p class="testimonial__text">
            "Lorem ipsum ..."
        </p>
    </div>


    <div class="testimonial">
        <img class="testimonial__avatar" src="user2.jpg"/>
        <div class="testimonial__user">
            <h3 class="user__name">David Lucas</h3>
            <h4 class="user__company">Facebook</h4>
        </div>
        <p class="testimonial__text">
            "Lorem ipsum ..."
        </p>
    </div>


    <div class="testimonial">
        <img class="testimonial__avatar" src="user3.jpg"/>
        <div class="testimonial__user">
            <h3 class="user__name">Albert Wallace</h3>
            <h4 class="user__company">Google</h4>
        </div>
        <p class="testimonial__text">
            "Lorem ipsum ..."
        </p>
    </div>

    
</div>

Won't go into detail on the HTML and CSS of it since it's all pretty simple and self explanatory.

.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.5rem;
    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 rgba(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: .5rem;
}

.user__company {
    color: #BDBDBD;
    margin-top: .4rem;
    font-size: .85rem;
    letter-spacing: .03rem;
}

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

Have a great day guys! ♥️