Turquoise - Onepage Responsive Parallax HTML5 Template

A nice onepage Responsive Design and Parallax HTML5 Template


Thank you so much for purchasing this template.
If you have any questions that are beyond the scope of this documentation file, please feel free to contact me.

Turquoise is a modern and elegant One-Page Responsive Design with a Parallax effect HTML5 template.
Every single detail is carefully designed, in order to create a wonderful user experience.
Turquoise is very easy to set up and customize and comes with a well documented help file, which will assist you in the configuration of your new template in few minutes.

Important : the images used in the demo aren't available in the archive ZIP.

Header

  <div class="section header">
    <div class="w-container">
      <div class="w-row">
        <div class="w-col w-col-4 company-column">
 
<a href="#" target="_self"><img src="images/logo.png"></a>
          <!-- <div class="company-title">Title text</div> -->
 
        </div>
        <div class="w-col w-col-8 nav-bar">
<a class="nav-link" href="#activities" target="_self">My activities</a>
<a class="nav-link" href="#whoiam" target="_self">Who I am?</a>
<a class="nav-link" href="#contact" target="_self">Contact</a>
<a class="nav-link sign-up" href="tel:+0000000000" target="_blank">(1) 555 666 777</a>
        </div>
      </div>
    </div>
  </div>
  
  <div>
    <div class="hero-bg">
      <div class="w-container">
        <h1 id="page-nav-Section-1">Lorem Ipsum</h1>
        <div class="subtitle">Consectetur adipiscing elit</div>
      </div>
    </div>
  </div>

Activities

  <div class="section">
    <div class="w-container">
 
      <div class="w-row">
        <div class="w-col w-col-6">
          <h4 id="activities">My activities</h4>
          <div class="section-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
        </div>
      </div>
 
      <div class="w-row snippet-row">
 
        <div class="w-col w-col-3 w-col-small-6">
          <a class="w-clearfix w-inline-block snippet" href="#">
            <img class="example-image" src="images/image-1.jpg" alt="">
            <div class="snippet-text-section">
              <div class="snippet-title">Title</div>
              <div class="snippet-text">Suspendisse varius enim in eros elementum tristique.</div>
            </div>
          </a>
        </div>
 
        <div class="w-col w-col-3 w-col-small-6">
          <a class="w-clearfix w-inline-block snippet" href="#">
            <img class="example-image" src="images/image-2.jpg" alt="">
            <div class="snippet-text-section">
              <div class="snippet-title">Title</div>
              <div class="snippet-text">Suspendisse varius enim in eros elementum tristique.</div>
            </div>
          </a>
        </div>
 
        <div class="w-col w-col-3 w-col-small-6">
          <a class="w-clearfix w-inline-block snippet" href="#">
            <img class="example-image" src="images/image-3.jpg" alt="">
            <div class="snippet-text-section">
              <div class="snippet-title">Title</div>
              <div class="snippet-text">Suspendisse varius enim in eros elementum tristique.</div>
            </div>
          </a>
        </div>
 
        <div class="w-col w-col-3 w-col-small-6">
          <a class="w-clearfix w-inline-block snippet" href="#">
            <img class="example-image" src="images/image-4.jpg" alt="">
            <div class="snippet-text-section">
              <div class="snippet-title">Title</div>
              <div class="snippet-text">Suspendisse varius enim in eros elementum tristique.</div>
            </div>
          </a>
        </div>
 
      </div>
 
 
      <div class="w-row secondary-row">
        <div class="w-col w-col-8 w-col-small-6">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.</p>
        </div>
        <div class="w-col w-col-4 w-col-small-6 button-column">
<a class="nav-link sign-up" href="tel:+0000000000" target="_blank">(1) 555 666 777</a>
        </div>
      </div>
 
    </div>
  </div>

Who I am

  <div class="section">
    <div class="w-container">
      <div class="w-row">
        <div class="w-col w-col-6">
          <h4 id="whoiam">Who I am?</h4>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, <strong>ut commodo diam libero</strong> vitae erat. Aenean faucibus nibh et justo cursus id rutrum.<br />
          Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. <strong>Aenean faucibus</stronG> nibh et justo cursus
            id rutrum lorem imperdiet.</p>
        </div>
        <div class="w-col w-col-6">
          <div class="w-row">
 
            <div class="w-col w-col-6">
              <img class="img-example" src="images/businesswoman.jpg" title="Title of the image" alt="">
            </div>
 
          </div>
        </div>
      </div>
    </div>
  </div>

