How Do I Create Simple Testimonial Using HTML And CSS

Posted By Bajarangi soft , Posted On 07-11-2020

Using CSS we can create testimonial slider .So today we discuss how to do it.

How Do I Create Simple Testimonial Using HTML And CSS

Step 1:Create index,html file and implement below code in it.

<div class="bg_color">
    <div class="carrousel">
        <h1>Testimonial</h1>
        <input type="radio" name="slides" id="radio-1" checked>
        <input type="radio" name="slides" id="radio-2">
        <input type="radio" name="slides" id="radio-3">
        <input type="radio" name="slides" id="radio-4">

        <ul class="slides">
            <li class="slide">
                <p class="padding"><i class="fa fa-quote-left"></i>Lorem ipsum dolor sit amet, consectetuer
                    adipiscing elit, sed diam nonummy nibh euismod
                    tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
                    nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
                    <i class="fa fa-quote-right"></i>
                </p>
                <p>

                    <span class="author">
          <img src="../image/demo1.jpg">
          JR Tolkien
          </span>
                </p>
            </li>
            <li class="slide">
                <p class="padding"><i class="fa fa-quote-left"></i>Lorem ipsum dolor sit amet, consectetuer
                    adipiscing elit, sed diam nonummy nibh euismod
                    tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
                    nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
                    <i class="fa fa-quote-right"></i>
                </p>
                <p>
                    <span class="author">
              <img src="../image/demo2.jpg">
              Sinatra
            </span>
                </p>
            </li>
            <li class="slide">
                <p class="padding"><i class="fa fa-quote-left"></i>Lorem ipsum dolor sit amet, consectetuer
                    adipiscing elit, sed diam nonummy nibh euismod
                    tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
                    nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
                    <i class="fa fa-quote-right"></i>
                </p>
                <p>
                    <span class="author">
            <img src="../image/demo3.jpg">
            Alf
            </span>
                </p>
            </li>
            <li class="slide">
                <p class="padding"><i class="fa fa-quote-left"></i>Lorem ipsum dolor sit amet, consectetuer
                    adipiscing elit, sed diam nonummy nibh euismod
                    tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
                    nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
                    <i class="fa fa-quote-right"></i>
                </p>
                <p>
                    <span class="author">
            <img src="../image/demo1.jpg">
            The octocat
          </span>
                </p>
            </li>
        </ul>
        <div class="slides-nav">
            <label for="radio-1" id="dotForRadio-1"></label>
            <label for="radio-2" id="dotForRadio-2"></label>
            <label for="radio-3" id="dotForRadio-3"></label>
            <label for="radio-4" id="dotForRadio-4"></label>
        </div>
    </div>

</div>

Step 2:Create style.css file and implement below code in it.

body {
    background-color: #ecc6d9;
}
.carrousel {
    background: #ffffff;
    text-align: center;
    padding: 4em 0;
    max-width: 750px;
    margin: auto;
    position: relative;
    overflow: hidden;
}

.carrousel h2 {
    margin: 0;
    margin-top: -1.7em;
    padding: 0;
    font-size: 1em;
    text-align: center;
    color: #bbbbbb;
}

.carrousel .slides {
    width: 400%;
    left: 0;
    padding-left: 0;
    padding-top: 1em;
    overflow: hidden;
    list-style: none;
    position: relative;
    -webkit-transition: transform .5s;
    -moz-transition: transform .5s;
    -o-transition: transform .5s;
    transition: transform .5s;
}

.carrousel .slides li {
    width: 25%;
    position: relative;
    float: left;
}

.carrousel li p {
    margin-top: 0;
}

.carrousel li q {
    max-width: 90%;
    margin: auto;
    color: #666666;
    font-size: 1.3em;
    font-weight: bold;
}

.carrousel li img {
    width: 3em;
    height: 3em;
    object-fit: cover;
    border-radius: 50%;
    margin-left: -1.5em;
    margin-right: 0.5em;
    vertical-align: middle;
}

.carrousel li span.author {
    margin-top: 0.5em;
    font-size: 1.2em;
    color: #777777;
    display: block;
}

.carrousel .slides-nav {
    display: block;
    list-style: none;
    text-align: center;
    bottom: 1em;
    position: absolute;
    width: 104px;
    left: 50%;
    margin-left: -52px;
}

