HTML Structure
This template uses its own grid system with similar logic to the Bootstrap grid system.
Basic HTML markup for template grid system
<div class="container text-center">
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
</div>Basic HTML Markup for template content
<!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" />
<meta
name="keywords"
content="html, personal, personal portfolio, dark, minimal, html template, site template, designer, developer, youtuber, vloger, bloger, bootstrap, dark theme, personal dark theme, personal dark template"
/>
<meta name="description" content="Isti personal portfolio HTML Template." />
<meta name="author" content="codeefly" />
<title>Isti - Creative Portfolio HTML Template</title>
<link rel="icon" type="image/png" href="images/favicon.png" />
<link rel="stylesheet" href="css/font-awesome-pro.css" />
<link rel="stylesheet" href="css/plugin.css" />
<link rel="stylesheet" href="css/spacing.css" />
<link rel="stylesheet" href="css/scroll_top.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/responsive.css" />
<link rel="stylesheet" href="./isti-icon/style.css" />
</head>
<body>
<!--================================
PRELOADER START
=================================-->
<div class="preloader">
<svg viewBox="0 0 1000 1000" preserveAspectRatio="none">
<path id="svg" d="M0,1005S175,995,500,995s500,5,500,5V0H0Z"></path>
</svg>
<h5 class="preloader-text">Isti</h5>
</div>
<!--================================
PRELOADER END
=================================-->
<!--============================
MAIN MANU START
==============================-->
<nav class="navbar navbar-expand-lg tf__main_menu pl_50 pr_60">
<div class="container-fluid">
<a class="navbar-brand" href="/index.html"
><img src="images/logo_1.png" alt="logo" class="img-fluid w-100"
/></a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<i class="far fa-stream menu_icon_bar"></i>
<i class="far fa-times close_icon_close"></i>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link active text_hover_animaiton" href="#"
>Home <i class="far fa-angle-down"></i
></a>
<ul class="tf__dropdown">
<li><a href="/index.html">Multipage</a></li>
<li><a href="/index-2.html">Onepage</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link text_hover_animaiton" href="#about"
>About Us</a
>
</li>
<li class="nav-item">
<a class="nav-link text_hover_animaiton" href="#service"
>Services</a
>
</li>
<li class="nav-item">
<a class="nav-link text_hover_animaiton" href="#projects"
>Projects</a
>
</li>
<li class="nav-item">
<a class="nav-link text_hover_animaiton" href="#"
>Blog <i class="far fa-angle-down"></i
></a>
<ul class="tf__dropdown">
<li><a href="/blog.html">blog</a></li>
<li><a href="/blog-details.html">blog details</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link text_hover_animaiton" href="/contact.html"
>Contact
</a>
</li>
</ul>
</div>
</div>
</nav>
<!--============================
MAIN MANU END
==============================-->
<!--===============================
CONTENT START
===============================-->
<!-- content -->
<!--============================
CONTENT END
=============================-->
<!--============================
COPYRIGHT START
==============================-->
<section class="tf__copyright">
<div class="container">
<div class="col-xl-12">
<div
class="tf__main_copyright d-flex flex-wrap justify-content-between"
>
<p>© Codeefly 2024 | All Rights Reserved</p>
<ul class="d-flex flex-wrap">
<li>
<a href="#" class="text_hover_animaiton">Trams & Condition</a>
</li>
<li>
<a href="#" class="text_hover_animaiton">Privacy Policy</a>
</li>
<li><a href="#" class="text_hover_animaiton">Sitemap</a></li>
</ul>
</div>
</div>
</div>
</section>
<!--============================
COPYRIGHT END
==============================-->
<!--================================
SCROLL BUTTON START
=================================-->
<div class="progress-wrap c-pointer">
<svg
class="progress-circle svg-content"
width="100%"
height="100%"
viewBox="-1 -1 102 102"
>
<path d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
</svg>
</div>
<!--================================
SCROLL BUTTON END
=================================-->
<div id="magic-cursor">
<div id="ball"></div>
</div>
<!--js-->
<script src="js/plugin.js"></script>
<script src="js/animation.js"></script>
<script src="js/scroll_top.js"></script>
<script src="js/main.js"></script>
</body>
</html>Last updated