Difference between revisions of "Team:William and Mary/test cedar"

(Blanked the page)
 
(One intermediate revision by the same user not shown)
Line 1: Line 1:
<!doctype html>
 
<html lang="en">
 
<head>
 
  <meta charset="utf-8" />
 
  <link rel="icon" type="image/png" href="assets/img/favicon.ico">
 
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
 
 
 
  <title>Rubik - Bootstrap Presentation Page by Creative Tim </title>
 
  
  <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
 
   
 
    <link href="assets/css/bootstrap.css" rel="stylesheet" />
 
    <link href="assets/css/rubick.css" rel="stylesheet"/>
 
 
 
    <!--    Fonts and icons    -->
 
    <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
 
    <link href='http://fonts.googleapis.com/css?family=Droid+Serif:400,700' rel='stylesheet' type='text/css'>
 
    <link href="assets/css/fonts/pe-icon-7-stroke.css" rel="stylesheet">
 
    <link href="assets/css/fonts/Rubik-Fonts.css" rel="stylesheet" />
 
</head>
 
 
<body class="landing-page">
 
 
<nav class="navbar navbar-default navbar-transparent navbar-fixed-top navbar-burger" role="navigation">
 
    <!-- if you want to keep the navbar hidden you can add this class to the navbar "navbar-burger"-->
 
   
 
    <div class="container">
 
    <div class="navbar-header">
 
        <button id="menu-toggle" type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example">
 
            <span class="sr-only">Toggle navigation</span>
 
            <span class="icon-bar bar1"></span>
 
            <span class="icon-bar bar2"></span>
 
            <span class="icon-bar bar3"></span>
 
        </button>
 
        <a href="http://www.creative-tim.com" class="navbar-brand">
 
          RUBIK
 
        </a>
 
    </div>
 
 
    <div class="collapse navbar-collapse" >
 
      <ul class="nav navbar-nav navbar-right navbar-uppercase">
 
            <li class="social-links">
 
                <a href="#">
 
                    <i class="fa fa-facebook"></i>
 
                </a>
 
                <a href="#">
 
                    <i class="fa fa-twitter"></i>
 
                </a>
 
                <a href="#">
 
                    <i class="fa fa-instagram"></i>
 
                </a>
 
            </li>
 
            <li>
 
                <a href="" data-scroll="true" data-id="#whoWeAre1">
 
                    About
 
                </a>
 
            </li>
 
            <li>
 
                <a href="" data-scroll="true" data-id="#workflow1">
 
                    Workflow
 
                </a>
 
            </li>
 
            <li>
 
                <a href="" data-scroll="true" data-id="#projects1">
 
                    Clothes
 
                </a>
 
            </li>
 
            <li>
 
                <a href="" data-scroll="true" data-id="#clients1">
 
                    Clients
 
                </a>
 
            </li>
 
            <li>
 
                <a href="" data-scroll="true" data-id="#team1">
 
                    Team
 
                </a>
 
            </li>
 
            <li>
 
                <a href="" data-scroll="true" data-id="#numbers1">
 
                    Numbers
 
                </a>
 
            </li>
 
            <li>
 
                <a href="" data-scroll="true" data-id="#contact1">
 
                    Contact
 
                </a>
 
            </li>
 
      </ul>
 
    </div><!-- /.navbar-collapse -->
 
  </div>
 
</nav>
 
 
 
