Markoos — Blog HTML Template

  • Created: 18-07-2020
  • By: the-nika
  • Thank you for purchasing this template. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!
  • NOTE: All images used here are just for preview purpose only & they are not included in main file.

Folder structure

This is folder structure and some files of template.

Template
├── css/
│   ├── jquery.mrksScroller.css
│   ├── styles.css
│   ├── uikit.min.css
│   └── video-js.min.css
├── img/
│   ├── 404/
│   ├── about/
│   ├── blog/
│   ├── contacts/
│   ├── favicons/
│   ├── post/
│   ├── soon/
├── js/
|   ├── jquery.min.js
│   ├── jquery.mrksScroller.js
|   ├── scripts.js
|   ├── uikit.min.js
│   └── video.min.js
├── 404.html
├── about.html
├── contacts.html
├── index.html
├── post.html
├── search.html
├── search-results.html
├── soon.html
└── ui.html

General HTML Structure

Markoos Template bases on UIKit framework. Follow instruction on UIkit to make changes on code correctly.
Icons got from toolkit Font Awesome. Here the manual how to use it:
https://fontawesome.com/how-to-use/on-the-web/referencing-icons/basic-use

HTML code placed in files with .html extension at root of Template directory. I recommend edit it in web code editor (Sublime Text, Notepad++, Brackets etc.).

Some code structure of Blog page (file index.html) below.

<!DOCTYPE html>
<html lang="en">
<head>
    ...
    <title>...</title>
    ...
    <!-- .......... Fonts and Extras .......... -->
    <link rel="stylesheet" href="...">
    ...
    <!-- .......... End Fonts and Extras .......... -->

    <!-- .......... Favicons .......... -->
    <link rel="apple-touch-icon" href="...">
    ...
    <!-- .......... End Favicons .......... -->

    <!-- .......... Styles .......... -->
    <link rel="stylesheet" href="...">
    ...
    <!-- .......... End Styles .......... -->
</head>
<body>
    <!-- .......... Preloader .......... -->
    <div class="preloader" id="preloader"></div>
    <!-- .......... End Preloader .......... -->

    <!-- .......... Mobile Panel .......... -->
    <div class="panel panel--mobile uk-hidden@l">
        <!-- .......... Mobile Version Logo .......... -->
        <div class="logo">
            <a class="js-logo-mobile" href="#content" data-uk-scroll>
                ...
            </a>
        </div>
        <!-- .......... End Mobile Version Logo .......... -->

        <!-- .......... Left Panel Button .......... -->
        <a class="js-panel-left-toggle filters__toggle uk-hidden@l" href="#" data-uk-toggle="target: .js-panel-left">
            ...
        </a>
        <!-- .......... End Left Panel Button .......... -->

        <!-- .......... Navigation Button .......... -->
        <a class="nav__bars js-nav-toggle" href="#">
            ...
        </a>
        <!-- .......... End Navigation Button .......... -->
    </div>
    <!-- .......... End Mobile Panel .......... -->

    <!-- .......... Left Panel .......... -->
    <div class="panel panel--left js-panel-left uk-visible@l">
        <div class="uk-offcanvas-bar">
            <!-- .......... Logo .......... -->
            <div class="logo uk-text-center uk-visible@l">
                <a href="#content" data-uk-scroll>
                    ...
                </a>
            </div>
            <!-- .......... End Logo .......... -->
            <div class="panel__accordion js-accordion">
                <!-- .......... Categories .......... -->
                <div class="category__widget">
                    ...
                </div>
                <!-- .......... End Categories .......... -->

                <!-- .......... Tags .......... -->
                <div class="tag__widget uk-margin-medium-top">
                    ...
                </div>
                <!-- .......... End Tags .......... -->
            </div>
            <!-- .......... Archive Mobile .......... -->
            <div class="archive__widget archive__widget--mobile uk-hidden@l">
                ...
            </div>
            <!-- .......... End Archive Mobile .......... -->

            <!-- .......... Subscription Form .......... -->
            <div class="form__widget">
                ...
            </div>
            <!-- .......... End Subscription Form .......... -->
        </div>
    </div>
    <!-- .......... End Left Panel .......... -->

    <!-- .......... Archive Right Panel .......... -->
    <div class="panel archive__widget archive__widget--right uk-visible@l">
        ...
    </div>
    <!-- .......... End Archive Right Panel .......... -->

    <!-- .......... Right Panel .......... -->
    <div class="panel panel--right uk-visible@l">
        <!-- .......... Navigation Button .......... -->
        <div>
            <a class="nav__bars js-nav-toggle" href="#" data-uk-toggle="target: .js-nav">
                ...
            </a>
        </div>
        <!-- .......... End Navigation Button .......... -->

        <!-- .......... Search Button .......... -->
        <div>
            <a href="/search.html">
                ...
            </a>
        </div>
        <!-- .......... End Search Button .......... -->

        <!-- .......... Social Media Buttons .......... -->
        <div class="social">
            ...
        </div>
        <!-- .......... End Social Media Buttons .......... -->
    </div>
    <!-- .......... End Right Panel .......... -->

    <!-- .......... Page Content .......... -->
    <div class="content" id="content">
        <div class="content__inner">
            <div class="blog__block">
                <h1 class="blog__title">Blog</h1>
                <!-- .......... Blog Cards .......... -->
                <div class="blog__cards">
                    ...
                </div>
                <!-- .......... End Blog Cards .......... -->

                <!-- .......... Blog Pagination .......... -->
                <div class="blog__pagination pagination__block js-inview">
                    ...
                </div>
                <!-- .......... End Blog Pagination .......... -->
            </div>
        </div>
    </div>
    <!-- .......... End Page Content .......... -->

    <!-- .......... Navigation .......... -->
    <div class="nav js-nav" data-uk-offcanvas="flip: true; overlay: true">
        ...
    </div>
    <!-- .......... End Navigation .......... -->

    <!-- .......... Scripts .......... -->
    <script src="..."></script>
    ...
    <!-- .......... End Scripts .......... -->
