1193 lines
46 KiB
HTML
1193 lines
46 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
<meta name="description" content="">
|
|
<meta name="keywords" content="">
|
|
<title>Mono - Documentation</title>
|
|
<!-- Favicon -->
|
|
<link rel="shortcut icon" href="../assets/images/favicon.png">
|
|
<!-- CSS -->
|
|
<link href="assets/bootstrap/bootstrap.min.css" rel="stylesheet">
|
|
<link href="assets/prism/prism.css" rel="stylesheet">
|
|
<link href="assets/css/styles.css" rel="stylesheet">
|
|
<!-- Fonts/Icons -->
|
|
<link href="assets/css/font-awesome/css/fontawesome-all.min.css" rel="stylesheet">
|
|
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,900" rel="stylesheet">
|
|
</head>
|
|
<body>
|
|
|
|
<div class="sidebar">
|
|
<div class="sidebar-logo">
|
|
<img src="assets/images/mono.png" style="height: 20px;" alt="">
|
|
</div>
|
|
<div class="nav-wrapper">
|
|
<ul class="nav">
|
|
<li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#introduction">Introduction</a></li>
|
|
<li class="nav-item"><a class="nav-link" data-toggle="tab" href="#includedfiles">Included files</a></li>
|
|
<li class="nav-item"><a class="nav-link" data-toggle="tab" href="#htmlstructure">HTML Structure</a></li>
|
|
<li class="nav-item"><a class="nav-link" data-toggle="tab" href="#scss">SCSS</a></li>
|
|
<li class="nav-item"><a class="nav-link" data-toggle="tab" href="#theme-colors">Theme Color Schemes</a></li>
|
|
<li class="nav-item"><a class="nav-link" data-toggle="tab" href="#fonts">Fonts & Icons</a></li>
|
|
<li class="nav-item"><a class="nav-link" data-toggle="tab" href="#preloaders">Preloaders</a></li>
|
|
<li class="nav-item"><a class="nav-link" data-toggle="tab" href="#gdpr">GDPR</a></li>
|
|
<li class="nav-item"><a class="nav-link" data-toggle="tab" href="#header">Header</a></li>
|
|
<li class="nav-item"><a class="nav-link" data-toggle="tab" href="#portfolio">Portfolio</a></li>
|
|
<li class="nav-item"><a class="nav-link" data-toggle="tab" href="#sliders">Sliders</a></li>
|
|
<li class="nav-item"><a class="nav-link" data-toggle="tab" href="#pie-chart">Pie Chart</a></li>
|
|
<li class="nav-item"><a class="nav-link" data-toggle="tab" href="#maps">Maps</a></li>
|
|
<li class="nav-item"><a class="nav-link" data-toggle="tab" href="#contactform">Contact Form</a></li>
|
|
<li class="nav-item"><a class="nav-link" data-toggle="tab" href="#retina">Retina</a></li>
|
|
<li class="nav-item"><a class="nav-link" data-toggle="tab" href="#scrolltotop">Scroll To Top</a></li>
|
|
<li class="nav-item"><a class="nav-link" data-toggle="tab" href="#elements">Elements</a></li>
|
|
<li class="nav-item"><a class="nav-link" data-toggle="tab" href="#helper-classes">Helper Classes</a></li>
|
|
<li class="nav-item"><a class="nav-link" data-toggle="tab" href="#credits">Credits</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tab-content">
|
|
|
|
<div class="tab-pane fade show active" id="introduction">
|
|
<div class="title">
|
|
<h2>Introduction</h2>
|
|
</div>
|
|
<div class="content-box">
|
|
<div class="margin-bottom-20">
|
|
<p>Thank you for choosing "Mono - Multi-Purpose HTML5 Template". This documentation will help you to familiarise how the template is structured and how to use the features. If you have any questions that are beyond the scope of this help file, please feel free to email via our user page contact form <a href="https://themeforest.net/user/flatheme" target="_blank">here</a>.</p>
|
|
</div>
|
|
<div class="margin-bottom-20">
|
|
<p>If you like this template please don't forget rate it 5 :)</p>
|
|
<a href="https://themeforest.net/downloads" target="_blank">themeforest.net/downloads</a>
|
|
</div>
|
|
<ul class="list-unstyled margin-0">
|
|
<li>Author: <a href="https://themeforest.net/user/flatheme" target="_blank">FlaTheme</a></li>
|
|
<li>Contact: flatheme@gmail.com</li>
|
|
<li>Updated on: Mar 9, 2025</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="includedfiles">
|
|
<div class="title">
|
|
<h2>Included Files</h2>
|
|
</div>
|
|
<div class="content-box">
|
|
<ul class="list-folder">
|
|
<li class="folder-open"><span class="font-weight-bold">Mono v10</span> - Template files
|
|
<ul>
|
|
<li class="folder-open margin-top-10"><span class="font-weight-bold">assets</span> - All the neccessary source files of the template
|
|
<ul class="margin-top-10">
|
|
<li class="folder-open"><span class="font-weight-bold">css</span> - CSS and SCSS files
|
|
<ul class="margin-top-10">
|
|
<li><span class="font-weight-bold">scss</span> - All SCSS files</li>
|
|
<li class="folder-file-code"><span class="font-weight-bold">theme.css</span> - Output of SCSS (or Compiled SCSS)</li>
|
|
</ul>
|
|
</li>
|
|
<li><span class="font-weight-bold">images</span> - Images</li>
|
|
<li><span class="font-weight-bold">js</span> - JavaScript functions</li>
|
|
<li><span class="font-weight-bold">php</span> - PHP files</li>
|
|
<li><span class="font-weight-bold">plugins</span> - All the plugins that are used in the template</li>
|
|
</ul>
|
|
</li>
|
|
<li><span class="font-weight-bold">1. Home Pages</span> - Home Pages html files</li>
|
|
<li><span class="font-weight-bold">2. Pages</span> - Pages html files</li>
|
|
<li><span class="font-weight-bold">3. Portfolio</span> - Portfolio Pages html files</li>
|
|
<li><span class="font-weight-bold">4. Blog</span> - Blog Pages html files</li>
|
|
<li><span class="font-weight-bold">5. Features</span> - Feature Pages html files(headers, footers etc.)</li>
|
|
</ul>
|
|
</li>
|
|
<li><span class="font-weight-bold">Documentation</span> - Documentation files</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="htmlstructure">
|
|
<div class="title">
|
|
<h2>HTML Structure</h2>
|
|
</div>
|
|
<div class="content-box">
|
|
<pre class="language-html">
|
|
<code>
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
<meta name="description" content="">
|
|
<title>Mono</title>
|
|
|
|
<span class="text-primary-lighter"><!-- Favicon --></span>
|
|
<link rel="shortcut icon" href="../assets/images/favicon.png">
|
|
|
|
<span class="text-primary-lighter"><!-- CSS --></span>
|
|
<link href="../assets/plugins/bootstrap/bootstrap.min.css" rel="stylesheet">
|
|
<link href="../assets/plugins/owl-carousel/owl.carousel.min.css" rel="stylesheet">
|
|
<link href="../assets/plugins/owl-carousel/owl.theme.default.min.css" rel="stylesheet">
|
|
<link href="../assets/plugins/magnific-popup/magnific-popup.min.css" rel="stylesheet">
|
|
<link href="../assets/css/theme.css" rel="stylesheet">
|
|
<span class="text-primary-lighter"><!-- Fonts/Icons --></span>
|
|
<link href="../assets/plugins/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
|
|
<link href="../assets/plugins/font-awesome/css/all.css" rel="stylesheet">
|
|
|
|
</head>
|
|
|
|
<body data-preloader="1">
|
|
|
|
<div class="header">
|
|
<div class="container">
|
|
<div class="header-logo">
|
|
...
|
|
</div>
|
|
<div class="header-menu">
|
|
...
|
|
</div>
|
|
<div class="header-menu-extra">
|
|
...
|
|
</div>
|
|
<button class="header-toggle">
|
|
...
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<div class="container">
|
|
...
|
|
</div>
|
|
</div>
|
|
|
|
<footer>
|
|
<div class="section-sm">
|
|
<div class="container">
|
|
...
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<span class="text-primary-lighter"><!-- ***** JAVASCRIPTS ***** --></span>
|
|
<script src="../assets/plugins/jquery.min.js"></script>
|
|
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
|
|
<script src="../assets/plugins/plugins.js"></script>
|
|
<script src="../assets/js/functions.js"></script>
|
|
|
|
</body>
|
|
</html>
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="scss">
|
|
<div class="title">
|
|
<h2>SCSS</h2>
|
|
</div>
|
|
<div class="content-box">
|
|
<p>SCSS is an extension of CSS, adding nested rules, variables, mixins, selector inheritance, and more. It's translated to well-formatted, standard CSS using the command line tool or a web-framework plugin.</p>
|
|
<p>"SCSS" (for "Sassy CSS") is a superset of CSS's syntax. This means that every valid CSS stylesheet is valid SCSS as well. SCSS files use the extension <mark>.scss</mark></p>
|
|
<div class="margin-top-30">
|
|
<h5>Recommended Compiler - Scout-App</h5>
|
|
<p class="margin-top-10">We recommend you to use an application called <a href="http://scout-app.io" target="_blank">Scout-App</a> (v2.12.12) for converting SCSS to CSS. Scout-App can run in windows, linux and mac.</p>
|
|
<p class="margin-top-10"><a href="http://scout-app.io" target="_blank">Click here</a> to download the application.</p>
|
|
<p class="margin-top-10">This video demonstrates how to use Scout-App application:</p>
|
|
<div class="embed-responsive embed-responsive-16by9">
|
|
<iframe src="https://www.youtube.com/embed/6zA78zMsH9w?rel=0" allowfullscreen></iframe>
|
|
</div>
|
|
<div class="embed-responsive embed-responsive-16by9 margin-top-10">
|
|
<iframe src="https://www.youtube.com/embed/8CGKSfSxjlc?rel=0" allowfullscreen></iframe>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="theme-colors">
|
|
<div class="title">
|
|
<h2>Theme Color Schemes</h2>
|
|
</div>
|
|
<div class="content-box">
|
|
<p>There are 9 theme color scheme options available. Follow the below instructions to set it up.</p>
|
|
<ol class="margin-top-10">
|
|
<li>Include the path for 'theme-color-*' CSS file to the HTML head</li>
|
|
<li>Add 'theme-color-*' class to the HTML body</li>
|
|
</ol>
|
|
<pre class="language-html">
|
|
<code>
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
<meta name="description" content="">
|
|
<title>Mono</title>
|
|
<span class="text-primary-lighter"><!-- Favicon --></span>
|
|
<link rel="shortcut icon" href="../assets/images/favicon.png">
|
|
<span class="text-primary-lighter"><!-- CSS --></span>
|
|
<link href="../assets/plugins/bootstrap/bootstrap.min.css" rel="stylesheet">
|
|
<link href="../assets/plugins/owl-carousel/owl.carousel.min.css" rel="stylesheet">
|
|
<link href="../assets/plugins/owl-carousel/owl.theme.default.min.css" rel="stylesheet">
|
|
<link href="../assets/plugins/magnific-popup/magnific-popup.min.css" rel="stylesheet">
|
|
<link href="../assets/css/theme.css" rel="stylesheet">
|
|
<span class="text-primary-lighter"><!-- Theme Color --></span>
|
|
<link href="../assets/css/theme-colors/theme-color-blue.css" rel="stylesheet">
|
|
<span class="text-primary-lighter"><!-- Fonts/Icons --></span>
|
|
<link href="../assets/plugins/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
|
|
<link href="../assets/plugins/font-awesome/css/all.css" rel="stylesheet">
|
|
</head>
|
|
|
|
<body class="theme-color-blue preloader-theme" data-preloader="1">
|
|
|
|
...
|
|
|
|
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="fonts">
|
|
<div class="title">
|
|
<h2>Fonts & Icons</h2>
|
|
</div>
|
|
<div class="content-box">
|
|
<div class="margin-bottom-50">
|
|
<h4 class="text-center margin-bottom-30">Fonts</h4>
|
|
<p>Mono uses <a href="https://fonts.google.com/specimen/Open+Sans" target="_blank">Open Sans</a> sans-serif, <a href="https://fonts.google.com/specimen/Playfair+Display" target="_blank">Playfair Display</a> serif, <a href="https://fonts.google.com/specimen/Nunito" target="_blank">Nunito</a> sans-serif, <a href="https://fonts.google.com/specimen/Poppins" target="_blank">Poppins</a> sans-serif and, <a href="https://fonts.google.com/specimen/Outfit" target="_blank">Outfit</a> sans-serif fonts from <a href="https://fonts.google.com" target="_blank">Google Fonts Library</a>. And it's included through <mark>assets/css/scss/theme.scss</mark></p>
|
|
<p class="font-italic">theme.scss(line 12)</p>
|
|
<pre class="language-scss">
|
|
<code>
|
|
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;500;600;700;800;900&family=Open+Sans:wght@300;400;500;600;700&family=Playfair+Display:wght@400;700&family=Poppins:wght@100;200;300;400;500;600;700;800;900&family=Outfit:wght@200;300;400;500;600;700;800&display=swap');
|
|
</code>
|
|
</pre>
|
|
<div class="margin-top-10">
|
|
<p>You can use the following classes to set the font family of an element:</p>
|
|
<ul class="margin-top-10">
|
|
<li><span class="font-weight-bold">.font-family-primary</span> - Open Sans sans-serif <span class="font-italic">(Default font-family of the template)</span></li>
|
|
<li><span class="font-weight-bold">.font-family-playfair</span> - Playfair Display serif</li>
|
|
<li><span class="font-weight-bold">.font-family-poppins</span> - Poppins sans-serif</li>
|
|
<li><span class="font-weight-bold">.font-family-nunito</span> - Nunito sans-serif</li>
|
|
<li><span class="font-weight-bold">.font-family-outfit</span> - Outfit sans-serif</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h4 class="text-center margin-bottom-30">Icons</h4>
|
|
<p><a href="https://icons.getbootstrap.com" target="_blank">Bootstrap Icons</a> and, <a href="https://fontawesome.com" target="_blank">FontAwesome</a> sets are included in the template.</p>
|
|
<p>By default, icons will appear at 1em. And you can change the icon size by using classes:</p>
|
|
<ul class="margin-top-10">
|
|
<li><span class="font-weight-bold">.icon-sm</span> - sets icon size to 13px</li>
|
|
<li><span class="font-weight-bold">.icon-lg</span> - sets icon size to 20px</li>
|
|
<li><span class="font-weight-bold">.icon-xl</span> - sets icon size to 24px</li>
|
|
<li><span class="font-weight-bold">.icon-2xl</span> - sets icon size to 28px</li>
|
|
<li><span class="font-weight-bold">.icon-3xl</span> - sets icon size to 32px</li>
|
|
<li><span class="font-weight-bold">.icon-4xl</span> - sets icon size to 36px</li>
|
|
<li><span class="font-weight-bold">.icon-5xl</span> - sets icon size to 42px</li>
|
|
</ul>
|
|
<p>You should add the size class to the parent element of an icon:</p>
|
|
<pre class="language-html">
|
|
<code>
|
|
<div class="icon-lg">
|
|
<i class="bi bi-check"></i>
|
|
<i class="bi bi-check"></i>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="preloaders">
|
|
<div class="title">
|
|
<h2>Preloaders</h2>
|
|
</div>
|
|
<div class="content-box">
|
|
<p>The template has 3 different Page Preloaders with various color options. You can change the preloader style by just simply changing the value number of <mark>data-preloader</mark> in <body> tag with '1'/'2'/'3'</p>
|
|
<br>
|
|
<p><a href="https://mono.flatheme.net/features/preloaders.html" target="_blank">Click here</a> to view the live preview of page preloaders.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="gdpr">
|
|
<div class="title">
|
|
<h2>GDPR - Cookie Consent</h2>
|
|
</div>
|
|
<div class="content-box">
|
|
<h4 class="text-center margin-bottom-30">Setup</h4>
|
|
<p><span class="font-weight-bold">1.</span> Include the path of <mark>cookie-consent.js</mark> to the end of body</p>
|
|
<pre class="language-html">
|
|
<code>
|
|
<!-- ***** JAVASCRIPTS ***** -->
|
|
<script src="../assets/plugins/jquery.min.js"></script>
|
|
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
|
|
<script src="https://polyfill.io/v3/polyfill.min.js?features=IntersectionObserver"></script>
|
|
<script src="../assets/plugins/plugins.js"></script>
|
|
<script src="../assets/js/functions.js"></script>
|
|
<script src="../assets/js/cookie-consent.js"></script>
|
|
</body>
|
|
</html>
|
|
</code>
|
|
</pre>
|
|
<div class="margin-top-30">
|
|
<p><span class="font-weight-bold">2.</span> Create and add the Cookie Consent HTML:</p>
|
|
<pre class="language-html">
|
|
<code>
|
|
<!-- GDPR - Cookie Consent -->
|
|
<div id="cookie-consent" class="consent-hidden bg-dark-09 p-4 p-lg-5 text-center">
|
|
<p class="font-large">This website uses cookies & third party services</p>
|
|
<a id="accept-consent" class="button button-md button-white-2 button-rounded mt-3" href="#">Accept & Close</a>
|
|
</div>
|
|
<!-- end GDPR - Cookie Consent -->
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
<br>
|
|
<p class="text-center"><a href="https://mono.flatheme.net/features/gdpr.html" target="_blank">Click here</a> to view the live demo of cookie consent.</p>
|
|
</div>
|
|
<div class="content-box margin-top-60">
|
|
<h4 class="text-center margin-bottom-30">Cookie Expire</h4>
|
|
<p>Cookie expires in 30 days by default, you can change it by editing the below value in <mark>cookie-consent.js</mark></p>
|
|
<img src="assets/images/cookieconsent-expire.jpg" alt="">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="header">
|
|
<div class="title">
|
|
<h2>Header</h2>
|
|
</div>
|
|
<div class="content-box">
|
|
<h4 class="text-center margin-bottom-40">Sizes</h4>
|
|
<p>You can increase the size of header by adding <mark>.header-lg</mark> or <mark>.header-xl</mark> class to the <mark>.header</mark> class element.</p>
|
|
<pre class="language-html">
|
|
<code>
|
|
<div class="header <span class="font-weight-bold">header-lg</span>">
|
|
<div class="container">
|
|
<div class="header-logo">
|
|
..
|
|
</div>
|
|
<div class="header-menu">
|
|
...
|
|
</div>
|
|
<button class="header-toggle">
|
|
<span></span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
<div class="content-box margin-top-60">
|
|
<h4 class="text-center margin-bottom-40">Background Colors</h4>
|
|
<p>You can use the dark Header Menu by adding <mark>.header-color-dark <span class="font-italic">(or .header-color-black)</span></mark> class to the <mark>.header</mark> class element.</p>
|
|
<pre class="language-html">
|
|
<code>
|
|
<div class="header <span class="font-weight-bold">header-color-dark</span>">
|
|
<div class="container">
|
|
<div class="header-logo">
|
|
..
|
|
</div>
|
|
<div class="header-menu">
|
|
...
|
|
</div>
|
|
<button class="header-toggle">
|
|
<span></span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
<div class="content-box margin-top-60">
|
|
<h4 class="text-center margin-bottom-40">Sticky</h4>
|
|
<p>The position of the Header Menu can be set to static(default) or sticky. You can use them by adding <mark>.sticky</mark> or <mark>.sticky-autohide</mark> class to the <mark>.header</mark> class element.</p>
|
|
<pre class="language-html">
|
|
<code>
|
|
<div class="header <span class="font-weight-bold">sticky-autohide</span>">
|
|
<div class="container">
|
|
<div class="header-logo">
|
|
..
|
|
</div>
|
|
<div class="header-menu">
|
|
...
|
|
</div>
|
|
<button class="header-toggle">
|
|
<span></span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
<div class="content-box margin-top-60">
|
|
<h4 class="text-center margin-bottom-40">Header Menu Font 2</h4>
|
|
<p>There are 2 font style options you can use on Header Menu. Simply add <mark>.font-2</mark> class to the <mark>.header-menu</mark> class element to use the secondary font style.</p>
|
|
<pre class="language-html">
|
|
<code>
|
|
<div class="header">
|
|
<div class="container">
|
|
<div class="header-logo">
|
|
..
|
|
</div>
|
|
<div class="header-menu <span class="font-weight-bold">font-2</span>">
|
|
<ul class="nav">
|
|
..
|
|
</ul>
|
|
</div>
|
|
<button class="header-toggle">
|
|
<span></span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
<div class="content-box margin-top-60">
|
|
<h4 class="text-center margin-bottom-40">Dropdown Color</h4>
|
|
<p>You can use dark dropdown by adding <mark>.dropdown-color-dark</mark> class to the <mark>.header-menu</mark> class element.</p>
|
|
<pre class="language-html">
|
|
<code>
|
|
<div class="header">
|
|
<div class="container">
|
|
<div class="header-logo">
|
|
..
|
|
</div>
|
|
<div class="header-menu <span class="font-weight-bold">dropdown-color-dark</span>">
|
|
...
|
|
</div>
|
|
<button class="header-toggle">
|
|
<span></span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="portfolio">
|
|
<div class="title">
|
|
<h2>Portfolio</h2>
|
|
</div>
|
|
<div class="content-box">
|
|
<h4 class="text-center margin-bottom-40">Portfolio Filter</h4>
|
|
<p>Portfolio has 4 different filter styles you can choose from.</p>
|
|
<br>
|
|
<div class="margin-bottom-30">
|
|
<h6>Filter style 1(default):</h6>
|
|
<img src="assets/images/filter-style-1.jpg" alt="">
|
|
<pre class="language-html">
|
|
<code>
|
|
<div class="filter">
|
|
<ul>
|
|
<li data-filter="all">All</li>
|
|
<li data-filter=".category-1">First</li>
|
|
<li data-filter=".category-2">Second</li>
|
|
<li data-filter=".category-3">Third</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="portfolio-masonry">
|
|
...
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
<div class="margin-bottom-30">
|
|
<h6>Filter style 2:</h6>
|
|
<img src="assets/images/filter-style-2.jpg" alt="">
|
|
<pre class="language-html">
|
|
<code>
|
|
<div class="filter <span class="font-weight-bold">filter-style-2</span>">
|
|
<ul>
|
|
<li data-filter="all">All</li>
|
|
<li data-filter=".category-1">First</li>
|
|
<li data-filter=".category-2">Second</li>
|
|
<li data-filter=".category-3">Third</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="portfolio-masonry">
|
|
...
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
<div class="margin-bottom-30">
|
|
<h6>Filter style 3:</h6>
|
|
<img src="assets/images/filter-style-3.jpg" alt="">
|
|
<pre class="language-html">
|
|
<code>
|
|
<div class="filter <span class="font-weight-bold">filter-style-3</span>">
|
|
<ul>
|
|
<li data-filter="all">All</li>
|
|
<li data-filter=".category-1">First</li>
|
|
<li data-filter=".category-2">Second</li>
|
|
<li data-filter=".category-3">Third</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="portfolio-masonry">
|
|
...
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
<div>
|
|
<h6>Filter style 4:</h6>
|
|
<img src="assets/images/filter-style-4.jpg" alt="">
|
|
<pre class="language-html">
|
|
<code>
|
|
<div class="filter <span class="font-weight-bold">filter-style-4</span>">
|
|
<ul>
|
|
<li data-filter="all">All</li>
|
|
<li data-filter=".category-1">First</li>
|
|
<li data-filter=".category-2">Second</li>
|
|
<li data-filter=".category-3">Third</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="portfolio-masonry">
|
|
...
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="content-box margin-top-60">
|
|
<h4 class="text-center margin-bottom-40">Portfolio Grid</h4>
|
|
<p>Basic portfolio grid:</p>
|
|
<pre class="language-html">
|
|
<code>
|
|
<div class="row portfolio-grid g-4 hover-style-2">
|
|
|
|
<div class="col-12 col-md-6 col-lg-4 portfolio-item category-1">
|
|
...
|
|
</div>
|
|
...
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
|
|
<div class="content-box margin-top-60">
|
|
<h4 class="text-center margin-bottom-40">Portfolio Masonry</h4>
|
|
<p>Since masonry doesn't work with bootstrap grid system, we've made our custom responsive 6 column system for masonry portfolio layout. Just simply add the column class(column-1 to column-6) to <mark>.portfolio-masonry</mark> element. And use <mark>.spacing-0 (or 1/2/3/4/5/6)</mark> class for setting the space between portfolio boxes.</p>
|
|
<br>
|
|
<p>The below example will set the columns to three equal-width:</p>
|
|
<pre class="language-html">
|
|
<code>
|
|
<div class="portfolio-masonry column-3 spacing-1 hover-style-2">
|
|
|
|
<div class="portfolio-item category-1">
|
|
...
|
|
</div>
|
|
<div class="portfolio-item category-2">
|
|
...
|
|
</div>
|
|
...
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
</div><!-- end tab-pane -->
|
|
|
|
<div class="tab-pane fade" id="sliders">
|
|
<div class="title">
|
|
<h2>Sliders</h2>
|
|
</div>
|
|
<div class="content-box">
|
|
<p>Mono uses <a href="https://owlcarousel2.github.io/OwlCarousel2/" target="_blank">Owl Carousel 2</a> jQuery plugin to handle all the sliders of the template. It's fully responsive and it has large amount of options. You can change the default options via html <mark>data-owl-*</mark> attribute.</p>
|
|
<br>
|
|
<div class="margin-bottom-30">
|
|
<p>You should create a div with <mark>.owl-carousel</mark> class and the first divs inside of this class will be the boxes of the slider:</p>
|
|
<pre class="language-html">
|
|
<code>
|
|
<div class="owl-carousel">
|
|
<!-- slider box 1 -->
|
|
<div>
|
|
..
|
|
</div>
|
|
<!-- slider box 2 -->
|
|
<div>
|
|
..
|
|
</div>
|
|
...
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
<div class="margin-bottom-30">
|
|
<p>The below example shows how to create slider with 2 columns(on all screen) with navigation.</p>
|
|
<pre class="language-html">
|
|
<code>
|
|
<div class="owl-carousel" data-owl-items="2" data-owl-nav="true" data-owl-dots="false">
|
|
<!-- slider box 1 -->
|
|
<div>
|
|
..
|
|
</div>
|
|
<!-- slider box 2 -->
|
|
<div>
|
|
..
|
|
</div>
|
|
...
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
<div>
|
|
<p>The below example shows how to create responsive slider with navigation and dots. <mark>data-owl-xs, data-owl-sm, data-owl-md, data-owl-lg and data-owl-xl</mark> are for screen size and the value number is how many columns to show on that screen size.</p>
|
|
<pre class="language-html">
|
|
<code>
|
|
<div class="owl-carousel" data-owl-nav="true" data-owl-xs="1" data-owl-sm="2" data-owl-md="3" data-owl-lg="4" data-owl-xl="4">
|
|
<!-- slider box 1 -->
|
|
<div>
|
|
..
|
|
</div>
|
|
<!-- slider box 2 -->
|
|
<div>
|
|
..
|
|
</div>
|
|
...
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
<ul>
|
|
<li><span class="font-weight-bold">data-owl-xs</span> - For screen resolution above 0px+</li>
|
|
<li><span class="font-weight-bold">data-owl-sm</span> - For screen resolution above 576px+</li>
|
|
<li><span class="font-weight-bold">data-owl-md</span> - For screen resolution above 768px+</li>
|
|
<li><span class="font-weight-bold">data-owl-lg</span> - For screen resolution above 992px+</li>
|
|
<li><span class="font-weight-bold">data-owl-xl</span> - For screen resolution above 1200px+</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="content-box margin-top-60">
|
|
<h4 class="text-center margin-bottom-40">All data-attribute options</h4>
|
|
<ul>
|
|
<li><span class="font-weight-bold">data-owl-items</span> - The number of items you want to see on the screen.</li>
|
|
<li><span class="font-weight-bold">data-owl-margin</span> - margin-right(px) on item.</li>
|
|
<li><span class="font-weight-bold">data-owl-loop</span> - Infinity loop. Duplicate last and first items to get loop illusion.</li>
|
|
<li><span class="font-weight-bold">data-owl-center</span> - Center item. Works well with even an odd number of items.</li>
|
|
<li><span class="font-weight-bold">data-owl-nav</span> - Show next/prev buttons.</li>
|
|
<li><span class="font-weight-bold">data-owl-rewind</span> - Go backwards when the boundary has reached.</li>
|
|
<li><span class="font-weight-bold">data-owl-dots</span> - Show dots navigation.</li>
|
|
</ul>
|
|
<p class="text-center margin-top-40"><a href="https://mono.flatheme.net/elements/sliders.html" target="_blank">Click here</a> to see the live demos of Owl Carousel.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="pie-chart">
|
|
<div class="title">
|
|
<h2>Pie Chart</h2>
|
|
</div>
|
|
<div class="content-box">
|
|
<p>You can create a Circular Chart Bar by using <mark class="font-weight-bold">.pie-chart</mark> class element. Any number, text or icon values should be wrapped inside <mark>.pie-chart-content</mark> class element.</p>
|
|
<br>
|
|
<p>Basic Pie Chart:</p>
|
|
<pre class="language-html">
|
|
<code>
|
|
<div class="pie-chart" data-size="110" data-percent="90" data-bar-color="#141414" data-track-color="#e6e6e6" data-scale-color="rgba(0, 0, 0, 0.3)">
|
|
<div class="pie-chart-content">
|
|
<span class="percent"></span>
|
|
</div>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
|
|
<div class="content-box margin-top-60">
|
|
<h4 class="margin-bottom-40 text-center">data-attribute options</h4>
|
|
<ul class="margin-top-20">
|
|
<li><span class="font-weight-bold">data-size</span> - Size of the pie chart in px. It will always be a square.</li>
|
|
<li><span class="font-weight-bold">data-bar-color</span> - The color of the curcular bar. You can pass either a css valid color string like rgb, rgba hex or string colors.</li>
|
|
<li><span class="font-weight-bold">data-track-color</span> - The color of the track for the bar, false to disable rendering.</li>
|
|
<li><span class="font-weight-bold">data-scale-color</span> - The color of the scale lines, false to disable rendering.</li>
|
|
<li><span class="font-weight-bold">data-line-cap</span> - Defines how the ending of the bar line looks like. Possible values are: <mark>butt</mark>, <mark>round</mark> and <mark>square</mark>.</li>
|
|
<li><span class="font-weight-bold">data-line-width</span> - Width of the bar line in px.</li>
|
|
|
|
<li><span class="font-weight-bold">data-animate</span> - Time in milliseconds for a eased animation of the bar growing, or false to deactivate.</li>
|
|
</ul>
|
|
<p class="text-center margin-top-40"><a href="https://mono.flatheme.net/elements/pie-charts.html" target="_blank">Click here</a> to see the live demos of Pie Charts.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="maps">
|
|
<div class="title">
|
|
<h2>Google Maps</h2>
|
|
</div>
|
|
<div class="content-box">
|
|
<p>Mono uses <a href="https://hpneo.github.io/gmaps/" target="_blank">gmaps</a> plugin to show Google Maps. By default, the maps width is set to 100% and height is set to 0 and you can set the height of the map using classes.<br>You can use multiple maps on one page. And every single map should have different id's <span class="font-italic">(#map1, #map2 etc.)</span>.</p>
|
|
<ul class="margin-top-10">
|
|
<li><span class="font-weight-bold">gmap-xs</span> - sets height to 300px</li>
|
|
<li><span class="font-weight-bold">gmap-sm</span> - sets height to 350px</li>
|
|
<li><span class="font-weight-bold">gmap-md</span> - sets height to 400px</li>
|
|
<li><span class="font-weight-bold">gmap-lg</span> - sets height to 450px</li>
|
|
<li><span class="font-weight-bold">gmap-xl</span> - sets height to 500px</li>
|
|
</ul>
|
|
<p class="margin-top-30">Basic Map:</p>
|
|
<pre class="language-html" style="margin-bottom: 8px;">
|
|
<code>
|
|
<div id="map1" class="gmap gmap-md" data-latitude="51.513569" data-longitude="-0.123443"></div>
|
|
</code>
|
|
</pre>
|
|
<p><a href="https://www.findlatitudeandlongitude.com" target="_blank">Click here</a> to find your Latitude and Longitude.</p>
|
|
<p class="margin-top-30">In order to use Google Maps, you need to get Google API Key first. <a href="https://developers.google.com/maps/documentation/javascript/get-api-key" target="_blank">Click here</a> to get your API Key.</p>
|
|
<p>Then place your API Key in <mark>'YOUR_API_KEY'</mark> in your HTML:</p>
|
|
<pre class="language-html" class="margin-0">
|
|
<code>
|
|
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
|
|
</code>
|
|
</pre>
|
|
<p class="text-center margin-top-40"><a href="https://mono.flatheme.net/elements/maps.html" target="_blank">Click here</a> to see the live examples of Google Maps.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="contactform">
|
|
<div class="title">
|
|
<h2>Contact Form</h2>
|
|
</div>
|
|
<div class="content-box">
|
|
<p>Basic Contact form:</p>
|
|
<pre class="language-html">
|
|
<code>
|
|
<div class="contact-form">
|
|
<form method="post" id="contactform">
|
|
<div class="row gx-3 gy-0">
|
|
<div class="col-12 col-sm-6">
|
|
<input type="text" id="name" name="name" placeholder="Name" required>
|
|
</div>
|
|
<div class="col-12 col-sm-6">
|
|
<input type="email" id="email" name="email" placeholder="E-Mail" required>
|
|
</div>
|
|
</div>
|
|
<input type="text" id="subject" name="subject" placeholder="Subject" required>
|
|
<textarea name="message" id="message" placeholder="Message"></textarea>
|
|
<button class="button button-lg button-outline-dark" type="submit">Send Message</button>
|
|
</form>
|
|
<!-- Submit result -->
|
|
<div class="submit-result">
|
|
<span id="success">Thank you! Your Message has been sent.</span>
|
|
<span id="error">Something went wrong, Please try again!</span>
|
|
</div>
|
|
</div><!-- end contact-form -->
|
|
</code>
|
|
</pre>
|
|
<p>The template has ready to use AJAX/PHP contact form built in it. In order to recieve emails directly to your email address just simply replace <mark>your-email@example.com</mark> with your email address in <mark>assets/php/contact-form.php</mark> file.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="retina">
|
|
<div class="title">
|
|
<h2>Retina</h2>
|
|
</div>
|
|
<div class="content-box">
|
|
<p>retina.js checks the retina activated images on the page to see if there is a high-resolution version of that image on the server. If a high-resolution variant exists, the script will swap in that image in-place.</p>
|
|
<p>For example, if your picture is located at "/images/my-picture.jpg" and the markup for this image looks like this:</p>
|
|
<pre class="language-html">
|
|
<code>
|
|
<img src="images/picture.jpg" data-rjs="2">
|
|
</code>
|
|
</pre>
|
|
<p>retina.js will look for a corresponding image located at "/images/my-picture@2x.jpg" when it's activated. If it finds the @2x image on your server then it will load that onto your web page, effectively transforming your picture's markup to look like this:</p>
|
|
<pre class="language-html">
|
|
<code>
|
|
<img src="images/picture@2x.jpg">
|
|
</code>
|
|
</pre>
|
|
<p>Please apply <mark>data-rjs="2"</mark> to the image you want to activate the retina.js on:</p>
|
|
<pre class="language-html" class="margin-bottom-0">
|
|
<code>
|
|
<img src="images/picture.jpg" data-rjs="2">
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="scrolltotop">
|
|
<div class="title">
|
|
<h2>Scroll To Top</h2>
|
|
</div>
|
|
<div class="content-box">
|
|
<p>Scroll to Top button would appear at bottom right of the screen when you scroll down the page. And circle button styles can be applied to this button. This button should be wrapped inside <mark>.scrolltotop</mark> element.</p>
|
|
<br>
|
|
<p>Basic Scroll to Top button:</p>
|
|
<pre class="language-html">
|
|
<code>
|
|
<!-- Scroll to top button -->
|
|
<div class="scrolltotop">
|
|
<a class="button-circle button-circle-md button-circle-dark" href="#">
|
|
<i class="bi bi-arrow-up"></i>
|
|
</a>
|
|
</div>
|
|
<!-- end Scroll to top button -->
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="elements">
|
|
<div class="title">
|
|
<h2>Elements</h2>
|
|
</div>
|
|
<div class="content-box">
|
|
<p class="text-center"><a href="https://mono.flatheme.net/elements/elements-list.html" target="_blank">Click here</a> to see the full list of the web elements.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="helper-classes">
|
|
<div class="title">
|
|
<h2>Helper Classes</h2>
|
|
</div>
|
|
|
|
<div class="content-box">
|
|
<h4 class="margin-bottom-40 text-center">Border</h4>
|
|
<div class="table-responsive">
|
|
<table class="table table-striped">
|
|
<tr>
|
|
<th>HTML Class Names</th>
|
|
<th>Description</th>
|
|
</tr>
|
|
<tr>
|
|
<td>border</td>
|
|
<td>Equals to 'border: 1px solid;'</td>
|
|
</tr>
|
|
<tr>
|
|
<td>border-top</td>
|
|
<td>Equals to 'border-top: 1px solid;'</td>
|
|
</tr>
|
|
<tr>
|
|
<td>border-right</td>
|
|
<td>Equals to 'border-right: 1px solid;'</td>
|
|
</tr>
|
|
<tr>
|
|
<td>border-bottom</td>
|
|
<td>Equals to 'border-bottom: 1px solid;'</td>
|
|
</tr>
|
|
<tr>
|
|
<td>border-left</td>
|
|
<td>Equals to 'border-left: 1px solid;'</td>
|
|
</tr>
|
|
<tr>
|
|
<td>border-style-dotted</td>
|
|
<td>Equals to 'border-style: dotted;'</td>
|
|
</tr>
|
|
<tr>
|
|
<td>border-style-dashed</td>
|
|
<td>Equals to 'border-style: dashed;'</td>
|
|
</tr>
|
|
<tr>
|
|
<td>border-0</td>
|
|
<td>Equals to 'border: 0;'</td>
|
|
</tr>
|
|
<tr>
|
|
<td>border-top-0</td>
|
|
<td>Equals to 'border-top: 0;'</td>
|
|
</tr>
|
|
<tr>
|
|
<td>border-right-0</td>
|
|
<td>Equals to 'border-right: 0;'</td>
|
|
</tr>
|
|
<tr>
|
|
<td>border-bottom-0</td>
|
|
<td>Equals to 'border-bottom: 0;'</td>
|
|
</tr>
|
|
<tr>
|
|
<td>border-left-0</td>
|
|
<td>Equals to 'border-left: 0;'</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="content-box margin-top-60">
|
|
<h4 class="margin-bottom-40 text-center">Text Alignment</h4>
|
|
<div class="table-responsive">
|
|
<table class="table table-striped">
|
|
<tr>
|
|
<th>HTML Class Names</th>
|
|
<th>Description</th>
|
|
</tr>
|
|
<tr>
|
|
<td>text-start</td>
|
|
<td>Equals to 'text-align: left;'</td>
|
|
</tr>
|
|
<tr>
|
|
<td>text-center</td>
|
|
<td>Equals to 'text-align: center;'</td>
|
|
</tr>
|
|
<tr>
|
|
<td>text-end</td>
|
|
<td>Equals to 'text-align: right;'</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
<p><a href="https://getbootstrap.com/docs/5.0/utilities/text/" target="_blank">Click here</a> to get more information about bootstrap text alignment.</p>
|
|
</div>
|
|
|
|
<div class="content-box margin-top-60">
|
|
<h4 class="margin-bottom-40 text-center">Typography</h4>
|
|
<div class="table-responsive">
|
|
<table class="table table-striped">
|
|
<tr>
|
|
<th>HTML Class Names</th>
|
|
<th>Description</th>
|
|
</tr>
|
|
<tr>
|
|
<td>font-family-primary</td>
|
|
<td>Equals to 'font-family: 'Open Sans', sans-serif'</td>
|
|
</tr>
|
|
<tr>
|
|
<td>font-family-playfair</td>
|
|
<td>Equals to 'font-family: 'Playfair Display', serif'</td>
|
|
</tr>
|
|
<tr>
|
|
<td>font-family-poppins</td>
|
|
<td>Equals to 'font-family: 'Poppins', sans-serif'</td>
|
|
</tr>
|
|
<tr>
|
|
<td>font-family-nunito</td>
|
|
<td>Equals to 'font-family: 'Nunito', sans-serif'</td>
|
|
</tr>
|
|
<tr>
|
|
<td>font-family-outfit</td>
|
|
<td>Equals to 'font-family: 'Outfit', sans-serif'</td>
|
|
</tr>
|
|
<tr>
|
|
<td>font-small</td>
|
|
<td>Equals to 'font-size: 0.9em'</td>
|
|
</tr>
|
|
<tr>
|
|
<td>font-large</td>
|
|
<td>Equals to 'font-size: 1.063em'</td>
|
|
</tr>
|
|
<tr>
|
|
<td>fw-thin</td>
|
|
<td>Equals to 'font-weight: 100'</td>
|
|
</tr>
|
|
<tr>
|
|
<td>fw-lighter</td>
|
|
<td>Equals to 'font-weight: 200'</td>
|
|
</tr>
|
|
<tr>
|
|
<td>fw-light</td>
|
|
<td>Equals to 'font-weight: 300'</td>
|
|
</tr>
|
|
<tr>
|
|
<td>fw-normal</td>
|
|
<td>Equals to 'font-weight: 400'</td>
|
|
</tr>
|
|
<tr>
|
|
<td>fw-medium</td>
|
|
<td>Equals to 'font-weight: 500'</td>
|
|
</tr>
|
|
<tr>
|
|
<td>fw-semi-bold</td>
|
|
<td>Equals to 'font-weight: 600'</td>
|
|
</tr>
|
|
<tr>
|
|
<td>fw-bold</td>
|
|
<td>Equals to 'font-weight: 700'</td>
|
|
</tr>
|
|
<tr>
|
|
<td>fw-bolder</td>
|
|
<td>Equals to 'font-weight: 800'</td>
|
|
</tr>
|
|
<tr>
|
|
<td>fw-black</td>
|
|
<td>Equals to 'font-weight: 900'</td>
|
|
</tr>
|
|
<tr>
|
|
<td>letter-spacing-1</td>
|
|
<td>Equals to 'letter-spacing: 1px'</td>
|
|
</tr>
|
|
<tr>
|
|
<td>letter-spacing-2</td>
|
|
<td>Equals to 'letter-spacing: 2px'</td>
|
|
</tr>
|
|
<tr>
|
|
<td>letter-spacing-3</td>
|
|
<td>Equals to 'letter-spacing: 3px'</td>
|
|
</tr>
|
|
<tr>
|
|
<td>letter-spacing-4</td>
|
|
<td>Equals to 'letter-spacing: 4px'</td>
|
|
</tr>
|
|
<tr>
|
|
<td>line-height-100</td>
|
|
<td>Equals to 'line-height: 100%'</td>
|
|
</tr>
|
|
<tr>
|
|
<td>line-height-110</td>
|
|
<td>Equals to 'line-height: 110%'</td>
|
|
</tr>
|
|
<tr>
|
|
<td>line-height-120</td>
|
|
<td>Equals to 'line-height: 120%'</td>
|
|
</tr>
|
|
<tr>
|
|
<td>line-height-130</td>
|
|
<td>Equals to 'line-height: 130%'</td>
|
|
</tr>
|
|
<tr>
|
|
<td>line-height-140</td>
|
|
<td>Equals to 'line-height: 140%'</td>
|
|
</tr>
|
|
<tr>
|
|
<td>line-height-150</td>
|
|
<td>Equals to 'line-height: 150%'</td>
|
|
</tr>
|
|
<tr>
|
|
<td>line-height-160</td>
|
|
<td>Equals to 'line-height: 160%'</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="content-box margin-top-60">
|
|
<h4 class="margin-bottom-40 text-center">Sizing</h4>
|
|
<div class="table-responsive">
|
|
<table class="table table-striped">
|
|
<tr>
|
|
<th>HTML Class Names</th>
|
|
<th>Description</th>
|
|
</tr>
|
|
<tr>
|
|
<td>w-25</td>
|
|
<td>Equals to 'width: 25%'</td>
|
|
</tr>
|
|
<tr>
|
|
<td>w-50</td>
|
|
<td>Equals to 'width: 50%'</td>
|
|
</tr>
|
|
<tr>
|
|
<td>w-75</td>
|
|
<td>Equals to 'width: 75%'</td>
|
|
</tr>
|
|
<tr>
|
|
<td>w-100</td>
|
|
<td>Equals to 'width: 100%'</td>
|
|
</tr>
|
|
<tr>
|
|
<td>h-25</td>
|
|
<td>Equals to 'height: 25%'</td>
|
|
</tr>
|
|
<tr>
|
|
<td>h-50</td>
|
|
<td>Equals to 'height: 50%'</td>
|
|
</tr>
|
|
<tr>
|
|
<td>h-75</td>
|
|
<td>Equals to 'height: 75%'</td>
|
|
</tr>
|
|
<tr>
|
|
<td>h-100</td>
|
|
<td>Equals to 'height: 100%'</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
<p class="margin-top-10"><a href="https://getbootstrap.com/docs/5.0/utilities/sizing/" target="_blank">Click here</a> to get more information about bootstrap sizing.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="credits">
|
|
<div class="title">
|
|
<h2>Credits</h2>
|
|
</div>
|
|
<div class="content-box">
|
|
<p class="text-center margin-bottom-20">Huge thanks to all this great plugins and resources that helped to make the template great and powerful.</p>
|
|
<div class="table-responsive">
|
|
<table class="table table-bordered margin-0">
|
|
<tr>
|
|
<th>Term</th>
|
|
<th>Link</th>
|
|
</tr>
|
|
<tr>
|
|
<td>Appear Plugin</td>
|
|
<td><a href="https://github.com/morr/jquery.appear" target="_blank">https://github.com/morr/jquery.appear</a></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Easing Plugin</td>
|
|
<td><a href="http://gsgd.co.uk/sandbox/jquery/easing/" target="_blank">http://gsgd.co.uk/sandbox/jquery/easing</a></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Bootstrap</td>
|
|
<td><a href="http://getbootstrap.com" target="_blank">http://getbootstrap.com</a></td>
|
|
</tr>
|
|
<tr>
|
|
<td>FontAwesome</td>
|
|
<td><a href="http://fontawesome.io" target="_blank">http://fontawesome.io</a></td>
|
|
</tr>
|
|
<tr>
|
|
<td>ImagesLoaded</td>
|
|
<td><a href="https://imagesloaded.desandro.com" target="_blank">https://imagesloaded.desandro.com</a></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Isotope</td>
|
|
<td><a href="https://isotope.metafizzy.co" target="_blank">https://isotope.metafizzy.co</a></td>
|
|
</tr>
|
|
<tr>
|
|
<td>GMaps</td>
|
|
<td><a href="https://hpneo.github.io/gmaps" target="_blank">https://hpneo.github.io/gmaps</a></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Magnific Popup</td>
|
|
<td><a href="http://dimsemenov.com/plugins/magnific-popup/" target="_blank">http://dimsemenov.com/plugins/magnific-popup</a></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Mixitup</td>
|
|
<td><a href="https://github.com/patrickkunka/mixitup/" target="_blank">https://github.com/patrickkunka/mixitup/</a></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Owl Carousel</td>
|
|
<td><a href="https://owlcarousel2.github.io/OwlCarousel2/" target="_blank">https://owlcarousel2.github.io/OwlCarousel2</a></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Parallaxie</td>
|
|
<td><a href="https://github.com/theultrasoft/Parallaxie" target="_blank">https://github.com/theultrasoft/Parallaxie</a></td>
|
|
</tr>
|
|
<tr>
|
|
<td>ScrollCue</td>
|
|
<td><a href="https://prjct-samwest.github.io/scrollCue/" target="_blank">https://prjct-samwest.github.io/scrollCue/</a></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Swiper</td>
|
|
<td><a href="https://swiperjs.com/" target="_blank">https://swiperjs.com/</a></td>
|
|
</tr>
|
|
<tr>
|
|
<td>The Final Countdown</td>
|
|
<td><a href="http://hilios.github.io/jQuery.countdown/" target="_blank">http://hilios.github.io/jQuery.countdown</a></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Easy Pie Chart</td>
|
|
<td><a href="https://github.com/rendro/easy-pie-chart" target="_blank">https://github.com/rendro/easy-pie-chart</a></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Typer</td>
|
|
<td><a href="https://steven.codes/typerjs/" target="_blank">https://steven.codes/typerjs/</a></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Retina</td>
|
|
<td><a href="http://imulus.github.io/retinajs/" target="_blank">http://imulus.github.io/retinajs</a></td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- ***** JAVASCRIPTS ***** -->
|
|
<!-- Libraries -->
|
|
<script src="assets/js/jquery.min.js"></script>
|
|
<script src="assets/bootstrap/popper.min.js"></script>
|
|
<!-- Plugins -->
|
|
<script src="assets/bootstrap/bootstrap.min.js"></script>
|
|
<script src="assets/js/easing.min.js"></script>
|
|
<script src="assets/js/retina.min.js"></script>
|
|
<script src="assets/prism/prism.js"></script>
|
|
<!-- Scripts -->
|
|
<script src="assets/js/functions.js"></script>
|
|
</body>
|
|
</html> |