<div class="wrapper">
 
    <div class="section section-header">
 
        <div class="parallax pattern-image">
 
            <img src="assets/img/rubik_background.jpg"/>
 
           
 
            <div class="container">
 
                <div class="content">
 
                    <p><span>by </span>Creative Tim<p>
 
                    <h1>Rubik</h1>
 
                    <div class="separator-container">
 
                          <div class="separator line-separator">✻</div>
 
                        </div>
 
                    <h5>All components right here</h5>
 
                </div>             
 
            </div>
 
        </div>
 
    </div>
 
   
 
    <!-- SECTION WHO WE ARE -->
 
      <div class="section section-we-are-1" id="whoWeAre1">
 
          <div class="text-area">
 
              <div class="container">
 
                  <div class="row">
 
                      <div class="title add-animation-stopped">
 
                          <h5 class="text-gray"> 1 Column Text & Images</h5>
 
                          <h2>Who we are section</h2>
 
                          <div class="separator-container">
 
                              <div class="separator line-separator">✻</div>
 
                          </div>
 
                          <p>Creative tim is a tight-knit team of designers, developers, writers, and strategists. For over a decade, we've helped businesses to craft honest, emotional experiences through strategy, brand development, graphic design, web design, and storytelling.</p>
 
                      </div>
 
                  </div>
 
              </div>
 
          </div>
 
          <div class="container">
 
              <div class="row">
 
                  <div class="col-md-4 col-md-offset-2">
 
                      <div class="card add-animation-stopped animation-1">
 
                          <img alt="..." src="assets/img/builder/projects/project.jpg" />
 
                      </div>
 
                  </div>
 
                  <div class="col-md-4">
 
                      <div class="card add-animation-stopped animation-2">
 
                          <img alt="..." src="assets/img/builder/projects/project.jpg"/>
 
                      </div>
 
                  </div>
 
              </div>
 
          </div>
 
      </div>
 
      <div class="section section-we-are-2">
 
          <div class="text-area">
 
              <div class="container">
 
                  <div class="row">
 
                      <div class="col-md-4">
 
                          <div class="title add-animation-stopped">
 
                              <h5 class="text-gray">2 Columns Text</h5>
 
                              <h2>Who we are section.</h2>
 
                              <div class="separator-container">
 
                                  <div class="separator line-separator">✻</div>
 
                              </div>
 
                          </div>
 
                      </div>
 
                      <div class="col-md-7 col-md-offset-1">
 
                          <div class="description add-animation-stopped animation-1">
 
                              <p>We're The Company, a small design agency based in Chicago. We’ve been crafting beautiful websites, launching stunning brands and making clients happy for years.</p>
 
                              <p>With our prestigious craftsmanship, remarkable client care and passion for design, you could say we’re the ‘all singing, all dancing’ kind…</p>
 
                              <p>We think you’ll love working with us.</p>
 
                          </div>
 
                      </div>
 
                  </div>
 
              </div>
 
          </div>
 
          <div class="container">
 
              <div class="row">
 
                  <div class="col-md-10 col-md-offset-1">
 
                      <div class="row">
 
                          <div class="col-md-4">
 
                              <div class="card add-animation-stopped animation-1">
 
                                  <img alt="..." src="assets/img/builder/projects/project.jpg" />
 
                              </div>
 
                          </div>
 
                          <div class="col-md-4">
 
                              <div class="card add-animation-stopped animation-2">
 
                                  <img alt="..." src="assets/img/builder/projects/project.jpg"/>
 
                              </div>
 
                          </div>
 
                          <div class="col-md-4">
 
                              <div class="card add-animation-stopped animation-3">
 
                                  <img alt="..." src="assets/img/builder/projects/project.jpg"/>
 
                              </div>
 
                          </div>
 
                      </div>
 
                  </div>
 
              </div>
 
          </div>
 
      </div>
 
      <div class="section section-we-are-1">
 
          <div class="text-area">
 
              <div class="container">
 
                  <div class="row">
 
                      <div class="title add-animation-stopped">
 
                          <h5 class="text-gray"> 1 Column Text & Parallax</h5>
 
                          <h2>Who we are section</h2>
 
                          <div class="separator-container">
 
                              <div class="separator line-separator">✻</div>
 
                          </div>
 
                          <p class="large">Creative tim is a tight-knit team of designers, developers, writers, and strategists. For over a decade, we've helped businesses to craft honest, emotional experiences through strategy, brand development, graphic design, web design, and storytelling.</p>
 
                      </div>
 
                  </div>
 
              </div>
 
          </div>
 
          <div class="parallax full-image pattern-image">
 
              <img alt="..." class="parallax-img" src="assets/img/builder/projects/project.jpg">
 
          </div>
 
      </div>
 
      <div class="section section-we-are-2">
 
          <div class="text-area">
 
              <div class="container">
 
                  <div class="row">
 
                      <div class="col-md-4">
 
                          <div class="title add-animation-stopped">
 
                              <h5 class="text-gray">2 Columns Text & Parallax</h5>
 
                              <h2>Who we are section.</h2>
 
                              <div class="separator-container">
 
                                  <div class="separator line-separator">✻</div>
 
                              </div>
 
                          </div>
 
                      </div>
 
                      <div class="col-md-7 col-md-offset-1">
 
                          <div class="description add-animation-stopped animation-1">
 
                              <p>We're The Company, a small design agency based in Chicago. We’ve been crafting beautiful websites, launching stunning brands and making clients happy for years.</p>
 
                              <p>With our prestigious craftsmanship, remarkable client care and passion for design, you could say we’re the ‘all singing, all dancing’ kind…</p>
 
                              <p>We think you’ll love working with us.</p>
 
                          </div>
 
                      </div>
 
                  </div>
 
              </div>
 
          </div>
 
          <div class="parallax full-image pattern-image">
 
              <img alt="..." class="parallax-img" src="assets/img/builder/projects/project.jpg">
 
          </div>
 
      </div>
 
      <div class="section section-we-are-1">
 
          <div class="text-area">
 
              <div class="container">
 
                  <div class="row">
 
                      <div class="title add-animation-stopped">
 
                          <h5 class="text-gray"> 1 Column Text & Carousel</h5>
 
                          <h2>Who we are section</h2>
 
                          <div class="separator-container">
 
                              <div class="separator line-separator">✻</div>
 
                          </div>
 
                          <p class="large">Creative tim is a tight-knit team of designers, developers, writers, and strategists. For over a decade, we've helped businesses to craft honest, emotional experiences through strategy, brand development, graphic design, web design, and storytelling.</p>
 
                      </div>
 
                  </div>
 
              </div>
 
          </div>
 
          <div id="carousel">
 
              <div id="section-we-are-1" class="carousel slide add-animation-stopped add-animation-stopped-1" data-interval="20000">
 
                  <!-- Wrapper for slides -->
 
                  <div class="carousel-inner pattern-image animate">
 
                      <div class="item  active">
 
                          <img alt="..." class="full-image" src="assets/img/builder/projects/project.jpg" />
 
                      </div>
 
                      <div class="item">
 
                          <img alt="..." class="full-image" src="assets/img/builder/projects/project.jpg" />
 
                      </div>
 
                  </div>
 
                  <!-- Controls -->
 
                  <a class="left carousel-control" href="#section-we-are-1" data-slide="prev"><span class="fa fa-angle-left hidden-md hidden-lg"></span></a>     
 
                  <a class="right carousel-control" href="#section-we-are-1" data-slide="next"><span class="fa fa-angle-right hidden-ms hidden-lg"></span></a>     
 
              </div>
 
          </div>
 
      </div>
 
      <div class="section section-we-are-2">
 
          <div class="text-area">
 
              <div class="container">
 
                  <div class="row">
 
                      <div class="col-md-4">
 
                          <div class="title add-animation-stopped">
 
                              <h5 class="text-gray">2 Columns Text & Carousel</h5>
 
                              <h2>Who we are section.</h2>
 
                              <div class="separator-container">
 
                                  <div class="separator line-separator">✻</div>
 
                              </div>
 
                          </div>
 
                      </div>
 
                      <div class="col-md-7 col-md-offset-1">
 
                          <div class="description add-animation-stopped animation-1">
 
                              <p>We're The Company, a small design agency based in Chicago. We’ve been crafting beautiful websites, launching stunning brands and making clients happy for years.</p>
 
                              <p>With our prestigious craftsmanship, remarkable client care and passion for design, you could say we’re the ‘all singing, all dancing’ kind…</p>
 
                              <p>We think you’ll love working with us.</p>
 
                          </div>
 
                      </div>
 
                  </div>
 
              </div>
 
          </div>
 
          <div id="carousel">
 
              <div id="section-we-are-2" class="carousel slide add-animation-stopped add-animation-stopped-1" data-interval="20000">
 
                  <!-- Wrapper for slides -->
 
                  <div class="carousel-inner pattern-image animate">
 
                      <div class="item  active">
 
                          <img alt="..." class="full-image" src="assets/img/builder/projects/project.jpg" />
 
                      </div>
 
                      <div class="item">
 
                          <img alt="..." class="full-image" src="assets/img/builder/projects/project.jpg" />
 
                      </div>
 
                  </div>
 
                  <!-- Controls -->
 
                  <a class="left carousel-control" href="#section-we-are-2" data-slide="prev"><span class="fa fa-angle-left hidden-md hidden-lg"></span></a>     
 
                  <a class="right carousel-control" href="#section-we-are-2" data-slide="next"><span class="fa fa-angle-right hidden-ms hidden-lg"></span></a>       
 
              </div>
 
          </div>
 
      </div>
 
    <!-- END SECTION WHO WE ARE -->
 
 
    <!-- SECTIONS WHAT WE DO -->
 
      <!-- Section "What We do" example 1: Small Title & 3 columns Text  -->
 
      <div class="section section-we-do-1" id="workflow1">
 
          <div class="text-area">
 
              <div class="container">
 
                  <div class="row">
 
                      <div  class="title add-animation-stopped">
 
                          <h5 class="text-gray">Small Title & 3 columns Text</h5>
 
                          <h2>What we do section</h2>
 
                          <div class="separator-container">
 
                              <div class="separator line-separator">✻</div>
 
                          </div>
 
                      </div>
 
                  </div>
 
                  <div class="row">
 
                      <div class="col-md-10 col-md-offset-1">
 
                          <div class="row">
 
                              <div class="col-md-4">
 
                                  <div class="card add-animation-stopped animation-1">
 
                                      <h5 class="text-gray">01.</h5>
 
                                      <h3>Web Development</h3>
 
                                      <p>We're a digital agency with our roots in graphic design. We love to create awesome products and we also design for print.</p>
 
                                  </div>
 
                              </div>
 
                              <div class="col-md-4">
 
                                  <div class="card add-animation-stopped animation-2">
 
                                      <h5 class="text-gray">02.</h5>
 
                                      <h3>Interactive Design</h3>
 
                                      <p>We love making the web a better place and we love good reasons for adding to it. So join us and we will make history.</p>
 
                                  </div>
 
                              </div>
 
                              <div class="col-md-4">
 
                                  <div class="card add-animation-stopped animation-3">
 
                                      <h5 class="text-gray">03.</h5>
 
                                      <h3>Marketing Strategies</h3>
 
                                      <p>We love making the web a better place and we love good reasons for adding to it. So join us and we will make history.</p>
 
                                  </div>
 
                              </div>
 
                          </div>
 
                      </div>
 
                  </div>
 
              </div>
 
          </div>
 
      </div>
 
      <!-- End Section "What We do" example 1: Small Title & 3 columns Text  -->
 
 
      <!-- Section "What We do" example 2: Big Title & 4 columns text -->
 
      <div class="section section-we-do-1" id="workflow1">
 
          <div class="text-area">
 
              <div class="container">
 
                  <div class="row">
 
                      <div  class="title add-animation-stopped">
 
                          <h5 class="text-gray">Big Title & 4 columns text</h5>
 
                          <h2>What we do section</h2>
 
                          <div class="separator-container">
 
                              <div class="separator line-separator">✻</div>
 
                          </div>
 
                          <p>For those with pure food indulgence in mind, come next door and sate your desires with our ever changing internationally and seasonally inspired small plates.  We love food, lots of different food, just like you.</p>
 
                      </div>
 
                  </div>
 
                  <div class="row">
 
                      <div class="col-md-3">
 
                          <div class="card add-animation-stopped animation-1">
 
                              <h5 class="text-gray">01.</h5>
 
                              <h3>We Design</h3>
 
                              <p>We're a digital agency with our roots in graphic design. We love to create awesome products and we also design for print.</p>
 
                          </div>
 
                      </div>
 
                      <div class="col-md-3">
 
                          <div class="card add-animation-stopped animation-2">
 
                              <h5 class="text-gray">02.</h5>
 
                              <h3>Business Analysis</h3>
 
                              <p>We love making the web a better place and we love good reasons for adding to it. So join us and we will make history.</p>
 
                          </div>
 
                      </div>
 
                      <div class="col-md-3">
 
                          <div class="card add-animation-stopped animation-3">
 
                              <h5 class="text-gray">03.</h5>
 
                              <h3>Marketing Strategy</h3>
 
                              <p>We love to create awesome products and we do everything to make them outstanding. The brand is the item that make the difference.</p>
 
                          </div>
 
                      </div>
 
                      <div class="col-md-3">
 
                          <div class="card add-animation-stopped animation4">
 
                              <h5 class="text-gray">04.</h5>
 
                              <h3>Promotions</h3>
 
                              <p>We're a digital agency with our roots in graphic design. We love to create awesome products and we also design for print.</p>
 
                          </div>
 
                      </div>
 
                  </div>
 
              </div>
 
          </div>
 
      </div>
 
      <!-- End Section "What We do" example 2: Big Title & 4 columns text  -->
 
 
      <!-- Section "What We do" example 3: Small Title & 3 columns icons -->
 
      <div class="section section-we-do-2" id="workflow2">
 
          <div class="container">
 
              <div class="row">
 
                  <div class="title add-animation-stopped">
 
                      <h5 class="text-gray">Small Title & 3 Columns Icons</h5>
 
                      <h2>What we do section</h2>
 
                      <div class="separator-container">
 
                          <div class="separator line-separator">✻</div>
 
                      </div>
 
                  </div>
 
                  <div class="col-md-10 col-md-offset-1">
 
                      <div class="row">
 
                          <div class="col-md-4">
 
                              <div class="card add-animation-stopped animation-1">
 
                                  <div class="icon">
 
                                      <i class="pe-7s-paint"></i>
 
                                  </div>
 
                                  <h3>Design</h3>
 
                                  <p>We're a digital agency with our roots in graphic design.</p>
 
                              </div>
 
                          </div>
 
                          <div class="col-md-4">
 
                              <div class="card add-animation-stopped animation-2">
 
                                  <div class="icon">
 
                                      <i class="pe-7s-scissors"></i>
 
                                  </div>
 
                                  <h3>Adjustments</h3>
 
                                  <p>We love making the web a better place and we love good reasons for adding to it.</p>
 
                              </div>
 
                          </div>
 
                          <div class="col-md-4">
 
                              <div class="card add-animation-stopped animation-3">
 
                                  <div class="icon">
 
                                      <i class="pe-7s-plugin"></i>
 
                                  </div>
 
                                  <h3>Branding</h3>
 
                                  <p>We love to create awesome products and we do everything to make them outstanding.</p>
 
                              </div>
 
                          </div>
 
                      </div>
 
                  </div>
 
              </div>
 
          </div>
 
      </div>
 
      <!-- End Section "What We do" example 3: Small Title & 3 columns icons -->
 
 
      <!-- Section "What We do" example 4: Big Title & 4 columns icons -->
 
      <div class="section section-we-do-2" id="workflow2">
 
          <div class="container">
 
              <div class="row">
 
                  <div class="title add-animation-stopped">
 
                      <h5 class="text-gray">Big Title & 4 Columns Icons</h5>
 
                      <h2>What we do section</h2>
 
                      <div class="separator-container">
 
                          <div class="separator line-separator">✻</div>
 
                      </div>
 
                      <p>For those with pure food indulgence in mind, come next door and sate your desires with our ever changing internationally and seasonally inspired small plates.</p>
 
                  </div>
 
                  <div class="col-md-3">
 
                      <div class="card add-animation-stopped animation-1">
 
                          <div class="icon">
 
                              <i class="pe-7s-piggy"></i>
 
                          </div>
 
                          <h3>Marketing</h3>
 
                          <p>We love making the web a better place and we love good reasons for adding to it.</p>
 
                      </div>
 
                  </div>
 
                  <div class="col-md-3">
 
                      <div class="card add-animation-stopped animation-2">
 
                          <div class="icon">
 
                              <i class="pe-7s-headphones"></i>
 
                          </div>
 
                          <h3>Customer Support</h3>
 
                          <p>We're a digital agency with our roots in graphic design.</p>
 
                      </div>
 
                  </div>
 
                  <div class="col-md-3">
 
                      <div class="card add-animation-stopped animation-3">
 
                          <div class="icon">
 
                              <i class="pe-7s-pen"></i>
 
                          </div>
 
                          <h3>Story writing</h3>
 
                          <p>We love making the web a better place and we love good reasons for adding to it.</p>
 
                      </div>
 
                  </div>
 
                  <div class="col-md-3">
 
                      <div class="card add-animation-stopped animation-4">
 
                          <div class="icon">
 
                              <i class="pe-7s-plugin"></i>
 
                          </div>
 
                          <h3>Branding</h3>
 
                          <p>We love to create awesome products and we do everything to make them outstanding.</p>
 
                      </div>
 
                  </div>
 
              </div>
 
          </div>
 
      </div>
 
      <!-- End Section "What We do" example 3: Small Title & 3 columns icons -->
 
    <!-- END SECTIONS WHAT WE DO -->
 
 
    <!-- SECTION WHAT WE MADE -->
 
      <!-- Section "Our Projects" example 1: 2 Columns Full Width -->
 
      <div class="section section-we-made-1 section-with-hover" id="projects1">
 
          <div class="text-area">
 
              <div class="title add-animation-stopped">
 
                  <h5 class="text-gray">2 Columns Full width</h5>
 
                  <h2>Our Projects</h2>
 
                  <div class="separator-container">
 
                      <div class="separator line-separator">✻</div>
 
                  </div>
 
                  <p>In this area you can write some interesting description about the projects that your team created. Don't forget to add some awesome images under this description, like the beautiful ones that we added.</p>
 
              </div>
 
          </div>
 
          <div class="row" id="projectsLine1">
 
              <div class="col-md-6">
 
                  <div class="project add-animation-stopped animation-1">
 
                      <img alt="..." src="assets/img/builder/projects/project.jpg"/>
 
                      <a class="over-area color-1" href="javascript:void(0)" onClick="rubik.showModal(this)" data-target="project_1">
 
                          <div class="content">
 
                              <h4>Example No.1</h4>
 
                              <p>Click to open Rubik modal.</p>
 
                          </div>
 
                      </a>
 
                  </div>
 
              </div>
 
              <div class="col-md-6">
 
                  <div class="project add-animation-stopped animation-2">
 
                      <img alt="..." src="assets/img/builder/projects/project.jpg"/>
 
                      <a class="over-area color-1 " href="javascript:void(0)" onClick="rubik.showModal(this)" data-target="project_2">
 
                          <div class="content">
 
                              <h4>Example No.2</h4>
 
                              <p>Click to open Rubik modal.</p>
 
                          </div>
 
                      </a>
 
                  </div>
 
              </div>
 
              <div class="col-md-6">
 
                  <div class="project add-animation-stopped animation-1">
 
                      <img alt="..." src="assets/img/builder/projects/project.jpg"/>
 
                      <a class="over-area color-1 " href="javascript:void(0)" onClick="rubik.showModal(this)" data-target="project_3">
 
                          <div class="content">
 
                              <h4>Example No.3</h4>
 
                              <p>Click to open Rubik modal.</p>
 
                          </div>
 
                      </a>
 
                  </div>
 
              </div>
 
              <div class="col-md-6">
 
                  <div class="project add-animation-stopped animation-2">
 
                      <img alt="..." src="assets/img/builder/projects/project.jpg"/>
 
                      <a class="over-area color-1 " href="#" target="_blank">
 
                          <div class="content">
 
                              <h4>Example No.4</h4>
 
                              <p>Click to open a new link.</p>
 
                          </div>
 
                      </a>
 
                  </div>
 
              </div>
 
          </div>
 
      </div>
 
      <!-- End Section "Our Projects" example 1: 2 Columns Full Width -->
 
 
      <!-- Section "Our Projects" example 2: 3 Columns Full Width -->
 
      <div class="section section-we-made-1 section-with-hover" id="projects1">
 
          <div class="text-area">
 
              <div class="title add-animation-stopped">
 
                  <h5 class="text-gray">3 Columns Full Width & Color Hover</h5>
 
                  <h2>Our Projects</h2>
 
                  <div class="separator-container">
 
                      <div class="separator line-separator">✻</div>
 
                  </div>
 
                  <p>In this area you can write some interesting description about the projects that your team created. Don't forget to add some awesome images under this description, like the beautiful ones that we added.</p>
 
              </div>
 
          </div>
 
          <div class="row" id="projectsLine1">
 
              <div class="col-md-4">
 
                  <div class="project add-animation-stopped animation-1">
 
                      <img alt="..." src="assets/img/builder/projects/project.jpg"/>
 
                      <a class="over-area color-2" href="javascript:void(0)" onClick="rubik.showModal(this)" data-target="project_1">
 
                          <div class="content">
 
                              <h4>Example No.1</h4>
 
                              <p>Click to open Rubik modal.</p>
 
                          </div>
 
                      </a>
 
                  </div>
 
              </div>
 
              <div class="col-md-4">
 
                  <div class="project add-animation-stopped animation-2">
 
                      <img alt="..." src="assets/img/builder/projects/project.jpg"/>
 
                      <a class="over-area color-1" href="javascript:void(0)" onClick="rubik.showModal(this)" data-target="project_2">
 
                          <div class="content">
 
                              <h4>Example No.2</h4>
 
                              <p>Click to open Rubik modal.</p>
 
                          </div>
 
                      </a>
 
                  </div>
 
              </div>
 
              <div class="col-md-4">
 
                  <div class="project add-animation-stopped animation-3">
 
                      <img alt="..." src="assets/img/builder/projects/project.jpg"/>                                   
 
                      <a class="over-area color-4 " href="javascript:void(0)" onClick="rubik.showModal(this)" data-target="project_2">
 
                          <div class="content">
 
                              <h4>Example No.2</h4>
 
                              <p>Click to open Rubik modal.</p>
 
                          </div>
 
                      </a>
 
                  </div>
 
              </div>
 
              <div class="col-md-4">
 
                  <div class="project add-animation-stopped animation-1">
 
                      <img alt="..." src="assets/img/builder/projects/project.jpg"/>
 
                      <a class="over-area color-4" href="javascript:void(0)" onClick="rubik.showModal(this)" data-target="project_3">
 
                          <div class="content">
 
                              <h4>Example No.3</h4>
 
                              <p>Click to open Rubik modal.</p>
 
                          </div>
 
                      </a>
 
                  </div>
 
              </div>
 
              <div class="col-md-4">
 
                  <div class="project add-animation-stopped animation-2">
 
                      <img alt="..." src="assets/img/builder/projects/project.jpg"/>
 
                      <a class="over-area color-2" href="javascript:void(0)" onClick="rubik.showModal(this)" data-target="project_3">
 
                          <div class="content">
 
                              <h4>Example No.3</h4>
 
                              <p>Click to open Rubik modal.</p>
 
                          </div>
 
                      </a>
 
                  </div>
 
              </div>
 
              <div class="col-md-4">
 
                  <div class="project add-animation-stopped animation-3">
 
                      <img alt="..." src="assets/img/builder/projects/project.jpg"/>
 
                      <a class="over-area color-3" href="#" target="_blank">
 
                          <div class="content">
 
                              <h4>Example No.4</h4>
 
                              <p>Click to open a new link.</p>
 
                          </div>
 
                      </a>
 
                  </div>
 
              </div>
 
          </div>
 
      </div>
 
      <!-- End Section "Our Projects" example 2: 3 Columns Full Width -->
 
 
      <!-- Section "Our Projects" example 3: 2 Columns Boxed -->
 
      <div class="section section-we-made-3 section-with-hover" id="projects1">
 
          <div class="text-area">
 
              <div class="title add-animation-stopped">
 
                  <h5 class="text-gray">2 Columns Boxed</h5>
 
                  <h2>Our Projects</h2>
 
                  <div class="separator-container">
 
                      <div class="separator line-separator">✻</div>
 
                  </div>
 
                  <p>In this area you can write some interesting description about the projects that your team created. Don't forget to add some awesome images under this description, like the beautiful ones that we added.</p>
 
              </div>
 
          </div>
 
          <div class="container">
 
              <div class="row" id="projectsLine1">
 
                  <div class="col-md-6">
 
                      <div class="project add-animation-stopped animation-1">
 
                          <img alt="..." src="assets/img/builder/projects/project.jpg"/>
 
                          <a class="over-area color-1" href="javascript:void(0)" onClick="rubik.showModal(this)" data-target="project_1">
 
                              <div class="content">
 
                                  <h4>Example No.1</h4>
 
                                  <p>Click to open Rubik modal.</p>
 
                              </div>
 
                          </a>
 
                      </div>
 
                  </div>
 
                  <div class="col-md-6">
 
                      <div class="project add-animation-stopped animation-2">
 
                          <img alt="..." src="assets/img/builder/projects/project.jpg"/>
 
                          <a class="over-area color-1 " href="javascript:void(0)" onClick="rubik.showModal(this)" data-target="project_2">
 
                              <div class="content">
 
                                  <h4>Example No.2</h4>
 
                                  <p>Click to open Rubik modal.</p>
 
                              </div>
 
                          </a>
 
                      </div>
 
                  </div>
 
                  <div class="col-md-6">
 
                      <div class="project add-animation-stopped animation-1">
 
                          <img alt="..." src="assets/img/builder/projects/project.jpg"/>
 
                          <a class="over-area color-1 " href="javascript:void(0)" onClick="rubik.showModal(this)" data-target="project_3">
 
                              <div class="content">
 
                                  <h4>Example No.3</h4>
 
                                  <p>Click to open Rubik modal.</p>
 
                              </div>
 
                          </a>
 
                      </div>
 
                  </div>
 
                  <div class="col-md-6">
 
                      <div class="project add-animation-stopped animation-2">
 
                          <img alt="..." src="assets/img/builder/projects/project.jpg"/>
 
                          <a class="over-area color-1 " href="#" target="_blank">
 
                              <div class="content">
 
                                  <h4>Example No.4</h4>
 
                                  <p>Click to open a new link.</p>
 
                              </div>
 
                          </a>
 
                      </div>
 
                  </div>
 
              </div>
 
          </div>
 
      </div>
 
      <!-- End Section "Our Projects" example 3: 2 Columns Boxed -->
 
 
      <!-- Section "Our Projects" example 4: 3 Columns Boxed & Color Hover -->
 
      <div class="section section-we-made-3 section-with-hover" id="projects1">
 
          <div class="text-area">
 
              <div class="title add-animation-stopped">
 
                  <h5 class="text-gray">3 Columns Boxed & Color Hover</h5>
 
                  <h2>Our Projects</h2>
 
                  <div class="separator-container">
 
                      <div class="separator line-separator">✻</div>
 
                  </div>
 
                  <p>In this area you can write some interesting description about the projects that your team created. Don't forget to add some awesome images under this description, like the beautiful ones that we added.</p>
 
              </div>
 
          </div>
 
          <div class="container">
 
              <div class="row" id="projectsLine1">
 
                  <div class="col-md-4">
 
                      <div class="project add-animation-stopped animation-1">
 
                          <img alt="..." src="assets/img/builder/projects/project.jpg"/>
 
                          <a class="over-area color-2" href="javascript:void(0)" onClick="rubik.showModal(this)" data-target="project_1">
 
                              <div class="content">
 
                                  <h4>Example No.1</h4>
 
                                  <p>Click to open Rubik modal.</p>
 
                              </div>
 
                          </a>
 
                      </div>
 
                  </div>
 
                  <div class="col-md-4">
 
                      <div class="project add-animation-stopped animation-2">
 
                          <img alt="..." src="assets/img/builder/projects/project.jpg"/>
 
                          <a class="over-area color-1" href="javascript:void(0)" onClick="rubik.showModal(this)" data-target="project_2">
 
                              <div class="content">
 
                                  <h4>Example No.2</h4>
 
                                  <p>Click to open Rubik modal.</p>
 
                              </div>
 
                          </a>
 
                      </div>
 
                  </div>
 
                  <div class="col-md-4">
 
                      <div class="project add-animation-stopped animation-3">
 
                          <img alt="..." src="assets/img/builder/projects/project.jpg"/>                                   
 
                          <a class="over-area color-4 " href="javascript:void(0)" onClick="rubik.showModal(this)" data-target="project_2">
 
                              <div class="content">
 
                                  <h4>Example No.2</h4>
 
                                  <p>Click to open Rubik modal.</p>
 
                              </div>
 
                          </a>
 
                      </div>
 
                  </div>
 
                  <div class="col-md-4">
 
                      <div class="project add-animation-stopped animation-1">
 
                          <img alt="..." src="assets/img/builder/projects/project.jpg"/>
 
                          <a class="over-area color-4" href="javascript:void(0)" onClick="rubik.showModal(this)" data-target="project_3">
 
                              <div class="content">
 
                                  <h4>Example No.3</h4>
 
                                  <p>Click to open Rubik modal.</p>
 
                              </div>
 
                          </a>
 
                      </div>
 
                  </div>
 
                  <div class="col-md-4">
 
                      <div class="project add-animation-stopped animation-2">
 
                          <img alt="..." src="assets/img/builder/projects/project.jpg"/>
 
                          <a class="over-area color-2" href="javascript:void(0)" onClick="rubik.showModal(this)" data-target="project_3">
 
                              <div class="content">
 
                                  <h4>Example No.3</h4>
 
                                  <p>Click to open Rubik modal.</p>
 
                              </div>
 
                          </a>
 
                      </div>
 
                  </div>
 
                  <div class="col-md-4">
 
                      <div class="project add-animation-stopped animation-3">
 
                          <img alt="..." src="assets/img/builder/projects/project.jpg"/>
 
                          <a class="over-area color-3" href="#" target="_blank">
 
                              <div class="content">
 
                                  <h4>Example No.4</h4>
 
                                  <p>Click to open a new link.</p>
 
                              </div>
 
                          </a>
 
                      </div>
 
                  </div>
 
              </div>
 
          </div>
 
      </div>
 
      <!-- End Section "Our Projects" example 4: 3 Columns Boxed & Color Hover -->
 
 
      <!-- Section "Our Projects" example 5: Single Line Photos -->
 
      <div class="section section-we-made-2 section-with-hover" id="projects2">
 
          <div class="projects">
 
              <div class="text-area">
 
                  <div class="title add-animation-stopped">
 
                      <h5 class="text-gray">Example No.5</h5>
 
                      <h2>Projects section</h2>
 
                      <div class="separator-container">
 
                          <div class="separator line-separator">✻</div>
 
                      </div>
 
                  </div>
 
              </div>
 
              <div class="info add-animation-stopped animation-1">
 
                  <p class="text-center text-gray">One of our best projects outside of America</p>
 
              </div>
 
              <div class="row scroller">
 
                  <div class="col-lg-3 col-md-6 col-sm-6">
 
                      <div class="project add-animation-stopped animation-1">
 
                          <img alt="..." src="assets/img/builder/projects/project.jpg"/>
 
                      </div>
 
                  </div>
 
                  <div class="col-lg-3 col-md-6 col-sm-6">
 
                      <div class="project add-animation-stopped animation-2">
 
                          <img alt="..." src="assets/img/builder/projects/project.jpg"/>
 
                      </div>
 
                  </div>
 
                  <div class="col-lg-3 col-md-6 col-sm-6">
 
                      <div class="project add-animation-stopped animation-2">
 
                          <img alt="..." src="assets/img/builder/projects/project.jpg"/>
 
                      </div>
 
                  </div>
 
                  <div class="col-lg-3 col-md-6 col-sm-6">
 
                      <div class="project add-animation-stopped animation-4">
 
                          <img alt="..." src="assets/img/builder/projects/project.jpg"/>
 
                          <a class="over-area color-1 color-1" href="#" target="_blank">
 
                              <div class="content">
 
                                  <h4>America Trip</h4>
 
                                  <p>Click to open a new link.</p>
 
                              </div>
 
                          </a>
 
                      </div>
 
                  </div>
 
              </div>
 
          </div>
 
      </div>
 
      <!-- End Section "Our Projects" example 5: Single Line Photos -->
 
 
      <!-- Section "Our Projects" example 6: Multiple Lines Photos -->
 
      <div class="section section-we-made-2 section-with-hover" id="projects2">
 
          <div class="projects">
 
              <div class="text-area">
 
                  <div class="title add-animation-stopped">
 
                      <h5 class="text-gray">Multiple Lines Photos</h5>
 
                      <h2>Projects section</h2>
 
                      <div class="separator-container">
 
                          <div class="separator line-separator">✻</div>
 
                      </div>
 
                  </div>
 
              </div>
 
              <div class="info add-animation-stopped animation-1">
 
                  <p class="text-center text-gray">One of our best projects outside of America</p>
 
              </div>
 
              <div class="row scroller">
 
                  <div class="col-lg-3 col-md-6 col-sm-6">
 
                      <div class="project add-animation-stopped animation-1">
 
                          <img alt="..." src="assets/img/builder/projects/project.jpg"/>
 
                      </div>
 
                  </div>
 
                  <div class="col-lg-3 col-md-6 col-sm-6">
 
                      <div class="project add-animation-stopped animation-2">
 
                          <img alt="..." src="assets/img/builder/projects/project.jpg"/>
 
                      </div>
 
                  </div>
 
                  <div class="col-lg-3 col-md-6 col-sm-6">
 
                      <div class="project add-animation-stopped animation-3">
 
                          <img alt="..." src="assets/img/builder/projects/project.jpg"/>
 
                      </div>
 
                  </div>
 
                  <div class="col-lg-3 col-md-6 col-sm-6">
 
                      <div class="project add-animation-stopped animation-4">
 
                          <img alt="..." src="assets/img/builder/projects/project.jpg"/>
 
                          <a class="over-area color-1 color-1" href="#" target="_blank">
 
                              <div class="content">
 
                                  <h4>America Trip</h4>
 
                                  <p>Click to open a new link.</p>
 
                              </div>
 
                          </a>
 
                      </div>
 
                  </div>
 
              </div>
 
              <div class="info add-animation-stopped animation-1">
 
                  <p class="text-center text-gray">Europe Project that we are proud of:</p>
 
              </div>
 
              <div class="row scroller">
 
                  <div class="col-lg-3 col-md-6 col-sm-6">
 
                      <div class="project add-animation-stopped animation-1">
 
                          <img alt="..." src="assets/img/builder/projects/project.jpg"/>
 
                      </div>
 
                  </div>
 
                  <div class="col-lg-3 col-md-6 col-sm-6">
 
                      <div class="project add-animation-stopped animation-2">
 
                          <img alt="..." src="assets/img/builder/projects/project.jpg"/>
 
                      </div>
 
                  </div>
 
                  <div class="col-lg-3 col-md-6 col-sm-6">
 
                      <div class="project add-animation-stopped animation-3">
 
                          <img alt="..." src="assets/img/builder/projects/project.jpg"/>
 
                      </div>
 
                  </div>
 
                  <div class="col-lg-3 col-md-6 col-sm-6">
 
                      <div class="project add-animation-stopped animation-4">
 
                          <img alt="..." src="assets/img/builder/projects/project.jpg"/>
 
                          <a class="over-area color-1 color-1" href="#" target="_blank">
 
                              <div class="content">
 
                                  <h4>Europe Trip</h4>
 
                                  <p>Click to open a new link.</p>
 
                              </div>
 
                          </a>
 
                      </div>
 
                  </div>
 
              </div>
 
          </div>
 
      </div>
 
      <!-- End Section "Our Projects" example 6: Multiple Lines Photos -->
 
    <!-- END SECTION WHAT WE MADE  -->               
 
 
    <!--  SECTION CLIENTS -->
 
      <!-- Section "Clients" example 1: 3 Columns Logos -->
 
      <div class="section section-clients-1" id="clients1">
 
          <div class="container">
 
              <div class="text-area">
 
                  <div class="title add-animation-stopped">
 
                      <h5 class="text-gray">3 Columns Logos</h5>
 
                      <h2>Clients Section</h2>
 
                      <div class="separator-container">
 
                          <div class="separator line-separator">✻</div>
 
                      </div>
 
                      <p>Here can be a small description about your working process with your clients.</p>
 
                  </div>
 
              </div>
 
              <div class="list-logos">
 
                  <div class="row">
 
                      <div class="col-md-4">
 
                          <div class="logo add-animation-stopped animation-1">
 
                              <a href="#">
 
                              <img alt="..." src="assets/img/clients/forbes.svg"/>
 
                              <img alt="..." src="assets/img/clients/forbes_h.svg"/>
 
                              </a>
 
                          </div>
 
                      </div>
 
                      <div class="col-md-4">
 
                          <div class="logo add-animation-stopped animation-2">
 
                              <a href="#">
 
                              <img alt="..." src="assets/img/clients/intel.svg"/>
 
                              <img alt="..." src="assets/img/clients/intel_h.svg"/>
 
                              </a>
 
                          </div>
 
                      </div>
 
                      <div class="col-md-4">
 
                          <div class="logo add-animation-stopped animation-3">
 
                              <a href="#">
 
                              <img alt="..." src="assets/img/clients/apple.svg"/>
 
                              <img alt="..." src="assets/img/clients/apple_h.svg"/>
 
                              </a>
 
                          </div>
 
                      </div>
 
                      <div class="col-md-4">
 
                          <div class="logo add-animation-stopped animation-1">
 
                              <a href="#">
 
                              <img alt="..." src="assets/img/clients/vaio.svg"/>
 
                              <img alt="..." src="assets/img/clients/vaio_h.svg"/>
 
                              </a>
 
                          </div>
 
                      </div>
 
                      <div class="col-md-4">
 
                          <div class="logo add-animation-stopped animation-2">
 
                              <a href="#">
 
                              <img alt="..." src="assets/img/clients/hp.svg"/>
 
                              <img alt="..." src="assets/img/clients/hp_h.svg"/>
 
                              </a>
 
                          </div>
 
                      </div>
 
                      <div class="col-md-4">
 
                          <div class="logo add-animation-stopped animation-3">
 
                              <a href="#">
 
                              <img alt="..." src="assets/img/clients/samsung.svg"/>
 
                              <img alt="..." src="assets/img/clients/samsung_h.svg"/>
 
                              </a>
 
                          </div>
 
                      </div>
 
                      <div class="col-md-4">
 
                          <div class="logo add-animation-stopped animation-1">
 
                              <a href="#">
 
                              <img alt="..." src="assets/img/clients/canon.svg"/>
 
                              <img alt="..." src="assets/img/clients/canon_h.svg"/>
 
                              </a>
 
                          </div>
 
                      </div>
 
                      <div class="col-md-4">
 
                          <div class="logo add-animation-stopped animation-2">
 
                              <a href="#">
 
                              <img alt="..." src="assets/img/clients/siemens.svg"/>
 
                              <img alt="..." src="assets/img/clients/siemens_h.svg"/>
 
                              </a>
 
                          </div>
 
                      </div>
 
                      <div class="col-md-4">
 
                          <div class="logo add-animation-stopped animation-3">
 
                              <a href="#">
 
                              <img alt="..." src="assets/img/clients/lastfm.svg"/>
 
                              <img alt="..." src="assets/img/clients/lastfm_h.svg"/>
 
                              </a>
 
                          </div>
 
                      </div>
 
                  </div>
 
              </div>
 
          </div>
 
      </div>
 
      <!-- End Section "Clients" example 1: 3 Columns Logos -->
 
 
 
      <!-- Section "Clients" example 1: 4 Columns Logos -->
 
      <div class="section section-clients-1" id="clients1">
 
          <div class="container">
 
              <div class="text-area">
 
                  <div class="title add-animation-stopped">
 
                      <h5 class="text-gray">4 Columns Logos</h5>
 
                      <h2>Clients Section</h2>
 
                      <div class="separator-container">
 
                          <div class="separator line-separator">✻</div>
 
                      </div>
 
                      <p>Here can be a small description about your working process with your clients.</p>
 
                  </div>
 
              </div>
 
              <div class="list-logos">
 
                  <div class="row">
 
                      <div class="col-md-3">
 
                          <div class="logo add-animation-stopped animation-1">
 
                              <a href="#">
 
                              <img alt="..." src="assets/img/clients/forbes.svg"/>
 
                              <img alt="..." src="assets/img/clients/forbes_h.svg"/>
 
                              </a>
 
                          </div>
 
                      </div>
 
                      <div class="col-md-3">
 
                          <div class="logo add-animation-stopped animation-2">
 
                              <a href="#">
 
                              <img alt="..." src="assets/img/clients/intel.svg"/>
 
                              <img alt="..." src="assets/img/clients/intel_h.svg"/>
 
                              </a>
 
                          </div>
 
                      </div>
 
                      <div class="col-md-3">
 
                          <div class="logo add-animation-stopped animation-3">
 
                              <a href="#">
 
                              <img alt="..." src="assets/img/clients/apple.svg"/>
 
                              <img alt="..." src="assets/img/clients/apple_h.svg"/>
 
                              </a>
 
                          </div>
 
                      </div>
 
                      <div class="col-md-3">
 
                          <div class="logo add-animation-stopped animation-1">
 
                              <a href="#">
 
                              <img alt="..." src="assets/img/clients/vaio.svg"/>
 
                              <img alt="..." src="assets/img/clients/vaio_h.svg"/>
 
                              </a>
 
                          </div>
 
                      </div>
 
                      <div class="col-md-3">
 
                          <div class="logo add-animation-stopped animation-2">
 
                              <a href="#">
 
                              <img alt="..." src="assets/img/clients/hp.svg"/>
 
                              <img alt="..." src="assets/img/clients/hp_h.svg"/>
 
                              </a>
 
                          </div>
 
                      </div>
 
                      <div class="col-md-3">
 
                          <div class="logo add-animation-stopped animation-3">
 
                              <a href="#">
 
                              <img alt="..." src="assets/img/clients/samsung.svg"/>
 
                              <img alt="..." src="assets/img/clients/samsung_h.svg"/>
 
                              </a>
 
                          </div>
 
                      </div>
 
                      <div class="col-md-3">
 
                          <div class="logo add-animation-stopped animation-1">
 
                              <a href="#">
 
                              <img alt="..." src="assets/img/clients/canon.svg"/>
 
                              <img alt="..." src="assets/img/clients/canon_h.svg"/>
 
                              </a>
 
                          </div>
 
                      </div>
 
                      <div class="col-md-3">
 
                          <div class="logo add-animation-stopped animation-2">
 
                              <a href="#">
 
                              <img alt="..." src="assets/img/clients/siemens.svg"/>
 
                              <img alt="..." src="assets/img/clients/siemens_h.svg"/>
 
                              </a>
 
                          </div>
 
                      </div>
 
                  </div>
 
              </div>
 
          </div>
 
      </div>
 
      <!-- End Section "Clients" example 2: 4 Columns Logos -->
 
 
      <!-- Section "Clients" example 3: Personal Testimonial -->
 
      <div class="section section-clients-2" id="clients2">
 
          <div class="container">
 
              <div class="title add-animation-stopped">
 
                  <h5 class="text-gray">Personal Testimonial</h5>
 
                  <h2>What people say</h2>
 
                  <div class="separator-container">
 
                      <div class="separator line-separator">✻</div>
 
                  </div>
 
              </div>
 
              <div class="tab-content quotes add-animation-stopped animation-2">
 
                  <div class="tab-pane active" id="canon">
 
                      <p class="large">Larger, yet dramatically thinner. More powerful, but remarkably power efficient. With a smooth metal surface that seamlessly meets the new Retina HD display.
 
                          It’s one continuous form where hardware and software function in perfect unison, creating a new generation of phone that’s better by any measure but efficient.
 
                      </p>
 
                  </div>
 
              </div>
 
              <ul class="nav nav-text list-logos add-animation-stopped animation-1" role="tablist">
 
                  <li class="active">
 
                      <h3>
 
                          <a href="#">Mike Thomson</a>
 
                      </h3>
 
                  </li>
 
              </ul>
 
          </div>
 
      </div>
 
      <!-- End Section "Clients" example 3: Personal Testimonial -->
 
 
      <!-- Section "Clients" example 4: Companies Feedback -->
 
      <div class="section section-clients-2" id="clients2">
 
          <div class="container">
 
              <div class="title add-animation-stopped">
 
                  <h5 class="text-gray">Companies Feedback</h5>
 
                  <h2>What our partners say</h2>
 
                  <div class="separator-container">
 
                      <div class="separator line-separator">✻</div>
 
                  </div>
 
              </div>
 
              <div class="tab-content quotes add-animation-stopped animation-2">
 
                  <div class="tab-pane active" id="canon-4">
 
                      <p class="large">Larger, yet dramatically thinner. More powerful, but remarkably power efficient. With a smooth metal surface that seamlessly meets the new Retina HD display.
 
                          It’s one continuous form where hardware and software function in perfect unison, creating a new generation of phone that’s better by any measure but efficient.
 
                      </p>
 
                  </div>
 
                  <div class="tab-pane" id="samsung-4">
 
                      <p class="large">The first thing you notice when you hold the phone is how great it feels in your hand. The cover glass curves down around the sides to meet the anodized aluminum enclosure in a remarkable, simplified design.
 
                          There are no distinct edges. No gaps. Just a smooth, seamless bond of metal and glass that feels like one continuous surface.
 
                      </p>
 
                  </div>
 
                  <div class="tab-pane" id="sony-4">
 
                      <p class="large">It’s one continuous form where hardware and software function in perfect unison, creating a new generation of phone that’s better by any measure.
 
                          Larger, yet dramatically thinner. More powerful, but remarkably power efficient. With a smooth metal surface that seamlessly meets the new Retina HD display.
 
                      </p>
 
                  </div>
 
                  <div class="tab-pane" id="intel-4">
 
                      <p class="large">From the seamless transition of glass and metal to the streamlined profile, every detail was carefully considered to enhance your experience. So while its display is larger, the phone feels just right.
 
                          It’s one continuous form where hardware and software function in perfect unison, creating a new generation of phone that’s better by any measure.
 
                      </p>
 
                  </div>
 
              </div>
 
              <ul class="nav nav-text list-logos add-animation-stopped animation-1" role="tablist">
 
                  <li class="active">
 
                      <a href="#canon-4" role="tab" data-toggle="tab">
 
                      <img alt="..." src="assets/img/clients/canon.svg"/>
 
                      <img alt="..." src="assets/img/clients/canon_h.svg"/>
 
                      </a>
 
                  </li>
 
                  <li>
 
                      <a href="#samsung-4" role="tab" data-toggle="tab">
 
                      <img alt="..." src="assets/img/clients/samsung.svg"/>
 
                      <img alt="..." src="assets/img/clients/samsung_h.svg"/>
 
                      </a>
 
                  </li>
 
                  <li>
 
                      <a href="#sony-4" role="tab" data-toggle="tab">
 
                      <img alt="..." src="assets/img/clients/sony.svg"/>
 
                      <img alt="..." src="assets/img/clients/sony_h.svg"/>
 
                      </a>
 
                  </li>
 
                  <li>
 
                      <a href="#intel-4" role="tab" data-toggle="tab">
 
                      <img alt="..." src="assets/img/clients/intel.svg"/>
 
                      <img alt="..." src="assets/img/clients/intel_h.svg"/>
 
                      </a>
 
                  </li>
 
              </ul>
 
          </div>
 
      </div>
 
      <!-- Section "Clients" example 4: Companies Testimonials -->
 
    <!-- END SECTION CLIENTS -->
 
 
    <!-- SECTION TEAM -->
 
      <!-- Section "Team" example 1: Title & Full Image -->
 
      <div class="section section-team-1" id="team1">
 
          <div class="container">
 
              <div class="text-area">
 
                  <div class="title add-animation-stopped">
 
                      <h5 class="text-gray">Title & Full Image</h5>
 
                      <h2>Team Section</h2>
 
                      <div class="separator-container">
 
                          <div class="separator line-separator">✻</div>
 
                      </div>
 
                      <p>Here you can write an interesting description about your team and you can also place a beautiful image on the background.</p>
 
                  </div>
 
              </div>
 
          </div>
 
          <div class="full-image gradient-image">
 
              <img alt="..." src="assets/img/builder/team.jpg"/>
 
          </div>
 
      </div>
 
      <!-- End Section "Team" example 1: Description & Full Image -->
 
 
      <!-- Section "Team" example 2: Left Title & 3 Profiles -->
 
      <div class="section section-team-4" id="team4">
 
          <div class="container">
 
              <div class="row">
 
                  <div class="col-md-4">
 
                      <div class="title add-animation-stopped">
 
                          <h5>Left Title & 3 Profiles</h5>
 
                          <h2>Team Section</h2>
 
                          <div class="separator-container">
 
                              <div class="separator line-separator">✻</div>
 
                          </div>
 
                      </div>
 
                  </div>
 
                  <div class="col-md-7 col-offset-1">
 
                      <div class="team">
 
                          <div class="row">
 
                              <div class="col-md-4">
 
                                  <div class="member add-animation-stopped animation-2">
 
                                      <img alt="..." class="img-circle" src="assets/img/faces/face_10.jpg"/>
 
                                      <div class="description">
 
                                          <h3 class="big-text">Paul</h3>
 
                                          <p class="small-text">Architect</p>
 
                                      </div>
 
                                  </div>
 
                              </div>
 
                              <div class="col-md-4">
 
                                  <div class="member add-animation-stopped animation-3">
 
                                      <img alt="..." class="img-circle" src="assets/img/faces/face_12.jpg"/>
 
                                      <div class="description">
 
                                          <h3 class="big-text">Andrew</h3>
 
                                          <p class="small-text">Designer</p>
 
                                      </div>
 
                                  </div>
 
                              </div>
 
                              <div class="col-md-4">
 
                                  <div class="member add-animation-stopped animation-4">
 
                                      <img alt="..." class="img-circle" src="assets/img/faces/face_11.jpg"/>
 
                                      <div class="description">
 
                                          <h3 class="big-text">Rick</h3>
 
                                          <p class="small-text">Designer</p>
 
                                      </div>
 
                                  </div>
 
                              </div>
 
                          </div>
 
                      </div>
 
                  </div>
 
              </div>
 
          </div>
 
      </div>
 
 
      <!-- Section "Team" example 3: 4 Profiles Style 1 -->
 
      <div class="section section-team-2" id="team2">
 
          <div class="container">
 
              <div class="text-area">
 
                  <div class="title add-animation-stopped">
 
                      <h5 class="text-gray">4 Profiles Style 1</h5>
 
                      <h2>Team Section</h2>
 
                      <div class="separator-container">
 
                          <div class="separator line-separator">✻</div>
 
                      </div>
 
                  </div>
 
              </div>
 
              <div class="team">
 
                  <div class="row">
 
                      <div class="col-md-3">
 
                          <div class="member add-animation-stopped animation-1">
 
                              <img alt="..." class="img-circle" src="assets/img/faces/face_10.jpg"/>
 
                              <div class="description">
 
                                  <h3 class="big-text">Michael</h3>
 
                                  <p class="small-text">Co-Founder</p>
 
                              </div>
 
                              <div class="social-buttons">
 
                                  <button href="#" class="btn btn-social btn-simple"><i class="fa fa-facebook-square"></i></button>
 
                                  <button href="#" class="btn btn-social btn-simple"><i class="fa fa-twitter"></i></button>
 
                                  <button href="#" class="btn btn-social btn-simple"><i class="fa fa-linkedin"></i></button>
 
                              </div>
 
                          </div>
 
                      </div>
 
                      <div class="col-md-3">
 
                          <div class="member add-animation-stopped animation-2">
 
                              <img alt="..." class="img-circle" src="assets/img/faces/face_9.jpg"/>
 
                              <div class="description">
 
                                  <h3 class="big-text">George</h3>
 
                                  <p class="small-text">Co-Founder</p>
 
                              </div>
 
                              <div class="social-buttons">
 
                                  <button href="#" class="btn btn-social btn-simple"><i class="fa fa-instagram"></i></button>
 
                                  <button href="#" class="btn btn-social btn-simple"><i class="fa fa-twitter"></i></button>
 
                                  <button href="#" class="btn btn-social btn-simple"><i class="fa fa-flickr"></i></button>
 
                              </div>
 
                          </div>
 
                      </div>
 
                      <div class="col-md-3">
 
                          <div class="member add-animation-stopped animation-3">
 
                              <img alt="..." class="img-circle" src="assets/img/faces/face_11.jpg"/>
 
                              <div class="description">
 
                                  <h3 class="big-text">Andrew</h3>
 
                                  <p class="small-text">Product Designer</p>
 
                              </div>
 
                              <div class="social-buttons">
 
                                  <button href="#" class="btn btn-social btn-simple"><i class="fa fa-linkedin"></i></button>
 
                                  <button href="#" class="btn btn-social btn-simple"><i class="fa fa-instagram"></i></button>
 
                                  <button href="#" class="btn btn-social btn-simple"><i class="fa fa-pinterest"></i></button>
 
                              </div>
 
                          </div>
 
                      </div>
 
                      <div class="col-md-3">
 
                          <div class="member add-animation-stopped animation-4">
 
                              <img alt="..." class="img-circle" src="assets/img/faces/face_12.jpg"/>
 
                              <div class="description">
 
                                  <h3 class="big-text">Northon</h3>
 
                                  <p class="small-text">Happiness Hero</p>
 
                              </div>
 
                              <div class="social-buttons">
 
                                  <button href="#" class="btn btn-social btn-simple"><i class="fa fa-facebook-square"></i></button>
 
                                  <button href="#" class="btn btn-social btn-simple"><i class="fa fa-soundcloud"></i></button>
 
                                  <button href="#" class="btn btn-social btn-simple"><i class="fa fa-tumblr-square"></i></button>
 
                              </div>
 
                          </div>
 
                      </div>
 
                  </div>
 
              </div>
 
          </div>
 
      </div>
 
      <!-- End Section "Team" example 3: 4 Profiles Style 1 -->
 
 
      <!-- Section "Team" example 4: 6 Profiles Style 2 -->
 
      <div class="section section-team-2" id="team2">
 
          <div class="container">
 
              <div class="text-area">
 
                  <div class="title add-animation-stopped">
 
                      <h5 class="text-gray">6 Profiles Style 2</h5>
 
                      <h2>Team Section</h2>
 
                      <div class="separator-container">
 
                          <div class="separator line-separator">✻</div>
 
                      </div>
 
                  </div>
 
              </div>
 
              <div class="team">
 
                  <div class="row">
 
                      <div class="col-md-10 col-md-offset-1">
 
                          <div class="row">
 
                              <div class="col-md-4">
 
                                  <div class="member add-animation-stopped animation-1">
 
                                      <img alt="..." class="img-circle" src="assets/img/faces/face_10.jpg"/>
 
                                      <div class="description">
 
                                          <h3 class="big-text">Michael</h3>
 
                                          <p class="small-text">Co-Founder</p>
 
                                      </div>
 
                                  </div>
 
                              </div>
 
                              <div class="col-md-4">
 
                                  <div class="member add-animation-stopped animation-2">
 
                                      <img alt="..." class="img-circle" src="assets/img/faces/face_9.jpg"/>
 
                                      <div class="description">
 
                                          <h3 class="big-text">George</h3>
 
                                          <p class="small-text">Co-Founder</p>
 
                                      </div>
 
                                  </div>
 
                              </div>
 
                              <div class="col-md-4">
 
                                  <div class="member add-animation-stopped animation-3">
 
                                      <img alt="..." class="img-circle" src="assets/img/faces/face_11.jpg"/>
 
                                      <div class="description">
 
                                          <h3 class="big-text">Andrew</h3>
 
                                          <p class="small-text">Product Designer</p>
 
                                      </div>
 
                                  </div>
 
                              </div>
 
                              <div class="col-md-4">
 
                                  <div class="member add-animation-stopped animation-1">
 
                                      <img alt="..." class="img-circle" src="assets/img/faces/face_6.jpg"/>
 
                                      <div class="description">
 
                                          <h3 class="big-text">Michael</h3>
 
                                          <p class="small-text">Hacker</p>
 
                                      </div>
 
                                  </div>
 
                              </div>
 
                              <div class="col-md-4">
 
                                  <div class="member add-animation-stopped animation-2">
 
                                      <img alt="..." class="img-circle" src="assets/img/faces/face_7.jpg"/>
 
                                      <div class="description">
 
                                          <h3 class="big-text">Northon</h3>
 
                                          <p class="small-text">Happiness Hero</p>
 
                                      </div>
 
                                  </div>
 
                              </div>
 
                              <div class="col-md-4">
 
                                  <div class="member add-animation-stopped animation-3">
 
                                      <img alt="..." class="img-circle" src="assets/img/faces/face_14.jpg"/>
 
                                      <div class="description">
 
                                          <h3 class="big-text">You?</h3>
 
                                          <p class="small-text">Join us</p>
 
                                      </div>
 
                                  </div>
 
                              </div>
 
                          </div>
 
                      </div>
 
                  </div>
 
              </div>
 
          </div>
 
      </div>
 
      <!-- Section "Team" example 4: 6 Profiles Style 2 -->
 
    <!-- END SECTION TEAM -->
 
 
    <!-- SECTION NUMBERS -->
 
      <!-- Section "Numbers" example 1: Simple Text -->
 
      <div class="section section-numbers-1" id="numbers1">
 
          <div class="container">
 
              <div class="text-area">
 
                  <div class="title add-animation-stopped">
 
                      <h5 class="text-gray">Simple Text</h5>
 
                      <h2>Numbers Section</h2>
 
                      <div class="separator-container">
 
                          <div class="separator line-separator">✻</div>
 
                      </div>
 
                      <p>For those with pure food indulgence in mind, come next door and sate your desires with our ever changing internationally and seasonally inspired small plates.  We love food, lots of different food, just like you.</p>
 
                  </div>
 
              </div>
 
              <div class="clearfix"></div>
 
              <div class="row">
 
                  <div class="col-md-4">
 
                      <div class="card add-animation-stopped animation-1">
 
                          <h3>Customers</h3>
 
                          <h5 class="text-gray">Enterprises and small businesses</h5>
 
                          <div class="number" id="customersNo">
 
                              5.382
 
                          </div>
 
                      </div>
 
                  </div>
 
                  <div class="col-md-4">
 
                      <div class="card add-animation-stopped animation-2">
 
                          <h3>Projects</h3>
 
                          <h5 class="text-gray">Design, Strategy and Marketing</h5>
 
                          <div class="number" id="projectsNo">
 
                              26.832
 
                          </div>
 
                      </div>
 
                  </div>
 
                  <div class="col-md-4">
 
                      <div class="card add-animation-stopped animation-3">
 
                          <h3>Cities</h3>
 
                          <h5 class="text-gray">Where you can find to us</h5>
 
                          <div class="number" id="citiesNo">
 
                              278
 
                          </div>
 
                      </div>
 
                  </div>
 
              </div>
 
          </div>
 
      </div>
 
      <!-- End Section "Numbers" example 1: Simple Text -->
 
 
      <!-- Section "Numbers" example 2: Text & Icons -->
 
      <div class="section section-numbers-1" id="numbers3">
 
          <div class="container">
 
              <div class="text-area">
 
                  <div class="title add-animation-stopped">
 
                      <h5 class="text-gray">Text & Icons</h5>
 
                      <h2>Numbers Section</h2>
 
                      <div class="separator-container">
 
                          <div class="separator line-separator">✻</div>
 
                      </div>
 
                  </div>
 
              </div>
 
              <div class="clearfix"></div>
 
              <div class="row">
 
                  <div class="col-md-4">
 
                      <div class="card add-animation-stopped animation-1">
 
                          <div class="icon">
 
                              <i class="pe-7s-users"></i>
 
                          </div>
 
                          <h3>Customers</h3>
 
                          <h5 class="text-gray">Enterprises and small businesses</h5>
 
                          <div class="number" id="customersNo">
 
                              5.382
 
                          </div>
 
                      </div>
 
                  </div>
 
                  <div class="col-md-4">
 
                      <div class="card add-animation-stopped animation-2">
 
                          <div class="icon">
 
                              <i class="pe-7s-box1"></i>
 
                          </div>
 
                          <h3>Projects</h3>
 
                          <h5 class="text-gray">Design, Strategy and Marketing</h5>
 
                          <div class="number" id="projectsNo">
 
                              26.832
 
                          </div>
 
                      </div>
 
                  </div>
 
                  <div class="col-md-4">
 
                      <div class="card add-animation-stopped animation-3">
 
                          <div class="icon">
 
                              <i class="pe-7s-global"></i>
 
                          </div>
 
                          <h3>Cities</h3>
 
                          <h5 class="text-gray">Where you can find to us</h5>
 
                          <div class="number" id="citiesNo">
 
                              278
 
                          </div>
 
                      </div>
 
                  </div>
 
              </div>
 
          </div>
 
      </div>
 
      <!-- End Section "Numbers" example 2: Text & Image -->
 
 
      <!-- Section "Numbers" example 3: Text & Parallax -->
 
      <div class="section section-numbers-2" id="numbers2">
 
          <div class="parallax pattern-image">
 
              <img alt="..." src="assets/img/rubik_background.jpg"/>
 
          </div>
 
          <div class="container">
 
              <div class="row">
 
                  <div class="col-md-8 col-md-offset-2 text-center">
 
                      <div class="description">
 
                          <div class="title">
 
                              <h5>Text & Parallax</h5>
 
                              <h2>Numbers Section</h2>
 
                              <div class="separator-container">
 
                                  <div class="separator line-separator">✻</div>
 
                              </div>
 
                          </div>
 
                      </div>
 
                  </div>
 
              </div>
 
              <div class="clearfix"></div>
 
              <div class="row">
 
                  <div class="col-md-4">
 
                      <div class="card card-plain">
 
                          <h3>Customers</h3>
 
                          <h5>Enterprises and private</h5>
 
                          <div class="number" id="customersNo">
 
                              574
 
                          </div>
 
                      </div>
 
                  </div>
 
                  <div class="col-md-4">
 
                      <div class="card card-plain">
 
                          <h3>Projects</h3>
 
                          <h5>Design, Sketch and Plan</h5>
 
                          <div class="number" id="projectsNo">
 
                              1.257
 
                          </div>
 
                      </div>
 
                  </div>
 
                  <div class="col-md-4">
 
                      <div class="card card-plain">
 
                          <h3>Cities</h3>
 
                          <h5>Where you can find our work</h5>
 
                          <div class="number" id="citiesNo">
 
                              52
 
                          </div>
 
                      </div>
 
                  </div>
 
              </div>
 
          </div>
 
      </div>
 
      <!-- End Section "Numbers" example 3: Text & Parallax -->
 
 
      <!-- Section "Numbers" example 4: Text & Image -->
 
      <div class="section section-numbers-3" id="numbers3">
 
          <div class="full-image pattern-image">
 
              <img alt="..." src="assets/img/rubik_background.jpg"/>
 
          </div>
 
          <div class="container">
 
              <div class="text-area">
 
                  <div class="title add-animation-stopped">
 
                      <h5>Text & Image</h5>
 
                      <h2>Numbers Section</h2>
 
                      <div class="separator-container">
 
                          <div class="separator line-separator">✻</div>
 
                      </div>
 
                  </div>
 
              </div>
 
              <div class="clearfix"></div>
 
              <div class="row">
 
                  <div class="col-md-4">
 
                      <div class="card add-animation-stopped animation-1">
 
                          <h3>Customers</h3>
 
                          <h5>Enterprises and small businesses</h5>
 
                          <div class="number" id="customersNo">
 
                              5.382
 
                          </div>
 
                      </div>
 
                  </div>
 
                  <div class="col-md-4">
 
                      <div class="card add-animation-stopped animation-2">
 
                          <h3>Projects</h3>
 
                          <h5>Design, Strategy and Marketing</h5>
 
                          <div class="number" id="projectsNo">
 
                              26.832
 
                          </div>
 
                      </div>
 
                  </div>
 
                  <div class="col-md-4">
 
                      <div class="card add-animation-stopped animation-3">
 
                          <h3>Cities</h3>
 
                          <h5>Where you can find to us</h5>
 
                          <div class="number" id="citiesNo">
 
                              278
 
                          </div>
 
                      </div>
 
                  </div>
 
              </div>
 
          </div>
 
      </div>
 
      <!-- End Section "Numbers" example 4: Text & Image -->
 
    <!-- END SECTION NUMBERS -->
 
 
    <!-- SECTION CONTACT -->
 
      <!-- Section "Contact" example 1: Form Style 1 -->
 
      <div class="section section-contact-1" id="contact1">
 
          <div class="container">
 
              <div class="text-area">
 
                  <div class="title add-animation-stopped">
 
                      <h5>Form Style 1</h5>
 
                      <h2>Contact Section</h2>
 
                      <div class="separator-container">
 
                          <div class="separator line-separator">✻</div>
 
                      </div>
 
                      <p>Here you can write some information about when you can be contacted and when you will respond</p>
 
                  </div>
 
              </div>
 
              <div class="contact-form">
 
                  <form action="" method="post">
 
                      <div class="row">
 
                          <div class="col-md-4">
 
                              <div class="form-group add-animation-stopped animation-1">
 
                                  <input type="text" name="name" value="" placeholder="Your Name" class="form-control">
 
                              </div>
 
                          </div>
 
                          <div class="col-md-4">
 
                              <div class="form-group add-animation-stopped animation-2">
 
                                  <input type="text" name="email" value="" placeholder="Your Email" class="form-control">
 
                              </div>
 
                          </div>
 
                          <div class="col-md-4">
 
                              <div class="form-group add-animation-stopped animation-3">
 
                                  <input type="text" name="subject" value="" placeholder="Subject of contact" class="form-control">
 
                              </div>
 
                          </div>
 
                          <div class="col-md-12">
 
                              <div class="form-group add-animation-stopped animation-1">
 
                                  <textarea class="form-control" name="content" placeholder="Here you can write your nice text" rows="5"></textarea>
 
                              </div>
 
                              <div>
 
                                  <div class="col-md-2 col-md-offset-5">
 
                                      <button type="button" class="btn btn-lg btn-black btn-contact">
 
                                      SEND <i class="fa fa-paper-plane"></i>
 
                                      </button>
 
                                  </div>
 
                              </div>
 
                          </div>
 
                      </div>
 
                  </form>
 
              </div>
 
          </div>
 
      </div>
 
      <!-- End Section "Contact" example 1: Form Style 1 -->
 
 
      <!-- Section "Contact" example 2: Form Style 2 -->
 
      <div class="section section-contact-2" id="contact2">
 
          <div class="container">
 
              <div class="text-area">
 
                  <div class="title add-animation-stopped">
 
                      <h5>Form Style 2</h5>
 
                      <h2>Contact Section</h2>
 
                      <div class="separator-container">
 
                          <div class="separator line-separator">✻</div>
 
                      </div>
 
                  </div>
 
              </div>
 
              <div class="contact-form">
 
                  <form action="" method="post">
 
                      <div class="row">
 
                          <div class="col-md-4">
 
                              <div class="form-group add-animation-stopped animation-1">
 
                                  <label>Your Full Name</label>
 
                                  <input type="text" name="name" value="" placeholder="Michael Jordan" class="form-control">
 
                              </div>
 
                          </div>
 
                          <div class="col-md-4">
 
                              <div class="form-group add-animation-stopped animation-2">
 
                                  <label>Your Email</label>
 
                                  <input type="text" name="email" value="" placeholder="michael.j@gmail.com" class="form-control">
 
                              </div>
 
                          </div>
 
                          <div class="col-md-4">
 
                              <div class="form-group add-animation-stopped animation-3">
 
                                  <label>Subject</label>
 
                                  <input type="text" name="subject" value="" placeholder="Say hi to you" class="form-control">
 
                              </div>
 
                          </div>
 
                          <div class="col-md-12">
 
                              <div class="form-group add-animation-stopped animation-1">
 
                                  <textarea name="content" class="form-control" placeholder="Here you can write your nice text" rows="8"></textarea>
 
                              </div>
 
                              <div>
 
                                  <div class="col-md-2 col-md-offset-5">
 
                                      <button type="button" class="btn btn-lg btn-black btn-contact">
 
                                      SEND <i class="fa fa-paper-plane"></i>
 
                                      </button>
 
                                  </div>
 
                              </div>
 
                          </div>
 
                      </div>
 
                  </form>
 
              </div>
 
          </div>
 
      </div>
 
      <!-- End Section "Contact" example 2: Form Style 2 -->
 
 
      <!-- Section "Contact" example 3: Form Style 1 & Address -->
 
      <div class="section section-contact-1" id="contact1">
 
          <div class="container">
 
              <div class="text-area">
 
                  <div class="title add-animation-stopped">
 
                      <h5>Form Style 1 & Address</h5>
 
                      <h2>Contact Section</h2>
 
                      <div class="separator-container">
 
                          <div class="separator line-separator">✻</div>
 
                      </div>
 
                      <p>For those with pure food indulgence in mind, come next door and sate your desires with our ever changing internationally and seasonally inspired small plates.  We love food, lots of different food, just like you.</p>
 
                  </div>
 
                  <div class="contact-form">
 
                      <div class="row">
 
                          <div class="col-md-3 right-border">
 
                              <div class="address add-animation-stopped animation-1">
 
                                  <h4>Where to meet ?</h4>
 
                                  <p class="text-gray">
 
                                      2578 Paris<br>
 
                                      Rue Abel, 12<br>
 
                                      France
 
                                  </p>
 
                                  <h4>Phone</h4>
 
                                  <p class="text-gray">0456 / 71 21 39</p>
 
                                  <h4>By the old way</h4>
 
                                  <a href="mailto:hello@creative-tim.com">
 
                                      <p class="text-gray">hello@creative-tim.com</p>
 
                                  </a>
 
                              </div>
 
                          </div>
 
                          <div class="col-md-8 col-md-offset-1">
 
                              <form action="" method="post">
 
                                  <div class="form-group add-animation-stopped animation-1">
 
                                      <input type="text" name="name" value="" placeholder="Your Full Name" class="form-control">
 
                                  </div>
 
                                  <div class="form-group add-animation-stopped animation-2">
 
                                      <input type="text" name="email" value="" placeholder="Your Email" class="form-control">
 
                                  </div>
 
                                  <div class="form-group add-animation-stopped animation-3">
 
                                      <textarea name="content" class="form-control" placeholder="Here you can write some nice text" rows="8"></textarea>
 
                                  </div>
 
                                  <button type="button" class="btn btn-lg btn-black pull-right">
 
                                      SEND <i class="fa fa-paper-plane"></i>
 
                                  </button>
 
                              </form>
 
                          </div>
 
                      </div>
 
                  </div>
 
              </div>
 
          </div>
 
      </div>
 
      <!-- End Section "Contact" example 3: Form Style 1 & Address -->
 
 
      <!-- Section "Contact" example 4: Address & Maps -->
 
      <div class="section section-contact-3" id="contact3">
 
          <div class="text-area">
 
              <div class="title add-animation-stopped">
 
                  <h5>Example No.3</h5>
 
                  <h2>Contact Section</h2>
 
                  <div class="separator-container">
 
                      <div class="separator line-separator">✻</div>
 
                  </div>
 
              </div>
 
          </div>
 
          <div class="contact-container">
 
              <div class="address-container add-animation-stopped animation-1">
 
                  <div class="address">
 
                      <h4>Where to meet ?</h4>
 
                      <p class="text-gray">
 
                          2578 Paris<br>
 
                          Rue Abel, 12<br>
 
                          France
 
                      </p>
 
                      <h4>Phone</h4>
 
                      <p class="text-gray">0456 / 71 21 39</p>
 
                      <h4>By the old way</h4>
 
                      <a href="mailto:hello@creative-tim.com">
 
                          <p class="text-gray">hello@creative-tim.com</p>
 
                      </a>
 
                  </div>
 
              </div>
 
              <div  class="map">
 
                  <div id="contactUsMap" class="big-map"></div>
 
              </div>
 
          </div>
 
      </div>
 
      <!-- End Section "Contact" example 4: Address & Maps -->
 
    <!-- END SECTION CONTACT -->
 
   
 
    <!-- FOOTER -->
 
      <footer class="footer footer-big footer-color-black" data-color="black">
 
          <div class="container">
 
              <div class="row">
 
                  <div class="col-md-2 col-sm-3">
 
                      <div class="info add-animation-stopped animation-1">
 
                          <h5 class="title">Company</h5>
 
                          <nav>
 
                              <ul>
 
                                  <li>
 
                                      <a href="#">
 
                                      Home
 
                                      </a>
 
                                  </li>
 
                                  <li>
 
                                      <a href="#">
 
                                      Find offers
 
                                      </a>
 
                                  </li>
 
                                  <li>
 
                                      <a href="#">
 
                                      Discover Projects
 
                                      </a>
 
                                  </li>
 
                                  <li>
 
                                      <a href="#">
 
                                      Our Portfolio
 
                                      </a>
 
                                  </li>
 
                                  <li>
 
                                      <a href="#">
 
                                      About Us
 
                                      </a>
 
                                  </li>
 
                              </ul>
 
                          </nav>
 
                      </div>
 
                  </div>
 
                  <div class="col-md-3 col-md-offset-1 col-sm-3">
 
                      <div class="info add-animation-stopped animation-2">
 
                          <h5 class="title"> Help and Support</h5>
 
                          <nav>
 
                              <ul>
 
                                  <li>
 
                                      <a href="#">
 
                                      Contact Us
 
                                      </a>
 
                                  </li>
 
                                  <li>
 
                                      <a href="#">
 
                                      How it works
 
                                      </a>
 
                                  </li>
 
                                  <li>
 
                                      <a href="#">
 
                                      Terms &amp; Conditions
 
                                      </a>
 
                                  </li>
 
                                  <li>
 
                                      <a href="#">
 
                                      Company Policy
 
                                      </a>
 
                                  </li>
 
                                  <li>
 
                                      <a href="#">
 
                                      Money Back
 
                                      </a>
 
                                  </li>
 
                              </ul>
 
                          </nav>
 
                      </div>
 
                  </div>
 
                  <div class="col-md-3 col-sm-3">
 
                      <div class="info add-animation-stopped animation-3">
 
                          <h5 class="title add-animation-stopped">Latest News</h5>
 
                          <nav>
 
                              <ul>
 
                                  <li>
 
                                      <a href="#">
 
                                          <i class="fa fa-twitter"></i> <b>Get Shit Done</b>
 
                                          The best kit in the market is here, just give it a try and let us...
 
                                          <hr class="hr-small">
 
                                      </a>
 
                                  </li>
 
                                  <li>
 
                                      <a href="#">
 
                                      <i class="fa fa-twitter"></i>
 
                                      We've just been featured on <b> Awwwards Website</b>! Thank you everybody for...
 
                                      </a>
 
                                  </li>
 
                              </ul>
 
                          </nav>
 
                      </div>
 
                  </div>
 
                  <div class="col-md-2 col-md-offset-1 col-sm-3">
 
                      <div class="info add-animation-stopped animation-4">
 
                          <h5 class="title add-animation-stopped">Follow us on</h5>
 
                          <nav>
 
                              <ul>
 
                                  <li>
 
                                      <a href="#" class="btn btn-social btn-facebook btn-simple">
 
                                      <i class="fa fa-facebook-square"></i> Facebook
 
                                      </a>
 
                                  </li>
 
                                  <li>
 
                                      <a href="#" class="btn btn-social btn-dribbble btn-simple">
 
                                      <i class="fa fa-dribbble"></i> Dribbble
 
                                      </a>
 
                                  </li>
 
                                  <li>
 
                                      <a href="#" class="btn btn-social btn-twitter btn-simple">
 
                                      <i class="fa fa-twitter"></i> Twitter
 
                                      </a>
 
                                  </li>
 
                                  <li>
 
                                      <a href="#" class="btn btn-social btn-reddit btn-simple">
 
                                      <i class="fa fa-google-plus-square"></i> Google+
 
                                      </a>
 
                                  </li>
 
                              </ul>
 
                          </nav>
 
                      </div>
 
                  </div>
 
              </div>
 
              <hr>
 
              <div class="copyright">
 
                  © 2015 Creative Tim, made with love
 
              </div>
 
          </div>
 
      </footer>
 
    <!-- END FOOTER -->
 
  </div>
 
 
