The Character - One Pager Templates for Professionals in HTML 5

Documentation and Help
Osum Logo

Table of Contents

  1. Introduction
    1. Pages
    2. Package Files Content
    3. HTML/CSS Templates, Definition and Usage
    4. Features
  2. Template Layouts
  3. Editing This Template
    1. Basic Page Structure
  4. CSS Files
  5. JS Files
  6. Sources and Credits
Created On:26 March 2020
Last Updated:26 March 2020
Current Version:1.0

Thank you for purchasing our item. If you have any questions that are beyond the scope of this help file, please feel free to email via our profile page.

Contact Us

1Introduction

This is Multipurpose One Pagers designed specially for Professionals to showcase their portfolio and Biographies. We offering 4 different demos for Freelance Designer, Ui/Ux Expert, Social Media Marketer & Entrepreneurs at the moment and more are coming soon.

Pages:

Freelance Designer

Freelance Designer
Social Media Marketer

Social Media Marketer
Mobile App Designer

Mobile App Designer
Entrepreneur

Entrepreneur

Package Files Content:

The package you downloaded from themeforest include the following structure:

The Documentation folder includes the documentation files of "The Character - One Pager Templates for Professionals in HTML 5".

Package Files

The main HTML files of the template are found inside the "The Character" folder.

Inside the "The Character" folder, you will see the following structure:

All Pages

HTML/CSS Templates, Definition and Usage:

A HTML/CSS Template is a pre-designed layout that will help you build a final website. HTML ( HyperText Markup Language) is the basic coding to create web pages. CSS stands for Cascading Style Sheets and it's used to define and style the HTML elements.

To install a HTML/CSS template requires just to copy the template files on your webserver. This can be done using your hosting provider custom interface or a FTP (File Transfer Protocol) software. Our recommendation is FileZilla.

A regular HTML/CSS template does NOT include a CMS (Content Management System) to edit/add content of the pages. All content is edited using a HTML editor. HTML editors can be found as free and paid editors. Some modern HTML editors have included a DESIGN view mode of the code, making it easier for templates to be edited. Regular ones will let you edit the content only from the code mode, meaning you will need to have a basic HTML coding knowledge.

Sources: HTML5, Bootstrap 4.4.1, CSS, CSS3, Custom JS.

Features:

  • HTML5/CSS3
  • Unique Mindful Layouts
  • Fully Responsive
  • Retina Ready
  • Clean Commented Code
  • Well Documented
  • Native Designs for Mobile
  • SEO Optimised Code
  • Load time under 500ms
  • One Click Color Switch
  • One Pagers
  • Smooth Scroll
  • Elegant Animations

2Template Layouts

We will discuss various layouts of the pages that you can build with this template. There are some details that you should be careful about them so please read this section carefully. This template is specially crafted to showcase the portfolio and Biographies. Depending on your needs you can use this template to create the desired final product. Below we will try to describe each one of the final product you can create.

The template includes the various layouts for the following pages:-

  • Freelance Designer
  • Social Media Marketer
  • Mobile App Designer
  • Entrepreneur

3Editing This Template

EDITING THIS TEMPLATE REQUIRES BASIC HTML/CSS/JAVASCRIPT AND BOOTSTRAP KNOWLEDGE. IF YOU DON'T HAVE A BASIC KNOWLEDGE OF THESE WE RECOMMEND HIRE A WEB DESIGNER OR LOOK FOR A FREELANCER ON ENVATO STUDIO.

EDITING THIS TEMPLATE DO NOT REQUIRE A SERVER. YOU CAN EDIT IT USING A LOCAL HTML EDITOR SOFTWARE. ONLY TESTING IT, WILL REQUIRE TO BE UPLOADED TO A SERVER.

To edit this HTML template you will need a HTML Editor. Even Notepad will do the job, but a dedicated HTML editor will work better in arranging the code structure. HTML editors are softwares that allow code editing. Some HTML editors have included a DESIGN mode, which will allow you to see the interface of the page you are editing. Editors can be found FREE or PREMIUM on the WEB.

Basic Page Structures:

