logo

Texte sur image avec icônes

AccueilBulmaIntégration BulmaBoxTexte sur image avec icônes

Html

<section class="fluid-section-one">
    <div class="outer-container clearfix">

        <div class="content-column">
            <div class="inner-column">
                <div class="sec-title">
                    <h2>Why Choose Us?</h2>
                </div>
                <div class="text-box">
                    <p>Dolor sit amet consectetur elit sed do eiusmod tempor incd idunt labore et dolore magna aliqua enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip exea commodo consequat.duis aute irure dolor in reprehen derit in voluptate velit esse cillum dolore eu fugiat nulla pariatur cepteur sint occaecat.</p>
                </div>
                <div class="row-bg-text">
                    <div class="column is-6 feature-block-two">
                        <div class="inner-box">
                            <span class="icon flaticon-24-hours"></span>
                            <h4>Available 24/7</h4>
                            <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing.</div>
                        </div>
                    </div>

                    <div class="column is-6 feature-block-two">
                        <div class="inner-box">
                            <span class="icon flaticon-artificial-intelligence"></span>
                            <h4>Creative ideas</h4>
                            <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing.</div>
                        </div>
                    </div>

                    <div class="column is-6 feature-block-two">
                        <div class="inner-box">
                            <span class="icon flaticon-handshake"></span>
                            <h4>Customer Focused</h4>
                            <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing.</div>
                        </div>
                    </div>

                    <div class="column is-6 feature-block-two">
                        <div class="inner-box">
                            <span class="icon flaticon-rocket-ship"></span>
                            <h4>Fast Delivery</h4>
                            <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing.</div>
                        </div>
                    </div>
                </div>

            </div>
        </div>

        <div class="image-column" style="background-image:url(http://ary-themes.com/html/bold_touch/wooder/images/resource/image-2.jpg);">
            <figure class="image-box"><img src="http://ary-themes.com/html/bold_touch/wooder/images/resource/image-2.jpg" alt=""></figure>
        </div>
    </div>
</section>

Css

.row-bg-text {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

.fluid-section-one{
    position:relative;
}

.fluid-section-one .outer-container{
    position:relative;
    min-height:800px;
    padding-top: 100px;
}

.fluid-section-one .image-column{
    position:absolute;
    float:left;
    top:0px;
    bottom: 100px;
    left:0px;
    width:55%;
    background-repeat:no-repeat;
    background-position:center center;
    background-size:cover;
}

.fluid-section-one .image-column .image-box{
    position:relative;
    display:none;
}

.fluid-section-one .image-column .image-box img{
    position:relative;
    display:block;
    width:100%;
}

.fluid-section-one .content-column{
    position:relative;
    float:right;
    width:55%;
    background-color: #ffffff;
    box-shadow: 0 0 50px rgba(0,0,0,0.10);
    z-index: 9;
}

.fluid-section-one .content-column .inner-column{
    position:relative;
    max-width:800px;
    padding:70px 15px 60px 70px;
}

.fluid-section-one .content-column .sec-title{
    margin-bottom: 35px;
}

.fluid-section-one .content-column .sec-title h2{
    font-size: 50px;
}

.fluid-section-one .content-column .text-box{
    margin-bottom: 30px;
}

.feature-block-two{
    position: relative;
    margin-bottom: 30px;
}

.feature-block-two .inner-box{
    position: relative;
    padding-left: 80px;
    min-height: 80px;
}

.feature-block-two .icon{
    position: absolute;
    left: 0;
    top: 0;
    font-size: 60px;
    line-height: 80px;
    color: #ab7442;
}

.feature-block-two h4{
    font-size: 22px;
    margin-bottom: 10px;
}

.feature-block-two .text{
    font-size: 16px;
}

@media only screen and (max-width: 768px){
    .column {
        padding: 2.72rem!important;
    }
}

@media only screen and (max-width: 1139px){
    .fluid-section-one .content-column,
    .fluid-section-one .image-column{
        position: relative;
        width: 100%;
    }

    .fluid-section-one .outer-container{
        padding: 0;
    }

    .fluid-section-one .image-column .image-box{
        display: block;
    }

    .fluid-section-one .content-column .inner-column{
        max-width: 100%;
        padding: 70px 15px 60px;
    }
}

Une idée ? Partagez-la !

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *