<!doctype html>

<!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->

<!--[if IE 7]>    <html class="ie7 oldie"> <![endif]-->

<!--[if IE 8]>    <html class="ie8 oldie"> <![endif]-->

<!--[if gt IE 8]><!-->

<html class="">



<!--<![endif]-->

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<meta name="description" content="Free responsive starter kits from Dreamweaver CC">

<meta name="keywords" content="HTML5,CSS3,Dreamweaver CC,Starter kits,Free templates">

<meta name="author" content="Adobe Dreamweaver CC">

<title>Portfolio template By Adobe Dreamweaver CC</title>

<link href="../../Responsive Starter Assets/Portfolio/css/boilerplate.css" rel="stylesheet" type="text/css">

<link href="../../Responsive Starter Assets/Portfolio/css/portfolioResponsive.css" rel="stylesheet" type="text/css">

<link href="../../Responsive Starter Assets/Portfolio/css/portfolioStyle.css" rel="stylesheet" type="text/css">

<!-- 

To learn more about the conditional comments around the html tags at the top of the file:

paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/



Do the following if you're using your customized build of modernizr (http://www.modernizr.com/):

* insert the link to your js here

* remove the link below to the html5shiv

* add the "no-js" class to the html tags at the top

* you can also remove the link to respond.min.js if you included the MQ Polyfill in your modernizr build 

-->

<!--[if lt IE 9]>

<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>

<![endif]-->

<script src="../../Responsive Starter Assets/Portfolio/js/respond.min.js"></script>



<!-- Import any font of your choice-->

<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.-->

<script>var __adobewebfontsappname__="dreamweaver"</script>

<script src="http://use.edgefonts.net/montserrat:n4:default;alice:n4:default.js" type="text/javascript"></script>

</head>



<body>

<!--************************************************************************

Container starts here

****************************************************************************-->

<div class="gridContainer clearfix"> 

  <!--************************************************************************

    HERO Section starts here

    ****************************************************************************-->

  <header class="fluid hero heroHeader"> 

    <!--Add you logo here--> 

    <a href="#" title="Logo">

    <figure class="fluid logo textStyle"><!-- <img src="logoImage.png" alt="sample logo"> -->LOGO</figure>

    </a>

    <nav class="fluid topNav"> 

      <!-- Customize your navigation links-->

      <ul class="fluid fluidList topNavUl">

        <li class="fluid topNavLI zeroMargin_desktop zeroMargin_tablet zeroMargin_mobile"><strong><a href="#" class="linkStyle" title="Nav Link">NAV 1</a></strong></li>

        <li class="fluid topNavLI"><strong><a href="#" class="linkStyle" title="Nav Link">NAV 2</a></strong></li>

        <li class="fluid topNavLI"><strong><a href="#" class="linkStyle" title="Nav Link">NAV 3</a></strong></li>

      </ul>

    </nav>

    <h1 class="fluid mainHeading headingStyle">HERO TEXT</h1>

    <h6 class="fluid mainTagline textStyle">Some Awesome Hero Tagline that makes it look Good</h6>

  </header>

  <!--HERO section ends here--> 

  

  <!--************************************************************************

    Primary Container starts here

    ****************************************************************************-->

  <article class="fluid textContainer">

    <section id="sectionOne" class="fluid ">

      <h2 class="sectionText">Section Heading 1</h2>

      <p class="paraContent">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam varius sem neque. Integer ornare.</p>

    </section>

    <section id="sectionTwo" class="fluid ">

      <h2 class="sectionText">Section Heading 2</h2>

      <p class="paraContent">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam varius sem neque. Integer ornare.</p>

    </section>

  </article>

  <!--Primary content area ends here--> 

  

  <!--************************************************************************

    Gallery starts here - Elements hidden in mobile mode can be revisited by going into manage hidden element mode available in context menu

    ****************************************************************************-->

  <article class="fluid gallery">

    <h2 class="fluid showAreaH2 headingStyle">SHOW AREA</h2>

    <figure class="fluid tiles zeroMargin_desktop zeroMargin_tablet"> <img src="../../Responsive Starter Assets/Portfolio/assets/placeholder.png" alt="placeholder"/>

      <figcaption class="textStyle"></figcaption>

    </figure>

    <figure class="fluid tiles"> <img src="../../Responsive Starter Assets/Portfolio/assets/placeholder.png" alt="placeholder"/>

      <figcaption class="textStyle"></figcaption>

    </figure>

    <figure class="fluid tiles  zeroMargin_tablet hide_mobile"> <img src="../../Responsive Starter Assets/Portfolio/assets/placeholder.png" alt="placeholder"/>

      <figcaption class="textStyle"></figcaption>

    </figure>

    <figure class="fluid tiles zeroMargin_desktop  hide_mobile"> <img src="../../Responsive Starter Assets/Portfolio/assets/placeholder.png" alt="placeholder"/>

      <figcaption class="textStyle"></figcaption>

    </figure>

    <figure class="fluid tiles zeroMargin_tablet hide_mobile"> <img src="../../Responsive Starter Assets/Portfolio/assets/placeholder.png" alt="placeholder"/>

      <figcaption class="textStyle"></figcaption>

    </figure>

    <figure class="fluid tiles hide_mobile"> <img src="../../Responsive Starter Assets/Portfolio/assets/placeholder.png" alt="placeholder"/>

      <figcaption class="textStyle"></figcaption>

    </figure>

  </article>

  <!--Gallery ends here--> 

  

  <!--************************************************************************

    Secondary container starts here

    ****************************************************************************-->

  <article class="fluid textContainer" id="secondaryStyling">

    <section class="fluid secondarySection zeroMargin_desktop zeroMargin_tablet">

      <h2 class="fluid secondaryHeading headingStyle">HEADER ONE</h2>

      <p class="contentArea">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>

    </section>

    <section class="fluid secondarySection hide_mobile">

      <h2 class="fluid secondaryHeading headingStyle">HEADER TWO</h2>

      <p class="contentArea">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>

    </section>

  </article>

  <!--Secondary content section ends here--> 

  

  <!--************************************************************************

    Footer starts here

    ****************************************************************************-->

  <footer class="fluid footer">

    <section class="fluid footerSection zeroMargin_desktop zeroMargin_tablet">

      <h2 class="fluid footerTitle headingStyle">Footer 1</h2>

      <p class="paraContent footerTextContainer">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip</p>

    </section>

    <section class="fluid footerSection hide_mobile">

      <h2 class="fluid footerTitle headingStyle">Footer 2</h2>

      <p class="paraContent footerTextContainer">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip</p>

    </section>

    <section class="fluid footerSection hide_mobile">

      <h2 class="fluid footerTitle headingStyle">Footer 3</h2>

      <p class="paraContent footerTextContainer">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip</p>

    </section>

  </footer>

  <!--Footer ends here--> 

</div>

<!--Container ends here-->

</body>

</html>

