==============
HTML Structure
==============

Flatrok theme is a responsive layout using the `Bootstrap framework (ver. 3) <http://getbootstrap.com/>`_
Each content sections is labeled with an ``id``. ``(ex: <div id="profile"></div>)``. Many classes associated with each
``div`` are related to the `bootstrap framework`. For more information regarding bootstrap classes please refer to the bootstrap docs, located `here <http://getbootstrap.com>`_.
You will find that the html file, ``index.html`` is well commented on each section. Refer to the documentation below for more information.

.. index:: Social Links

Social Links Section
--------------------

Remove / Update the social links using `FontAwesome <http://fontawesome.io/>`_ set class names. 

.. note:: For more information on FontAwesome class names, please refer to `FontAwesome CheatSheet <http://fortawesome.github.io/Font-Awesome/cheatsheet/>`_.

.. code-block:: html

	<!--Social Links-->
	<div class="container social-links hidden-xs">
	    <ul>
	        <li><a href="#contact"><i class="fa fa-rss"></i></a></li>
	        <li><a href="#"><i class="fa fa-facebook"></i></a></li>
	        <li><a href="#"><i class="fa fa-twitter"></i></a></li>
	        <li><a href="#"><i class="fa fa-google-plus"></i></a></li>
	        <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
	        <li><a href="#"><i class="fa fa-github"></i></a></li>

	    </ul>
	</div>

.. note:: When changing social links in the header, the footer social links will update accordingly.

.. index:: Page Header

Page Header
-----------
The page header sections is marked with a class ``page-head`` and it contains your profile picture, name, quote, job tag and navigation. These elements are shown below:

.. index:: Profile Picture, Quote and Jobtag

Profile Picture, Quote and Jobtag
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

To change the profile picture, update the URL of the ``<img>`` tag. The name and quote displayed are both inside the ``<div class="tagline">``.

.. code-block:: html

    <div class="col-sm-12 col-md-12">
        <div class="profile-pic">
            <img src="images/profile.png" width="181" height="181" alt="Profile picture."/>
        </div>
        <div class="tagline">Joe Smith<span>Going forward, one line at a time.</span></div>
        <div class="clearfix"></div>
        <div class="jobtag">
            <span>Developer</span>
        </div>
    </div>							

.. index:: Navigation

Navigation
~~~~~~~~~~
The navigation menu is made up of a wrapper, nav-bar class, and an unordered list of nav-items. Each list item has a child
anchor element which has a nested div. The nested ``<div class="oval">`` is the actual nav button to change.

For example if you wanted to change the icon displayed for the profile section:

.. code-block:: html

	<div class="oval"><i class="fa fa-home"></i><span>Profile</span></div>

you would change the class name ``fa-home`` to a different FontAwesome icon class:

.. code-block:: html

	<div class="oval"><i class="fa fa-user"></i><span>Profile</span></div>

------

.. code-block:: html

    <!--Navigation-->
    <div class="nav-wrapper">
        <div class="nav-bar">
            <ul>
                <li class="nav-item profile-bg">
                    <a href="#profile">
                        <div class="oval"><i class="fa fa-home"></i><span>Profile</span></div>
                    </a>
                </li>
                <li class="nav-item resume-bg">
                    <a href="#resume">
                        <div class="oval"><i class="fa fa-file-text"></i><span>Resume</span></div>
                    </a>
                </li>
                <li class="nav-item portfolio-bg">
                    <a href="#portfolio">
                        <div class="oval"><i class="fa fa-book"></i><span>Portfolio</span></div>
                    </a>
                </li>
                <li class="nav-item contact-bg">
                    <a href="#contact">
                        <div class="oval"><i class="fa fa-envelope"></i><span>Contact</span></div>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <!--End Navigation -->

.. index:: Profile Section

Profile
-------

At the start of the profile section, there is a general overview area. This area is a standard div with a class of info.
Edit the contents of ``<p>`` to update this sections.

