Flen HTML portfolio template, comes with a comprehensive documentation set, designed to provide a perfect solution for creative professionals and artists. This template has been built using HTML, CSS, and JavaScript, incorporating modern design and user experience. Additionally, it is based on the Bootstrap 5 framework, ensuring ease of customization and responsiveness. The documentation for the Flen template is designed to guide you step by step, starting from the installation process, enabling you to make the best use of all the template’s features. It covers topics such as how to personalize the template, how to customize different sections, and how to integrate additional features. The documentation for the Flen HTML portfolio template serves as a comprehensive resource to help you bring your project to life quickly.
We hope this documentation helps you easily create your own website using the template. Good luck!
You can be found here all updates to the template
The top sections and footer sections of all html pages are the same. The difference in files structure will be in the inner page. Other than that, HTML structure is the same for all pages. Home pages have hero image at the top and other pages have page title.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flen - Agency & Portfolio Template</title>
<!-- Fonts -->
<link rel="stylesheet" href="assets/fonts/Butler_Stencil_Webfont/stylesheet.css" />
<link rel="stylesheet" href="assets/fonts/Butler_Webfont/stylesheet.css" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<!-- Stylesheets -->
<link rel="stylesheet" href="assets/css/bootstrap-grid.min.css" />
<link rel="stylesheet" href="assets/css/plugins.css" />
<link rel="stylesheet" href="assets/css/main.css" />
<!-- Font icons -->
<link rel="stylesheet" href="assets/icon-fonts/fontawesome/css/all.min.css" />
<link rel="stylesheet" href="assets/icon-fonts/remixicon/remixicon.css" />
</head>
<div class="tavonline-overlay"></div>
<div id="cursor">
<i class="fa-solid fa-magnifying-glass"></i>
<i class="ri-arrow-right-up-line"></i>
<div class="cursor__bg"></div>
</div>
<body class="smooth-scroll">
<div id="content-scroll" data-scrollbar>
<div class="site-wrap" data-barba="wrapper">
<main data-barba="container">
<!-- HEADER
============================================= -->
<header>
<div class="header-container">
<div class="row px-0 gx-0">
<div class="col-xl-2 col-md-6 col-6">
<a href="index.html" class="logo"><img src="assets/images/logo.png" alt="logo"></a>
</div>
<div class="col-xl-10 col-md-6 col-6">
<div class="burger-menu" data-cursor="medium">
<span></span>
<span></span>
</div>
</div>
</div>
</div>
</header>
<!-- OVERLAY MENU -->
<div class="overlay-menu">
<div class="close">
<i class="ri-close-line"></i>
</div>
<div class="row overlay-wrap">
<div class="col-xl-8 col-md-7 left-area">
<nav>
<ul>
<li class="menu-item-has-children current-menu-item">
<a href="#">Home</a>
<ul class="sub">
<li><a href="index.html">Home 1</a></li>
<li><a href="home-2.html">Home 2</a></li>
<li><a href="home-3.html">Home 3</a></li>
<li><a href="roll-showcase.html">Showcase 1</a></li>
<li><a href="cross-showcase.html">Showcase 2</a></li>
</ul>
</li>
<li><a href="about.html">Studio</a></li>
<li><a href="#">Projects</a></li>
<li class="menu-item-has-children"><a href="#">Journal</a>
<ul class="sub">
<li><a href="news-classic.html">Journal Classic</a></li>
<li><a href="news-list.html">Journal List</a></li>
</ul>
</li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</div>
<div class="col-xl-4 col-md-5 right-area">
<ul>
<li><span class="title">Brief us</span></li>
<li><a href="mailto:hello@flencreative.com" target="_blank">hello@flencreative.com</a>
</li>
<li><a href="tel:34937606800" target="_blank">Tel. +34 937 606 800</a></li>
</ul>
<ul>
<li><span class="title">Our Office</span></li>
<li>
<p>1788 Morningview Lane, 10013<br> New York</p>
</li>
</ul>
<ul>
<li><span class="title">Follow us</span></li>
<li>
<ul class="social-links">
<li><a href="#" target="_blank">Behance</a></li>
<li><a href="#" target="_blank">Dribbble</a></li>
<li><a href="#" target="_blank">Instagram</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>So how this layout work? First we have header which contains logo and hamburger icon. There are two header, one is fixed and the other is moving with us as the page scrolls. When changing the logo, remember to change both. After that we have right bar items(social icons, up to top button) and full menu. And then we have page content. Inside of it you can place your real content – columns. Every page content have container which can be classes “container”. Inside of a container there is a row. inside of a row you are placing columns – your content. Every row is one visual row which can contain columns where sum of the classes numbers is equal 12. That means you can have col-lg-6 and col-lg-6 in one row, for example. Or you can have three times col-lg-4. For more about how grid works you can visit official bootstrap pages as this template is based on Bootstrap’s grid.
All .css files are placed in “assets/css” folder. Flen includes following css files:
In this section we will present you all js files that are used in this template.
Here we will explain how to customize all sections. (If you do not want to deal with customization, you can send us all your pictures and contents, you can get hire us for customizations)
In this section we will present you and explain grid system used.
Flen is based on Bootstrap Grid System. So what you need to know about using this grid system? First of all, every column, or page section must have it’s container. That is div with class “container”. Inside of it there must be div or section with class “row”. Inside one row, you put your columns. One row is actually one row visually. That means that column with class .col-lg-12 will go inside one row. In row below that column can be another row that is containing for example .col-lg-4 and col-lg-8.
How do you combine columns? As there are 12 columns, sum of it’s classes numbers must be 12. That is, in one row can go col-lg-7 and col-lg-5, or col-lg-3 and col-lg-9, and so on. Important thing to remember is that inside one row can go columns which sum is 12. Every row has it’s bottom margin, which is 70px. So it is important to remember that one row is including only one visual row of columns. You can also use nested columns. For example you can have col-lg-9 (like on the page with sidebar) and inside of it you can place a row that containes two col-lg-6 columns. That columns inside will be half wide of it’s parent column. Inside of these columns you can put your content.
In the Flen HTML template, pages are sections within the same HTML file. The main menus are located within index.html. These pages transition with JavaScript animations.
<!-- HEADER
============================================= -->
<header class="type-1">
<div class="header-container">
<div class="row px-0 gx-0">
<div class="col-xl-2 col-md-6 col-6">
<a href="index.html"><img src="assets/images/logo.png" alt="logo"></a>
</div>
<div class="col-xl-8 col-md-3 d-none d-xl-block align-center">
<nav>
<ul>
<li class="menu-item-has-children">
<a href="index.html"><span data-hover="Home">Home</span></a>
<ul class="sub">
<li><a href="index.html">Home 1</a></li>
<li><a href="demo-2.html">Home 2</a></li>
<li><a href="demo-3.html">Home 3</a></li>
<li><a href="demo-4.html">Home 4</a></li>
<li><a href="demo-5.html">Home 5</a></li>
<li><a href="demo-6.html">Home 6</a></li>
<li><a href="demo-7.html">Home 7</a></li>
<li><a href="demo-8.html">Home 8</a></li>
</ul>
</li>
<li class="menu-item-has-children">
<a href="discography.html"><span data-hover="Discography">Discography</span></a>
<ul class="sub">
<li><a href="discography.html">Albums</a></li>
<li><a href="single-album.html">Single Album</a></li>
</ul>
</li>
<li class="menu-item-has-children">
<a href="#"><span data-hover="Events">Events</span></a>
<ul class="sub">
<li><a href="events.html">All Events</a></li>
<li><a href="single-event.html">Single Event</a></li>
</ul>
</li>
<li><a href="gallery.html"><span data-hover="Gallery">Gallery</span></a></li>
<li class="menu-item-has-children">
<a href="video-gallery.html"><span data-hover="Videos">Videos</span></a>
<ul class="sub">
<li><a href="video-gallery.html">Video Gallery</a></li>
<li><a href="single-video.html">Single Video</a></li>
</ul>
</li>
<li class="menu-item-has-children">
<a href="shop-page.html"><span data-hover="Shop">Shop</span></a>
<ul class="sub">
<li><a href="shop-page.html">All Products</a></li>
<li><a href="single-product.html">Single Product</a></li>
</ul>
</li>
<li class="menu-item-has-children">
<a href="shop-page.html"><span data-hover="News">News</span></a>
<ul class="sub">
<li class="active"><a href="news-page.html">All News</a></li>
<li><a href="single-news.html">Single News</a></li>
</ul>
</li>
<li><a href="contact.html"><span data-hover="Contact">Contact</span></a></li>
</ul>
</nav>
</div>
<div class="col-xl-2 col-md-6 col-6">
<div class="hamburger-menu mobile">
<div class="burger">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class="shop-button">
<span>2</span>
<i class="ri-shopping-bag-fill"></i>
</div>
</div>
</div>
</div>
</header>To add a menu to the header, you can add <li> elements inside the <nav> element within the overlay-menu.
For example: <li><a href="example.html">Example</a></li>
<nav>
<ul>
<li class="menu-item-has-children">
<a href="#">Home</a>
<ul class="sub">
<li class="current-menu-item"><a href="index.html">Home 1</a></li>
<li><a href="home-2.html">Home 2</a></li>
<li><a href="home-3.html">Home 3</a></li>
<li><a href="roll-showcase.html">Showcase 1</a></li>
<li><a href="letterflow-showcase.html">Showcase 2</a></li>
</ul>
</li>
<li><a href="about.html">Studio</a></li>
<li><a href="projects-grid.html">Projects</a></li>
<li class="menu-item-has-children"><a href="#">Journal</a>
<ul class="sub">
<li><a href="news-classic.html">Journal Classic</a></li>
<li><a href="news-list.html">Journal List</a></li>
</ul>
</li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav> If you want to add a sub-menu to this menu, you should define the class ‘.menu-item-has-children’ to the <li> element containing the sub-menu, and the <ul> inside it should have the class ‘.sub’. You can see the example below:
<li class="menu-item-has-children"><a href="#">Journal</a>
<ul class="sub">
<li><a href="news-classic.html">Journal Classic</a></li>
<li><a href="news-list.html">Journal List</a></li>
</ul>
</li>
To customize the perspective slider, you need to modify the .slide divs inside the .perspective-slider div. Each .slide div represents a specific item.
You can see the features of a portfolio in the example below. You can specify the path of the page you want it to be redirected to when clicking on the href section, put the job category inside the .category div, and the job name inside the h1.
To customize the image, you can edit the “background-image” property in the style attribute of the .slide div.
<div class="slide">
<a href="work-1.html" data-cursor-type="arrow" data-cursor-color="#FFAF82" class="image" style="background-image: url(assets/images/works/work-1/01.jpg);">
<div class="slider-content">
<span class="category">branding</span>
<h1 data-splitting>Glød</h1>
</div>
</a>
</div>The images used in the preview are not included in the download files. You can see some of them used below
Thank you for purchasing Mosby. We hope this file helped you with customizations and setting up your site. however if you have any questions or would like to hire us for customizations please email us