Petrol – Industry & Manufacturing HTML5 Template
Petrol Are A Professional Industry and Manufacturing Services Provider Institutions. Suitable For Factory, Manufacturing, Industry and any Industrial related business field.
Introduction
- Item Name : Petrol – Industry & Manufacturing HTML5 Template
- Item Version : v 1.0
- Author : AR-Coder AR-Coder
- Support Forum : Nourramadan144@gmail.com
First of all, Thank you so much for purchasing this template and for being my loyal customer.
You are awesome!
You are entitled to get free lifetime updates to this product + exceptional support from the author directly.
This documentation is to help you regarding each step of customization. Please go through the documentation carefully to understand how this template is made and how to edit this properly. Basic HTML and CSS knowledge is required to customize this template. You may learn basics here, here and here.
Requirements
To be able to use HTML template, you must have the following:
- Make sure you upload the required assets files/folders listed below:
-
- assets/css - Extra Stylesheets Folder
- assets/images - Images Folder
- assets/js - Javacripts Folder
- assets/css/style.css - Main Stylesheet File
- index.html - Index File/Homepage
Be careful while editing the template. If not edited properly, the design layout may break completely.
No support is provided for faulty customization.
Getting Started
Petrol is Industry & Manufacturing HTML5 Template. Designed with great attention to details, flexibility and performance. It is ultra professional, smooth and sleek, with a clean modern layout. Petrol specially designed for Factory, Manufacturing, Industry, Engineering, Construction and any Industrial related business field, to deliver all needed layouts and blocks. Petrol comes with most advanced and latest web technologies, enjoyable UX and the most beautiful design trends. Our template provides a platform to simply edit elements, choose styles and play around with the look and feel of your site!!. Build beautiful, intelligent websites with over 3+ Homepage Concepts ready to go or combine, build a layout has never been easier. There is a huge range of +29 styled pages waiting for your customization, anything you can think of can be built with our template. If you are searching for innovative, modern and clean HTML5 template, you must choose Petrol. Petrol comes with necessary features and pages such as Accountant, Consultant, Consulting, Counselor. Petrol comes with necessary features for Factory and Manufacturing websites such as about pages, Testimonials, Clients, questions & answers, gallery, practice areas, attorneys & single attorney profiles, awesome blog pages and more. This HTML template can easily satisfy all of your needs.
File Structure
unzip the compressed archive to see the following structure:
Petrol/
├── Documentation/
├──
├── assets/
├── css
├── images
├── fonts
├── js
├── index(intro)
├── 02_home.html
├── ...
└── 02_contact.html
Bootstrap Grid System
we use the bootstrap framework as a framework. You can take a look at bootstrap here and see it's feature in action:
And basic layout of the grids look like:
YOUR CODES GOES HERE
Our you can use the grid system with 2 columns like this;
YOUR CODES GOES HERE
YOUR CODES GOES HERE
Our you can use the grid system with 3 columns like this;
YOUR CODES GOES HERE
YOUR CODES GOES HERE
YOUR CODES GOES HERE
If you find that you need to change structure. Scroll down in your html file and find section that you want to change , all section have predefined html comments like below section example.
CSS Structure
Heads up! I'm using several CSS files in this template. Keep in mind, that these CSS files might be overridden somewhere else in other file.
Here's a list of the stylesheet files I'm using with this template, you can find more information opening each file:
Petrol/
├── assets/
├── css
├── animate.css
├── bootstrap.min.css
├── lity.min.css
├── nice-select.css
├── owl.carousel.min.css
├── owl.theme.default.min.css
├── responsive.css
├── style.css : This is the main css file, it contains all the styles of the website.
Javascript Structure
The js (scripts) files are Loading in footer. I loaded js Librarys in the bottom because it will increase the site speed and rendering.
The JS files used in this template are:
Petrol/
├── assets/
├── js
├── bootstrap.min.js
├── jquery-3.5.1.min.js
├── jquery.counterup.min.js
├── jquery.nice-select.min.js
├── jquery.waypoints.min.js
├── lity.min.js
├── mixitup.min.js
├── owl.carousel.min.js
├── popper.min.js
├── main.js : this to active javascript function and add some coll function to your landing page.
Change Fonts
To change the font, Check head in index.html then in first go to google fonts choose a font and use the generated code and replace with next code.
Next Step : change font family for body in style.css
body {
font-family: font-family: 'Teko', sans-serif; /*Change font*/
}
h1,h2,h3,h4,h5,h6{
font-family: 'Roboto', sans-serif; /*Change font*/
}
Change Spacing
we uses helper classes to space elements on Petrol template. Helper classes are used to space elements with margin and padding. This makes it easier to create your own elements in HTML without needing extra CSS to arrange them appropriately.
.py-100{
padding: 100px 0;
}
.py-100-70{
padding: 100px 0 70px 0;
}
.p-0{
padding: 0;
}
.ml-30{
margin-left: 30px;
}
.mr-20{
margin-right: 20px;
}
.ml-20{
margin-left: 20px;
}
Change Favicon
The main favicon is located in assets/images/favicon.png replace with your own.
Change Logo
Just edit the 01_logo.png from the folder assets/images/logo/ or open index.html and you should see the tag there:
Change Icon
we use icon fonts with easy control in color and size so feel free to use more than 600 icon , you can check this icon:
- Font Awesome – https://fontawesome.com/v5.15.2/icons/
- Font Awesome – https://www.flaticon.com/
Support Desk
Please remember you have purchased a very affordable theme and you have not paid for a full-time web design agency. Occasionally we will help with small tweaks, but these requests will be put on a lower priority due to their nature. Support is also 100% optional and we provide it for your connivence, so please be patient, polite and respectful.
Please visit our profile page or ask question nourramadan144@gmail.com
Support for my items includes:- * Responding to questions or problems regarding the item and its features
- * Fixing bugs and reported issues
- * Providing updates to ensure compatibility with new software versions
- * Customization and installation services
- * Support for third party software and plug-ins
- * Make sure your question is a valid Theme Issue and not a customization request.
- * Make sure you have read through the documentation and any related video guides before asking support on how to accomplish a task.
- * Make sure to double check the theme FAQs.
- * Try disabling any active plugins to make sure there isn't a conflict with a plugin. And if there is this way you can let us know.
- * If you have customized your theme and now have an issue, back-track to make sure you didn't make a mistake. If you have made changes and can't find the issue, please provide us with your changelog.
- * Almost 80% of the time we find that the solution to people's issues can be solved with a simple "Google Search". You might want to try that before seeking support. You might be able to fix the issue yourself much quicker than we can respond to your request.
- * Make sure to state the name of the theme you are having issues with when requesting support via ThemeForest.
Files & Sources
These are the primary CSS files used for general front-end styling. Use these to customize your theme even further. All included Css codes under Petrol/assets/css/
- 1. style.css - Primary stylesheet
- 2. responsive.css - Responsive stylesheet
- 3. bootstrap.css - Bootstrap stylesheet
- 4. owl-carousel.css - OWL Carousel
- 5. fontawesome.css - FontAwesome Font Icons stylesheet
- 6. animate.css - CSS3 animations css file
- 7. lity.min.css - Lity stylesheet
- 8. nice-select.css - Nice Select stylesheet
These are the various attribution inks to the Javascript files included or modified to work with in this theme. All included JavaScript codes under Petrol/assets/js/
- 1. bootstrap.js - Bootstrap JavaScript
- 2. jquery.js - Base JavaScript
- 3. jquery.counterup.min.js - Counter Up JavaScript
- 4. jquery.nice-select.min.js - Nice Select JavaScript
- 5. jquery.waypoints.min.js - Waypoints JavaScript
- 6. lity.min.js - Lity JavaScript
- 7. mixitup.min.js - mixitup JavaScript
- 8. owl.carousel.min.js - OWL carousel JavaScript
- 9. popper.min.js - Popper JavaScript
- 10. main.js - All Code Js In Website
Version History (Changelog)
You can find the version history (changelog.txt) file on yourthemename.zip folder or you can check changelog on theme sale page.
Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Petrol Discussion" section.
Changelog
/*
::
:: Theme Name: Petrol - Industry and Manufacturing HTML5 Template
:: Email: Nourramadan144@gmail.com
:: Author URI: https://themeforest.net/user/ar-coder
:: Author: ar-coder
:: Version: 1.0
::
*/
/*
01 :: Reset Page Css
02 :: Style Page Css
01- :: Loading
02- :: Navbar
01- :: Navbar 1
02- :: Navbar 2
03- :: Search Box
04- :: Menu Box
05- :: Header
01- :: Header 1
02- :: Header 2
03- :: Header 3
06- :: Features
01- :: Features 1
02- :: Features 2
03- :: Features 3
07- :: About Us
01- :: About Us 1
02- :: About Us 2
03- :: About Us 3
04- :: About Us 4
08- :: Services
01- :: Services 1
02- :: Services 2
03- :: Services 3
09- :: Provide
10- :: Work
11- :: Contact
12- :: Team
13- :: Quote
14- :: Sponsors
15- :: Testimonial
01- :: Testimonial 1
02- :: Testimonial 2
03- :: Testimonial 3
16- :: Blog
17- :: Footer
18- :: Scroll UP
*/