Mad Bear Documentation

Description

Emily - minimal portfolio HTML template for photography and design with friendly SEO, modern design and gallery which supports iPhone, iPad, Blackberry 6 , Android and desktop. It’s easy to use and concentrates on showcasing your work to potential clients.

What's included

Files

Emily - Creative Photography Portfolio/
├── assets/
│   ├── css/
│   │   ├── vendors/
│   │   │   ├── bootstrap-grid.min
│   │   │   ├── ug-theme-default
│   │   │   ├── unite-gallery
│   │   │   └── swiper.min.css
│   │   ├── plugins.min.css
│   │   └── style.css
│   ├── images/
│   │   ├── albums/
│   │   ├── gallery/
│   │   ├── home-slider/
│   │   └── home-slider/
│   ├── js/
│   │   ├── vendors/
│   │   │   ├── anime.min.js
│   │   │   ├── jquery.filterizr.min.js
│   │   │   ├── jquery.validate.min.js
│   │   │   ├── swiper.min.js
│   │   │   ├── ug-theme-default.js
│   │   │   ├── ug-theme-tiles.js
│   │   │   └── unitegallery.min.js
│   │   ├── jquery-3.2.1.min.js
│   │   ├── main.js
│   │   └── plugins.min.js
├── about.html
├── albums.html
├── blog.html
├── blog-single-page.html
├── contact.html
├── contact.php
├── gallery.html
└── index.html

HTML Structure

Home page slider

Learn more: link

<main class="ms-container home-slider">
  <!-- Swiper Slider -->
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <!-- Slide -->
      <div class="swiper-slide">
        <div class="slide-inner">
          <div class="overlay"></div>
          <div class="slide-inner--image" style="background-image: url('IMAGE.jpg')"></div>
          <div class="slide-inner--info">
            <h1>TITLE</h1>
            <a href="gallery.html" data-type="page-transition" class="ms-btn--slider">take a look</a>
          </div>
        </div>
      </div>
      ...
    <div class="swiper-nav-btn">
      <div class="swiper-button-prev swiper-button-white">prev</div>
      <div class="swiper-button-next swiper-button-white">next</div>
    </div>
    <!-- Pagination -->
    <div class="expanded-timeline">
      <div class="expanded-timeline__counter"><span></span><span></span></div>
      <div class="swiper-pagination"></div>
      <div class="scroll-message">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16.5 15.98" class="scroll-svg"><title>Asset 1</title><g id="0c3e5993-cf30-47b9-9bf6-302ed3a70f87">
        <g id="849902c3-24a3-46e6-9bf3-8dab0a71cce8" data-name="Layer 1"><polygon fill="#fff" points="0 4.64 0.71 5.34 3.85 2.2 3.85 15.98 4.85 15.98 4.85 2.2 8 5.34 8.71 4.64 4.35 0.29 0 4.64"></polygon><polygon fill="#fff" points="11.65 0 11.65 13.79 8.5 10.64 7.79 11.35 12.15 15.7 16.5 11.35 15.79 10.64 12.65 13.79 12.65 0 11.65 0"></polygon></g></g></svg>Scroll
      </div>
    </div>
  </div>
</main>

<nav class="ms-nav">
  <div class="ms-logo">
    <a href="index.html" data-type="page-transition">
      <div class="logo-dark current"><img src="logo-dark.svg" alt="logo image"></div>
      <div class="logo-light"><img src="logo-light.svg" alt="logo image"></div>
    </a>
  </div>
  <button class="hamburger" type="button" data-toggle="navigation">
  <span class="hamburger-box">
    <span class="hamburger-label">menu</span>
    <span class="hamburger-inner"></span>
  </span>
  </button>
  <div class="height-full-viewport">
    <ul class="ms-navbar">
      <!-- Nav Link -->
      <li class="nav-item">
        <a href="index.html" data-type="page-transition">
          <span class="ms-btn">home</span>
          <span class="nav-item__label">Back to home page</span>
        </a>
      </li>
      ...
    </ul>
  </div>
</nav>

Albums

  <!-- Sort -->
  <ul class="filtr-btn">
      <li data-filter="all" class="active"><h6>all</h6></li>
      <li data-filter="1"><h6>fashion</h6></li>
      ...
  </ul>
  <div class="filtr-container row">
    <!-- Album item -->
    <div class="album-item col-md-4 filtr-item" data-category="1">
        <a href="gallery.html" data-type="page-transition">
            <div class="album-item__overlay">
                <span class="album-item__cover"></span>
                <h5>album title</h5>
            </div>
            <div class="album-item__img" style="background-image: url(IMAGE.jpg)"></div>
        </a>
    </div>
    ...
  </div>
</div>

Gallery

Learn more: link

 <div id="gallery">
  <img alt="image 1" src="IMAGE.jpg" data-image="IMAGE.jpg" data-description="TITLE">
  ...
</div>

Blog

<!-- Footer -->
    <footer class="ms-footer">
        <div class="copyright">2017 © MadSparrow</div>
        <ul class="footer-socials">
            <li><a href="Link" class="ms-btn" target="_blank">Social</a></li>
            ...
        </ul>
    </footer>
<!-- /Footer -->

CSS Structure

/*------------------------------------------------------------------
[Master Stylesheet]

Template Name: Emily - Creative Photography Portfolio
Template Demo URL: 
Version: 1.0
Author: madsparrow.us

--------------------------------------------------------------------

[Table of contents]

1. General style
    1.1 Typography
    1.2 Specials Classes
2. Header
    2.1 Menu
    2.2 Burger Button
    2.3 Collapse Navigation
3. Pages Style
4. Home Slider
    4.1 Slider Navigation Buttons
    4.2 Slider Inner Info
  4.3 Pagination
5. Albums
6. Gallery
7. Blog
8. About
9. Contact
10. Footer
11. Responsive Rules

--------------------------------------------------------------------
# Font: 'Yantramanav';
--------------------------------------------------------------------
# Colors: #151515, #df1f29, #555555
------------------------------------------------------------------*/

JS Structure

(function(window) {

    'use strict';

    $.exists = function(selector) {
        return ($(selector).length > 0);
    }

    // All Funtions
    PageTransition();
    Menu();
    HomeSlider();
    Sort();
    UniteGallery();
    ValidForm();

})(window);

Icons

Socicon

emily