</div> <!-- end wrapper -->
 
<div class="project-content" id="project_1">
 
  <div>
 
    <div class="project-details">
 
      <span class="icon-close"><i class="pe-7s-close-circle"></i></span>
 
      <div class="container">
 
        <div class="project-title">
 
            <h5>Project Content<span>.</span></h5>
 
            <h2>Example No.1</h2>
 
            <div class="separator-container">
 
              <div class="separator line-separator">✻</div>
 
            </div>
 
        </div>
 
        <div class="row">
 
          <div class="col-md-4">
 
            <div class="project-text">
 
              <p><span>Detail</span>1</p>
 
              <p><span>Detail</span>2</p>
 
              <p><span>Detail</span>3</p>
 
              <p><span>Detail</span>4</p>
 
              <br>
 
              <p>Not him old music think his found enjoy merry. Listening acuteness dependent at or an. Apartments thoroughly unsatiable terminated sex how themselves. She are ten hours wrong walls stand early. Domestic perceive on an ladyship extended received do. Why jennings our whatever his learning gay perceive. Is against no he without subject. Bed connection unreserved preference partiality not unaffected. Years merit trees so think in hoped we as.</p>
 
              <p>Improved own provided blessing may peculiar domestic. Sight house has sex never. No visited raising gravity outward subject my cottage mr be. Hold do at tore in park feet near my case. Invitation at understood occasional sentiments insipidity inhabiting in. Off melancholy alteration principles old. Is do speedily kindness properly oh. Respect article painted cottage he is offices parlors. </p>
 
            </div>
 
          </div>
 
          <div class="col-md-8">
 
            <div class="row">
 
                <div class="col-md-6">
 
                    <div class="project-image">
 
                      <img src="assets/img/rubik_background2.jpg"/>
 
                    </div>
 
                </div>
 
                <div class="col-md-6">
 
                    <div class="project-image">
 
                      <img src="assets/img/rubik_background2.jpg"/>
 
                    </div>
 
                </div>
 
                  <div class="col-md-6">
 
                    <div class="project-image">
 
                      <img src="assets/img/rubik_background2.jpg"/>
 
                    </div>
 
                </div>
 
                <div class="col-md-6">
 
                    <div class="project-image">
 
                      <img src="assets/img/rubik_background2.jpg"/>
 
                    </div>
 
                </div>
 
            </div>
 
          </div>
 
        </div>
 
      </div>
 
    </div>
 
  </div>
 
</div>
 
 
<div class="project-content" id="project_2">
 
  <div>
 
    <div class="project-details">
 
      <span class="icon-close"><i class="pe-7s-close-circle"></i></span>
 
      <div class="container">
 
        <div class="project-title">
 
          <h2>Example No.2</h2>
 
          <div class="separator-container">
 
              <div class="separator line-separator">✻</div>
 
            </div>
 
            <p>We've been working with Kingsman Studios and we are proud that they enjoy our results.</p>
 
        </div>
 
        <div class="row">
 
          <div class="col-md-10 col-md-offset-1">
 
            <div class="article">
 
              <div class="project-image">
 
                <img src="assets/img/rubik_background2.jpg"/>
 
              </div>
 
              <div class="project-text">
 
                  <h3>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce<span>.</span></h3>
 
                  <p>Not him old music think his found enjoy merry. Listening acuteness dependent at or an. Apartments thoroughly unsatiable terminated sex how themselves. She are ten hours wrong walls stand early. Domestic perceive on an ladyship extended received do. Why jennings our whatever his learning gay perceive. Is against no he without subject. Bed connection unreserved preference partiality not unaffected. Years merit trees so think in hoped we as.</p>
 
              <p>Improved own provided blessing may peculiar domestic. Sight house has sex never. No visited raising gravity outward subject my cottage mr be. Hold do at tore in park feet near my case. Invitation at understood occasional sentiments insipidity inhabiting in. Off melancholy alteration principles old. Is do speedily kindness properly oh. Respect article painted cottage he is offices parlors<span>.</span></p>
 
              </div>
 
            </div>
 
          </div>
 
        </div>
 
      </div>
 
    </div>
 
  </div>
 