</body>
</html>

NOTE: This file use UTF-8 coding. Use the editor with UTF-8 support to avoid problems with unreadable symbols.



Navigation

You need to find comments <!-- .. Navigation .. --> and <!-- .. End Navigation .. --> and edit code between them to change navigation block.

<!-- .......... Navigation .......... -->
<div class="nav js-nav" data-uk-offcanvas="flip: true; overlay: true">
    <div class="nav__inner uk-offcanvas-bar">
        <ul class="nav__list">
            <li class="nav__item active">
                <a href="/index.html">Blog</a>
            </li>
            <li class="nav__item">
                <a href="/post.html">Post</a>
            </li>
            ...
        </ul>
    </div>
</div>
<!-- .......... End Navigation .......... -->

Social Media

You need to find comments <!-- .. Social Media Buttons .. --> and <!-- .. End Social Media Buttons .. --> and edit code between them to change social media block.

Icons by Font Awesome. Choose icons that you needed in Icons Gallery
<!-- .......... Social Media Buttons .......... -->
<div class="social">
    <ul class="social__list uk-list">
        <li>
            <a class="social__button" href="#" target="_blank">
                <span class="fab fa-facebook-f"></span>
            </a>
        </li>
        <li>
            <a class="social__button" href="#" target="_blank">
                <span class="fab fa-youtube"></span>
            </a>
        </li>
        ...
    </ul>
</div>
<!-- .......... End Social Media Buttons .......... -->

Widgets

In files index.html, post.html, search.html and search-results.html you can find Categories, Tags, Archive and Subscription Form widgets.

Categories

To edit Categories list you need to find comments <!-- .. Categories .. --> and <!-- .. End Categories .. --> and edit code between them.

<!-- .......... Categories .......... -->
<div class="category__widget">
    <a class="uk-accordion-title uk-h4" href="#">Categories</a>
    <div class="uk-accordion-content">
        <ul class="category__list uk-list js-categories">
            <li>
                <a href="#">Extreme sports</a>
                <span class="category__count">6</span>
            </li>
            <li>
                <a href="#">Offroad trip</a>
                <span class="category__count">18</span>
            </li>
            ...
        </ul>
    </div>
</div>
<!-- .......... End Categories .......... -->

Tags

To edit Tags list you need to find comments <!-- .. Tags .. --> and <!-- .. End Tags .. --> and edit code between them.

<!-- .......... Tags .......... -->
<div class="tag__widget uk-margin-medium-top">
    <a class="uk-accordion-title uk-h4" href="#">Tags</a>
    <div class="uk-accordion-content uk-position-relative">
        <ul class="tag__list uk-list js-tags">
            <li>
                <a href="#">art</a>
            </li>
            <li>
                <a href="#">city</a>
            </li>
            ...
        </ul>
    </div>
</div>
<!-- .......... End Tags .......... -->

Archive

To edit Archive list you need to find comments <!-- .. Archive Mobile .. --> and <!-- .. End Archive Mobile .. --> and also comments <!-- .. Archive Right Panel .. --> and <!-- .. End Archive Right Panel .. --> and edit code between them.

Archive widget involved custom jquery plugin, see mrksScroller plugin section for more info.

<!-- .......... Archive Mobile .......... -->
<div class="archive__widget archive__widget--mobile uk-hidden@l">
    <h4>Archive</h4>
    <ul class="archive__list uk-list mrks__list js-archive-filter-mobile">
        <li>
            <a href="#">August / 2020</a>
        </li>
        <li>
            <a href="#">July / 2020</a>
        </li>
        ...
    </ul>
</div>
<!-- .......... End Archive Mobile .......... -->
<!-- .......... Archive Right Panel .......... -->
<div class="panel archive__widget archive__widget--right uk-visible@l">
    <ul class="archive__list uk-list mrks__list js-archive-filter">
        <li>
            <a href="#">August
                <br>/2020</a>
        </li>
        <li>
            <a href="#">July
                <br>/2020</a>
        </li>
        ...
    </ul>
</div>
<!-- .......... End Archive Right Panel .......... -->

Subscription Form

To edit Subscription Form block you need to find comments <!-- .. Subscription Form .. --> and <!-- .. End Subscription Form .. --> and edit code between them.

You can easily change field's placeholder - just find placeholder attribure and replace value text with your own.
p HTML element with class form__respond is supposes as container for server responds text.

NOTE: The form submission functionality is not provided
<!-- .......... Subscription Form .......... -->
<div class="form__widget">
    <h4>Get updates</h4>
    <form class="form form--subscribe uk-grid-small" data-uk-grid method="post">
        <div class="uk-width-expand">
            <input class="uk-input" name="email" type="email" placeholder="Email for subscription">
            <p class="form__respond"></p>
        </div>
        <div class="uk-flex">
            <button class="form__submit fas fa-paper-plane" type="submit"></button>
        </div>
    </form>
</div>
<!-- .......... End Subscription Form .......... -->

Blog Grid

Used single grid variation for posts in Blog and Search Results pages.

You need to find <!-- .. Blog Cards .. --> and <!-- .. End Blog Cards .. --> comments in file index.html or search-results.html and edit code between them to change blog grid. It contains blog cards. Find <!-- .. Blog Card .. --> and <!-- .. End Blog Card .. --> comments to view blog card code.

Each card contains category, title, link and date elements inside div wrapper with blog__card_info class attribute value. You can easily change path to thumbnail background image (value of data-src attribute of img).

Used the Image UIKit component
<!-- .......... Blog Card .......... -->
<div class="blog__card js-inview">
    <div class="blog__card_info">
        <div class="blog__card_category">Art &amp; Inspiration</div>
        <a href="/post.html">
            <h2 class="blog__card_title">Steet Arts Festival: amazing artworks, live music and sunny weekend</h2>
        </a>
        <div class="blog__card_date">17/07/2020</div>
    </div>
    <div class="blog__card_thumbnail">
        <a href="/post.html">
            <img class="blog__card_img" src="img/blog/1.jpg" data-src="img/blog/1.jpg" alt="" data-uk-img>
        </a>
    </div>
</div>
<!-- .......... End Blog Card .......... -->

Post Page

The Post page contains post category and title, article content list, text and post's components block, post tags and date, block with short info about author, share buttons, comments block, comment form and blocks with links to previous and next post.

Content List

To change Content list items you need to find comments <!-- .. Content List .. --> and <!-- .. End Content List .. --> in file post.html and edit code between them.

<!-- .......... Content List .......... -->
<div class="panel panel--content js-panel-content">
    <ol class="content__list js-scrollspy-nav">
        <li>
            <a href="#route_planning">Route planning</a>
        </li>
        <li>
            <a href="#not_at_home">Not at Home</a>
        </li>
        ...
    </ol>
</div>
<!-- .......... End Content List .......... -->

About Author

In About Author block you can edit text and change photo. Find the code between comments <!-- .. About Author .. --> and <!-- .. End About Author .. -->:

Used the Image UIKit component
<!-- .......... About Author .......... -->
<div class="post__author">
    <h3>About the author</h3>
    <div class="uk-grid-medium uk-flex-top" data-uk-grid>
        <div class="uk-width-auto">
            <img class="post__author_avatar" src="img/post/avatar.jpg" data-src="img/post/avatar.jpg" width="100" height="100" alt="" data-uk-img>
        </div>
        <div class="uk-width-expand">
            <p class="post__author_name">Markus Oliver</p>
            <p class="post__author_bio">Traveler, photographer, blogger ...</p>
            <p>
                <a class="color--purple" href="/about.html">Learn more</a>
            </p>
        </div>
    </div>
</div>
<!-- .......... End About Author .......... -->

Share Buttons

To change the Share Buttons block find code between comments <!-- .. Share .. --> and <!-- .. End Share .. -->.

Icons by Font Awesome. Choose icons that you needed in Icons Gallery
<!-- .......... Share .......... -->
<div class="post__share">
    <h3>Share</h3>
    <ul class="post__share_list uk-list">
        <li>
            <a href="#" target="_blank">
                <span class="fab fa-facebook-f"></span>
            </a>
        </li>
        <li>
            <a href="#" target="_blank">
                <span class="fab fa-youtube"></span>
            </a>
        </li>
        ...
    </ul>
</div>
<!-- .......... End Share .......... -->

Comments

Find Post Comments HTML code between comments <!-- .. Comments .. --> and <!-- .. End Comments .. --> to change it (see this article for more information).

