Multi-Concept Website Template
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.
- Before you start using Aksamith.
In this section:
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.
- HTML files - main template files used for building pages, that you can see on demo site.
- What is in a downloaded package?
In this section:
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.
- Uploading template files to server.
In this section:
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>
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.
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:
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">
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>
Other people's works and web technologies were used in the template creation process:
Demo images (not included in the package).
- Third-party assets.
In this section:
- Initial release
- Version 1.0