<!doctype html>
<html lang="zxx">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Event Handler">
    <meta name="author" content="3F Resources">
    <title>MyEvent - 3F Resources.com</title>
    <!-- Google fonts -->
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,700" rel="stylesheet">
    <!-- CSS Files -->
    <link href="css/bootstrap.min.css" rel="stylesheet" />
    <link href="css/font-awesome.min.css" rel="stylesheet" />
    <link href="css/material-kit.css" rel="stylesheet" />
    <link href="css/owl.carousel.css" rel="stylesheet" />
    <link href="css/style.css" rel="stylesheet" />
    <!-- favicon -->
    <link rel="icon" href="img/favicon.ico">
    <!-- Colors -->
    <link rel="stylesheet" href="css/red.css">
    <!-- Skin switcher -->
    <!-- Manually link your desire skin -->
   </head>

<body id="up">
    <!-- Preloader -->
    <div id="preloader">
        <div class="spinner"></div>
    </div>
    <!-- Page hero -->
    <div class="" id="headers">
        <!--  Header -->
        <div class="header">
            <nav id="sticky-nav" class="navbar navbar-custom sticky navbar-center">
                <div class="container">
                    <!-- Brand and toggle get grouped for better mobile display -->
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navigation-example">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="" href="#up">
                            <img src="img/logo.png" alt="logo" class="img-responsive navbar-brand">
                        </a>
                    </div>
                    <div class="collapse navbar-collapse" id="navigation-example">
                        <ul class="nav navbar-nav navbar-right">
                            <li>
                                <a href="#about">About</a>
                            </li>
                            <li>
                                <a href="#services">Services</a>
                            </li>
                            <li>
                                <a href="#price">Price</a>
                            </li>
                            <li>
                                <a href="#team">Team</a>
                            </li>
                            <li>
                                <a href="#clients">Clients</a>
                            </li>
                            <li>
                                <a href="#blog">Blog</a>
                            </li>
                            <li>
                                <a href="#contact">Contact</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>
            <div id="home" class="page-hero">
                <div class="container">
                    <div class="row">
                        <div class="col-md-6 col-md-offset-0 col-sm-8 col-sm-offset-2 home-text">
                            <h1 class="title">Welcome to MyEvent</h1>
                            <p class="up-type-title"> We Are <span class="animated-text" id="animated-text"></span></p>
                            <p class="p-details">
                                You have a closed event to handle ? Let Us Help You!!
                            </p>
                            <div class="header-app-icons">
                                <ul>
                                    <li><a href="#link" class="btn"><i class="fa fa-facebook"></i></a></li>
                                    <li><a href="#link" class="btn"><i class="fa fa-twitter"></i></a></li>
                                    <li><a href="#link" class="btn"><i class="fa fa-linkedin"></i></a></li>
                                    <li><a href="#link" class="btn"><i class="fa fa-instagram"></i></a></li>
                                </ul>
                            </div>
                           <!-- <a href="#btn" class="btn btn-info btn-md">
                                <i class="fa fa-paper-plane-o"></i> Start Now
                            </a>
                            <a href="#btn" class="btn btn-success btn-md">
                                <i class="fa fa-bolt"></i> Sign up
                            </a> -->
                        </div>
                        <div class="col-md-5 text-center">
                            <img src="img/header-img.png" alt="header image" class="header-img img-responsive">
                        </div>
                    </div>
                 <div id="particles-js"></div>
                </div>
            </div>
        </div>
        <!-- End Header -->
    </div>
    <!-- About -->
    <section class="section" id="about">
        <div class="container">
            <div class="section-heading text-center wow fadeInUp">
                <h2 class="title">About us</h2>
                <h5 class="description">MyEvent is a website that can handle your event miscellaneously</h5>
            </div>
            <!-- first row -->
            <div class="row">
                <div class="col-md-4 wow fadeInUp">
                    <div class="info info-horizontal">
                        <div class="icon icon-info">
                            <i class="fa fa-envelope "></i>
                        </div>
                        <div class="description">
                            <h4 class="info-title">Invitation Email</h4>
                            <p>
                                Its easy, using MyEvent, you can key in your guess and we will send them invitation email
                            </p>
                          
                        </div>
                    </div>
                </div>
                <div class="col-md-4 wow fadeInUp">
                    <div class="info info-horizontal">
                        <div class="icon icon-danger">
                            <i class="fa fa-shield"></i>
                        </div>
                        <div class="description">
                            <h4 class="info-title">Secure</h4>
                            <p>
                                Yup, your event details is only accessable by your invited guess by having them to key in a unique InviCode
                            </p>
                            
                        </div>
                    </div>
                </div>
                <div class="col-md-4 wow fadeInUp">
                    <div class="info info-horizontal">
                        <div class="icon icon-success">
                            <i class="fa fa-cubes"></i>
                        </div>
                        <div class="description">
                            <h4 class="info-title">Having your own Event Page</h4>
                            <p>
                                We let you to put as much as possible your event information including the schedules
                            </p>
                            
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <img src="img/about-img.png" alt="" class="img-responsive">
            </div>
            <!-- End first row -->
        </div>
    </section>
    <!-- End about -->
    <!-- services -->
    <section class="section services bg-gray" id="services">
        <div class="container">
            <div class="section-heading text-center wow fadeInUp">
                <h2 class="title text-center">Amazing Services</h2>
                <ul class="nav nav-pills nav-pills-primary">
                    <li class="active"><a href="#web-design" data-toggle="tab">Fast And Secure</a></li>
                    <li><a href="#web-dev" data-toggle="tab">Mobile Responsive</a></li>
                    <li><a href="#desktop" data-toggle="tab">24/7 Support</a></li>
                </ul>
                <br>
            </div>
            <div>
                <div class="tab-content tab-space">
                    <!-- tab web-design -->
                    <div class="tab-pane active" id="web-design">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="img-container">
                                    <img src="img/web-design.png" alt="Feature image" class="feature-img img-responsive" />
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="info info-horizontal">
                                    <div class="icon icon-primary">
                                        <i class="fa fa-desktop"></i>
                                    </div>
                                    <div class="description">
                                        <h4 class="info-title">Responsive Design</h4>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate hic odit nisi quo excepturi laudantium?</p>
                                    </div>
                                </div>
                                <div class="info info-horizontal">
                                    <div class="icon icon-primary">
                                        <i class="fa fa-diamond"></i>
                                    </div>
                                    <div class="description">
                                        <h4 class="info-title">Multi-purpose</h4>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus reiciendis unde atque voluptate commodi saepe!</p>
                                    </div>
                                </div>
                                <div class="info info-horizontal">
                                    <div class="icon icon-primary">
                                        <i class="fa fa-trophy"></i>
                                    </div>
                                    <div class="description">
                                        <h4 class="info-title">High Quality</h4>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae dolor dolorem animi officiis quisquam quia.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- end tab mobile -->
                    <!-- tab web-dev -->
                    <div class="tab-pane" id="web-dev">
                        <div class="row">
                            <div class="col-md-5 col-md-offset-1">
                                <div class="img-container">
                                    <img src="img/web-dev.png" alt="Feature image" class="feature-img img-responsive" />
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="info info-horizontal">
                                    <div class="icon icon-primary">
                                        <i class="fa fa-code"></i>
                                    </div>
                                    <div class="description">
                                        <h4 class="info-title">Well Coded</h4>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate hic odit nisi quo excepturi laudantium?</p>
                                    </div>
                                </div>
                                <div class="info info-horizontal">
                                    <div class="icon icon-primary">
                                        <i class="fa fa-gears"></i>
                                    </div>
                                    <div class="description">
                                        <h4 class="info-title">PHP Application</h4>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate hic odit nisi quo excepturi laudantium?</p>
                                    </div>
                                </div>
                                <div class="info info-horizontal">
                                    <div class="icon icon-primary">
                                        <i class="fa fa-laptop"></i>
                                    </div>
                                    <div class="description">
                                        <h4 class="info-title">SAAS Application</h4>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus reiciendis unde atque voluptate commodi saepe!</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- end tab tablet -->
                    <!-- tab desktop -->
                    <div class="tab-pane" id="desktop">
                        <div class="row">
                            <div class="col-md-5 col-md-offset-1">
                                <div class="img-container">
                                    <img src="img/mac-app.png" alt="Feature image" class="feature-img img-responsive" />
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="info info-horizontal">
                                    <div class="icon icon-primary">
                                        <i class="fa fa-desktop"></i>
                                    </div>
                                    <div class="description">
                                        <h4 class="info-title">Desktop App</h4>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate hic odit nisi quo excepturi laudantium?</p>
                                    </div>
                                </div>
                                <div class="info info-horizontal">
                                    <div class="icon icon-primary">
                                        <i class="fa fa-heart-o"></i>
                                    </div>
                                    <div class="description">
                                        <h4 class="info-title">Mac App</h4>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus reiciendis unde atque voluptate commodi saepe!</p>
                                    </div>
                                </div>
                                <div class="info info-horizontal">
                                    <div class="icon icon-primary">
                                        <i class="fa fa-code"></i>
                                    </div>
                                    <div class="description">
                                        <h4 class="info-title">Code Quality</h4>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae dolor dolorem animi officiis quisquam quia.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- end tab desktop -->
                </div>
            </div>
        </div>
        <!-- End container -->
    </section>
    <!-- End services -->
    <!-- Price table -->
    <div class="section price-table" id="price">
        <div class="container">
            <div class="section-header text-center">
                <h2 class="title">Select Your Perfect Plan</h2>
                <h5 class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat nobis.</h5>
            </div>
            <div class="row text-center">
                <div class="col-md-4">
                    <div class="card card-pricing">
                        <div class="content">
                            <div class="header header-primary text-center">
                                <h3 class="widget-header-title">Basic</h3>
                            </div>
                            <h1 class="card-title"><small>$</small>29<small>/mo</small></h1>
                            <ul>
                                <li><b>1</b> User</li>
                                <li><b>5</b> Members</li>
                                <li><b>55</b> Private Message</li>
                                <li><i class="fa fa-times"> </i> Customer Support</li>
                            </ul>
                            <button class="btn btn-primary">
                                Get Started
                            </button>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card card-pricing ">
                        <div class="content content-primary">
                            <div class="header header-success text-center">
                                <h3 class="widget-header-title">Pro</h3>
                            </div>
                            <h1 class="card-title"><small>$</small>99<small>/mo</small></h1>
                            <ul>
                                <li><b>100</b> Users</li>
                                <li><b>50</b> Members</li>
                                <li><b>125</b> Private Message</li>
                                <li><i class="fa fa-check-square-o"> </i> Customer Support</li>
                            </ul>
                            <button class="btn btn-white">
                                Get Started
                            </button>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card card-pricing">
                        <div class="content">
                            <div class="header header-danger text-center">
                                <h3 class="widget-header-title">Ultimate</h3>
                            </div>
                            <h1 class="card-title"><small>$</small>299<small>/mo</small></h1>
                            <ul>
                                <li><b>1000</b> Users</li>
                                <li><b>100</b> Members</li>
                                <li><b>550</b> Private Message</li>
                                <li><i class="fa fa-check-square-o"> </i> Customer Support</li>
                            </ul>
                            <button class="btn btn-primary">
                                Get Started
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- End price table -->
    <!-- Team -->
    <section class="section bg-gray" id="team">
        <div class="team">
            <div class="container">
                <div class="row">
                    <div class="col-md-8 col-md-offset-2 text-center wow fadeInUp">
                        <h2 class="title">Our Success Story</h2>
                        <h5 class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta molestiae minima pariatur voluptatum ipsum?</h5>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-4">
                        <div class="card card-profile card-plain">
                            <div class="card-avatar">
                                <a href="#link">
                                    <img class="img" src="img/team/1.jpg" alt="team" />
                                </a>
                            </div>
                            <div class="content">
                                <h4 class="card-title">Chang lee</h4>
                                <h6 class="category text-muted">CEO / Co-Founder</h6>
                                <p class="card-description">
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus, cupiditate.
                                </p>
                                <div class="footer">
                                    <a href="#link" class="btn btn-just-icon btn-facebook btn-round">
                                        <i class="fa fa-facebook"></i>
                                    </a>
                                    <a href="#link" class="btn btn-just-icon btn-twitter btn-round">
                                        <i class="fa fa-twitter"></i>
                                    </a>
                                    <a href="#link" class="btn btn-just-icon btn-linkedin btn-round">
                                        <i class="fa fa-linkedin"></i>
                                    </a>
                                    <a href="#link" class="btn btn-just-icon btn-dribbble btn-round">
                                        <i class="fa fa-dribbble"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card card-profile card-plain">
                            <div class="card-avatar">
                                <a href="#link">
                                    <img class="img" src="img/team/2.jpg" alt="team" />
                                </a>
                            </div>
                            <div class="content">
                                <h4 class="card-title">George F</h4>
                                <h6 class="category text-muted">Web Developer</h6>
                                <p class="card-description">
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, consequatur.
                                </p>
                                <div class="footer">
                                    <a href="#link" class="btn btn-just-icon btn-facebook btn-round">
                                        <i class="fa fa-facebook"></i>
                                    </a>
                                    <a href="#link" class="btn btn-just-icon btn-twitter btn-round">
                                        <i class="fa fa-twitter"></i>
                                    </a>
                                    <a href="#link" class="btn btn-just-icon btn-linkedin btn-round">
                                        <i class="fa fa-linkedin"></i>
                                    </a>
                                    <a href="#link" class="btn btn-just-icon btn-dribbble btn-round">
                                        <i class="fa fa-dribbble"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card card-profile card-plain">
                            <div class="card-avatar">
                                <a href="#link">
                                    <img class="img" src="img/team/3.jpg" alt="team" />
                                </a>
                            </div>
                            <div class="content">
                                <h4 class="card-title">Khan Jee</h4>
                                <h6 class="category text-muted">Web Designer</h6>
                                <p class="card-description">
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto, tenetur!
                                </p>
                                <div class="footer">
                                    <a href="#link" class="btn btn-just-icon btn-facebook btn-round">
                                        <i class="fa fa-facebook"></i>
                                    </a>
                                    <a href="#link" class="btn btn-just-icon btn-twitter btn-round">
                                        <i class="fa fa-twitter"></i>
                                    </a>
                                    <a href="#link" class="btn btn-just-icon btn-linkedin btn-round">
                                        <i class="fa fa-linkedin"></i>
                                    </a>
                                    <a href="#link" class="btn btn-just-icon btn-dribbble btn-round">
                                        <i class="fa fa-dribbble"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- End team -->
    <!-- Clients -->
    <section id="clients" class="section clients">
        <div class="container">
            <div class="section-heading text-center">
                <h2 class="title">Trusted by Some Amazing People</h2>
                <h5 class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio blanditiis similique deleniti qui error in.</h5>
            </div>
            <div class="clients-logo" id="clients-logo">
                <div class="slider" id="slider">
                    <div class="clients-content">
                        <a href="#"><img src="img/support/logo1.png" alt=""></a>
                    </div>
                    <div class="clients-content">
                        <a href="#"> <img src="img/support/logo2.png" alt=""></a>
                    </div>
                    <div class="clients-content">
                        <a href="#"> <img src="img/support/logo3.png" alt=""></a>
                    </div>
                    <div class="clients-content">
                        <a href="#"> <img src="img/support/logo4.png" alt=""></a>
                    </div>
                    <div class="clients-content">
                        <a href="#"><img src="img/support/logo5.png" alt=""></a>
                    </div>
                    <div class="clients-content">
                        <a href="#"> <img src="img/support/logo1.png" alt=""></a>
                    </div>
                    <div class="clients-content">
                        <a href="#"> <img src="img/support/logo2.png" alt=""></a>
                    </div>
                    <div class="clients-content">
                        <a href="#"> <img src="img/support/logo3.png" alt=""></a>
                    </div>
                    <div class="clients-content">
                        <a href="#"> <img src="img/support/logo4.png" alt=""></a>
                    </div>
                    <div class="clients-content">
                        <a href="#"> <img src="img/support/logo5.png" alt=""></a>
                    </div>
                    <div class="clients-content">
                        <a href="#"> <img src="img/support/logo1.png" alt=""></a>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-5 clients-text">
                    <h2>What Our Customers Says</h2>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta reprehenderit, nisi similique deserunt asperiores error.
                    </p>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam quod, possimus quasi voluptatem vero porro eos architecto minus cupiditate eum.
                    </p>
                </div>
                <div class="col-md-6 col-md-offset-1">
                    <div class="owl-carousel" id="owl-carousel">
                        <!-- single review -->
                        <div class="single-review text-center">
                            <img src="img/clients/1.png" alt="" class="img-circle">
                            <div class="review_content">
                                <blockquote>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis ullam nemo, itaque excepturi suscipit unde.</blockquote>
                                <div class="review-author">Jane Deo, CEO</div>
                            </div>
                        </div>
                        <!-- //single review -->
                        <!-- single review -->
                        <div class="single-review text-center">
                            <img src="img/clients/2.png" alt="" class="img-circle">
                            <div class="review_content">
                                <blockquote>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore consequuntur, consequatur ad nesciunt nulla voluptate voluptates.</blockquote>
                                <div class="review-author">Khan Doe, Manager</div>
                            </div>
                        </div>
                        <!-- //single review -->
                        <!-- single review -->
                        <div class="single-review text-center">
                            <img src="img/clients/3.png" alt="" class="img-circle">
                            <div class="review_content">
                                <blockquote>
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore odit voluptates vero ea, sint! Eligendi?
                                </blockquote>
                                <div class="review-author">Alexa, SEO Expert</div>
                            </div>
                        </div>
                        <!-- //single review -->
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- End clients -->
    <!-- Blog news -->
    <section class="blog" id="blog">
        <div class="container">
            <div class="section-header text-center">
                <h2 class="title">Latest Blog</h2>
                <h5 class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. </h5>
            </div>
            <div class="owl-carousel" id="blog-carousel">
                <div class="item">
                    <div class="card card-blog">
                        <div class="card-image">
                            <a href="blog-single.html">
                                <img class="img img-raised img-responsive" src="img/blog/blog1.jpg" alt="img" />
                            </a>
                        </div>
                        <div class="content">
                            <h6 class="category text-info">Technology</h6>
                            <p> <i class="fa fa-clock-o"></i> 27 September 2016</p>
                            <h4 class="card-title">
                                    <a href="blog-single.html">Apple's latest iPhones: USB-C ya later, for now</a>
                                </h4>
                            <p class="card-description">
                                A few hours before the Apple event, I made a bet with a coworker: I think this new iPhone is going.<a href="blog-single.html"> Read More </a>
                            </p>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div class="card card-blog">
                        <div class="card-image">
                            <a href="blog-single.html">
                                <img class="img img-raised img-responsive" src="img/blog/blog2.jpg" alt="img" />
                            </a>
                        </div>
                        <div class="content">
                            <h6 class="category text-success">
                                    Startups
                            </h6>
                            <p> <i class="fa fa-clock-o"></i> 20 September 2016</p>
                            <h4 class="card-title">
                                    <a href="blog-single.html">Facing your fears with Virtual Reality</a>
                            </h4>
                            <p class="card-description">
                                Fear isn’t always such a bad thing. It is, after all, a self-preservation response programmed into our DNA that can be useful in keeping us out of harm’s way.<a href="blog-single.html"> Read More </a>
                            </p>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div class="card card-blog">
                        <div class="card-image">
                            <a href="blog-single.html">
                                <img class="img img-raised img-responsive" src="img/blog/blog3.jpg" alt="img" />
                            </a>
                        </div>
                        <div class="content">
                            <h6 class="category text-danger">
                                    Marketing
                            </h6>
                            <p> <i class="fa fa-clock-o"></i> 18 September 2016</p>
                            <h4 class="card-title">
                                    <a href="blog-single.html">Teaching machines to predict the future</a>
                            </h4>
                            <p class="card-description">
                                Our ability to anticipate actions is thanks to intuitions born out of a lifetime of experiences.<a href="blog-single.html"> Read More </a>
                            </p>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div class="card card-blog">
                        <div class="card-image">
                            <a href="blog-single.html">
                                <img class="img img-raised img-responsive" src="img/blog/blog4.jpg" alt="img" />
                            </a>
                        </div>
                        <div class="content">
                            <h6 class="category text-info">Technology</h6>
                            <p> <i class="fa fa-clock-o"></i> 27 September 2016</p>
                            <h4 class="card-title">
                                    <a href="blog-single.html">Feds will formally recall Samsung Galaxy Note 7</a>
                                </h4>
                            <p class="card-description">
                                Like so many organizations these days, Autodesk is a company in transition. It was until recently a traditional boxed software company.<a href="blog-single.html"> Read More </a>
                            </p>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div class="card card-blog">
                        <div class="card-image">
                            <a href="blog-single.html">
                                <img class="img img-raised img-responsive" src="img/blog/blog5.jpg" alt="img" />
                            </a>
                        </div>
                        <div class="content">
                            <h6 class="category text-success">SEO</h6>
                            <p> <i class="fa fa-clock-o"></i> 26 September 2016</p>
                            <h4 class="card-title">
                                    <a href="blog-single.html">5 SEO secrets you’ll be surprised you didn’t know​</a>
                                </h4>
                            <p class="card-description">
                                Getting your site to rank in Google can be a tough slog. It requires knowledge of current ranking factors, as well as the time and ability to optimize<a href="blog-single.html"> Read More </a>
                            </p>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div class="card card-blog">
                        <div class="card-image">
                            <a href="blog-single.html">
                                <img class="img img-raised img-responsive" src="img/blog/blog6.jpg" alt="img" />
                            </a>
                        </div>
                        <div class="content">
                            <h6 class="category text-danger">Typhography</h6>
                            <p> <i class="fa fa-clock-o"></i>15 September 2016</p>
                            <h4 class="card-title">
                                    <a href="blog-single.html">Styles come and go. Good design is a language, not a style.</a>
                            </h4>
                            <p class="card-description">
                                Creativity is to discover a question that has never been asked. If one brings up an idiosyncratic question, the answer he gives will<a href="blog-single.html"> Read More </a>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- End Blog news -->
    <!-- Contact -->
    <section class="section section-image" id="contact">
        <div class="contact-us">
            <div class="container">
                <div class="row">
                    <div class="col-md-5">
                        <h2 class="title">Get in Touch</h2>
                        <p class="details">
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum sit maxime numquam perferendis, deleniti, unde corporis nisi quia iste eum!
                        </p>
                        <div class="row">
                            <div class="col col-sm-6 col-sm-offset-0 col-xs-11 col-xs-offset-1 col-md-12">
                                <div class="info info-horizontal">
                                    <div class="icon icon-primary">
                                        <i class="fa fa-map-marker"></i>
                                    </div>
                                    <div class="description">
                                        <h4 class="info-title">Find our office</h4>
                                        <p>
                                            PO Box 16122,
                                            <br> Collins Street West,
                                            <br> Victoria 8007, Australia
                                        </p>
                                    </div>
                                </div>                            
                            </div>
                            <div class="col col-sm-6 col-sm-offset-0 col-xs-11 col-xs-offset-1 col-md-12">
                                <div class="info info-horizontal">
                                    <div class="icon icon-primary">
                                        <i class="fa fa-phone"></i>
                                    </div>
                                    <div class="description">
                                        <h4 class="info-title">Contact us</h4>
                                        <p> Jane Deo
                                            <br> 1-123-456-7890
                                            <br> office@xyz.com
                                        </p>
                                    </div>
                                </div>                            
                            </div>
                            
                        </div>


                    </div>
                    <div class="col-md-5 col-md-offset-2">
                        <div class="card card-contact">
                            <form id="contactForm" method="post" novalidate>
                                <div class="header header-raised header-primary text-center">
                                    <h4 class="card-title">Contact Us</h4>
                                </div>
                                <div class="card-layer"></div>
                                <div class="content">
                                    <div id="success"></div>
                                    <div class="form-group label-floating">
                                        <label class="control-label">First name <i class="help-block text-danger"></i></label>
                                        <input type="text" name="name" id="name" class="form-control" required data-validation-required-message="Please enter your name.">
                                    </div>
                                    <div class="form-group label-floating">
                                        <label class="control-label">Email address <i class="help-block text-danger"></i></label>
                                        <input type="email" name="email" id="email" class="form-control" required data-validation-required-message="Please enter your email address." />
                                    </div>
                                    <div class="form-group label-floating">
                                        <label class="control-label">Your message <i class="help-block text-danger"></i></label>
                                        <textarea name="message" class="form-control" rows="6" id="message" required data-validation-required-message="Please enter a message."></textarea>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="checkbox">
                                                <label>
                                                    <input type="checkbox" name="optionsCheckboxes"> I'm not a robot
                                                </label>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <button type="submit" class="btn btn-primary pull-right">Send Message</button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- End contact -->
    <!-- Subscribe -->
    <div class="subscribe bg-primary">
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <h3 class="title">Subscribte to our news letter</h3>
                </div>
                <div class="col-md-6 text-right">
                    <form method="post" id="subscribe">
                        <div class="row">
                            <div class="col-sm-8">
                                <div class="input-group">
                                    <span class="input-group-addon">
                                                <i class="fa fa-envelope"></i>
                                            </span>
                                    <div class="form-group is-empty">
                                        <input type="email" value="" placeholder="Your Email..." class="form-control"><span class="material-input"></span></div>
                                </div>
                            </div>
                            <div class="col-sm-4">
                                <button type="button" class="btn btn-info">Subscribe</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!-- End subscribe -->
    <!-- Footer -->
    <footer class="footer section">
        <div class="container footer-widget">
            <div class="row">
                <div class="col col-sm-3">
                    <a href="#"><img src="img/logo.png" alt="Company logo" class="footer-logo img-responsive"></a>
                    <div class="social">
                        <a href="#social"><i class="fa fa-facebook"></i></a>
                        <a href="#social"><i class="fa fa-twitter"></i></a>
                        <a href="#social"><i class="fa fa-google-plus"></i></a>
                        <a href="#social"><i class="fa fa-youtube-play"></i></a>
                        <a href="#social"><i class="fa fa-instagram"></i></a>
                    </div>
                    <!-- /Social -->
                    <hr class="up-hr">
                    <a class="btn btn-primary light btn-sm" href="#link">Download now</a>
                </div>
                <div class="col col-sm-3">
                    <h6 class="typo-light hd">Product</h6>
                    <ul class="list-1">
                        <li><a href="#link">Services</a></li>
                        <li><a href="#link">Support</a></li>
                        <li><a href="#link">Help</a></li>
                        <li><a href="#link">Plan and Pricing</a></li>
                    </ul>
                </div>
                <div class="col col-sm-3">
                    <h6 class="typo-light hd">Link</h6>
                    <ul class="list-1">
                        <li><a href="#link">Blog</a></li>
                        <li><a href="#link">About us</a></li>
                        <li><a href="#link">Privacy</a></li>
                        <li><a href="#link">Term and Condition</a></li>
                    </ul>
                </div>
                <div class="col col-sm-3">
                    <div class="newsletter">
                        <h6 class="typo-light">Newsletter</h6>
                        <p>Sign up for the latest news &amp; offers.</p>
                        <div id="subscribe-success"></div>
                        <form class="form-widget subscribe-form" id="subscribe-form">
                            <div class="field-group">
                                <input type="email" class="form-control" placeholder="Enter Your Email">
                                <button type="submit" id="submit" class="btn footer-btn btn-primary"><i class="fa fa-envelope-o"></i></button>
                            </div>
                            <div class="msg-wrp"></div>
                        </form>
                        <!-- /form -->
                    </div>
                </div>
            </div>
            <hr>
            <p class="copyright">Built with <i class="fa fa-heart"></i> by Bighero 2016</p>
        </div>
    </footer>
    <!-- ./Footer section -->
    <!-- End footer -->
    <!--   Core JS Files   -->
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <script src="js/bootstrap.min.js" type="text/javascript"></script>
    <script src="js/material.min.js"></script>
    <!-- Jquery easing -->
    <script type="text/javascript" src="js/jquery.easing.1.3.min.js"></script>
    <!-- Plugin For Google Maps -->
    <!-- Typing text -->
    <script src="js/typed.min.js" type="text/javascript"></script>
    <!-- sticky -->
    <script src="js/jquery.sticky.js" type="text/javascript"></script>
    <!-- owl  carousel -->
    <script src="js/owl.carousel.min.js" type="text/javascript"></script>
    <!-- contact form -->
    <script type="text/javascript" src="js/jqBootstrapValidation.js"></script>
    <!-- <script src="js/modernizr.js" type="text/javascript"></script> -->
        <!-- Partilce js -->
    <script type="text/javascript" src="js/particles.js"></script>
    <!-- main scripts -->
    <script src="js/main.js" type="text/javascript"></script>
    <!-- Color Switcher -->
   
    <!-- END Skin switcher -->
</body>

</html>
