Quartz - 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.

Quartz 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.
Quartz 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" id="page-nav-top">
    <div class="w-row header">
      <div class="w-col w-col-3 logo-bar">
        <a class="w-inline-block logolink" href="#page-nav-top" target="_self">
          <img class="company-logo" src="images/logo2.png" alt="">
        </a>
      </div>
      <div class="w-col w-col-9 nav-bar">
 <a class="nav-links" href="#" target="_self">Home</a>
 <a class="nav-links" href="#services" target="_self">What we do</a>
 <a class="nav-links" href="#portfolio" target="_self">Portfolio</a>
 <a class="nav-links" href="#about" target="_self">About us</a>
 <a class="nav-links" href="#contact" target="_self">Contact</a>
      </div>
    </div>
    <div class="w-container hero-text">
      <h2>The Wild World Web is</h2>
      <h1>IN YOUR HANDS</h1>
    </div>
  </div>
		

Services

  <div class="section" id="services">
    <div class="w-container service-columns">
      <div class="w-row">
 
        <div class="w-col w-col-4 services">
          <img class="icon" src="images/photoicon.png" alt="">
          <h3>Web Design</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.</p>
        </div>
 
        <div class="w-col w-col-4 services">
          <img class="icon" src="images/cloudicon.png" alt="">
          <h3>Web Marketing</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.</p>
        </div>
 
        <div class="w-col w-col-4 services">
          <img class="icon" src="images/lookicon.png" alt="">
          <h3>SEO</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.</p>
        </div>
 
      </div>
    </div>
  </div>	

Portfolio

  <div class="section dark web" id="portfolio">
    <div class="w-container">
      <div class="w-row">
 
        <div class="w-col w-col-8">
          <img src="images/screen-web.png" alt="">
        </div>
 
        <div class="w-col w-col-4 portfolio-text">
          <h3>Our latest creation</h3>
          <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.</p>
 <a class="button" href="#">Read more</a>
        </div>
 
      </div>
    </div>
  </div>
  
  
  
  <div class="section">
    <div class="w-container">
      <div class="w-row">
 
        <div class="w-col w-col-4">
          <div class="w-container portfolio-text left-up">
            <h3>Proud to be original</h3>
            <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.</p><strong><a class="button" style="text-decoration: none" href="tel:+0000000000">Call us: 555 652 325</strong></a>
          </div>
        </div>
 
        <div class="w-col w-col-8 align-right">
          <a class="w-inline-block" href="#">
            <img src="images/icons.png" alt="">
          </a>
        </div>
 
      </div>
    </div>
  </div>
  
  
  
  <div class="section dark">
    <div class="w-container">
      <h3 class="center-tittle">Let's be different and creative</h3>
      <p class="gallery-text">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. 
       </p>
    </div>
    <div class="w-container gallery">
      <div class="w-row">
        <div class="w-col w-col-3 w-col-small-6">
          <a class="w-inline-block" href="#" target="_blank">
            <img class="gallery-img" src="images/dribbble1.jpg" alt="">
          </a>
        </div>
        <div class="w-col w-col-3 w-col-small-6">
          <a class="w-inline-block" href="#" target="_blank">
            <img class="gallery-img" src="images/dribbble2.jpg" alt="">
          </a>
        </div>
        <div class="w-col w-col-3 w-col-small-6">
          <a class="w-inline-block" href="#" target="_self">
            <img class="gallery-img" src="images/dribbble3.jpg" alt="">
          </a>
        </div>
        <div class="w-col w-col-3 w-col-small-6">
          <a class="w-inline-block" href="#" target="_blank">
            <img class="gallery-img" src="images/dribbble4.jpg" alt="">
          </a>
        </div>
      </div>
 <a class="more button" href="#contact" target="_blank">Contact us</a>
    </div>
  </div>

About

<div class="section bg-image" id="about">
    <div class="w-container hero-text about-text">
      <h2>A team dedicaced to your</h2>
      <h1>satisfaction</h1>
    </div>
  </div>
  
  
  
  <div class="section">
    <div class="w-container">
      <div class="w-row">
