One Hat Cyber Team
Your IP :
108.162.216.17
Server IP :
188.114.96.7
Server :
Linux advantage-project 5.14.0-503.26.1.el9_5.x86_64 #1 SMP PREEMPT_DYNAMIC Wed Feb 19 16:28:19 UTC 2025 x86_64
Server Software :
Apache/2.4.62 (Rocky Linux) OpenSSL/3.2.2
PHP Version :
8.3.17
Buat File
|
Buat Folder
Eksekusi
Dir :
~
/
var
/
www
/
htmlOld
/
theme
/
documentation
/
View File Name :
index.html
<!DOCTYPE html> <html class="wide wow-animation" lang="en"> <head> <!-- Site Title--> <title>Documentation</title> <meta name="format-detection" content="telephone=no"> <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta charset="utf-8"> <!-- Stylesheets--> <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Work+Sans:300,700,800%7COswald:300,400,500"> <link rel="icon" href="images/favicon.ico" type="image/x-icon"> <link rel="stylesheet" href="css/fonts.css"> <link rel="stylesheet" href="css/bootstrap.css"> <link rel="stylesheet" href="css/style.css"> <!--[if lt IE 10]> <div style="background: #212121; padding: 10px 0; box-shadow: 3px 3px 5px 0 rgba(0,0,0,.3); clear: both; text-align:center; position: relative; z-index:1;"><a href="http://windows.microsoft.com/en-US/internet-explorer/"><img src="images/ie8-panel/warning_bar_0000_us.jpg" border="0" height="42" width="820" alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today."></a></div> <script src="js/html5shiv.min.js"></script> <![endif]--> </head> <body> <div class="preloader"> <div class="preloader-logo"><img src="images/logo-default-117x50.svg" alt="" width="117" height="50"/> </div> <div class="preloader-body"> <div id="loadingProgressG"> <div class="loadingProgressG" id="loadingProgressG_1"></div> </div> </div> </div> <!-- Page--> <div class="page"> <header class="page-header bg-gray-lighter section-xs"> <div class="shell"> <div class="range range-xs-justify range-middle"> <div class="cell-xs-4"> <div class="brand-logo"><img src="images/logo-default-117x50.svg" alt="" width="117" height="50"/> </div> </div> <div class="cell-xs-4 text-sm-right"> <h6>Documentation</h6> </div> </div> </div> </header> <section class="main-section bg-white section-lg"> <div class="shell"> <div class="range range-md-justify"> <div class="cell-sm-4 cell-md-3" style="position:relative;"> <!-- Navigation--> <!-- RD Navbar--> <div class="rd-navbar-wrap"> <nav class="rd-navbar" data-layout="rd-navbar-fixed" data-sm-layout="rd-navbar-sidebar" data-sm-device-layout="rd-navbar-sidebar" data-md-device-layout="rd-navbar-sidebar" data-md-layout="rd-navbar-sidebar" data-lg-layout="rd-navbar-sidebar" data-lg-device-layout="rd-navbar-sidebar" data-sm-auto-height="false" data-md-auto-height="false" data-lg-auto-height="false"> <!-- RD Navbar Toggle --> <button class="rd-navbar-sidebar-toggle" data-rd-navbar-toggle=".rd-navbar-sidebar-inner"><span></span></button> <div class="rd-navbar-sidebar-inner"> <div class="rd-navbar-inner"> <!-- RD Navbar Panel--> <div class="rd-navbar-panel"> <!-- RD Navbar Toggle --> <button class="rd-navbar-toggle" data-rd-navbar-toggle=".rd-navbar-nav-wrap"><span></span></button> </div> <div class="rd-navbar-aside-right"> <div class="rd-navbar-nav-wrap"> <!-- RD Navbar Nav--> <ul class="rd-navbar-nav"> <li class="active opened"><a class="heading-5" href="index.html">Preparation</a> <!-- RD Navbar Dropdown--> <ul class="rd-navbar-dropdown"> <li><a href="#template-structure">Template Structure</a></li> <li><a href="#template-customization">Template Customization</a></li> <li><a href="#source">Source</a></li> <li><a href="#customization">Customization</a></li> <li><a href="#components">Components</a></li> <li><a href="#modules">Modules</a></li> <li><a href="#credits">Credits</a></li> </ul> </li> <li><a class="heading-5" href="extensions.html">Extensions</a> <!-- RD Navbar Dropdown--> <ul class="rd-navbar-dropdown"> <li><a href="#bootstrap-accordions">Bootstrap Accordions</a></li> <li><a href="#bootstrap-tabs">Bootstrap Tabs</a></li> <li><a href="#campaign-monitor">Campaign monitor</a></li> <li><a href="#counter">Counter</a></li> <li><a href="#countdown">Countdown</a></li> <li><a href="#google-map">Google Map</a></li> <li><a href="#isotope">Isotope</a></li> <li><a href="#lightgallery">LightGallery</a></li> <li><a href="#mailchimp">Mailchimp</a></li> <li><a href="#owl-carousel">Owl Carousel</a></li> <li><a href="#progress-bar">Progress Bar</a></li> <li><a href="#rd-mailform">RD MailForm</a></li> <li><a href="#rd-navbar">RD Navbar</a></li> <li><a href="#rd-range">RD Range</a></li> <li><a href="#rd-search">RD Search</a></li> <li><a href="#slick-slider">Slick Slider</a></li> <li><a href="#swiper-slider">Swiper Slider</a></li> </ul> </li> </ul> </div> </div> </div> </div> </nav> </div> </div> <div class="cell-sm-8"> <!-- Content--> <div class="main-section-inner"> <div class="main-section-item" id="preparation" data-type="anchor"> <div class="main-title"> <h2><span class="fa fa-info-circle text-primary"></span> Preparation </h2> <p class="text-primary">Before you proceed with HTML Multipurpose Template installation, you need to prepare. It is recommended to follow steps, listed below:</p> <h4>Software</h4> <p>We recommend that you download all the required software to edit Website Template. Software Required is listed at template preview page.</p> <p>Technical requirements might differ depending on exact template, therefore we will list the most basic ones:</p> <ul class="list-marked"> <li>First, you'll need proper unzipping software for password-protected sources_grand_vector.zip package extracting. You may use WinZip 9+ (Windows) and Stuff it Expander 10+ (Mac). This is a mandatory software.</li> <li>You might also require Adobe Photoshop (v. CS3 or higher). It is used for source .PSD files editing and is needful in case of graphic design changes performing or template images editing.</li> <li>You should also use code editor, i. e. Sublime Text, Notepad++, Atom, etc. for template files source code editing.</li> <li>For files uploading to server FTP manager will be also required, like FileManager at your hosting control panel or desktop applications, such as Total Commander, FileZilla, CuteFTP, etc.</li> </ul> <h4>Hosting</h4> <p>You can just run index.html file directly from your site folder, but it won't let you explore all template functionality. You should upload template to hosting server in order to display a fully working website correctly.</p> <p>In case you have existing server already, please check if it meets Website Template requirements, listed at template preview page. For most templates PHP 5.2+ version is the only requirement.</p> <p>You may also install Website Template to your computer locally by using localhost. In order to set up local server you may use WAMP, AppServ, MAMP or any similar software. All of them are installed same as regular application.</p> <p>Feel free to check the following tutorials on how to set up local server:</p> <ul class="list-marked"> <li><a href="http://info.template-help.com/help/how-to-install-appserv-web-development-environment.html">How to install AppServ web development environment</a></li> <li><a href="http://info.template-help.com/help/how-to-install-wamp-web-development-environment.html">How to install WAMP web development environment</a></li> <li><a href="http://info.template-help.com/help/how-to-install-xamp-web-development-environment.html">How to install XAMP web development environment</a></li> </ul> </div> </div> <div class="main-section-item" id="template-structure" data-type="anchor"> <div class="main-title"> <h2> <span class="fa fa-check-circle text-orange"></span> Template structure </h2> <p class="text-orange">This section includes information on complete template and its separate files structure.</p> </div> <div class="box"> <div class="box-title"> <h4>Package structure</h4> </div> <div class="box-content"> <p>After HTML Website Template package extracting you'll see the following files structure:</p> <ul class="list list-md"> <li><span class="fa fa-folder"></span> <b>Documentation</b> – includes template's documentation files (on template editing and setup). </li> <li><span class="fa fa-folder"></span> <b>Screenshots</b> – includes template's sceenshots. Not to be used at live site. </li> <li><span class="fa fa-folder"></span> <b>dev</b> – contains all files in their initial form (an abbreviation of 'development') <ul> <li><span class="fa fa-folder"></span> <b>components</b> - the folder with components <ul> <li><span class="fa fa-folder"></span> - the folder name matches the component name and includes the source files (any number of such folders is allowed) <ul> <li><span class="fa fa-file-o"></span> *.pug </li> <li><span class="fa fa-file-o"></span> *.scss </li> <li><span class="fa fa-file-o"></span> *.css </li> <li><span class="fa fa-file-o"></span> *.js </li> <li><span class="fa fa-file-o"></span> *.min.js </li> <li><span class="fa fa-file-o"></span> *.php </li> </ul> </li> </ul> </li> <li><span class="fa fa-file-o"></span> *.html - template pages </li> </ul> </li> <li><span class="fa fa-folder"></span> <b>dist</b> – contains the optimized files to be sent to a server (abbreviation of 'distribution') <ul> <li><span class="fa fa-folder"></span> <b>components</b> – the folder with components <ul> <li><span class="fa fa-folder"></span> - the folder name matches the component name and includes the source files (any number of such folders is allowed but there can't be any *.pug and *.scss files) <ul> <li><span class="fa fa-file-o"></span> *.css </li> <li><span class="fa fa-file-o"></span> *.min.js </li> <li><span class="fa fa-file-o"></span> *.php </li> </ul> </li> <li><span class="fa fa-file-o"></span> *.html - template pages </li> </ul> </li> </ul> </li> <li><span class="fa fa-file-o"></span> package.json – file containing all necessary information about the project </li> <li><span class="fa fa-file-o"></span> gulpfile.js – file for generating Gulp tasks </li> <li><span class="fa fa-file-o"></span> config.js – file with parameters for executable Gulp tasks </li> <li><span class="fa fa-file-o"></span> info.txt – includes information on a password-protected "sources" folder. </li> </ul> </div> </div> <div class="box"> <div class="box-title"> <h4>HTML Structure</h4> <p>HTML Website Template .html pages structure is built on the following principle:</p> </div> <div class="box-content"> <pre class="prettyprint linenums"><!DOCTYPE html> <html lang="en"> <head> <!-- Your Stylesheets, Core Scripts (jQuery etc) & Title --> ... </head> <body> <!-- Page --> <div class="page"> <!-- Header --> <header class="page-header"> ... </header> <!-- Page Content --> <section> <div class="container"> ... </div> </section> <section> <div class="container"> ... </div> </section> <!-- Page Footer --> <footer class="page-footer"> <div class="container"> ... </div> </footer> </div> <!-- Java script --> <script src="js/core.min.js"></script> <script src="js/script.js"></script> </body> </html> </pre> </div> </div> <div class="box"> <div class="box-title"> <h4>CSS Structure</h4> </div> <div class="box-content"> <p>All HTML Website Templates styles are located in <b>style.css</b> file.</p> <p> Code is commented according to <a href="//cssdoc.net">CSSDoc</a> standard. </p> <p>Structure of <b>style.css</b> file is built on the following principle:</p> <ul class="list-marked"> <li>Bootstrap Framework <br>...</li> <li>Bootstrap Toolkit Styles<br>...</li> <li>Bootstrap Toolkit Plugins Styles<br>...</li> </ul> </div> </div> </div> <div class="main-section-item" id="template-customization" data-type="anchor"> <div class="main-title"> <h2><span class="fa fa-play-circle text-green"></span> Template customization </h2> </div> <div class="box"> <div class="box-title"> <h4>Template items animation on page scroll</h4> </div> <div class="box-content"> <p> HTML Website Templates use <b>Wow.js</b> extension and <b>Animate.css</b> css library for the implementation of scroll animation. In order to enable scroll animation for entire page elements you should add <b>.wow-animation</b> class to html tag. </p><code><html lang="en" class="wow-animation"></code> <p> You should also specify appropriate animation class for target item. Click <b><a href="//daneden.github.io/animate.css/">here</a></b> to check the list of available classes and live examples. </p> </div> </div> </div> <div class="main-section-item" id="source" data-type="anchor"> <div class="main-title"> <h2><span class="fa fa-folder text-brown"></span> Source(css) </h2> </div> <div class="box"> <div class="box-title"> <h4>Colors</h4> </div> <div class="box-content"> <p>You can find the default theme colors in their visual display and the HTML color codes below. Design colors will help you to see the complete color scheme of your template and use it for the elements you might need to add.</p> <p>Please mind that the block below includes the default color scheme of the template you purchased. If you change the design and choose a different color palette for your website - feel free to use it accordingly.</p> </div> </div> <div class="box"> <div class="box-title"> <h4>Default theme colors</h4> </div> <div class="box-content"> <div class="colorScheme"> <ul class="list list_mark"> <li> <div class="color bg_1">#ffffff</div> </li> <li> <div class="color bg_2">#000</div> </li> <li> <div class="color bg_3">#d7d7d7</div> </li> <li> <div class="color bg_4">#3cc3c1</div> </li> <li> <div class="color bg_5">#f9e954</div> </li> <li> <div class="color bg_6">#c4a273</div> </li> <li> <div class="color bg_7">#151515</div> </li> <li> <div class="color bg_8">#777777</div> </li> </ul> </div> </div> </div> <div class="box"> <div class="box-title"> <h4>Photos</h4> <p>The images used on the demo site are for demonstration purposes only and are not included in the download files. You can pick the appropriate illustration on stock websites like the one mentioned below.</p> <div class="box-description">Unsplash – <b><a href="https://unsplash.com/">https://unsplash.com/</a></b> </div> </div> </div> <div class="box"> <div class="box-title"> <h4>Fonts and Icons</h4> </div> <div class="box-content"> <p>For your convenience, we have listed the ultimate list o fonts and the font and icon toolkit used in this template`s design. You can find the import URLs in the box below. This will be useful if you would like to include some extra text in the template and follow the initial design typography. Usually, we use web safe Google web fonts and include them via embedding. Thus we can make sure that your website fonts will be displayed correctly on different devices with any browsers/operating systems used.</p> <p>All icon fonts that you need can be downloaded and connected to your website in a separate file fonts.css</p> <ul class="list-marked"> <li>Poppins</li> <li>Lato</li> <li>Kalam</li> <li>Font Awesome</li> <li>Material Design</li> </ul> <div class="box-description"><span class="label box-description-label">Code example</span> <xmp><!--Google Fonts--> <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Poppins:300,400,500,600,700%7CLato%7CKalam:300,400,700"> <!-- Font Awesome --> <!-- Material Design --> <link rel="stylesheet" href="css/fonts.css"> </xmp> </div> </div> </div> <div class="box"> <div class="box-title"> <h4>Source File (CSS)</h4> </div> <div class="box-content"> <p>The HTML template you have purchased includes a CSS source file (style sheets) which is aimed at improving its appearance on the web. It has a clean code and you can change it as far as you need to customize the overall look of your website. It helps to expand the horizons, add effects, and improve the HTML presentation.</p> <p>Using the CSS source file you can customize the backgrounds, font styles, and sizes, change color schemes, blend and include the style information from different sources. If you want a little extra - you can also add custom CSS tweaks to your website using special CSS plugins. All the abovementioned features and plugins are combined within a single file for easier use.</p> <div class="box-description"><span class="label box-description-label">Code example</span> <xmp><!-- Bootstrap --> <link rel="stylesheet" href="css/bootstrap.css "> <!-- Main Styles --> <link rel="stylesheet" href="css/style.css"> </xmp> </div> </div> </div> <div class="box"> <div class="box-title"> <h4>Source File (JS)</h4> </div> <div class="box-content"> <p>Below you can find the information related to the plugins used for the default version of this theme. Thus, you can add revealing animation tied to the scroll action with a WOW.js plugin. jQuery Validation Plugin is also used. It offers a whole set of advanced customization options for the template`s forms. One more useful feature is the Google Maps JavaScript API, which is also included. Thanks to it you can easily display your location on any of the website pages.</p> <div class="box-description"><span class="label box-description-label">Code example</span> <xmp><!-- Core --> <script src="js/core.min.js"></script> <!-- Scrip --> <script src="js/script.js"></script> </xmp> </div> </div> </div> </div> <div class="main-section-item" id="customization" data-type="anchor"> <div class="main-title"> <h2><span class="fa fa-cubes text-primary"></span> Customization </h2> </div> <div class="box"> <div class="box-title"> <h4>How to Change logo image</h4> </div> <div class="box-content"> <p>One of the major components of the brand identity is its logo. Here you can find the screenshot which shows how to add/change your logo image in the HEADER section of the template.</p><a class="gallery-item" data-lightgallery="item" href="images/change_logo.jpg"><img src="images/change_logo.jpg" alt=""/></a> </div> </div> <div class="box"> <div class="box-title"> <h4>How to Change Copyright</h4> </div> <div class="box-content"> <p>One more important component if the copyright information which is usually put in the lower part of your website FOOTER. Look at the image below to see how to add or update the copyright information.</p><a class="gallery-item" data-lightgallery="item" href="images/change_copy.jpg"><img src="images/change_copy.jpg" alt=""/></a> </div> </div> <div class="box"> <div class="box-title"> <h4>How to change Menu item text and Link</h4> </div> <div class="box-content"> <p>One more important component if the copyright information which is usually put in the lower part of your website FOOTER. Look at the image below to see how to add or update the copyright information.</p><a class="gallery-item" data-lightgallery="item" href="images/change_menu.jpg"><img src="images/change_menu.jpg" alt=""/></a> </div> </div> </div> <div class="main-section-item"> <div class="box"> <div class="box-title"> <h2>Contact us</h2> </div> <div class="box-content"> <p>We hope that the documentation was useful and you will manage to launch a successful online project with the help of this template. If you have any queries, or if there is anything else we could help you with - contact us by pressing the button below.</p><a class="button" href="https://themeforest.net/user/exclthemes" target="_blank">Contact us</a> </div> </div> </div> <div class="main-section-item" id="components" data-type="anchor"> <div class="main-title"> <h2><span class="fa fa-cogs text-orange"></span> Components </h2> </div> <div class="box"> <div class="box-content"> <p>All of standard components are listed on the <b><a href="//getbootstrap.com/docs/4.0/components/">official Bootstrap framework page</a></b> </p> </div> </div> </div> <div class="main-section-item" id="modules" data-type="anchor"> <div class="main-title"> <h2><span class="fa fa-wrench text-violet"></span> Modules </h2> </div> <div class="box"> <div class="box-title"> <h4>Grid System</h4> </div> <div class="box-content"> <p>HTML Website Templates include <b><a href="://getbootstrap.com/docs/4.0/layout/grid/">Bootstrap Grid system</a></b> </p> </div> </div> </div> <div class="main-section-item" id="credits" data-type="anchor"> <h2><span class="fa fa-question-circle"></span> Credits </h2> <p>HTML Website Templates use some external <b>JS</b>, <b>PHP</b>, <b>CSS</b> etc. software solutions, listed below. All of materials used are distributed for free and as an open source (MIT, CC, GPL).</p> <h4>CSS & Fonts</h4> <ul class="list-marked"> <li><a href="http://fortawesome.github.io/Font-Awesome/">Font Awesome</a></li> <li><a href="http://www.flaticon.com/">Flaticon</a></li> <li><a href="https://www.google.com/fonts">Google Fonts</a></li> <li><a href="http://daneden.github.io/animate.css/">Animate.css</a></li> </ul> <p>Modified font icon packages:</p> <ul class="list-marked"> <li><a href="https://www.google.com/design/icons/">Material Icons by <a href="https://www.google.com">Google</a> (<a href="http://creativecommons.org/licenses/by/3.0/">CC4.0 License</a>)</a></li> <li><a href="http://www.flaticon.com/packs/linecons">Linecons by <a href="http://www.flaticon.com/authors/designmodo">Designmodo</a> (<a href="http://creativecommons.org/licenses/by/3.0/">CC3.0 License</a>)</a></li> </ul> <h4>jQuery & Java Script</h4> <ul class="list-marked"> <li><a href="https://jquery.com/">jQuery</a></li> <li><a href="https://github.com/jquery/jquery-migrate/">jQuery Migrate</a></li> <li><a href="http://malsup.com/jquery/form/">jQuery Form</a></li> <li><a href="http://mattvarone.com/web-design/uitotop-jquery-plugin/">jQuery UIToTop</a></li> <li><a href="https://github.com/carhartl/jquery-cookie">jQuery Cookie</a></li> <li><a href="https://github.com/matthewhudson/device.js?">Device</a></li> <li><a href="http://mynameismatthieu.com/WOW/">Wow</a></li> <li><a href="http://www.idangero.us/swiper/#.VmdgBPmLTIU">Swiper Slider</a></li> <li><a href="http://www.owlcarousel.owlgraphic.com/">Owl Carousel 2</a></li> <li><a href="http://kenwheeler.github.io/slick/">Slick Carousel</a></li> <li><a href="http://sachinchoolur.github.io/lightGallery/docs/">Lightgallery</a></li> <li><a href="http://git.wimbarelds.nl/TimeCircles/">TimeCircles</a></li> <li><a href="http://keith-wood.name/countdown.html">Countdown</a></li> <li><a href="https://github.com/mhuggins/jquery-countTo">Count To</a></li> <li><a href="http://isotope.metafizzy.co/">Isotope</a></li> <li><a href="https://github.com/afarkas/html5shiv">Html5shiv</a></li> <li><a href="http://kimmobrunfeldt.github.io/progressbar.js/">Progress Bar</a></li> <li><a href="https://github.com/select2/select2">Select2</a></li> <li><a href="http://materializecss.com/parallax-demo.html">Materianize Parallax</a></li> <li><a href="https://github.com/vivin/regula">Regula</a></li> <li><a href="https://github.com/FormstoneClassic/Stepper">Stepper</a></li> <li><a href="https://github.com/githiro/drawDoughnutChart">drawDoughnutChart</a></li> <li><a href="http://keith-wood.name/countdown.html">jQuery Countdown</a></li> <li><a href="https://d3js.org/">Data-Driven Documents</a></li> <li><a href="http://c3js.org/">C3.js - D3-based reusable chart library</a></li> <li><a href="https://github.com/webmandesign/jquery.hoverdir">jQuery HoverDir plugin</a></li> </ul> <h4>PHP</h4> <ul class="list-marked"> <li><a href="https://github.com/PHPMailer/PHPMailer/">PHPMailer</a></li> </ul> </div> </div> </div> </div> </div> </section> <!-- Page Footer--> <footer class="section footer-classic context-dark"> <div class="shell text-right"> <!-- Rights--> <p class="rights"><span>© </span><span class="copyright-year"></span><span> </span><span>Myhome</span></p> </div> </footer> </div> <!-- Global Mailform Output--> <div class="snackbars" id="form-output-global"></div> <!-- Javascript--> <script src="js/core.min.js"></script> <script src="js/script.js"></script> </body> </html>