Aksamith

Multi-Concept Website Template

Introduction


Aksamith is timeless multipurpose HTML template - perfect for building any type of website: business, agency, portfolio, blog, niche and more.

  • Aksamith template is build upon modern web technologies, that's why Aksamith supports only the latest, stable releases of major browsers and platforms. Please note that Aksamith doesn't support Internet Explorer anymore.
  • Images used in the demo aren’t integral part of template due to respect for copyright rules and are for demo only. Please use your own images instead.
  • Aksamith includes premium plugin with commercial developer license: Isotope by Metafizzy. It means that customers and users of my products do not need to purchase their own license — so long as they are not developing their own commercial products with Isotope.
    In this section:
  • Before you start using Aksamith.

Contents


In package downloaded from marketplace you'll find folders contain documentation info and template itself. Content of main template folder is organized roughly as below:

  • CSS folder - contains .css files.
  • Fonts folder - contains Linea Icons files used in Aksamith.
  • Images folder - is for your images. Alternatively may contains custom images, that are helpful with template customization, e.g. SVG files or logo examples.
  • Js folder - contains Javascript custom file and subfolder - there are third-party JS libraries and plugins used in the template.
  • HTML files - main template files used for building pages, that you can see on demo site.
    In this section:
  • What is in a downloaded package?

Installation


You will need to upload folders and files listed above to your web server using FTP.

Start your FTP client (e.g. FileZilla) and login to your server. You will need your server name, username, and password that you set up with the hosting company. Locate the domain folder you wish to upload your template files to your server. And then click and drag every file into your FTP client.

    In this section:
  • Uploading template files to server.

HTML and CSS Structure


Aksamith has a logical HTML structure like the example below:


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

<!-- Your Stylesheets, Favicon & Title goes here -->

</head>

<body>

<!-- SITE WRAPPER
    ============================================== -->
<div id="page" class="thn-site">


<!-- HEADER
    ============================================== -->
<header id="masthead" class="thn-site-header">

<!-- Navbar, Main Navigation Area, Logo Area goes here -->

</header>

<!-- MAIN CONTENT
    ============================================== -->
<div id="content" class="thn-site-content">

<!-- Page Content goes here -->

</div>

<!-- FOOTER
    ============================================== -->
<footer id="colophon" class="thn-site-footer">

<!-- Footer Content goes here -->

</footer>
</div>
</body>
</html>

                                            

CSS


In template files you can find some CSS classes with "thn-" prefix. This prefix is abbreviation of ThemeEnvision name. This means that classes are custom unlike e.g. CSS Bootstrap framework classes. Prefix is in use to avoid conflicts with other CSS libraries. Names of all custom classes are clear and self-explanatory

There’s a CSS file called style.css that contains all the custom styles used to design the template. Please, remember that any changes to the other CSS files, e.g. bootstrap.css directly, are strongly not recommended.

The styles.css file has a table of contents and you can easily find each section or element therein.

Customization


Favicon


You can add a favicon to your site using the following code in head section:


<!-- FAVICON
    ============================================== -->
    <link rel="icon" type="image/png" href="images/favicon.png" />

                                            

Note that you need add favicon.png to images folder first.


Depends on your needs, you can change header behaviors. The header can be transparent and overlay area underneath or can have a solid background and be above the content.

If you need transparent header just add thn-has-overlay-header class to the <body> tag:


<body class="thn-has-overlay-header">

                                            

Aksamith supports light and dark logo versions:


<div class="thn-site-branding">
    <a href="index.html">
        <img src="images/aksamith-logo.png" class="thn-logo-light" alt="Aksamith">
        <img src="images/aksamith-logo-dark.png" class="thn-logo-dark" alt="Aksamith">
    </a>
</div>

                                            

If the background is light add thn-is-light-bg class to the <body> tag and dark logo version will appear. If the background is dark add thn-is-dark-bg class then. Please note that, according to used classes, navigation item's color will be changed as well for light or dark version.


<body class="thn-is-light-bg">

OR

<body class="thn-is-dark-bg">

                                            

Lines


Vertical lines are used in Aksamith. Their function is decorative as they give the template an elegant and balanced character. If they don't fit your concept, just remove the code block that is directly below the body tag:


<div class="thn-line thn-line-vertical thn-line-left"></div>
<div class="thn-line thn-line-vertical thn-line-2left"></div>
<div class="thn-line thn-line-vertical thn-line-center"></div>
<div class="thn-line thn-line-vertical thn-line-2right"></div>
<div class="thn-line thn-line-vertical thn-line-right"></div>

                                            

Credits


Other people's works and web technologies were used in the template creation process:

Scripts/Libraries


Fonts


Icons


Images


Demo images (not included in the package).

    In this section:
  • Third-party assets.

Changelog


[Unreleased]


Version 1.0

2020-11-16


  • Initial release