Testimonial With HTML, CSS and Pure javaScript

HTML

CSS

* {
            padding: 0;
            margin: 0;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            font-family: "Poppins", sans-serif;
        }

body {
            background-color: #e0ecee;
        }

#carouselBox {
            position: absolute;
            -webkit-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            top: 50%;
            left: 50%;
            width: 80vw;
            max-width: 41em;
            min-height: 26em;
        }

.wrapperDivArea {
            background-color: #ffffff;
            position: relative;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            border-radius: 0.6em;
            -webkit-box-shadow: 0 1.8em 3em rgba(1, 17, 39, 0.15);
            box-shadow: 0 1.8em 3em rgba(1, 17, 39, 0.15);
        }

.testimonial-main-div {
            width: 85%;
            height: 100%;
            position: relative;
            margin: auto;
            padding: 1.8em 1.2em;
        }

.testimonial-main-div p {
            color: #8c8c90;
            text-align: center;
            font-size: 0.9em;
            line-height: 2em;
            letter-spacing: 0.05em;
        }

.testimonial-main-div img {
            display: block;
            margin: 1.8em auto 1.25em auto;
            border-radius: 50%;
            width: 4.4em;
        }

.testimonial-main-div h3 {
            color: #2d3d67;
            font-size: 1em;
            text-align: center;
        }

.testimonial-main-div h6 {
            color: #bcc4da;
            font-size: 0.9em;
            letter-spacing: 0.03em;
            font-weight: 400;
            text-align: center;
        }

.wrapperDivArea button {
            font-size: 1.8em;
            color: #0a69ed;
            height: 2.2em;
            width: 2.2em;
            position: absolute;
            margin: auto;
            top: 0;
            bottom: 0;
            background-color: #ffffff;
            border: none;
            border-radius: 50%;
            -webkit-box-shadow: 0 0 1em rgba(0, 0, 0, 0.25);
            box-shadow: 0 0 1em rgba(0, 0, 0, 0.25);
            cursor: pointer;
        }

button#nextBtn {
            right: -1.1em;
        }

button#prevBtn {
            left: -1.1em;
        }

a {
            position: relative;
            display: block;
            background-color: #ffffff;
            color: #0a69ed;
            text-decoration: none;
            font-size: 1.2em;
            font-weight: 600;
            text-align: center;
            padding: 0.9em 0;
            border-radius: 0.3em;
            margin-top: 30px;
        }

.fab {
            color: #ff0000;
        }

@media screen and (max-width: 650px) {
            .wrapperDivArea {
                font-size: 14px;
            }
        }

JS

Ui Code Snippets

Testimonial With HTML, CSS and Pure javaScript

HTML

CSS

JS

Output

Network Marketing

SEO Course

Our Courses

Our Tutorials

Ui Code Snippets

Popular Notes

Ui Code Snippets

Testimonial With HTML, CSS and Pure javaScript

HTML

CSS

JS

Output

Network Marketing

SEO Course