Services.jsx BizPage React JS

Services.jsx

import React, { Component } from 'react';

class Services extends Component {
  render() {
    return (
        <React.Fragment>
            <main id="main">

                <section id="services">
                    <div className="container">

                        <header className="section-header wow fadeInUp">
                            <h3>Services</h3>
                            <p>Laudem latine persequeris id sed, ex fabulas delectus quo. No vel partiendo abhorreant vituperatoribus, ad pro quaestio laboramus. Ei ubique vivendum pro. At ius nisl accusam lorenta zanos paradigno tridexa panatarel.</p>
                        </header>

                        <div className="row">

                            <div className="col-lg-4 col-md-6 box wow bounceInUp" data-wow-duration="1.4s">
                                <div className="icon"><i className="ion-ios-analytics-outline"></i></div>
                                <h4 className="title"><a href="/#">Lorem Ipsum</a></h4>
                                <p className="description">Voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident</p>
                            </div>
                            <div className="col-lg-4 col-md-6 box wow bounceInUp" data-wow-duration="1.4s">
                                <div className="icon"><i className="ion-ios-bookmarks-outline"></i></div>
                                <h4 className="title"><a href="/#">Dolor Sitema</a></h4>
                                <p className="description">Minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat tarad limino ata</p>
                            </div>
                            <div className="col-lg-4 col-md-6 box wow bounceInUp" data-wow-duration="1.4s">
                                <div className="icon"><i className="ion-ios-paper-outline"></i></div>
                                <h4 className="title"><a href="/#">Sed ut perspiciatis</a></h4>
                                <p className="description">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</p>
                            </div>
                            <div className="col-lg-4 col-md-6 box wow bounceInUp" data-wow-delay="0.1s" data-wow-duration="1.4s">
                                <div className="icon"><i className="ion-ios-speedometer-outline"></i></div>
                                <h4 className="title"><a href="/#">Magni Dolores</a></h4>
                                <p className="description">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
                            </div>
                            <div className="col-lg-4 col-md-6 box wow bounceInUp" data-wow-delay="0.1s" data-wow-duration="1.4s">
                                <div className="icon"><i className="ion-ios-barcode-outline"></i></div>
                                <h4 className="title"><a href="/#">Nemo Enim</a></h4>
                                <p className="description">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque</p>
                            </div>
                            <div className="col-lg-4 col-md-6 box wow bounceInUp" data-wow-delay="0.1s" data-wow-duration="1.4s">
                                <div className="icon"><i className="ion-ios-people-outline"></i></div>
                                <h4 className="title"><a href="/#">Eiusmod Tempor</a></h4>
                                <p className="description">Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi</p>
                            </div>

                        </div>

                    </div>
                </section>

                <section id="call-to-action" className="wow fadeIn">
                    <div className="container text-center">
                        <h3>Call To Action</h3>
                        <p> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                        <a className="cta-btn" href="/#">Call To Action</a>
                    </div>
                </section>

                <section id="skills">
                    <div className="container">

                        <header className="section-header">
                            <h3>Our Skills</h3>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip</p>
                        </header>

                        <div className="skills-content">

                            <div className="progress">
                                <div className="progress-bar bg-success" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
                                    <span className="skill">HTML <i className="val">100%</i></span>
                                </div>
                            </div>

                            <div className="progress">
                                <div className="progress-bar bg-info" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100">
                                    <span className="skill">CSS <i className="val">90%</i></span>
                                </div>
                            </div>

                            <div className="progress">
                                <div className="progress-bar bg-warning" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
                                    <span className="skill">JavaScript <i className="val">75%</i></span>
                                </div>
                            </div>

                            <div className="progress">
                                <div className="progress-bar bg-danger" role="progressbar" aria-valuenow="55" aria-valuemin="0" aria-valuemax="100">
                                    <span className="skill">Photoshop <i className="val">55%</i></span>
                                </div>
                            </div>

                        </div>

                    </div>
                </section>

                <section id="facts" className="wow fadeIn">
                    <div className="container">

                        <header className="section-header">
                            <h3>Facts</h3>
                            <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque</p>
                        </header>

                        <div className="row counters">

                            <div className="col-lg-3 col-6 text-center">
                                <span data-toggle="counter-up">274</span>
                                <p>Clients</p>
                            </div>

                            <div className="col-lg-3 col-6 text-center">
                                <span data-toggle="counter-up">421</span>
                                <p>Projects</p>
                            </div>

                            <div className="col-lg-3 col-6 text-center">
                                <span data-toggle="counter-up">1,364</span>
                                <p>Hours Of Support</p>
                            </div>

                            <div className="col-lg-3 col-6 text-center">
                                <span data-toggle="counter-up">18</span>
                                <p>Hard Workers</p>
                            </div>

                        </div>

                        <div className="facts-img">
                            <img src="assets/img/facts-img.png" alt="" className="img-fluid"></img>
                        </div>

                    </div>
                </section>


            </main>
        </React.Fragment>
    );
  }
}

export default Services;