.carrousel input {
    display: none;
}

.carrousel .slides-nav label {
    float: left;
    margin: 6px;
    display: block;
    height: 10px;
    width: 10px;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    border: solid 2px #2980b9;
    font-size: 0;
}

#radio-1:checked ~ .slides {
    transform: translateX(0%);
}

#radio-2:checked ~ .slides {
    transform: translateX(-25%);
}

#radio-3:checked ~ .slides {
    transform: translateX(-50%);
}

#radio-4:checked ~ .slides {
    transform: translateX(-75%);
}

.carrousel .slides-nav label:hover {
    cursor: pointer;
}


.carrousel #radio-1:checked ~ .slides-nav label#dotForRadio-1,
.carrousel #radio-2:checked ~ .slides-nav label#dotForRadio-2,
.carrousel #radio-3:checked ~ .slides-nav label#dotForRadio-3,
.carrousel #radio-4:checked ~ .slides-nav label#dotForRadio-4 {
    background: #2980b9;
}

@media (max-width: 796px) {
    .carrousel {
        height: 8.5em;
    }
}

@media (max-width: 480px) {
    .carrousel li p {
        padding-left: 0.5em;
        padding-right: 0.5em;
    }

    .carrousel li q {
        font-size: 1em;
    }

    .carrousel li img {
        width: 2em;
        margin-left: -1em;
        margin-right: 0.25em;
    }
}

.bg_color {
    background: #c2d6d6;
    padding: 40px;
}
.padding{
    padding: 30px;
    font-size: 20px;
    color: grey;
}
.fa-quote-left , .fa-quote-right{
    font-size: 30px;
}

Step 3: Include below link in index.html file.

<link rel="stylesheet" href="style.css">

Complete Code For Creating Simple Testimonial Using HTML And CSS.

<!DOCTYPE html>
<html>
<head>
    <title>How Do I Create Simple Testimonial Using HTML And CSS</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

</head>

<style>
    body {
        background-color: #ecc6d9;
    }

    .carrousel {
        background: #ffffff;
        text-align: center;
        padding: 4em 0;
        max-width: 750px;
        margin: auto;
        position: relative;
        overflow: hidden;
    }

    .carrousel h2 {
        margin: 0;
        margin-top: -1.7em;
        padding: 0;
        font-size: 1em;
        text-align: center;
        color: #bbbbbb;
    }

    .carrousel .slides {
        width: 400%;
        left: 0;
        padding-left: 0;
        padding-top: 1em;
        overflow: hidden;
        list-style: none;
        position: relative;
        -webkit-transition: transform .5s;
        -moz-transition: transform .5s;
        -o-transition: transform .5s;
        transition: transform .5s;
    }

    .carrousel .slides li {
        width: 25%;
        position: relative;
        float: left;
    }

    .carrousel li p {
        margin-top: 0;
    }

    .carrousel li q {
        max-width: 90%;
        margin: auto;
        color: #666666;
        font-size: 1.3em;
        font-weight: bold;
    }

    .carrousel li img {
        width: 3em;
        height: 3em;
        object-fit: cover;
        border-radius: 50%;
        margin-left: -1.5em;
        margin-right: 0.5em;
        vertical-align: middle;
    }

    .carrousel li span.author {
        margin-top: 0.5em;
        font-size: 1.2em;
        color: #777777;
        display: block;
    }

    .carrousel .slides-nav {
        display: block;
        list-style: none;
        text-align: center;
        bottom: 1em;
        position: absolute;
        width: 104px;
        left: 50%;
        margin-left: -52px;
    }

    .carrousel input {
        display: none;
    }

    .carrousel .slides-nav label {
        float: left;
        margin: 6px;
        display: block;
        height: 10px;
        width: 10px;
        -webkit-border-radius: 50%;
        border-radius: 50%;
        border: solid 2px #2980b9;
        font-size: 0;
    }

    #radio-1:checked ~ .slides {
        transform: translateX(0%);
    }

    #radio-2:checked ~ .slides {
        transform: translateX(-25%);
    }

    #radio-3:checked ~ .slides {
        transform: translateX(-50%);
    }

    #radio-4:checked ~ .slides {
        transform: translateX(-75%);
    }

    .carrousel .slides-nav label:hover {
        cursor: pointer;
    }


    .carrousel #radio-1:checked ~ .slides-nav label#dotForRadio-1,
    .carrousel #radio-2:checked ~ .slides-nav label#dotForRadio-2,
    .carrousel #radio-3:checked ~ .slides-nav label#dotForRadio-3,
    .carrousel #radio-4:checked ~ .slides-nav label#dotForRadio-4 {
        background: #2980b9;
    }

    @media (max-width: 796px) {
        .carrousel {
            height: 8.5em;
        }
    }

    @media (max-width: 480px) {
        .carrousel li p {
            padding-left: 0.5em;
            padding-right: 0.5em;
        }

        .carrousel li q {
            font-size: 1em;
        }

        .carrousel li img {
            width: 2em;
            margin-left: -1em;
            margin-right: 0.25em;
        }
    }

    .bg_color {
        background: #c2d6d6;
        padding: 40px;
    }

    .padding {
        padding: 30px;
        font-size: 20px;
        color: grey;
    }

    .fa-quote-left, .fa-quote-right {
        font-size: 30px;
    }
