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>
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; }
<link rel="stylesheet" href="style.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>