dropdown-menu.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Cubic - One Page Responsive HTML 5 Website Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Responsive Minimal Bootstrap Theme">
    <meta name="keywords" content="onepage,responsive,minimal,bootstrap,theme">
    <meta name="author" content="">


    <!--[if lt IE 9]>
	<script src="js/html5shiv.js"></script>
	<![endif]-->


    <!-- CSS Files
    ================================================== -->
    <link rel="stylesheet" href="css/bootstrap.css" type="text/css">
    <link rel="stylesheet" href="css/jpreloader.css" type="text/css">
    <link rel="stylesheet" href="css/animate.css" type="text/css">
    <link rel="stylesheet" href="css/flexslider.css" type="text/css">
    <link rel="stylesheet" href="css/plugin.css" type="text/css">
    <link rel="stylesheet" href="css/prettyPhoto.css" type="text/css">
    <link rel="stylesheet" href="css/owl.carousel.css" type="text/css">
    <link rel="stylesheet" href="css/owl.theme.css" type="text/css">
    <link rel="stylesheet" href="css/owl.transitions.css" type="text/css">
    <link rel="stylesheet" href="css/style.css" type="text/css">

    <!-- custom style css -->
    <link rel="stylesheet" href="css/custom-style.css" type="text/css">

    <!-- color scheme -->
    <link rel="stylesheet" href="css/color.css" type="text/css">

    <!-- revolution slider -->
    <link rel="stylesheet" href="rs-plugin/css/settings.css" type="text/css">
    <link rel="stylesheet" href="css/rev-settings.css" type="text/css">

    <!-- load fonts -->
    <link rel="stylesheet" href="fonts/font-awesome/css/font-awesome.css" type="text/css">
    <link rel="stylesheet" href="fonts/elegant_font/HTML_CSS/style.css" type="text/css">
    <link rel="stylesheet" href="fonts/et-line-font/style.css" type="text/css">
</head>

