Minimal HTML5 Template.
Mork is minimal HTML5 template, perfect for building portfolio sites, for agencies, individuals and more... Mork is simple, clear, focused on modern appearance and ease of customization.
First of all, thank you for purchasing Mork! I really appreciate it!
Before you start building your website with this template, you need to notice few important things.
In package downloaded from marketplace you'll find folders contain documentation files and template itself. Content of main template folder is organized roughly as below:
You will need to upload folders and files listed above to your web server using FTP in order to use it on your website. And... that's all, you're ready to add your own content!
Mork follows a simple coding HTML structure like example below:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Your Stylesheets, Favicon & Title goes here -->
</head>
<body>
<!-- HEADER
============================================== -->
<header id="masthead" class="e24-page-header">
<!-- Navbar, Main Navigation Area, Logo Area goes here -->
</header>
<!-- MAIN CONTENT
============================================== -->
<section id="content" class="e24-page-content">
<!-- Page Content goes here -->
</section>
<!-- FOOTER
============================================== -->
<footer id="colophon" class="e24-page-footer">
<!-- Footer Content goes here -->
</footer>
</body>
</html>
There’s a custom CSS file called style.css that contains all the custom styles used to design the template. You can bring changes to this styles.css file, but any changes to the another CSS files e.g. bootstrap.css directly, are not recommended.
Note: in template files you can find some CSS classes with "e24-" prefix. This prefix is abbreviation of my former studio name. This means that classes are custom unlike e.g. CSS Bootstrap framework classes. Prefix is in use to avoid conflicts with other CSS libraries. Names of all custom classes are clear and self-explanatory.
The styles.css file has a table of contents and you can easily find each section therein. For better user experience and easy searching, HTML elements names corresponds with table of contents in style.css. Example: if you'd like to add own styles to "e24-page-content" class, that reside in section commented as Main Content in HTML file, then you'll need to find Content section in style.css file.
You can add a favicon to your site using the following code in head section:
<!-- FAVICON
============================================== -->
<link rel="icon" type="image/png" href="images/favicon.png" />
Note that you need add favicon.png to images folder as well.
Logo is in navbar at the bottom header section:
<!-- Navbar -->
<nav class="navbar navbar-dark">
<a href="index.html" class="mx-auto">
<img src="images/mork-logo.png" class="img-fluid" alt="Mork Template Logo">
</a>
<button class="navbar-toggler border-0 rounded-0" type="button" data-toggle="collapse" data-target="#toggle-menu">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
Just replace mork-logo.png file in images folder and add image src as you see in code above. Size of logo image is 324x150 pixels.
Top menu you'll find at the top of header section in Main Navigation Area:
<!-- Main Navigation Area -->
<div class="e24-main-navigation">
Here you can replace nav items names and add links to your pages.
Portfolio area is in frontpage Main Content section.
<!-- Portfolio Area -->
<div class="e24-portfolio">
<div class="container">
<!-- Portfolio Items Filter -->
<div class="e24-portfolio-filter">
<ul class="list-inline text-uppercase p-2 e24-font-300">
<li class="list-inline-item pr-2" data-filter="*">Show all</li>
<li class="list-inline-item pr-2" data-filter=".web">Web</li>
<li class="list-inline-item pr-2" data-filter=".photography">Photography</li>
<li class="list-inline-item pr-2" data-filter=".design">Design</li>
</ul>
</div>
<!-- end: .e24-portfolio-filter -->
<!-- Portfolio Items Grid -->
<div class="e24-portfolio-grid">
<div class="row no-gutters">
<div class="e24-portfolio-item col-md-6 design">
<div class="e24-portfolio-item-wrapper">
<img src="images/portfolio-image-1.jpg" class="img-fluid" alt="#">
<h3>Design project</h3>
<a href="images/portfolio-image-1.jpg" class="gallery1" title="Project Image Caption"></a>
</div>
</div>
<div class="e24-portfolio-item col-md-6 web">
<div class="e24-portfolio-item-wrapper">
<img src="images/portfolio-image-2.jpg" class="img-fluid" alt="#">
<h3>Web project</h3>
<a href="images/portfolio-image-2.jpg" class="gallery1"></a>
</div>
</div>
<div class="e24-portfolio-item col-md-6 design">
<div class="e24-portfolio-item-wrapper">
<img src="images/portfolio-image-3.jpg" class="img-fluid" alt="#">
<h3>Design project</h3>
<a href="images/portfolio-image-3.jpg" class="gallery1" title="Project Image Caption"></a>
</div>
</div>
<div class="e24-portfolio-item col-md-6 design">
<div class="e24-portfolio-item-wrapper">
<img src="images/portfolio-image-4.jpg" class="img-fluid" alt="#">
<h3>Design project</h3>
<a href="single-portfolio.html" title="Project Image Caption"></a>
</div>
</div>
<div class="e24-portfolio-item col-md-6 web">
<div class="e24-portfolio-item-wrapper">
<img src="images/portfolio-image-5.jpg" class="img-fluid" alt="#">
<h3>Web project</h3>
<a href="#"></a>
</div>
</div>
<div class="e24-portfolio-item col-md-6 photography">
<div class="e24-portfolio-item-wrapper">
<img src="images/portfolio-image-6.jpg" class="img-fluid" alt="#">
<h3>Photography project</h3>
<a href="#"></a>
</div>
</div>
<div class="e24-portfolio-item col-md-6 photography">
<div class="e24-portfolio-item-wrapper">
<img src="images/portfolio-image-7.jpg" class="img-fluid" alt="#">
<h3>Photography project</h3>
<a href="#"></a>
</div>
</div>
</div>
</div>
<!-- end: .e24-portfolio-grid -->
</div>
</div>
There are two elements for customization: portfolio items filter and portfolio grid. Image link in portfolio grid may drive to elegant, cool image lightbox show or to single portfolio page or both. It's up to you.
Mork comes with two frontpage variants: with static hero image at the top or with slideshow. Hero Image Area is at the top of Main Content section:
<!-- Hero Image Area -->
<div class="e24-hero-area">
<div class="e24-hero-content mx-auto d-flex align-items-center e24-overlay e24-bg-overlay">
<div class="container">
<div class="row">
<div class="col-12 text-center e24-z-1">
<h1 class="e24-color-light e24-word-wrap">I am John Doe</h1>
<p class="e24-color-light e24-word-wrap">And I'm a Designer.</p>
</div>
</div>
</div>
</div>
</div>
Depends on your needs you can add your own static image in style.css file. Just browse this line:
.e24-hero-content {
background: url('../images/mork-hero-image.jpg');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
height: 100vh;
width: 90%;
}
Or add images as slides as follows:
.e24-slide-1 {
background: url('../images/slide-1.jpg');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
height: 100vh;
}
Footer resides at the bottom of document in Footer Section:
<!-- FOOTER
============================================== -->
<footer id="colophon" class="e24-page-footer p-3 p-md-5">
<div class="container">
<div class="row">
<!-- Footer Logo Area -->
<div class="e24-footer-logo col-md-6 d-flex justify-content-center justify-content-md-start align-items-center">
<a href="index.html">
<img src="images/mork-logo-small.png" class="img-fluid" alt="Mork Theme Logo">
</a>
</div>
<!-- end: .e24-footer-logo -->
<!-- Footer Page Info Area -->
<div class="e24-page-info col-md-6">
<p class="e24-font-300 text-uppercase text-center py-2">Minimal HTML5 Template for portfolio sites, agencies, individuals. </p>
<ul class="text-uppercase text-center p-0">
<li class="list-inline-item pr-4"><a href="#">Fb.</a></li>
<li class="list-inline-item pr-4"><a href="#">Tt.</a></li>
<li class="list-inline-item"><a href="#">G+.</a></li>
</ul>
</div>
<!-- end: .e24-page-info -->
</div>
</div>
</footer>
There are two elements: Footer Logo Area and Footer Page Info Area with links to your social media profiles. Logo in footer is smaller than main logo and is 216x100 pixels.
The contact form is fully complete and working. You just need to put your own email address in inc/form-process.php file to start receiving form responses:
'email' => 'user@yourmail.com', // Your Email Address
If you are not receiving emails from your form then chances are that your server configuration doesn't support PHP mail() function. But you can use SMTP Authentication. Just find the following line of code:
$mail = new PHPMailer();
Add this after the above line:
$mail->IsSMTP();
$mail->Host = "mail.yourhostdomain.com";
$mail->SMTPDebug = 0;
$mail->SMTPAuth = true;
$mail->Port = 25;
$mail->Username = "user@yourmail.com";
$mail->Password = "yourpassword";
Don't forget to change example data for your valid password, host etc. These datas you should have from your host provider.
Google Map settings you can find at the very bottom in contact.html file. Mork uses a custom Google Map by SnazzyMaps. You need to find your own latitude/longitude from Google maps and put them here (example lat/lng is for New York):
var newyork = {
lat: 40.6700,
lng: -73.9400
};
Important! According to the new Google Maps policy, please note that to using Google map on your site your need individual license key. License key used in Mork template demo belongs to WPElements and is for demo purposes only. Place for license key you can find at the very bottom in contact.html file:
src="https://maps.googleapis.com/maps/api/js?key=HERE_PASTE_YOUR_LICENSE_KEY&callback=initMap"