Contact

  <div class="section">
    <div class="w-container">
      <div class="w-row">
        <div class="w-col w-col-6">
          <h4 id="contact">Contact me</h4>
          <div class="section-description">Feel free to contact me for any inquiries, if you have any questions about my work or just say hello.</div>
        </div>
      </div>
 
      <div class="w-row snippet-row">
        <div class="w-col w-col-4 w-clearfix">
<div class="w-widget w-widget-map google-map" data-widget-latlng="64.1099624,-21.9200256,14" data-widget-style="terrain" data-widget-zoom="11">
</div>
        </div>
 
        <div class="w-col w-col-4">
<div class="contact">
 
<div class="formulaire">
<form id="contact-form" action="processForm.php" method="post">
<input type="text" class="w-input field" placeholder="Your name" name="nom" size=30><br />
<input type="text" class="w-input field" placeholder="Your email" name="mail" SIZE="30" ><br />
<textarea placeholder="What can I do for you?" class="w-input" name="message" COLS=51 ROWS=4 id="message"></textarea><br>
<input type="submit" class="w-button button" onClick="javascript: return verif();" value="Send"><br />
</form>
</div>
 
</div>
        </div>
 
<div class="w-col w-col-4 w-clearfix">
              <div class="snippet-text-section">
              <div class="snippet-title"><h4>My office</h4></div>
              <div class="snippet-text">15, aenean faucibus</div>
 <div class="snippet-text">99 750 - Suspendisse varius</div>
 <div class="snippet-text">Tel : (1) 555 666 777</div>
 <div class="snippet-text">contact @ my-company.com</div>
 <p style="padding-top: 15px">
 <div class="snippet-title"><h4>Get social</h4></div>
 <a href="#" title="Follow me on Facebook"><img src="images/facebook.png" width="32" alt=""></a>
 <a href="#" title="Follow me on Twitter"><img src="images/twitter.png" width="32" alt=""></a>
 <a href="#" title="Follow me on Google Plus"><img src="images/google_plus.png" width="32" alt=""></a>
 <a href="#" title="Follow me on Linkedin"><img src="images/linkedin.png" width="32" alt=""></a>
 </p>
            </div>
        </div>
 
      </div>
 
    </div>
  </div>	
  <div class="section grey">
    <div class="w-container">
      <div class="w-row secondary-row">
        <div class="w-col w-col-8 w-col-small-6">
          <h4>Action do it</h4>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus
            id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.</p>
        </div>
        <div class="w-col w-col-4 w-col-small-6 button-column">
<a class="nav-link sign-up" href="#" target="_blank">Call to action</a>
        </div>
      </div>
    </div>
  </div>
  
  <div class="section">
    <div class="w-container">
      <div class="w-row">
        <div class="w-col w-col-6 left-footer-col">
          <div class="footer-text">2014 © Your company | Turquoise, a template created by <a class="footer-link" href="http://www.web-eau.net">web-eau.net</a></div>
        </div>
        <div class="w-col w-col-6 footer-nav-bar"><a class="footer-link" href="#">Duis cursus</a><a class="footer-link" href="#">Solor Damet</a><a class="footer-link" href="#">Impressum</a>
        </div>
      </div>
    </div>
  </div>

The following CSS file is included :

The following CSS file is included :

Setup the contact form:

- open the processForm.php file with your text editor,
- at line 59, indicate the email address for the incoming messages

Setup the Google Map:

You can set the map in the index.html file of the template at line 162.

1) Your address : data-widget-latlng:
For positioning the map at your location:
- Select you address in Google Map,
- Then, copy the coordonates in the URL of your location,
- past the coordonates in data-widget-latlng,

2) Map style : data-widget-style :
For your Google Map, you can choose between "terrain" (as default),

"satellite",

or "hybrid" if you prefer this kind of display.

3) Zoom : data-widget-zoom :
There are 18 level of zooming in this widget (12 is used as default).

Once again, thank you so much for purchasing this template.
Daniel