HTML Templates Documentation

Thank you so much for purchasing our item from TemplateMonster.

HTML Structure

HTML Website Template .html pages structure is built on the following principle:

<!DOCTYPE html>
<html lang="en">
<head>

<!-- Your Title, Description, Stylesheets -->

</head>
<body>

  <main class="main"> 

    <div class="main-inner">

      <!-- Begin mobile main menu -->
      <div class="mob-main-mnu">
        ......
      </div><!-- End mobile main menu --> 
      
      <!-- Begin header -->
      <header class="header">
        ......
      </header><!-- End header --> 
      
      <!-- Begin section -->
      <div class="section">
        ......
      </div><!-- section --> 

    </div>

    <!-- Begin footer -->
    <footer class="footer">
      ......
    </footer><!-- End footer --> 
    
  </main>

<!-- JavaScript -->
</body>
</html>

Template customization


Configuring the color scheme and typography

Full color and typography control.


:root {
  --font-family: "Source Sans Pro";
  --font-size: 16px;
  --font-weight: 400;
  --font-style: normal;
  --line-height: 1.625;
  --heading-font-family: "Montserrat";
  --heading-font-size: 2.5rem;
  --heading-line-height: 1.3;
  --heading-font-weight: 700;
  --accent-color: #186ADC;
  --el-gradient-start: #1859B4;
  --el-gradient-end: #0467F1;
  --background-color: #ffffff;
  --background-secondary-color: #F0F4F8;
  --text-primary: #303036;
  --text-secondary: #63636b;
  --border-color: #D4D4E1;
  --placeholder-color: #6F6F76;
  --error-color: #ff3d0d;
  --el-border-radius: 10px;
  --el-border-radius-min: 6px;
  --el-box-shadow: 2px 4px 20px 1px rgba(45, 45, 45, 0.13);
  --header-box-shadow: 0px 0px 14px 0px rgba(77, 82, 94, 0.15);
}

Content

Documentation and examples for displaying typography, code, table and more..

Typography

Documentation and examples for typography, headings, body text, lists, and more.

Headings

Heading Example
<h1></h1>

H1 Heading
<h2></h2>

H2 Heading
<h3></h3>

H3 Heading
<h4></h4>

H4 Heading
<h5></h5>
H5 Heading
<h6></h6>
H6 Heading

Inline Text elements

You can use the mark tag to highlight text.

This line of text is meant to be treated as deleted text.

This line of text is meant to be treated as no longer accurate.

This line of text is meant to be treated as an addition to the document.

This line of text will render as underlined

This line of text is meant to be treated as fine print.

This line rendered as bold text.

This line rendered as italicized text.

<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>

Code

Documentation and examples for displaying inline and multiline blocks of code

Inline code

Wrap inline snippets of code with <code>. Be sure to escape HTML angle brackets.

For example, <section> should be wrapped as inline.

For example, <code>&lt;section&gt;</code> should be wrapped as inline.

Table

Documentation and examples for opt-in styling of tables.

Default

<table>
   .......
</table>

Secondary

<table class="table-secondary">
   .......
</table>

Bordered

<table class="table-bordered">
   .......
</table>

Components

Setting up components is very easy.

Accordion

You can extend the default collapse behavior to create an accordion. To properly achieve the accordion style, be sure to use .accordion as a wrapper.

<div class="accordion">
  <ul class="accordion-list">
    <li class="accordion-item section-bgc">
      <div class="accordion-trigger">
        Accordion Title
      </div>
      <div class="accordion-content content">
        <p>This is Accordion Content</p>
      </div>
    </li>
    <li class="accordion-item section-bgc">
      <div class="accordion-trigger">
        Accordion Title
      </div>
      <div class="accordion-content content">
        <p>This is Accordion Content</p>
      </div>
    </li>
    <li class="accordion-item section-bgc">
      <div class="accordion-trigger">
        Accordion Title
      </div>
      <div class="accordion-content content">
        <p>This is Accordion Content</p>
      </div>
    </li>
  </ul>
</div>

Tabs

Default component combined with Docs for unique tabs.

<div class="tabs">
  <ul class="tabs-nav">
    <li class="active">Home</li>
    <li>Profile</li>
    <li>Contact</li>
  </ul>
  <div class="tabs-container">
    <div class="tabs-item content active">This is Tab Content Home</div>
    <div class="tabs-item content">This is Tab Content Profile</div>
    <div class="tabs-item content">This is Tab Content Contact</div>
  </div>
</div>

Options:

Type Class Features Code Example
.tabs-vertical Vertical Tab 
<div class="tabs tabs-vertical">
  .......
</div>

Icons

Material Icons icon sets are used.

<i class="material-icons md-24">chat</i>
<i class="material-icons material-icons-outlined md-24">chat</i>

Available icon sizes: md-18, md-20, md-22, md-24, md-26, md-28, md-32, md-40, md-48, md-60, md-72

NotePlease go to their official documentation pages for a full list of icons: Material Icons

Source & Credits

Images:

Fonts:

Scripts: