Skip to content

Instantly share code, notes, and snippets.

@moonbyt3
Created August 12, 2019 21:53
Show Gist options
  • Save moonbyt3/e65a7b7181bdec1a0c875856d9f17e15 to your computer and use it in GitHub Desktop.
Save moonbyt3/e65a7b7181bdec1a0c875856d9f17e15 to your computer and use it in GitHub Desktop.
Boxes
<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>
$('.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');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
$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;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment