Boxes

boxes.markdown

Boxes

A Pen by Milorad on CodePen.

License.

index.html

<div class="faq">
    <div class="container">
        <div class="row">
            <div class="col-xl-12">
                <h2 class="section-title centered">Why choose us?</h2>
            </div>
            <div class="faq-wrap">
                <div class="faq-item">
                    <div class="faq-item-title-content-wrap">
                        <span class="faq-item-title">Problem solvers at heart.</span>
                    </div>
                    <div class="faq-item-text-wrap">
                        <span class="faq-item-icon font-idea"></span>
                        <div class="faq-item-text-content-wrap">
                            <h2 class="faq-item-text-content-title">Innovation that beats the trends.</h2>
                            <span class="faq-item-text">At Lorem Ipsum, we love a good challenge, because it means we get to help our customers solve it...</span>
                            <span class="btn faq-item-btn faq-readmore">Read More</span>
                            <span class="btn btn--invert faq-item-btn faq-goback">Go back</span>
                        </div>
                    </div>
                </div>
                <div class="faq-item">
                    <div class="faq-item-title-content-wrap">
                        <span class="faq-item-title">The products you need, when you need them.</span>
                    </div>
                    <div class="faq-item-text-wrap">
                        <span class="faq-item-icon font-3d"></span>
                        <div class="faq-item-text-content-wrap">
                            <h2 class="faq-item-text-content-title">Innovation that beats the trends.</h2>
                            <span class="faq-item-text">At Lorem Ipsum, we love a good challenge, because it means we get to help our customers solve it...</span>
                            <span class="btn faq-item-btn faq-readmore">Read More</span>
                            <span class="btn btn--invert faq-item-btn faq-goback">Go back</span>
                        </div>
                    </div>
                </div>
                <div class="faq-item">
                    <div class="faq-item-title-content-wrap">
                        <span class="faq-item-title">We take customer service personally.</span>
                    </div>
                    <div class="faq-item-text-wrap">
                        <span class="faq-item-icon font-chatting"></span>
                        <div class="faq-item-text-content-wrap">
                            <h2 class="faq-item-text-content-title">Innovation that beats the trends.</h2>
                            <span class="faq-item-text">At Lorem Ipsum, we love a good challenge, because it means we get to help our customers solve it...</span>
                            <span class="btn faq-item-btn faq-readmore">Read More</span>
                            <span class="btn btn--invert faq-item-btn faq-goback">Go back</span>
                        </div>
                    </div>
                </div>
                <div class="faq-item">
                    <div class="faq-item-title-content-wrap">
                        <span class="faq-item-title">We love good challenge.</span>
                    </div>
                    <div class="faq-item-text-wrap">
                        <span class="faq-item-icon font-plan"></span>
                        <div class="faq-item-text-content-wrap">
                            <h2 class="faq-item-text-content-title">Innovation that beats the trends.</h2>
                            <span class="faq-item-text">At Lorem Ipsum, we love a good challenge, because it means we get to help our customers solve it...</span>
                            <span class="btn faq-item-btn faq-readmore">Read More</span>
                            <span class="btn btn--invert faq-item-btn faq-goback">Go back</span>
                        </div>
                    </div>
                </div>
                <div class="faq-item">
                    <div class="faq-item-title-content-wrap">
                        <span class="faq-item-title">Uncompromising craftsmanship - at unbeatable prices.</span>
                    </div>
                    <div class="faq-item-text-wrap">
                        <span class="faq-item-icon font-rgb"></span>
                        <div class="faq-item-text-content-wrap">
                            <h2 class="faq-item-text-content-title">Innovation that beats the trends.</h2>
                            <span class="faq-item-text">At Lorem Ipsum, we love a good challenge, because it means we get to help our customers solve it...</span>
                            <span class="btn faq-item-btn faq-readmore">Read More</span>
                            <span class="btn btn--invert faq-item-btn faq-goback">Go back</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

script.js

$('.faq-item-btn').on('click', function() {
			let faqTextContent = $(this).parent().parent();
			faqTextContent.addClass('faq-item-text-wrap-open');
		});
$('.faq-goback').on('click', function() {
			$('.faq-item-text-wrap-open').removeClass('faq-item-text-wrap-open');
		});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

style.scss

$grey-light: #f3f3f3;
$grey: #6f6f6f;
$white: white;
$red: #5040ce;
$dur: .3s;
$ease: ease-in;
.container {
  max-width: 1400px;
}
.faq {
    background-color: $grey-light;
    padding: 100px 0 40px;
    .section-title {
        margin-bottom: 52px;
    }
}
.faq-wrap {
    position: relative;
    height: 520px;
    display: flex;
    width: 100%;
    padding: 0 15px;
}
.faq-item {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: $red;
    color: $white;
    width: 20%;
    padding: 3.5% 2.5% 4%;
    margin-right: 0.2%;
    overflow-y: hidden;
    transition: $dur $ease;
    &:hover {
        background-color: $white;
        .faq-item-icon {
            margin-bottom: 40px;
            &::before {
                color: $red;
            }
        }
        .faq-item-title-content-wrap {
            display: none;
        }
        .faq-item-text-content-wrap {
            display: block;
        }
    }
}
.faq-item-title {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.3;
}
.faq-item-content {
    display: none;
}
.faq-item-content-title {
    color: $grey;
}
.faq-item-content-text {
    color: $grey;
}
.faq-item-icon {
    justify-content: flex-start;
    align-items: flex-start;
    &::before {
        color: $white;
        font-size: 110px;
        transition: $dur $ease;
    }
}

.faq-item-text-wrap {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.faq-item-text-content-title {
    display: none;
    color: $grey;
    width: 80%;
    font-weight: 600;
    font-size: 30px;
}
.faq-item-text-content-wrap {
    display: none;
    // transition: $dur $ease;
}
.faq-item-text {
    color: $grey;
    display: block;
    margin-bottom: 110px;
    padding: 0 7px;
    line-height: 1.5;
}
.faq-item-btn {
    display: inline-block;
    min-width: initial;
    padding: 13px 25px;
    margin-left: 5px;
    margin-bottom: 15px;
}
.faq-goback {
    display: none;
}
.faq-item-text-wrap-open {
    position: absolute;
    top: 0;
    left: 0;
    flex-direction: row;
    width: 100%;
    max-width: auto;
    height: 100%;
    padding: 110px 12%;
    background-color: $white;
    .faq-item-text-content-wrap {
        display: block !important;
        padding-top: 15px;
    }
    .faq-item-icon {
        margin-right: 20px;
    }
    .faq-item-icon::before {
        color: $red;
    }
    .faq-item-text {
        margin-bottom: 70px;
    }
    .faq-item-text-content-title {
        display: block;
        width: 38%;
        margin-bottom: 22px;
    }
    
    .faq-readmore {
        display: none;
    }
    .faq-goback {
        display: inline-block;
    }
}

/*--------------------------------------------------------------
## Buttons
--------------------------------------------------------------*/
.btn {
    display: block;
    min-width: 220px;
    padding: 13px;
    background-color: $red;
    color: $white;
    border: 1px solid $red;
    border-radius: 40px;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.3px;
    transition: $dur $ease;
    &:hover {
        cursor: pointer;
        background-color: transparent;
        color: $red;
    }
}
.btn--invert {
    background-color: transparent;
    color: $red;
    &:hover {
        background-color: $red;
        color: $white;
    }
}
.btn--bulk {
    min-width: 160px;
    text-align: center;
    align-self: flex-start;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />