harnold-el-widget-markup.html

#makrup

<div class="volunteer-area m-top-02">
        <div class="container">
            <div class="row no-gutters">
                <div class="col-lg-12">
                    <ul class="volunteer-single-item-list">
                        <li class="volunteer-single-item">
                            <div class="content less-padding style-01">
                                <div class="icon">
                                    <i class="flaticon-group"></i>
                                </div>
                                <h3 class="title">
                                    Be a volunteer
                                </h3>
                                <p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
                            </div>
                            <div class="thumb" style="background-image: url(assets/img/volunteer/02.png);">
                            </div>
                        </li>
                        <li class="volunteer-single-item style-01">
                            <div class="content less-padding">
                                <div class="icon">
                                    <i class="flaticon-heart"></i>
                                </div>
                                <h3 class="title">
                                    Contribute Now
                                </h3>
                                <p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
                            </div>
                            <div class="thumb" style="background-image: url(assets/img/volunteer/03.png);">
                            </div>
                        </li>
                        <li class="volunteer-single-item">
                            <div class="content less-padding style-02">
                                <div class="icon">
                                    <i class="flaticon-reach"></i>
                                </div>
                                <h3 class="title">
                                    Get Campaign Gear
                                </h3>
                                <p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
                            </div>
                            <div class="thumb" style="background-image: url(assets/img/volunteer/01.png);">
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>


#responsive
#css
.volunteer-single-item-list {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
}

.volunteer-single-item {
  width: calc(100%/3);
  height: 100%;
  transition: all 0.3s ease-in-out;
}
.volunteer-single-item.style-01 {
  flex-direction: column-reverse;
  display: flex;
}
.volunteer-single-item .thumb {
  width: 100%;
  height: 100%;
  min-height: 340px;
  background-repeat: no-repeat;
  background-size: cover;
}
.volunteer-single-item .thumb img {
  width: 100%;
  height: 100%;
}
.volunteer-single-item .content {
  padding: 110px 45px;
  margin: auto;
  background-color: var(--main-color-one);
  text-align: center;
}
.volunteer-single-item .content.less-padding {
  padding: 75px 45px;
}
.volunteer-single-item .content.style-01 {
  background-color: var(--main-color-two);
}
.volunteer-single-item .content.style-02 {
  background-color: #14b3e4;
}
.volunteer-single-item .content .icon {
  color: #fff;
  font-size: 60px;
  line-height: 60px;
  margin-bottom: 10px;
}
.volunteer-single-item .content .title {
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 25px;
}
.volunteer-single-item .content p {
  color: #fff;
  margin-bottom: 15px;
  max-width: 285px;
  margin: auto;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .volunteer-single-item .content {
        padding: 98px 45px;
    }
    .volunteer-single-item .content.less-padding {
        padding: 63px 45px;
    }
}
@media only screen and (max-width: 991px) {
    .volunteer-single-item-list {
        display: block;
    }
    .volunteer-single-item.style-01 {
        flex-direction: initial;
    }
    .volunteer-single-item {
        width: 100%;
        display: flex;
    }
    .volunteer-single-item .content {
        width: 50%;
    }
    .volunteer-single-item .thumb {
        width: 50%;
        min-height: 342px;
    }
    .volunteer-single-item .content.less-padding {
        padding: 75px 40px;
    }
}
@media only screen and (max-width: 767px) {
    .volunteer-single-item.style-01 {
        display: block;
    }
    .volunteer-single-item {
        display: block;
    }
    .volunteer-single-item .content {
        width: 100%;
    }
    .volunteer-single-item .thumb {
        width: 100%;
        min-height: 335px;
    }
}