RN-Examples

Foundation zurb snippet. Services box

This snippet was created to help web designers, front-end and back-end developer save time. Use it in your project and build your app faster,
You can also download the HTML, CSS, and JS code.

Preview HTML CSS

HTML code

This is the html code used to create this bootstrap snippet, You can copy, paste, change, customize and run the following HTML code to get a result like the one shown in the preview selection

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<div class="row">
    <div class="large-4 columns">
        <div class="service-box">
            <i class="fa fa-desktop red"></i>
            <h3>Responsive design</h3>
            <p>
                Similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
            </p>
        </div>
    </div>
     <div class="large-4 columns">
        <div class="service-box">
            <i class="fa fa-twitter green"></i>
            <h3>Foundation 6</h3>
            <p>
                Similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
            </p>
        </div>
    </div>
     <div class="large-4 columns">
        <div class="service-box">
            <i class="fa fa-phone blue "></i>
            <h3>Free support</h3>
            <p>
                Similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
            </p>
        </div>
    </div>
</div>
<div class="row">
    <div class="large-4 columns">
        <div class="service-box">
            <i class="fa fa-desktop blue"></i>
            <h3>Responsive design</h3>
            <p>
                Similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
            </p>
        </div>
    </div>
     <div class="large-4 columns">
        <div class="service-box">
            <i class="fa fa-twitter red"></i>
            <h3>Foundation 6</h3>
            <p>
                Similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
            </p>
        </div>
    </div>
     <div class="large-4 columns">
        <div class="service-box">
            <i class="fa fa-phone yellow "></i>
            <h3>Free support</h3>
            <p>
                Similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
            </p>
        </div>
    </div>
</div>

CSS code

This is the css code used to create this bootstrap snippet, You can copy, paste, change, customize and run the following CSS code to get a result Like the one shown in the preview selection

body{margin-top:20px;}


.service-box {
    text-align: center;
    padding: 15px;
    padding-top: 0px;
    border: 1px solid #ddd;
    margin-top: 70px;
}
.service-box i{
    width: 90px;
    height: 90px;
    color:#fff;
    text-align: center;
    line-height: 90px;
    margin-bottom: 20px;
    border-radius: 50%;
    font-size: 40px;
    position: relative;
    margin-top: -50px;
}
.service-box h3{
    text-transform: uppercase;
    font-weight: 700;
    font-size: 16px;
}
.service-box p{
    color:#888;
    font-size: 13px;
    font-weight: 400;
}

.red{
    background:   #b01a40;
}
.green{
    background:  #46aa1f;
}
.blue{
    background:  #408afa;
}
.orange{
    background:  #d24726;  
}
.yellow{
    background-color: #e99a1e;
}
.btn{
    font-weight: normal;
}
.lead{
    color:#777;
}