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
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densityDpi=device-dpi"
/>
<title>Petrix - Personal Portfolio HTML Template</title>
<link rel="icon" type="image/png" href="images/favicon.png" />
<link rel="stylesheet" href="css/plugin.css" />
<link rel="stylesheet" href="css/icon.css" />
<link rel="stylesheet" href="css/spacing.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/responsive.css" />
</head>
<body id="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">Loading</h5>
</div>
<!--================================
PRELOADER END
=================================-->
<!--========================
MENU START
=========================-->
<nav class="navbar navbar-expand-lg main_menu">
<div class="container container_large">
<a class="navbar-brand" href="index.html">
<img src="images/logo.png" alt="Petrix" class="img-fluid" />
</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="fa-sharp fa-sharp fa-regular fa-bars menu_icon_bar"></i>
<i class="fa-regular fa-xmark close_icon_close"></i>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav m-auto">
<li class="nav-item">
<a class="nav-link active text_hover_animaiton" href="index.html"
>Home
</a>
</li>
<li class="nav-item">
<a class="nav-link text_hover_animaiton" href="about_us.html"
>About Me</a
>
</li>
<li class="nav-item">
<a class="nav-link text_hover_animaiton" href="#"
>Portfolio <i class="far fa-angle-down"></i
></a>
<ul class="droap_menu">
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="portfolio_details.html">Portfolio Details</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link text_hover_animaiton" href="#"
>Services <i class="far fa-angle-down"></i
></a>
<ul class="droap_menu">
<li><a href="services.html">Services</a></li>
<li><a href="service_details.html">Service Details</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link text_hover_animaiton" href="#"
>Blog <i class="far fa-angle-down"></i
></a>
<ul class="droap_menu">
<li><a href="blog_grid.html">Blog Grid</a></li>
<li><a href="blog_list.html">Blog List</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_us.html"
>Contact</a
>
</li>
</ul>
<div class="right_menu">
<a href="contact_us.html" class="btn_hover">Let's Talk</a>
</div>
</div>
</div>
</nav>
<!--========================
MENU END
=========================-->
<!--================================
CONTENT START
=================================-->
<!-- content -->
<!--================================
CONTENT END
=================================-->
<!--========================
FOOTER START
=========================-->
<footer id="footer" style="background: url(images/golden_bg.jpg)">
<div class="footer_heading">
<div class="container">
<ul>
<li>
<a href="mailto:info@demo.com">info@demo.com</a>
</li>
<li>
<p>14 tottenham road, london, england</p>
</li>
<li>
<a href="callto:+1(0)987654321">+1(0) 987 654 321</a>
</li>
</ul>
</div>
</div>
<div class="footer_link">
<div class="container">
<ul>
<li class="fade_bottom" data-trigerId="footer">
<a href="#" data-cursor='<i class="fa-brands fa-instagram"></i>'
>My Instagram</a
>
</li>
<li class="fade_bottom" data-trigerId="footer">
<a href="#" data-cursor='<i class="fa-brands fa-behance"></i>'
>My Behance</a
>
</li>
<li class="fade_bottom" data-trigerId="footer">
<a href="#" data-cursor='<i class="fa-brands fa-twitter"></i>'
>My Twitter</a
>
</li>
<li class="fade_bottom" data-trigerId="footer">
<a href="#" data-cursor='<i class="fa-brands fa-linkedin-in"></i>'
>my Linkedin</a
>
</li>
</ul>
</div>
</div>
<div class="footer_copyright">
<div class="container">
<div class="footer_copyright_text">
<p>Copyright © 2023 Petrix. All rights reserved.</p>
<ul>
<li>
<a href="#" class="text_hover_animaiton">Terms & Condition </a>
</li>
<li>
<a href="#" class="text_hover_animaiton">Privacy Policy</a>
</li>
</ul>
<a class="scroll_button" href="#body"
><i class="fa-light fa-arrow-up"></i
></a>
</div>
</div>
</div>
</footer>
<!--========================
FOOTER END
=========================-->
<!--========================
CURSOR START
=========================-->
<div id="magic-cursor">
<div id="ball"></div>
</div>
<!--========================
CURSOR END
=========================-->
<!--jquery library js-->
<script src="js/plugin.js"></script>
<!-- Animation -->
<script src="js/animation.js"></script>
<!--main/custom js-->
<script src="js/main.js"></script>
</body>
</html>Last updated