Information
~~~~~~~~~~~

The information sections contains information about yourself. 

.. code-block:: html

	<!--Profile Information-->
	<div class="col-xs-12 col-sm-3 col-md-offset-1 col-md-3">
	    <h2>Profile</h2>

	    <h3>Information</h3>

	    <div class="profile-information">
	        <div class="item">Name: <span>Joe Smith</span></div>
	        <div class="item">Age: <span>27</span></div>
	        <div class="item">From: <span>USA</span></div>
	        <div class="item">Lives In: <span>New York, NY</span></div>
	        <div class="item">Likes:
	            <ul class="tag-area">
	                <li>Programming</li>
	                <li>Running</li>
	                <li>Sports</li>
	                <li>Design</li>
	                <li>Cars</li>
	            </ul>
	        </div>
	    </div>
	</div> <!--End Profile Information -->

Skills
~~~~~~
The skills section is broken down into two divs. The center column and the right column. The center column is commented as ``<!--Profile Skills Section 1-->``
with the right column being ``<!--Profile Skills Section 2-->``. An individual skill item is shown below:

| The skill item title is nested inside a ``<h5>``, and the description is nested inside the ``<p>``.

.. important:: The ``data-fill-level`` attribute is used to set the amount to fill the progress bars. *Values range 1-10*

.. code-block:: html

	<div class="skill-item">
	    <h5>C# / ASP.NET</h5>
	    <ul class="progress-bubbles color-bg-profile" data-fill-level="2"></ul>
	    <p>Tamquam apeirian argumentum vim id. Cu reque quaeque vis, id quo sumo vero.</p>
	</div>


Resume
------

The resume is broken down into two sections, the :ref:`Timeline` and :ref:`Experience`.

.. index:: Timeline

.. _Timeline:

Timeline
~~~~~~~~

The timeline is used for both the *Education* and *Work* sections of the Resume. The *Work* section uses an extra
``<span>`` to display the job title.

.. note:: The ``<span class="job-title">`` show a sub heading other the item's header. ex. *Work List Item*.

.. code-block:: html

	<div class="timeline-item">
	    <div class="date">
	        <div class="dot"></div>
	        <span>Feb 2001 - Nov 2003</span>
	    </div>
	    <h5 class="timeline-title">Great Company</h5>
	    <span class="job-title">iOS Developer</span>

	    <p>Donec blandit aliquam enim ac adipiscing. Quisque tempus lacus quis volutpat mattis. Quisque vel
	        gravida massa, et pharetra lacus. Nulla facilisi.</p>
	</div>

.. index:: Experience

.. _Experience:

Experience
~~~~~~~~~~

| The experience section is an area to show a quick overview of progress bars and tag area. 
| A single experience item

.. code-block:: html

	<!--Experience Item-->
	<div class="experience-item">
	    <p>PHP</p>
	    <div class="progress">
	        <div class="progress-bar progress-bar-experience" role="progressbar" data-value="70"
	             aria-valuemin="0" aria-valuemax="100">
	            <span class="sr-only">70% Complete (success)</span>
	        </div>
	    </div>
	</div> <!-- End Experience Item -->

To change the value of the progress bar update the ``data-value`` attribute on the ``progress-bar-experience`` ``<div>``.

-----

The *Other Experience* section is made up of a ``<ul>`` element with a class of ``tag-area``. Each ``<li>`` element is a new
item in the section.

.. code-block:: html

	<!--Other Experience-->
	<div class="row">
	    <div class="col-md-offset-1 col-md-10">
	        <div class="other-experience">
	            <h5>Other Experience</h5>
	            <ul class="tag-area">
	                <li>Django</li>
	                <li>Visual Studio</li>
	                <li>Adobe Illustrator</li>
	                <li>Adobe Photoshop</li>
	                <li>Ruby</li>
	                <li>Rails</li>
	                <li>Linux</li>
	                <li>Windows</li>
	                <li>Mac OSX</li>
	                <li>MongoDB</li>
	            </ul>
	        </div>
	    </div>
	</div> <!-- End Other Experience -->

