Service Component with Animation

Stylish attractive services web component from smarteyeapps.com. With the help of the bootstrap HTML component you can easily develop the service portion of your website

Copy and Paste the code or Download and Use

You can use this Service Component with Animation web Component by simply copy and past the HTML code to the HTML File and copy Past the CSS to the CSS file. You also Download the Project Folder on the Service Component with Animation by Clicking the Download button at the bottom

1, Add the CSS Files at the Header of the Document
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" >
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" />
2, Add the HTML Files to the Document
<section class="servic-se">
               
                <div class="container">
                    <div class="row">
                        <div class="col-12">
                            <div class="session-title">
                                <h2>Our Feature</h2>
                                <p>lule kebab and sliced onion, Edward Island Mussels, Italian Sausage.Served with Garlic Toast Points.</p>
                            </div>
                        </div>

                        <div class="col-md-4 col-sm-6 col-xs-12">
                            <div class="wrapper">
                                <div class="content">
                                    <ul>
                                        <li>
                                            <div class="image">
                                                <img src="assets/images/ico-1.png">
                                            </div>
                                            <h3>High Quality Foods</h3>
                                            <p>There are many variations of passages of Lorem Ipsum 
                                            available, but the majority have suffered alteration in some 
                                            form, by injected humour</p>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4 col-sm-6 col-xs-12">
                            <div class="wrapper">
                                <div class="content">
                                    <ul>
                                        <li>
                                            <div class="image">
                                                <img src="assets/images/ico-2.png">
                                            </div>
                                            <h3>Inspiring Recipes</h3>
                                            <p>There are many variations of passages of Lorem Ipsum 
                                            available, but the majority have suffered alteration in some 
                                            form, by injected humour</p>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4 col-sm-6 col-xs-12">
                            <div class="wrapper">
                                <div class="content">
                                    <ul>
                                        <li>
                                            <div class="image">
                                                <img src="assets/images/ico-3.png">
                                            </div>
                                            <h3>Salutary Meals</h3>
                                            <p>There are many variations of passages of Lorem Ipsum 
                                            available, but the majority have suffered alteration in some 
                                            form, by injected humour</p>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4 col-sm-6 col-xs-12">
                            <div class="wrapper">
                                <div class="content">
                                    <ul>
                                        <li>
                                            <div class="image">
                                                <img src="assets/images/ico-4.png">
                                            </div>
                                            <h3>Veteran Staff</h3>
                                            <p>There are many variations of passages of Lorem Ipsum 
                                            available, but the majority have suffered alteration in some 
                                            form, by injected humour</p>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4 col-sm-6 col-xs-12">
                            <div class="wrapper">
                                <div class="content">
                                    <ul>
                                        <li>
                                            <div class="image">
                                                <img src="assets/images/ico-5.png">
                                            </div>
                                            <h3>Pristine Ingredientss</h3>
                                            <p>There are many variations of passages of Lorem Ipsum 
                                            available, but the majority have suffered alteration in some 
                                            form, by injected humour</p>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4 col-sm-6 col-xs-12">
                            <div class="wrapper">
                                <div class="content">
                                    <ul>
                                        <li>
                                            <div class="image">
                                                <img src="assets/images/ico-6.png">
                                            </div>
                                            <h3>Express Delivery</h3>
                                            <p>There are many variations of passages of Lorem Ipsum 
                                            available, but the majority have suffered alteration in some 
                                            form, by injected humour</p>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
 </section>

Copyright © 2018 Smarteyeapps.com Design & Developed by Smarteye Technologies