<!DOCTYPE html>
<html lang="en">
<head>
<!-- ========== Meta Tags ========== -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Essay - Documentation">
<!-- ========== Page Title ========== -->
<title>Agrul - Organic Farm Agriculture Template</title>
<!-- ========== Favicon Icon ========== -->
<link rel="shortcut icon" href="assets/img/favicon.png" type="image/x-icon">
<!-- ========== Start Stylesheet ========== -->
<link href="assets/css/plugins.min.css" rel="stylesheet" />
<link href="style.css" rel="stylesheet">
<!-- ========== End Stylesheet ========== -->
<!-- ========== Google Fonts ========== -->
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Poppins:400,500,600,700,800" rel="stylesheet">
</head>
<body>
<!-- Header
============================================= -->
<header>
<!-- Start Navigation -->
<nav class="navbar navbar-default navbar-sidebar navbar-scrollspy bootsnav" data-minus-value-desktop="0" data-minus-value-mobile="0" data-speed="1000">
<div class="container">
<!-- Start Header Navigation -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-menu">
<i class="fa fa-bars"></i>
</button>
<!-- Start Header Navigation -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-menu">
</button>
<ul>
<li class="scroll">
<a class="navbar-brand" href="#start"><img src="assets/img/logo.png" class="logo" alt="Thumb"></a>
</li>
</ul>
</div>
<!-- End Header Navigation -->
</div>
<!-- End Header Navigation -->
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-menu">
<ul class="nav navbar-nav navbar-right" data-in="fadeInLeft">
<li class="active scroll"><a href="#start">Start</a></li>
<li class="scroll"><a href="#intro">intro</a></li>
<li class="scroll"><a href="#instalation">instalation</a></li>
<li class="scroll"><a href="#inc-files">Include Files</a></li>
<li class="scroll"><a href="#html">html structure</a></li>
<li class="scroll"><a href="#customization">Customization</a></li>
<li class="scroll"><a href="#fonts">fonts</a></li>
<li class="red scroll"><a href="#attention">Attention <i class="fa fa-hand-point-right"></i></a></li>
<li class="scroll"><a href="#credit">credit</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div>
</nav>
<!-- End Navigation -->
</header>
<!-- End Header -->
<section id="start" class="default-padding">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="item">
<div class="heading">
<h1>Agrul</h1>
<h4>Organic Farm Agriculture Template</h4>
</div>
<ul>
<li><strong>Created:</strong> 10/20/2022</li>
<li><strong>Last Update:</strong> -- -- --</li>
<li><strong>By:</strong> <a target="_blank" href="https://themeforest.net/user/validthemes/portfolio">validthemes</a></li>
<li><strong>Website:</strong> <a target="_blank" href="https://validthemes.live/">validthemes.live</a></li>
<li><strong>Email:</strong> <a href="mailto:validtheme@gmail.com">validtheme@gmail.com</a></li>
</ul>
<p>
Thank you for purchasing our template. We hope that you find all your questions regarding this Template answered in this Documentation as much in details as possible. However, if you still need support, do not hesitate to contact us at our support forum for this Template. If you have any questions that are beyond the scope of this help file, please feel free to email me. Thanks so much!
</p>
</div>
</div>
</div>
</div>
</section>
<section id="intro" class="default-padding-bottom">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="item">
<div class="heading">
<h1>Intro</h1>
<div class="alert alert-info">
<strong>Note:</strong> This is <strong>not a WordPress theme</strong>, and it wont install like a WordPress theme, <strong>this is a HTML5 template</strong> (static website).
</div>
</div>
<p>
<strong>Agrul</strong> is a Responsive quick and easy customizable Modern Multipurpose Organic Farm Agriculture Template that comes with <strong>15+</strong> valid HTML5 pages and <strong>2</strong> home page variations. <strong>Agrul</strong> offers numerous awesome features like , <strong>Organic Food, Agriculture, Farming, Livestock, Organic Agriculture, Farmer, Plant Biotechnology, Precision Farming, Tillage, Poultry, Gardening, Landscaping Services, Farming, Agricultural Industries</strong> or your just a <strong>Blog</strong> This is highly customizable – looks awesome on tablets and mobile devices. Well commented code, well-documented file structure and 24/7 professional and ultra-fast Support.
</p>
<p>
To edit this template with your info you will need a code editor, i use Sublime Text (<a href="http://www.sublimetext.com/3">http://www.sublimetext.com/3</a>) and a browser i recommend to use Google Chrome.
</p>
<p>
It is really easy to use. There is multiple home page layouts to chose, also various selection of pages that you can use to create your website, but you can also create your own page layouts very easily (just copy and paste code form the elements examples).
</p>
<p>
When you start editing the template with your info is good idea to create separate folder, copy the assets folder and 404.html page there, rename one of the index... files to index.html and then move and edit pages that you will use. Also is good practice to create separate styleseet for your edits and load it <strong>bellow</strong> AgrulCSS.
</p>
</div>
</div>
</div>
</div>
</section>
<section id="instalation" class="default-padding-bottom">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="item">
<div class="heading">
<h1>Instalation</h1>
</div>
<p>Follow the steps below to setup your site template:</p>
<ol>
<li>Unzip the downloaded package and open the /HTML folder to find all the template files. You will need to upload these files to your hosting web server using FTP in order to use it on your website.</li>
<li>Below is the folder structure and needs to be uploaded to your website root directory:
<ul>
<li><code>HTML/css</code> - Stylesheet files</li>
<li><code>HTML/fonts</code> – Icon font files</li>
<li><code>HTML/img</code> - Image files</li>
<li><code>HTML/js</code> - Javacript files</li>
</ul>
</li>
<li>You should upload all or specific HTML files as per your need.</li>
<li>You're now good to go..! Start adding your content/images and generate your beautiful brand new website for your awesome users.</li>
</ol>
</div>
</div>
</div>
</div>
</section>
<section id="inc-files" class="default-padding-bottom">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="item">
<div class="heading">
<h1>What's included</h1>
<h4>Checkout the files that you'll see upon downloading</h4>
</div>
<p>
Once you download the template, you can see a folder with several files and sub folders. You can read description of some important files in continue.
</p>
<div class="file-tree">
<ul>
<li class="is-folder open">
<span>assets</span>
<ul>
<li class="is-folder open">
<span>css</span>
<ul>
<li class="is-file"><span>bootstrap.min.css</span><i>Bootstrap Main CSS</i></li>
<li class="is-file"><span>font-awesome.min.css</span><i>Font Awesome Pro</i></li>
<li class="is-file"><span>themify-icons.css</span><i>Themify Icon</i></li>
<li class="is-file"><span>elegant-icons.css</span><i>Elegant Icon</i></li>
<li class="is-file"><span>flaticon-set.css</span><i>Flatcion</i></li>
<li class="is-file"><span>magnific-popup.css</span><i>Popup Window CSS</i></li>
<li class="is-file"><span>swiper-bundle.min.css</span><i>Swiper Bundle CSS</i></li>
<li class="is-file"><span>animate.css</span><i>Animate CSS</i></li>
<li class="is-file"><span>validnavs.css</span><i>Multipurpose Menu CSS</i></li>
<li class="is-file"><span>helper.css</span><i>Helper CSS</i></li>
<li class="is-file"><span>style.css</span><i>Theme Core CSS</i></li>
<li class="is-file"><span>unit-test.css</span><i>Blog Unit Test CSS</i></li>
<li class="is-file"><span>style.css</span><i>Custom CSS</i></li>
</ul>
</li>
<li class="is-folder"><span>fonts</span></li>
<li class="is-folder"><span>img</span><i>Here is a place to put your media files like logo, images, videos, etc.</i></li>
<li class="is-folder open">
<span>js</span>
<ul>
<li class="is-file"><span>jquery-3.6.0.min.js</span><i>Jquery Main</i></li>
<li class="is-file"><span>bootstrap.bundle.min.js</span><i>Bootstrap Min JS</i></li>
<li class="is-file"><span>jquery.appear.js</span><i>Appear JS</i></li>
<li class="is-file"><span>jquery.easing.min.js</span><i>Easing JS</i></li>
<li class="is-file"><span>jquery.magnific-popup.min.js</span><i>Popup Window Helper JS</i></li>
<li class="is-file"><span>swiper-bundle.min.js</span><i>Swiper Slider JS</i></li>
<li class="is-file"><span>wow.min.js</span><i>WOW Animation JS</i></li>
<li class="is-file"><span>progress-bar.min.js</span><i>Progressbar JS</i></li>
<li class="is-file"><span>circle-progress.js</span><i>Circle Progressbar JS</i></li>
<li class="is-file"><span>isotope.pkgd.min.js</span><i>Masonary JS</i></li>
<li class="is-file"><span>imagesloaded.pkgd.min.js</span><i>Isotop Popup JS</i></li>
<li class="is-file"><span>jquery.nice-select.min.js</span><i>Input Select Design JS</i></li>
<li class="is-file"><span>count-to.js</span><i>Count To JS</i></li>
<li class="is-file"><span>jquery.scrolla.min.js</span><i>Scrolla Animation JS</i></li>
<li class="is-file"><span>YTPlayer.min.js</span><i>Video Background JS</i></li>
<li class="is-file"><span>TweenMax.min.js</span><i>Button Animation JS</i></li>
<li class="is-file"><span>validnavs.js</span><i>Navbar JS</i></li>
<li class="is-file"><span>custom.js</span><i>Template Mian JS</i></li>
</ul>
</li>
</ul>
</li>
<li class="is-file"><span>index.html</span></li>
<li class="is-file"><span>index-2.html</span></li>
<li class="is-file"><span>...</span></li>
<li class="is-file"><span>style.css</span></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="html" class="default-padding-bottom">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="item">
<div class="heading">
<h1>HTML Structure</h1>
<h4>Check the structure of HTML files</h4>
</div>
<p>
Agrulfollows a simple and easy to customize coding structure. Here is the sample for your reference:
</p>
<pre class="line-numbers"><code class="language-markup">
<!DOCTYPE html>
<html lang="en">
<head>
<title>Agrul - Organic Farm Agriculture Template</title>
<!-- ========== Start Stylesheet ========== -->
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/css/font-awesome.min.css" rel="stylesheet">
<link href="assets/css/themify-icons.css" rel="stylesheet">
<link href="assets/css/elegant-icons.css" rel="stylesheet">
<link href="assets/css/flaticon-set.css" rel="stylesheet">
<link href="assets/css/magnific-popup.css" rel="stylesheet">
<link href="assets/css/swiper-bundle.min.css" rel="stylesheet">
<link href="assets/css/animate.csss" rel="stylesheet">
<link href="assets/css/validnavs.css" rel="stylesheet">
<link href="assets/css/helper.css" rel="stylesheet">
<link href="assets/css/style.css" rel="stylesheet">
<link href="assets/css/unit-test.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>
<body>
<!-- Start Navigation -->
<nav class="navbar navbar-default navbar-fixed white no-background bootsnav">
</nav>
<!-- End Navigation-->
<!-- Start Main
============================================= --->
<main>
</main>
<!-- END Main Content -->
<!-- Star Footer
============================================= -->
<footer>
</footer>
<!-- End Footer -->
<!-- jQuery Frameworks
============================================= -->
<script src="assets/js/jquery-3.6.0.min.js"></script>
<script src="assets/js/bootstrap.bundle.min.js"></script>
<script src="assets/js/jquery.appear.js"></script>
<script src="assets/js/jquery.easing.min.js"></script>
<script src="assets/js/jquery.magnific-popup.min.js"></script>
<script src="assets/js/modernizr.custom.13711.js"></script>
<script src="assets/js/swiper-bundle.min.js"></script>
<script src="assets/js/wow.min.js"></script>
<script src="assets/js/progress-bar.min.js"></script>
<script src="assets/js/circle-progress.js"></script>
<script src="assets/js/isotope.pkgd.min.js"></script>
<script src="assets/js/imagesloaded.pkgd.min.js"></script>
<script src="assets/js/jquery.nice-select.min.js"></script>
<script src="assets/js/count-to.js"></script>
<script src="assets/js/jquery.scrolla.min.js"></script>
<script src="assets/js/YTPlayer.min.js"></script>
<script src="assets/js/TweenMax.min.js"></script>
<script src="assets/js/validnavs.js"></script>
<script src="assets/js/custom.js"></script>
</body>
</html>
</code></pre>
</div>
</div>
</div>
</div>
</section>
<section id="customization" class="default-padding-bottom">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="item">
<div class="heading">
<h1>Customization</h1>
</div>
<h2>How to change topbar</h2>
<p>
<img src="assets/img/topbar.png" alt="Thumb">
</p>
<p>
<img src="assets/img/topbar-2.png" alt="Thumb">
</p>
<h2>How to change logo from navbar default</h2>
<p>
<img src="assets/img/change-logo.png" alt="Thumb">
</p>
<h2>How to change logo from Home Two</h2>
<p>
<img src="assets/img/change-logo-navbar-box.png" alt="Thumb">
</p>
<h2>How to change favicon</h2>
<p>
<img src="assets/img/change-favicon.png" alt="Thumb">
</p>
<h2>How to change page title</h2>
<p>
<img src="assets/img/change-title.png" alt="Thumb">
</p>
<h2>How to control preloader</h2>
<p>
<img src="assets/img/preloader.png" alt="Thumb">
</p>
<p>
<img src="assets/img/preloader-css.png" alt="Thumb">
</p>
<h2>How to add/remove header top</h2>
<p>
<img src="assets/img/header-top.png" alt="Thumb">
</p>
<h2>How to Change Breadcrumb</h2>
<p>
<img src="assets/img/change-breadcrumb.png" alt="Thumb">
</p>
<h2>How to Change Banner Text & Background</h2>
<h4>Banner One</h4>
<p>
<img src="assets/img/slider-1.png" alt="Thumb">
</p>
<h4>Banner Two</h4>
<p>
<img src="assets/img/slider-2.png" alt="Thumb">
</p>
<h2>How to change team area</h2>
<p>
<img src="assets/img/team.png" alt="Thumb">
</p>
<h2>How to change Project area</h2>
<p>
<img src="assets/img/case-studies.png" alt="Thumb">
</p>
<h2>How to Change Testimonail Item</h2>
<p>
<img src="assets/img/testimonials.png" alt="Thumb">
</p>
<h2>How to Change Blog content</h2>
<h4>01. Home Blog</h4>
<p>
<img src="assets/img/blog.png" alt="Thumb">
</p>
<h4>02. Blog Grid</h4>
<p>
<img src="assets/img/blog-grid.png" alt="Thumb">
</p>
<h4>03. Blog Standard</h4>
<p>
<img src="assets/img/blog-standard.png" alt="Thumb">
</p>
<h2>How to Change Mail Address with Your's - Open mail.php file and edit.</h2>
<p>
<img src="assets/img/contact.png" alt="Thumb">
</p>
<h2>How to change contact form email</h2>
<p>
<img src="assets/img/mail.png" alt="Thumb">
</p>
<h2>How to control Swiper slider</h2>
<p>
<img src="assets/img/change-carousel.png" alt="Thumb">
</p>
<h2>How to control Preloader</h2>
<p>
<img src="assets/img/change-preloader.png" alt="Thumb">
</p>
<h2>How to Add/Remove Footer Bottom </h2>
<p>
<img src="assets/img/footer-bottom.png" alt="Thumb">
</p>
<h2>How to Change Copyright & Footer Menu Link</h2>
<p>
<img src="assets/img/copyright.png" alt="Thumb">
</p>
<h2>How to Add/Remove CSS</h2>
<p>
<img src="assets/img/change-css.png" alt="Thumb">
</p>
<h2>How to Add/Remove JS</h2>
<p>
<img src="assets/img/change-js.png" alt="Thumb">
</p>
</div>
</div>
</div>
</div>
</section>
<section id="fonts" class="default-padding-bottom">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="item">
<div class="heading">
<h1>Changing fonts</h1>
<p>
Agruluses 2 fonts: Manrope & Handlee from the Google Fonts Library. You can change the fonts by following code
</p>
</div>
<pre class="line-numbers">
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Handlee&display=swap');
</div>
</div>
</div>
</div>
</section>
<section id="attention" class="default-padding-bottom">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="item">
<div class="heading">
<h1>attention</h1>
<h4>Read The following information Carefully</h4>
</div>
<ul class="with-circle">
<li>
Fonts used in this item are loaded from Google. If you don't have an internet connection then item fonts can be different (don't worry about it because this is not an issue)
</li>
<li>
if you think documentation is not enough to customize this item then email to <a href="mailto:validtheme@gmail.com">validtheme@gmail.com</a>
</li>
<li>
Before asking for any help you need to make sure that you are the actual buyer for this item. you have two ways to prove that<br>
<strong>1. collect a support ticket and send with your mail</strong><br>
<strong>2. Send a screenshot after login to you account So that we can understand you have access to download this item from themeforest</strong>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<section id="credit" class="default-padding-bottom">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="item">
<div class="heading">
<h1>credits</h1>
<p>
We would really love to take this opportunity to appreciate guys whose items were helpful to us to make Agrula really beautiful theme for our awesome users:
</p>
</div>
<h4>Images and video</h4>
<ul>
<li><a href="https://unsplash.com/" target="_blank">Unsplash</a></li>
<li><a href="http://nothingtochance.co/" target="_blank">NothingToChance</a></li>
<li><a href="http://gratisography.com" target="_blank">gratisography.com</a></li>
<li><a href="http://magdeleine.co" target="_blank">magdeleine.co</a></li>
<li><a href="http://picjumbo.com" target="_blank">picjumbo.com</a></li>
<li><a href="http://picography.co" target="_blank">picography.co</a></li>
</ul>
<h4>JS Libraries</h4>
<ul>
<li><a href="https://jquery.com/download/" target="_blank">jQuery</a></li>
<li><a href="https://github.com/afarkas/html5shiv" target="_blank">HTML5 Shiv</a></li>
<li><a href="http://modernizr.com/" target="_blank">Modernizr</a></li>
<li><a href="https://plugins.jquery.com/jquery.easing/" target="_blank">jQuery Easing</a></li>
<li><a href="https://github.com/kswedberg/jquery-smooth-scroll" target="_blank">Smooth Scroll</a></li>
<li><a href="https://github.com/morr/jquery.appear" target="_blank">jQuery Appear</a></li>
<li><a href="http://bootsnav.danurstrap.com/" target="_blank">Bootsnav</a></li>
<li><a href="http://mynameismatthieu.com/WOW/index.html" target="_blank">WOW</a></li>
<li><a href="https://github.com/mhuggins/jquery-countTo" target="_blank">jQuery countTo Plugin</a></li>
<li><a href="http://dimsemenov.com/plugins/magnific-popup/" target="_blank">Magnific Popup</a></li>
<li><a href="https://swiperjs.com/" target="_blank">Swiperjs</a></li>
</ul>
<h4>CSS & Fonts</h4>
<ul>
<li><a href="http://getbootstrap.com/" target="_blank">Bootstrap</a></li>
<li><a href="http://daneden.github.io/animate.css/" target="_blank">Animation</a></li>
<li><a href="http://fortawesome.github.io/Font-Awesome/" target="_blank">Font-Awesome (Font Icons)</a></li>
<li><a href="https://www.flaticon.com" target="_blank">Flaticons</a></li>
<li><a href="https://www.google.com/fonts" target="_blank">Google Fonts</a></li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- jQuery Frameworks
============================================= -->
<script src="assets/js/plugins.min.js"></script>
</body>
</html>