Topaz - FREE Onepage Responsive HTML5 Template

A nice onepage Responsive Design 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.

Topaz is a modern and elegant One-Page Responsive Design HTML5 template.
Every single detail is carefully designed, in order to create a wonderful user experience.
Topaz 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

  <header 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 class="logo" src="images/topaz.png" width="41px" alt="">
 <div class="company">Topaz</div></a>
        </div>
        <nav class="w-col w-col-8 w-clearfix nav-column">
<a class="nav-link" href="#profil" target="_self">Profil</a>
<a class="nav-link" href="#portfolio" target="_self">Portfolio</a>
<a class="nav-link" href="#clients" target="_self">Clients</a>
<a class="nav-link" href="#contact" target="_self">Contact</a>
<a class="button nav" href="#">(1) 555 666 777</a>
        </nav>
      </div>
    </div>
  </header>
  
  <div class="section hero">
    <div class="w-container">
      <h1 class="hero-heading">Suspendisse varius enim in eros tristique.</h1>
      <p class="hero-subhead">Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae.</p>
 <a class="w-hidden-main w-hidden-medium w-hidden-small button big-green" href="#">Try it for free</a>
      <img src="images/big-screen.png" width="940" alt="">
    </div>
  </div>

Profile

  <div class="section" id="page-nav-Mobile">
    <div class="w-container">
      <h1 id="profil" class="section-title">Suspendisse varius enim in eros tristique.</h1>
      <p class="section-subtitle">Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae.</p>
      <div class="w-row">
        <div class="w-col w-col-6">
          <img class="responsive-img" src="images/3-responsive-color.png" width="452px" alt="">
        </div>
        <div class="w-col w-col-6 content-column">
          <img class="grey-icon" src="images/4-icon-chrome.png" width="37px" alt="">
          <img class="grey-icon" src="images/4-icon-fire.png" width="37px" alt="">
          <img class="grey-icon" src="images/4-icon-ie.png" width="37px" alt="">
          <img class="grey-icon" src="images/4-icon-safari.png" width="37px" alt="">
          <h3>Consectetur adipiscing elit.</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>
          <img
          class="grey-icon" src="images/5-icon-apple.png" width="37px" alt="">
            <img class="grey-icon" src="images/6-icon-android.png" width="37px" alt="">
            <img class="grey-icon" src="images/7-icon-microsoft.png" width="37px" alt="">
            <h3>Consectetur adipiscing elit.</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>
        </div>
      </div>
    </div>
  </div>
  

portfolio

  <div class="section grey">
    <div class="w-container">
      <h1 id="portfolio" class="section-title">Suspendisse varius enim in eros tristique.</h1>
      <p class="section-subtitle">Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae.</p>
      <div class="w-row">
        <div class="w-col w-col-4">
          <div class="circle">
            <div class="number">1</div>
            <img class="frames" src="images/8-layout1.png" width="243px" alt="">
          </div>
          <h3>Simple</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">
          <div class="circle">
            <div class="number">2</div>
            <img class="frames" src="images/8-layout2.png" width="243px" alt="">
          </div>
          <h3>Stacked</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>
        </div>
        <div class="w-col w-col-4">
          <div class="circle">
            <div class="number">3</div>
            <img class="frames" src="images/8-layout3.png" width="243px" alt="">
          </div>
          <h3>Tetris</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.</p>
        </div>
      </div>
    </div>
  </div>

Contact

    <div class="section">
    <div class="w-container">
      <div class="w-row">
        <div class="w-col w-col-6">
          <h2 id="contact">Contact me</h2>
          <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">
            <img src="images/profile.png" title="Title of the image" width="250" alt="">
        </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"><h3>My office</h3></div>
              <div class="snippet-text"><h4>15, aenean faucibus</h4></div>
 <div class="snippet-text"><h4>99 750 - Suspendisse varius</h4></div>
 <div class="snippet-text"><h4>Tel : (1) 555 666 777</h4></div>
 <div class="snippet-text"><h4>Contact @ my-company.com</h4></div>
            </div>
        </div>
    </div>
    </div>
  </div>	
  <footer class="section footer">
    <div class="w-container">
      <div class="w-row">
        <div class="w-col w-col-6">
          <img class="logo-bottom" src="images/topaz.png" width="41px" alt="">
          <div class="w-hidden-small w-hidden-tiny footer-text">Your Company - Copyright © 2014 </div>
        </div>
        <div class="w-col w-col-6 right-footer-col">
 
          <a class="w-inline-block social-icon first" href="#">
            <img src="images/14-social-twitter.png" width="30px" alt="">
          </a>
          <a class="w-inline-block social-icon" href="#" target="_blank">
            <img src="images/14-social-facebook.png" width="30px" alt="">
          </a>
          <a class="w-inline-block social-icon" href="#" target="_blank">
            <img src="images/14-social-googleplus.png" width="30px" alt="">
          </a>
          <a class="w-inline-block social-icon" href="#" target="_blank">
            <img src="images/14-social-linkedin.png" width="30px" alt="">
          </a>
        </div>
      </div>
    </div>
  </footer>

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

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