The main page of this template is freelance-designer.html file. This is the home page of the template, this is the first page the browser will open that the users will see. The main page load with Preloader Effect, AOS animations and Slick Slider.

Freelance Designer Template Structure:

The structure of the HEADER is:

Freelance Designer 

<!-- Header  -->
<header>
	<!-- Navigation Wrap -->
	<div class="navigation-wrap bg-light header-wrap header-fixed">
		<!-- Container -->
		<div class="container-fluid p-0">
			<!-- Row -->
			<div class="row">
				<!-- Col -->
				<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
					<!-- Navbar -->
					<nav class="navbar navbar-expand-lg navbar-light">
						<h1>
							<a class="navbar-brand" href="freelance-designer.html">
								<img src="assets/images/logo.svg" class="img-fluid" alt="Logo" title="">
							</a>
						</h1>
						<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navigationMenu" aria-controls="navigationMenu" aria-expanded="false" aria-label="Toggle navigation">
							<span class="navbar-toggler-icon"></span>
						</button>
						<!-- Menu Icon For Mobile Navigation -->
						<div class="menu-icon">
							<span class="menu-icon-line menu-icon-line-left"></span>
							<span class="menu-icon-line"></span>
							<span class="menu-icon-line menu-icon-line-right"></span>
						</div>
						<!-- /Menu Icon For Mobile Navigation -->
						<!-- Navigation Menu -->
						<div class="collapse navbar-collapse" id="navigationMenu">
							<ul class="navbar-nav ml-auto py-4 py-md-0">
								<li class="nav-item pl-5 pl-md-0 mr-0 mr-md-3 ml-0 ml-md-4">
									<a class="nav-link active" href="#home">Home</a>
								</li>
								<li class="nav-item pl-5 pl-md-0 mr-0 mr-md-3 ml-0 ml-md-4">
									<a class="nav-link" href="#experience">Experience</a>
								</li>
								<li class="nav-item pl-5 pl-md-0 mr-0 mr-md-3 ml-0 ml-md-4">
									<a class="nav-link" href="#expertise">Expertise</a>
								</li>
								<li class="nav-item pl-5 pl-md-0 mr-0 mr-md-3 ml-0 ml-md-4">
									<a class="nav-link" href="#ventures">Ventures</a>
								</li>
								<li class="nav-item pl-5 pl-md-0 mr-0 mr-md-3 ml-0 ml-md-4">
									<a class="nav-link" href="#awards">Awards</a>
								</li>
								<li class="nav-item pl-5 pl-md-0 mr-0 mr-md-3 ml-0 ml-md-4">
									<a class="nav-link" href="#contact">Contact</a>
								</li>
								<li class="nav-item pl-5 pl-md-0 mr-0 mr-md-0 ml-0 ml-md-4">
									<a class="nav-link" href="#feedbackArea">Client's Love</a>
								</li>
							</ul>
						</div>
						<!-- /Navigation Menu -->
					</nav>	
					<!-- /Navbar -->
				</div>
				<!-- /Col -->
			</div>
			<!-- /Row -->
		</div>
		<!-- /Container -->
	</div>
	<!-- /Navigation Wrap -->
</header>
<!-- /Header  -->

To add a new menu item, just add a new LI element:


<li class="nav-item pl-5 pl-md-0 mr-0 mr-md-0 ml-0 ml-md-4">
	<a class="nav-link" href="#feedbackArea">Client's Love</a>
</li>

The Slick slider HTML structure is:

Slick Slider 

<!-- Venture Slider -->
<div class="ventureSlider" data-aos="fade-up" data-aos-once="true">
	<!-- Venture Slide -->
	<div class="venture-slide v-slide-one">
		<!-- Row -->
		<div class="row align-items-center">
			<!-- Col -->
			<div class="col-xs-12 col-sm-12 col-md-12 col-lg-7 col-xl-7">
				<img src="assets/images/venture-slide-1.png" class="img-fluid laptop-img" alt="Agency" title="">
			</div>
			<!-- /Col -->
			<!-- Col -->
			<div class="col-xs-12 col-sm-12 col-md-12 col-lg-5 col-xl-5">
				<!-- Venture List Content -->
				<div class="expertise-list-content">
					<span>Agency</span>
					<h2>Osum Studio </br> Private Limited</h2>
					<p>It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages.</p>
				</div>
				<!-- /Venture List Content -->
			</div>
			<!-- /Col -->
		</div>
		<!-- Row -->
	</div>
	<!-- /Venture Slide -->
	<!-- Venture Slide -->
	<div class="venture-slide v-slide-two">
		<!-- Row -->
		<div class="row align-items-center">
			<!-- Col -->
			<div class="col-xs-12 col-sm-12 col-md-12 col-lg-7 col-xl-7">
				<img src="assets/images/venture-slide-2.png" class="img-fluid app-mobile" alt="App" title="">
			</div>
			<!-- /Col -->
			<!-- Col -->
			<div class="col-xs-12 col-sm-12 col-md-12 col-lg-5 col-xl-5">
				<!-- Venture List Content -->
				<div class="expertise-list-content">
					<span>App</span>
					<h2>Get </br> Social Success</h2> 
					<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.</p>
				</div>
				<!-- /Venture List Content -->
			</div>
			<!-- /Col -->
		</div>
		<!-- Row -->
	</div>
	<!-- /Venture Slide -->
</div>
<!-- /Venture Slider -->

The Slick slider HTML structure in Social Media Marketer:

Slick Slider Showcase 

<!-- Festival Slider -->
<div class="festival-slider">
	<a href="assets/images/smm-slider-1.jpg">
		<img src="assets/images/smm-slider-1.png" class="img-fluid" alt="Slider Image" title="">
	</a>
	<a href="assets/images/smm-slider-2.jpg">
		<img src="assets/images/smm-slider-2.png" class="img-fluid" alt="Slider Image" title="">
	</a>
	<a href="assets/images/smm-slider-3.jpg">
		<img src="assets/images/smm-slider-3.png" class="img-fluid" alt="Slider Image" title="">
	</a>
	<a href="assets/images/smm-slider-1.jpg">
		<img src="assets/images/smm-slider-1.png" class="img-fluid" alt="Slider Image" title="">
	</a>
	<a href="assets/images/smm-slider-2.jpg">
		<img src="assets/images/smm-slider-2.png" class="img-fluid" alt="Slider Image" title="">
	</a>
	<a href="assets/images/smm-slider-3.jpg">
		<img src="assets/images/smm-slider-3.png" class="img-fluid" alt="Slider Image" title="">
	</a>
</div>
<!-- /Festival Slider -->

To add new Frequently Asked Question, add this code:

Footer 

<!-- Card -->
<div class="card" data-aos="fade-up" data-aos-once="true">
	<div class="card-header" id="headingOne">
		<h5 class="acc-heading" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"><span> When an unknown printer took a galley of type and scrambled it to make a type specimen book?</span></h5>
	</div>
	<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
		<div class="card-body">
		Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley.</div>
	</div>
</div>
<!-- /Card -->

HTML Structure of Process Area in Mobile App Designer:

Footer 

<!-- Process Section -->
<div class="process-section">
	<!-- Process Text Wrapper -->
	<div class="process-text-wrapper" data-aos="fade-up" data-aos-once="true">
		<!-- Process Text -->
		<ol class="process-text">
			<li id="step1" class="is_active">
				<p data-plugin="appear" data-appear-effects="text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
			</li>
			<li class="" id="step2">
				<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum.</p>
			</li>
			<li class="" id="step3">
				<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words.</p>
			</li>
		</ol>
		<!-- /Process Text -->
	</div>
	<!-- /Process Text Wrapper -->
	<!-- Process List -->
	<div class="process-list" data-aos="fade-up" data-aos-once="true">
		<!-- Process Link List -->
		<ol class="process-link-list">
			<li class="col is_active" data-href="#step1">
				<div class="process-list-item">
					<span>Discover</span>
				</div>
			</li>
			<li class="col" data-href="#step2">
				<div class="process-list-item">
					<span>Define</span>
				</div>
			</li>
			<li class="col" data-href="#step3">
				<div class="process-list-item">
					<span>Design</span>
				</div>
			</li>
		</ol>
		<!-- /Process Link List -->
	</div>
	<!-- /Process List -->
