# HTML Structure

This template uses its own grid system with similar logic to the [Bootstrap grid system](https://getbootstrap.com/docs/5.0/layout/grid/).

## **Basic HTML markup for template grid system**

{% code overflow="wrap" lineNumbers="true" %}
```html
<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>
```
{% endcode %}

## **Basic HTML Markup for template content**

```html
<!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>
```