Used the Image and Comment UIKit components
Icons by Font Awesome. Choose icons that you needed in Icons Gallery
<!-- .......... Comments .......... -->
<div class="post__comment uk-margin-xlarge-bottom js-inview">
    <h3> Comments <span class="comment__count">3</span>
    </h3>
    <ul class="uk-comment-list">
        <li>
            <!-- .......... Comment Item .......... -->
            <div class="uk-comment" tabindex="-1">
                <div class="uk-flex-start" data-uk-grid>
                    <div class="uk-width-1-1 uk-width-auto@s">
                        <span class="post__avatar post__avatar--default fas fa-user"></span>
                    </div>
                    <div class="post__comment_text uk-width-1-1 uk-width-expand@s">
                        <p class="uk-text-bold uk-margin-small-bottom">
                            <a class="uk-link-reset" href="#">Adam Ferguson</a>
                        </p>
                        <div class="uk-comment-body">
                            <p>Thanks for the tips and links...</p>
                            <div class="uk-flex-middle" data-uk-grid>
                                <p class="uk-width-expand uk-comment-meta uk-margin-remove-top">
                                    <a class="uk-link-reset" href="#">
                                        <span class="far fa-clock uk-margin-small-right"></span>3 hours ago
                                    </a>
                                </p>
                                <p class="uk-width-auto uk-comment-meta">
                                    <a class="uk-link-muted color--purple" href="#">
                                        <span class="fas fa-reply uk-margin-small-right"></span>Reply
                                    </a>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- .......... End Comment Item .......... -->

            <!-- .......... Reply Comment Item .......... -->
            <ul>
                <li>
                    <!-- .......... Comment Item .......... -->
                    <div class="uk-comment" tabindex="-1">
                        <div class="uk-flex-start" data-uk-grid>
                            <div class="uk-width-1-1 uk-width-auto@s">
                                <img class="post__avatar uk-comment-avatar" src="img/post/avatar.jpg" data-src="img/post/avatar.jpg" width="65" height="65" alt="" data-uk-img>
                            </div>
                            <div class="post__comment_text uk-width-1-1 uk-width-expand@s">
                                <p class="uk-text-bold uk-margin-small-bottom">
                                    <a class="uk-link-reset" href="#">Markus Oliver</a>
                                </p>
                                <div class="uk-comment-body">
                                    <p>Thanks. Adam! I'm going to...</p>
                                    <div class="uk-flex-middle" data-uk-grid>
                                        <p class="uk-width-expand uk-comment-meta uk-margin-remove-top">
                                            <a class="uk-link-reset" href="#">
                                                <span class="far fa-clock uk-margin-small-right"></span>24 minutes ago
                                            </a>
                                        </p>
                                        <p class="uk-width-auto uk-comment-meta">
                                            <a class="uk-link-muted color--purple" href="#">
                                                <span class="fas fa-reply uk-margin-small-right"></span>Reply
                                            </a>
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- .......... End Comment Item .......... -->
                </li>
            </ul>
            <!-- .......... End Reply Comment Item .......... -->
        </li>
        ...
    </ul>
</div>
<!-- .......... End Comments .......... -->

Comment Form

Find code between comments <!-- .. Comment Form .. --> and <!-- .. End Comment Form .. --> to view the form HTML code.
You can easily change field's placeholder - just find placeholder attribure and replace value text with your own. To change text on submit button replace value attribure value.
p HTML element with class form__respond is supposes as container for server responds text.

NOTE: The form submission functionality is not provided
<!-- .......... Comment Form .......... -->
<div class="post__comment_form uk-margin-xlarge-bottom js-inview">
    <h3>Leave a comment</h3>
    <form class="form form--feedback" method="post">
        <div class="uk-child-width-1-2@s uk-grid-collapse uk-flex uk-flex-between" data-uk-grid>
            <div>
                <input class="uk-input" name="name" type="text" placeholder="Name">
            </div>
            <div>
                <input class="uk-input" name="email" type="email" placeholder="Email">
            </div>
        </div>
        <input class="uk-input" name="url" type="text" placeholder="Web URL">
        <textarea class="uk-textarea" name="message" placeholder="Message"></textarea>
        <p class="form__respond"></p>
        <p class="uk-text-right">
            <input class="form__submit btn btn--small" name="send" type="submit" value="Post comment">
        </p>
    </form>
</div>
<!-- .......... End Comment Form .......... -->

Previous & Next Posts

You can find Post Navigation code between comments <!-- .. Previous and Next Posts .. --> and <!-- .. End Previous and Next Posts .. -->.
You can easily change path to thumbnail images in value of data-src attribute of img.

Used the Image UIKit component
<!-- .......... Previous and Next Posts .......... -->
<div class="post__navigation post__component js-inview">
    <!-- .......... Previous Post .......... -->
    <div class="post__navigation_card post__navigation_card--previous">
        <a class="post__navigation_label" href="/post.html">
            <span class="post__navigation_prevnext">
                <span class="fas fa-arrow-left uk-margin-small-right"></span>
                <span>Prevous</span>
            </span>
            <span>Discover balance, mindfulness &amp; the rhythm of life. A Slackline and Discovery Festival</span>
        </a>
        <a class="post__navigation_thumbnail" href="/post.html">
            <img class="post__navigation_img" src="img/blog/3.jpg" data-src="img/blog/3.jpg" alt="" data-uk-img>
        </a>
    </div>
    <!-- .......... End Previous Post .......... -->

    <!-- .......... Next Post .......... -->
    <div class="post__navigation_card post__navigation_card--next">
        <a class="post__navigation_thumbnail" href="/post.html">
            <img class="post__navigation_img" src="img/blog/1.jpg" data-src="img/blog/1.jpg" alt="" data-uk-img>
        </a>
        <a class="post__navigation_label" href="/post.html">
            <span class="post__navigation_prevnext">
                <span>Next</span>
                <span class="fas fa-arrow-right uk-margin-small-left"></span>
            </span>
            <span>Steet Arts Festival: amazing artworks, live music and sunny weekend</span>
        </a>
    </div>
    <!-- .......... End Next Post .......... -->
</div>
<!-- .......... End Previous and Next Posts .......... -->

Post's Components

Open file ui.html to see demo of Blockquite, Image, Slider, Video and Audio components.

Blockquote

To edit Quote's block you need to find comments <!-- .. Blockquote .. --> and <!-- .. End Blockquote .. --> in file post.html and ui.html and edit code between them.

<!-- .......... Blockquote .......... -->
<div class="quote">
    <p>A man who risks his life in shooting big game ...</p>
    <p class="quote__author">Robert Baden-Powell</p>
</div>
<!-- .......... End Blockquote .......... -->

