index.html

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <title>Dash - Modern Resume Template</title>
        <meta name="description" content="Here goes the description">
        <meta name="author" content="author name">

        <!-- Mobile Specific Meta -->
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

        <!-- Stylesheets -->
        <link rel="stylesheet" href="css/base.css">
        <link rel="stylesheet" href="css/layout.css">
        <link rel="stylesheet" href="fancybox/jquery.fancybox.css">
        <link rel="stylesheet" href="css/skeleton.css">

        <!-- Fonts -->
        <link href='http://fonts.googleapis.com/css?family=Lato:300,400' rel='stylesheet' type='text/css'>

        <!--[if lt IE 9]>
                <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
        
        
        
    </head>
    <body class="background-theme">
        <div class="theme-bg"></div>

        <!-- MAIN MENU -->
        <ul id="main-menu" class="main-menu hidden">
            <li class="menu-item menu-black">
                <a href="#*"><i class="icon menu sprite"></i></a>
            </li>
            <li class="menu-item menu-red">
                <a href="#profile-tab"><i class="icon profile sprite"></i></a>
            </li>
            <li class="menu-item menu-keppel">
                <a href="#resume-tab"><i class="icon resume sprite"></i></a>
            </li>
            <li class="menu-item menu-yellow">
                <a href="#portfolio-tab"><i class="icon portfolio sprite"></i></a>
            </li>
            <li class="menu-item menu-blue">
                <a href="#contact-tab"><i class="icon contact sprite"></i></a>
            </li>
        </ul>

        <div id="scroll-top" class="scroll-top hidden">
            <a href="#">
                <i class="scroll-icon sprite"></i>
                <b>Top</b>
            </a>
        </div>

        <!-- MAIN CONTAINER -->
        <div class="container">
            <div class="fourteen columns offset-by-one">
                <div class="main-content">                    
                    <div class="wrapper clearfix">

                        <!-- SOCIAL ICONS -->
                        <ul class="social-icons" id="top-social">
                            <li class="item twitter">
                                <a href="#"><img class="icon" src="img/social/twitter.png" alt=""/></a>
                            </li>
                            <li class="item facebook">
                                <a href="#"><img class="icon" src="img/social/facebook.png" alt=""/></a>
                            </li>
                            <li class="item dribble">
                                <a href="#"><img class="icon" src="img/social/dribbble.png" alt=""/></a>
                            </li>
                            <li class="item vimeo">
                                <a href="#"><img class="icon" src="img/social/vimeo.png" alt=""/></a>
                            </li>
                            <li class="item linkedin">
                                <a href="#"><img class="icon" src="img/social/linkedin.png" alt=""/></a>
                            </li>
                            <li class="item skype">
                                <a href="#"><img class="icon" src="img/social/skype.png" alt=""/></a>
                            </li>
                            <li class="item google">
                                <a href="#"><img class="icon" src="img/social/google.png" alt=""/></a>
                            </li>
                        </ul>

                        <!-- PROFILE TAB -->
                        <div id="profile-tab" class="tab-wrapper">

                            <!-- VISIBLE TAB HEADER -->
                            <section class="tab">
                                <div class="tab-header tab-red tab-trigger alighleft">
                                    <div class="tab-icon alighleft">
                                        <i class="icon profile sprite"></i>
                                    </div>
                                    <div class="tab-text alighleft">                                    
                                        <h4 class="title">Profile</h4>
                                    </div>
                                    <div class="arrow alighleft"></div>
                                </div>
                                <i class="tab-collapse tab-trigger sprite alignright"></i>
                            </section>

                            <!-- TAB DROPDOWN INNER CONTENT -->
                            <div class="tab-content">
                                <div class="content-wrapper twelve columns offset-by-one alpha">
                                    <section class="content-inner clearfix">

                                        <!-- PROFILE BOX -->
                                        <div class="five columns alpha">
                                            <div class="clearfix">
                                                <h2 class="primary-heading">John Doe</h2>
                                                <h3 class="secondary-heading">graphic/web designer</h3>
                                                <figure class="profile-picture three columns alpha">
                                                    <img src="http://www.placehold.it/140x140" alt=""/>
                                                </figure>
                                            </div>
                                        </div>

                                        <!-- ABOUT ME BOX -->
                                        <div class="seven columns omega">
                                            <div class="clearfix">
                                                <h2 class="primary-heading">About Me</h2>
                                                <p>
                                                    Quisque faucibus ut ipsum ut placerat. Aliquam volutpat ullamcorper magna, eget aliquam est commodo tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sagittis risus vitae pretium placerat.
                                                    <br><br>Nam ullamcorper dignissim purus vel placerat. Integer eget tellus scelerisque, consequat ipsum non, molestie arcu. Aliquam pulvinar, ante ac volutpat hendrerit, ante nisi rhoncus libero, nec fermentum dolor magna iaculis ante.
                                                </p>
                                            </div>
                                        </div>

                                        <!-- SERVICES BOX -->
                                        <div class="twelve columns alpha omega">
                                            <div class="tab-services">                                                
                                                <h2 class="primary-heading">Services</h2>
                                                <ul class="services-list clearfix">

                                                    <li class="two columns service-item alpha">
                                                        <div class="icon-wrapper">
                                                            <figure class="service-icon">
                                                                <img src="http://www.placehold.it/50x50" alt=""/>
                                                            </figure>
                                                        </div>
                                                        <h5 class="tertiary-heading">Service</h5>
                                                        <p class="service-description">Praesent pellentesque id sapien ut fermentum. In ut ipsum sapien. Donec et faucibus sapien. Nam vitae eleifend dolor, at fringilla metus.</p>
                                                    </li>
                                                    <li class="two columns service-item">
                                                        <div class="icon-wrapper">
                                                            <figure class="service-icon">
                                                                <img src="http://www.placehold.it/48x48" alt=""/>
                                                            </figure>
                                                        </div>
                                                        <h5 class="tertiary-heading">Service</h5>
                                                        <p class="service-description">Praesent pellentesque id sapien ut fermentum. In ut ipsum sapien. Donec et faucibus sapien. Nam vitae eleifend dolor, at fringilla metus.</p>
                                                    </li>
                                                    <li class="two columns service-item">
                                                        <div class="icon-wrapper">
                                                            <figure class="service-icon">
                                                                <img src="http://www.placehold.it/50x50" alt=""/>
                                                            </figure>
                                                        </div>
                                                        <h5 class="tertiary-heading">Service</h5>
                                                        <p class="service-description">Praesent pellentesque id sapien ut fermentum. In ut ipsum sapien. Donec et faucibus sapien. Nam vitae eleifend dolor, at fringilla metus.</p>
                                                    </li>
                                                    <li class="two columns service-item">
                                                        <div class="icon-wrapper">
                                                            <figure class="service-icon">
                                                                <img src="http://www.placehold.it/50x50" alt=""/>
                                                            </figure>
                                                        </div>
                                                        <h5 class="tertiary-heading">Service</h5>
                                                        <p class="service-description">Praesent pellentesque id sapien ut fermentum. In ut ipsum sapien. Donec et faucibus sapien. Nam vitae eleifend dolor, at fringilla metus.</p>
                                                    </li>
                                                    <li class="two columns service-item">
                                                        <div class="icon-wrapper">
                                                            <figure class="service-icon">
                                                                <img src="http://www.placehold.it/50x50" alt=""/>
                                                            </figure>
                                                        </div>
                                                        <h5 class="tertiary-heading">Service</h5>
                                                        <p class="service-description">Praesent pellentesque id sapien ut fermentum. In ut ipsum sapien. Donec et faucibus sapien. Nam vitae eleifend dolor, at fringilla metus.</p>
                                                    </li>
                                                    <li class="two columns service-item omega">
                                                        <div class="icon-wrapper">
                                                            <figure class="service-icon">
                                                                <img src="http://www.placehold.it/50x50" alt=""/>
                                                            </figure>
                                                        </div>
                                                        <h5 class="tertiary-heading">Service</h5>
                                                        <p class="service-description">Praesent pellentesque id sapien ut fermentum. In ut ipsum sapien. Donec et faucibus sapien. Nam vitae eleifend dolor, at fringilla metus.</p>
                                                    </li>

                                                </ul>
                                            </div>
                                        </div>
                                    </section>
                                </div>
                            </div>
                            <!-- /TAB DROPDOWN INNER CONTENT  -->

                            <i class="tab-collapse tab-trigger icon-close sprite"></i>
                            <div class="arrow-down"></div>
                        </div>
                        <!-- /PROFILE TAB -->

                        <!-- RESUME TAB -->
                        <div id="resume-tab" class="tab-wrapper">

                            <!-- VISIBLE TAB HEADER -->
                            <section class="tab">
                                <div class="tab-header tab-keppel tab-trigger alighleft">
                                    <div class="tab-icon alighleft">
                                        <i class="icon resume sprite"></i>
                                    </div>
                                    <div class="tab-text alighleft">                                    
                                        <h4 class="title">Resume</h4>
                                    </div>
                                    <div class="arrow alighleft"></div>
                                </div>
                                <i class="tab-collapse tab-trigger sprite alignright"></i>
                                <div class="download-resume">
                                    <a href="#">
                                        <b class="text">Download vCard</b>
                                        <i class="icon sprite"></i>
                                    </a>
                                </div>
                            </section>

                            <!-- TAB DROPDOWN INNER CONTENT -->
                            <div class="tab-content">
                                <div class="content-wrapper twelve columns offset-by-one alpha">
                                    <section class="content-inner clearfix">

                                        <!-- HISTORY BOX -->
                                        <div class="five columns alpha">
                                            <div class="resume-history">
                                                <h3 class="secondary-heading">Employment</h3>
                                                <ul class="history-list clearfix">

                                                    <li class="item four columns offset-by-one alpha">
                                                        <i class="indicator"></i>
                                                        <div class="main-info clearfix">
                                                            <h5 class="tertiary-heading title alighleft">Job Name</h5>
                                                            <h6 class="dates alignright">2010 - 2013</h6>
                                                        </div>
                                                        <h6 class="meta-info">Job Position</h6>
                                                        <p class="description">
                                                            Sed in viverra felis, semper laoreet eros. Nunc urna diam, lacinia sed varius vitae, posuere eu nunc. Vestibulum a turpis vulputate, volutpat mauris nec.
                                                        </p>
                                                    </li>

                                                    <li class="item four columns offset-by-one alpha">
                                                        <i class="indicator"></i>
                                                        <div class="main-info clearfix">
                                                            <h5 class="tertiary-heading title alighleft">Job Name</h5>
                                                            <h6 class="dates alignright">2010 - 2013</h6>
                                                        </div>
                                                        <h6 class="meta-info">Job Position</h6>
                                                        <p class="description">
                                                            Sed in viverra felis, semper laoreet eros. Nunc urna diam, lacinia sed varius vitae, posuere eu nunc. Vestibulum a turpis vulputate, volutpat mauris nec.
                                                        </p>
                                                    </li>

                                                    <li class="item four columns offset-by-one alpha">
                                                        <i class="indicator"></i>
                                                        <div class="main-info clearfix">
                                                            <h5 class="tertiary-heading title alighleft">Job Name</h5>
                                                            <h6 class="dates alignright">2010 - 2013</h6>
                                                        </div>
                                                        <h6 class="meta-info">Job Position</h6>
                                                        <p class="description">
                                                            Sed in viverra felis, semper laoreet eros. Nunc urna diam, lacinia sed varius vitae, posuere eu nunc. Vestibulum a turpis vulputate, volutpat mauris nec.
                                                        </p>
                                                    </li>

                                                </ul>
                                            </div>
                                        </div>
                                        <!-- EDUCATION BOX -->
                                        <div class="five columns omega offset-by-one">
                                            <div class="resume-history">
                                                <h3 class="secondary-heading">Education</h3>
                                                <ul class="history-list clearfix">

                                                    <li class="item four columns offset-by-one alpha">
                                                        <i class="indicator"></i>
                                                        <div class="main-info clearfix">
                                                            <h5 class="tertiary-heading title alighleft">Job Name</h5>
                                                            <h6 class="dates alignright">2010 - 2013</h6>
                                                        </div>
                                                        <h6 class="meta-info">Job Position</h6>
                                                        <p class="description">
                                                            Sed in viverra felis, semper laoreet eros. Nunc urna diam, lacinia sed varius vitae, posuere eu nunc. Vestibulum a turpis vulputate, volutpat mauris nec.
                                                        </p>
                                                    </li>

                                                    <li class="item four columns offset-by-one alpha">
                                                        <i class="indicator"></i>
                                                        <div class="main-info clearfix">
                                                            <h5 class="tertiary-heading title alighleft">Job Name</h5>
                                                            <h6 class="dates alignright">2010 - 2013</h6>
                                                        </div>
                                                        <h6 class="meta-info">Job Position</h6>
                                                        <p class="description">
                                                            Sed in viverra felis, semper laoreet eros. Nunc urna diam, lacinia sed varius vitae, posuere eu nunc. Vestibulum a turpis vulputate, volutpat mauris nec.
                                                        </p>
                                                    </li>

                                                    <li class="item four columns offset-by-one alpha">
                                                        <i class="indicator"></i>
                                                        <div class="main-info clearfix">
                                                            <h5 class="tertiary-heading title alighleft">Job Name</h5>
                                                            <h6 class="dates alignright">2010 - 2013</h6>
                                                        </div>
                                                        <h6 class="meta-info">Job Position</h6>
                                                        <p class="description">
                                                            Sed in viverra felis, semper laoreet eros. Nunc urna diam, lacinia sed varius vitae, posuere eu nunc. Vestibulum a turpis vulputate, volutpat mauris nec.
                                                        </p>
                                                    </li>

                                                </ul>
                                            </div>
                                        </div>
                                        <!-- /HISTORY BOX -->

                                        <!-- SKILLS BOX -->
                                        <div class="twelve columns alpha omega">
                                            <div class="tab-skills">
                                                <h3 class="secondary-heading">My Skills</h3>

                                                <!-- radial progress bar -->
                                                <ul class="skills-list radial clearfix">
                                                    <li class="item three columns alpha">
                                                        <div class="skill-heading">
                                                            <img class="icon" src="img/skill-1.png" alt=""/>
                                                            <span class="name">Photoshop</span>
                                                            <div class="skill-progress radial-progress">
                                                                <input type="text" value="40" 
                                                                       data-width="64" data-height="64"
                                                                       data-readOnly=true data-thickness=".1"
                                                                       data-displayInput=false
                                                                       data-bgColor="#1b1e24" data-fgColor="#ffce54"
                                                                       class="progress">
                                                                <b class="value">40%</b>
                                                            </div>
                                                        </div>
                                                    </li>
                                                    <li class="item three columns alpha">
                                                        <div class="skill-heading">
                                                            <img class="icon" src="img/skill-2.png" alt=""/>
                                                            <span class="name">Illustrator</span>
                                                            <div class="skill-progress radial-progress">
                                                                <input type="text" value="60" 
                                                                       data-width="64" data-height="64"
                                                                       data-readOnly=true data-thickness=".1"
                                                                       data-displayInput=false
                                                                       data-bgColor="#1b1e24" data-fgColor="#80cdff"
                                                                       class="progress">
                                                                <b class="value">60%</b>
                                                            </div>
                                                        </div>
                                                    </li>
                                                    <li class="item three columns alpha">
                                                        <div class="skill-heading">
                                                            <img class="icon" src="img/skill-3.png" alt=""/>
                                                            <span class="name">Flash</span>
                                                            <div class="skill-progress radial-progress">
                                                                <input type="text" value="80" 
                                                                       data-width="64" data-height="64"
                                                                       data-readOnly=true data-thickness=".1"
                                                                       data-displayInput=false
                                                                       data-bgColor="#1b1e24" data-fgColor="#fd6566"
                                                                       class="progress">
                                                                <b class="value">80%</b>
                                                            </div>
                                                        </div>
                                                    </li>
                                                    <li class="item three columns alpha">
                                                        <div class="skill-heading">
                                                            <img class="icon" src="img/skill-4.png" alt=""/>
                                                            <span class="name">After Effects</span>
                                                            <div class="skill-progress radial-progress">
                                                                <input type="text" value="60" 
                                                                       data-width="64" data-height="64"
                                                                       data-readOnly=true data-thickness=".1"
                                                                       data-displayInput=false
                                                                       data-bgColor="#1b1e24" data-fgColor="#80cdff"
                                                                       class="progress">
                                                                <b class="value">60%</b>
                                                            </div>
                                                        </div>
                                                    </li>
                                                </ul>

                                                <!-- linear progress bar -->
                                                <ul class="skills-list linear clearfix">

                                                    <li class="item clearfix">
                                                        <div class="skill-heading three columns alpha">
                                                            <span class="name">Adobe Photoshop</span>
                                                        </div>
                                                        <div class="skill-progress linear-progress nine columns omega">
                                                            <div class="progress-base eight columns alpha omega">
                                                                <div class="progress-fill red" data-value="90"></div>
                                                            </div>
                                                            <div class="progress-value one columns omega">
                                                                <small>90%</small>
                                                                <b class="arrow-left"></b>
                                                            </div>
                                                        </div>
                                                    </li>

                                                    <li class="item clearfix">
                                                        <div class="skill-heading three columns alpha">
                                                            <span class="name">Adobe Illustrator</span>
                                                        </div>
                                                        <div class="skill-progress linear-progress nine columns omega">
                                                            <div class="progress-base eight columns alpha omega">
                                                                <div class="progress-fill blue" data-value="80"></div>
                                                            </div>
                                                            <div class="progress-value one columns omega">
                                                                <small>80%</small>
                                                                <b class="arrow-left"></b>
                                                            </div>
                                                        </div>
                                                    </li>

                                                    <li class="item clearfix">
                                                        <div class="skill-heading three columns alpha">
                                                            <span class="name">Adobe Flash</span>
                                                        </div>
                                                        <div class="skill-progress linear-progress nine columns omega">
                                                            <div class="progress-base eight columns alpha omega">
                                                                <div class="progress-fill green" data-value="70"></div>
                                                            </div>
                                                            <div class="progress-value one columns omega">
                                                                <small>70%</small>
                                                                <b class="arrow-left"></b>
                                                            </div>
                                                        </div>
                                                    </li>

                                                    <li class="item clearfix">
                                                        <div class="skill-heading three columns alpha">
                                                            <span class="name">Adobe After Effects</span>
                                                        </div>
                                                        <div class="skill-progress linear-progress nine columns omega">
                                                            <div class="progress-base eight columns alpha omega">
                                                                <div class="progress-fill yellow" data-value="90"></div>
                                                            </div>
                                                            <div class="progress-value one columns omega">
                                                                <small>90%</small>
                                                                <b class="arrow-left"></b>
                                                            </div>
                                                        </div>
                                                    </li>

                                                </ul>
                                            </div>
                                        </div>
                                        <!-- /SKILLS BOX -->

                                    </section>
                                </div>
                            </div>
                            <!-- /TAB DROPDOWN INNER CONTENT  -->

                            <i class="tab-collapse tab-trigger icon-close sprite"></i>
                            <div class="arrow-down"></div>
                        </div>
                        <!-- /RESUME TAB -->

                        <!-- PORTFOLIO TAB -->
                        <div id="portfolio-tab" class="tab-wrapper">

                            <!-- VISIBLE TAB HEADER -->
                            <section class="tab">
                                <div class="tab-header tab-yellow tab-trigger alighleft">
                                    <div class="tab-icon alighleft">
                                        <i class="icon portfolio sprite"></i>
                                    </div>
                                    <div class="tab-text alighleft">                                    
                                        <h4 class="title">Portfolio</h4>
                                    </div>
                                    <div class="arrow alighleft"></div>
                                </div>
                                <i class="tab-collapse tab-trigger sprite alignright"></i>
                            </section>

                            <!-- TAB DROPDOWN INNER CONTENT -->
                            <div class="tab-content">
                                <div class="content-wrapper twelve columns offset-by-one alpha">
                                    <section class="content-inner clearfix">
                                        <!--PORTFOLIO FILTERS  -->
                                        <div class="twelve columns alpha omega">
                                            <ul id="portfolio-filter" class="portfolio-filter clearfix">
                                                <li class="item two columns"><a href="#" data-filter="*">Show All</a></li>
                                                <li class="item two columns"><a href="#" data-filter=".graphic">Graphic</a></li>
                                                <li class="item two columns"><a href="#" data-filter=".web">Web</a></li>
                                                <li class="item two columns"><a href="#" data-filter=".3d">3D</a></li>
                                                <li class="item two columns"><a href="#" data-filter=".print">Print</a></li>
                                            </ul>
                                            <div id="portfolio" class="isotope twelve columns alpha omega">
                                                <div class="item 3d four columns alpha omega">
                                                    <a class="portfolio-image" href="http://www.placehold.it/220x165">
                                                        <figure>
                                                            <img src="http://www.placehold.it/220x165" alt=""/>
                                                            <figcaption>
                                                                <h5 class="title">Project Name</h5>                                                                
                                                                <i class="icon sprite"></i>
                                                            </figcaption>
                                                        </figure>                                                        
                                                    </a>
                                                </div>
                                                <div class="item 3d four columns alpha omega">
                                                    <a class="portfolio-image" href="http://www.placehold.it/220x165">
                                                        <figure>
                                                            <img src="http://www.placehold.it/220x165" alt=""/>
                                                            <figcaption>
                                                                <h5 class="title">Project Name</h5>                                                                
                                                                <i class="icon sprite"></i>
                                                            </figcaption>
                                                        </figure> 
                                                    </a>
                                                </div>
                                                <div class="item print four columns alpha omega">
                                                    <a class="portfolio-image" href="http://www.placehold.it/220x165">
                                                        <figure>
                                                            <img src="http://www.placehold.it/220x165" alt=""/>
                                                            <figcaption>
                                                                <h5 class="title">Project Name</h5>                                                                
                                                                <i class="icon sprite"></i>
                                                            </figcaption>
                                                        </figure> 
                                                    </a>
                                                </div>
                                                <div class="item web four columns alpha omega">
                                                    <a class="portfolio-image" href="http://www.placehold.it/220x165">
                                                        <figure>
                                                            <img src="http://www.placehold.it/220x165" alt=""/>
                                                            <figcaption>
                                                                <h5 class="title">Project Name</h5>                                                                
                                                                <i class="icon sprite"></i>
                                                            </figcaption>
                                                        </figure> 
                                                    </a>
                                                </div>                                                
                                                <div class="item print four columns alpha omega">
                                                    <a class="portfolio-image" href="http://www.placehold.it/220x165">
                                                        <figure>
                                                            <img src="http://www.placehold.it/220x165" alt=""/>
                                                            <figcaption>
                                                                <h5 class="title">Project Name</h5>                                                                
                                                                <i class="icon sprite"></i>
                                                            </figcaption>
                                                        </figure> 
                                                    </a>
                                                </div>
                                                <div class="item graphic four columns alpha omega">
                                                    <a class="portfolio-image" href="http://www.placehold.it/220x165">
                                                        <figure>
                                                            <img src="http://www.placehold.it/220x165" alt=""/>
                                                            <figcaption>
                                                                <h5 class="title">Project Name</h5>                                                                
                                                                <i class="icon sprite"></i>
                                                            </figcaption>
                                                        </figure>
                                                    </a>
                                                </div>
                                                <div class="item web four columns alpha omega">
                                                    <a class="portfolio-image" href="http://www.placehold.it/220x165">
                                                        <figure>
                                                            <img src="http://www.placehold.it/220x165" alt=""/>
                                                            <figcaption>
                                                                <h5 class="title">Project Name</h5>                                                                
                                                                <i class="icon sprite"></i>
                                                            </figcaption>
                                                        </figure> 
                                                    </a>
                                                </div>
                                                <div class="item graphic four columns alpha omega">
                                                    <a class="portfolio-image" href="http://www.placehold.it/220x165">
                                                        <figure>
                                                            <img src="http://www.placehold.it/220x165" alt=""/>
                                                            <figcaption>
                                                                <h5 class="title">Project Name</h5>                                                                
                                                                <i class="icon sprite"></i>
                                                            </figcaption>
                                                        </figure> 
                                                    </a>
                                                </div>
                                                <div class="item web four columns alpha omega">
                                                    <a class="portfolio-image" href="http://www.placehold.it/220x165">
                                                        <figure>
                                                            <img src="http://www.placehold.it/220x165" alt=""/>
                                                            <figcaption>
                                                                <h5 class="title">Project Name</h5>                                                                
                                                                <i class="icon sprite"></i>
                                                            </figcaption>
                                                        </figure> 
                                                    </a>
                                                </div>
                                                <div class="item graphic four columns alpha omega">
                                                    <a class="portfolio-image" href="http://www.placehold.it/220x165">
                                                        <figure>
                                                            <img src="http://www.placehold.it/220x165" alt=""/>
                                                            <figcaption>
                                                                <h5 class="title">Project Name</h5>                                                                
                                                                <i class="icon sprite"></i>
                                                            </figcaption>
                                                        </figure> 
                                                    </a>
                                                </div>
                                                <div class="item 3d four columns alpha omega">
                                                    <a class="portfolio-image" href="http://www.placehold.it/220x165">
                                                        <figure>
                                                            <img src="http://www.placehold.it/220x165" alt=""/>
                                                            <figcaption>
                                                                <h5 class="title">Project Name</h5>                                                                
                                                                <i class="icon sprite"></i>
                                                            </figcaption>
                                                        </figure> 
                                                    </a>
                                                </div>
                                                <div class="item print four columns alpha omega">
                                                    <a class="portfolio-image" href="http://www.placehold.it/220x165">
                                                        <figure>
                                                            <img src="http://www.placehold.it/220x165" alt=""/>
                                                            <figcaption>
                                                                <h5 class="title">Project Name</h5>                                                                
                                                                <i class="icon sprite"></i>
                                                            </figcaption>
                                                        </figure> 
                                                    </a>
                                                </div>
                                            </div>
                                            <nav class="portfolio-pagination twelve columns alpha omega">
                                                <ul>
                                                    <li><a href="#">1</a></li>
                                                    <li><a href="#">2</a></li>
                                                    <li><a href="#">3</a></li>
                                                </ul>
                                            </nav>
                                        </div>
                                    </section>
                                </div>
                            </div>
                            <!-- /TAB DROPDOWN INNER CONTENT  -->

                            <i class="tab-collapse tab-trigger icon-close sprite"></i>
                            <div class="arrow-down"></div>
                        </div>
                        <!-- /PORTFOLIO TAB -->

                        <!-- CONTACT TAB -->
                        <div id="contact-tab" class="tab-wrapper">

                            <!-- VISIBLE TAB HEADER -->
                            <section class="tab">
                                <div class="tab-header tab-blue tab-trigger alighleft">
                                    <div class="tab-icon alighleft">
                                        <i class="icon contact sprite"></i>
                                    </div>
                                    <div class="tab-text alighleft">                                    
                                        <h4 class="title">Contact</h4>
                                    </div>
                                    <div class="arrow alighleft"></div>
                                </div>
                                <i class="tab-collapse tab-trigger sprite alignright"></i>
                            </section>

                            <!-- TAB DROPDOWN INNER CONTENT -->
                            <div class="tab-content">
                                <div class="content-wrapper twelve columns offset-by-one alpha">
                                    <section class="content-inner clearfix">
                                        <div class="contact-map twelve columns alpha omega">
                                            <div><iframe width="700" height="300" src="https://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=San+Francisco,+CA,+United+States&amp;aq=0&amp;oq=san+fran&amp;sll=37.0625,-95.677068&amp;sspn=50.956929,135.263672&amp;ie=UTF8&amp;hq=&amp;hnear=San+Francisco,+California&amp;t=m&amp;z=12&amp;ll=37.77493,-122.419416&amp;output=embed"></iframe></div>
                                        </div>
                                        <div class="contact-info twelve columns alpha omega">
                                            <div class="contact-form seven columns alpha">
                                                <form action="#" method="get">
                                                    <input type="text" name="name" placeholder="Name"/>
                                                    <input type="text" name="subject" placeholder="Subject"/>
                                                    <textarea name="message" placeholder="Message" rows="7"></textarea>
                                                    <input type="submit" name="submit" value="Send"/>
                                                </form>
                                            </div>
                                            <div class="contact-info four columns omega offset-by-one">
                                                <ul class="contact-list">
                                                    <li class="contact-item">
                                                        <b>2020 NW 7th St,  Miami, FL 33125, USA</b>
                                                    </li>
                                                    <li class="contact-item">
                                                        <b>email@email.com</b>
                                                    </li>
                                                    <li class="contact-item">
                                                        <b>+ 123 456 789</b>
                                                    </li>
                                                </ul>
                                                <!-- CONTACT SOCIAL ICONS -->
                                                <ul class="social-icons">
                                                    <li class="item twitter">
                                                        <a href="#"><img class="icon" src="img/social/twitter.png" alt=""/></a>
                                                    </li>
                                                    <li class="item facebook">
                                                        <a href="#"><img class="icon" src="img/social/facebook.png" alt=""/></a>
                                                    </li>
                                                    <li class="item dribble">
                                                        <a href="#"><img class="icon" src="img/social/dribbble.png" alt=""/></a>
                                                    </li>
                                                    <li class="item vimeo">
                                                        <a href="#"><img class="icon" src="img/social/vimeo.png" alt=""/></a>
                                                    </li>
                                                    <li class="item linkedin">
                                                        <a href="#"><img class="icon" src="img/social/linkedin.png" alt=""/></a>
                                                    </li>
                                                    <li class="item skype">
                                                        <a href="#"><img class="icon" src="img/social/skype.png" alt=""/></a>
                                                    </li>
                                                    <li class="item google">
                                                        <a href="#"><img class="icon" src="img/social/google.png" alt=""/></a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </section>
                                </div>
                            </div>
                            <!-- /TAB DROPDOWN INNER CONTENT  -->

                            <i class="tab-collapse tab-trigger icon-close sprite"></i>
                            <div class="arrow-down"></div>
                        </div>
                        <!-- /CONTACT TAB -->

                    </div>                    
                </div>
            </div>
        </div>
        
        <!-- /MAIN CONTAINER -->

        <script src="js/jquery.min.js"></script>
        <script src="js/jquery.isotope.min.js" type="text/javascript"></script>
        <script src="js/jquery.knob.js" type="text/javascript"></script>
        <script src="fancybox/jquery.fancybox.pack.js" type="text/javascript"></script>
        <script src="js/script.js" type="text/javascript"></script>
    </body>
</html>