First of all, thank you for purchasing the Suxnix
HTML5 Template. You can find the detailed information about the template in this document.
If there is anything you cannot find in this document, you can send an e-mail via the Profile page.
Suxnix is a Health Supplement Landing Page Template.
In download folder you will find Three folders:
Documentation
(Documentation for main template)Suxnix
(Main Template)Figma
(Figma File)margin
or padding
. Don't get panic if you messed up anything when you edit the template. We are always available to support our customer.
Follow the steps below to setup your site template:
Template
folder to find all the template files. You wil get Suxnix
folder in there. You need to upload this folder to your hosting web server using FTP or cPanel in order to use it on your website.Suxnix/assets/css
- Stylesheet filesSuxnix/assets/fonts
- Icon/fonts filesSuxnix/assets/img
- Image filesSuxnix/assets/js
- JS filesSuxnix/inc
- Contact from fileWe are used Bootstrap Latest Version v5.1.3
framework in this template.
The general template structure is the same throughout the template. Here is the general structure.
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Suxnix - Health Supplement Landing Page</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" type="image/x-icon" href="assets/img/favicon.png">
<!-- Place favicon.ico in the root directory -->
<!-- CSS here -->
<link rel="stylesheet" href="assets/css/.....">
<link rel="stylesheet" href="assets/css/.....">
<link rel="stylesheet" href="assets/css/....">
<link rel="stylesheet" href="assets/css/...">
</head>
<body>
<!-- header-area -->
<header id="home">
</header>
<!-- header-area-end -->
<!-- main-area -->
<main class="main-area fix">
<!-- All Section Here -->
</main>
<!-- main-area-end -->
<!-- Footer-area -->
<footer class="footer-area">
</footer>
<!-- Footer-area-end -->
<!-- JS here -->
<script src="assets/js/vendor/....."></script>
<script src="assets/js/...."></script>
<script src="assets/js/..."></script>
</body>
</html>
Introduce Suxnix
All Pages
====>
Home Page One====>
Home Page Two====>
Home Page Three====>
Shop Page====>
Cart Page====>
Checkout Page====>
Shop Details Page====>
Login Page====>
Register Page====>
Password Reset Page====>
Blog Standard Post====>
Blog Details Page====>
Contact PageFavicon Will be found in <head>
section.
<link rel="shortcut icon" type="image/x-icon" href="assets/img/favicon.png">
The Logo will be found in the <nav class="navbar">
tag.
<div class="logo"><a href="index.html"><img src="img/logo/logo.png" alt="logo"></a></div>
You can replace any .jpg
.png
.svg
logo. And set the width
according to your logo size.
In Suxnix
we use Poppins
font.
You can change both fonts form assets/css/style.css
file:
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Roboto:ital,wght@0,400;0,500;0,700;1,400;1,500&display=swap');
You can edit your form simply and quickly. Open mail.php
from Suxnix
folder and add your email into $recipient
field
<?php
/*
* CONFIGURE EVERYTHING HERE
*/
// an email address that will be in the From field of the email.
$from = 'Demo contact form';
// an email address that will receive the email with the output of the form
$sendTo = 'yourmail@gmail.com'; // Add Your email here
// subject of the email
$subject = 'New message from contact form';
// form field names and their translations.
// array variable name => Text to appear in the email
$fields = array('Name' => 'Name', 'email' => 'Email', 'phone' => 'Phone', 'message' => 'Message');
// message that will be displayed when everything is OK :)
$okMessage = 'Contact form successfully submitted. Thank you, I will get back to you soon!';
// If something goes wrong, we will display this message.
$errorMessage = 'There was an error while submitting the form. Please try again later';
?>
The style.css
file contains all of the specific stylings for the page. The file is separated into sections using:
This file includes core bootstrap styles
SourceThis file contains styles about Fontawesome icon library
Source
<i class="fab fa-facebook-square"></i>
This file contains styles about Popup Style
Sourceanimate.css
is a bunch of cool, fun, and cross-browser animations for you to use in projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.
<div class="wow slideInLeft">
...
</div>
This file contains styles about slick carousel plugin
SourceAll styles about template
jQuery is a fast, small, and feature-rich JavaScript library.
SourceCore bootstrap js file
SourcejQuery carousel plugin from Slick
SourceA lightweight script to animate scrolling.Reveal Animations When You Scroll.
SourceThis file contains all script about site.
dd/mm/yy
=========================== ----- (24 July 2024) ------ =========================== Added Home Three. Added Cart Page. Added Checkout Page. Added Login Page. Added Register Page. Added Password Reset Page. Fixing Some Css Issues
=========================== ----- (12 October 2022) ------ =========================== Added Home Two. Fixing Some Css Issues Change Preloader Style
=========================== ----- (22 August 2022) ------ =========================== Initial Released Suxnix.