Markoos — Blog HTML Template
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
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>
Logo and Favicons
Edit code between comments <!-- .. Logo .. -->
and <!-- .. End Logo .. -->
to change the main logo.
Edit code between comments <!-- .. Mobile Version Logo .. -->
and <!-- .. End Mobile Version Logo .. -->
for changing logo on small devices.
<!-- .......... 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>
<img class="logo__image js-scroll-top" src="img/logo-mobile.svg" alt="">
</a>
</div>
<!-- .......... End Mobile Version Logo .......... -->
...
<!-- .......... 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>
<img class="logo__image" src="img/logo.svg" alt="">
</a>
</div>
<!-- .......... End Logo .......... -->
...
If you need to change favicon use this online service and follow instruction on this page: https://realfavicongenerator.net. Replace code below with your new generated code, and don't forget replace files in img/favicons/
folder with new files.
<!-- .......... Favicons .......... -->
<link rel="apple-touch-icon" sizes="180x180" href="img/favicons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="img/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="img/favicons/favicon-16x16.png">
<link rel="manifest" href="img/favicons/site.webmanifest">
<link rel="mask-icon" href="img/favicons/safari-pinned-tab.svg" color="#5bbad5">
<link rel="shortcut icon" href="img/favicons/favicon.ico">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-config" content="img/favicons/browserconfig.xml">
<meta name="theme-color" content="#ffffff">
<!-- .......... End Favicons .......... -->
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.
<!-- .......... 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.
<!-- .......... 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
).
<!-- .......... Blog Card .......... -->
<div class="blog__card js-inview">
<div class="blog__card_info">
<div class="blog__card_category">Art & 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 .. -->
:
<!-- .......... 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 .......... -->
Comments
Find Post Comments HTML code between comments <!-- .. Comments .. -->
and <!-- .. End Comments .. -->
to change it (see this article for more information).
<!-- .......... 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.
<!-- .......... 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 .......... -->
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
.
<!-- .......... 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.
<!-- .......... 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
.
<!-- .......... 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
.
<!-- .......... 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.
<!-- .......... 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.
<!-- .......... 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.
<!-- .......... 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.
<!-- .......... 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).
/* ----------------------------
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.
<!-- .......... 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
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
JavaScript
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
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 tovertical
. class_wrapper_horizontal
-
Type:
String
Default:.mrks__scroller--horizontal
Wrapper element's selector when
direction
is set tohorizontal
. onInit
-
Type:
Function / Boolean
Default:false
Callback function fires when mrksSrcoller initialized. Retrieve
HTML DOM Element Object
.
Can be set tofalse
. onSlide
-
Type:
Function / Boolean
Default:false
Callback function fires when mrksSrcoller scrolled list. Retrieve
HTML DOM Element Object
.
Can be set tofalse
. onResize
-
Type:
Function / Boolean
Default:false
Callback function fires when window resized. Retrieve
HTML DOM Element Object
.
Can be set tofalse
.
Sources and Credits
Fonts:
Icons:
Libreries:
Images:
- Photo by Matheus Ferrero on Unsplash
- Photo by Patrick Hendry on Unsplash
- Photo by Casey Horner on Unsplash
- Photo by Sofia Wertmiller on Unsplash
- Photo by Atlas Green on Unsplash
- Photo by Daniel Frank from Pexels
- Photo by Jakob Owens on Unsplash
- Photo by Steve Halama on Unsplash
- Photo by Artem Beliaikin on Unsplash
- Photo by Romello Williams on Unsplash
- Photo by Aaron Lee on Unsplash
- 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!