Alex Zane

Photography Portfolio Template

HTML Structure

Header:
 
<!-- Header -->
     <header class="header">
          <div class="main-menu">
          <div id="logo"></div>
          <!-- Menu -->
               <nav id="menu"></nav>
          <!-- /Menu -->
          </div>
     </header>
<!-- /Header -->
 
Home Slider Content:
 
<!-- Section One -->
        <section class="section" id="section1">
          <div class="darker"></div>
          <div class="border">
               <div class="frames">
                   <div></div>
                   <div></div>
                   <div></div>
                   <div></div>
               </div>
               <div class="corners">
                   <div></div>
                   <div></div>
               </div>
          </div>
          <div class="cover-titles">
               <div class="align-left"> 
                    <p>text</p> 
                    <h1 class="title">category</h1>
                    <p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary</p> 
                    <a href="#" class="btn">
                         <span>Take a look</span><i class="fa fa-arrow-right"></i>
                    </a> 
               </div>
          </div>
     </section>
<!-- /Section One -->
 
Blog Item:
 
<!-- Blog Item -->
    <div class="blog-item">
        <a href="#">
            <img src="blog.jpg" alt="Image description">
        </a>
        <div class="post-info">
            <div class="date">26
                <span><i class="fa fa-calendar fa-2x"></i>december, 2015</span>
            </div>
            <a href="blog-post.html">
                <h3>Lorem Ipsum</h3>
            </a>
            <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
            <a href="#" class="text-left">
                <i class="fa fa-heart">3</i>
            </a>
            <div class="text-left">
                <i class="fa fa-comments">3</i>
            </div>
            <div class="text-right">
                <a href="blog-post.html">
                   read <i class="fa fa-long-arrow-right"></i>
                </a>
            </div>
        </div>
    </div>
<!-- /Blog Item -->
 
Grid Item:
 
<!-- Grid Item-->
    <figure class="grid-item">
        <a  href="image.jpg" itemprop="contentUrl" data-size="1200x801">
            <img src="thumbnails.jpg" itemprop="thumb" alt="Image description" />
        </a>
        <figcaption itemprop="caption description">Image caption </figcaption>
    </figure>
<!-- /Grid Item-->
 

CSS Stucture

    01. GENERAL
    02. BUTTON
    03. HEADER
    04. MOBILE MENU NAVIGATION
    05. PARALLAX
    06. HOME PAGE
    07. GALLERY AND BLOG ITEM
    08. BLOG POST PAGE
    09. SOCIAL ICONS
    10. FORMS
    11. FOOTER
    12. RESPONSIVE

    font-family: "Source Sans Pro", Helvetica, Arial, sans-serif;
    text: #666
    hover: #ef4138

JQUERY Stucture

    01. Fullpage Slider
    02. Page Transitioan
    03. Masonry plugin
    04. Parallax
    05. Mobile Menu Navigation
    06. Back To Top Buttone
    07. PhotoSwipe Gallery

Source & Credits

Thanks so much to: