Part 5 PSD to HTML Services Section CSS [HTML/ CSS] [Code Fusion]

 Source Code of the video is Down below

HTML

  <!-- SERVICES SECTION -->
    <section id="services" class="clear-float">
        <div class="container">
            <div class="service">
                <h2>Exceptional Customer Service</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
                    sed do eiusmod tempor Lorem ipsum dolor sit amet
                    consectetur adipiscing elit.</p>
                <a href="#" class="btn-chat">Need to help? lets Chat <span class="righ-arrow"><i
                            class="fas fa-arrow-right"></i></span></a>
            </div>
        </div>
    </section>

CSS

/* SERVICIES */

#services {
    background-image: linear-gradient(to right, rgba(247, 247, 247, 1), rgba(247, 247, 247, 0)), url(../img/service-bg.png);
    background-size: 818px 694px;
    background-position: right;
    background-repeat: no-repeat;

    background-color: rgb(247, 247, 247);


    padding: 159px 0;
}

.service {
    width: 60%;

}

.service h2 {
    font-size: 50px;
    font-weight: 300;
    color: #503392;
}

.service p {

    width: 60%;
    font-size: 18px;
    line-height: 28px;
    margin: 55px 0;

}

.righ-arrow {
    margin-left: 4px;
}

.btn-chat {
    padding: 20px;
    background-color: #503392;
    color: #fff;
    transition: 0.3s;
}

.btn-chat:hover {
    border: solid 4px #503392;
    padding: 16px;
    color: #503392;
    background-color: #ffffff;
    transition: 0.3s;
}

.btn-chat img {
    margin-left: 15px;
}