Graphista

<!-- ==============================================
Title and Meta Tags
=============================================== -->
<meta charset="utf-8">
<title>Graphista | One-Page Creative Portfolio</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- ==============================================
Favicons
=============================================== -->
<link rel="shortcut icon" href="assets/favicon.ico">
<link rel="apple-touch-icon" href="assets/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="assets/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="assets/apple-touch-icon-114x114.png">

<div id="site-nav" class="navbar-collapse collapse">
    <ul class="nav navbar-nav navbar-right">
        <li class="sr-only">
            <a href="#home" class="scrollto">Home</a>
        </li>
        <li>
            <a href="#services" class="scrollto">What I Do</a>
        </li>
        <li>
            <a href="#about" class="scrollto">About Me</a>
        </li>
        <li>
            <a href="#portfolio" class="scrollto">My Works</a>
        </li>
        <li>
            <a href="#contact" class="scrollto">Contact Me</a>
        </li>
    </ul>
</div><!--End navbar-collapse -->

<!-- ==============================================
HEADER
=============================================== -->
<header id="home">
    <div class="container text-center">
    
        <p>Welcome to</p>
        
        <h1>Graphista</h1>
        
        <p>The best choice for your online personal portfolio</p>
    
    </div>
    
</header><!--End header -->

<!-- ==============================================
SERVICES
=============================================== -->
<section id="services" class="add-padding">
    <div class="container">
        
        <h1 class="section-title big-text scrollimation fade-up">My Services</h1>
        
        <div class="row">
        
            <div class="col-sm-4 service-item color3 scrollimation scale-in">
            
                <div class="service-icon"><i class="fa fa-lightbulb-o"></i></div>
                
                <h3>Brand Identity</h3>
                
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo.</p>
                
            </div>
            
            ...
            
        </div>
        
    </div>
</section>

<!-- ==============================================
ABOUT
=============================================== -->
<section id="about" class="add-padding bg-color2">
    <div class="container">
        
        <div class="row">
        
            <div class="col-sm-6 scrollimation fade-right d1">
            
                <img class="img-responsive polaroid" src="assets/images/about.jpg" alt="" />
            
            </div>
            
            <div class="col-sm-6 scrollimation fade-left d3">
            
                <h1 class="big-text">I am <br/>Jane Doe </h1>
                
                <p class="lead">I am Jane Doe, a twenty five year old designer from NY. I have graduated with a Bachelor degree of Graphic &amp; Web Design, from the University of Pasadena.</p>
            
                <p>I am passionate about combining function, interaction and form to design for fitting user experiences that make people happy. I have a passion for creating challenging, intuitive and beautiful products. My design process is very hands-on and visual.</p>
            
            </div>
        
        </div>
        
    </div>
</section>

<div class="skills-bars">
    <div class="skills-item skill1">
        <span class="percent" data-percent="75">75%</span>
        <p>Photoshop</p>
    </div>
    <div class="skills-item skill2">
        <span class="percent" data-percent="70">70%</span>
        <p>Illustrator</p>
    </div>
    <div class="skills-item skill3">
        <span class="percent" data-percent="90">90%</span>
        <p>HTML</p>
    </div>
    <div class="skills-item skill4">
        <span class="percent" data-percent="60">60%</span>
        <p>CSS</p>
    </div>
    
</div>

<!--==== Portfolio Filters ====-->
<div id="filter-works">
    <ul>
        <li class="active scrollimation fade-right d1">
            <a href="#" data-filter="*">All</a>
        </li>
        <li class="scrollimation fade-right">
            <a href="#" data-filter=".identity">Identity</a>
        </li>
        <li class="scrollimation fade-left">
            <a href="#" data-filter=".logo">Logo</a>
        </li>
        <li class="scrollimation fade-left d1">
            <a href="#" data-filter=".illustration">Illustration</a>
        </li>
    </ul>
</div><!--End portfolio filters -->

<!-- ==============================================
SINGLE PROJECT ITEM
=============================================== -->    
<article class="project-item web-design">
    
    <img class="img-responsive project-image" src="assets/placeholder-320x210.jpg"  alt=""><!--Project thumb -->
    
    <div class="hover-mask">
        <h2 class="project-title">Project Title</h2><!--Project Title -->
        <p>Subtitle</p><!--Project Subtitle -->
    </div>
    
    ...
    
</article>
<!-- ==============================================
END PROJECT ITEM
=============================================== -->

