Thank you for choosing the Zenitica template. This documentation will provide you with detailed, step-by-step instructions on how to fully customize your website. Zenitica is a modern, responsive, and multipurpose template designed for IT service providers, startups, and businesses.
To get started, unzip the downloaded file and open the project in your favorite code editor. The template is built with standard HTML, CSS, and JavaScript, so you don't need any complex build tools to get started.
zenitica/
|-- css/
| |-- style.css
|-- images/
|-- js/
| |-- main.js
|-- php/
| |-- contact.php
|-- vendor/
| |-- aos/
| |-- bootstrap/
|-- about.html
|-- blog.html
|-- blog-post.html
|-- contact.html
|-- index.html
|-- portfolio.html
|-- services.html
|-- documentation.html
All the content of the website is in the .html files. You can edit these files to change the content.
To change the logo, open each HTML file (index.html, about.html, etc.) and find the following line:
<a class="navbar-brand" href="index.html">Zenitica</a>Replace "Zenitica" with your company name. If you want to use an image logo, you can replace the text with an <img> tag:
<a class="navbar-brand" href="index.html"><img src="images/your-logo.png" alt="Your Logo"></a>The navigation menu is also in each HTML file. You can add, remove, or modify the links in the <ul class="navbar-nav ms-auto"> element.
To change the main headline and description on the home page, edit the h1 and p tags within the hero-section in index.html.
Edit the about.html file to change the content of the "About Us" page. You can change the text, and the images of the team members.
Edit the services.html file to change the content of the "Services" page. You can add, remove or modify the services listed.
The footer is at the bottom of each HTML file. You can change the company information, links, and contact details there.
The template's color scheme can be customized by editing the css/style.css file.
In css/style.css, you will find a :root selector with CSS variables for the color palette:
:root {
--primary-color: #007bff;
--secondary-color: #6c757d;
--background-color: #ffffff;
--text-color: #333333;
}
You can change these hex color codes to match your brand. The template also supports a dark theme, which you can customize by editing the [data-theme="dark"] variables.
The template uses Google Fonts. You can change the fonts by updating the @import URL in css/style.css.
1. Go to Google Fonts and choose the fonts you want to use.
2. Click the "Get embed code" button and copy the @import URL.
3. Paste the new @import URL at the top of css/style.css, replacing the existing one.
4. Update the font-family properties for the body and heading elements in css/style.css to use your new fonts.
All images are in the images/ folder. It is recommended to replace them with your own images. Here are the recommended sizes for the main images:
images/hero-bg.jpg): 1920x1080 pixelsimages/about.jpg): 800x600 pixelsimages/team/): 400x400 pixelsimages/blog/): 800x600 pixelsimages/portfolio/): 800x600 pixelsThe contact form in contact.html uses a PHP script to send emails. To make it work, you need to have a web server with PHP support.
Open the php/contact.php file and find the following line:
$recipient = "your-email@example.com";Replace "your-email@example.com" with your actual email address to receive messages from the contact form.
This template was built with the help of the following open-source libraries: