{% set active_page = 'headers.html' -%}

{% extends "layouts/default.html" %}

{% block content %}
<div class="section --o--demo-bg-gold-pattern --o--demo-bg-orange-90">
    <div class="section-content">
        <div class="container">
            <div class="row">
                <div class="col-md-6 offset-md-3 p-b-9 m-t-20 text-xs-center --o--text-xs-light">
                    <h1>Headers</h1>
                    <h5 class="--o--line-height-normal">
                        Divinity has an amazing set of header layouts & styles so you can create a unique experience for your users. All the styles can be normal or full-width and menu drop-downs can be activated with click or hover events. On total more than <strong>25</strong> header styles can be created!
                    </h5>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="section">
    <div class="section-content">
        <div class="container">
            <div class="row">
                <div class="col-md-12 p-y-9 text-xs-center">
                    <p>
                         <strong>Basic Menu</strong>: Fully customisable Basic menu layout with drop-downs. Logo can be aligned on either left, right or center.
                    </p>
                    <img src="assets/images/headers/divinity-menu-normal-center.jpg" alt="Basic Menu">

                    <p class="m-t-9">
                         <strong>Float Menu</strong>: A unique style of menu that floats above the content. The logo can be aligned in any direction.
                    </p>
                    <img src="assets/images/headers/divinity-menu-float-left.jpg" alt="float menu with logo left">

                    <p class="m-t-9">
                         <strong>Float & centered logo </strong>: Float menu style with logo aligned in the center.
                    </p>
                    <img src="assets/images/headers/divinity-menu-float-center.jpg" alt="float menu with logo in the center">

                    <p class="m-t-9">
                         <strong>Float & right logo </strong>: Float menu style with logo aligned at the right.
                    </p>
                    <img src="assets/images/headers/divinity-menu-float-right.jpg" alt="float menu with logo iright">

                    <p class="m-t-9">
                         <strong>Logo on top</strong>: With that style the logo is positioned above the menu, leaving more space for your menu links
                    </p>
                    <img src="assets/images/headers/divinity-menu-top-center.jpg" alt="logo top, menu below">

                    <p class="m-t-9">
                         <strong>Logo on top & left</strong>: Same style but the logo is positioned left
                    </p>
                    <img src="assets/images/headers/divinity-menu-top-left.jpg" alt="flogo top, menu below">

                    <p class="m-t-9">
                         <strong>Logo on top & right</strong>: Same style but the logo is positioned Right
                    </p>
                    <img src="assets/images/headers/divinity-menu-top-right.jpg" alt="logo top, menu below">

                    <p class="m-t-9 m-b-9">
                         <strong>Transparent menu</strong>: Transparent menu to create stunning page designs. Transparent menu can be applied to any of the styles & layouts as the above menu examples.
                    </p>
                    <img src="assets/images/headers/divinity-menu-transparent-center.jpg" alt="transparent menu with logo">
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}