<h3 class="center-tittle"><strong>About us</strong></h3>
        <div class="w-col w-col-6 team-column">
          <div class="image-wrapper">
            <img src="images/team4.png" alt="">
          </div>
          <div class="info-wrapper">
            <h3 class="name">JOHN DOE</h3>
            <div class="job-title">Founder - Général Manager</div>
            <p class="team-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. </p>
            <div class="social-team">
              <a class="w-inline-block social-icon" href="#" target="_blank">
                <img src="images/twitter.png" width="32" alt="">
              </a>
              <a class="w-inline-block social-icon" href="#" target="_blank">
                <img src="images/email.png" width="32" alt="">
              </a>
              <a class="w-inline-block social-icon" href="#" target="_blank">
                <img src="images/google_plus.png" width="32" alt="">
              </a>
              <a class="w-inline-block social-icon" href="#" target="_blank">
                <img src="images/facebook.png" width="32" alt="">
              </a>
            </div>
          </div>
        </div>
 
        <div class="w-col w-col-6 team-column">
          <div class="image-wrapper">
            <img src="images/team1.png" alt="520ea8a90c7774b44e000003_team1.png">
          </div>
          <div class="info-wrapper">
            <h3 class="name">MEGAN HARRIS</h3>
            <div class="job-title">Graphic and Design</div>
            <p class="team-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. </p>
            <div class="social-team">
              <a class="w-inline-block social-icon" href="#" target="_blank">
                <img src="images/twitter.png" width="32" alt="">
              </a>
              <a class="w-inline-block social-icon" href="#" target="_blank">
                <img src="images/email.png" width="32" alt="">
              </a>
              <a class="w-inline-block social-icon" href="#" target="_blank">
                <img src="images/google_plus.png" width="32" alt="">
              </a>
              <a class="w-inline-block social-icon" href="#" target="_blank">
                <img src="images/facebook.png" width="32" alt="">
              </a>
            </div>
          </div>
        </div>
 
<div class="lign"></div>
 
<div class="w-col w-col-6 team-column">
          <div class="image-wrapper">
            <img src="images/team2.png" alt="">
          </div>
          <div class="info-wrapper">
            <h3 class="name">PETER McKINLEY</h3>
            <div class="job-title">Web development</div>
            <p class="team-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.</p>
            <div class="social-team">
              <a class="w-inline-block social-icon" href="#" target="_blank">
                <img src="images/twitter.png" width="32" alt="">
              </a>
              <a class="w-inline-block social-icon" href="#" target="_blank">
                <img src="images/email.png" width="32" alt="">
              </a>
              <a class="w-inline-block social-icon" href="#" target="_blank">
                <img src="images/google_plus.png" width="32" alt="">
              </a>
              <a class="w-inline-block social-icon" href="#" target="_blank">
                <img src="images/facebook.png" width="32" alt="">
              </a>
            </div>
          </div>
        </div>
 
<div class="w-col w-col-6 team-column">
          <div class="image-wrapper">
            <img src="images/team3.png" alt="520ea8a90c7774b44e000003_team1.png">
          </div>
          <div class="info-wrapper">
            <h3 class="name">MATT HURLEY</h3>
            <div class="job-title">Sales and Customers</div>
            <p class="team-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. </p>
            <div class="social-team">
              <a class="w-inline-block social-icon" href="#" target="_blank">
                <img src="images/twitter.png" width="32" alt="">
              </a>
              <a class="w-inline-block social-icon" href="#" target="_blank">
                <img src="images/email.png" width="32" alt="">
              </a>
              <a class="w-inline-block social-icon" href="#" target="_blank">
                <img src="images/google_plus.png" width="32" alt="">
              </a>
              <a class="w-inline-block social-icon" href="#" target="_blank">
                <img src="images/facebook.png" width="32" alt="">
              </a>
            </div>
          </div>
        </div>
 
      </div>
 
    </div>
  </div>

Contact

<div class="w-col w-col-8">
<h1 class="h1-dark">Contact us</h1>
<div class="w-form">
<div id='form_wrap'>
<form id="contact-form" action="processForm.php" method="post">
<input name="name" class="w-input field" type="text" placeholder="Your name">
<input name="email" class="w-input field" type="email" placeholder="Your email">
<textarea name="message" class="w-input" placeholder="What can we do for you today?"></textarea>
<label>*What is 2+2? (Anti-spam)</label>
<input class="w-input field" name="human" placeholder="Answer...">
<input class="w-button button" name="submit" type="submit" value="Sent">
</form>
</div>
</div>
</div>
 	
  <div class="section map">
    <div class="w-widget w-widget-map google-map" data-widget-latlng="64.1099624,-21.9200256,14" data-widget-style="terrain" data-widget-zoom="12"></div>
  </div>
 
  <footer class="footer">
    <div class="w-container">
 
   Copyright 2014 - Our Company - All rights reserved
 
      <div class="social-wrapper">
        <a class="w-inline-block social-link" href="#" target="_blank">
          <img src="images/gfacebook.png" width="32" alt="">
        </a>
        <a class="w-inline-block social-link" href="#" target="_blank">
          <img src="images/ggoogle_plus.png" width="32" alt="">
        </a>
        <a class="w-inline-block social-link" href="#" target="_blank">
          <img src="images/glinkedin.png" width="32" alt="">
        </a>
        <a class="w-inline-block social-link" href="#" target="_blank">
          <img src="images/gtwitter.png" width="32" alt="">
        </a>
      </div>
 
    </div>
  </footer>		

The following CSS files are 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 306.

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