.. index:: Portfolio

.. _Portfolio:

Portfolio
---------

The Portfolio section uses to ``<ul>`` elements to make the menu as well as the images to display. The portfolio menu has a nested ``<a>`` element, which
is used to determine which images are displayed.

.. warning:: Only one ``<li>`` must should have a class of ``active`` to show the initial selected item. Each ``<a>`` must contain a ``data-filter`` attribute,
	which is used to determine the class of items to display.

.. code-block:: html

	<!--Portfolio Menu -->
	<ul class="portfolio-menu">
	    <li class="active"><a href="#" data-filter="*">Everything</a></li>
	    <li><a href="#" data-filter=".photos">Photos</a></li>
	    <li><a href="#" data-filter=".videos">Videos</a></li>
	    <li><a href="#" data-filter=".sites">Sites</a></li>
	</ul>

The corresponding image for the *Photos* menu item:

.. code-block:: html

	<li class="portfolio-item photos">
	    <a href="images/blankframe.png" class="popbox">
	        <img src="images/blankframe.png" alt="Portfolio Image"/>
	    </a>
	</li>

-----

Portfolio Container:

.. code-block:: html

	<ul id="portfolio-container">
	    <li class="portfolio-item photos">
	        <a href="images/blankframe.png" class="popbox">
	            <img src="images/blankframe.png" alt="Portfolio Image"/>
	        </a>
	    </li>
	    <li class="portfolio-item sites">
	        <a href="images/testImg1.png" class="popbox">
	            <img src="images/testImg1.png" alt="Portfolio Image"/>
	        </a>
	    </li>
	    <li class="portfolio-item sites videos"><a href="images/largeImg.png" class="popbox"><img
	            src="images/largeImg.png"
	            alt="Portfolio Image"/></a></li>
	</ul> 

.. index:: Contact Section

.. _Contact:

Contact
-------

The Contact section contains a map using Google Map's API, a section for contact information and a form to email you feedback.

.. index:: Google Maps

Google Maps
~~~~~~~~~~~

The plugin inserts the map by finding ``<div id="#gMap"></div>``, and pulling the address from contact address section.

.. seealso:: :ref:`jQuery Google Maps`

.. code-block:: html

	<!-- Contact Map Address -->
	<p>
	    <span>Joe Smith</span>
	    123 Main St. <br/>
	    New York, NY 10013
	</p>
	<!-- End Contact Map Address -->


Contact Information
~~~~~~~~~~~~~~~~~~~

To change the icons used for each section, change the Font Awesome class on the corresponding ``<i>`` element.

.. code-block:: html

	<div class="col-sm-5 col-md-offset-1 col-md-4 contact-info">
	    <h3>Contact Information</h3>

	    <div class="contact-address">
	        <i class="fa fa-user"></i>

	        <!-- Contact Map Address -->
	        <p>
	            <span>Joe Smith</span>
	            123 Main St. <br/>
	            New York, NY 10013
	        </p>
	        <!-- End Contact Map Address -->
	    </div>
	    <div class="contact-phone">
	        <i class="fa fa-phone"></i>

	        <p>
	            +1 555-555-5555
	        </p>
	    </div>
	    <div class="contact-email">
	        <i class="fa fa-envelope"></i>

	        <p>
	            joesmith@company.com
	            http://www.joesmith.com
	        </p>
	    </div>
	</div>


Contact form
~~~~~~~~~~~~
The contact form uses a simple php script to send mail. In order for the contact form to get mail to you, 
please update the contact form ``config.php`` file.

.. note:: Error Messages are set within the ``postaction.php`` file.



.. code-block:: php
	
	<?php

	//Email Config
	define('to', 'youremail@domain.com');
	define('from', 'fromemail@domain.com');
	define('subject', 'Someone has contacted you.');

	?>