Image

To edit Image's block you need to find comments <!-- .. Image .. --> and <!-- .. End Image .. --> in file ui.html and edit code between them. It contain image, title and "Expand" button to trigger Lightbox.

Replace path in value of data-src attribute of img HTML element with your own.
Change title in value of data-caption attribute of a HTML element with class slider__expand_button and text in span inside div with class post__component_title.

Used the Image and Lightbox UIKit components
Icons by Font Awesome. Choose icons that you needed in Icons Gallery
<!-- .......... Image .......... -->
<div class="uk-margin-large-bottom">
    <h2 id="image">10. Image</h2>
    <div class="post__component post__component--image js-inview">
        <!-- .......... Image Item .......... -->
        <img data-src="img/post/slider/5.jpg" src="img/post/slider/5.jpg" alt="" data-title="..." data-uk-img>
        <!-- .......... End Image Item .......... -->

        <!-- .......... Image Description .......... -->
        <div class="post__component_panel">
            <div class="post__component_title js-slideshow-title">
                <span class="far fa-images uk-margin-small-right"></span>
                <span>...</span>
            </div>
            <div class="slider__expand uk-visible@l" data-uk-lightbox>
                <a class="slider__expand_button js-slider-expand" href="img/blog/5.jpg" data-caption="...">
                    <span class="fas fa-expand uk-margin-small-right"></span>Expand
                </a>
            </div>
        </div>
        <!-- .......... End Description .......... -->
    </div>
</div>
<!-- .......... End Image .......... -->

Slider

You need to find comments <!-- .. Slider .. --> and <!-- .. End Slider .. --> in file post.html and ui.html and edit code between them to change slider block. It contains panel with slider navigation bar, controls and count, title and lightbox trigger (find comments <!-- .. Slider Navigation and Description .. --> and <!-- .. End Slider Navigation and Description .. --> to go to these parts).

You can easily change path to slide image in the value of src attribute of img element. Change title of photo in the value of data-title and change path to lightbox image in the value of data-lightbox-img attributes of img element for Lightbox component.

Used the Slideshow and Lightbox UIKit components
Icons by Font Awesome. Choose icons that you needed in Icons Gallery
<!-- .......... Slider .......... -->
<div class="post__component post__component--slider js-slideshow js-inview">
    <!-- .......... Slider Images .......... -->
    <div class="slider uk-position-relative">
        <ul class="uk-slideshow-items">
            <li>
                <img src="img/post/slider/1.jpg" alt="" data-title="...">
            </li>
            <li>
                <img src="img/post/slider/4.jpg" alt="" data-title="...">
            </li>
            ...
        </ul>
        <a class="slider__control_touch slider__control_touch--previous" href="#" data-uk-slideshow-item="previous" title="Go to previous slide"></a>
        <a class="slider__control_touch slider__control_touch--next" href="#" data-uk-slideshow-item="next" title="Go to next slide"></a>
    </div>
    <!-- .......... End Slider Images .......... -->

    <!-- .......... Slider Navigation and Description .......... -->
    <div class="post__component_panel">
        <div class="post__component_title js-slideshow-title">
            <span class="far fa-images uk-margin-small-right"></span>
            <span class="js-slider-text"> </span>
        </div>
        <div class="slider__navigation">
            <div class="slider__count js-slideshow-count">
                <span class="slider__count_active">0</span>
                <span class="slider__count_divider">/</span>
                <span class="slider__count_all">0</span>
            </div>
            <div class="slider__bar js-slider-bar">
                <span class="slider__bar_active js-slider-bar-active"></span>
            </div>
            <div class="slider__navigation_buttons js-slideshow-controls">
                <a class="slider__control slider__control--previous fas fa-arrow-left" href="#"></a>
                <a class="slider__control slider__control--next fas fa-arrow-right" href="#"></a>
            </div>
        </div>
        <div class="slider__expand uk-visible@l js-slider-expand">
            <a class="slider__expand_button" href="#">
                <span class="fas fa-expand uk-margin-small-right"></span>Expand
            </a>
        </div>
    </div>
    <!-- .......... End Slider Navigation and Description .......... -->
</div>
<!-- .......... End Slider .......... -->

Video

To edit Video's block you need to find comments <!-- .. Video .. --> and <!-- .. End Video .. --> in file post.html and ui.html and edit code between them. It contain video's cover, description and path to video file.

To change path to video file in value of src attribute of source HTML element with your own.
Change cover image in poster attribute value of the video element.
Change title within span HTML element and inside div with class post__component_title.

Used the Video.js plugin. Follow plugin's instruction to make changes on code correctly
Icons by Font Awesome. Choose icons that you needed in Icons Gallery
<!-- .......... Video .......... -->
<div class="uk-margin-large-bottom">
    <h2 id="video">12. Video</h2>
    <div class="post__component post__component--video js-inview">
        <!-- .......... Video Player .......... -->
        <video class="video-js video__player" controls preload="metadata" poster="img/post/video_cover.jpg" data-setup="{'fluid': true}">
            <source src="media/video/24582400_diverse-women-enjoying-summer-vacations-in-nature_by_alona2018_preview.mp4" type="video/mp4">
        </video>
        <!-- .......... End Video Player .......... -->

        <!-- .......... Video Description .......... -->
        <div class="post__component_panel">
            <div class="post__component_title">
                <span class="fas fa-video uk-margin-small-right"></span>
                <span>Lose eyes get fat shew. Winter can indeed letter oppose way change tended now</span>
            </div>
        </div>
        <!-- .......... End Video Description .......... -->
    </div>