</div>
 
 
<div class="project-content" id="project_3">
 
  <div>
 
    <div class="project-details">
 
      <span class="icon-close"><i class="pe-7s-close-circle"></i></span>
 
      <div class="container">
 
        <div class="project-title">
 
          <h5 >Project Content</h5>
 
            <h2>Example No.3</h2>
 
            <div class="separator-container">
 
              <div class="separator line-separator">✻</div>
 
            </div>
 
        </div>
 
        <div class="product">
 
          <div class="row">
 
            <div class="col-md-4">
 
              <div class="project-text text-right">
 
                  <p>Pencil’s certified Bluetooth Smart wireless delivers a fast, stable connection with industry-leading power conservation</p>
 
                  <p>Each Pencil is milled from a single, solid piece of material. Graphite brushed aluminum model shown.</p>
 
              </div>
 
            </div>
 
            <div class="col-md-4">
 
                <div class="project-image">
 
                  <img src="assets/img/rubik_background3.png"/>
 
                </div>
 
            </div>
 
            <div class="col-md-4">
 
              <div class="project-text">
 
                  <p>Pencil’s certified Bluetooth Smart wireless delivers a fast, stable connection with industry-leading power conservation</p>
 
                  <p>Each Pencil is milled from a single, solid piece of material. Graphite brushed aluminum model shown.</p>
 
                </div>
 
            </div>
 
          </div>
 
        </div>
 
      </div>
 
    </div>
 
  </div>
 
</div>
 
</body>
 
  <!--  core js files    -->
 
  <script src="assets/js/jquery-1.11.2.min.js" type="text/javascript"></script>
 
  <script src="assets/js/bootstrap.js" type="text/javascript"></script>
 
 
 
  <!--  file for adding vertical points where we activate the elements animation  -->
 
  <script type="text/javascript" src="assets/js/jquery.waypoints.min.js"></script>
 
 
  <!--  js library for devices recognition -->
 
  <script type="text/javascript" src="assets/js/modernizr.js"></script>
 
 
  <!--  file where we handle all the script from the Rubik page  -->
 
  <script type="text/javascript" src="assets/js/rubick.js"></script>
 
 
 
  <!--  script for google maps  -->
 
  <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
 
   
 
</html>
 

Latest revision as of 19:33, 17 August 2017