Macron - HTML Personal Portfolio Template.

Onepage Bootstrap 4 Portfolio.

Thank you for purchasing My product. If you have any questions that are beyond the scope of this help file, please feel free to email me. Thanks so much!

Introduction

Macron is a modern clean HTML personal portfolio template, It perfectly fits those who want to represent themselves in a modern way. If you want to highlight your works or sell your skills no matter what is your profession, then Macron is made for you.

Features

HTML Structure

Macron is fully responsive HTML5 Template followed HTML5 Structure. Every section is seperated with Comments.

Head Section Structure: Here is the example code of section 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">

    <!-- Responsive Meta -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- IE Compatibility -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!-- Meta Description -->
    <meta name="description" content="...">

    <!-- Page title -->
    <title>Macron | Minimal HTML Portfolio Template</title>

    <!-- Favicon -->
    <link rel="shortcut icon" href="img/favicon.ico">

    <!-- Font Awesome Stylesheet -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

    <!-- Bootstrap Stylesheet -->
    <link rel="stylesheet" href="css/bootstrap.css">

    <!-- Lightbox Stylesheet -->
    <link rel="stylesheet" href="css/jquery.fancybox.css">

    <!-- Animate.CSS Stylesheet -->
    <link rel="stylesheet" href="css/animate.css">

    <!-- Custom Stylesheet -->
    <link rel="stylesheet" href="css/style.default.css">
</head>
Body Section Structure: Here is the example code of section 
<body>


    <!-- Navbar -->
    <nav class="main-navbar">

        <div class="main-navbar-header">
            <div class="container d-flex justify-content-between align-items-center">

                <!-- Navbar Brand -->
                <a href="#" class="navbar-brand">
                    <img src="img/logo.png" alt="..." width="35">
                </a>

                <!-- Open Menu Btn -->
                <button id="navbar-open">
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                </button>
            </div>
        </div>

        <!-- Navbar Menu Holder -->
        <div class="navbar-outer">
            <div class="navbar-inner d-flex justify-content-center align-items-center">
                <a id="close-btn" href="#">
                    <img src="img/close.svg" alt="close" class="img-fluid">
                </a>

                <!-- Navbar Menu -->
                <ul class="navbar-menu list-unstyled text-center">
                    <li>
                        <a href="#hero">Home</a>
                    </li>
                    <li>
                        <a href="#about">About</a>
                    </li>
                    <li>
                        <a href="#services">Services</a>
                    </li>
                    <li>
                        <a href="#resume">Resume</a>
                    </li>
                    <li>
                        <a href="#portfolio">Portfolio</a>
                    </li>
                    <li>
                        <a href="#contact">Contact</a>
                    </li>
                </ul>
            </div>

        </div>
    </nav>
    <!-- End Navbar -->


    <!-- Hero Section -->
    <section class="hero d-flex align-items-center gray-bg" id="hero" style="background: url(img/hero-bg.jpg) no-repeat; background-size: cover;">
        <div class="container">

            <div class="heading">
                <p class="wow fadeInUp">Hello, I'm</p>
                <h1 class="wow fadeInUp" data-wow-delay="0.3s">Mohamed Hasan<span class="ellipsis"></span></h1>
                <p class="wow fadeInUp" data-wow-delay="0.6s">Senior Web Designer</p>

                <ul class="social list-unstyled list-inline wow fadeInUp" data-wow-delay="0.9s">
                    <li class="list-inline-item">
                        <a href="#" title="Facebook"><i class="fa fa-facebook"></i></a>
                    </li>
                    <li class="list-inline-item">
                        <a href="#" title="Facebook"><i class="fa fa-twitter"></i></a>
                    </li>
                    <li class="list-inline-item">
                        <a href="#" title="Facebook"><i class="fa fa-behance"></i></a>
                    </li>
                    <li class="list-inline-item">
                        <a href="#" title="Facebook"><i class="fa fa-instagram"></i></a>
                    </li>
                    <li class="list-inline-item">
                        <a href="#" title="Google Plus"><i class="fa fa-google-plus"></i></a>
                    </li>
                </ul>
            </div>

        </div>
    </section>

CSS Files and Structure

I'm using latest CSS coding standard. Custom Style written into style.default.css which is override Bootstrap style somewhere else. An Responsive style written into responsive.css.

CSS Files included:

style.css file contains all of the specific styling for the template. Here is an example of general style which is specify using following label: 

/* ===================================================================
    Table of content:

        1.  General Styles

        2.  Navbar

        3.  Hero Section

        4.  About Section

        5.  Statistics Section

        6.  Services Section

        7.  Skills Section

        8.  Resume Section

        9.  Portfolio Section

        10. Contacts Section

        11. Clients Section

        12. Footer

        13. Scroll To Top Button

        14. Preloader
===================================================================  */

If you would like to edit a specific section of the site, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited.

If you change the style of Header section, find the following section in the style sheet: 

/* ===================================================================
    HERO SECTION
===================================================================  */
section.hero {
  min-height: 100vh;
  position: relative;
}

@media (max-width: 768px) {
  section.hero h1 {
    font-size: 2.5em;
  }
}

section.hero p {
  font-size: 1.6em;
  font-weight: 200;
  color: #777;
  font-family: "Montserrat", sans-serf;
}

section.hero p:first-of-type {
  margin-bottom: 0;
}

section.hero ul.social a {
  font-size: 1.2em;
  color: #59D55E;
}

Fonts

Template Uses two Google Fonts:

Javascript

Macron imports following Javascript files.

All code are beautifully written. You can customize easily. Just look the js code.

Example: If you want to Configure form validation, just find the following block and change the input name attrs with the desired message: 

// ------------------------------------------------------ //
// Contact form validation
// ------------------------------------------------------ //
$('#contact-form').validate({

    messages: {
        username: 'please enter your name',
        useremail: 'please enter your email address',
        subject: 'please enter the subject',
        message: 'please enter your message'
    }

});

Contact Form Configuration.

Contact form is attatched to Formspree.io service, what you have to do is to change the form's action-attribute and replace your@email.com with your own email.

Make sure that all input has a name attribute, then submit the form once, and check you email inbox to verify your email, and congratulations.

Check thier page for more customization Formspree.io 

<form action="https://formspree.io/your@email.com" id="contact-form" method="POST">

Changelog

/*  =======================================================================
This css file will over write bootstarp css
------------------------------------------------------------------------
    * Template Name: Macron
    * Template URI: https://www.mohamdhasan.pro
    * Author: Mohamed Hasan
    * Author URI: https://www.mohamdhasan.pro
    * Description: Macron - Responsive Bootstrap 4 Personal HTML Template
    * Version: 1.0
    * License: GPL v2 or later
    * License URI: http://www.gnu.org/licenses/old-licenses/gpl-2.0.html
    * Tags: html, template, portfolio, marketing, designer, personal
----------------------------------------------------------------------
======================================================================= */

SASS Files

.scss files icluded:

All styles written in partials are automatically compiled to style.default.scss file.

Source & Credits

Thank You

Once again, thank you so much for purchasing this product. As I said at the beginning, I'd be glad to help you if you have any questions relating to this product. No guarantees, but I'll do my best to assist. If you have a more general question relating to this product on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.

Mohamed Hasan.