</div>
<!-- .......... End Video .......... -->

Audio

To edit Audio's block you need to find comments <!-- .. Audio .. --> and <!-- .. End Audio .. --> in file ui.html and edit code between them. It contain path to audio file and description block.

To change path to audio file in value of src attribute of source HTML element with your own.
Change cover image in poster attribute value of the audio element.
Change title within span HTML element and inside div with class post__component_title.

Used the Video.js plugin. Follow plugin's instruction to make changes on code correctly
Icons by Font Awesome. Choose icons that you needed in Icons Gallery
<!-- .......... Audio .......... -->
<div class="uk-margin-large-bottom">
    <h2 id="audio">13. Audio</h2>
    <div class="post__component post__component--audio js-inview">
        <!-- .......... Audio Player .......... -->
        <audio class="video-js audio__player" controls preload="metadata" data-setup="{ 'controlBar': { 'fullscreenToggle': false } }">
            <source src="media/audio/24109970_happy-la-la-la-ukulele_by_stellartracks_preview.mp3" type="audio/mp3">
        </audio>
        <!-- .......... End Audio Player .......... -->

        <!-- .......... Audio Description .......... -->
        <div class="post__component_panel post__component_panel--audio">
            <div class="post__component_title post__component_title--audio">
                <span class="fas fa-headphones uk-margin-small-right"></span>
                <span>Nor repeated speaking shy appetite</span>
            </div>
        </div>
        <!-- .......... End Audio Description .......... -->
    </div>
</div>
<!-- .......... End Audio .......... -->

About Page

The About page contains block with text, block with extra information and three background images one of this displays on small screen sizes, another one on medius screen sizes and all of them display on large screen sizes.

To change images you need to find comments <!-- .. Images .. --> and <!-- .. End Images .. --> in file about.html and edit code between them.

Replace path in value of data-src attributes of div HTML element with your own.

Used the Image UIKit component
<!-- .......... Images .......... -->

<!-- .......... Image for Medium and Large Screen Sizes .......... -->
<div class="about__image about__image--1 uk-background-cover" data-src="img/about/1.jpg" data-uk-img></div>
<!-- .......... End Image for Medium and Large Screen Sizes .......... -->

<!-- .......... Image for Large Screen Sizes .......... -->
<div class="about__image about__image--2 uk-background-cover" data-src="img/about/2.jpg" data-uk-img></div>
<!-- .......... End Image for Large Screen Sizes .......... -->

<!-- .......... Image for Small and Large Screen Sizes .......... -->
<div class="about__image about__image--3 uk-background-cover" data-src="img/about/3.jpg" data-uk-img></div>
<!-- .......... End Image for Small and Large Screen Sizes .......... -->

<!-- .......... End Images .......... -->

Contacts Page

The Contacts page contains block with contact information, feedback form and three background images.

To change images you need to find comments <!-- .. Images .. --> and <!-- .. End Images .. --> in file contacts.html and edit code between them.
Replace path in value of data-src attributes of div HTML element with your own.

Used the Image UIKit component
<!-- .......... Images .......... -->

<!-- .......... Image for All Screen Sizes .......... -->
<div class="contacts__image contacts__image--1 uk-background-cover" data-src="img/contacts/1.jpg" data-uk-img></div>
<!-- .......... End Image for All Screen Sizes .......... -->

<!-- .......... Image for Large Screen Sizes .......... -->
<div class="contacts__image contacts__image--2 uk-background-cover" data-src="img/contacts/2.jpg" data-uk-img></div>
<!-- .......... End Image for Large Screen Sizes .......... -->

<!-- .......... Image for Large Screen Sizes .......... -->
<div class="contacts__image contacts__image--3 uk-background-cover" data-src="img/contacts/3.jpg" data-uk-img></div>
<!-- .......... End Image for Large Screen Sizes .......... -->

<!-- .......... End Images .......... -->

Find comments <!-- .. Contact Details .. --> and <!-- .. End Contact Details .. --> and edit code between them to change contacts information.

<!-- .......... Contact Details .......... -->
<div class="contacts__text">
    <h1 class="contacts__title">Contacts</h1>
    <h2 class="uk-margin-remove-top">Contact details</h2>
    <ul class="uk-list">
        <li>
            <a href="#">hellomarko@yourdomain.com</a>
        </li>
        <li>
            <a href="#">+1 /234/ 234 567 890</a>
        </li>
    </ul>
    <ul class="uk-list">
        <li>
            <a href="#" target="_blank">facebook.com/marko</a>
        </li>
        ...
    </ul>
</div>
<!-- .......... End Contact Details .......... -->

Find code between comments <!-- .. Feedback Form .. --> and <!-- .. End Feedback Form .. --> to view the form HTML code.
You can easily change field's placeholder - just find placeholder attribute and replace value text with your own. To change text on submit button replace value attribure value.
p HTML element with class form__respond is supposes as container for server responds text.