<!--==== Project Preview HTML ====-->
<div class="sr-only project-description" data-images="assets/images/projects/full-10.jpg,assets/images/projects/full-11.jpg" >
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sapien risus, blandit at fringilla ac, varius sed dolor. Donec augue lacus, vulputate sed consectetur facilisis, interdum pharetra ligula. Nulla suscipit erat nibh, ut porttitor nisl dapibus eu.</p>
    
    <p>Phasellus porta eros vel lacus euismod consequat. Phasellus eleifend, nibh non feugiat hendrerit, lacus enim adipiscing eros, a pharetra erat neque eget est. Quisque vitae aliquet urna. Integer suscipit lectus eu enim porttitor fringilla. Ut blandit, urna in auctor euismod, arcu eros pharetra metus, a porta purus libero a nibh.</p>
    <p>Nam eget urna pellentesque nisl ultrices dapibus. Mauris accumsan vehicula nisl, sed tempus mauris facilisis eu. Donec a iaculis nisi, quis malesuada justo. Pellentesque ut enim sit amet ipsum dignissim egestas. Morbi tincidunt rhoncus urna eget placerat.</p>
    <p class="text-center"><a class="btn btn-color1" href="#external-link"><i class="fa fa-arrow-right"></i>Visit Website</a></p>
</div>

<!--==== Project Preview ====-->
<div id="project-preview" >
    <span class="close-preview">&times;</span>
    <div id="project-slider" class="flexslider"></div>
    
    <h1 id="project-title"></h1>
    <div id="project-content"></div>
</div><!--Project Preview -->

<!-- ==============================================
TWITTER
=============================================== -->
<section id="twitter" class="add-padding bg-color1">
    <div class="container">
        <div class="row scrollimation fade-in">
            <div class="col-sm-1 twitter-icon">
                <i class="fa fa-twitter"></i>
            </div>
            <div class="col-sm-11">
                <div id="twitter-slider" class="flexslider" data-widget-id="345690956013633536" data-tweets-length="3"></div>
            </div>
        </div>
    </div>
</section>

<!--=== Contact Form ===-->
<form id="contact-form" class="col-sm-6 col-md-offset-1 scrollimation fade-left d3" action="contact.php" method="post" novalidate>
    
    <div class="form-group">
      <label class="control-label" for="contact-name">Name</label>
      <div class="controls">
        <input id="contact-name" name="contactName" placeholder="Your name" class="form-control requiredField label_better" data-new-placeholder="Your name" type="text" data-error-empty="Please enter your name">
        <i class="fa fa-user"></i>
      </div>
    </div><!-- End name input -->
    
    <div class="form-group">
      <label class="control-label" for="contact-mail">Email</label>
      <div class=" controls">
        <input id="contact-mail" name="email" placeholder="Your email" class="form-control requiredField label_better" data-new-placeholder="Your email" type="email" data-error-empty="Please enter your email" data-error-invalid="Invalid email address">
        <i class="fa fa-envelope"></i>
      </div>
    </div><!-- End email input -->
    
    <div class="form-group">
      <label class="control-label" for="contact-message">Message</label>
        <div class="controls">
            <textarea id="contact-message" name="comments"  placeholder="Your message" class="form-control requiredField label_better" data-new-placeholder="Your message" rows="6" data-error-empty="Please enter your message"></textarea>
            <i class="fa fa-comment"></i>
        </div>
    </div><!-- End textarea -->
    
    <p><button name="submit" type="submit" class="btn btn-color2 btn-block" data-error-message="Error!" data-sending-message="Sending..." data-ok-message="Message Sent"><i class="fa fa-paper-plane"></i>Send Message</button></p>
    <input type="hidden" name="submitted" id="submitted" value="true" />
    
</form><!-- End contact-form -->

<?php 
$emailTo = 'yourmail@example.com';
$siteTitle = 'YourSiteTitle';
...

mail($email, $respondSubject, $respondBody, $respondHeaders);

// upon no failure errors let's email now!
if(!isset($hasError)) {
    
    $subject = 'New message to '.$siteTitle.' from '.$name;
    $sendCopy = trim($_POST['sendCopy']);
    $body = "Name: $name \n\nEmail: $email \n\nMessage: $comments";
    $headers = 'From: ' .' <'.$email.'>' . "\r\n" . 'Reply-To: ' . $email;
    mail($emailTo, $subject, $body, $headers);
    
    //Autoresponse
    $respondSubject = 'Thank you for contacting '.$siteTitle;
    $respondBody = "Your message to $siteTitle has been delivered! \n\nWe will answer back as soon as possible.";
    $respondHeaders = 'From: ' .' <'.$emailTo.'>' . "\r\n" . 'Reply-To: ' . $emailTo;
    
    mail($email, $respondSubject, $respondBody, $respondHeaders);
    
    // set our boolean completion value to TRUE
    $emailSent = true;
}

<script>
    var mapPoint = {
            'lat': 40.720099,
            'lng': -74.005764,
            'zoom' : 15,
            'infoText':'<p>250 W Broadway\
                        <br/>New York\
                        <br/>NY 10013</p>',
            'linkText':'View on Google Maps',
            'mapAddress':'250 W Broadway, New York, NY 10013',
            'icon': 'assets/images/pin-dark.png'
        };
    
</script>

<!-- ==============================================
CSS
=============================================== -->    
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/font-awesome.css">
<link rel="stylesheet" href="css/flexslider.css">
<link rel="stylesheet" href="css/styles.css">

...
<div class="row services scrollimation fade-left">
...

...
<div class="... scrollimation scale-in d1">
...