index-4.html

<!doctype html>
<html class="no-js" lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title>Jowel | Personal Portfolio</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- favicon -->		
        <link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico">
		<!-- all css here -->		
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <!--All css plugin here-->
        <link rel="stylesheet" href="css/include.css">
        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/main.css">
        <link rel="stylesheet" href="style.css">
        <link rel="stylesheet" href="css/responsive.css">		
        <script src="js/vendor/modernizr-2.8.3.min.js"></script>
    </head>
    <body>
        <!--[if lt IE 8]>
            You are using an outdated browser. Please <a href="http://browsehappy.com/">upgrade your browser</a>
        <![endif]-->
        
        <!--Preloader-->
        <div id="fakeLoader"></div>
        
        <!-- Add your site or application content here -->
        <div class="wrapper">  
            <header class="header-area header-sticky">
                <div class="header-area-inner">
                    <div class="header-top">
                        <div class="container">
                            <div class="row">
                                <div class="col-md-3">
                                    <div class="logo">
                                        <a href="index-4.html"><img src="img/logo/logo.png" alt=""></a>
                                    </div>
                                </div>
                                <div class="col-md-9">
                                    <div class="hire-me-btn hidden-sm hidden-xs">
                                        <a href="#" class="modal-view" data-toggle="modal" data-target="#hireModal">hire me</a>
                                    </div>
                                    <div class="hire-me-btn hidden-lg hidden-md">
                                        <a href="#" class="modal-view" data-toggle="modal" data-target="#hireModal"><i class="fa fa-user-plus"></i></a>
                                    </div>
                                    <div class="main-menu navbar-collapse hidden-sm hidden-xs">
                                        <ul class="nav">
                                            <li class="active smoth-scroll"><a href="#home">home</a></li>
                                            <li class="smoth-scroll"><a href="#about">about</a></li>
                                            <li class="smoth-scroll"><a href="#service">service</a></li>
                                            <li class="smoth-scroll"><a href="#works">works</a></li>
                                            <li class="smoth-scroll"><a href="#reviews">reviews</a></li>
                                            <li class="smoth-scroll"><a href="#blog">blog</a></li>
                                            <li class="smoth-scroll"><a href="#contact">contact</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Mobile menu start -->
                    <div class="mobile-menu-area hidden-lg hidden-md">
                        <div class="container">
                            <div class="col-md-12">
                                <nav id="dropdown">
                                    <ul class="nav">
                                        <li class="active smoth-scroll"><a href="#home">home</a></li>
                                        <li class="smoth-scroll"><a href="#about">about</a></li>
                                        <li class="smoth-scroll"><a href="#service">service</a></li>
                                        <li class="smoth-scroll"><a href="#works">works</a></li>
                                        <li class="smoth-scroll"><a href="#reviews">reviews</a></li>
                                        <li class="smoth-scroll"><a href="#blog">blog</a></li>
                                        <li class="smoth-scroll"><a href="#contact">contact</a></li>
                                    </ul>
                                </nav>
                            </div>
                        </div>
                    </div>
                    <!-- Mobile menu end -->
                </div>
            </header>
            <!-- slider-area start -->
            <div id="home" class="slider-area youtube-bg dotted-overlay">
                <div class="slider-table">
                <div class="slider-table-call">
                   <div class="container">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="slider-contand text-center">
                                    <h3 class="wow fadeInDownBig" data-wow-delay="0.3s">Hello, This is jowel</h3>
                                    <h1 class="cd-headline clip wow fadeInLeft" data-wow-delay="0.2s">
                                        a professional 
                                        <span class="cd-words-wrapper">
                                            <b class="is-visible">Designer</b>
                                            <b>Designer</b>
                                            <b>Developer</b>
                                        </span>
                                    </h1>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                                    <div class="work-bnt smoth-scroll">
                                        <a href="#works">See My Work</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            </div>
            <!-- slider-area end --> 
            <!-- about-area start -->
            <div id="about" class="about-area">
                <div class="container">
                    <div class="row">
                        <div class="col-sm-5 col-md-4 wow fadeInLeft" data-wow-delay="0.2s">
                            <div class="about-image">
                                <img src="img/author02.jpg" alt="">
                            </div>
                        </div>
                        <div class="col-sm-7 col-md-8 wow fadeInRight" data-wow-delay="0.2s">
                            <div class="about-info">
                                <h2>Hello, about me!</h2>
                                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s</p>
                                <p class="about-p">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book</p>
                                <div class="socile-icon">
                                    <a href="#"><i class="fa fa-facebook"></i></a>
                                    <a href="#"><i class="fa fa-twitter"></i></a>
                                    <a href="#"><i class="fa fa-google-plus"></i></a>
                                    <a href="#"><i class="fa fa-linkedin"></i></a>
                                    <a href="#"><i class="fa fa-pinterest"></i></a>
                                    <a href="#"><i class="fa fa-youtube-play"></i></a>
                                </div>
                                <div class="resume-btn">
                                    <a href="#" class="theme-btn-c"><i class="fa fa-download"></i> download resume</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- about-area end -->
            <!-- service-area start-->
            <div id="service" class="service-area">
                <div class="container">
                    <div class="row">
                        <div class="col-md-8 col-md-offset-2">
                           <div class="header-title text-center white-c">
                               <h2>my servive</h2>
                               <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration, ut labore et lorna aliquatd minimam, quis nostrud exercitation.</p>
                           </div>
                        </div>
                        <div class="col-sm-4 col-md-4">
                            <div class="single-service text-center">
                                <div class="service-icon">
                                    <i class="fa fa-paint-brush"></i>
                                </div>
                                <h3>Graphic Design</h3>
                                <p>There are many variations of passages of Lorem Ipsum available, but the majority</p>
                            </div>
                        </div>
                        <div class="col-sm-4 col-md-4">
                            <div class="single-service text-center">
                                <div class="service-icon">
                                    <i class="fa fa-desktop"></i>
                                </div>
                                <h3>Web Design</h3>
                                <p>There are many variations of passages of Lorem Ipsum available, but the majority</p>
                            </div>
                        </div>
                        <div class="col-sm-4 col-md-4">
                            <div class="single-service text-center">
                                <div class="service-icon">
                                    <i class="fa fa-diamond"></i>
                                </div>
                                <h3>Internet Marketing</h3>
                                <p>There are many variations of passages of Lorem Ipsum available, but the majority</p>
                            </div>
                        </div>
                        <div class="col-sm-4 col-md-4">
                            <div class="single-service text-center">
                                <div class="service-icon">
                                    <i class="fa fa-wordpress"></i>
                                </div>
                                <h3>WordPress Development</h3>
                                <p>There are many variations of passages of Lorem Ipsum available, but the majority</p>
                            </div>
                        </div>
                        <div class="col-sm-4 col-md-4">
                            <div class="single-service text-center">
                                <div class="service-icon">
                                    <i class="fa fa-joomla"></i>
                                </div>
                                <h3>Joomla Development</h3>
                                <p>There are many variations of passages of Lorem Ipsum available, but the majority</p>
                            </div>
                        </div>
                        <div class="col-sm-4 col-md-4">
                            <div class="single-service text-center">
                                <div class="service-icon">
                                    <i class="fa fa-code"></i>
                                </div>
                                <h3>Development</h3>
                                <p>There are many variations of passages of Lorem Ipsum available, but the majority</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- service-area end-->
            <!-- portfolio-area start -->
            <div id="works" class="portfolio-area">
                <div class="container">
                    <div class="row">
                        <div class="col-md-8 col-md-offset-2">
                           <div class="header-title text-center blick-c">
                               <h2>portfolio</h2>
                               <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration, ut labore et lorna aliquatd minimam, quis nostrud exercitation.</p>
                           </div>
                           <div class="mixitup-menu text-center">
                               <ul>
                                   <li class="filter active" data-filter="all">all</li>
                                   <li class="filter" data-filter=".web-design">web design</li>
                                   <li class="filter" data-filter=".Photography">Photography</li>
                                   <li class="filter" data-filter=".Fashion">Fashion</li>
                               </ul>
                           </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="mixitup-content">
                            <div class="mixitup-work">
                                <div class="col-sm-6 col-md-4 mix web-design">
                                    <div class="single-portfolio">
                                        <div class="protfolio-img">
                                            <img src="img/portfolio/portfolio-01.jpg" alt="">
                                        </div>
                                        <div class="protfolio-desc">
                                            <div class="protfolio-icon">
                                                <a href="img/portfolio/portfolio-01.jpg"><i class="zmdi zmdi-plus"></i> </a>
                                            </div>
                                            <div class="profolio-text">
                                                <h2>Awesome Work</h2>
                                                <p>Landing page</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-6 col-md-4 mix Photography">
                                    <div class="single-portfolio">
                                        <div class="protfolio-img">
                                            <img src="img/portfolio/portfolio-02.jpg" alt="">
                                        </div>
                                        <div class="protfolio-desc">
                                            <div class="protfolio-icon">
                                                <a href="img/portfolio/portfolio-02.jpg"><i class="zmdi zmdi-plus"></i> </a>
                                            </div>
                                            <div class="profolio-text">
                                                <h2>Awesome Work</h2>
                                                <p>Landing page</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-6 col-md-4 mix web-design Photography Fashion">
                                    <div class="single-portfolio">
                                        <div class="protfolio-img">
                                            <img src="img/portfolio/portfolio-03.jpg" alt="">
                                        </div>
                                        <div class="protfolio-desc">
                                            <div class="protfolio-icon">
                                                <a href="img/portfolio/portfolio-03.jpg"><i class="zmdi zmdi-plus"></i> </a>
                                            </div>
                                            <div class="profolio-text">
                                                <h2>Awesome Work</h2>
                                                <p>Landing page</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-6 col-md-4 mix web-design Fashion">
                                    <div class="single-portfolio">
                                        <div class="protfolio-img">
                                            <img src="img/portfolio/portfolio-04.jpg" alt="">
                                        </div>
                                        <div class="protfolio-desc">
                                            <div class="protfolio-icon">
                                                <a href="img/portfolio/portfolio-04.jpg"><i class="zmdi zmdi-plus"></i> </a>
                                            </div>
                                            <div class="profolio-text">
                                                <h2>Awesome Work</h2>
                                                <p>Landing page</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-6 col-md-4 mix Photography">
                                    <div class="single-portfolio">
                                        <div class="protfolio-img">
                                            <img src="img/portfolio/portfolio-05.jpg" alt="">
                                        </div>
                                        <div class="protfolio-desc">
                                            <div class="protfolio-icon">
                                                <a href="img/portfolio/portfolio-05.jpg"><i class="zmdi zmdi-plus"></i> </a>
                                            </div>
                                            <div class="profolio-text">
                                                <h2>Awesome Work</h2>
                                                <p>Landing page</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-6 col-md-4 mix web-design Photography Fashion">
                                    <div class="single-portfolio">
                                        <div class="protfolio-img">
                                            <img src="img/portfolio/portfolio-06.jpg" alt="">
                                        </div>
                                        <div class="protfolio-desc">
                                            <div class="protfolio-icon">
                                                <a href="img/portfolio/portfolio-06.jpg"><i class="zmdi zmdi-plus"></i> </a>
                                            </div>
                                            <div class="profolio-text">
                                                <h2>Awesome Work</h2>
                                                <p>Landing page</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- portfolio-area end -->
            <!-- clients-reviews-area start -->
            <div id="reviews" class="clients-reviews-area clients-bg">
                <div class="bg-overlay"></div>
                <div class="container">
                    <div class="row">
                        <div class="col-md-8 col-md-offset-2">
                           <div class="header-title text-center">
                               <h2>reviews</h2>
                               <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration, ut labore et lorna aliquatd minimam, quis nostrud exercitation.</p>
                           </div>
                        </div>
                        <div class="review-carousel">
                            <div class=" col-sm-12 col-md-8 col-md-offset-2">
                                <div class="review-info text-center">
                                    <div class="review-ptn">
                                        <div class="team-image">
                                            <img src="img/3.jpg" alt="">
                                        </div>
                                        <div class="team-details">
                                            <h3> john don</h3>
                                            <div class="team-coment">
                                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem ducimus ex magni sunt, architecto vel dolore, laudantium dignissimos debitis optio! Exercitationem rem vitae ad voluptate totam aperiam soluta qui nemo.</p>
                                            </div>
                                            <div class="review-reating">
                                                <i class="fa fa-star"></i>
                                                <i class="fa fa-star"></i>
                                                <i class="fa fa-star"></i>
                                                <i class="fa fa-star"></i>
                                                <i class="fa fa-star-o"></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class=" col-sm-12 col-md-8 col-md-offset-2">
                                <div class="review-info text-center">
                                    <div class="review-ptn">
                                        <div class="team-image">
                                            <img src="img/3.jpg" alt="">
                                        </div>
                                        <div class="team-details">
                                            <h3> john don</h3>
                                            <div class="team-coment">
                                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem ducimus ex magni sunt, architecto vel dolore, laudantium dignissimos debitis optio! Exercitationem rem vitae ad voluptate totam aperiam soluta qui nemo.</p>
                                            </div>
                                            <div class="review-reating">
                                                <i class="fa fa-star"></i>
                                                <i class="fa fa-star"></i>
                                                <i class="fa fa-star"></i>
                                                <i class="fa fa-star"></i>
                                                <i class="fa fa-star-o"></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-12 col-md-8 col-md-offset-2">
                                <div class="review-info text-center">
                                    <div class="review-ptn">
                                        <div class="team-image">
                                            <img src="img/3.jpg" alt="">
                                        </div>
                                        <div class="team-details">
                                            <h3>John Danilo</h3>
                                            <div class="team-coment">
                                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem ducimus ex magni sunt, architecto vel dolore, laudantium dignissimos debitis optio! Exercitationem rem vitae ad voluptate totam aperiam soluta qui nemo.</p>
                                            </div>
                                            <div class="review-reating">
                                                <i class="fa fa-star"></i>
                                                <i class="fa fa-star"></i>
                                                <i class="fa fa-star"></i>
                                                <i class="fa fa-star"></i>
                                                <i class="fa fa-star-o"></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- clients-reviews area end-->
             <!-- blog-area start -->
            <div id="blog" class="blog-area">
                <div class="container">
                    <div class="row">
                       <div class="col-md-8 col-md-offset-2">
                           <div class="header-title text-center white-c">
                               <h2>our blog</h2>
                                <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration, ut labore et lorna aliquatd minimam, quis nostrud exercitation.</p>
                           </div>
                       </div>
                        <div class="col-sm-6 col-md-4">
                            <div class="single-blog wow fadeInUp" data-wow-delay="0.2s">
                                <div class="blog-top">
                                    <div class="blog-img">
                                        <a href="single-blog.html">
                                            <img src="img/blog/blog1.jpg" alt="">
                                        </a>
                                    </div>
                                    <div class="blog-info">
                                        <h3><a href="single-blog.html">Lorem ipsum dolor</a></h3>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. </p>
                                    </div>
                                </div>
                                <div class="meta-info">
                                    <span><i class="fa fa-calendar"></i> July 6, 2017</span>
                                    <span><a href="#"><i class="fa fa-comments"></i> comments</a></span>
                                    <div class="read-more">
                                        <a href="single-blog.html">Read more <i class="fa fa-long-arrow-right"></i></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-6 col-md-4">
                            <div class="single-blog wow fadeInUp" data-wow-delay="0.3s">
                                <div class="blog-top">
                                    <div class="blog-img">
                                        <a href="single-blog.html">
                                            <img src="img/blog/blog2.jpg" alt="">
                                        </a>
                                    </div>
                                    <div class="blog-info">
                                        <h3><a href="single-blog.html">Lorem ipsum dolor</a></h3>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. </p>
                                    </div>
                                </div>
                                <div class="meta-info">
                                    <span><i class="fa fa-calendar"></i> July 6, 2017</span>
                                    <span><a href="#"><i class="fa fa-comments"></i> comments</a></span>
                                    <div class="read-more">
                                        <a href="single-blog.html">Read more <i class="fa fa-long-arrow-right"></i></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4 hidden-sm">
                            <div class="single-blog wow fadeInUp" data-wow-delay="0.4s">
                                <div class="blog-top">
                                    <div class="blog-img">
                                        <a href="single-blog.html">
                                            <img src="img/blog/blog3.jpg" alt="">
                                        </a>
                                    </div>
                                    <div class="blog-info">
                                        <h3><a href="single-blog.html">Lorem ipsum dolor</a></h3>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. </p>
                                    </div>
                                </div>
                                <div class="meta-info">
                                    <span><i class="fa fa-calendar"></i> July 6, 2017</span>
                                    <span><a href="#"><i class="fa fa-comments"></i> comments</a></span>
                                    <div class="read-more">
                                        <a href="single-blog.html">Read more <i class="fa fa-long-arrow-right"></i></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- blog-area end -->
            <!-- contact-area start -->
            <div id="contact" class="contact-area">
                <div class="container">
                    <div class="row">
                       <div class="col-md-8 col-md-offset-2">
                           <div class="header-title text-center white-c">
                               <h2>contact</h2>
                               <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration, ut labore et lorna aliquatd minimam, quis nostrud exercitation.</p>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="contact-form-area">
                            <div class="contact-info">
                                <div class="col-md-6 col-sm-12 col-xs-12">
                                    <div class="contact-form">
                                        <div class="row">
                                            <form id="contact-form" action="email.php" method="post">
                                                <div class="col-md-6 col-sm-6">
                                                    <input name="name" required="required" type="text" placeholder="FirstName">
                                                </div>
                                                <div class="col-md-6 col-sm-6">
                                                    <input name="lastname" required="required" type="text" placeholder="LastName">
                                                </div>
                                                <div class="col-md-6 col-sm-6">
                                                    <input name="email" required="required" type="text" placeholder="Email">
                                                </div>
                                                <div class="col-md-6 col-sm-6">
                                                    <input name="subject" required="required" type="text" placeholder="Subject">
                                                </div>
                                                <div class="col-md-12 col-sm-12">
                                                    <textarea  name="message" placeholder="Message"></textarea>
                                                    <button type="submit">Send request</button>
                                                </div>
                                            </form>
                                            <p class="form-messege"></p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 col-sm-12 col-xs-12">
                                    <div class="google-map-area">
                                        <!--  Map Section -->
                                        <div id="contacts" class="map-area">
                                            <div id="googleMap" style="width:100%;height:330px;"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="contact-info-area fix">
                        <div class="col-sm-4 col-md-4">
                            <div class="single-socal-contact">
                                <div class="contact-icon">
                                    <i class="fa fa-phone"></i>
                                </div>
                                <div class="contact-text">
                                    <p>+975497166</p>
                                    <p>+975458905</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-4 col-md-4">
                            <div class="single-socal-contact">
                                <div class="contact-icon">
                                    <i class="fa fa-envelope"></i>
                                </div>
                                <div class="contact-text">
                                    <p>johndon41@gmail.com</p>
                                    <p>johndon52@gmail.com</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-4 col-md-4">
                            <div class="single-socal-contact">
                                <div class="contact-icon">
                                    <i class="fa fa-map-marker"></i>
                                </div>
                                <div class="contact-text">
                                    <p>198 West 21th Street,<br> +Suite 721 New York NY 10016</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- contact-area end -->
            <!-- footer-area start -->
            <div class="footer-area">
                <div class="container">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="socail-icon text-center">
                               <a href="https://www.facebook.com/" target="_blank"><i class="fa fa-facebook"></i></a>
                               <a href="https://twitter.com/" target="_blank"><i class="fa fa-twitter"></i></a>
                               <a href="https://plus.google.com/" target="_blank"><i class="fa fa-google-plus"></i></a>
                               <a href="https://www.linkedin.com/" target="_blank"><i class="fa fa-linkedin"></i></a>
                               <a href="https://www.youtube.com/" target="_blank"><i class="fa fa-youtube-play"></i></a>
                            </div>
                            <p>copyright &copy; <a href="#">Theme-fair</a> 2017 All rights reserved.</p>
                        </div>
                    </div>
                </div>
            </div>
            <!-- footer-area end -->
            <!-- modal-area start -->
            <div id="quickview-wrapper">
                <!-- Modal -->
                <div class="hiremodal-main modal fade" id="hireModal" role="dialog">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <span class="close" data-dismiss="modal">×</span>
                                <h2>HAVE A PROJECT?</h2>
                                <p>I’m ready to help you. You just type details below, and/or send us a file.</p>
                            </div>
                            <div class="modal-body">
                                <div class="modal-product">
                                    <div class="hire-contact-form">
                                        <form action="#">
                                            <div class="row">
                                                <div class="col-md-12">
                                                    <div class="row">
                                                        <div class="col-md-6 col-sm-6 ">
                                                            <input type="text" placeholder="Name">
                                                        </div>
                                                        <div class="col-md-6 col-sm-6">
                                                            <input type="text" placeholder="Your Email...">
                                                        </div>
                                                        <div class="col-md-6 col-sm-6">
                                                            <input type="text" placeholder="Project Title...">
                                                        </div>
                                                        <div class="col-md-6 col-sm-6">
                                                            <select id="ui-id-1" class="bg-fa-caret-down SelectMenu" name="category">
                                                                <option value="">-Select Case Category-</option>
                                                                <option value="example">Example Category</option>
                                                            </select>
                                                        </div>
                                                        <div class="col-md-6 col-sm-6">
                                                            <input class="date-picker" type="text" placeholder="-Estimate Date-">
                                                        </div>
                                                        <div class="col-md-6 col-sm-6">
                                                            <input type="text" placeholder="-Budget-">
                                                        </div>
                                                        <div class="col-md-12 col-sm-12">
                                                            <textarea name="message" rows="9" class="valid" placeholder="YourMessage..."></textarea>
                                                            <div class="row">
                                                                <div class="col-md-4 col-sm-4">
                                                                <label for="fileUpload">
                                                                    <i class="fa fa-paperclip"></i>
                                                                    Attach File
                                                                </label>
                                                                <input id="fileUpload" name="attachment" type="file">
                                                            </div>
                                                            <div class="col-md-8 col-sm-8">
                                                                <div class="hier-send-btn">
                                                                    <a href="#">send offer </a>
                                                                </div>
                                                            </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- END Modal -->
            </div>
            <!-- modal-area end -->	
        </div>
        <!-- Google Map js -->		
		<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAj9b_nyz33KEaocu6ZOXRgqwwUZkDVEAw"></script>
		<script type="text/javascript" src="https://www.google.com/jsapi"></script>
		<script>
			function initialize() {
			  var mapOptions = {
				zoom: 15,
				scrollwheel: false,
				center: new google.maps.LatLng(41.451437, -82.167451)
			  };
			  var map = new google.maps.Map(document.getElementById('googleMap'),
				  mapOptions);
			  var marker = new google.maps.Marker({
				position: map.getCenter(),
				animation:google.maps.Animation.BOUNCE,
				icon: 'img/map-marker.png',
				map: map
			  });
			}
			google.maps.event.addDomListener(window, 'load', initialize);
		</script>
		<!-- all js here -->		
        <script src="js/vendor/jquery-1.11.3.min.js"></script>		
        <script src="js/bootstrap.min.js"></script>			
        <script src="js/jquery.meanmenu.js"></script>		
        <script src="js/owl.carousel.min.js"></script>	
        <script src="js/jquery.parallax-1.1.3.js"></script>
        <script src="js/jquery.mixitup.min.js"></script>
        <!-- mail js -->
        <script src="js/email.js"></script>
		<!-- plugins JS -->		
        <script src="js/plugins.js"></script>
		<!-- main JS -->		
        <script src="js/main.js"></script>
    </body>
</html>