Mork 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.

Introduction

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.

  • Mork template is build upon modern web technologies e.g. Bootstrap 4, Flexbox layout, CSS3 animations, SVG. That's why just as Bootstrap, Mork doesn't support zombie browsers like IE9 and down. Mork supports only the latest, stable releases of all major browsers and platforms.
  • Mork includes premium plugin with commercial developer license: Isotope by Metafizzy. It means that customers and users of my products do not need to purchase their own license — so long as they are not developing their own commercial products with Isotope.
  • Images used in the demo aren’t integral part of template due to respect for copyright rules and are for demo only. Please use your own images instead.

Contents

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:

  • CSS folder - contains .css files.
  • Fonts folder - contains Linea Icons files used in Mork.
  • Images folder - is for your images. Alternatively may contains custom images, that are helpful with template customization, e.g. SVG files or logo example.
  • Inc folder - contains PHP files used for contact form process.
  • Js folder - contains Javascript custom file and subfolder - there are third-party JS libraries and plugins used in the template.
  • HTML files - main template files used for building pages, that you can see on demo site.

Installation

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!

HTML and CSS Structure

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 e-press24 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.

Customization

Favicon

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

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.

Menu

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

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.

Frontpage

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

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.

Contact Form

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

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 e-press24 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"


                        

Thank you!
Artur Kostecki - owner of e-press24.