NOTE: The form submission functionality is not provided
<!-- .......... Feedback Form .......... -->
<div class="contacts__form">
    <h2>Let's talk</h2>
    <form class="form form--feedback" method="post">
        <input class="uk-input" name="name" type="text" placeholder="Name">
        <input class="uk-input" name="email" type="email" placeholder="Email">
        <textarea class="uk-textarea" name="message" placeholder="Message"></textarea>
        <p class="form__respond"></p>
        <p class="uk-text-right">
            <input class="form__submit btn btn--small" name="send" type="submit" value="Send message">
        </p>
    </form>
</div>
<!-- .......... End Feedback Form .......... -->

Search Results Page

The Search Results page contains search form and blog cards grid (see Blog Grid section).

Find code between comments <!-- .. Search Form .. --> and <!-- .. End Search Form .. --> to view the form HTML code.
You can easily change field's placeholder - just find placeholder attribure and replace value text with your own.
p HTML element with class form__respond is supposes as container for server responds text.

NOTE: The form submission functionality is not provided
Icons by Font Awesome. Choose icons that you needed in Icons Gallery
<!-- .......... Search Form .......... -->
<div class="blog__search">
    <form class="form form--search uk-grid-small" data-uk-grid>
        <div class="uk-width-expand">
            <input class="uk-input" name="s" type="text" placeholder="e.g. mountains" value="mountains">
            <p class="form__respond">3 results</p>
        </div>
        <div class="uk-flex">
            <button class="form__submit fas fa-search" type="submit"></button>
        </div>
    </form>
</div>
<!-- .......... End Search Form .......... -->

404 Error Page

The 404 Error page contains image which generates on canvas with javascript based on mask svg image and background image, and simple text blog.

You can replace background image with your own in scripts.js file. You need to find comment /* -- 10. 404 Page Canvas -- */. Replace path in photo variable value with your own.

/* ----------------------------

    10. 404 Page Canvas

---------------------------- */

if ($('.js-404-canvas').length) {
    var canvas = $('.js-404-canvas'),
        canvas_width = 1920,
        canvas_height,
        ctx = canvas[0].getContext('2d'),
        imgs = new Array(),

        // Replace path in 'photo' variable value with your own
        photo = 'img/404/1.jpg',

        mask = 'img/404/mask.svg',
        mask_width = 403.076,
        mask_height = 168.2,
        counter = 0;

    // Create canvas based on background image (photo) and mask image
    function preloadImages(sources) {
        for (var i = 0; i < sources.length; i++) {
            imgs[i] = new Image();
            // Adding a random symbols to prevent caching of images
            sources[i] += '?' + Math.random();

            imgs[i].onload = imgs[i].onerror = function() {
                counter++;
                // If all images loaded then draw on canvas
                if (counter == sources.length) {
                    // Recalculate canvas height based on mask size
                    canvas_height = canvas_width * mask_height / mask_width;
                    canvas.attr('height', canvas_height);
                    // Draw images with overlay using the subtraction method
                    ctx.globalCompositeOperation = 'destination-atop';
                    ctx.drawImage(imgs[0], 0, 0, canvas_width, canvas_width * imgs[0].height / imgs[0].width);
                    ctx.drawImage(imgs[1], 0, 0, canvas_width, canvas_height);
                }
            }
            imgs[i].src = sources[i];
        }
    }
    
    // Pass paths of background image (photo) and mask to function
    preloadImages([photo, mask]);
}

Coming Soon Page

The Coming Soon page contains background image, countdown block and feedback form. The countdown is based on a javascript function and starts with an approximate duration of 30 days for the demo.

You can easily replace background image with your own in soon.html file. Just replace path in value of data-src attributes of div HTML element between comments <!-- .. Photo .. --> and <!-- .. End Photo .. -->.

<!-- .......... Photo .......... -->
<div class="soon__image uk-background-cover" data-src="img/soon/1.jpg" data-uk-img></div>
<!-- .......... End Photo .......... -->

To set your own duration for countdown you need to find comment /* -- 08. Countdown -- */ in scripts.js file and remove code for demo until the line with comment
// You can simply paste your date instead.

Then uncomment line
// var countdown_from = '2020-07-01T00:00:00+00:00';
Replace the value of countdown_from variable with needed (see this article for more information).

Used the Countdown UIKit component
/* ----------------------------

    08. Countdown

---------------------------- */

// For demo purpose only (one month since today)! 
// See comment below
var today = new Date(),
    new_month = today.getMonth() + 2,
    new_month = (new_month < 10) ? '0' + new_month : new_month,
    new_day = today.getDate(),
    new_day = (new_day < 10) ? '0' + new_day : new_day,
    countdown_from = today.getFullYear() + '-' + new_month + '-' + new_day + 'T00:00:00+00:00';

// You can simply paste your date instead. 
// Uncomment line below and set needed date:
// var countdown_from = '2020-07-01T00:00:00+00:00';

UIkit.countdown('.js-countdown', {date: countdown_from });

Find code between <!-- .. Subscription Form .. --> and <!-- .. End Subscription Form .. --> comments to view the form HTML code.
You can easily change field's placeholder - just find placeholder attribure and replace value text with your own.
p HTML element with class form__respond is supposes as container for server responds text.