</div>
<!-- /Process Section -->

Add Another Award to Awards Area In Entrepreneur:

Awards 

<!-- LI -->
<li>
	<p><strong>2018:</strong> Entrepreneur Award </br> Entrepreneur of the Year Award</p>
</li>
<!-- /LI -->

Add Blog in Entrepreneur:

Blog 

<!-- Blog Detail -->
<div class="blog-detail" data-aos="fade-up">
	<div class="row align-items-center">
		<div class="col-xs-12 col-sm-12 col-md-12 col-lg-6 col-xl-6">
			<div class="blog-image-wrap feed-image">
				<img src="assets/images/artist-blog-1.png" class="img-fluid" alt="Blog Image" title="">
			</div>
		</div>
		<div class="col-xs-12 col-sm-12 col-md-12 col-lg-6 col-xl-6">
			<div class="blog-detail-content">
				<h2>Shane Johnson</h2>
				<h3>Why Motivation Works</h3>
				<div class="blog-info">
					<p>JANUARY 14, 2020   <span class="blog-category">|</span>   BUSINESS</p>
				</div>
				<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has …</p>
				<div class="blog-link">
					<span class="icon-right-arrow"></span><a href="#" title="">Read Full</a>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- /Blog Detail -->

The Social Icon HTML structure in Footer is

Footer 

<!-- Social Media -->
<div class="social-media">
	<ul>
		<li>
			<a href="https://www.facebook.com/" title="" target="_blank">
				<span class="icon-facebook-icon"></span>
			</a>
		</li>
		<li>
			<a href="https://www.instagram.com/" title="" target="_blank">
				<span class="icon-instagram-icon"></span>
			</a>
		</li>
		<li>
			<a href="https://www.skype.com/en/" title="" target="_blank">
				<span class="icon-skype-icon"></span>
			</a>
		</li>
		<li>
			<a href="https://web.whatsapp.com/" title="" target="_blank">
				<span class="icon-whatsapp-icon"></span>
			</a>
		</li>
		<li>
			<a href="https://www.google.com/intl/en-GB/gmail/about/#" title="" target="_blank">
				<span class="icon-mail-icon"></span>
			</a>
		</li>
	</ul>
</div>
<!-- /Social Media -->

4CSS Files

1. The main CSS files used in this template are mentioned below. All these files are mandatory to include in template. Follow the sequence in order to avoid any confliction.


<!-- CSS styles -->
	<link rel="stylesheet" href="assets/css/bootstrap.min.css">
	<link rel="stylesheet" href="assets/css/style.css">
	<link rel="stylesheet" href="assets/css/responsive.css">
	<link rel="stylesheet" href="assets/css/slick.css">
	<link rel="stylesheet" href="assets/css/slick-lightbox.css">
	<link rel="stylesheet" href="assets/css/aos.css">
<!-- /CSS styles -->

2. The template uses a custom fonts. In styles.css the fonts are defined which are used.