</style>
<body>
<br/><br/>
<div class="container">
    <br>
    <div class="text-center">
        <h1 id="color" style="color: black;">Simple Testimonial Using HTML And CSS</h1>
    </div>
    <br>
    <div class="bg_color">
        <div class="carrousel">
            <h1>Testimonial</h1>
            <input type="radio" name="slides" id="radio-1" checked>
            <input type="radio" name="slides" id="radio-2">
            <input type="radio" name="slides" id="radio-3">
            <input type="radio" name="slides" id="radio-4">

            <ul class="slides">
                <li class="slide">
                    <p class="padding"><i class="fa fa-quote-left"></i>Lorem ipsum dolor sit amet, consectetuer
                        adipiscing elit, sed diam nonummy nibh euismod
                        tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
                        nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
                        <i class="fa fa-quote-right"></i>
                    </p>
                    <p>

                        <span class="author">
              <img src="../image/demo1.jpg">
              JR Tolkien
              </span>
                    </p>
                </li>
                <li class="slide">
                    <p class="padding"><i class="fa fa-quote-left"></i>Lorem ipsum dolor sit amet, consectetuer
                        adipiscing elit, sed diam nonummy nibh euismod
                        tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
                        nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
                        <i class="fa fa-quote-right"></i>
                    </p>
                    <p>
                        <span class="author">
                  <img src="../image/demo2.jpg">
                  Sinatra
                </span>
                    </p>
                </li>
                <li class="slide">
                    <p class="padding"><i class="fa fa-quote-left"></i>Lorem ipsum dolor sit amet, consectetuer
                        adipiscing elit, sed diam nonummy nibh euismod
                        tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
                        nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
                        <i class="fa fa-quote-right"></i>
                    </p>
                    <p>
                        <span class="author">
                <img src="../image/demo3.jpg">
                Alf
                </span>
                    </p>
                </li>
                <li class="slide">
                    <p class="padding"><i class="fa fa-quote-left"></i>Lorem ipsum dolor sit amet, consectetuer
                        adipiscing elit, sed diam nonummy nibh euismod
                        tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
                        nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
                        <i class="fa fa-quote-right"></i>
                    </p>
                    <p>
                        <span class="author">
                <img src="../image/demo1.jpg">
                The octocat
              </span>
                    </p>
                </li>
            </ul>
            <div class="slides-nav">
                <label for="radio-1" id="dotForRadio-1"></label>
                <label for="radio-2" id="dotForRadio-2"></label>
                <label for="radio-3" id="dotForRadio-3"></label>
                <label for="radio-4" id="dotForRadio-4"></label>
            </div>
        </div>

    </div>

</div>
</body>
</html>

Related Post

How Do I Create Bordered Inputs Using Html And CSS
How Do I Use Counters Properties With HTML And CSS
How Can I Create Website Layout Using HTML And CSS
How Can I Use Word Wrap Property Using HTML And CSS
How Can I Use Word Break Property Using HTML And CSS
How To Use Writing Mode Property Using HTML And CSS
How Do I Create Simple Testimonial Using HTML And CSS
How To Create Transparent Navbar Using HTML And CSS
How Do I Shrink Navbar on Scroll Using Html and CSS
How To Create Form Validation Wizard Using Html And CSS