<body id="homepage">

    <!-- This section is for Splash Screen -->
    <div id="jSplash">
        <section class="selected">
            This is custom text rotator on loading screen!
        </section>
        <section>
            Insert your custom message here.
        </section>
        <section>
            Make your customers smile.
        </section>
    </div>
    <!-- End of Splash Screen -->


    <div id="wrapper">
        <div class="page-overlay">
        </div>


        <!-- header begin -->
        <header>
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <!-- logo begin -->
                        <h1 id="logo">
                            <a href="index.html">
                                <img class="logo-1" src="images/logo.png" alt="">
                                <img class="logo-2" src="images/logo-2.png" alt="">
                            </a>
                        </h1>
                        <!-- logo close -->

                        <!-- small button begin -->
                        <span id="menu-btn"></span>
                        <!-- small button close -->

                        <!-- mainmenu begin -->
                        <nav>
                            <ul id="mainmenu">
                                <li><a href="#section-about">About Us</a>
									<ul>
										<li><a href="#section-team">Go To Anchor</a></li>
										<li><a href="http://www.google.com">Go To URL</a></li>
									</ul>
								</li>	
								<li><a href="#section-about">Submenu</a>
									<ul>
										<li><a href="#section-team">Go To Anchor</a></li>
										<li><a href="http://www.google.com">Go To URL</a></li>
										<li><a href="#">Unlimited Submenu</a>
											<ul>
												<li><a href="#section-team">Go To Anchor</a></li>
												<li><a href="http://www.google.com">Go To URL</a></li>
												<li><a href="#">Unlimited Submenu</a>
													<ul>
														<li><a href="#section-team">Go To Anchor</a></li>
														<li><a href="http://www.google.com">Go To URL</a></li>
													</ul>
												</li>
											</ul>
										</li>
									</ul>
								</li>
                                <li><a href="#section-team">Team</a></li>
                                <li><a href="#section-services">Services</a></li>
                                <li><a href="#section-portfolio">Works</a></li>
                                <li><a href="#section-testimonial">Testimonial</a></li>
                                <li><a href="#section-blog">Blog</a></li>
                                <li><a href="#section-contact">Contact</a></li>
                            </ul>
                        </nav>
						<!-- mainmenu close -->

                </div>
            </div>
        </header>
        <!-- header close -->


        <!-- content begin -->
        <div id="content" class="no-bottom no-top">


            <!-- section begin -->
            <section id="section-welcome" class="full-height dark" data-stellar-background-ratio=".2">
                <div class="center-y text-center">
                    CREATIVE AGENCY / WEBSITE DEVELOPMENT / COPYWRITER
                <div class="spacer-single"></div>
                    <div class="text-slider border-deco">
                        <div class="text-item">Welcome To <span class="id-color">Cubic</span></div>
                        <div class="text-item">Desktop + <span class="id-color">Mobile</span></div>
                        <div class="text-item">Clean &amp; <span class="id-color">Fresh</span></div>
                        <div class="text-item"><span class="id-color"><i class="icon-bike"></i></span>Ready to Go?</div>
                    </div>
                    <div class="spacer-single"></div>
                    <a href="#section-portfolio" class="btn btn-border btn-big">View Our Works</a>
                </div>
            </section>
            <!-- section close -->


            <!-- section begin -->
            <section id="section-about">
                <div class="container">
                    <div class="row">
                        <div class="row">
                            <div class="col-md-6 col-md-offset-3 text-center">
                                <h1 class="animated" data-animation="fadeInUp">Who We <span class="id-color">Are?</span>
                                    <span class="small-border animated" data-animation="fadeInUp"></span>
                                </h1>
                                
                                <div class="spacer-single"></div>
                            </div>
                        </div>
                        <!-- featured box begin -->
                        <div class="feature-box-small-icon box-fx center col-md-3 animated" data-animation="fadeInUp" data-delay="0">
                            <div class="inner">
                                <div class="front">
                                    <i class="icon-genius"></i>
                                    <h3>Our Portfolio</h3>
                                    <span>Our Recent Works</span>
                                </div>
                                <div class="info">
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore.
                                	<br>
                                    <a href="#" class="btn btn-border">Read More</a>
                                </div>
                            </div>
                        </div>
                        <!-- featured box close -->

                        <!-- featured box begin -->
                        <div class="feature-box-small-icon box-fx center col-md-3 animated" data-animation="fadeInUp" data-delay="200">
                            <div class="inner">
                                <div class="front">
                                    <i class="icon-linegraph"></i>
                                    <h3>Experiences</h3>
                                    <span>What We Have Done</span>
                                </div>
                                <div class="info">
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore.
                                	<br>
                                    <a href="#" class="btn btn-border">Read More</a>
                                </div>
                            </div>
                        </div>
                        <!-- featured box close -->

                        <!-- featured box begin -->
                        <div class="feature-box-small-icon box-fx center col-md-3 animated" data-animation="fadeInUp" data-delay="400">
                            <div class="inner">
                                <div class="front">
                                    <i class="icon-layers"></i>
                                    <h3>Our Vision</h3>
                                    <span>View Our Story</span>
                                </div>
                                <div class="info">
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore.
                                	<br>
                                    <a href="#" class="btn btn-border">Read More</a>
                                </div>
                            </div>
                        </div>
                        <!-- featured box close -->

                        <!-- featured box begin -->
                        <div class="feature-box-small-icon box-fx center col-md-3 animated" data-animation="fadeInUp" data-delay="600">
                            <div class="inner">
                                <div class="front">
                                    <i class="icon-heart"></i>
                                    <h3>Happy Clients</h3>
                                    <span>What They Says</span>
                                </div>
                                <div class="info">
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore.
                                	<br>
                                    <a href="#" class="btn btn-border">Read More</a>
                                </div>
                            </div>
                        </div>
                        <!-- featured box close -->

                    </div>
                </div>
            </section>
            <!-- section close -->

            <!-- section begin -->
            <section id="section-about-us-2" class="side-bg no-padding">
                <div class="image-container col-md-5 pull-left animated" data-animation="fadeInLeft" data-delay="0"></div>

                <div class="container">
                    <div class="row">
                        <div class="inner-padding">
                            <div class="col-md-6 col-md-offset-6 animated" data-animation="fadeInRight" data-delay="200">
                                <h2>We are group of professionals focused on making creative and innovative works</h2>

                                <p class="intro">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

                                <div class="row">
                                    <div class="col-md-6">
                                        <h3>Our Vision</h3>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                                    </div>
                                    <div class="col-md-6">
                                        <h3>Our Mission</h3>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                                    </div>
                                </div>
                            </div>
                            <div class="clearfix"></div>
                        </div>
                    </div>
                </div>
            </section>
            <!-- section close -->
            <!-- section begin -->
            <section class="no-padding dark" data-stellar-background-ratio=".2">
                <div class="de-video-container">
                    <div class="de-video-content">
                        <div class="container">
                            <div class="row">
                                <div class="col-md-6 col-md-offset-3 text-center">
                                    <h1 class="animated" data-animation="fadeInUp">Ready To <span class="id-color">Rock?</span>
                                        <span class="small-border animated" data-animation="fadeInUp"></span>
                                    </h1>
                                    <div class="animated" data-animation="fadeInUp">
                                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                                    	<div class="spacer-single"></div>
                                        <a href="#" class="btn btn-border" data-animation="fadeIn">Let's Rock!</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="de-video-overlay"></div>

                    <!-- load your video here -->
                    <video autoplay="" loop="" muted="" poster="video/video-1.jpg">
                        <source src="video/video-1.webm" type="video/webm" />
                        <source src="video/video-1.mp4" type="video/mp4" />
                        <source src="video/video-1.ogg" type="video/ogg" />
                    </video>


                </div>

            </section>
            <!-- section close -->

            <!-- team section begin -->
            <section id="section-team">
                <div class="container">
                    <div class="row">
                        <div class="col-md-6 col-md-offset-3 text-center">
                            <h1 class="animated" data-animation="fadeInUp">Meet The <span class="id-color">Team</span>
                                <span class="small-border animated" data-animation="fadeInUp"></span>
                            </h1>
                            
                            <div class="spacer-single"></div>
                        </div>
                    </div>


                    <div class="row">
                        <!-- team member -->
                        <div class="de-team-list col-md-3 animated" data-animation="fadeInUp" data-delay="0">
                            <div class="team-pic">
                                <img src="images/team/team_pic_1.jpg" class="img-responsive" alt="" />
                            </div>
                            <div class="team-desc col-md-12">
                                <h3>John Smith</h3>
                                <p class="lead">Project Manager</p>
                                <div class="small-border"></div>
                                <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>

                                <div class="social">
                                    <a href="#"><i class="fa fa-facebook fa-lg"></i></a>
                                    <a href="#"><i class="fa fa-twitter fa-lg"></i></a>
                                    <a href="#"><i class="fa fa-google-plus fa-lg"></i></a>
                                    <a href="#"><i class="fa fa-skype fa-lg"></i></a>
                                </div>
                            </div>
                        </div>
                        <!-- team close -->

                        <!-- team member -->
                        <div class="de-team-list col-md-3 animated" data-animation="fadeInUp" data-delay="0">
                            <div class="team-pic">
                                <img src="images/team/team_pic_2.jpg" class="img-responsive" alt="" />
                            </div>
                            <div class="team-desc col-md-12">
                                <h3>Michael Dennis</h3>
                                <p class="lead">Creative Director</p>
                                <div class="small-border"></div>
                                <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>

                                <div class="social">
                                    <a href="#"><i class="fa fa-facebook fa-lg"></i></a>
                                    <a href="#"><i class="fa fa-twitter fa-lg"></i></a>
                                    <a href="#"><i class="fa fa-google-plus fa-lg"></i></a>
                                    <a href="#"><i class="fa fa-skype fa-lg"></i></a>
                                </div>
                            </div>
                        </div>
                        <!-- team close -->

                        <!-- team member -->
                        <div class="de-team-list col-md-3 animated" data-animation="fadeInUp" data-delay="0">
                            <div class="team-pic">
                                <img src="images/team/team_pic_3.jpg" class="img-responsive" alt="" />
                            </div>
                            <div class="team-desc col-md-12">
                                <h3>Sarah Michelle</h3>
                                <p class="lead">Creative Staff</p>
                                <div class="small-border"></div>
                                <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
                                <div class="social">
                                    <a href="#"><i class="fa fa-facebook fa-lg"></i></a>
                                    <a href="#"><i class="fa fa-twitter fa-lg"></i></a>
                                    <a href="#"><i class="fa fa-google-plus fa-lg"></i></a>
                                    <a href="#"><i class="fa fa-skype fa-lg"></i></a>
                                </div>
                            </div>
                        </div>
                        <!-- team close -->

                        <!-- team member -->
                        <div class="de-team-list col-md-3 animated" data-animation="fadeInUp" data-delay="0">
                            <div class="team-pic">
                                <img src="images/team/team_pic_4.jpg" class="img-responsive" alt="" />
                            </div>
                            <div class="team-desc col-md-12">
                                <h3>Katty Wilson</h3>
                                <p class="lead">Creative Staff</p>
                                <div class="small-border"></div>
                                <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
                                <div class="social">
                                    <a href="#"><i class="fa fa-facebook fa-lg"></i></a>
                                    <a href="#"><i class="fa fa-twitter fa-lg"></i></a>
                                    <a href="#"><i class="fa fa-google-plus fa-lg"></i></a>
                                    <a href="#"><i class="fa fa-skype fa-lg"></i></a>
                                </div>
                            </div>
                        </div>
                        <!-- team close -->

                        <div class="clearfix"></div>

                    </div>
                </div>
            </section>
            <!-- section close -->

            <!-- section begin -->
            <section id="fun-facts" class="dark" data-stellar-background-ratio=".2">
                <div class="container">

                    <div class="row">

                        <div class="col-md-12 text-center">
                            <h1 class="animated" data-animation="fadeInUp">Fun <span class="id-color">Facts</span></h1>
                            <span class="small-border animated" data-animation="fadeInUp"></span>
                            <div class="spacer-single"></div>
                        </div>


                        <div class="col-md-3 animated" data-animation="fadeInLeft" data-delay="100">
                            <div class="de_count">
                                <i class="icon-alarmclock animated" data-animation="fadeInDown" data-delay="0"></i>
                                <h3 class="timer" data-to="1980" data-speed="2500">0</h3>
                                <span>Hours of Works</span>
                            </div>
                        </div>

                        <div class="col-md-3 animated" data-animation="fadeInLeft" data-delay="0">
                            <div class="de_count">
                                <i class="icon-documents animated" data-animation="fadeInDown" data-delay="200"></i>
                                <h3 class="timer" data-to="1280" data-speed="2500">0</h3>
                                <span>Lines of Code</span>
                            </div>
                        </div>

                        <div class="col-md-3 animated" data-animation="fadeInRight" data-delay="0">
                            <div class="de_count">
                                <i class="icon-piechart animated" data-animation="fadeInDown" data-delay="400"></i>
                                <h3 class="timer" data-to="750" data-speed="2500">0</h3>
                                <span>Slice of Pizza</span>
                            </div>
                        </div>

                        <div class="col-md-3 animated" data-animation="fadeInRight" data-delay="100">
                            <div class="de_count">
                                <i class="icon-wine animated" data-animation="fadeInDown" data-delay="600"></i>
                                <h3 class="timer" data-to="520" data-speed="2500">0</h3>
                                <span>Cups of Coffee</span>
                            </div>
                        </div>
                    </div>

                </div>
            </section>
            <!-- section close -->

            <!-- section begin -->
            <section id="section-services" class="no-bottom">
                <div class="container">
                    <div class="row">
                        <div class="col-md-6 col-md-offset-3 text-center">
                            <h1 class="animated" data-animation="fadeInUp">Our <span class="id-color">Services</span>
                                <span class="small-border animated" data-animation="fadeInUp"></span>
                            </h1>
                            
                            <div class="spacer-single"></div>
                        </div>
                    </div>

                    <div class="row">
                        <!-- feature box begin -->
                        <div class="feature-box-small-icon col-md-4 animated" data-animation="fadeInUp" data-delay="0">
                            <div class="inner">
                                <i class="icon-tools"></i>
                                <div class="text">
                                    <h3>Web Design</h3>
                                    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem.
                                </div>
                            </div>
                        </div>
                        <!-- feature box close -->

                        <!-- feature box begin -->
                        <div class="feature-box-small-icon col-md-4 animated" data-animation="fadeInUp" data-delay="200">
                            <div class="inner">
                                <i class="icon-global"></i>
                                <div class="text">
                                    <h3>Branding</h3>
                                    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem.
                                </div>
                            </div>
                        </div>
                        <!-- feature box close -->

                        <!-- feature box begin -->
                        <div class="feature-box-small-icon col-md-4 animated" data-animation="fadeInUp" data-delay="400">
                            <div class="inner">
                                <i class="icon-megaphone"></i>
                                <div class="text">
                                    <h3>Campaign</h3>
                                    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem.
                                </div>
                            </div>
                        </div>
                        <!-- feature box close -->

                        <!-- feature box begin -->
                        <div class="feature-box-small-icon col-md-4 animated" data-animation="fadeInUp" data-delay="600">
                            <div class="inner">
                                <i class="icon-phone"></i>
                                <div class="text">
                                    <h3>Mobile Apps</h3>
                                    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem.
                                </div>
                            </div>
                        </div>
                        <!-- feature box close -->


                        <!-- feature box begin -->
                        <div class="feature-box-small-icon col-md-4 animated" data-animation="fadeInUp" data-delay="800">
                            <div class="inner">
                                <i class="icon-magnifying-glass"></i>
                                <div class="text">
                                    <h3>SEO Services</h3>
                                    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem.
                                </div>
                            </div>
                        </div>
                        <!-- feature box close -->

                        <!-- feature box begin -->
                        <div class="feature-box-small-icon col-md-4 animated" data-animation="fadeInUp" data-delay="1000">
                            <div class="inner">
                                <i class="icon-pencil"></i>
                                <div class="text">
                                    <h3>Copywriter</h3>
                                    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem.
                                </div>
                            </div>
                        </div>
                        <!-- feature box close -->

                        <div class="spacer-single"></div>

                        <div class="col-md-12 text-center animated" data-animation="fadeInUp" data-delay="400">
                            <img src="images/cubic_ss.png" class="img-responsive" alt="">
                        </div>
                    </div>
                </div>
            </section>
            <!-- section close -->


            <!-- section begin -->
            <section id="section-skill-bar" class="dark" data-stellar-background-ratio=".2">
                <div class="container">
                    <div class="row">
                        <div class="col-md-12 text-center">
                            <h1 class="animated" data-animation="fadeInUp">Our <span class="id-color">Skill</span>
                                <span class="small-border animated" data-animation="fadeInUp"></span>
                            </h1>
                            <div class="spacer-single"></div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <h3>Design</h3>
                            <div class="de-progress">
                                <div class="progress-bar" data-value="80%">
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <h3>Development</h3>
                            <div class="de-progress">
                                <div class="progress-bar" data-value="90%">
                                </div>
                            </div>
                        </div>
                        <div class="spacer-single"></div>

                        <div class="col-md-6">
                            <h3>Marketing</h3>
                            <div class="de-progress">
                                <div class="progress-bar" data-value="70%">
                                </div>
                            </div>
                        </div>


                        <div class="col-md-6">
                            <h3>Branding</h3>
                            <div class="de-progress">
                                <div class="progress-bar" data-value="60%">
                                </div>
                            </div>
                        </div>

                        <div class="spacer-single"></div>

                        <div class="col-md-6">
                            <h3>Monitoring</h3>
                            <div class="de-progress">
                                <div class="progress-bar" data-value="65%">
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <h3>Supporting</h3>
                            <div class="de-progress">
                                <div class="progress-bar" data-value="80%">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <!-- section begin -->
            <section id="section-portfolio" class="no-bottom">
                <div class="container">
                    <div class="row">
                        <div class="col-md-12 text-center">
                            <h1 class="animated" data-animation="fadeInUp">Our <span class="id-color">Works</span>
                                <span class="small-border animated" data-animation="fadeInUp"></span>
                            </h1>
                            <div class="spacer-single"></div>
                        </div>
                    </div>

                    <!-- portfolio filter begin -->
                    <div class="row">
                        <div class="col-md-12 text-center">
                            <ul id="filters" class="animated" data-animation="fadeInUp" data-delay="200">
                                <li><a href="#" data-filter="*" class="selected">show all</a></li>
                                <li><a href="#" data-filter=".illustration">Illustration</a></li>
                                <li><a href="#" data-filter=".mobile">Mobile</a></li>
                                <li><a href="#" data-filter=".photography">Photography</a></li>
                                <li><a href="#" data-filter=".website">Website</a></li>
                            </ul>

                        </div>
                    </div>
                    <!-- portfolio filter close -->

                </div>

                <div id="gallery" class="gallery full-gallery de-gallery pf_full_width animated" data-animation="fadeInUp" data-delay="200">

                    <!-- gallery item -->
                    <div class="item illustration">
                        <div class="picframe">
                            <span class="overlay">
                                <span class="icon">
                                    <a href="images/portfolio/pf%20(1).jpg" data-type="prettyPhoto[gallery]"><i class="fa fa-search icon-view"></i></a>
                                </span>
                                <span class="icon">
                                    <i class="fa fa-align-justify fa-external-link icon-info" data-value="project-details-slider.html"></i>
                                </span>
                                <span class="pf_text">
                                    <span class="project-name">Project Name #1</span>
                                    <span>illustration</span>
                                </span>
                            </span>

                            <img src="images/portfolio/pf%20(1).jpg" alt="" />
                        </div>
                    </div>
                    <!-- close gallery item -->

                    <!-- gallery item -->
                    <div class="item mobile website">
                        <div class="picframe">
                            <span class="overlay">
                                <span class="icon">
                                    <a href="images/portfolio/pf%20(2).jpg" data-type="prettyPhoto[gallery]"><i class="fa fa-search icon-view"></i></a>
                                </span><span class="icon">
                                    <i class="fa fa-align-justify fa-external-link icon-info" data-value="project-details-youtube.html"></i>
                                </span>
                                <span class="pf_text">
                                    <span class="project-name">Project Name #2</span>
                                    <span>mobile, website</span>
                                </span>
                            </span>

                            <img src="images/portfolio/pf%20(2).jpg" alt="" />
                        </div>
                    </div>
                    <!-- close gallery item -->

                    <!-- gallery item -->
                    <div class="item website mobile">
                        <div class="picframe">
                            <span class="overlay">
                                <span class="icon">
                                    <a href="images/portfolio/pf%20(3).jpg" data-type="prettyPhoto[gallery]"><i class="fa fa-search icon-view"></i></a>
                                </span><span class="icon">
                                    <i class="fa fa-align-justify fa-external-link icon-info" data-value="project-details-slider-big.html"></i>
                                </span>
                                <span class="pf_text">
                                    <span class="project-name">Project Name #3</span>
                                    <span>mobile, website</span>
                                </span>
                            </span>

                            <img src="images/portfolio/pf%20(3).jpg" alt="" />
                        </div>
                    </div>
                    <!-- close gallery item -->

                    <!-- gallery item -->
                    <div class="item illustration photography">
                        <div class="picframe">
                            <span class="overlay">
                                <span class="icon">
                                    <a href="images/portfolio/pf%20(4).jpg" data-type="prettyPhoto[gallery]"><i class="fa fa-search icon-view"></i></a>
                                </span><span class="icon">
                                    <i class="fa fa-align-justify fa-external-link icon-info" data-value="project-details-youtube-big.html"></i>
                                </span>
                                <span class="pf_text">
                                    <span class="project-name">Project Name #4</span>
                                    <span>illustration, photography</span>
                                </span>
                            </span>
                            <img src="images/portfolio/pf%20(4).jpg" alt="" />
                        </div>
                    </div>
                    <!-- close gallery item -->

                    <!-- gallery item -->
                    <div class="item website photography mobile">
                        <div class="picframe">
                            <span class="overlay">
                                <span class="icon">
                                    <a href="images/portfolio/pf%20(5).jpg" data-type="prettyPhoto[gallery]"><i class="fa fa-search icon-view"></i></a>
                                </span><span class="icon">
                                    <i class="fa fa-align-justify fa-external-link icon-info" data-value="project-details-slider.html"></i>
                                </span>
                                <span class="pf_text">
                                    <span class="project-name">Project Name #5</span>
                                    <span>mobile, website</span>
                                </span>
                            </span>
                            <img src="images/portfolio/pf%20(5).jpg" alt="" />
                        </div>
                    </div>
                    <!-- close gallery item -->

                    <!-- gallery item -->
                    <div class="item illustration website">
                        <div class="picframe">
                            <span class="overlay">
                                <span class="icon">
                                    <a href="images/portfolio/pf%20(6).jpg" data-type="prettyPhoto[gallery]"><i class="fa fa-search icon-view"></i></a>
                                </span><span class="icon">
                                    <i class="fa fa-align-justify fa-external-link icon-info" data-value="project-details-slider-big.html"></i>
                                </span>
                                <span class="pf_text">
                                    <span class="project-name">Project Name #6</span>
                                    <span>illustration, website</span>
                                </span>
                            </span>
                            <img src="images/portfolio/pf%20(6).jpg" alt="" />
                        </div>
                    </div>
                    <!-- close gallery item -->


                </div>

                <div id="loader-area">
                    <div class="project-load"></div>
                </div>
            </section>
            <!-- section close -->


            <!-- section begin -->
            <section id="view-all-projects" class="call-to-action bg-color dark text-center" data-stellar-background-ratio=".2">
                <a href="works.html" class="btn btn-border btn-big">View All Works</a>
            </section>
            <!-- logo carousel section close -->


            <!-- section begin -->
            <section id="section-testimonial" class="dark">
                <div class="container">
                    <div class="row">
                        <div class="col-md-12 text-center">
                            <h1 class="animated" data-animation="fadeInUp">Customer <span class="id-color">Says</span></h1>
                            <span class="small-border animated" data-animation="fadeInUp"></span>
                            <div class="spacer-single"></div>
                        </div>
                    </div>
                    <div id="testimonial-carousel" class="de_carousel row animated" data-animation="fadeInUp" data-delay="200">

                        <div class="col-md-4 item">
                            <div class="de_testi">
                                <blockquote>
                                    <p>The support staff is AMAZING. Same day service. They also have built a GREAT theme that supports so many functions. You can tweak little things here and there and use its functionality for SO much more! What an AWESOME AWESOME AWESOME theme.</p>
                                </blockquote>
                                <div class="de_testi_by">
                                    <div class="de_testi_pic">
                                        <img src="images/testi_pic%20(1).jpg" alt="" class="img-circle">
                                    </div>
                                    <div class="de_testi_company">
                                        <strong>Feldhouse</strong>, Customer
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-4 item">
                            <div class="de_testi">
                                <blockquote>
                                    <p>All of my questions were answered, designesia was very forthcoming and helpful and even sent me custom code for a specific problem I had. I know one thing: whatever theme designesia publishes, you can be assured that you get the best quality and support out there.</p>
                                </blockquote>
                                <div class="de_testi_by">
                                    <span class="de_testi_pic">
                                        <img src="images/testi_pic%20(2).jpg" alt="" class="img-circle"></span>
                                    <div class="de_testi_company">
                                        <strong>Mores</strong>, Customer
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-4 item">
                            <div class="de_testi">
                                <blockquote>
                                    <p>There are some themes I have bought and are just 'eh' about. This one hands down does so much more than you could think. Perfect theme - and thanks for continually updating and improving it!</p>
                                </blockquote>
                                <div class="de_testi_by">
                                    <div class="de_testi_pic">
                                        <img src="images/testi-default.jpg" alt="" class="img-circle">
                                    </div>
                                    <div class="de_testi_company">
                                        <strong>Feldhouse</strong>, Customer
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-4 item">
                            <div class="de_testi">
                                <blockquote>
                                    <p>Again, great template and I love that it works on the computer, iPad, phone, etc. Very clean design, keep up the great work!</p>
                                </blockquote>
                                <div class="de_testi_by">
                                    <div class="de_testi_pic">
                                        <img src="images/testi_pic%20(1).jpg" alt="" class="img-circle">
                                    </div>
                                    <div class="de_testi_company">
                                        <strong>Barbara</strong>, Customer
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-4 item">
                            <div class="de_testi">
                                <blockquote>
                                    <p>Everything is nicely accessible inside the theme customization screen. It is easily comprehensible, the way things work is very natural and intuitive.</p>
                                </blockquote>
                                <div class="de_testi_by">
                                    <span class="de_testi_pic">
                                        <img src="images/testi_pic%20(2).jpg" alt="" class="img-circle"></span>
                                    <div class="de_testi_company">
                                        <strong>Mores</strong>, Customer
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-4 item">
                            <div class="de_testi">
                                <blockquote>
                                    <p>Fit our needs like a glove. 1 hour to setup. I am currently implementing the language support Thanks for the awesome.</p>
                                </blockquote>
                                <div class="de_testi_by">
                                    <div class="de_testi_pic">
                                        <img src="images/testi-default.jpg" alt="" class="img-circle">
                                    </div>
                                    <div class="de_testi_company">
                                        <strong>Itweb</strong>, Customer
                                    </div>
                                </div>
                            </div>
                        </div>


                    </div>

                </div>
            </section>
            <!-- section close -->


            <!-- section begin -->
            <section id="section-blog">
                <div class="container">
                    <div class="row">
                        <div class="col-md-6 col-md-offset-3 text-center">
                            <h1 class="animated" data-animation="fadeInUp">Our <span class="id-color">Blog</span>
                                <span class="small-border animated" data-animation="fadeInUp"></span>
                            </h1>
                            
                            <div class="spacer-single"></div>
                        </div>
                    </div>

                    <div class="animated" data-animation="fadeInUp" data-delay="200">
                        <div class="col-md-4 bloglist">
                            <div class="post-content">
                                <div class="post-image">
                                    <div class="flexslider blog-slider">
                                        <div class="overlay">
                                        </div>
                                        <ul class="slides">
                                            <li>
                                                <img src="images/blog/pic-blog-1.jpg" alt="" />
                                            </li>
                                            <li>
                                                <img src="images/blog/pic-blog-2.jpg" alt="" />
                                            </li>
                                        </ul>
                                    </div>

                                </div>

                                <div class="date-box"><span class="day">20</span> <span class="month">SEP</span> </div>
                                <div class="post-text">
                                    <h3><a href="css/#">Best DSLR Camera</a></h3>
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                                        <br>
                                    <a href="#" class="btn-text">Read More</a>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-4 bloglist">
                            <div class="post-content">
                                <div class="post-image">
                                    <div class="flexslider blog-slider">
                                        <div class="overlay">
                                        </div>
                                        <ul class="slides">
                                            <li>
                                                <img src="images/blog/pic-blog-3.jpg" alt="" />
                                            </li>
                                            <li>
                                                <img src="images/blog/pic-blog-4.jpg" alt="" />
                                            </li>
                                        </ul>
                                    </div>

                                </div>

                                <div class="date-box"><span class="day">18</span> <span class="month">SEP</span> </div>
                                <div class="post-text">
                                    <h3><a href="css/#">Playstation 4</a></h3>
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                                        <br>
                                    <a href="#" class="btn-text">Read More</a>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-4 bloglist">
                            <div class="post-content">
                                <div class="post-image">
                                    <div class="flexslider blog-slider">
                                        <div class="overlay">
                                        </div>
                                        <ul class="slides">
                                            <li>
                                                <img src="images/blog/pic-blog-5.jpg" alt="" />
                                            </li>
                                            <li>
                                                <img src="images/blog/pic-blog-6.jpg" alt="" />
                                            </li>
                                        </ul>
                                    </div>

                                </div>

                                <div class="date-box"><span class="day">10</span> <span class="month">SEP</span> </div>
                                <div class="post-text">
                                    <h3><a href="css/#">Photography Tips</a></h3>
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                                        <br>
                                    <a href="#" class="btn-text">Read More</a>
                                </div>
                            </div>
                        </div>
                        
                        <div class="spacer-single"></div>
                        
                        <div class="text-center">
                        	<a href="blog.html" class="btn btn-border">View All Posts</a>
                        </div>
                    </div>
                </div>
            </section>
            <!-- section close -->

            <!-- section begin -->
            <section id="logo-full">
                <div class="container">
                    <!-- logo carousel -->
                    <div class="row">
                        <div class="logo-carousel">
                                    <ul id="logo-carousel" class="slides">
                                        <li>
                                            <div class="col-md-2">
                                                <img src="images/logo/1.png" alt="">
                                            </div>
                                        </li>
                                        <li>
                                            <div class="col-md-2">
                                                <img src="images/logo/2.png" alt="">
                                            </div>
                                        </li>
                                        <li>
                                            <div class="col-md-2">
                                                <img src="images/logo/3.png" alt="">
                                            </div>
                                        </li>
                                        <li>
                                            <div class="col-md-2">
                                                <img src="images/logo/4.png" alt="">
                                            </div>
                                        </li>
                                        <li>
                                            <div class="col-md-2">
                                                <img src="images/logo/5.png" alt="">
                                            </div>
                                        </li>
                                        <li>
                                            <div class="col-md-2">
                                                <img src="images/logo/6.png" alt="">
                                            </div>
                                        </li>
                                        <li>
                                            <div class="col-md-2">
                                                <img src="images/logo/7.png" alt="">
                                            </div>
                                        </li>
                                        <li>
                                            <div class="col-md-2">
                                                <img src="images/logo/8.png" alt="">
                                            </div>
                                        </li>
                                    </ul>
                        </div>
                        <!-- logo carousel close -->
                    </div>

                </div>
            </section>
            <!-- section close -->


            <!-- section begin -->
            <section id="section-contact" class="dark" data-stellar-background-ratio=".2">
                <div class="container">
                    <div class="row">
                        <div class="col-md-12 text-center">
                            <h1 class="animated" data-animation="fadeInUp">Contact <span class="id-color">Us</span>
                        	<span class="small-border animated" data-animation="fadeInUp"></span>
                            </h1>
                            <p class="animated" data-animation="fadeIn">
                                Get in touch with us. Feel Free to use contact below.
                            </p>
                            <div class="spacer-single"></div>
                        </div>

                        <div class="col-md-8 animated" data-animation="fadeInUp" data-delay="200" data-speed="5">

                            <form name="contactForm" id='contact_form' method="post" action='email.php'>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div id='name_error' class='error'>Please enter your name.</div>
                                        <div>
                                            <input type='text' name='name' id='name' class="form-control" placeholder="Your Name">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div id='email_error' class='error'>Please enter your valid E-mail ID.</div>
                                        <div>
                                            <input type='text' name='email' id='email' class="form-control" placeholder="Your Email">
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div id='message_error' class='error'>Please enter your message.</div>
                                        <div>
                                            <textarea name='message' id='message' class="form-control" placeholder="Your Message"></textarea>
                                        </div>
                                    </div>
                                    <div id='mail_success' class='success'>Your message has been sent successfully.</div>
                                    <div id='mail_fail' class='error'>Sorry, error occured this time sending your message.</div>
                                    <div class="col-md-12">
                                        <p id='submit'>
                                            <input type='submit' id='send_message' value='Submit Form' class="btn btn-border">
                                        </p>
                                    </div>
                                </div>
                            </form>

                        </div>

                        <div class="col-md-4">
                            <address>
                                <span><i class="fa fa-map-marker fa-lg"></i>100 Mainstreet Center, Sydney</span>
                                <span><i class="fa fa-phone fa-lg"></i>(208) 333 9296</span>
                                <span><i class="fa fa-envelope-o fa-lg"></i><a href="mailto:contact@example.com">contact@example.com</a></span>
                                <span><i class="fa fa-globe fa-lg"></i><a href="#">support.cubic.com</a></span>
                            </address>
                        </div>
                    </div>
                </div>
            </section>
            <!-- section close -->

            <!-- footer begin -->
            <footer>
                <div class="container">
                    <div class="row">
                        <div class="col-md-12 text-center">
                            <div class="social-icons">
                                <a href="#"><i class="fa fa-facebook fa-lg"></i></a>
                                <a href="#"><i class="fa fa-twitter fa-lg"></i></a>
                                <a href="#"><i class="fa fa-rss fa-lg"></i></a>
                                <a href="#"><i class="fa fa-google-plus fa-lg"></i></a>
                                <a href="#"><i class="fa fa-skype fa-lg"></i></a>
                                <a href="#"><i class="fa fa-dribbble fa-lg"></i></a>
                            </div>
                            <div class="spacer-single"></div>
                            © Copyright 2014 - Cubic by Designesia
                        </div>
                    </div>
                </div>
            </footer>
            <!-- footer close -->
        </div>
    </div>


    <!-- Javascript Files
    ================================================== -->
    <script src="js/jquery.min.js"></script>
    <script src="js/jpreLoader.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery.isotope.min.js"></script>
    <script src="js/jquery.prettyPhoto.js"></script>
    <script src="js/easing.js"></script>
    <script src="js/jquery.ui.totop.js"></script>
    <script src="js/jquery.flexslider-min.js"></script>
    <script src="js/jquery.scrollto.js"></script>
    <script src="js/owl.carousel.js"></script>
    <script src="js/jquery.countTo.js"></script>
    <script src="js/classie.js"></script>
    <script src="js/video.resize.js"></script>
    <script src="js/validation.js"></script>
    <script src="js/jquery.stellar.min.js"></script>
    <script src="js/designesia.js"></script>

    <!-- SLIDER REVOLUTION SCRIPTS  -->
    <script type="text/javascript" src="rs-plugin/js/jquery.themepunch.plugins.min.js"></script>
    <script type="text/javascript" src="rs-plugin/js/jquery.themepunch.revolution.min.js"></script>

</body>
</html>