@font-face {
    font-family: Flexo-Bold;
    src: url(../css/fonts/Flexo-Bold.eot);
    src: url(../css/fonts/Flexo-Bold.woff) format('woff'), url(../css/fonts/Flexo-Bold.ttf) format('truetype'), url(../css/fonts/Flexo-Bold.svg) format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: Flexo-Demi;
    src: url(../css/fonts/Flexo-Demi.eot);
    src: url(../css/fonts/Flexo-Demi.woff) format('woff'), url(../css/fonts/Flexo-Demi.ttf) format('truetype'), url(../css/fonts/Flexo-Demi.svg) format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: Flexo-Regular;
    src: url(../css/fonts/Flexo-Regular.eot);
    src: url(../css/fonts/Flexo-Regular.woff) format('woff'), url(../css/fonts/Flexo-Regular.ttf) format('truetype'), url(../css/fonts/Flexo-Regular.svg) format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: Lora-Regular;
    src: url(../css/fonts/Lora-Regular.eot);
    src: url(../css/fonts/Lora-Regular.woff) format('woff'), url(../css/fonts/Lora-Regular.ttf) format('truetype'), url(../css/fonts/Lora-Regular.svg) format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: Mondays;
    src: url(../css/fonts/Mondays.eot);
    src: url(../css/fonts/Mondays.woff) format('woff'), url(../css/fonts/Mondays.ttf) format('truetype'), url(../css/fonts/Mondays.svg) format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Lora-Italic';
    src: url('../css/fonts/Lora-Italic.eot');
    src: url('../css/fonts/Lora-Italic.woff') format('woff'), url('../css/fonts/Lora-Italic.ttf') format('truetype'), url('../css/fonts/Lora-Italic.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'BwGlennSans-Regular';
    src: url('../css/fonts/BwGlennSans-Regular.eot');
    src: url('../css/fonts/BwGlennSans-Regular.woff') format('woff'), url('../css/fonts/BwGlennSans-Regular.ttf') format('truetype'), url('../css/fonts/BwGlennSans-Regular.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'BwGlennSans-Medium';
    src: url('../css/fonts/BwGlennSans-Medium.eot');
    src: url('../css/fonts/BwGlennSans-Medium.woff') format('woff'), url('../css/fonts/BwGlennSans-Medium.ttf') format('truetype'), url('../css/fonts/BwGlennSans-Medium.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'BwGlennSans-Bold';
    src: url('../css/fonts/BwGlennSans-Bold.eot');
    src: url('../css/fonts/BwGlennSans-Bold.woff') format('woff'), url('../css/fonts/BwGlennSans-Bold.ttf') format('truetype'), url('../css/fonts/BwGlennSans-Bold.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'BwGlennSans-ExtraBold';
    src: url('../css/fonts/BwGlennSans-ExtraBold.eot');
    src: url('../css/fonts/BwGlennSans-ExtraBold.woff') format('woff'), url('../css/fonts/BwGlennSans-ExtraBold.ttf') format('truetype'), url('../css/fonts/BwGlennSans-ExtraBold.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'MisterLondonScript-Regular';
    src: url('../css/fonts/MisterLondonScript-Regular.eot');
    src: url('../css/fonts/MisterLondonScript-Regular.woff') format('woff'), url('../css/fonts/MisterLondonScript-Regular.ttf') format('truetype'), url('../css/fonts/MisterLondonScript-Regular.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

3. The secondary CSS files found inside the CSS folder.

  • bootstrap.min.css - It is a bootstrap 4 framework css.
  • responsive.css - It contains all the CSS for other resolution screen changes.
  • slick.css - This CSS file is for the slick slider.
  • slick-lightbox.css - It is used for the images that are displaying in the lightbox for the showcase area.
  • aos.css - This is used for the animation effects in all the pages.

5JS Files

The template includes javascript files which are loaded at the end of text file.


<!--  JavaScript Files -->
	<script src="assets/js/jquery-3.4.1.min.js"></script>
	<script src="assets/js/bootstrap.min.js"></script>
	<script src="assets/js/aos.js"></script>
	<script src="assets/js/slick.min.js"></script>
	<script src="assets/js/slick-lightbox.js"></script>
	<script src='assets/js/jquery-ui.min.js'></script>
	<script src="assets/js/script.js"></script>
<!--  /JavaScript Files -->
  • jquery-3.4.1.min.js - The jQuery library is a single JavaScript file. The version of jQuery used in this template is 3.4.1.
  • bootstrap.min.js - It is a js file of Bootstrap Framework. Version used is 4.4.1
  • aos.js - It is used for page element animation effects.
  • slick.min.js - It is used for slick slider initialization.
  • slick-lightbox.js - It is used for initializing the lightbox in Slick Slider.
  • jquery-ui.min.js - It is used for the UI sliding effects.
  • script.js - It contains custom functions like navigation, preloader and many others.

6Sources and Credits

The Various kinds of Sources used in this template are appended below:

Note: - All images are licensed to their respective owners and are used for demonstration purposes and not included in the download. - This is not a WordPress theme, it is a HTML5 template.

Thanks for showing interest in our "The Character - One Pager Templates for Professionals in HTML 5". Should you have any additional questions, doubts or need support, please contact us via our envanto profile. Also feel free to suggest new pages that You think we need to add in our next release.

Arrow