NOTE: The form submission functionality is not provided
Icons by Font Awesome. Choose icons that you needed in Icons Gallery
<!-- .......... Subscription Form .......... -->
<div class="soon__form">
    <h3>Get notified</h3>
    <p>I will let you know when I am lanching</p>
    <form class="form form--soon uk-grid-small" data-uk-grid method="post">
        <div class="uk-width-expand">
            <input class="uk-input" name="email" type="email" placeholder="Email for subscription">
            <p class="form__respond"></p>
        </div>
        <div class="uk-flex">
            <button class="form__submit fas fa-paper-plane" type="submit"></button>
        </div>
    </form>
</div>
<!-- .......... End Subscription Form .......... -->

CSS Files and Structure

Markoos Template bases on UIKit framework. Follow instruction on UIkit to make changes on code correctly.

These are CSS files which used:

css/jquery.mrksScroller.css
css/styles.css
css/uikit.min.css
css/video-js.min.css

mrksScroller.css is default styles of mrksScroller plugin. And video-js.min.css is default styles of Video.js plugin.

You need to use styles.css file to edit page styles. Structure of styles.css below.

01. Custom Styles
02. Preloader
03. Buttons & Links
04. Form & Fields
05. Panel Common Styles
06. Mobile Panel
07. Left Panel
08. Right Panel
09. Post Content Panel
10. Panel Components
11. Logo
12. Navigation
13. Categories & Tags Widgets
14. Blog Archive Widget
15. Social Media Buttons
16. Search Button
17. Content Block & Decoration Elements Styles
18. Blog
19. Pagination Block
20. Post
21. Quote Component
22. Slider Component
23. Video & Audio Component
24. About Page
25. Contacts Page
26. Coming Soon Page
27. 404 Error Page
28. Styles for Touch Devices
29. Colors Classes

NOTE: Files use encoding UTF-8. Use the editor with UTF-8 support to avoid problems with unreadable symbols.


JavaScript

Markoos Template bases on UIKit framework. Follow instruction on UIkit to make changes on code correctly.

Template imports those Javascript files:

js/jquery.min.js
js/jquery.mrksScroller.js
js/scripts.js
js/uikit.min.js
js/video.min.js

You need to edit scripts.js. Structure of scripts.js below.

01. Preloader
02. Add Class on Touch Devices
03. Navigation Scrollspy
04. Manipulations with Left Panel & Navigation
05. Categories, Tags & Archive Widgets
06. Slider Component
07. Sticky Content Panel
08. Countdown
09. Inview Animation
10. 404 Page Canvas
11. Media Player

NOTE: Files use encoding UTF-8. Use the editor with UTF-8 support to avoid problems with unreadable symbols.


jquery.mrksScroller.js

jquery.mrksScroller.js is used for scrolling list items. Particularly it used for Archive Widget.

jquery.mrksScroller.js options:
direction

Type: String
Default: horizontal

Navigation control's and bar's direction, pass "horizontal" or "vertical" value.

height

Type: Intager / Object
Default: 1

Number of items or rows in view.
Or object containing responsive options: {start_window_height: height_0, next_window_height: height_1, ...}. For example: {0: 2, 576: 3, 992: 4}

navigation_order

Type: Array
Default: ["slider", "prev", "next"]

Order of navigation elements "slider", "prev" (control) and "next" (control) as an array.

wrapper

Type: String
Default: .mrks__scroller

Wrapper element's selector.

container

Type: String
Default: .mrks__list

Container element's selector.

container_item

Type: String
Default: li

List item element's selector.

navigation

Type: String
Default: .mrks__navigation

Navigation container element's selector.

control_prev

Type: String
Default: .mrks__prev

Previous control element's selector.

control_next

Type: String
Default: .mrks__next

Next control element's selector.

slidebar

Type: String
Default: .mrks__slider

Navigation bar element's selector.

class_inview

Type: String
Default: .mrks__inview

Selector of element which is in view.

class_wrapper_vertical

Type: String
Default: .mrks__scroller--vertical

Wrapper element's selector when direction is set to vertical.

class_wrapper_horizontal

Type: String
Default: .mrks__scroller--horizontal

Wrapper element's selector when direction is set to horizontal.

onInit

Type: Function / Boolean
Default: false

Callback function fires when mrksSrcoller initialized. Retrieve HTML DOM Element Object.
Can be set to false.

onSlide

Type: Function / Boolean
Default: false

Callback function fires when mrksSrcoller scrolled list. Retrieve HTML DOM Element Object.
Can be set to false.

onResize

Type: Function / Boolean
Default: false

Callback function fires when window resized. Retrieve HTML DOM Element Object.
Can be set to false.


Sources and Credits

Fonts:

Icons:

Libreries:

Images:

  1. Photo by Matheus Ferrero on Unsplash
  2. Photo by Patrick Hendry on Unsplash
  3. Photo by Casey Horner on Unsplash
  4. Photo by Sofia Wertmiller on Unsplash
  5. Photo by Atlas Green on Unsplash
  6. Photo by Daniel Frank from Pexels
  7. Photo by Jakob Owens on Unsplash
  8. Photo by Steve Halama on Unsplash
  9. Photo by Artem Beliaikin on Unsplash
  10. Photo by Romello Williams on Unsplash
  11. Photo by Aaron Lee on Unsplash
  12. Photo by Alexander Milo on Unsplash

Video:

Audio:


Online Support

If you have any questions about customization of this template which are not covered in the documentation feel free to ask a question in the comment section or contact me via my user page contact form.

Don’t forget to rate the template if you like it. Thank you so much!