12970 lines
759 KiB
HTML
12970 lines
759 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
|
||
<title>Crafto – The Multipurpose HTML5 Template</title>
|
||
<meta charset="utf-8">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
||
<meta name="author" content="ThemeZaa">
|
||
|
||
<meta name="description" content="Elevate your online presence with Crafto - a modern, versatile, multipurpose Bootstrap 5 responsive HTML5, SCSS template using highly creative 48+ ready demos.">
|
||
|
||
<link rel="shortcut icon" href="images/favicon.png">
|
||
|
||
<link rel="stylesheet" href="css/bootstrap.min.css">
|
||
|
||
<link rel="stylesheet" href="css/font-awesome.min.css" />
|
||
|
||
<link rel="stylesheet" href="css/et-line-icons.css" />
|
||
|
||
<link rel="stylesheet" href="css/themify-icons.css" />
|
||
|
||
<link rel="stylesheet" href="css/feather.css" />
|
||
|
||
<link rel="stylesheet" href="css/jquery.mCustomScrollbar.css" />
|
||
|
||
<link rel="stylesheet" href="css/style.css">
|
||
</head>
|
||
<body>
|
||
|
||
<header role="banner">
|
||
<div id="masthead">
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-md-12 text-center">
|
||
<a href="../index.php" target="_blank"><img src="images/logo.png" alt="Crafto" /></a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
|
||
<div class="container-fluid no-padding">
|
||
<div class="row no-margin">
|
||
<div class="col-md-12">
|
||
<div class="docs-navigation no-padding-left" id="leftCol">
|
||
<ul class="nav nav-stacked" id="sidebar">
|
||
<li class="active"><a class="sec-link" href="index.html#start">Getting Started</a>
|
||
<ul>
|
||
<li><a href="index.html#start-installation" class="inner-link">Installation</a></li>
|
||
<li><a href="index.html#start-scss" class="inner-link">SCSS & Gulp.js</a></li>
|
||
<li><a href="index.html#start-niche-demos" class="inner-link">Niche Demos</a></li>
|
||
<li><a href="index.html#start-html-structure" class="inner-link">HTML Structure</a></li>
|
||
<li><a href="index.html#start-logo-settings" class="inner-link">Logo Settings</a></li>
|
||
<li><a href="index.html#start-image-settings" class="inner-link">Image Settings</a></li>
|
||
<li><a href="index.html#start-color-schemes" class="inner-link">Color Schemes</a></li>
|
||
<li><a href="index.html#start-changing-fonts" class="inner-link">Changing Fonts</a></li>
|
||
<li><a href="index.html#start-theme-customization" class="inner-link">Theme Customization</a></li>
|
||
<li><a href="index.html#start-javascript" class="inner-link">Javascript</a></li>
|
||
<li><a href="index.html#start-https-compatibility" class="inner-link">HTTPs Compatibility</a></li>
|
||
<li><a href="index.html#start-optimization-tips" class="inner-link">Website Optimization Tips</a></li>
|
||
</ul>
|
||
</li>
|
||
<li><a class="sec-link" href="index.html#header">Header</a>
|
||
<ul>
|
||
<li><a href="index.html#header-header-styles" class="inner-link">Header Styles</a></li>
|
||
<li><a href="index.html#header-mega-menus" class="inner-link">Mega Menu</a></li>
|
||
<li><a href="index.html#header-mega-menus-with-image" class="inner-link">Mega Menu with Image</a></li>
|
||
<li><a href="index.html#header-sub-menu" class="inner-link">Simple Dropdown Menu</a></li>
|
||
<li><a href="index.html#header-mobile-menu" class="inner-link">Mobile Menu</a></li>
|
||
<li><a href="index.html#header-setting" class="inner-link">Settings</a></li>
|
||
</ul>
|
||
</li>
|
||
<li><a class="sec-link" href="index.html#page-elements">Page Elements</a>
|
||
<ul>
|
||
<li><a href="index.html#page-elements-page-titles" class="inner-link">Page Titles</a></li>
|
||
<li><a href="index.html#page-elements-page-layout" class="inner-link">Page Layout</a></li>
|
||
<li><a href="index.html#page-elements-columns-grid" class="inner-link">Columns & Grid</a></li>
|
||
<li><a href="index.html#page-elements-page-loaders" class="inner-link">Page Loaders</a></li>
|
||
<li><a href="index.html#page-elements-cookie-notify" class="inner-link">Cookie Notify</a></li>
|
||
<li><a href="index.html#page-elements-scroll-to-top" class="inner-link">Scroll To Top</a></li>
|
||
<li><a href="index.html#page-elements-sticky-footer" class="inner-link">Sticky Footer</a></li>
|
||
<li><a href="index.html#page-elements-custom-cursors" class="inner-link">Custom Cursors</a></li>
|
||
<li><a href="index.html#page-elements-helper-classes" class="inner-link">Helper Classes</a></li>
|
||
</ul>
|
||
</li>
|
||
<li><a class="sec-link" href="index.html#slider">Slider</a>
|
||
<ul>
|
||
<li><a href="index.html#slider-slider-types-options" class="inner-link">Slider Types & Options</a></li>
|
||
<li><a href="index.html#slider-helper-classes" class="inner-link">Helper Classes</a></li>
|
||
</ul>
|
||
</li>
|
||
<li><a class="sec-link" href="index.html#elements">Elements and Shortcodes</a>
|
||
<ul>
|
||
<li><a href="index.html#elements-3d-parallax-hover" class="inner-link">3d Parallax Hover</a></li>
|
||
<li><a href="index.html#elements-accordion" class="inner-link">Accordion</a></li>
|
||
<li><a href="index.html#elements-adaptive-background" class="inner-link">Adaptive Background</a></li>
|
||
<li><a href="index.html#elements-alert-box" class="inner-link">Alert Box</a></li>
|
||
<li><a href="index.html#elements-animated-particles" class="inner-link">Animated Particles</a></li>
|
||
<li><a href="index.html#elements-animation" class="inner-link">Animation</a></li>
|
||
<li><a href="index.html#elements-banner" class="inner-link">Banner</a></li>
|
||
<li><a href="index.html#elements-blockquote" class="inner-link">Blockquote</a></li>
|
||
<li><a href="index.html#elements-button" class="inner-link">Button</a></li>
|
||
<li><a href="index.html#elements-call-to-action" class="inner-link">Call To Action</a></li>
|
||
<li><a href="index.html#elements-carousel" class="inner-link">Carousel</a></li>
|
||
<li><a href="index.html#elements-client" class="inner-link">Client</a></li>
|
||
<li><a href="index.html#elements-column" class="inner-link">Column</a></li>
|
||
<li><a href="index.html#element-content-carousel" class="inner-link">Content Carousel</a></li>
|
||
<li><a href="index.html#elements-countdown" class="inner-link">Countdown</a></li>
|
||
<li><a href="index.html#elements-counter" class="inner-link">Counter</a></li>
|
||
<li><a href="index.html#elements-divider" class="inner-link">Divider</a></li>
|
||
<li><a href="index.html#elements-dropcaps" class="inner-link">Dropcaps</a></li>
|
||
<li><a href="index.html#elements-event" class="inner-link">Event</a></li>
|
||
<li><a href="index.html#elements-fancy-heading" class="inner-link">Fancy Heading</a></li>
|
||
<li><a href="index.html#elements-fancy-images" class="inner-link">Fancy Images</a></li>
|
||
<li><a href="index.html#elements-fancy-text-box" class="inner-link">Fancy Text Box</a></li>
|
||
<li><a href="index.html#elements-google-map" class="inner-link">Google Map</a></li>
|
||
<li><a href="index.html#elements-heading" class="inner-link">Heading</a></li>
|
||
<li><a href="index.html#elements-highlight" class="inner-link">Highlight</a></li>
|
||
<li><a href="index.html#elements-horizontal-list-item" class="inner-link">Horizontal List Item</a></li>
|
||
<li><a href="index.html#elements-icon-with-text" class="inner-link">Icon With Text</a></li>
|
||
<li><a href="index.html#elements-image-gallery" class="inner-link">Image Gallery</a></li>
|
||
<li><a href="index.html#elements-instagram" class="inner-link">Instagram</a></li>
|
||
<li><a href="index.html#elements-interactive-banner" class="inner-link">Interactive Banner</a></li>
|
||
<li><a href="index.html#elements-lightbox-and-modal" class="inner-link">Lightbox & Modal</a></li>
|
||
<li><a href="index.html#elements-list" class="inner-link">List</a></li>
|
||
<li><a href="index.html#elements-marquee" class="inner-link">Marquee</a></li>
|
||
<li><a href="index.html#element-media" class="inner-link">Media</a></li>
|
||
<li><a href="index.html#elements-parallax-scrolling" class="inner-link">Parallax Scrolling</a></li>
|
||
<li><a href="index.html#elements-pricing-table" class="inner-link">Pricing Table</a></li>
|
||
<li><a href="index.html#elements-process-step" class="inner-link">Process Step</a></li>
|
||
<li><a href="index.html#elements-progress-bar" class="inner-link">Progress Bar</a></li>
|
||
<li><a href="index.html#elements-review" class="inner-link">Review</a></li>
|
||
<li><a href="index.html#elements-rotate-box" class="inner-link">Rotate Box</a></li>
|
||
<li><a href="index.html#elements-scrolling-effects" class="inner-link">Scrolling Effects</a></li>
|
||
<li><a href="index.html#elements-services-box" class="inner-link">Services Box</a></li>
|
||
<li><a href="index.html#element-shape-divider" class="inner-link">Shape Divider</a></li>
|
||
<li><a href="index.html#element-sliding-box" class="inner-link">Sliding Box</a></li>
|
||
<li><a href="index.html#elements-social-icon" class="inner-link">Social Icon</a></li>
|
||
<li><a href="index.html#elements-sticky-column" class="inner-link">Sticky Column</a></li>
|
||
<li><a href="index.html#elements-tab" class="inner-link">Tab</a></li>
|
||
<li><a href="index.html#elements-team" class="inner-link">Team</a></li>
|
||
<li><a href="index.html#elements-testimonial" class="inner-link">Testimonial</a></li>
|
||
<li><a href="index.html#element-tilt-effect" class="inner-link">Tilt Effect</a></li>
|
||
</ul>
|
||
</li>
|
||
<li><a class="sec-link" href="index.html#portfolio">Portfolio</a>
|
||
<ul>
|
||
<li><a href="index.html#portfolio-setup" class="inner-link">Portfolio Setup</a></li>
|
||
<li><a href="index.html#portfolio-layout" class="inner-link">Portfolio Layout</a></li>
|
||
<li><a href="index.html#portfolio-item-link" class="inner-link">Portfolio Item Link</a></li>
|
||
<li><a href="index.html#portfolio-single-page" class="inner-link">Portfolio Single Page</a></li>
|
||
</ul>
|
||
</li>
|
||
<li><a class="sec-link" href="index.html#blog">Blog</a>
|
||
<ul>
|
||
<li><a href="index.html#blog-setup" class="inner-link">Blog Setup</a></li>
|
||
<li><a href="index.html#blog-layout" class="inner-link">Blog Layout</a></li>
|
||
<li><a href="index.html#blog-post-types" class="inner-link">Blog Post Types</a></li>
|
||
<li><a href="index.html#blog-single-page" class="inner-link">Blog Single Page</a></li>
|
||
</ul>
|
||
</li>
|
||
<li><a class="sec-link" href="index.html#forms">Forms</a>
|
||
<ul>
|
||
<li><a href="index.html#forms-contact" class="inner-link">Contact</a></li>
|
||
<li><a href="index.html#forms-subscribe" class="inner-link">Subscribe</a></li>
|
||
</ul>
|
||
</li>
|
||
<li><a class="sec-link" href="index.html#faqs">FAQs</a></li>
|
||
<li><a class="sec-link" href="index.html#credits">Credits</a></li>
|
||
<li><a class="sec-link" href="index.html#changelog">Changelog</a>
|
||
<ul>
|
||
<li><a href="index.html#changelog-ver2-0" class="inner-link">Version 2.0</a></li>
|
||
<li><a href="index.html#changelog-ver1-0" class="inner-link">Version 1.0</a></li>
|
||
</ul>
|
||
</li>
|
||
<li><a class="sec-link" href="index.html#other-templates">Other Templates</a></li>
|
||
</ul>
|
||
<span class="copyright">© 2024. <a href="http://www.themezaa.com" target="_blank">ThemeZaa</a></span>
|
||
</div>
|
||
<div class="docs-content" id="mainCol">
|
||
|
||
<section id="start">
|
||
<div class="container-fluid">
|
||
|
||
<div class="row">
|
||
<div class="col-md-12 docs-content-inner" id="start-installation">
|
||
<h1>Installation</h1>
|
||
<p>Follow the below steps to get started with Crafto:</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 and sub folders to your hosting web server using FTP or file manager in order to use it on your website.</li>
|
||
<li>Below is the folder/files structure and needs to be uploaded to your website root directory:
|
||
<ul>
|
||
<li><code>html/css</code> - Main stylesheet files</li>
|
||
<li><code>html/demos</code> - Niche demos related styles</li>
|
||
<li><code>html/email-templates</code> - Contact and subscription form PHP files</li>
|
||
<li><code>html/fonts</code> - Icon font files</li>
|
||
<li><code>html/images</code> - Classic images folder (use only images you need the reset can be safely deleted)</li>
|
||
<li><code>html/js</code> - Javascripts folder (Functions, jquery, vendors etc)</li>
|
||
<li><code>html/revolution</code> - Revolution slider library files</li>
|
||
<li><code>html/sass</code> - Master stylesheet SASS files</li>
|
||
<li><code>html/video</code> - Video files</li>
|
||
<li><code>html/*.html</code> - All the templates</li>
|
||
</ul>
|
||
</li>
|
||
<li>Install a Localhost server on your PC/Laptop. We recommend using Node/Gulp.js for really streamlining your workflow with Crafto and use the instructions here to get started: <a href="index.html#start-scss" class="inner-link">SCSS & Gulp.js</a></li>
|
||
<li>Edit the files using a text based editor like VS Code (recommended) or Sublime text.</li>
|
||
<li>Finalize the upload package and optionally you can run <a href="index.html#start-scss" class="inner-link">Gulp Tasks</a> to minify your files.</li>
|
||
<li>Upload your files to your servers in the <code>public_html</code> folder (Apache) or <code>/var/www/html</code> Folder (Nginx).</li>
|
||
</ol>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="row">
|
||
<div class="col-md-12 docs-content-inner" id="start-scss">
|
||
<h1>SCSS & Gulp.js</h1>
|
||
<p>Combining SCSS and Gulp can make your website-building process much smoother. SCSS helps you create neat and flexible styles, while Gulp takes care of repetitive tasks, saving you time and effort. This dynamic duo not only makes your stylesheets easier to manage but also ensures a consistent and scalable development workflow.</p>
|
||
<h2>Using SCSS</h2>
|
||
<p>In SCSS, the main key file is <code>sass/style.scss</code>. If you are looking for SCSS Component then you can find it in the <code>sass/</code> folder. </p>
|
||
<h2>Using Gulp.js</h2>
|
||
<p>Before diving into Gulp.js, check if your system already has NodeJS, NPM, and Gulp ready to install.</p>
|
||
<p>Once you've got those installed, open your terminal (we suggest using VS Code), navigate to your project folder using the <code>cd /to/project/folder</code> command, and then hit <code>npm install</code>. This will grab all the dependencies listed in your <code>package.json</code>.</p>
|
||
<p>Now, you're all set to use some Gulp commands, including:</p>
|
||
<ul>
|
||
<li><code>gulp</code> This will compile the <code>sass/style.scss</code> to <code>css/style.min.css</code> and run BrowserSync.</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="row">
|
||
<div class="col-md-12 docs-content-inner" id="start-niche-demos">
|
||
<h1>Using Niche Demos</h1>
|
||
<p>Building websites is a breeze with Crafto, and it gets even simpler with niche demos. These demos are ready-made templates for various types of websites. They need just a little setup and save time, running smoothly on the basic <code>style.css</code> and <code>css/js</code> files. To check out the main pages for these demos, head to the <code>Download Package/html</code> folder. You'll find them with names like <code>demo-{niche}.html</code> template.</p>
|
||
<p>For setting up the Niche Demos, you'll want these Folders/Files:</p>
|
||
<ul>
|
||
<li><code>css/</code>Folder</li>
|
||
<li><code>images/</code> Folder (Feel free to remove any pictures in this folder that you <strong>don't</strong> want, but make sure not to get rid of the whole <strong>images/</strong> folder.)</li>
|
||
<li><code>email-templates/</code> Contact and subscription form PHP files</li>
|
||
<li><code>fonts/</code> Icon font files</li>
|
||
<li><code>revolution/</code> (But, if the Niche Demos don't use the Revolution slider, feel free to remove the revolution/ folder.)</li>
|
||
<li><code>js/</code> Folder</li>
|
||
<li><code>demos/niche/</code> Folder</li>
|
||
<li><code>demo-{niche}.html</code> Niche demo home and inner pages HTML files</li>
|
||
</ul>
|
||
<p></p>
|
||
<p>Just pick and choose the files you need and delete the rest. Also, just rename the <strong>demo-{niche}.html</strong> file to <strong>index.html</strong>. It becomes your default homepage. That's it! Now you can tweak the files to match your website's style.</p>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="row">
|
||
<div class="col-md-12 docs-content-inner" id="start-html-structure">
|
||
<h1>HTML Structure</h1>
|
||
<p>Crafto template is based on Bootstrap Framework <a href="https://getbootstrap.com/" target="_blank">(http://getbootstrap.com/)</a> Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.</p>
|
||
<p>Below is sample coding structure:</p>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<!doctype html>
|
||
<html class="no-js" lang="en">
|
||
<head>
|
||
<title>Crafto - The Multipurpose HTML5 Template</title>
|
||
<meta charset="utf-8">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||
<meta name="author" content="ThemeZaa">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
||
<meta name="description" content="Elevate your online presence with Crafto - a modern, versatile, multipurpose Bootstrap 5 responsive HTML5, SCSS template using highly creative 48+ ready demos.">
|
||
<span class="comment"><!-- favicon icon --></span>
|
||
<link rel="shortcut icon" href="images/favicon.png">
|
||
<link rel="apple-touch-icon" href="images/apple-touch-icon-57x57.png">
|
||
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
|
||
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
|
||
<span class="comment"><!-- google fonts preconnect --></span>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<span class="comment"><!-- style sheets and font icons --></span>
|
||
<link rel="stylesheet" href="css/vendors.min.css"/>
|
||
<link rel="stylesheet" href="css/icon.min.css"/>
|
||
<link rel="stylesheet" href="css/style.min.css"/>
|
||
<link rel="stylesheet" href="css/responsive.min.css"/>
|
||
<link rel="stylesheet" href="demos/demo-name/demo-name.css"/>
|
||
</head>
|
||
<body>
|
||
<span class="comment"><!-- start header --></span>
|
||
<header>
|
||
<span class="comment"><!-- start navigation --></span>
|
||
<nav class="navbar navbar-expand-lg header-transparent bg-transparent header-reverse" data-header-hover="light">
|
||
...
|
||
</nav>
|
||
<span class="comment"><!-- end navigation --></span>
|
||
</header>
|
||
<span class="comment"><!-- end header --></span>
|
||
<span class="comment"><!-- start section --></span>
|
||
<section>
|
||
<div class="container">
|
||
....
|
||
</div>
|
||
</section>
|
||
<span class="comment"><!-- end section --></span>
|
||
<span class="comment"><!-- start footer --></span>
|
||
<footer>
|
||
<div class="container">
|
||
....
|
||
</div>
|
||
</footer>
|
||
<span class="comment"><!-- end footer --></span>
|
||
<span class="comment"><!-- javascript libraries --></span>
|
||
<script type="text/javascript" src="js/jquery.js"></script>
|
||
<script type="text/javascript" src="js/vendors.min.js"></script>
|
||
<script type="text/javascript" src="js/main.js"></script>
|
||
</body>
|
||
</html>
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="row">
|
||
<div class="col-md-12 docs-content-inner" id="start-logo-settings">
|
||
<h1>Logo Settings</h1>
|
||
<p>The logo container is in the <code><nav></code> tag inside the <code><header></code>.</p>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<span class="comment"><!-- start logo --></span>
|
||
<div class="col-auto me-auto ps-lg-0">
|
||
<a class="navbar-brand" href="#">
|
||
<img src="images/logo-black.png" data-at2x="images/<a href="../cdn-cgi/l/email-protection.html" class="__cf_email__" data-cfemail="abc7c4ccc486c9c7cac8c0eb99d385dbc5cc">[email protected]</a>" alt="" class="default-logo">
|
||
<img src="images/logo-black.png" data-at2x="images/<a href="../cdn-cgi/l/email-protection.html" class="__cf_email__" data-cfemail="93fffcf4fcbef1fff2f0f8d3a1ebbde3fdf4">[email protected]</a>" alt="" class="alt-logo">
|
||
<img src="images/logo-black.png" data-at2x="images/<a href="../cdn-cgi/l/email-protection.html" class="__cf_email__" data-cfemail="4a26252d256728262b29210a7832643a242d">[email protected]</a>" alt="" class="mobile-logo">
|
||
</a>
|
||
</div>
|
||
<span class="comment"><!-- end logo --></span>
|
||
</pre>
|
||
</div>
|
||
<p><span class="label label-danger">Note</span> Three logo images are in play here: default logo (Seen at top of the page), alternate logo (display on sticky header), and mobile logo. Use <code>.default-logo</code> to set the default image, <code>.alt-logo</code> for the alternate, and <code>.mobile-logo</code> for the mobile version.</p>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="row">
|
||
<div class="col-md-12 docs-content-inner" id="start-image-settings">
|
||
<h1>Image Settings</h1>
|
||
<p>Crafto download package does not contain actual images which are there in our online demo due to licensing limitation and this is already mentioned in item description also as per Envato policy. We are using placeholder images instead of real images. You can replace placeholder image URL with your image URL like <code>images/yourimage.jpg</code> and make sure to put the image in /images/ folder.</p>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<img src="https://placehold.it/750x500" alt="image alt text">
|
||
Change to
|
||
<img src="images/yourimage.jpg" alt="image alt text">
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="row">
|
||
<div class="col-md-12 docs-content-inner" id="start-color-schemes">
|
||
<h1>Color Schemes</h1>
|
||
<p>It's easy to change the colours on your website. Simply use this short code to add your colour scheme to the <code>demos/niche/niche.css</code> file:</p>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
:root {
|
||
--base-color: #2946f3;
|
||
--dark-gray: #232323;
|
||
--very-light-gray: #eceff1;
|
||
}
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="row">
|
||
<div class="col-md-12 docs-content-inner" id="start-changing-fonts">
|
||
<h1>Changing Fonts</h1>
|
||
<p>Crafto uses 2 fonts: Plus Jakarta Sans & Inter from the <a href="https://www.google.com/fonts" target="_blank">Google Fonts Library</a>. You can change the fonts from <code>demos/niche/niche.css</code> file in below lines. If you want to use self hosted fonts other than Google fonts then here is an article of <a href="https://css-tricks.com/snippets/css/using-font-face/" target="_blank">self hosted fonts</a> to review. In this case you need to remove below lines and change font names in <code>demos/niche/niche.css</code> file as per your fonts used.</p>
|
||
<pre>
|
||
:root {
|
||
--alt-font: "Plus Jakarta Sans", sans-serif;
|
||
--primary-font: "Inter", sans-serif;
|
||
}
|
||
</pre>
|
||
<h2>Using Google Fonts</h2>
|
||
<p>If you wish to add or change your website fonts. You simply need to set your fonts in the <code>demos/niche/niche.css</code> file using the following code:</p>
|
||
<pre>
|
||
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap");
|
||
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700;800;900&display=swap");
|
||
</pre>
|
||
<h2>Using Self-Hosted Fonts</h2>
|
||
<p>If you plan to use a self-hosted fonts, use the following code possibly at the top of the <code>demos/niche/niche.css</code> file:</p>
|
||
<pre>
|
||
@font-face {
|
||
font-family: 'MyWebFont';
|
||
src: url('webfont.woff2') format('woff2'),
|
||
url('webfont.woff') format('woff');
|
||
}
|
||
</pre>
|
||
<p><span class="label label-danger">Note</span>For demo, You can please check this in <strong><a href="../demo-accounting.html" target="_blank">demo-accounting.html</a></strong> page.</p>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="row">
|
||
<div class="col-md-12 docs-content-inner" id="start-theme-customization">
|
||
<h1>Theme Customization</h1>
|
||
<p>We have included a demo CSS file inside the <code>demos</code> folder, as well as another folder <code>niche</code> called <code>niche.css</code>, so you can better manage your customizations while updating Crafto to the latest version. To add any custom CSS Codes, just add them to the <code>demos/niche/niche.css</code> file.</p>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<head>
|
||
<link rel="stylesheet" href="demos/niche/niche.css" type="text/css" />
|
||
</head>
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="row">
|
||
<div class="col-md-12 docs-content-inner" id="start-javascript">
|
||
<h1>JavaScript</h1>
|
||
<p>Crafto comes with lots of helpful JavaScript plugins to make your website more user-friendly. These plugins add useful features for your website visitors. We built the JavaScript (JS) on a strong foundation using Object functions, making it sturdy and efficient.</p>
|
||
<p class="py-0">You can locate the JS plugin files in the <code>js/</code> folder.</p>
|
||
<pre>
|
||
<script type="text/javascript" src="js/main.js"></script>
|
||
</pre>
|
||
<p><span class="label label-danger">Note</span>Make sure that JS Files are always loaded at the bottom of the Page as in the Default HTML Files.</p>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="row">
|
||
<div class="col-md-12 docs-content-inner" id="start-https-compatibility">
|
||
<h1>HTTPs Compatibility</h1>
|
||
<p>As the internet faces more spam, phishing, and attacks, it's crucial to keep your website secure. Crafto is designed to be a ready-to-go solution for your website, and it's equipped to handle HTTPS without any extra effort from you. All you need to do is install the HTTPS certificates, and your web hosting providers can assist you with that.</p>
|
||
<p class="py-0">Also, make sure that any links for JS, CSS, images, or PHP, whether hosted externally or using an absolute URL, begin with <code>https://</code> to ensure a secure connection. This way, the information passed through your website stays safe, and private data is not at risk.</p>
|
||
<h3 class="pt-0 pb-0">Correct Example:</h3>
|
||
<pre>
|
||
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
|
||
</pre>
|
||
<h3 class="pt-0 pb-0">Wrong Example:</h3>
|
||
<pre>
|
||
<link href="http://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="row">
|
||
<div class="col-md-12 docs-content-inner" id="start-optimization-tips">
|
||
<h1>Website Optimization Tips</h1>
|
||
<p class="mb-0">Nowadays fast & optimized website is a must, so we would like to present some optimization tips below that can optimize your overall website speed:</p>
|
||
<h2>Enable gZIP Compression</h2>
|
||
<p>To decrease the size of data that is being transferred between your server and your visitors, you can enable the gZIP compression for your images, CSS, and JavaScript files. By doing this, the web server will compress (like creating a ZIP file for example) this content before it's transferred over the Internet to your browser. On the other side, your browser decompresses the content before rendering it. This significantly lowers the size of information that's being transferred lowering the loading times of your pages.</p>
|
||
<p>The easiest way to enable the gZIP compression for your images, CSS, and JS files is to add these lines to your <code>.htaccess</code> file in the root HTML folder:</p>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<span class="comment"><!-- ENABLE GZIP COMPRESSION --></span>
|
||
AddOutputFilterByType DEFLATE text/plain
|
||
AddOutputFilterByType DEFLATE text/html
|
||
AddOutputFilterByType DEFLATE text/xml
|
||
AddOutputFilterByType DEFLATE text/css
|
||
AddOutputFilterByType DEFLATE application/xml
|
||
AddOutputFilterByType DEFLATE application/xhtml+xml
|
||
AddOutputFilterByType DEFLATE application/rss+xml
|
||
AddOutputFilterByType DEFLATE application/javascript
|
||
AddOutputFilterByType DEFLATE application/x-javascript
|
||
<span class="comment"><!-- ENABLE GZIP COMPRESSION --></span>
|
||
</pre>
|
||
</div>
|
||
<h2>Content Delivery Network</h2>
|
||
<p class="mb-0">You can use a CDN to further speed up your website. You can use the CDN to deliver static files of your website like CSS, JS, Images & Font files. There are many CDN hosting providers available in the market but we would recommend <a href="https://www.stackpath.com/maxcdn/" target="_blank">MaxCDN</a> or <a href="https://www.cloudflare.com/en-in/" target="_blank">CloudFlare</a>.</p>
|
||
<h2>Fast Web Hosting Servers</h2>
|
||
<p class="mb-0">Website speed depends on your Web Hosting Servers also, so it is recommended that you choose a Hosting Company/Server that provides a reliable & fast hosting service. You can refer to some recommended hosting Services here: <a href="https://themeforest.net/wordpress-hosting" target="_blank">http://themeforest.net/get_hosting</a></p>
|
||
<h2>Disable ETags</h2>
|
||
<p>Compared to the potential hassles that can be encountered when implementing the rule above, the application of this rule is very easy. You just need to add the following to your <strong>.htaccess file: FileETags none</strong></p>
|
||
<p class="mb-0">Note that this rule applies to sites that are on a server farm. If you're using a shared host, you could skip this step, but we recommend that you do it regardless.</p>
|
||
<h2>Optimize Your Images</h2>
|
||
<p class="mb-0">Many times, we put many pictures on our websites without trying to make them smaller and better. Just remember, if the picture is big, it takes longer to download. This makes your website slow and not good for users. If your website doesn't load in 3-5 seconds, customers might leave, and this can hurt your sales. So, it's crucial to make your pictures smaller and better before putting them on your website. Below are a few suggestions that could be useful when it comes to enhancing the optimization of images:</p>
|
||
<ul>
|
||
<li><strong>Resize your Images:</strong> Resize your images before putting them on your website. Don't use a big image in a small space—adjust the size to fit correctly.</li>
|
||
<li><strong>Image Formats:</strong> Pick the right file type for your images. Use <strong>JPEG</strong> for plain backgrounds, <strong>PNG</strong> for transparent backgrounds, and <strong>GIF</strong> for animated images on the web.</li>
|
||
<li><strong>Compressing Images:</strong> Compression is essential to reduce image size without sacrificing quality. There are many free tools to help with image optimization.<br>
|
||
<strong>For MAC</strong>, you can use <a href="https://imageoptim.com/" target="_blank">ImageOptim</a><br>
|
||
<strong>For Windows</strong>, consider using <a href="http://luci.criosweb.ro/riot/" target="_blank">Riot</a> for compressing JPEG Images and <a href="http://pnggauntlet.com/" target="_blank">PNG Gauntlet</a> for PNG Images.
|
||
</li>
|
||
</ul>
|
||
<h2>Leverage Browser Caching</h2>
|
||
<p class="mb-0">Leveraging browser caching means that you can specify for how long your visitors' browsers should cache your images, CSS, JS, and Flash files. However, if any of those resources are set, your server will notify the visitor's browser and the cached content will be replaced with the new one. You can add the lines below to your .htaccess file in order to enable this technique.</p>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<span class="comment"><!-- LEVERAGE BROWSER CACHING --></span>
|
||
ExpiresActive On
|
||
ExpiresByType image/jpg "access 1 year"
|
||
ExpiresByType image/jpeg "access 1 year"
|
||
ExpiresByType image/gif "access 1 year"
|
||
ExpiresByType image/png "access 1 year"
|
||
ExpiresByType text/css "access 1 month"
|
||
ExpiresByType application/pdf "access 1 month"
|
||
ExpiresByType application/x-javascript "access 1 month"
|
||
ExpiresByType application/javascript "access 1 month"
|
||
ExpiresByType application/x-shockwave-flash "access 1 month"
|
||
ExpiresByType image/x-icon "access 1 year"
|
||
ExpiresDefault "access 2 days"
|
||
<span class="comment"><!-- LEVERAGE BROWSER CACHING --></span>
|
||
</pre>
|
||
</div>
|
||
<h2>CSS & JS Minification</h2>
|
||
<p>It is recommended to minify the code of your <code>CSS</code> and <code>JS</code> files to reduce the file size and hence improve the loading speed of these files in the browser. There are many tools available online to minify <strong>CSS & JS Files</strong>. We can recommend below tools for the same but you can use any other tools if you wish.<br>
|
||
<a href="http://cssminifier.com/" target="_blank">CSS Minifier</a><br>
|
||
<a href="http://javascript-minifier.com/" target="_blank">Javascript Minifier</a>
|
||
</p>
|
||
<p class="mb-0"><span class="label label-danger">Note</span> If you are using Gulp.js provided in the Crafto package then it will minify CSS and JS files and hence you do not need to use the above tools.</p>
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
|
||
<section id="header" class="hidden">
|
||
<div class="container-fluid">
|
||
|
||
<div class="row">
|
||
<div class="col-md-12 docs-content-inner" id="header-header-styles">
|
||
<h1>Header Styles</h1>
|
||
<p>Crafto has 20+ header versions to choose from. Header versions help you to customize the main header of your website with different styles. The list of various header types & its descriptions are provided below for your reference:</p>
|
||
<ul>
|
||
<li><a href="index.html#transparent-header" class="inner-link">Transparent Header</a></li>
|
||
<li><a href="index.html#white-header" class="inner-link">White Header</a></li>
|
||
<li><a href="index.html#dark-header" class="inner-link">Dark Header</a></li>
|
||
<li><a href="index.html#left-navigation" class="inner-link">Left Navigation</a></li>
|
||
<li><a href="index.html#right-navigation" class="inner-link">Right Navigation</a></li>
|
||
<li><a href="index.html#center-navigation" class="inner-link">Center Navigation</a></li>
|
||
<li><a href="index.html#header-with-top-bar" class="inner-link">Header with Top Bar</a></li>
|
||
<li><a href="index.html#header-with-push" class="inner-link">Header with Push</a></li>
|
||
<li><a href="index.html#center-logo" class="inner-link">Center Logo</a></li>
|
||
<li><a href="index.html#top-logo" class="inner-link">Top Logo</a></li>
|
||
<li><a href="index.html#one-page-navigation" class="inner-link">One Page Navigation</a></li>
|
||
<li><a href="index.html#mini-header" class="inner-link">Mini Header</a></li>
|
||
<li><a href="index.html#header-with-button" class="inner-link">Header with Button</a></li>
|
||
<li><a href="index.html#header-with-social-icon" class="inner-link">Header with Social Icon</a></li>
|
||
<li><a href="index.html#left-menu-simple" class="inner-link">Left Menu Simple</a></li>
|
||
<li><a href="index.html#left-menu-modern" class="inner-link">Left Menu Modern</a></li>
|
||
<li><a href="index.html#hamburger-simple" class="inner-link">Hamburger Simple</a></li>
|
||
<li><a href="index.html#hamburger-creative" class="inner-link">Hamburger Creative</a></li>
|
||
<li><a href="index.html#hamburger-clean" class="inner-link">Hamburger Clean</a></li>
|
||
<li><a href="index.html#hamburger-modern" class="inner-link">Hamburger Modern</a></li>
|
||
</ul>
|
||
|
||
<h2 id="transparent-header">1. Transparent Header</h2>
|
||
<p>Header with no background color.</p>
|
||
<a href="../demo-business.html" target="_blank"><img src="images/transparent-header.jpg" alt="Crafto" /></a>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<header>
|
||
<span class="comment"><!-- start navigation --></span>
|
||
<nav class="navbar navbar-expand-lg header-transparent bg-transparent header-reverse" data-header-hover="light">
|
||
<div class="container-fluid">
|
||
...
|
||
</div>
|
||
</nav>
|
||
<span class="comment"><!-- end navigation --></span>
|
||
</header>
|
||
</pre>
|
||
</div>
|
||
<p class="mb-0"><span class="label label-danger">Note</span>You can find this header demo in <strong><a href="../demo-business.html" target="_blank">demo-business.html</a></strong> page for your reference.</p>
|
||
|
||
|
||
<h2 id="white-header">2. White Header</h2>
|
||
<p>Header with white background & dark navigation text.</p>
|
||
<a href="../demo-corporate.html" target="_blank"><img src="images/white-header.jpg" alt="Crafto" /></a>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<header>
|
||
<span class="comment"><!-- start navigation --></span>
|
||
<nav class="navbar navbar-expand-lg header-light bg-white disable-fixed">
|
||
<div class="container-fluid">
|
||
...
|
||
</div>
|
||
</nav>
|
||
<span class="comment"><!-- end navigation --></span>
|
||
</header>
|
||
</pre>
|
||
</div>
|
||
<p class="mb-0"><span class="label label-danger">Note</span>You can find this header demo in <strong><a href="../demo-corporate.html" target="_blank">demo-corporate.html</a></strong> page for your reference.</p>
|
||
|
||
|
||
<h2 id="dark-header">3. Dark Header</h2>
|
||
<p>Header with dark background & light navigation text.</p>
|
||
<a href="../header-dark.html" target="_blank"><img src="images/dark-header.jpg" alt="Crafto" /></a>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<header>
|
||
<span class="comment"><!-- start navigation --></span>
|
||
<nav class="navbar navbar-expand-lg header-dark bg-dark-gray header-reverse">
|
||
<div class="container-lg">
|
||
...
|
||
</div>
|
||
</nav>
|
||
<span class="comment"><!-- end navigation --></span>
|
||
</header>
|
||
</pre>
|
||
</div>
|
||
<p class="mb-0"><span class="label label-danger">Note</span>You can find this header demo in <strong><a href="../header-dark.html" target="_blank">header-dark.html</a></strong> page for your reference.</p>
|
||
|
||
|
||
<h2 id="left-navigation">4. Left Navigation</h2>
|
||
<p>Header with left navigation provides left navigation UI to showcase your website.</p>
|
||
<a href="../demo-digital-agency.html" target="_blank"><img src="images/left-nevigation.jpg" alt="Crafto" /></a>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<header>
|
||
<span class="comment"><!-- start navigation --></span>
|
||
<nav class="navbar navbar-expand-lg header-light bg-transparent disable-fixed">
|
||
<div class="container-fluid">
|
||
<div class="col-auto">
|
||
...
|
||
</div>
|
||
<div class="col-auto menu-order">
|
||
...
|
||
</div>
|
||
<div class="col-auto ms-auto d-none d-lg-flex">
|
||
...
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
<span class="comment"><!-- end navigation --></span>
|
||
</header>
|
||
</pre>
|
||
</div>
|
||
<p class="mb-0"><span class="label label-danger">Note</span>You can find this header demo in <strong><a href="../demo-digital-agency.html" target="_blank">demo-digital-agency.html</a></strong> page for your reference.</p>
|
||
|
||
|
||
<h2 id="right-navigation">5. Right Navigation</h2>
|
||
<p>Header with right side navigation provides right side navigation UI to showcase your website.</p>
|
||
<a href="../demo-branding-agency.html" target="_blank"><img src="images/right-nevigation.jpg" alt="Crafto" /></a>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<header>
|
||
<span class="comment"><!-- start navigation --></span>
|
||
<nav class="navbar navbar-expand-lg header-light bg-white header-reverse glass-effect">
|
||
<div class="container-fluid">
|
||
<div class="col-auto col-lg-2 me-lg-0 me-auto">
|
||
...
|
||
</div>
|
||
<div class="col-auto ms-auto md-ms-0 menu-order position-static">
|
||
...
|
||
</div>
|
||
<div class="col-auto text-end d-none d-sm-flex">
|
||
...
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
<span class="comment"><!-- end navigation --></span>
|
||
</header>
|
||
</pre>
|
||
</div>
|
||
<p class="mb-0"><span class="label label-danger">Note</span>You can find this header demo in <strong><a href="../demo-branding-agency.html" target="_blank">demo-branding-agency.html</a></strong> page for your reference.</p>
|
||
|
||
|
||
<h2 id="center-navigation">6. Center Navigation</h2>
|
||
<p>Header with center navigation provides center navigation UI to showcase your website.</p>
|
||
<a href="../demo-restaurant.html" target="_blank"><img src="images/center-nevigation.jpg" alt="Crafto" /></a>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<header>
|
||
<span class="comment"><!-- start navigation --></span>
|
||
<nav class="navbar navbar-expand-lg header-transparent bg-transparent header-reverse" data-header-hover="light">
|
||
<div class="container-fluid">
|
||
<div class="col-auto col-lg-2 me-lg-0 me-auto">
|
||
...
|
||
</div>
|
||
<div class="col-auto menu-order position-static">
|
||
...
|
||
</div>
|
||
<div class="col-auto col-lg-2 text-end d-none d-sm-flex">
|
||
...
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
<span class="comment"><!-- end navigation --></span>
|
||
</header>
|
||
</pre>
|
||
</div>
|
||
<p class="mb-0"><span class="label label-danger">Note</span>You can find this header demo in <strong><a href="../demo-restaurant.html" target="_blank">demo-restaurant.html</a></strong> page for your reference.</p>
|
||
|
||
|
||
<h2 id="header-with-top-bar">7. Header with Top Bar</h2>
|
||
<p> Header with top bar and default navigation menu to showcase the additional information as per your requirements.</p>
|
||
<a href="../demo-data-analysis.html" target="_blank"><img src="images/header-with-tob-bar.jpg" alt="Crafto" /></a>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<header class="header-with-topbar">
|
||
<span class="comment"><!-- start header top bar --></span>
|
||
<div class="header-top-bar top-bar-dark bg-gradient-flamingo-amethyst-green disable-fixed">
|
||
<div class="container-fluid">
|
||
...
|
||
</div>
|
||
</div>
|
||
<span class="comment"><!-- end header top bar --></span>
|
||
<span class="comment"><!-- start navigation --></span>
|
||
<nav class="navbar navbar-expand-lg header-light bg-transparent disable-fixed border-bottom border-color-transparent-dark-very-light">
|
||
<div class="container-fluid">
|
||
...
|
||
</div>
|
||
</nav>
|
||
<span class="comment"><!-- end navigation --></span>
|
||
</header>
|
||
</pre>
|
||
</div>
|
||
<p class="mb-0"><span class="label label-danger">Note</span>You can find this header demo in <strong><a href="../demo-data-analysis.html" target="_blank">demo-data-analysis.html</a></strong> page for your reference.</p>
|
||
|
||
|
||
<h2 id="header-with-push">8. Header with Push</h2>
|
||
<p>Header with push sidebar which will open from right side.</p>
|
||
<a href="../demo-startup.html" target="_blank"><img src="images/header-with-push.jpg" alt="Crafto" /></a>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<header>
|
||
<span class="comment"><!-- start navigation --></span>
|
||
<nav class="navbar navbar-expand-lg header-transparent bg-transparent border-bottom border-color-transparent-white-light disable-fixed">
|
||
<div class="container-fluid">
|
||
<div class="col-auto col-lg-2 me-lg-0 me-auto">
|
||
...
|
||
</div>
|
||
<div class="col-auto menu-order position-static">
|
||
...
|
||
</div>
|
||
<div class="col-auto col-lg-2 text-end md-pe-0">
|
||
<div class="header-icon">
|
||
<div class="header-search-icon icon">
|
||
...
|
||
</div>
|
||
<div class="header-push-button icon">
|
||
<div class="push-button">
|
||
<span></span>
|
||
<span></span>
|
||
<span></span>
|
||
<span></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
<span class="comment"><!-- end navigation --></span>
|
||
<span class="comment"><!-- start push popup --></span>
|
||
<div class="push-menu push-menu-style-2 ps-50px pe-50px pt-4 pb-4 bg-white">
|
||
...
|
||
</div>
|
||
<span class="comment"><!-- end push popup --></span>
|
||
</header>
|
||
</pre>
|
||
</div>
|
||
<p class="mb-0"><span class="label label-danger">Note</span>You can find this header demo in <strong><a href="../demo-startup.html" target="_blank">demo-startup.html</a></strong> page for your reference.</p>
|
||
|
||
|
||
<h2 id="center-logo">9. Center Logo</h2>
|
||
<p>Header with center logo provides facility to display divided menu links both side and logo will be placed between left and right menu parts.</p>
|
||
<a href="../demo-pizza-parlor.html" target="_blank"><img src="images/center-logo.jpg" alt="Crafto" /></a>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<header>
|
||
<span class="comment"><!-- start navigation --></span>
|
||
<nav class="navbar navbar-expand-lg header-dark bg-gradient-dark-transparent center-logo disable-fixed">
|
||
<div class="container-fluid">
|
||
...
|
||
</div>
|
||
</nav>
|
||
<span class="comment"><!-- end navigation --></span>
|
||
</header>
|
||
</pre>
|
||
</div>
|
||
<p class="mb-0"><span class="label label-danger">Note</span>You can find this header demo in <strong><a href="../demo-pizza-parlor.html" target="_blank">demo-pizza-parlor.html</a></strong> page for your reference.</p>
|
||
|
||
|
||
<h2 id="top-logo">10. Top Logo</h2>
|
||
<p> Header with top logo is beautiful view of header with center navigation menu, logo in top area in the enter and also can add social links with it.</p>
|
||
<a href="../header-top-logo.html" target="_blank"><img src="images/top-logo.jpg" alt="Crafto" /></a>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<header>
|
||
<span class="comment"><!-- start navigation --></span>
|
||
<nav class="navbar navbar-expand-lg header-light bg-white top-logo disable-fixed">
|
||
<div class="container-fluid flex-wrap">
|
||
...
|
||
</div>
|
||
</nav>
|
||
<span class="comment"><!-- end navigation --></span>
|
||
</header>
|
||
</pre>
|
||
</div>
|
||
<p class="mb-0"><span class="label label-danger">Note</span>You can find this header demo in <strong><a href="../header-top-logo.html" target="_blank">header-top-logo.html</a></strong> page for your reference.</p>
|
||
|
||
|
||
<h2 id="one-page-navigation">11. One Page Navigation</h2>
|
||
<p> One page navigation with menu item link to different section on the same page.</p>
|
||
<a href="../demo-ebook.html" target="_blank"><img src="images/one-page-nevigation.jpg" alt="Crafto" /></a>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<header>
|
||
<span class="comment"><!-- start navigation --></span>
|
||
<nav class="navbar navbar-expand-lg header-transparent bg-transparent header-reverse" data-header-hover="light">
|
||
<div class="container-fluid">
|
||
<div class="col-auto col-lg-2 me-lg-0 me-auto">
|
||
...
|
||
</div>
|
||
<div class="col-auto menu-order position-static">
|
||
<button class="navbar-toggler float-start" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-label="Toggle navigation">
|
||
...
|
||
</button>
|
||
<div class="collapse navbar-collapse" id="navbarNav">
|
||
<ul class="navbar-nav alt-font text-uppercase">
|
||
<li class="nav-item"><a href="#" class="inner-link nav-link">Home</a></li>
|
||
<li class="nav-item"><a href="#" class="inner-link nav-link">About</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="col-auto col-lg-2 text-end">
|
||
...
|
||
</div>
|
||
</div>
|
||
<span class="comment"><!-- end navigation --></span>
|
||
</nav>
|
||
</pre>
|
||
</div>
|
||
<p class="mb-0"><span class="label label-danger">Note</span>You can find this header demo in <strong><a href="../demo-ebook.html" target="_blank">demo-ebook.html</a></strong> page for your reference.</p>
|
||
|
||
|
||
<h2 id="mini-header">12. Mini Header</h2>
|
||
<p> Mini header provides header mini UI to showcase your website.</p>
|
||
<a href="../header-mini.html" target="_blank"><img src="images/mini-header.jpg" alt="Crafto" /></a>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<header>
|
||
<span class="comment"><!-- start navigation --></span>
|
||
<nav class="navbar navbar-expand-lg mini-header header-light bg-white header-reverse" data-header-hover="light">
|
||
<div class="container-lg">
|
||
...
|
||
</div>
|
||
</nav>
|
||
<span class="comment"><!-- end navigation --></span>
|
||
</header>
|
||
</pre>
|
||
</div>
|
||
<p class="mb-0"><span class="label label-danger">Note</span>You can find this header demo in <strong><a href="../header-mini.html" target="_blank">header-mini.html</a></strong> page for your reference.</p>
|
||
|
||
|
||
<h2 id="header-with-button">13. Header with Button</h2>
|
||
<p> Header with button provides functionality to display left side navigation and right side button UI to showcase your website.</p>
|
||
<a href="../demo-seo-agency.html" target="_blank"><img src="images/header-with-button.jpg" alt="Crafto" /></a>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<header>
|
||
<span class="comment"><!-- start navigation --></span>
|
||
<nav class="navbar navbar-expand-lg bg-transparent header-light header-reverse glass-effect" data-header-hover="light">
|
||
<div class="container-fluid">
|
||
<div class="col-auto">
|
||
...
|
||
</div>
|
||
<div class="col-auto menu-order left-nav">
|
||
...
|
||
</div>
|
||
<div class="col-auto ms-auto">
|
||
<div class="header-icon">
|
||
<div class="d-none d-xl-inline-block me-25px">
|
||
...
|
||
</div>
|
||
<div class="header-button">
|
||
...
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
<span class="comment"><!-- end navigation --></span>
|
||
</header>
|
||
</pre>
|
||
</div>
|
||
<p class="mb-0"><span class="label label-danger">Note</span>You can find this header demo in <strong><a href="../demo-seo-agency.html" target="_blank">demo-seo-agency.html</a></strong> page for your reference.</p>
|
||
|
||
|
||
<h2 id="header-with-social-icon">14. Header with Social Icon</h2>
|
||
<p> Header with social icon provides functionality to display social icon at right side UI to showcase your website.</p>
|
||
<a href="../demo-marketing.html" target="_blank"><img src="images/header-with-social-icon.jpg" alt="Crafto" /></a>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<header>
|
||
<span class="comment"><!-- start navigation --></span>
|
||
<nav class="navbar navbar-expand-lg header-light header-transparent bg-transparent disable-fixed">
|
||
<div class="container-fluid">
|
||
<div class="col-auto col-lg-2 me-lg-0 me-auto">
|
||
...
|
||
</div>
|
||
<div class="col-auto menu-order position-static">
|
||
...
|
||
</div>
|
||
<div class="col-auto col-lg-2 text-end">
|
||
<div class="header-icon">
|
||
<div class="header-social-icon icon">
|
||
...
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
<span class="comment"><!-- end navigation --></span>
|
||
</header>
|
||
</pre>
|
||
</div>
|
||
<p class="mb-0"><span class="label label-danger">Note</span>You can find this header demo in <strong><a href="../demo-marketing.html" target="_blank">demo-marketing.html</a></strong> page for your reference.</p>
|
||
|
||
|
||
<h2 id="left-menu-simple">15. Left Menu Simple</h2>
|
||
<p> Left menu simple provides functionality to display menu at left side in simple view.</p>
|
||
<a href="../header-left-menu-simple.html" target="_blank"><img src="images/left-menu-simple.jpg" alt="Crafto" /></a>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<header class="left-sidebar-header header-light bg-white" id="navbar-menu">
|
||
<span class="comment"><!-- start navigation --></span>
|
||
<nav class="left-sidebar-nav bg-white" data-sticky_column>
|
||
<div class="side-menu-top text-center bg-white">
|
||
...
|
||
</div>
|
||
<div class="side-menu-bottom">
|
||
...
|
||
</div>
|
||
</nav>
|
||
<span class="comment"><!-- end navigation --></span>
|
||
</header>
|
||
</pre>
|
||
</div>
|
||
<p class="mb-0"><span class="label label-danger">Note</span>You can find this header demo in <strong><a href="../header-left-menu-simple.html" target="_blank">header-left-menu-simple.html</a></strong> page for your reference.</p>
|
||
|
||
|
||
<h2 id="left-menu-modern">16. Left Menu Modern</h2>
|
||
<p> Modern left menu provides functionality to display menu at left side in modern view.</p>
|
||
<a href="../demo-minimal-portfolio.html" target="_blank"><img src="images/left-menu-morden.jpg" alt="Crafto" /></a>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<header class="left-modern-header" id="navbar-menu">
|
||
<span class="comment"><!-- start left modern sidebar --></span>
|
||
<div class="left-modern-sidebar header-light bg-white">
|
||
...
|
||
</div>
|
||
<span class="comment"><!-- end left modern sidebar --></span>
|
||
<span class="comment"><!-- start navigation --></span>
|
||
<nav class="modern-sidebar-nav header-light bg-white">
|
||
<div class="h-100">
|
||
<div class="modern-side-menu" data-scroll-options='{ "theme": "light" }'>
|
||
...
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
<span class="comment"><!-- end navigation --></span>
|
||
</header>
|
||
</pre>
|
||
</div>
|
||
<p class="mb-0"><span class="label label-danger">Note</span>You can find this header demo in <strong><a href="../demo-minimal-portfolio.html" target="_blank">demo-minimal-portfolio.html</a></strong> page for your reference.</p>
|
||
|
||
|
||
<h2 id="hamburger-simple">17. Hamburger Simple</h2>
|
||
<p>Hamburger simple is another way to display header with navigation part for simple look.</p>
|
||
<a href="../demo-photography.html" target="_blank"><img src="images/hamburger-simple.jpg" alt="Crafto" /></a>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<header>
|
||
<span class="comment"><!-- start navigation --></span>
|
||
<nav class="navbar navbar-expand-lg header-transparent header-dark disable-fixed">
|
||
<div class="container-fluid">
|
||
<div class="col-auto col-lg-2 me-lg-0 me-auto d-none d-lg-flex">
|
||
...
|
||
</div>
|
||
<div class="col-auto">
|
||
...
|
||
</div>
|
||
<div class="col-auto col-lg-2 text-end">
|
||
<div class="header-icon">
|
||
<div class="header-push-button hamburger-push-button icon">
|
||
<div class="push-button">
|
||
<span></span>
|
||
<span></span>
|
||
<b class="push-button-text position-absolute alt-font top-3px left-minus-50px fs-15 fw-500 text-white">Menu</b>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
<span class="comment"><!-- end navigation --></span>
|
||
<span class="comment"><!-- start hamburger menu --></span>
|
||
<div class="push-menu hamburger-nav header-dark hamburger-menu-simple bg-dark-gray" style="background-image: url(image path)">
|
||
...
|
||
</div>
|
||
<span class="comment"><!-- end hamburger menu --></span>
|
||
</header>
|
||
</pre>
|
||
</div>
|
||
<p class="mb-0"><span class="label label-danger">Note</span>You can find this header demo in <strong><a href="../demo-photography.html" target="_blank">demo-photography.html</a></strong> page for your reference.</p>
|
||
|
||
|
||
<h2 id="hamburger-creative">18. Hamburger Creative</h2>
|
||
<p> Header with hamburger creative menu is another way to display header with navigation part for creative look.</p>
|
||
<a href="../demo-architecture.html" target="_blank"><img src="images/hamburger-creative.jpg" alt="Crafto" /></a>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<header>
|
||
<span class="comment"><!-- start navigation --></span>
|
||
<nav class="navbar navbar-expand-lg header-transparent bg-transparent disable-fixed">
|
||
<div class="container-fluid">
|
||
<div class="col-auto col-lg-2 me-lg-0 me-auto d-none d-lg-flex">
|
||
...
|
||
</div>
|
||
<div class="col-auto">
|
||
...
|
||
</div>
|
||
<div class="col-auto col-lg-2 text-end">
|
||
<div class="header-icon header-push-button hamburger-push-button icon">
|
||
<div class="push-button">
|
||
<span></span>
|
||
<span></span>
|
||
<span></span>
|
||
<span></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
<span class="comment"><!-- end navigation --></span>
|
||
<span class="comment"><!-- start hamburger menu --></span>
|
||
<div class="push-menu hamburger-nav hamburger-menu-simple header-dark bg-dark-gray background-position-center-top" style="background-image: url('image path');">
|
||
...
|
||
</div>
|
||
<span class="comment"><!-- end hamburger menu --></span>
|
||
</header>
|
||
</pre>
|
||
</div>
|
||
<p class="mb-0"><span class="label label-danger">Note</span>You can find this header demo in <strong><a href="../demo-architecture.html" target="_blank">demo-architecture.html</a></strong> page for your reference.</p>
|
||
|
||
|
||
<h2 id="hamburger-clean">19. Hamburger Clean</h2>
|
||
<p> Header with hamburger clean is modern way to display header with navigation part for half look.</p>
|
||
<a href="../demo-freelancer.html" target="_blank"><img src="images/hamburger-clean.jpg" alt="Crafto" /></a>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<header>
|
||
<span class="comment"><!-- start navigation --></span>
|
||
<nav class="navbar navbar-expand-lg header-transparent bg-transparent disable-fixed" data-header-hover="dark">
|
||
<div class="container-fluid">
|
||
<div class="col-auto col-lg-2 me-lg-0 me-auto">
|
||
...
|
||
</div>
|
||
<div class="col-auto col-lg-3 text-end lg-pe-0">
|
||
<div class="header-icon">
|
||
<a href="#" class="text-white"><a href="../cdn-cgi/l/email-protection.html" class="__cf_email__" data-cfemail="6200100b030c22060d0f030b0c4c010d0f">[email protected]</a></a>
|
||
<div class="header-push-button hamburger-push-button icon sm-pe-15px">
|
||
<div class="push-button">
|
||
<span></span>
|
||
<span></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
<span class="comment"><!-- end navigation --></span>
|
||
<span class="comment"><!-- start hamburger menu --></span>
|
||
<div class="push-menu hamburger-nav header-dark hamburger-menu-half bg-dark-gray md-w-60 sm-w-100" style="background-image: url(image path)">
|
||
...
|
||
</div>
|
||
<span class="comment"><!-- end hamburger menu --></span>
|
||
</header>
|
||
</pre>
|
||
</div>
|
||
<p class="mb-0"><span class="label label-danger">Note</span>You can find this header demo in <strong><a href="../demo-freelancer.html" target="_blank">demo-freelancer.html</a></strong> page for your reference.</p>
|
||
|
||
|
||
<h2 id="hamburger-modern">20. Hamburger Modern</h2>
|
||
<p> Header with hamburger modern is modern way to display header with navigation part for creative look.</p>
|
||
<a href="../demo-gym-and-fitness.html" target="_blank"><img src="images/hamburger-modern.jpg" alt="Crafto" /></a>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<header>
|
||
<span class="comment"><!-- start navigation --></span>
|
||
<nav class="navbar navbar-expand-lg header-transparent bg-transparent border-bottom border-color-transparent-dark-very-light disable-fixed">
|
||
<div class="container-fluid">
|
||
<div class="col-auto">
|
||
...
|
||
</div>
|
||
<div class="col-auto me-0 sm-me-auto border-start border-color-transparent-dark-very-light ms-35px xs-ms-0">
|
||
<div class="header-icon">
|
||
<div class="header-push-button hamburger-push-button icon xs-pe-50px">
|
||
<div class="push-button">
|
||
<span></span>
|
||
<span></span>
|
||
<span></span>
|
||
<span></span>
|
||
<b class="push-button-text alt-font text-uppercase text-dark-gray position-absolute top-10px right-minus-50px">Menu</b>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-auto ms-auto align-items-center d-none d-sm-flex">
|
||
...
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
<span class="comment"><!-- end navigation --></span>
|
||
<span class="comment"><!-- start hamburger menu --></span>
|
||
<div class="push-menu hamburger-nav header-dark hamburger-menu-half push-menu-left bg-dark-gray md-w-60 sm-w-100" style="background-image: url(image path)">
|
||
...
|
||
</div>
|
||
<span class="comment"><!-- end hamburger menu --></span>
|
||
</header>
|
||
</pre>
|
||
</div>
|
||
<p class="mb-0"><span class="label label-danger">Note</span>You get these two types of classes that you can use this class <code>push-menu-left</code> will open a menu on the left side and this class <code>push-menu-right</code> will open a menu on the right side which will be easy for you. You can find this header demo in <strong><a href="../demo-gym-and-fitness.html" target="_blank">demo-gym-and-fitness.html</a></strong> page for your reference.</p>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="row">
|
||
<div class="col-md-12 docs-content-inner" id="header-mega-menus">
|
||
|
||
<h1>Mega Menu</h1>
|
||
<p>You can start using the mega menu in 2, 3, 4 or more columns. Try using the following code with below explanation:</p>
|
||
<a href="../element-accordion.html" target="_blank"><img src="images/megamenu.jpg" alt="Crafto" /></a>
|
||
<br/><br/>
|
||
<ul>
|
||
<li>For 2 column menu there should be 2 UL items with <code>col</code> class</li>
|
||
<li>For 3 column menu there should be 3 UL items with <code>col</code> class</li>
|
||
<li>For 4 column menu there should be 4 UL items with <code>col</code> class</li>
|
||
<li>And so on for more columns</li>
|
||
</ul>
|
||
<br>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<header>
|
||
<span class="comment"><!-- start navigation --></span>
|
||
<nav class="navbar navbar-expand-lg header-light header-reverse header-demo" data-header-hover="light">
|
||
<div class="container-fluid">
|
||
<div class="col-auto col-lg-2 me-lg-0 me-auto">
|
||
...
|
||
</div>
|
||
<div class="col-auto col-lg-8 menu-order position-static">
|
||
<button class="navbar-toggler float-start" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-label="Toggle navigation">
|
||
<span class="navbar-toggler-line"></span>
|
||
<span class="navbar-toggler-line"></span>
|
||
<span class="navbar-toggler-line"></span>
|
||
<span class="navbar-toggler-line"></span>
|
||
</button>
|
||
<div class="collapse navbar-collapse justify-content-center" id="navbarNav">
|
||
<ul class="navbar-nav alt-font">
|
||
<li class="nav-item dropdown submenu">
|
||
<a href="javascript:void(0);" class="nav-link">Pre-built sites</a>
|
||
<i class="fa-solid fa-angle-down dropdown-toggle" id="navbarDropdownMenuLink1" role="button" data-bs-toggle="dropdown" aria-expanded="false"></i>
|
||
<div class="dropdown-menu submenu-content background-position-center cover-background" aria-labelledby="navbarDropdownMenuLink1" style="background-image: url(image path)">
|
||
<div class="d-lg-flex mega-menu m-auto">
|
||
<ul class="col">
|
||
...
|
||
</ul>
|
||
<ul class="col">
|
||
...
|
||
</ul>
|
||
<ul class="col">
|
||
...
|
||
</ul>
|
||
<ul class="col">
|
||
...
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="col-auto col-lg-2 text-end">
|
||
...
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
<span class="comment"><!-- end navigation --></span>
|
||
</header>
|
||
</pre>
|
||
</div>
|
||
<p><span class="label label-danger">Note</span>You can find this mega menu demo in <strong><a href="../element-accordion.html" target="_blank">element-accordion.html</a></strong> page for your reference.</p>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="row">
|
||
<div class="col-md-12 docs-content-inner" id="header-mega-menus-with-image">
|
||
|
||
<h1>Mega Menu with Image</h1>
|
||
<p>You can start using mega menu with image using below code.</p>
|
||
<a href="../element-accordion.html" target="_blank"><img src="images/megamenu-with-image.jpg" alt="Crafto" /></a>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<header>
|
||
<span class="comment"><!-- start navigation --></span>
|
||
<nav class="navbar navbar-expand-lg header-light header-reverse header-demo" data-header-hover="light">
|
||
<div class="container-fluid">
|
||
<div class="col-auto col-lg-2 me-lg-0 me-auto">
|
||
...
|
||
</div>
|
||
<div class="col-auto col-lg-8 menu-order position-static">
|
||
<button class="navbar-toggler float-start" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-label="Toggle navigation">
|
||
<span class="navbar-toggler-line"></span>
|
||
<span class="navbar-toggler-line"></span>
|
||
<span class="navbar-toggler-line"></span>
|
||
<span class="navbar-toggler-line"></span>
|
||
</button>
|
||
<div class="collapse navbar-collapse justify-content-center" id="navbarNav">
|
||
<ul class="navbar-nav alt-font">
|
||
<li class="nav-item dropdown submenu">
|
||
<a href="javascript:void(0);" class="nav-link">Shop</a>
|
||
<i class="fa-solid fa-angle-down dropdown-toggle" id="navbarDropdownMenuLink7" role="button" data-bs-toggle="dropdown" aria-expanded="false"></i>
|
||
<div class="dropdown-menu submenu-content" aria-labelledby="navbarDropdownMenuLink7">
|
||
<div class="d-lg-flex mega-menu m-auto">
|
||
<ul class="col">
|
||
...
|
||
</ul>
|
||
<ul class="col">
|
||
...
|
||
</ul>
|
||
<ul class="col">
|
||
<li class="sub-title"><a href="#" target="_blank" class="p-0"><img src="image path" class="border-radius-10px" alt=""/></a></li>
|
||
</ul>
|
||
<ul class="col">
|
||
<li class="sub-title"><a href="#" target="_blank" class="p-0"><img src="image path" class="border-radius-10px" alt=""/></a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="col-auto col-lg-2 text-end">
|
||
...
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
<span class="comment"><!-- end navigation --></span>
|
||
</header>
|
||
</pre>
|
||
</div>
|
||
<p><span class="label label-danger">Note</span>You can find this mega menus with image demo in <strong><a href="../element-accordion.html" target="_blank">element-accordion.html</a></strong> page for your reference.</p>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="row">
|
||
<div class="col-md-12 docs-content-inner" id="header-sub-menu">
|
||
|
||
<h1>Simple Dropdown Menu</h1>
|
||
<p>If you have less numbers of submenu items then you can use dropdown menu instead of mega menu.</p>
|
||
<a href="../element-accordion.html" target="_blank"><img src="images/simple-menu.jpg" alt="Crafto" /></a>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<header>
|
||
<span class="comment"><!-- start navigation --></span>
|
||
<nav class="navbar navbar-expand-lg header-light header-reverse header-demo" data-header-hover="light">
|
||
<div class="container-fluid">
|
||
<div class="col-auto col-lg-2 me-lg-0 me-auto">
|
||
...
|
||
</div>
|
||
<div class="col-auto col-lg-8 menu-order position-static">
|
||
<button class="navbar-toggler float-start" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-label="Toggle navigation">
|
||
<span class="navbar-toggler-line"></span>
|
||
<span class="navbar-toggler-line"></span>
|
||
<span class="navbar-toggler-line"></span>
|
||
<span class="navbar-toggler-line"></span>
|
||
</button>
|
||
<div class="collapse navbar-collapse justify-content-center" id="navbarNav">
|
||
<ul class="navbar-nav alt-font">
|
||
<li class="nav-item dropdown simple-dropdown">
|
||
<a href="javascript:void(0);" class="nav-link">Features</a>
|
||
<i class="fa-solid fa-angle-down dropdown-toggle" id="navbarDropdownMenuLink5" role="button" data-bs-toggle="dropdown" aria-expanded="false"></i>
|
||
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink5">
|
||
<li class="dropdown">
|
||
...
|
||
</li>
|
||
<li class="dropdown">
|
||
...
|
||
</li>
|
||
<li class="dropdown">
|
||
...
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="col-auto col-lg-2 text-end">
|
||
...
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
<span class="comment"><!-- end navigation --></span>
|
||
</header>
|
||
</pre>
|
||
</div>
|
||
<p><span class="label label-danger">Note</span>You can find this simple dropdown menu demo in <strong><a href="../element-accordion.html" target="_blank">element-accordion.html</a></strong> page for your reference.</p>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="row">
|
||
<div class="col-md-12 docs-content-inner" id="header-mobile-menu">
|
||
<h1>Mobile Menu</h1>
|
||
<p>You can choose between <strong>3 Types</strong> of mobile menu while creating your pages. The list of various mobile menu types & its descriptions are provided below for your reference:</p>
|
||
<ul>
|
||
<li><a href="index.html#mobile-menu-classic" class="inner-link">Classic</a></li>
|
||
<li><a href="index.html#mobile-menu-modern" class="inner-link">Modern</a></li>
|
||
<li><a href="index.html#mobile-full-screen" class="inner-link">Full Screen</a></li>
|
||
</ul>
|
||
|
||
<h2 id="mobile-menu-classic">1. Classic</h2>
|
||
<p>Header with classic menu.</p>
|
||
<a href="../demo-startup.html" target="_blank"><img src="images/classic-mobile-menu.jpg" alt="Crafto" /></a>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<body data-mobile-nav-style="classic">
|
||
...
|
||
</body>
|
||
</pre>
|
||
</div>
|
||
<p><span class="label label-danger">Note</span>You can find this header demo in <strong><a href="../demo-startup.html" target="_blank">demo-startup.html</a></strong> page for your reference.</p>
|
||
|
||
|
||
<h2 id="mobile-menu-modern">2. Modern</h2>
|
||
<p>Header with modern menu.</p>
|
||
<a href="../demo-yoga-and-meditation.html" target="_blank"><img src="images/modern-mobile-menu.jpg" alt="Crafto" /></a>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<body data-mobile-nav-trigger-alignment="right" data-mobile-nav-style="modern" data-mobile-nav-bg-color="#393334" class="custom-cursor">
|
||
...
|
||
</body>
|
||
</pre>
|
||
</div>
|
||
<span>3 attributes required in BODY tag for the modern menu.</span>
|
||
<ol>
|
||
<li><code>data-mobile-nav-trigger-alignment</code> - The values can be here left or right and menu will display from the mentioned direction here either left or right.</li>
|
||
<li><code>data-mobile-nav-style</code> - The value should be modern here.</li>
|
||
<li><code>data-mobile-nav-bg-color</code> - For your desired background color code.</li>
|
||
</ol>
|
||
<p><span class="label label-danger">Note</span> You can find this header demo in <strong><a href="../demo-yoga-and-meditation.html" target="_blank">demo-yoga-and-meditation.html</a></strong> page for your reference.</p>
|
||
|
||
|
||
<h2 id="mobile-full-screen">3. Full Screen</h2>
|
||
<p>Header with full screen menu.</p>
|
||
<a href="../demo-scattered-portfolio.html" target="_blank"><img src="images/full-mobile-menu.jpg" alt="Crafto" /></a>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<body data-mobile-nav-style="full-screen-menu" data-mobile-nav-bg-color="#232323">
|
||
...
|
||
</body>
|
||
</pre>
|
||
</div>
|
||
<span>2 attributes required in BODY tag for the full menu.</span>
|
||
<ol>
|
||
<li><code>data-mobile-nav-style</code> - The value should be full-screen-menu here.</li>
|
||
<li><code>data-mobile-nav-bg-color</code> - For your desired background color code.</li>
|
||
</ol>
|
||
<p><span class="label label-danger">Note</span>You can find this header demo in <strong><a href="../demo-scattered-portfolio.html" target="_blank">demo-scattered-portfolio.html</a></strong> page for your reference.</p>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="row">
|
||
<div class="col-md-12 docs-content-inner" id="header-setting">
|
||
<h1>Settings</h1>
|
||
<p>You can easily make changes in NAV tag with changes of css classes.</p>
|
||
<p><b>Change background color:</b> You can easily add your favorite color to your navigation bar by adding color class like <code>.bg-transparent</code> , <code>.bg-white</code> or whatever you want, please make sure that same css class should be there in style.css file.</p>
|
||
<p><b>Navbar effects:</b>
|
||
<ul>
|
||
<li><code>.fixed-header</code> - Top header navigation will remain fixed and visible at top upon scroll.</li>
|
||
<li><code>.disable-fixed</code> - Top header navigation will disappear upon scroll.</li>
|
||
<li><code>.header-reverse</code> - Top header navigation will appear from top with animation upon down scroll.</li>
|
||
<li><code>.header-reverse-back-scroll</code> - Top header navigation will appear at top upon upward scroll.</li>
|
||
<li><code>.responsive-sticky</code> - Top header navigation will remain fixed and visible at top upon scroll, but with less height than standard header.</li>
|
||
</ul>
|
||
<br/>
|
||
<p><b>After scroll - navbar color:</b>
|
||
<ul>
|
||
<li><code>.header-light</code> - Apply this css class in NAV tag, using this class menu will display with light background and dark text.</li>
|
||
<li><code>.header-dark</code> - Apply this css class in NAV tag, using this class menu will display with dark background and light text.</li>
|
||
</ul>
|
||
<br/>
|
||
<p><b>You can find various scrolled version header demos below:</b>
|
||
<br/>
|
||
<br/>Always Fixed - <strong><a href="../header-always-fixed.html" target="_blank">header-always-fixed.html</a></strong>
|
||
<br/>Non-sticky or Disable Fixed - <strong><a href="../demo-application.html" target="_blank">demo-application.html</a></strong>
|
||
<br/>Reverse Auto - <strong><a href="../demo-seo-agency.html" target="_blank">demo-seo-agency.html</a></strong>
|
||
<br/>Reverse Back Scroll - <strong><a href="../demo-elder-care.html" target="_blank">demo-elder-care.html</a></strong>
|
||
<br/>Responsive Sticky - <strong><a href="../demo-accounting.html" target="_blank">demo-accounting.html</a></strong>
|
||
<br/>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
|
||
<section id="page-elements" class="hidden">
|
||
<div class="container-fluid">
|
||
|
||
<div class="row">
|
||
<div class="col-md-12 docs-content-inner" id="page-elements-page-titles">
|
||
<h1>Page Titles</h1>
|
||
<p>You can choose between <strong>9 types</strong> of page titles while creating your pages. The list of page title options & its descriptions are provided below for your reference:</p>
|
||
<ul>
|
||
<li><a href="index.html#mini-version" class="inner-link">Mini Version</a></li>
|
||
<li><a href="index.html#big-typography" class="inner-link">Big Typography</a></li>
|
||
<li><a href="index.html#left-alignment" class="inner-link">Left Alignment</a></li>
|
||
<li><a href="index.html#right-alignment" class="inner-link">Right Alignment</a></li>
|
||
<li><a href="index.html#center-alignment" class="inner-link">Center Alignment</a></li>
|
||
<li><a href="index.html#gallery-background" class="inner-link">Gallery Background</a></li>
|
||
<li><a href="index.html#parallax-background" class="inner-link">Parallax Background</a></li>
|
||
<li><a href="index.html#background-video" class="inner-link">Background Video</a></li>
|
||
<li><a href="index.html#separate-breadcrumb" class="inner-link">Separate Breadcrumb</a></li>
|
||
</ul>
|
||
|
||
<h2 id="mini-version">Mini Version</h2>
|
||
<p>It includes page title aligned left and breadcrumb in right part. See below image and code for more information.</p>
|
||
<br>
|
||
<a href="../page-title-mini-version.html" target="_blank"><img src="images/mini-version-title.jpg" alt="Crafto" /></a>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<span class="comment"><!-- start page title --></span>
|
||
<section class="page-title-mini-version top-space-margin bg-very-light-gray pt-25px pb-25px">
|
||
<div class="container">
|
||
<div class="row align-items-center">
|
||
<div class="col-12 col-lg-6 d-flex justify-content-center justify-content-lg-start md-mb-15px sm-mb-10px">
|
||
<h1 class="mb-0 text-dark-gray fw-600">Page title mini version</h1>
|
||
</div>
|
||
<div class="col-12 col-lg-6 d-flex justify-content-center justify-content-lg-end breadcrumb breadcrumb-style-01 fs-14">
|
||
<ul>
|
||
<li><a href="#">Home</a></li>
|
||
<li><a href="#">Features</a></li>
|
||
<li>Mini version</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<span class="comment"><!-- end page title --></span>
|
||
</pre>
|
||
</div>
|
||
<p><span class="label label-danger">Note</span>You can find this demo in <strong><a href="../page-title-mini-version.html" target="_blank">page-title-mini-version.html</a></strong> page for your reference.</p>
|
||
|
||
|
||
<h2 id="big-typography">Big Typography</h2>
|
||
<p>It includes page title and sub title aligned center with small title and big sub title. See below image and code for more information.</p>
|
||
<br>
|
||
<a href="../page-title-big-typography.html" target="_blank"><img src="images/big-typography-title.jpg" alt="Crafto" /></a>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<span class="comment"><!-- start page title --></span>
|
||
<section class="page-title-big-typography ipad-top-space-margin" data-parallax-background-ratio="0.5" style="background-image: url(image path)">
|
||
<div class="opacity-extra-medium bg-dark-gray"></div>
|
||
<div class="container">
|
||
<div class="row align-items-center justify-content-center small-screen">
|
||
<div class="col-xl-5 col-lg-7 col-md-8 position-relative text-center page-title-extra-small">
|
||
<h1 class="text-uppercase mb-15px alt-font text-white opacity-7 fw-500 ls-1px">Page title big typography</h1>
|
||
<h2 class="mb-0 text-white ls-minus-2px fw-500 text-shadow-double-large">we are a web design agency</h2>
|
||
</div>
|
||
<div class="down-section text-center">
|
||
<a href="#down-section" class="section-link">
|
||
<div class="d-flex justify-content-center align-items-center mx-auto rounded-circle h-55px w-55px fs-22 text-white bg-dark-gray">
|
||
<i class="feather icon-feather-arrow-down"></i>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<span class="comment"><!-- end page title --></span>
|
||
</pre>
|
||
</div>
|
||
<p><span class="label label-danger">Note</span>You can find this demo in <strong><a href="../page-title-big-typography.html" target="_blank">page-title-big-typography.html</a></strong> page for your reference.</p>
|
||
|
||
|
||
<h2 id="left-alignment">Left Alignment</h2>
|
||
<p>It includes page title with aligned left, sub title along side page title and breadcrumb in right part. See below image and code for more information.</p>
|
||
<br>
|
||
<a href="../page-title-left-alignment.html" target="_blank"><img src="images/left-align-title.jpg" alt="Crafto" /></a>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<span class="comment"><!-- start page title --></span>
|
||
<section class="page-title-left-alignment top-space-margin bg-very-light-gray pt-40px pb-40px">
|
||
<div class="container">
|
||
<div class="row align-items-center">
|
||
<div class="col-12 col-lg-6 d-flex justify-content-center justify-content-lg-start page-title-small md-mb-15px">
|
||
<h1 class="mb-0 text-dark-gray fw-600">Left alignment</h1>
|
||
</div>
|
||
<div class="col-12 col-lg-6 justify-content-center justify-content-lg-end breadcrumb breadcrumb-style-01 fs-14">
|
||
<ul>
|
||
<li><a href="#">Home</a></li>
|
||
<li><a href="#">Features</a></li>
|
||
<li>Left alignment</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<span class="comment"><!-- end page title --></span>
|
||
</pre>
|
||
</div>
|
||
<p><span class="label label-danger">Note</span>You can find this demo in <strong><a href="../page-title-left-alignment.html" target="_blank">page-title-left-alignment.html</a></strong> page for your reference.</p>
|
||
|
||
|
||
<h2 id="right-alignment">Right Alignment</h2>
|
||
<p>It includes page title with aligned right, sub title along side page title and breadcrumb in left part. See below image and code for more information.</p>
|
||
<br>
|
||
<a href="../page-title-right-alignment.html" target="_blank"><img src="images/right-align-title.jpg" alt="Crafto" /></a>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<span class="comment"><!-- start page title --></span>
|
||
<section class="page-title-right-alignment top-space-margin bg-very-light-gray pt-40px pb-40px">
|
||
<div class="container">
|
||
<div class="row align-items-center">
|
||
<div class="col-12 col-lg-6 justify-content-center justify-content-lg-start breadcrumb breadcrumb-style-01 fs-14 md-mb-15px">
|
||
<ul>
|
||
<li><a href="#">Home</a></li>
|
||
<li><a href="#">Features</a></li>
|
||
<li>Right alignment</li>
|
||
</ul>
|
||
</div>
|
||
<div class="col-12 col-lg-6 d-flex justify-content-center justify-content-lg-end page-title-small">
|
||
<h1 class="mb-0 text-dark-gray fw-600">Right alignment</h1>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<span class="comment"><!-- end page title --></span>
|
||
</pre>
|
||
</div>
|
||
<p><span class="label label-danger">Note</span>You can find this demo in <strong><a href="../page-title-right-alignment.html" target="_blank">page-title-right-alignment.html</a></strong> page for your reference.</p>
|
||
|
||
|
||
<h2 id="center-alignment">Center Alignment</h2>
|
||
<p>It includes page title and sub title aligned center. See below image and code for more information.</p>
|
||
<br>
|
||
<a href="../page-title-center-alignment.html" target="_blank"><img src="images/center-align-title.jpg" alt="Crafto" /></a>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<span class="comment"><!-- start page title --></span>
|
||
<section class="half-section page-title-center-alignment cover-background bg-very-light-gray top-space-margin">
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-12 text-center position-relative page-title-large">
|
||
<h1 class="d-inline-block fw-600 ls-minus-1px text-dark-gray mb-15px">Center alignment</h1>
|
||
</div>
|
||
<div class="col-12 breadcrumb breadcrumb-style-01 d-flex justify-content-center">
|
||
<ul>
|
||
<li><a href="#">Home</a></li>
|
||
<li><a href="#">Features</a></li>
|
||
<li>Center alignment</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<span class="comment"><!-- end page title --></span>
|
||
</pre>
|
||
</div>
|
||
<p><span class="label label-danger">Note</span>You can find this demo in <strong><a href="../page-title-center-alignment.html" target="_blank">page-title-center-alignment.html</a></strong> page for your reference.</p>
|
||
|
||
|
||
<h2 id="gallery-background">Gallery Background</h2>
|
||
<p>It includes page title and sub title aligned center with image gallery in background. See below image and code for more information.</p>
|
||
<br>
|
||
<a href="../page-title-gallery-background.html" target="_blank"><img src="images/gallery-background-title.jpg" alt="Crafto" /></a>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<span class="comment"><!-- start page title --></span>
|
||
<section class="page-title-gallery-background position-relative ipad-top-space-margin">
|
||
<div class="opacity-extra-medium bg-dark-gray"></div>
|
||
<div class="container">
|
||
<div class="row align-items-center justify-content-center small-screen">
|
||
<div class="col-xl-5 col-lg-6 col-sm-8 position-relative text-center page-title-extra-small">
|
||
<h1 class="text-uppercase mb-15px alt-font text-white opacity-7 fw-500 ls-1px">Page title gallery background</h1>
|
||
<h2 class="mb-0 text-white ls-minus-2px fw-500 text-shadow-double-large">we are a web design agency</h2>
|
||
</div>
|
||
<div class="down-section text-center">
|
||
<a href="#down-section" class="section-link">
|
||
<div class="d-flex justify-content-center align-items-center mx-auto rounded-circle h-55px w-55px fs-22 text-dark-gray bg-white">
|
||
<i class="feather icon-feather-arrow-down"></i>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="swiper z-index-minus-2 position-absolute top-0px w-100 h-100" data-slider-options='{ "loop": true, "slidesPerView": 1, "effect": "fade", "navigation": { "nextEl": ".swiper-auto-next", "prevEl": ".swiper-auto-prev" }, "keyboard": { "enabled": true, "onlyInViewport": true }, "autoplay": { "delay": 3000, "disableOnInteraction": false }, "fadeEffect": { "crossFade": true } }'>
|
||
<div class="swiper-wrapper">
|
||
<div class="swiper-slide cover-background" style="background-image:url('image path');"></div>
|
||
<div class="swiper-slide cover-background" style="background-image:url('image path');"></div>
|
||
<div class="swiper-slide cover-background" style="background-image:url('image path');"></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<span class="comment"><!-- end page title --></span>
|
||
</pre>
|
||
</div>
|
||
<p><span class="label label-danger">Note</span>You can find this demo in <strong><a href="../page-title-gallery-background.html" target="_blank">page-title-gallery-background.html</a></strong> page for your reference.</p>
|
||
|
||
|
||
<h2 id="parallax-background">Parallax Background</h2>
|
||
<p>It includes page title and sub title aligned center with background image and parallax effect. See below image and code for more information.</p>
|
||
<br>
|
||
<a href="../page-title-parallax-background.html" target="_blank"><img src="images/parallax-background-title.jpg" alt="Crafto" /></a>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<span class="comment"><!-- start page title --></span>
|
||
<section class="page-title-parallax-background half-section ipad-top-space-margin" data-parallax-background-ratio="0.5" style="background-image: url(image path)">
|
||
<div class="opacity-extra-medium bg-gradient-dark-gray-brown"></div>
|
||
<div class="container">
|
||
<div class="row align-items-center justify-content-center">
|
||
<div class="col-xl-6 col-lg-7 text-center position-relative page-title-extra-large">
|
||
<div class="d-flex flex-column small-screen">
|
||
<div class="mt-auto">
|
||
<h2 class="mb-10px text-white opacity-7 d-block fw-400 ls-0px">We combine thinking and technical</h2>
|
||
<h1 class="text-white fw-500 ls-minus-1px mb-0">Parallax background</h1>
|
||
</div>
|
||
<div class="mt-auto justify-content-center breadcrumb breadcrumb-style-01 fs-15 text-white">
|
||
<ul>
|
||
<li><a href="#" class="text-white">Home</a></li>
|
||
<li><a href="#" class="text-white">Features</a></li>
|
||
<li>Parallax</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<span class="comment"><!-- end page title --></span>
|
||
</pre>
|
||
</div>
|
||
<p><span class="label label-danger">Note</span>You can find this demo in <strong><a href="../page-title-parallax-background.html" target="_blank">page-title-parallax-background.html</a></strong> page for your reference.</p>
|
||
|
||
|
||
<h2 id="background-video">Background Video</h2>
|
||
<p>It includes page title and sub title aligned center with image video in background. See below image and code for more information.</p>
|
||
<br>
|
||
<a href="../page-title-background-video.html" target="_blank"><img src="images/background-video-title.jpg" alt="Crafto" /></a>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<span class="comment"><!-- start page title --></span>
|
||
<section class="page-title-background-video position-relative overflow-hidden ipad-top-space-margin">
|
||
<div class="opacity-extra-medium bg-black"></div>
|
||
<div class="container">
|
||
<div class="row align-items-center justify-content-center small-screen">
|
||
<div class="col-12 col-xxl-6 col-lg-7 col-md-10 position-relative page-title-extra-large text-center">
|
||
<h2 class="mb-10px text-white opacity-7 d-block fw-400 ls-0px">Intuitive custom made shortcodes</h2>
|
||
<h1 class="text-white fw-500 ls-minus-1px mb-0">Background video</h1>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<video loop="" autoplay="" playsinline controls="" muted class="html-video" poster="image path">
|
||
<source type="video/mp4" src="video path" />
|
||
<source type="video/webm" src="video path" />
|
||
</video>
|
||
</section>
|
||
<span class="comment"><!-- end page title --></span>
|
||
</pre>
|
||
</div>
|
||
<p><span class="label label-danger">Note</span>You can find this demo in <strong><a href="../page-title-background-video.html" target="_blank">page-title-background-video.html</a></strong> page for your reference.</p>
|
||
|
||
|
||
<h2 id="separate-breadcrumb">Separate Breadcrumb</h2>
|
||
<p>It includes page title and sub title aligned center with breadcrumbs at the bottom of page title. See below image and code for more information.</p>
|
||
<br>
|
||
<a href="../page-title-separate-breadcrumbs.html" target="_blank"><img src="images/separate-breadcrumb-title.jpg" alt="Crafto" /></a>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<span class="comment"><!-- start page title --></span>
|
||
<section class="page-title-separate-breadcrumbs cover-background top-space-margin" style="background-image: url(image path)">
|
||
<div class="opacity-medium bg-gradient-dark-transparent"></div>
|
||
<div class="container position-relative">
|
||
<div class="row align-items-lg-end justify-content-end justify-content-lg-center flex-column flex-lg-row extra-small-screen">
|
||
<div class="col-lg-7 col-md-10 position-relative page-title-large md-mb-30px">
|
||
<h1 class="text-white fw-500 ls-minus-1px mb-0">Separate breadcrumbs</h1>
|
||
</div>
|
||
<div class="col-lg-5 col-md-10 last-paragraph-no-margin">
|
||
<p class="fs-18 text-white">Powerful agency for corporate business. We create compelling web designs.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<span class="comment"><!-- end page title --></span>
|
||
<span class="comment"><!-- start breadcrumb --></span>
|
||
<section class="pt-15px pb-15px border-bottom border-color-extra-medium-gray">
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-12 breadcrumb breadcrumb-style-01 fs-15">
|
||
<ul>
|
||
<li><a href="#">Home</a></li>
|
||
<li><a href="#">Features</a></li>
|
||
<li>Breadcrumbs</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<span class="comment"><!-- end breadcrumbs --></span>
|
||
</pre>
|
||
</div>
|
||
<p><span class="label label-danger">Note</span>You can find this demo in <strong><a href="../page-title-separate-breadcrumbs.html" target="_blank">page-title-separate-breadcrumbs.html</a></strong> page for your reference.</p>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="row">
|
||
<div class="col-md-12 docs-content-inner" id="page-elements-page-layout">
|
||
<h1>Page Layout</h1>
|
||
<p>You can choose between <strong>3 Types</strong> of page layout while creating your page. The list of page layout options & its descriptions are provided below for your reference:</p>
|
||
<ul>
|
||
<li><a href="index.html#no-sidebar" class="inner-link">No Sidebar</a></li>
|
||
<li><a href="index.html#left-sidebar" class="inner-link">Left Sidebar</a></li>
|
||
<li><a href="index.html#right-sidebar" class="inner-link">Right Sidebar</a></li>
|
||
</ul>
|
||
|
||
<h2 id="no-sidebar">No Sidebar</h2>
|
||
<br>
|
||
<a href="../demo-fashion-store-no-sidebar.html" target="_blank"><img src="images/page-full-no-sidebar.jpg" alt="Crafto" /></a>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<span class="comment"><!-- start header --></span>
|
||
<header class="header-with-topbar">
|
||
<span class="comment"><!-- start header top bar --></span>
|
||
<div class="header-top-bar top-bar-light bg-base-color disable-fixed md-border-bottom border-color-transparent-dark-very-light">
|
||
...
|
||
</div>
|
||
<span class="comment"><!-- end header top bar --></span>
|
||
<span class="comment"><!-- start navigation --></span>
|
||
<nav class="navbar navbar-expand-lg header-light bg-white disable-fixed center-logo">
|
||
...
|
||
</nav>
|
||
<span class="comment"><!-- end navigation --></span>
|
||
</header>
|
||
<span class="comment"><!-- end header --> </span>
|
||
<span class="comment"><!-- start section --></span>
|
||
<section class="pt-0 ps-6 pe-6 lg-ps-2 lg-pe-2 sm-ps-0 sm-pe-0">
|
||
<div class="container-fluid">
|
||
<div class="row">
|
||
<div class="col-12 md-mb-60px">
|
||
...
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<span class="comment"><!-- end section --></span>
|
||
<span class="comment"><!-- start footer --></span>
|
||
<footer class="footer-dark bg-dark-gray p-0">
|
||
...
|
||
</footer>
|
||
<span class="comment"><!-- end footer --></span>
|
||
</pre>
|
||
</div>
|
||
<p><span class="label label-danger">Note</span>You can find code in <strong><a href="../demo-fashion-store-no-sidebar.html" target="_blank">demo-fashion-store-no-sidebar.html</a></strong> page for your reference.</p>
|
||
|
||
|
||
<h2 id="left-sidebar">Left Sidebar</h2>
|
||
<br>
|
||
<a href="../demo-fashion-store-shop.html" target="_blank"><img src="images/page-with-left-sidebar.jpg" alt="Crafto" /></a>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<span class="comment"><!-- start header --></span>
|
||
<header class="header-with-topbar">
|
||
<span class="comment"><!-- start header top bar --></span>
|
||
<div class="header-top-bar top-bar-light bg-base-color disable-fixed md-border-bottom border-color-transparent-dark-very-light">
|
||
...
|
||
</div>
|
||
<span class="comment"><!-- end header top bar --></span>
|
||
<span class="comment"><!-- start navigation --></span>
|
||
<nav class="navbar navbar-expand-lg header-light bg-white disable-fixed center-logo">
|
||
...
|
||
</nav>
|
||
<span class="comment"><!-- end navigation --></span>
|
||
</header>
|
||
<span class="comment"><!-- end header --> </span>
|
||
<span class="comment"><!-- start section --></span>
|
||
<section class="top-space-margin half-section bg-gradient-very-light-gray">
|
||
...
|
||
</section>
|
||
<span class="comment"><!-- end section --></span>
|
||
<span class="comment"><!-- start section --></span>
|
||
<section class="pt-0 ps-6 pe-6 lg-ps-2 lg-pe-2 sm-ps-0 sm-pe-0">
|
||
<div class="container-fluid">
|
||
<div class="row flex-row-reverse">
|
||
<div class="col-xxl-10 col-lg-9 ps-5 md-ps-15px md-mb-60px">
|
||
...
|
||
</div>
|
||
<div class="col-xxl-2 col-lg-3 shop-sidebar" data-anime='{ "el": "childs", "translateY": [-15, 0], "opacity": [0,1], "duration": 300, "delay": 0, "staggervalue": 300, "easing": "easeOutQuad" }'>
|
||
...
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<span class="comment"><!-- end section --></span>
|
||
<span class="comment"><!-- start footer --></span>
|
||
<footer class="footer-dark bg-dark-gray p-0">
|
||
...
|
||
</footer>
|
||
<span class="comment"><!-- end footer --></span>
|
||
</pre>
|
||
</div>
|
||
<p><span class="label label-danger">Note</span>You can find code in <strong><a href="../demo-fashion-store-shop.html" target="_blank">demo-fashion-store-shop.html</a></strong> page for your reference.</p>
|
||
|
||
|
||
<h2 id="right-sidebar">Right Sidebar</h2>
|
||
<br>
|
||
<a href="../demo-fashion-store-right-sidebar.html" target="_blank"><img src="images/page-with-right-sidebar.jpg" alt="Crafto" /></a>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<span class="comment"><!-- start header --></span>
|
||
<header class="header-with-topbar">
|
||
<span class="comment"><!-- start header top bar --></span>
|
||
<div class="header-top-bar top-bar-light bg-base-color disable-fixed md-border-bottom border-color-transparent-dark-very-light">
|
||
<div class="container-fluid">
|
||
...
|
||
</div>
|
||
</div>
|
||
<span class="comment"><!-- end header top bar --></span>
|
||
<span class="comment"><!-- start navigation --></span>
|
||
<nav class="navbar navbar-expand-lg header-light bg-white disable-fixed center-logo">
|
||
...
|
||
</nav>
|
||
<span class="comment"><!-- end navigation --></span>
|
||
</header>
|
||
<span class="comment"><!-- end header --> </span>
|
||
<span class="comment"><!-- start section --></span>
|
||
<section class="pt-0 ps-6 pe-6 lg-ps-2 lg-pe-2 sm-ps-0 sm-pe-0">
|
||
<div class="container-fluid">
|
||
<div class="row">
|
||
<div class="col-xxl-10 col-lg-9 pe-5 md-pe-15px md-mb-60px">
|
||
...
|
||
</div>
|
||
<div class="col-xxl-2 col-lg-3 shop-sidebar" data-anime='{ "el": "childs", "translateY": [-15, 0], "opacity": [0,1], "duration": 300, "delay": 0, "staggervalue": 300, "easing": "easeOutQuad" }'>
|
||
...
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<span class="comment"><!-- end section --></span>
|
||
<span class="comment"><!-- start footer --></span>
|
||
<footer class="footer-dark bg-dark-gray p-0">
|
||
...
|
||
</footer>
|
||
<span class="comment"><!-- end footer --></span>
|
||
</pre>
|
||
</div>
|
||
<p><span class="label label-danger">Note</span>You can find code in <strong><a href="../demo-fashion-store-right-sidebar.html" target="_blank">demo-fashion-store-right-sidebar.html</a></strong> page for your reference.</p>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="row">
|
||
<div class="col-md-12 docs-content-inner" id="page-elements-columns-grid">
|
||
<h1>Columns & Grid</h1>
|
||
<p class="no-margin">Basic grid layouts to get you familiar with building within the Bootstrap grid system. We have designed entire template in BootStrap 5, so you can find detail documentation on grid here <a href="https://getbootstrap.com/docs/5.0/layout/grid/" target="_blank">https://getbootstrap.com/docs/5.0/layout/grid/</a></p>
|
||
<div class="container width-100 columns no-padding">
|
||
|
||
<h2>Three Equal Columns</h2>
|
||
<p>Get three equal-width columns <strong>starting at desktops and scaling to large desktops</strong>. On mobile devices, tablets and below, the columns will automatically stack.</p>
|
||
<div class="row" style="margin: 0">
|
||
<div class="col-sm-4 col-xs-12"><code>Column</code></div>
|
||
<div class="col-sm-4 col-xs-12"><code>Column</code></div>
|
||
<div class="col-sm-4 col-xs-12"><code>Column</code></div>
|
||
</div>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col">
|
||
Column
|
||
</div>
|
||
<div class="col">
|
||
Column
|
||
</div>
|
||
<div class="col">
|
||
Column
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</pre>
|
||
</div>
|
||
<p>The above example creates three equal-width columns on small, medium, large, and extra large devices using our predefined grid classes. Those columns are centered in the page with the parent <code>.container.</code></p>
|
||
|
||
|
||
<h2>Grid Options</h2>
|
||
<p>Bootstrap’s grid system can adapt across all six default breakpoints, and any breakpoints you customize. The six default grid tiers are as follow:</p>
|
||
<ul class="grid-content">
|
||
<li>Extra small (xs)</li>
|
||
<li>Small (sm)</li>
|
||
<li>Medium (md)</li>
|
||
<li>Large (lg)</li>
|
||
<li>Extra large (xl)</li>
|
||
<li>Extra extra large (xxl)</li>
|
||
</ul>
|
||
<p>As noted above, each of these breakpoints have their own container, unique class prefix, and modifiers. Here’s how the grid changes across these breakpoints:</p>
|
||
<div class="row" style="margin: 0">
|
||
<table class="table table-bordered table-striped">
|
||
<thead>
|
||
<tr>
|
||
<th scope="col"></th>
|
||
<th scope="col">
|
||
xs<br>
|
||
<span class="fw-normal"><576px</span>
|
||
</th>
|
||
<th scope="col">
|
||
sm<br>
|
||
<span class="fw-normal">≥576px</span>
|
||
</th>
|
||
<th scope="col">
|
||
md<br>
|
||
<span class="fw-normal">≥768px</span>
|
||
</th>
|
||
<th scope="col">
|
||
lg<br>
|
||
<span class="fw-normal">≥992px</span>
|
||
</th>
|
||
<th scope="col">
|
||
xl<br>
|
||
<span class="fw-normal">≥1200px</span>
|
||
</th>
|
||
<th scope="col">
|
||
xxl<br>
|
||
<span class="fw-normal">≥1400px</span>
|
||
</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<th class="text-nowrap" scope="row">Container <code class="fw-normal">max-width</code></th>
|
||
<td>None (auto)</td>
|
||
<td>540px</td>
|
||
<td>720px</td>
|
||
<td>960px</td>
|
||
<td>1140px</td>
|
||
<td>1320px</td>
|
||
</tr>
|
||
<tr>
|
||
<th class="text-nowrap" scope="row">Class prefix</th>
|
||
<td><code>.col-</code></td>
|
||
<td><code>.col-sm-</code></td>
|
||
<td><code>.col-md-</code></td>
|
||
<td><code>.col-lg-</code></td>
|
||
<td><code>.col-xl-</code></td>
|
||
<td><code>.col-xxl-</code></td>
|
||
</tr>
|
||
<tr>
|
||
<th class="text-nowrap" scope="row"># of columns</th>
|
||
<td colspan="6">12</td>
|
||
</tr>
|
||
<tr>
|
||
<th class="text-nowrap" scope="row">Gutter width</th>
|
||
<td colspan="6">1.5rem (.75rem on left and right)</td>
|
||
</tr>
|
||
<tr>
|
||
<th class="text-nowrap" scope="row">Custom gutters</th>
|
||
<td colspan="6"><a href="https://getbootstrap.com/docs/5.0/layout/gutters/" target="_blank">Yes</a></td>
|
||
</tr>
|
||
<tr>
|
||
<th class="text-nowrap" scope="row">Nestable</th>
|
||
<td colspan="6"><a href="index.html#nesting">Yes</a></td>
|
||
</tr>
|
||
<tr>
|
||
<th class="text-nowrap" scope="row">Column ordering</th>
|
||
<td colspan="6"><a href="index.html#reordering">Yes</a></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
|
||
<h2>Auto-layout Columns</h2>
|
||
<p>Utilize breakpoint-specific column classes for easy column sizing without an explicit numbered class like <code>.col-sm-6</code>.</p>
|
||
<h2>Equal Width</h2>
|
||
<p>For example, here are two grid layouts that apply to every device and viewport, from <code>xs</code> to <code>xxl</code>. Add any number of unit-less classes for each breakpoint you need and every column will be the same width.</p>
|
||
<div class="row" style="margin: 0">
|
||
<div class="col-sm-6 col-xs-12"><code>1 of 2</code></div>
|
||
<div class="col-sm-6 col-xs-12"><code>2 of 2</code></div>
|
||
</div>
|
||
<div class="row" style="margin: 0">
|
||
<div class="col-sm-4 col-xs-12"><code>1 of 3</code></div>
|
||
<div class="col-sm-4 col-xs-12"><code>2 of 3</code></div>
|
||
<div class="col-sm-4 col-xs-12"><code>3 of 3</code></div>
|
||
</div>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col">
|
||
1 of 2
|
||
</div>
|
||
<div class="col">
|
||
2 of 2
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col">
|
||
1 of 3
|
||
</div>
|
||
<div class="col">
|
||
2 of 3
|
||
</div>
|
||
<div class="col">
|
||
3 of 3
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</pre>
|
||
</div>
|
||
|
||
|
||
<h2>Variable Width Content</h2>
|
||
<p>Use <code>col-{breakpoint}-auto</code> classes to size columns based on the natural width of their content.</p>
|
||
<div class="row" style="margin: 0">
|
||
<div class="col-sm-2 col-xs-12 col-md-offset-2"><code>1 of 3</code></div>
|
||
<div class="col-sm-4 col-xs-12"><code>Variable width content</code></div>
|
||
<div class="col-sm-2 col-xs-12"><code>3 of 3</code></div>
|
||
</div>
|
||
<div class="row" style="margin: 0">
|
||
<div class="col-sm-5 col-xs-12"><code>1 of 3</code></div>
|
||
<div class="col-sm-3 col-xs-12"><code>Variable width content</code></div>
|
||
<div class="col-sm-4 col-xs-12"><code>3 of 3</code></div>
|
||
</div>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<div class="container">
|
||
<div class="row justify-content-md-center">
|
||
<div class="col col-lg-2">
|
||
1 of 3
|
||
</div>
|
||
<div class="col-md-auto">
|
||
Variable width content
|
||
</div>
|
||
<div class="col col-lg-2">
|
||
3 of 3
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col">
|
||
1 of 3
|
||
</div>
|
||
<div class="col-md-auto">
|
||
Variable width content
|
||
</div>
|
||
<div class="col col-lg-2">
|
||
3 of 3
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</pre>
|
||
</div>
|
||
|
||
|
||
<h2>Responsive Classes</h2>
|
||
<p>Bootstrap’s grid includes six tiers of predefined classes for building complex responsive layouts. Customize the size of your columns on extra small, small, medium, large, or extra large devices however you see fit.</p>
|
||
<h2>All Breakpoints</h2>
|
||
<p>For grids that are the same from the smallest of devices to the largest, use the <code style="margin:0">.col</code> and <code style="margin:0">.col-*</code> classes. Specify a numbered class when you need a particularly sized column; otherwise, feel free to stick to <code style="margin: 0">.col</code>.</p>
|
||
<div class="row" style="margin: 0">
|
||
<div class="col-sm-3 col-xs-12"><code>col</code></div>
|
||
<div class="col-sm-3 col-xs-12"><code>col</code></div>
|
||
<div class="col-sm-3 col-xs-12"><code>col</code></div>
|
||
<div class="col-sm-3 col-xs-12"><code>col</code></div>
|
||
</div>
|
||
<div class="row" style="margin: 0">
|
||
<div class="col-sm-8 col-xs-12"><code>col-8</code></div>
|
||
<div class="col-sm-4 col-xs-12"><code>col-4</code></div>
|
||
</div>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col">col</div>
|
||
<div class="col">col</div>
|
||
<div class="col">col</div>
|
||
<div class="col">col</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-8">col-8</div>
|
||
<div class="col-4">col-4</div>
|
||
</div>
|
||
</div>
|
||
</pre>
|
||
</div>
|
||
|
||
|
||
<h2>Stacked to Horizontal</h2>
|
||
<p>Using a single set of <code>.col-sm-* </code>classes, you can create a basic grid system that starts out stacked and becomes horizontal at the small breakpoint (<code>sm</code>).</p>
|
||
<div class="row" style="margin: 0">
|
||
<div class="col-sm-8 col-xs-12"><code>col-sm-8</code></div>
|
||
<div class="col-sm-4 col-xs-12"><code>col-sm-4</code></div>
|
||
</div>
|
||
<div class="row" style="margin: 0">
|
||
<div class="col-sm-4 col-xs-12"><code>col-sm</code></div>
|
||
<div class="col-sm-4 col-xs-12"><code>col-sm</code></div>
|
||
<div class="col-sm-4 col-xs-12"><code>col-sm</code></div>
|
||
</div>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-sm-8">col-sm-8</div>
|
||
<div class="col-sm-4">col-sm-4</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-sm">col-sm</div>
|
||
<div class="col-sm">col-sm</div>
|
||
<div class="col-sm">col-sm</div>
|
||
</div>
|
||
</div>
|
||
</pre>
|
||
</div>
|
||
|
||
|
||
<h2>Mix and Match</h2>
|
||
<p>Don’t want your columns to simply stack in some grid tiers? Use a combination of different classes for each tier as needed. See the example below for a better idea of how it all works.</p>
|
||
<div class="row" style="margin: 0">
|
||
<div class="col-sm-8 col-xs-12"><code>.col-md-8</code></div>
|
||
<div class="col-sm-4 col-xs-6"><code>.col-6 .col-md-4</code></div>
|
||
</div>
|
||
<div class="row" style="margin: 0">
|
||
<div class="col-sm-4 col-xs-6"><code>.col-6 .col-md-4</code></div>
|
||
<div class="col-sm-4 col-xs-6"><code>.col-6 .col-md-4</code></div>
|
||
<div class="col-sm-4 col-xs-6"><code>.col-6 .col-md-4</code></div>
|
||
</div>
|
||
<div class="row" style="margin: 0">
|
||
<div class="col-xs-6"><code>.col-6</code></div>
|
||
<div class="col-xs-6"><code>.col-6</code></div>
|
||
</div>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<div class="container">
|
||
<span class="comment"><!-- Stack the columns on mobile by making one full-width and the other half-width --></span>
|
||
<div class="row">
|
||
<div class="col-md-8">.col-md-8</div>
|
||
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
|
||
</div>
|
||
|
||
<span class="comment"><!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop --></span>
|
||
<div class="row">
|
||
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
|
||
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
|
||
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
|
||
</div>
|
||
|
||
<span class="comment"><!-- Columns are always 50% wide, on mobile and desktop --></span>
|
||
<div class="row">
|
||
<div class="col-6">.col-6</div>
|
||
<div class="col-6">.col-6</div>
|
||
</div>
|
||
</div>
|
||
</pre>
|
||
</div>
|
||
|
||
|
||
<h2 id="row-columns">Row Columns</h2>
|
||
<p>Use the responsive <code style="margin: 0">.row-cols-*</code> classes to quickly set the number of columns that best render your content and layout. Whereas normal <code style="margin: 0">.col-*</code> classes apply to the individual columns (e.g., <code style="margin: 0">.col-md-4</code>), the row columns classes are set on the parent <code style="margin: 0">.row</code> as a default for contained columns. With <code style="margin: 0">.row-cols-auto</code> you can give the columns their natural width.</p>
|
||
<p>Use these row columns classes to quickly create basic grid layouts or to control your card layouts and override when needed at the column level.</p>
|
||
<div class="row" style="margin: 0">
|
||
<div class="col-sm-6 col-xs-12"><code>Column</code></div>
|
||
<div class="col-sm-6 col-xs-12"><code>Column</code></div>
|
||
<div class="col-sm-6 col-xs-12"><code>Column</code></div>
|
||
<div class="col-sm-6 col-xs-12"><code>Column</code></div>
|
||
</div>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<div class="container">
|
||
<div class="row row-cols-2">
|
||
<div class="col">Column</div>
|
||
<div class="col">Column</div>
|
||
<div class="col">Column</div>
|
||
<div class="col">Column</div>
|
||
</div>
|
||
</div>
|
||
</pre>
|
||
</div>
|
||
<div class="row" style="margin: 0">
|
||
<div class="col-sm-4 col-xs-12"><code>Column</code></div>
|
||
<div class="col-sm-4 col-xs-12"><code>Column</code></div>
|
||
<div class="col-sm-4 col-xs-12"><code>Column</code></div>
|
||
<div class="col-sm-4 col-xs-12"><code>Column</code></div>
|
||
</div>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<div class="container">
|
||
<div class="row row-cols-3">
|
||
<div class="col">Column</div>
|
||
<div class="col">Column</div>
|
||
<div class="col">Column</div>
|
||
<div class="col">Column</div>
|
||
</div>
|
||
</div>
|
||
</pre>
|
||
</div>
|
||
<div class="row" style="margin: 0">
|
||
<div class="col-sm-3 col-xs-12"><code>Column</code></div>
|
||
<div class="col-sm-3 col-xs-12"><code>Column</code></div>
|
||
<div class="col-sm-3 col-xs-12"><code>Column</code></div>
|
||
<div class="col-sm-3 col-xs-12"><code>Column</code></div>
|
||
</div>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<div class="container">
|
||
<div class="row row-cols-auto">
|
||
<div class="col">Column</div>
|
||
<div class="col">Column</div>
|
||
<div class="col">Column</div>
|
||
<div class="col">Column</div>
|
||
</div>
|
||
</div>
|
||
</pre>
|
||
</div>
|
||
<div class="row" style="margin: 0">
|
||
<div class="col-sm-3 col-xs-12"><code>Column</code></div>
|
||
<div class="col-sm-3 col-xs-12"><code>Column</code></div>
|
||
<div class="col-sm-3 col-xs-12"><code>Column</code></div>
|
||
<div class="col-sm-3 col-xs-12"><code>Column</code></div>
|
||
</div>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<div class="container">
|
||
<div class="row row-cols-4">
|
||
<div class="col">Column</div>
|
||
<div class="col">Column</div>
|
||
<div class="col">Column</div>
|
||
<div class="col">Column</div>
|
||
</div>
|
||
</div>
|
||
</pre>
|
||
</div>
|
||
<div class="row" style="margin: 0">
|
||
<div class="col-sm-3 col-xs-12"><code>Column</code></div>
|
||
<div class="col-sm-3 col-xs-12"><code>Column</code></div>
|
||
<div class="col-sm-6 col-xs-12"><code>Column</code></div>
|
||
<div class="col-sm-3 col-xs-12"><code>Column</code></div>
|
||
</div>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<div class="container">
|
||
<div class="row row-cols-4">
|
||
<div class="col">Column</div>
|
||
<div class="col">Column</div>
|
||
<div class="col-6">Column</div>
|
||
<div class="col">Column</div>
|
||
</div>
|
||
</div>
|
||
</pre>
|
||
</div>
|
||
<div class="row" style="margin: 0">
|
||
<div class="col-sm-3 col-xs-12"><code>Column</code></div>
|
||
<div class="col-sm-3 col-xs-12"><code>Column</code></div>
|
||
<div class="col-sm-3 col-xs-12"><code>Column</code></div>
|
||
<div class="col-sm-3 col-xs-12"><code>Column</code></div>
|
||
</div>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<div class="container">
|
||
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
|
||
<div class="col">Column</div>
|
||
<div class="col">Column</div>
|
||
<div class="col">Column</div>
|
||
<div class="col">Column</div>
|
||
</div>
|
||
</div>
|
||
</pre>
|
||
</div>
|
||
<div class="row" style="margin: 0">
|
||
<div class="col-sm-4 col-xs-12"><code>Column</code></div>
|
||
<div class="col-sm-4 col-xs-12"><code>Column</code></div>
|
||
<div class="col-sm-4 col-xs-12"><code>Column</code></div>
|
||
<div class="col-sm-4 col-xs-12"><code>Column</code></div>
|
||
<div class="col-sm-4 col-xs-12"><code>Column</code></div>
|
||
<div class="col-sm-4 col-xs-12"><code>Column</code></div>
|
||
<div class="col-sm-2 col-xs-12"><code>Column</code></div>
|
||
<div class="col-sm-2 col-xs-12"><code>Column</code></div>
|
||
<div class="col-sm-2 col-xs-12"><code>Column</code></div>
|
||
<div class="col-sm-2 col-xs-12"><code>Column</code></div>
|
||
<div class="col-sm-2 col-xs-12"><code>Column</code></div>
|
||
<div class="col-sm-2 col-xs-12"><code>Column</code></div>
|
||
</div>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<div class="container">
|
||
<div class="row row-cols-2 row-cols-lg-3">
|
||
<div class="col">Column</div>
|
||
<div class="col">Column</div>
|
||
<div class="col">Column</div>
|
||
<div class="col">Column</div>
|
||
<div class="col">Column</div>
|
||
<div class="col">Column</div>
|
||
<div class="col-4 col-lg-2">Column</div>
|
||
<div class="col-4 col-lg-2">Column</div>
|
||
<div class="col-4 col-lg-2">Column</div>
|
||
<div class="col-4 col-lg-2">Column</div>
|
||
<div class="col-4 col-lg-2">Column</div>
|
||
<div class="col-4 col-lg-2">Column</div>
|
||
</div>
|
||
</div>
|
||
</pre>
|
||
</div>
|
||
<p>You can also use the accompanying Sass mixin, <code>row-cols()</code>:</p>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
.element {
|
||
// Three columns to start
|
||
@include row-cols(3);
|
||
|
||
// Five columns from medium breakpoint up
|
||
@include media-breakpoint-up(md) {
|
||
@include row-cols(5);
|
||
}
|
||
}
|
||
</pre>
|
||
</div>
|
||
|
||
|
||
<h2 id="nesting">Nesting</h2>
|
||
<p>To nest your content with the default grid, add a new <code class="no-margin">.row</code> and set of <code class="no-margin">.col-sm-*</code> columns within an existing <code class="no-margin">.col-sm-*</code> column. Nested rows should include a set of columns that add up to 12 or fewer (it is not required that you use all 12 available columns).</p>
|
||
<div class="row" style="margin: 0; margin-bottom: 10px">
|
||
<div class="col-sm-2 col-xs-12"><code>Level 1: .col-sm-3</code></div>
|
||
<div class="col-sm-5 col-xs-12"><code>Level 2: .col-8 .col-sm-6</code></div>
|
||
<div class="col-sm-5 col-xs-12"><code>Level 2: .col-4 .col-sm-6</code></div>
|
||
</div>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-sm-3">
|
||
Level 1: .col-sm-3
|
||
</div>
|
||
<div class="col-sm-9">
|
||
<div class="row">
|
||
<div class="col-8 col-sm-6">
|
||
Level 2: .col-8 .col-sm-6
|
||
</div>
|
||
<div class="col-4 col-sm-6">
|
||
Level 2: .col-4 .col-sm-6
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</pre>
|
||
</div>
|
||
|
||
|
||
<h2>Alignment</h2>
|
||
<p>Use flexbox alignment utilities to vertically and horizontally align columns.</p>
|
||
<h2>Vertical Alignment</h2>
|
||
<div class="row" style="margin: 0; padding-bottom: 80px; background-color: #fbfbfb; margin-bottom: 15px">
|
||
<div class="col-sm-4 col-xs-12"><code>One of three columns</code></div>
|
||
<div class="col-sm-4 col-xs-12"><code>One of three columns</code></div>
|
||
<div class="col-sm-4 col-xs-12"><code>One of three columns</code></div>
|
||
</div>
|
||
<div class="row" style="margin: 0; padding: 40px 0; background-color: #fbfbfb; margin-bottom: 15px">
|
||
<div class="col-sm-4 col-xs-12"><code>One of three columns</code></div>
|
||
<div class="col-sm-4 col-xs-12"><code>One of three columns</code></div>
|
||
<div class="col-sm-4 col-xs-12"><code>One of three columns</code></div>
|
||
</div>
|
||
<div class="row" style="margin: 0; padding-top: 80px; background-color: #fbfbfb; margin-bottom: 15px">
|
||
<div class="col-sm-4 col-xs-12"><code>One of three columns</code></div>
|
||
<div class="col-sm-4 col-xs-12"><code>One of three columns</code></div>
|
||
<div class="col-sm-4 col-xs-12"><code>One of three columns</code></div>
|
||
</div>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<div class="container">
|
||
<div class="row align-items-start">
|
||
<div class="col">
|
||
One of three columns
|
||
</div>
|
||
<div class="col">
|
||
One of three columns
|
||
</div>
|
||
<div class="col">
|
||
One of three columns
|
||
</div>
|
||
</div>
|
||
<div class="row align-items-center">
|
||
<div class="col">
|
||
One of three columns
|
||
</div>
|
||
<div class="col">
|
||
One of three columns
|
||
</div>
|
||
<div class="col">
|
||
One of three columns
|
||
</div>
|
||
</div>
|
||
<div class="row align-items-end">
|
||
<div class="col">
|
||
One of three columns
|
||
</div>
|
||
<div class="col">
|
||
One of three columns
|
||
</div>
|
||
<div class="col">
|
||
One of three columns
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</pre>
|
||
</div>
|
||
<div class="row" style="margin: 0; background-color: #fbfbfb;">
|
||
<div class="col-sm-4 col-xs-12"><code>One of three columns</code></div>
|
||
<div class="col-sm-4 col-xs-12" style=" margin: 47px 0;"><code>One of three columns</code></div>
|
||
<div class="col-sm-4 col-xs-12" style=" margin-top: 94px;"><code>One of three columns</code></div>
|
||
</div>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col align-self-start">
|
||
One of three columns
|
||
</div>
|
||
<div class="col align-self-center">
|
||
One of three columns
|
||
</div>
|
||
<div class="col align-self-end">
|
||
One of three columns
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</pre>
|
||
</div>
|
||
|
||
|
||
<h2>Horizontal Alignment</h2>
|
||
<div class="row" style="margin: 0; margin-bottom: 10px">
|
||
<div class="col-sm-4 col-xs-12"><code>One of two columns</code></div>
|
||
<div class="col-sm-4 col-xs-12"><code>One of two columns</code></div>
|
||
</div>
|
||
<div class="row" style="margin: 0; margin-bottom: 10px">
|
||
<div class="col-sm-4 col-sm-offset-2 col-xs-12"><code>One of two columns</code></div>
|
||
<div class="col-sm-4 col-xs-12"><code>One of two columns</code></div>
|
||
</div>
|
||
<div class="row" style="margin: 0; margin-bottom: 10px">
|
||
<div class="col-sm-4 col-sm-offset-4 col-xs-12"><code>One of two columns</code></div>
|
||
<div class="col-sm-4 col-xs-12"><code>One of two columns</code></div>
|
||
</div>
|
||
<div class="row" style="margin: 0; margin-bottom: 10px">
|
||
<div class="col-sm-4 col-sm-offset-1 col-xs-12"><code>One of two columns</code></div>
|
||
<div class="col-sm-4 col-sm-offset-2 col-xs-12"><code>One of two columns</code></div>
|
||
</div>
|
||
<div class="row" style="margin: 0; margin-bottom: 10px">
|
||
<div class="col-sm-4 col-xs-12"><code>One of two columns</code></div>
|
||
<div class="col-sm-4 col-sm-offset-4 col-xs-12"><code>One of two columns</code></div>
|
||
</div>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<div class="container">
|
||
<div class="row justify-content-start">
|
||
<div class="col-4">
|
||
One of two columns
|
||
</div>
|
||
<div class="col-4">
|
||
One of two columns
|
||
</div>
|
||
</div>
|
||
<div class="row justify-content-center">
|
||
<div class="col-4">
|
||
One of two columns
|
||
</div>
|
||
<div class="col-4">
|
||
One of two columns
|
||
</div>
|
||
</div>
|
||
<div class="row justify-content-end">
|
||
<div class="col-4">
|
||
One of two columns
|
||
</div>
|
||
<div class="col-4">
|
||
One of two columns
|
||
</div>
|
||
</div>
|
||
<div class="row justify-content-around">
|
||
<div class="col-4">
|
||
One of two columns
|
||
</div>
|
||
<div class="col-4">
|
||
One of two columns
|
||
</div>
|
||
</div>
|
||
<div class="row justify-content-between">
|
||
<div class="col-4">
|
||
One of two columns
|
||
</div>
|
||
<div class="col-4">
|
||
One of two columns
|
||
</div>
|
||
</div>
|
||
<div class="row justify-content-evenly">
|
||
<div class="col-4">
|
||
One of two columns
|
||
</div>
|
||
<div class="col-4">
|
||
One of two columns
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</pre>
|
||
</div>
|
||
|
||
|
||
<h2>Column Wrapping</h2>
|
||
<p>If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.</p>
|
||
<div class="row" style="margin: 0">
|
||
<div class="col-sm-9 col-xs-12"><code>.col-9</code></div>
|
||
<div class="col-sm-4 col-xs-12"><code>.col-4 <br> Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</code></div>
|
||
<div class="col-sm-6 col-xs-12"><code>.col-6<br> Subsequent columns continue along the new line.</code></div>
|
||
</div>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-9">.col-9</div>
|
||
<div class="col-4">.col-4<br>Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
|
||
<div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
|
||
</div>
|
||
</div>
|
||
</pre>
|
||
</div>
|
||
|
||
|
||
<h2>Column Breaks</h2>
|
||
<p>Breaking columns to a new line in flexbox requires a small hack: add an element with <code style="margin: 0">width: 100%</code> wherever you want to wrap your columns to a new line. Normally this is accomplished with multiple <code style="margin: 0">.row</code>, but not every implementation method can account for this.</p>
|
||
<div class="row" style="margin: 0">
|
||
<div class="col-sm-3 col-xs-12"><code>.col-6 .col-sm-3</code></div>
|
||
<div class="col-sm-3 col-xs-12"><code>.col-6 .col-sm-3</code></div>
|
||
<div class="col-sm-3 col-xs-12" style="clear: left"><code>.col-6 .col-sm-3</code></div>
|
||
<div class="col-sm-3 col-xs-12"><code>.col-6 .col-sm-3</code></div>
|
||
</div>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
|
||
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
|
||
|
||
<!-- Force next columns to break to new line -->
|
||
<div class="w-100"></div>
|
||
|
||
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
|
||
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
|
||
</div>
|
||
</div>
|
||
</pre>
|
||
</div>
|
||
<p>You may also apply this break at specific breakpoints with our <a href="https://getbootstrap.com/docs/5.0/utilities/display/" target="_blank">responsive display utilities</a></p>
|
||
<div class="row" style="margin: 0">
|
||
<div class="col-sm-4 col-xs-12"><code>.col-6 .col-sm-4</code></div>
|
||
<div class="col-sm-4 col-xs-12"><code>.col-6 .col-sm-4</code></div>
|
||
<div class="col-sm-4 col-xs-12"><code>.col-6 .col-sm-4</code></div>
|
||
<div class="col-sm-4 col-xs-12"><code>.col-6 .col-sm-4</code></div>
|
||
</div>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
|
||
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
|
||
|
||
<!-- Force next columns to break to new line at md breakpoint and up -->
|
||
<div class="w-100 d-none d-md-block"></div>
|
||
|
||
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
|
||
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
|
||
</div>
|
||
</div></pre>
|
||
</div>
|
||
|
||
|
||
<h2 id="reordering">Order classes</h2>
|
||
<p>Use <code class="no-margin">.order-</code> classes for controlling the <b>visual order</b> of your content. These classes are responsive, so you can set the <code class="no-margin">order</code> by breakpoint (e.g., <code class="no-margin">.order-1.order-md-2</code>). Includes support for 1 through 5 across all six grid tiers.</p>
|
||
<div class="row" style="margin: 0">
|
||
<div class="col-sm-4 col-xs-12"><code>First in DOM, no order applied</code></div>
|
||
<div class="col-sm-4 col-xs-12"><code>Third in DOM, with an order of 1</code></div>
|
||
<div class="col-sm-4 col-xs-12"><code>Second in DOM, with a larger order</code></div>
|
||
</div>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col">
|
||
First in DOM, no order applied
|
||
</div>
|
||
<div class="col order-5">
|
||
Second in DOM, with a larger order
|
||
</div>
|
||
<div class="col order-1">
|
||
Third in DOM, with an order of 1
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</pre>
|
||
</div>
|
||
<p>There are also responsive <code class="no-margin">.order-first</code> and <code class="no-margin">.order-last</code> classes that change the <code class="no-margin">order</code> of an element by applying <code class="no-margin">order: -1</code> and <code class="no-margin">order: 6</code> respectively. These classes can also be intermixed with the numbered <code class="no-margin">.order-*</code> classes as needed.</p>
|
||
<div class="row" style="margin: 0">
|
||
<div class="col-sm-4 col-xs-12"><code>Third in DOM, ordered first</code></div>
|
||
<div class="col-sm-4 col-xs-12"><code>Second in DOM, unordered</code></div>
|
||
<div class="col-sm-4 col-xs-12"><code>First in DOM, ordered last</code></div>
|
||
</div>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col order-last">
|
||
First in DOM, ordered last
|
||
</div>
|
||
<div class="col">
|
||
Second in DOM, unordered
|
||
</div>
|
||
<div class="col order-first">
|
||
Third in DOM, ordered first
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</pre>
|
||
</div>
|
||
|
||
|
||
<h2>Offset Classes</h2>
|
||
<p>Move columns to the right using <code class="no-margin">.offset-md-*</code> classes. These classes increase the left margin of a column by <code class="no-margin">*</code> columns. For example, <code class="no-margin">.offset-md-4</code> moves <code class="no-margin">.col-md-4</code> over four columns.</p>
|
||
<div class="row" style="margin: 0; margin-bottom: 10px">
|
||
<div class="col-sm-4 col-xs-12"><code>.col-md-4</code></div>
|
||
<div class="col-sm-4 col-xs-12 col-md-offset-4"><code>.col-md-4 .offset-md-4</code></div>
|
||
</div>
|
||
<div class="row" style="margin: 0; margin-bottom: 10px">
|
||
<div class="col-sm-3 col-xs-12 col-md-offset-3"><code>.col-md-3 .offset-md-3</code></div>
|
||
<div class="col-sm-3 col-xs-12 col-md-offset-3"><code>.col-md-3 .offset-md-3</code></div>
|
||
</div>
|
||
<div class="row" style="margin: 0; margin-bottom: 10px">
|
||
<div class="col-sm-6 col-xs-12 col-md-offset-3"><code>.col-md-6 .offset-md-3</code></div>
|
||
</div>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-md-4">.col-md-4</div>
|
||
<div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
|
||
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
|
||
</div>
|
||
</div>
|
||
</pre>
|
||
</div>
|
||
|
||
|
||
<h2>Margin Utilities</h2>
|
||
<p>With the move to flexbox in v4, you can use Margin Utilities like <code class="no-margin">.me-auto</code> to force sibling columns away from one another.</p>
|
||
<div class="row" style="margin: 0; margin-bottom: 10px">
|
||
<div class="col-sm-4 col-xs-12"><code>.col-md-4</code></div>
|
||
<div class="col-sm-4 col-xs-12 col-md-offset-4"><code>.col-md-4 .ms-auto</code></div>
|
||
</div>
|
||
<div class="row" style="margin: 0; margin-bottom: 10px">
|
||
<div class="col-sm-3 col-xs-12 col-md-offset-3"><code>.col-md-3 .ms-md-auto</code></div>
|
||
<div class="col-sm-3 col-xs-12 col-md-offset-3"><code>.col-md-3 .ms-md-auto</code></div>
|
||
</div>
|
||
<div class="row" style="margin: 0; margin-bottom: 10px">
|
||
<div class="col-sm-2 col-xs-12"><code>.col-auto .me-auto</code></div>
|
||
<div class="col-sm-2 col-xs-12 col-md-offset-8"><code>.col-auto</code></div>
|
||
</div>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-md-4">.col-md-4</div>
|
||
<div class="col-md-4 ms-auto">.col-md-4 .ms-auto</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-md-3 ms-md-auto">.col-md-3 .ms-md-auto</div>
|
||
<div class="col-md-3 ms-md-auto">.col-md-3 .ms-md-auto</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-auto me-auto">.col-auto .me-auto</div>
|
||
<div class="col-auto">.col-auto</div>
|
||
</div>
|
||
</div>
|
||
</pre>
|
||
</div>
|
||
|
||
|
||
<h2>Standalone Column Classes</h2>
|
||
<p>The <code class="no-margin">.col-*</code> classes can also be used outside a <code class="no-margin">.row</code> to give an element a specific width. Whenever column classes are used as non direct children of a row, the paddings are omitted.</p>
|
||
<div class="row" style="margin: 0; margin-bottom: 10px">
|
||
<div class="col-sm-3 col-xs-12"><code>.col-3: width of 25%</code></div>
|
||
<div class="col-sm-9 col-xs-12"><code>.col-sm-9: width of 75% above sm breakpoint</code></div>
|
||
</div>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<div class="col-3 bg-light p-3 border">
|
||
.col-3: width of 25%
|
||
</div>
|
||
<div class="col-sm-9 bg-light p-3 border">
|
||
.col-sm-9: width of 75% above sm breakpoint
|
||
</div>
|
||
</pre>
|
||
</div>
|
||
|
||
|
||
<h2>No Gutters</h2>
|
||
<p>The Gutters between columns in our predefined grid classes can be removed with <code>.g-0</code>. This removes the negative <code>margin</code> from <code>.row</code> and the horizontal <code>padding</code> from all immediate children columns.</p>
|
||
<p><strong>Need an edge-to-edge design?</strong> Drop the parent <code>.container</code> or <code>.container-fluid</code>.</p>
|
||
<p>In practice, here’s how it looks. Note you can continue to use this with all other predefined grid classes (including column widths, responsive tiers, reorders, and more).</p>
|
||
<div class="row" style="margin: 0;">
|
||
<div class="col-sm-8 no-padding col-xs-12"><code class="no-padding">.col-12 .col-sm-6 .col-md-8</code></div>
|
||
<div class="col-sm-4 no-padding col-xs-12"><code class="no-padding">.col-12 .col-sm-6 .col-md-8</code></div>
|
||
</div>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<div class="row g-0">
|
||
<div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8</div>
|
||
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
|
||
</div>
|
||
</pre>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="row">
|
||
<div class="col-md-12 docs-content-inner last-section" id="page-elements-page-loaders">
|
||
<h1>Page Loaders</h1>
|
||
<p>To ensure a loading icon is visible until your entire page loads, you can use a page loader. For this effect, kindly insert the provided code right below the opening <code><body></code> tag in your HTML code. This ensures the loading icon appears and stays until everything on the page is completely loaded.</p>
|
||
<pre>
|
||
<span class="comment"><!-- start page loader --></span>
|
||
<div class="page-loader"></div>
|
||
<span class="comment"><!-- end page loader --></span>
|
||
</pre>
|
||
<p><span class="label label-danger">Note</span>You can find demo in <strong><a href="../demo-minimal-portfolio.html" target="_blank">demo-minimal-portfolio.html</a></strong> page for your reference.</p>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="row">
|
||
<div class="col-md-12 docs-content-inner last-section" id="page-elements-cookie-notify">
|
||
<h1>Cookie Notify</h1>
|
||
<p>The Cookie Notify bar is a useful tool to grab visitors' attention and prompt them to accept your site's terms and policies. To make this happen when your page loads, just include the following code anywhere within the <code><body>...</body></code> section of your template.</p>
|
||
<pre>
|
||
<span class="comment"><!-- start cookie message --></span>
|
||
<div id="cookies-model" class="cookie-message bg-dark-gray border-radius-8px">
|
||
<div class="cookie-description fs-14 text-white mb-20px lh-22">We use cookies to enhance your browsing experience, serve personalized ads or content, and analyze our traffic. By clicking "Allow cookies" you consent to our use of cookies. </div>
|
||
<div class="cookie-btn">
|
||
<a href="#" class="btn btn-transparent-white border-1 border-color-transparent-white-light btn-very-small btn-switch-text btn-rounded w-100 mb-15px" aria-label="btn">
|
||
<span>
|
||
<span class="btn-double-text" data-text="Cookie policy">Cookie policy</span>
|
||
</span>
|
||
</a>
|
||
<a href="#" class="btn btn-white btn-very-small btn-switch-text btn-box-shadow accept_cookies_btn btn-rounded w-100" data-accept-btn aria-label="text">
|
||
<span>
|
||
<span class="btn-double-text" data-text="Allow cookies">Allow cookies</span>
|
||
</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<span class="comment"><!-- end cookie message --></span>
|
||
</pre>
|
||
<p><span class="label label-danger">Note</span> You can find demo in <strong><a href="../demo-fashion-store.html" target="_blank">demo-fashion-store.html</a></strong> page for your reference.</p>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="row">
|
||
<div class="col-md-12 docs-content-inner last-section" id="page-elements-scroll-to-top">
|
||
<h1>Scroll To Top</h1>
|
||
<p>If your webpage is quite lengthy, you might want to give users a convenient way to swiftly scroll back to the top. By adding a "Scroll To Top" feature, users can easily return to the page's beginning whenever they wish. To set this up, just insert the provided code at the bottom of your page, placing it anywhere within the <code><body>...</body></code> section.</p>
|
||
<h2 class="pb-0 pt-30px">1. Scroll Progress</h2>
|
||
<pre>
|
||
<span class="comment"><!-- start scroll progress --></span>
|
||
<div class="scroll-progress d-none d-xxl-block">
|
||
<a href="#" class="scroll-top" aria-label="scroll">
|
||
<span class="scroll-text">Scroll</span><span class="scroll-line"><span class="scroll-point"></span></span>
|
||
</a>
|
||
</div>
|
||
<span class="comment"><!-- end scroll progress --></span>
|
||
</pre>
|
||
<p><span class="label label-danger">Note</span> You can find demo in <strong><a href="../demo-music-onepage.html" target="_blank">demo-music-onepage.html</a></strong> page for your reference.</p>
|
||
<h2 class="pb-0 pt-30px">2. Scroll Simple</h2>
|
||
<pre>
|
||
<span class="comment"><!-- start scroll simple --></span>
|
||
<div class="scroll-progress scroll-simple d-none d-xl-block">
|
||
<a href="#" class="scroll-top" aria-label="scroll">
|
||
<i class="feather icon-feather-arrow-up text-black"></i>
|
||
</a>
|
||
</div>
|
||
<span class="comment"><!-- end scroll simple --></span>
|
||
</pre>
|
||
<p><span class="label label-danger">Note</span> You can find demo in <strong><a href="../demo-cryptocurrency.html" target="_blank">demo-cryptocurrency.html</a></strong> page for your reference.</p>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="row">
|
||
<div class="col-md-12 docs-content-inner last-section" id="page-elements-sticky-footer">
|
||
<h1>Sticky Footer</h1>
|
||
<p>In a Sticky Footer setup, your page's bottom section stays fixed at the bottom of the screen when your content is shorter than the screen height. To achieve this, place your main page content inside a DIV with the class <code>.main-content</code> and include the class <code>.footer-sticky</code> in your footer tag. This ensures a neat and <strong>sticky</strong> appearance for your footer, even when the content is limited.</p>
|
||
<pre>
|
||
<span class="comment"><!-- start footer --></span>
|
||
<footer class="bg-base-color footer-sticky background-position-left-top">
|
||
...
|
||
</footer>
|
||
<span class="comment"><!-- end footer --></span>
|
||
</pre>
|
||
<p><span class="label label-danger">Note</span> You can find code in <strong><a href="../demo-design-agency.html" target="_blank">demo-design-agency.html</a></strong> page for your reference.</p>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="row">
|
||
<div class="col-md-12 docs-content-inner last-section" id="page-elements-custom-cursors">
|
||
<h1>Custom Cursors</h1>
|
||
<p>Elevate your website's look by incorporating personalized interactive cursors using Crafto. The custom cursor option seamlessly applies to the entire 'body' and 'link.' You can choose to showcase the custom cursor specifically when a user hovers over link elements or elements that resemble links. This allows you to highlight interactive parts with a subtle yet impactful effect. To activate custom cursors, insert the <code>.custom-cursor</code> class in the <code><body></code> tag, and don't forget to include <code>.cursor-page-inner</code> DIV, as illustrated in the code snippet below.</p>
|
||
<pre>
|
||
<body data-mobile-nav-trigger-alignment="right" data-mobile-nav-style="modern" data-mobile-nav-bg-color="#383632" class="custom-cursor">
|
||
<span class="comment"><!-- start cursor --></span>
|
||
<div class="cursor-page-inner">
|
||
<div class="circle-cursor circle-cursor-inner"></div>
|
||
<div class="circle-cursor circle-cursor-outer"></div>
|
||
</div>
|
||
<span class="comment"><!-- end cursor --></span>
|
||
...
|
||
</body>
|
||
</pre>
|
||
<p><span class="label label-danger">Note</span> You can find code in <strong><a href="../demo-restaurant.html" target="_blank">demo-restaurant.html</a></strong> page for your reference.</p>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="row">
|
||
<div id="page-elements-helper-classes" class="col-md-12 docs-content-inner">
|
||
<h1>Helper Classes</h1>
|
||
<p>We have created some really useful helper classes for you. Here are a few of them:</p>
|
||
<ul>
|
||
<li><a href="index.html#font-size" class="inner-link">Font Size</a></li>
|
||
<li><a href="index.html#line-height" class="inner-link">Line Height</a></li>
|
||
<li><a href="index.html#text-color" class="inner-link">Text Color</a></li>
|
||
<li><a href="index.html#text-gradient-color" class="inner-link">Text Gradient Color</a></li>
|
||
<li><a href="index.html#text-align" class="inner-link">Text Align</a></li>
|
||
<li><a href="index.html#text-transform" class="inner-link">Text Transform</a></li>
|
||
<li><a href="index.html#letter-spacing" class="inner-link">Letter Spacing</a></li>
|
||
<li><a href="index.html#font-weight" class="inner-link">Font Weight</a></li>
|
||
<li><a href="index.html#icon-size" class="inner-link">Icon Size</a></li>
|
||
<li><a href="index.html#background-color" class="inner-link">Background Color</a></li>
|
||
<li><a href="index.html#background-gradient-color" class="inner-link">Background Gradient Color</a></li>
|
||
<li><a href="index.html#background-color-transparent" class="inner-link">Background Color Transparent</a></li>
|
||
<li><a href="index.html#opacity" class="inner-link">Opacity</a></li>
|
||
<li><a href="index.html#margin-all-side" class="inner-link">Margin All</a></li>
|
||
<li><a href="index.html#margin-top-side" class="inner-link">Margin Top</a></li>
|
||
<li><a href="index.html#margin-bottom-side" class="inner-link">Margin Bottom</a></li>
|
||
<li><a href="index.html#margin-left-side" class="inner-link">Margin Left</a></li>
|
||
<li><a href="index.html#margin-right-side" class="inner-link">Margin Right</a></li>
|
||
<li><a href="index.html#padding-all-side" class="inner-link">Padding All</a></li>
|
||
<li><a href="index.html#padding-top-side" class="inner-link">Padding Top</a></li>
|
||
<li><a href="index.html#padding-bottom-side" class="inner-link">Padding Bottom </a></li>
|
||
<li><a href="index.html#padding-left-side" class="inner-link">Padding Left</a></li>
|
||
<li><a href="index.html#padding-right-side" class="inner-link">Padding Right</a></li>
|
||
<li><a href="index.html#outside-box-top" class="inner-link">Outside Box Top</a></li>
|
||
<li><a href="index.html#outside-box-left" class="inner-link">Outside Box Left</a></li>
|
||
<li><a href="index.html#outside-box-right" class="inner-link">Outside Box Right</a></li>
|
||
<li><a href="index.html#position" class="inner-link">Position</a></li>
|
||
<li><a href="index.html#top-side" class="inner-link">Top</a></li>
|
||
<li><a href="index.html#right-side" class="inner-link">Right</a></li>
|
||
<li><a href="index.html#bottom-side" class="inner-link">Bottom</a></li>
|
||
<li><a href="index.html#left-side" class="inner-link">Left</a></li>
|
||
<li><a href="index.html#top-minus-side" class="inner-link">Top Minus</a></li>
|
||
<li><a href="index.html#right-minus-side" class="inner-link">Right Minus</a></li>
|
||
<li><a href="index.html#bottom-minus-side" class="inner-link">Bottom Minus</a></li>
|
||
<li><a href="index.html#left-minus-side" class="inner-link">Left Minus</a></li>
|
||
<li><a href="index.html#width" class="inner-link">Width</a></li>
|
||
<li><a href="index.html#height" class="inner-link">Height</a></li>
|
||
<li><a href="index.html#screen-height" class="inner-link">Screen Height</a></li>
|
||
<li><a href="index.html#minimum-height" class="inner-link">Minimum Height</a></li>
|
||
<li><a href="index.html#full-screen" class="inner-link">Full Screen</a></li>
|
||
<li><a href="index.html#separator" class="inner-link">Separator</a></li>
|
||
<li><a href="index.html#border-width" class="inner-link">Border Width</a></li>
|
||
<li><a href="index.html#border-color" class="inner-link">Border Color</a></li>
|
||
<li><a href="index.html#border-gradient-color" class="inner-link">Border Gradient Color</a></li>
|
||
<li><a href="index.html#border-style" class="inner-link">Border Style</a></li>
|
||
<li><a href="index.html#border-radius" class="inner-link">Border Radius</a></li>
|
||
</ul>
|
||
<br>
|
||
|
||
<p id="font-size" class="pt-30px"><strong>Font Size</strong></p>
|
||
<ul>
|
||
<li><code>.fs-9</code> - For 9px size of text</li>
|
||
<li><code>.fs-10</code> - For 10px size of text</li>
|
||
<li><code>.fs-11</code> - For 11px size of text</li>
|
||
<li><code>.fs-12</code> - For 12px size of text</li>
|
||
<li><code>.fs-13</code> - For 13px size of text</li>
|
||
<li><code>.fs-14</code> - For 14px size of text</li>
|
||
<li><code>.fs-15</code> - For 15px size of text</li>
|
||
<li><code>.fs-16</code> - For 16px size of text</li>
|
||
<li><code>.fs-17</code> - For 17px size of text</li>
|
||
<li><code>.fs-18</code> - For 18px size of text</li>
|
||
<li><code>.fs-19</code> - For 19px size of text</li>
|
||
<li><code>.fs-20</code> - For 20px size of text</li>
|
||
<li><code>.fs-22</code> - For 22px size of text</li>
|
||
<li><code>.fs-24</code> - For 24px size of text</li>
|
||
<li><code>.fs-26</code> - For 26px size of text</li>
|
||
<li><code>.fs-28</code> - For 28px size of text</li>
|
||
<li><code>.fs-30</code> - For 30px size of text</li>
|
||
<li><code>.fs-32</code> - For 32px size of text</li>
|
||
<li><code>.fs-40</code> - For 40px size of text</li>
|
||
<li><code>.fs-45</code> - For 45px size of text</li>
|
||
<li><code>.fs-50</code> - For 50px size of text</li>
|
||
<li><code>.fs-55</code> - For 55px size of text</li>
|
||
<li><code>.fs-60</code> - For 60px size of text</li>
|
||
<li><code>.fs-65</code> - For 65px size of text</li>
|
||
<li><code>.fs-70</code> - For 70px size of text</li>
|
||
<li><code>.fs-75</code> - For 75px size of text</li>
|
||
<li><code>.fs-80</code> - For 80px size of text</li>
|
||
<li><code>.fs-85</code> - For 85px size of text</li>
|
||
<li><code>.fs-90</code> - For 90px size of text</li>
|
||
<li><code>.fs-95</code> - For 95px size of text</li>
|
||
<li><code>.fs-100</code> - For 100px size of text</li>
|
||
<li><code>.fs-110</code> - For 110px size of text</li>
|
||
<li><code>.fs-120</code> - For 120px size of text</li>
|
||
<li><code>.fs-130</code> - For 130px size of text</li>
|
||
<li><code>.fs-140</code> - For 140px size of text</li>
|
||
<li><code>.fs-150</code> - For 150px size of text</li>
|
||
<li><code>.fs-160</code> - For 160px size of text</li>
|
||
<li><code>.fs-170</code> - For 170px size of text</li>
|
||
<li><code>.fs-180</code> - For 180px size of text</li>
|
||
<li><code>.fs-190</code> - For 190px size of text</li>
|
||
<li><code>.fs-200</code> - For 200px size of text</li>
|
||
<li><code>.fs-225</code> - For 225px size of text</li>
|
||
<li><code>.fs-250</code> - For 250px size of text</li>
|
||
<li><code>.fs-275</code> - For 275px size of text</li>
|
||
<li><code>.fs-300</code> - For 300px size of text</li>
|
||
<li><code>.fs-350</code> - For 350px size of text</li>
|
||
<li><code>.fs-400</code> - For 400px size of text</li>
|
||
</ul>
|
||
<br>
|
||
|
||
|
||
<p id="line-height" class="pt-30px"><strong>Line Height</strong></p>
|
||
<ul>
|
||
<li><code>.lh-10</code> - For line height of 10 pixel</li>
|
||
<li><code>.lh-11</code> - For line height of 11 pixel</li>
|
||
<li><code>.lh-12</code> - For line height of 12 pixel</li>
|
||
<li><code>.lh-13</code> - For line height of 13 pixel</li>
|
||
<li><code>.lh-14</code> - For line height of 14 pixel</li>
|
||
<li><code>.lh-15</code> - For line height of 15 pixel</li>
|
||
<li><code>.lh-16</code> - For line height of 16 pixel</li>
|
||
<li><code>.lh-18</code> - For line height of 18 pixel</li>
|
||
<li><code>.lh-19</code> - For line height of 19 pixel</li>
|
||
<li><code>.lh-20</code> - For line height of 20 pixel</li>
|
||
<li><code>.lh-22</code> - For line height of 22 pixel</li>
|
||
<li><code>.lh-24</code> - For line height of 24 pixel</li>
|
||
<li><code>.lh-26</code> - For line height of 26 pixel</li>
|
||
<li><code>.lh-28</code> - For line height of 28 pixel</li>
|
||
<li><code>.lh-30</code> - For line height of 30 pixel</li>
|
||
<li><code>.lh-32</code> - For line height of 32 pixel</li>
|
||
<li><code>.lh-34</code> - For line height of 34 pixel</li>
|
||
<li><code>.lh-36</code> - For line height of 36 pixel</li>
|
||
<li><code>.lh-38</code> - For line height of 38 pixel</li>
|
||
<li><code>.lh-40</code> - For line height of 40 pixel</li>
|
||
<li><code>.lh-42</code> - For line height of 42 pixel</li>
|
||
<li><code>.lh-44</code> - For line height of 44 pixel</li>
|
||
<li><code>.lh-46</code> - For line height of 46 pixel</li>
|
||
<li><code>.lh-48</code> - For line height of 48 pixel</li>
|
||
<li><code>.lh-50</code> - For line height of 50 pixel</li>
|
||
<li><code>.lh-55</code> - For line height of 55 pixel</li>
|
||
<li><code>.lh-60</code> - For line height of 60 pixel</li>
|
||
<li><code>.lh-65</code> - For line height of 65 pixel</li>
|
||
<li><code>.lh-70</code> - For line height of 70 pixel</li>
|
||
<li><code>.lh-75</code> - For line height of 75 pixel</li>
|
||
<li><code>.lh-80</code> - For line height of 80 pixel</li>
|
||
<li><code>.lh-85</code> - For line height of 85 pixel</li>
|
||
<li><code>.lh-90</code> - For line height of 90 pixel</li>
|
||
<li><code>.lh-95</code> - For line height of 95 pixel</li>
|
||
<li><code>.lh-100</code> - For line height of 100 pixel</li>
|
||
<li><code>.lh-105</code> - For line height of 105 pixel</li>
|
||
<li><code>.lh-110</code> - For line height of 110 pixel</li>
|
||
<li><code>.lh-115</code> - For line height of 115 pixel</li>
|
||
<li><code>.lh-120</code> - For line height of 120 pixel</li>
|
||
<li><code>.lh-0</code> - For line height of 0</li>
|
||
<li><code>.lh-normal</code> - For line height of normal</li>
|
||
<li><code>.lh-initial</code> - For line height of initial</li>
|
||
<li><code>.lh-inherit</code> - For line height of inherit</li>
|
||
</ul>
|
||
<br>
|
||
|
||
|
||
<p id="text-color" class="pt-30px"><strong>Text Color</strong></p>
|
||
<ul>
|
||
<li><code>.text-white</code> - For white color text</li>
|
||
<li><code>.text-base-color</code> - For base color text</li>
|
||
<li><code>.text-black</code> - For black color text</li>
|
||
<li><code>.text-dark-gray</code> - For dark gray color text</li>
|
||
<li><code>.text-medium-gray</code> - For medium gray color text</li>
|
||
<li><code>.text-extra-medium-gray</code> - For extra medium gray color text</li>
|
||
<li><code>.text-light-medium-gray</code> - For light medium gray color text</li>
|
||
<li><code>.text-light-gray</code> - For light gray color text</li>
|
||
<li><code>.text-very-light-gray</code> - For very light gray color text</li>
|
||
<li><code>.text-red</code> - For red color text</li>
|
||
<li><code>.text-green</code> - For green color text</li>
|
||
<li><code>.text-yellow</code> - For yellow color text</li>
|
||
<li><code>.text-golden-yellow</code> - For golden yellow color text</li>
|
||
<li><code>.text-tussock-yellow</code> - For tussock yellow color text</li>
|
||
<li><code>.text-cornflower-blue</code> - For cornflower blue color text</li>
|
||
<li><code>.text-jade</code> - For jade color text</li>
|
||
<li><code>.text-majorelle-blue</code> - For majorelle blue color text</li>
|
||
</ul>
|
||
<br>
|
||
|
||
|
||
<p id="text-gradient-color" class="pt-30px"><strong>Text Gradient Color</strong></p>
|
||
<ul>
|
||
<li><code>.text-gradient-light-pink-light-orange</code> - For gradient color text</li>
|
||
<li><code>.text-gradient-purple-pink</code> - For gradient color text</li>
|
||
<li><code>.text-gradient-fast-pink-light-yellow</code> - For gradient color text</li>
|
||
<li><code>.text-gradient-pink-orange</code> - For gradient color text</li>
|
||
<li><code>.text-gradient-fast-blue-purple</code> - For gradient color text</li>
|
||
<li><code>.text-gradient-light-pink-light-purple</code> - For gradient color text</li>
|
||
<li><code>.text-gradient-light-green-light-perotgreen</code> - For gradient color text</li>
|
||
<li><code>.text-gradient-light-blue-light-turquoise</code> - For gradient color text</li>
|
||
<li><code>.text-gradient-sky-blue-pink</code> - For gradient color text</li>
|
||
<li><code>.text-gradient-light-purple-light-orange</code> - For gradient color text</li>
|
||
<li><code>.text-gradient-light-gray-white</code> - For gradient color text</li>
|
||
</ul>
|
||
<br>
|
||
|
||
|
||
<p id="text-align" class="pt-30px"><strong>Text Align</strong></p>
|
||
<ul>
|
||
<li><code>.text-start</code> - For text align left</li>
|
||
<li><code>.text-center</code> - For text align center</li>
|
||
<li><code>.text-end</code> - For text align right</li>
|
||
</ul>
|
||
<br>
|
||
|
||
|
||
<p id="text-transform" class="pt-30px"><strong>Text Transform</strong></p>
|
||
<ul>
|
||
<li><code>.text-lowercase</code> - For text lowercase</li>
|
||
<li><code>.text-uppercase</code> - For text uppercase</li>
|
||
<li><code>.text-capitalize</code> - For text capitalize</li>
|
||
</ul>
|
||
<br>
|
||
|
||
|
||
<p id="letter-spacing" class="pt-30px"><strong>Letter Spacing</strong></p>
|
||
<ul>
|
||
<li><code>.ls-0px</code> - For letter spacing of 0 pixel</li>
|
||
<li><code>.ls-05px</code> - For letter spacing of 0.5 pixel</li>
|
||
<li><code>.ls-1px</code> - For letter spacing of 1 pixel</li>
|
||
<li><code>.ls-2px</code> - For letter spacing of 2 pixel</li>
|
||
<li><code>.ls-3px</code> - For letter spacing of 3 pixel</li>
|
||
<li><code>.ls-4px</code> - For letter spacing of 4 pixel</li>
|
||
<li><code>.ls-5px</code> - For letter spacing of 5 pixel</li>
|
||
<li><code>.ls-6px</code> - For letter spacing of 6 pixel</li>
|
||
<li><code>.ls-7px</code> - For letter spacing of 7 pixel</li>
|
||
<li><code>.ls-8px</code> - For letter spacing of 8 pixel</li>
|
||
<li><code>.ls-9px</code> - For letter spacing of 9 pixel</li>
|
||
<li><code>.ls-10px</code> - For letter spacing of 10 pixel</li>
|
||
<li><code>.ls-minus-05px</code> - For letter spacing of -0.5 pixel</li>
|
||
<li><code>.ls-minus-1px</code> - For letter spacing of -1 pixel</li>
|
||
<li><code>.ls-minus-2px</code> - For letter spacing of -2 pixel</li>
|
||
<li><code>.ls-minus-3px</code> - For letter spacing of -3 pixel</li>
|
||
<li><code>.ls-minus-4px</code> - For letter spacing of -4 pixel</li>
|
||
<li><code>.ls-minus-5px</code> - For letter spacing of -5 pixel</li>
|
||
<li><code>.ls-minus-6px</code> - For letter spacing of -6 pixel</li>
|
||
<li><code>.ls-minus-7px</code> - For letter spacing of -7 pixel</li>
|
||
<li><code>.ls-minus-8px</code> - For letter spacing of -8 pixel</li>
|
||
<li><code>.ls-minus-9px</code> - For letter spacing of -9 pixel</li>
|
||
<li><code>.ls-minus-10px</code> - For letter spacing of -10 pixel</li>
|
||
</ul>
|
||
<br>
|
||
|
||
|
||
<p id="font-weight" class="pt-30px"><strong>Font Weight</strong></p>
|
||
<ul>
|
||
<li><code>.fw-100</code> - For font weight of 100</li>
|
||
<li><code>.fw-200</code> - For font weight of 200</li>
|
||
<li><code>.fw-300</code> - For font weight of 300</li>
|
||
<li><code>.fw-400</code> - For font weight of 400</li>
|
||
<li><code>.fw-500</code> - For font weight of 500</li>
|
||
<li><code>.fw-600</code> - For font weight of 600</li>
|
||
<li><code>.fw-700</code> - For font weight of 700</li>
|
||
<li><code>.fw-800</code> - For font weight of 800</li>
|
||
<li><code>.fw-900</code> - For font weight of 900</li>
|
||
</ul>
|
||
<br>
|
||
|
||
|
||
<p id="icon-size" class="pt-30px"><strong>Icon Size</strong></p>
|
||
<ul>
|
||
<li><code>.icon-extra-double-large</code> - For extra double large icon size</li>
|
||
<li><code>.icon-double-large</code> - For double large icon size</li>
|
||
<li><code>.icon-extra-large</code> - For extra large icon size</li>
|
||
<li><code>.icon-large</code> - For large icon size</li>
|
||
<li><code>.icon-medium</code> - For medium icon size</li>
|
||
<li><code>.icon-very-medium</code> - For very medium icon size</li>
|
||
<li><code>.icon-extra-medium</code> - For extra medium icon size</li>
|
||
<li><code>.icon-small</code> - For small icon size</li>
|
||
<li><code>.icon-very-small</code> - For very small icon size</li>
|
||
</ul>
|
||
<br>
|
||
|
||
|
||
<p id="background-color" class="pt-30px"><strong>Background Color</strong></p>
|
||
<ul>
|
||
<li><code>.bg-base-color</code> - For background color of base color</li>
|
||
<li><code>.bg-dark-gray</code> - For background color of dark gray</li>
|
||
<li><code>.bg-black</code> - For background color of black</li>
|
||
<li><code>.bg-medium-gray</code> - For background color of medium gray</li>
|
||
<li><code>.bg-light-medium-gray</code> - For background color of light medium gray</li>
|
||
<li><code>.bg-extra-medium-gray</code> - For background color of extra medium gray</li>
|
||
<li><code>.bg-light-gray</code> - For background color of light gray</li>
|
||
<li><code>.bg-very-light-gray</code> - For background color of very light gray</li>
|
||
<li><code>.bg-red</code> - For background color of red</li>
|
||
<li><code>.bg-light-red</code> - For background color of light red</li>
|
||
<li><code>.bg-green</code> - For background color of green</li>
|
||
<li><code>.bg-crusoe-green</code> - For background color of crusoe green</li>
|
||
<li><code>.bg-yellow</code> - For background color of yellow</li>
|
||
<li><code>.bg-charcoal-blue</code> - For background color of charcoal blue</li>
|
||
<li><code>.bg-slate-blue</code> - For background color of slate blue</li>
|
||
<li><code>.bg-medium-slate-blue</code> - For background color of medium slate blue</li>
|
||
<li><code>.bg-extra-medium-slate-blue</code> - For background color of extra medium slate blue</li>
|
||
<li><code>.bg-dark-slate-blue</code> - For background color of dark slate blue</li>
|
||
<li><code>.bg-extra-dark-slate-blue</code> - For background color of extra dark slate blue</li>
|
||
<li><code>.bg-extra-very-slate-blue</code> - For background color of extra very slate blue </li>
|
||
<li><code>.bg-tussock-yellow</code> - For background color of tussock yellow</li>
|
||
<li><code>.bg-solitude-blue</code> - For background color of solitude blue</li>
|
||
<li><code>.bg-aluminium-grey</code> - For background color of aluminium grey</li>
|
||
<li><code>.bg-selago</code> - For background color of selago</li>
|
||
<li><code>.bg-white-ice</code> - For background color of white ice</li>
|
||
<li><code>.bg-golden-yellow</code> - For background color of golden yellow</li>
|
||
<li><code>.bg-jade</code> - For background color of jade</li>
|
||
<li><code>.bg-orange</code> - For background color of orange</li>
|
||
<li><code>.bg-light-majorelle-blue</code> - For background color of light majorelle blue</li>
|
||
</ul>
|
||
<br>
|
||
|
||
|
||
<p id="background-gradient-color" class="pt-30px"><strong>Background Gradient Color</strong></p>
|
||
<ul>
|
||
<li><code>.bg-gradient-light-pink-light-orange</code> - For background color of gradient light pink light orange </li>
|
||
<li><code>.bg-gradient-purple-pink</code> - For background color of gradient purple pink </li>
|
||
<li><code>.bg-gradient-fast-pink-light-yellow</code> - For background color of gradient fast pink light yellow </li>
|
||
<li><code>.bg-gradient-pink-orange</code> - For background color of gradient pink orange </li>
|
||
<li><code>.bg-gradient-fast-blue-purple</code> - For background color of gradient fast blue purple </li>
|
||
<li><code>.bg-gradient-light-pink-light-purple</code> - For background color of gradient light pink light purple </li>
|
||
<li><code>.bg-gradient-purple-magento</code> - For background color of gradient purple magento </li>
|
||
<li><code>.bg-gradient-blue-green</code> - For background color of gradient blue green </li>
|
||
<li><code>.bg-gradient-light-purple-light-orange</code> - For background color of gradient light purple light orange </li>
|
||
<li><code>.bg-gradient-sky-blue-pink</code> - For background color of gradient sky blue pink </li>
|
||
<li><code>.bg-gradient-dark-gray-brown</code> - For background color of gradient dark gray brown </li>
|
||
<li><code>.bg-gradient-tan-geraldine</code> - For background color of gradient tan geraldine </li>
|
||
<li><code>.bg-gradient-very-light-gray</code> - For background color of gradient very light gray </li>
|
||
<li><code>.bg-gradient-top-very-light-gray</code> - For background color of gradient top very light gray </li>
|
||
</ul>
|
||
<br>
|
||
|
||
|
||
<p id="background-color-transparent" class="pt-30px"><strong>Background Color Transparent</strong></p>
|
||
<ul>
|
||
<li><code>.bg-transparent</code> - For background color of transparent</li>
|
||
<li><code>.bg-gradient-fast-blue-purple-transparent</code> - For background color of gradient fast blue purple transparent</li>
|
||
<li><code>.bg-gradient-fast-pink-light-yellow-transparent</code> - For background color of gradient fast pink light yellow transparent</li>
|
||
<li><code>.bg-gradient-sky-blue-pink-transparent</code> - For background color of gradient sky blue pink transparent</li>
|
||
<li><code>.bg-gradient-gray-light-dark-transparent</code> - For background color of gradient gray light dark transparent</li>
|
||
<li><code>.bg-gradient-dark-transparent</code> - For background color of gradient dark transparent</li>
|
||
<li><code>.bg-gradient-white-transparent</code> - For background color of gradient white transparent</li>
|
||
<li><code>.bg-gradient-white-dark-transparent</code> - For background color of gradient white dark transparent</li>
|
||
<li><code>.bg-gradient-white-bottom-transparent</code> - For background color of gradient white bottom transparent</li>
|
||
<li><code>.bg-gradient-black-bottom-transparent</code> - For background color of gradient black bottom transparent</li>
|
||
<li><code>.bg-gradient-solitude-blue-transparent</code> - For background color of gradient solitude blue transparent</li>
|
||
<li><code>.bg-gradient-extra-midium-gray-transparent</code> - For background color of gradient extra midium gray transparent</li>
|
||
<li><code>.bg-dark-gray-transparent</code> - For background color of dark gray transparent</li>
|
||
<li><code>.bg-dark-gray-transparent-light</code> - For background color of dark gray transparent light</li>
|
||
<li><code>.bg-dark-gray-transparent-medium</code> - For background color of dark gray transparent medium</li>
|
||
<li><code>.bg-medium-gray-transparent</code> - For background color of medium gray transparent</li>
|
||
<li><code>.bg-light-gray-transparent</code> - For background color of light gray transparent</li>
|
||
<li><code>.bg-medium-gray-transparent</code> - For background color of medium gray transparent</li>
|
||
<li><code>.bg-black-transparent-light</code> - For background color of black transparent light</li>
|
||
<li><code>.bg-black-transparent-medium</code> - For background color of black transparent medium</li>
|
||
<li><code>.bg-black-transparent</code> - For background color of black transparent</li>
|
||
<li><code>.bg-white-transparent-extra-light</code> - For background color of white transparent extra light</li>
|
||
<li><code>.bg-white-transparent-very-light</code> - For background color of white transparent very light</li>
|
||
<li><code>.bg-white-transparent-light</code> - For background color of white transparent light</li>
|
||
<li><code>.bg-white-transparent</code> - For background color of white transparent</li>
|
||
</ul>
|
||
<br>
|
||
|
||
|
||
<p id="opacity" class="pt-30px"><strong>Opacity</strong></p>
|
||
<ul>
|
||
<li><code>.opacity-very-light</code> - For very light opacity</li>
|
||
<li><code>.opacity-light</code> - For light opacity</li>
|
||
<li><code>.opacity-extra-medium</code> - For extra medium opacity</li>
|
||
<li><code>.opacity-medium</code> - For medium opacity</li>
|
||
<li><code>.opacity-full</code> - For full opacity</li>
|
||
<li><code>.opacity-full-dark</code> - For full dark opacity</li>
|
||
</ul>
|
||
<br>
|
||
|
||
|
||
<p id="margin-all-side" class="pt-30px"><strong>Margin All</strong></p>
|
||
<ul>
|
||
<li><code>.m-5px</code> - For margin 5px each side</li>
|
||
<li><code>.m-10px</code> - For margin 10px each side</li>
|
||
<li><code>.m-15px</code> - For margin 15px each side</li>
|
||
<li><code>.m-20px</code> - For margin 20px each side</li>
|
||
<li><code>.m-25px</code> - For margin 25px each side</li>
|
||
<li><code>.m-30px</code> - For margin 30px each side</li>
|
||
<li><code>.m-35px</code> - For margin 35px each side</li>
|
||
<li><code>.m-40px</code> - For margin 40px each side</li>
|
||
<li><code>.m-45px</code> - For margin 45px each side</li>
|
||
<li><code>.m-50px</code> - For margin 50px each side</li>
|
||
<li><code>.m-55px</code> - For margin 55px each side</li>
|
||
<li><code>.m-60px</code> - For margin 60px each side</li>
|
||
<li><code>.m-65px</code> - For margin 65px each side</li>
|
||
<li><code>.m-70px</code> - For margin 70px each side</li>
|
||
<li><code>.m-1</code> - For margin 1 percentage each side</li>
|
||
<li><code>.m-2</code> - For margin 2 percentage each side</li>
|
||
<li><code>.m-3</code> - For margin 3 percentage each side</li>
|
||
<li><code>.m-4</code> - For margin 4 percentage each side</li>
|
||
<li><code>.m-5</code> - For margin 5 percentage each side</li>
|
||
<li><code>.m-6</code> - For margin 6 percentage each side</li>
|
||
<li><code>.m-7</code> - For margin 7 percentage each side</li>
|
||
<li><code>.m-8</code> - For margin 8 percentage each side</li>
|
||
<li><code>.m-9</code> - For margin 9 percentage each side</li>
|
||
<li><code>.m-10</code> - For margin 10 percentage each side</li>
|
||
<li><code>.m-11</code> - For margin 11 percentage each side</li>
|
||
<li><code>.m-12</code> - For margin 12 percentage each side</li>
|
||
<li><code>.m-13</code> - For margin 13 percentage each side</li>
|
||
<li><code>.m-14</code> - For margin 14 percentage each side</li>
|
||
<li><code>.m-15</code> - For margin 15 percentage each side</li>
|
||
<li><code>.m-16</code> - For margin 16 percentage each side</li>
|
||
<li><code>.m-17</code> - For margin 17 percentage each side</li>
|
||
<li><code>.m-18</code> - For margin 18 percentage each side</li>
|
||
<li><code>.m-19</code> - For margin 19 percentage each side</li>
|
||
<li><code>.m-20</code> - For margin 20 percentage each side</li>
|
||
<li><code>.m-21</code> - For margin 21 percentage each side</li>
|
||
<li><code>.m-22</code> - For margin 22 percentage each side</li>
|
||
<li><code>.m-23</code> - For margin 23 percentage each side</li>
|
||
<li><code>.m-24</code> - For margin 24 percentage each side</li>
|
||
<li><code>.m-25</code> - For margin 25 percentage each side</li>
|
||
<li><code>.m-26</code> - For margin 26 percentage each side</li>
|
||
<li><code>.m-27</code> - For margin 27 percentage each side</li>
|
||
<li><code>.m-28</code> - For margin 28 percentage each side</li>
|
||
<li><code>.m-29</code> - For margin 29 percentage each side</li>
|
||
<li><code>.m-30</code> - For margin 30 percentage each side</li>
|
||
</ul>
|
||
<br/>
|
||
|
||
|
||
<p id="margin-top-side" class="pt-30px"><strong>Margin Top</strong></p>
|
||
<ul>
|
||
<li><code>.mt-5px</code> - For margin 5px top side</li>
|
||
<li><code>.mt-10px</code> - For margin 10px top side</li>
|
||
<li><code>.mt-15px</code> - For margin 15px top side</li>
|
||
<li><code>.mt-20px</code> - For margin 20px top side</li>
|
||
<li><code>.mt-25px</code> - For margin 25px top side</li>
|
||
<li><code>.mt-30px</code> - For margin 30px top side</li>
|
||
<li><code>.mt-35px</code> - For margin 35px top side</li>
|
||
<li><code>.mt-40px</code> - For margin 40px top side</li>
|
||
<li><code>.mt-45px</code> - For margin 45px top side</li>
|
||
<li><code>.mt-50px</code> - For margin 50px top side</li>
|
||
<li><code>.mt-55px</code> - For margin 55px top side</li>
|
||
<li><code>.mt-60px</code> - For margin 60px top side</li>
|
||
<li><code>.mt-65px</code> - For margin 65px top side</li>
|
||
<li><code>.mt-70px</code> - For margin 70px top side</li>
|
||
<li><code>.mt-1</code> - For margin 1 percentage top side</li>
|
||
<li><code>.mt-2</code> - For margin 2 percentage top side</li>
|
||
<li><code>.mt-3</code> - For margin 3 percentage top side</li>
|
||
<li><code>.mt-4</code> - For margin 4 percentage top side</li>
|
||
<li><code>.mt-5</code> - For margin 5 percentage top side</li>
|
||
<li><code>.mt-6</code> - For margin 6 percentage top side</li>
|
||
<li><code>.mt-7</code> - For margin 7 percentage top side</li>
|
||
<li><code>.mt-8</code> - For margin 8 percentage top side</li>
|
||
<li><code>.mt-9</code> - For margin 9 percentage top side</li>
|
||
<li><code>.mt-10</code> - For margin 10 percentage top side</li>
|
||
<li><code>.mt-11</code> - For margin 11 percentage top side</li>
|
||
<li><code>.mt-12</code> - For margin 12 percentage top side</li>
|
||
<li><code>.mt-13</code> - For margin 13 percentage top side</li>
|
||
<li><code>.mt-14</code> - For margin 14 percentage top side</li>
|
||
<li><code>.mt-15</code> - For margin 15 percentage top side</li>
|
||
<li><code>.mt-16</code> - For margin 16 percentage top side</li>
|
||
<li><code>.mt-17</code> - For margin 17 percentage top side</li>
|
||
<li><code>.mt-18</code> - For margin 18 percentage top side</li>
|
||
<li><code>.mt-19</code> - For margin 19 percentage top side</li>
|
||
<li><code>.mt-20</code> - For margin 20 percentage top side</li>
|
||
<li><code>.mt-21</code> - For margin 21 percentage top side</li>
|
||
<li><code>.mt-22</code> - For margin 22 percentage top side</li>
|
||
<li><code>.mt-23</code> - For margin 23 percentage top side</li>
|
||
<li><code>.mt-24</code> - For margin 24 percentage top side</li>
|
||
<li><code>.mt-25</code> - For margin 25 percentage top side</li>
|
||
<li><code>.mt-26</code> - For margin 26 percentage top side</li>
|
||
<li><code>.mt-27</code> - For margin 27 percentage top side</li>
|
||
<li><code>.mt-28</code> - For margin 28 percentage top side</li>
|
||
<li><code>.mt-29</code> - For margin 29 percentage top side</li>
|
||
<li><code>.mt-30</code> - For margin 30 percentage top side</li>
|
||
</ul>
|
||
<br>
|
||
|
||
|
||
<p id="margin-bottom-side" class="pt-30px"><strong>Margin Bottom</strong></p>
|
||
<ul>
|
||
<li><code>.mb-5px</code> - For margin 5px bottom side</li>
|
||
<li><code>.mb-10px</code> - For margin 10px bottom side</li>
|
||
<li><code>.mb-15px</code> - For margin 15px bottom side</li>
|
||
<li><code>.mb-20px</code> - For margin 20px bottom side</li>
|
||
<li><code>.mb-25px</code> - For margin 25px bottom side</li>
|
||
<li><code>.mb-30px</code> - For margin 30px bottom side</li>
|
||
<li><code>.mb-35px</code> - For margin 35px bottom side</li>
|
||
<li><code>.mb-40px</code> - For margin 40px bottom side</li>
|
||
<li><code>.mb-45px</code> - For margin 45px bottom side</li>
|
||
<li><code>.mb-50px</code> - For margin 50px bottom side</li>
|
||
<li><code>.mb-55px</code> - For margin 55px bottom side</li>
|
||
<li><code>.mb-60px</code> - For margin 60px bottom side</li>
|
||
<li><code>.mb-65px</code> - For margin 65px bottom side</li>
|
||
<li><code>.mb-70px</code> - For margin 70px bottom side</li>
|
||
<li><code>.mb-1</code> - For margin 1 percentage bottom side</li>
|
||
<li><code>.mb-2</code> - For margin 2 percentage bottom side</li>
|
||
<li><code>.mb-3</code> - For margin 3 percentage bottom side</li>
|
||
<li><code>.mb-4</code> - For margin 4 percentage bottom side</li>
|
||
<li><code>.mb-5</code> - For margin 5 percentage bottom side</li>
|
||
<li><code>.mb-6</code> - For margin 6 percentage bottom side</li>
|
||
<li><code>.mb-7</code> - For margin 7 percentage bottom side</li>
|
||
<li><code>.mb-8</code> - For margin 8 percentage bottom side</li>
|
||
<li><code>.mb-9</code> - For margin 9 percentage bottom side</li>
|
||
<li><code>.mb-10</code> - For margin 10 percentage bottom side</li>
|
||
<li><code>.mb-11</code> - For margin 11 percentage bottom side</li>
|
||
<li><code>.mb-12</code> - For margin 12 percentage bottom side</li>
|
||
<li><code>.mb-13</code> - For margin 13 percentage bottom side</li>
|
||
<li><code>.mb-14</code> - For margin 14 percentage bottom side</li>
|
||
<li><code>.mb-15</code> - For margin 15 percentage bottom side</li>
|
||
<li><code>.mb-16</code> - For margin 16 percentage bottom side</li>
|
||
<li><code>.mb-17</code> - For margin 17 percentage bottom side</li>
|
||
<li><code>.mb-18</code> - For margin 18 percentage bottom side</li>
|
||
<li><code>.mb-19</code> - For margin 19 percentage bottom side</li>
|
||
<li><code>.mb-20</code> - For margin 20 percentage bottom side</li>
|
||
<li><code>.mb-21</code> - For margin 21 percentage bottom side</li>
|
||
<li><code>.mb-22</code> - For margin 22 percentage bottom side</li>
|
||
<li><code>.mb-23</code> - For margin 23 percentage bottom side</li>
|
||
<li><code>.mb-24</code> - For margin 24 percentage bottom side</li>
|
||
<li><code>.mb-25</code> - For margin 25 percentage bottom side</li>
|
||
<li><code>.mb-26</code> - For margin 26 percentage bottom side</li>
|
||
<li><code>.mb-27</code> - For margin 27 percentage bottom side</li>
|
||
<li><code>.mb-28</code> - For margin 28 percentage bottom side</li>
|
||
<li><code>.mb-29</code> - For margin 29 percentage bottom side</li>
|
||
<li><code>.mb-30</code> - For margin 30 percentage bottom side</li>
|
||
</ul>
|
||
<br>
|
||
|
||
|
||
<p id="margin-left-side" class="pt-30px"><strong>Margin Left</strong></p>
|
||
<ul>
|
||
<li><code>.ms-5px</code> - For margin 5px left side</li>
|
||
<li><code>.ms-10px</code> - For margin 10px left side</li>
|
||
<li><code>.ms-15px</code> - For margin 15px left side</li>
|
||
<li><code>.ms-20px</code> - For margin 20px left side</li>
|
||
<li><code>.ms-25px</code> - For margin 25px left side</li>
|
||
<li><code>.ms-30px</code> - For margin 30px left side</li>
|
||
<li><code>.ms-35px</code> - For margin 35px left side</li>
|
||
<li><code>.ms-40px</code> - For margin 40px left side</li>
|
||
<li><code>.ms-45px</code> - For margin 45px left side</li>
|
||
<li><code>.ms-50px</code> - For margin 50px left side</li>
|
||
<li><code>.ms-55px</code> - For margin 55px left side</li>
|
||
<li><code>.ms-60px</code> - For margin 60px left side</li>
|
||
<li><code>.ms-65px</code> - For margin 65px left side</li>
|
||
<li><code>.ms-70px</code> - For margin 70px left side</li>
|
||
<li><code>.ms-1</code> - For margin 1 percentage left side</li>
|
||
<li><code>.ms-2</code> - For margin 2 percentage left side</li>
|
||
<li><code>.ms-3</code> - For margin 3 percentage left side</li>
|
||
<li><code>.ms-4</code> - For margin 4 percentage left side</li>
|
||
<li><code>.ms-5</code> - For margin 5 percentage left side</li>
|
||
<li><code>.ms-6</code> - For margin 6 percentage left side</li>
|
||
<li><code>.ms-7</code> - For margin 7 percentage left side</li>
|
||
<li><code>.ms-8</code> - For margin 8 percentage left side</li>
|
||
<li><code>.ms-9</code> - For margin 9 percentage left side</li>
|
||
<li><code>.ms-10</code> - For margin 10 percentage left side</li>
|
||
<li><code>.ms-11</code> - For margin 11 percentage left side</li>
|
||
<li><code>.ms-12</code> - For margin 12 percentage left side</li>
|
||
<li><code>.ms-13</code> - For margin 13 percentage left side</li>
|
||
<li><code>.ms-14</code> - For margin 14 percentage left side</li>
|
||
<li><code>.ms-15</code> - For margin 15 percentage left side</li>
|
||
<li><code>.ms-16</code> - For margin 16 percentage left side</li>
|
||
<li><code>.ms-17</code> - For margin 17 percentage left side</li>
|
||
<li><code>.ms-18</code> - For margin 18 percentage left side</li>
|
||
<li><code>.ms-19</code> - For margin 19 percentage left side</li>
|
||
<li><code>.ms-20</code> - For margin 20 percentage left side</li>
|
||
<li><code>.ms-21</code> - For margin 21 percentage left side</li>
|
||
<li><code>.ms-22</code> - For margin 22 percentage left side</li>
|
||
<li><code>.ms-23</code> - For margin 23 percentage left side</li>
|
||
<li><code>.ms-24</code> - For margin 24 percentage left side</li>
|
||
<li><code>.ms-25</code> - For margin 25 percentage left side</li>
|
||
<li><code>.ms-26</code> - For margin 26 percentage left side</li>
|
||
<li><code>.ms-27</code> - For margin 27 percentage left side</li>
|
||
<li><code>.ms-28</code> - For margin 28 percentage left side</li>
|
||
<li><code>.ms-29</code> - For margin 29 percentage left side</li>
|
||
<li><code>.ms-30</code> - For margin 30 percentage left side</li>
|
||
</ul>
|
||
<br>
|
||
|
||
|
||
<p id="margin-right-side" class="pt-30px"><strong>Margin Right</strong></p>
|
||
<ul>
|
||
<li><code>.me-5px</code> - For margin 5px right side</li>
|
||
<li><code>.me-10px</code> - For margin 10px right side</li>
|
||
<li><code>.me-15px</code> - For margin 15px right side</li>
|
||
<li><code>.me-20px</code> - For margin 20px right side</li>
|
||
<li><code>.me-25px</code> - For margin 25px right side</li>
|
||
<li><code>.me-30px</code> - For margin 30px right side</li>
|
||
<li><code>.me-35px</code> - For margin 35px right side</li>
|
||
<li><code>.me-40px</code> - For margin 40px right side</li>
|
||
<li><code>.me-45px</code> - For margin 45px right side</li>
|
||
<li><code>.me-50px</code> - For margin 50px right side</li>
|
||
<li><code>.me-55px</code> - For margin 55px right side</li>
|
||
<li><code>.me-60px</code> - For margin 60px right side</li>
|
||
<li><code>.me-65px</code> - For margin 65px right side</li>
|
||
<li><code>.me-70px</code> - For margin 70px right side</li>
|
||
<li><code>.me-1</code> - For margin 1 percentage right side</li>
|
||
<li><code>.me-2</code> - For margin 2 percentage right side</li>
|
||
<li><code>.me-3</code> - For margin 3 percentage right side</li>
|
||
<li><code>.me-4</code> - For margin 4 percentage right side</li>
|
||
<li><code>.me-5</code> - For margin 5 percentage right side</li>
|
||
<li><code>.me-6</code> - For margin 6 percentage right side</li>
|
||
<li><code>.me-7</code> - For margin 7 percentage right side</li>
|
||
<li><code>.me-8</code> - For margin 8 percentage right side</li>
|
||
<li><code>.me-9</code> - For margin 9 percentage right side</li>
|
||
<li><code>.me-10</code> - For margin 10 percentage right side</li>
|
||
<li><code>.me-11</code> - For margin 11 percentage right side</li>
|
||
<li><code>.me-12</code> - For margin 12 percentage right side</li>
|
||
<li><code>.me-13</code> - For margin 13 percentage right side</li>
|
||
<li><code>.me-14</code> - For margin 14 percentage right side</li>
|
||
<li><code>.me-15</code> - For margin 15 percentage right side</li>
|
||
<li><code>.me-16</code> - For margin 16 percentage right side</li>
|
||
<li><code>.me-17</code> - For margin 17 percentage right side</li>
|
||
<li><code>.me-18</code> - For margin 18 percentage right side</li>
|
||
<li><code>.me-19</code> - For margin 19 percentage right side</li>
|
||
<li><code>.me-20</code> - For margin 20 percentage right side</li>
|
||
<li><code>.me-21</code> - For margin 21 percentage right side</li>
|
||
<li><code>.me-22</code> - For margin 22 percentage right side</li>
|
||
<li><code>.me-23</code> - For margin 23 percentage right side</li>
|
||
<li><code>.me-24</code> - For margin 24 percentage right side</li>
|
||
<li><code>.me-25</code> - For margin 25 percentage right side</li>
|
||
<li><code>.me-26</code> - For margin 26 percentage right side</li>
|
||
<li><code>.me-27</code> - For margin 27 percentage right side</li>
|
||
<li><code>.me-28</code> - For margin 28 percentage right side</li>
|
||
<li><code>.me-29</code> - For margin 29 percentage right side</li>
|
||
<li><code>.me-30</code> - For margin 30 percentage right side</li>
|
||
</ul>
|
||
<br>
|
||
|
||
|
||
<p id="padding-all-side" class="pt-30px"><strong>Padding All</strong></p>
|
||
<ul>
|
||
<li><code>.p-5px</code> - For padding 5px each side</li>
|
||
<li><code>.p-10px</code> - For padding 10px each side</li>
|
||
<li><code>.p-15px</code> - For padding 15px each side</li>
|
||
<li><code>.p-20px</code> - For padding 20px each side</li>
|
||
<li><code>.p-25px</code> - For padding 25px each side</li>
|
||
<li><code>.p-30px</code> - For padding 30px each side</li>
|
||
<li><code>.p-35px</code> - For padding 35px each side</li>
|
||
<li><code>.p-40px</code> - For padding 40px each side</li>
|
||
<li><code>.p-45px</code> - For padding 45px each side</li>
|
||
<li><code>.p-50px</code> - For padding 50px each side</li>
|
||
<li><code>.p-55px</code> - For padding 55px each side</li>
|
||
<li><code>.p-60px</code> - For padding 60px each side</li>
|
||
<li><code>.p-65px</code> - For padding 65px each side</li>
|
||
<li><code>.p-70px</code> - For padding 70px each side</li>
|
||
<li><code>.p-1</code> - For padding 1 percentage each side</li>
|
||
<li><code>.p-2</code> - For padding 2 percentage each side</li>
|
||
<li><code>.p-3</code> - For padding 3 percentage each side</li>
|
||
<li><code>.p-4</code> - For padding 4 percentage each side</li>
|
||
<li><code>.p-5</code> - For padding 5 percentage each side</li>
|
||
<li><code>.p-6</code> - For padding 6 percentage each side</li>
|
||
<li><code>.p-7</code> - For padding 7 percentage each side</li>
|
||
<li><code>.p-8</code> - For padding 8 percentage each side</li>
|
||
<li><code>.p-9</code> - For padding 9 percentage each side</li>
|
||
<li><code>.p-10</code> - For padding 10 percentage each side</li>
|
||
<li><code>.p-11</code> - For padding 11 percentage each side</li>
|
||
<li><code>.p-12</code> - For padding 12 percentage each side</li>
|
||
<li><code>.p-13</code> - For padding 13 percentage each side</li>
|
||
<li><code>.p-14</code> - For padding 14 percentage each side</li>
|
||
<li><code>.p-15</code> - For padding 15 percentage each side</li>
|
||
<li><code>.p-16</code> - For padding 16 percentage each side</li>
|
||
<li><code>.p-17</code> - For padding 17 percentage each side</li>
|
||
<li><code>.p-18</code> - For padding 18 percentage each side</li>
|
||
<li><code>.p-19</code> - For padding 19 percentage each side</li>
|
||
<li><code>.p-20</code> - For padding 20 percentage each side</li>
|
||
<li><code>.p-21</code> - For padding 21 percentage each side</li>
|
||
<li><code>.p-22</code> - For padding 22 percentage each side</li>
|
||
<li><code>.p-23</code> - For padding 23 percentage each side</li>
|
||
<li><code>.p-24</code> - For padding 24 percentage each side</li>
|
||
<li><code>.p-25</code> - For padding 25 percentage each side</li>
|
||
<li><code>.p-26</code> - For padding 26 percentage each side</li>
|
||
<li><code>.p-27</code> - For padding 27 percentage each side</li>
|
||
<li><code>.p-28</code> - For padding 28 percentage each side</li>
|
||
<li><code>.p-29</code> - For padding 29 percentage each side</li>
|
||
<li><code>.p-30</code> - For padding 30 percentage each side</li>
|
||
</ul>
|
||
<br>
|
||
|
||
|
||
<p id="padding-top-side" class="pt-30px"><strong>Padding Top</strong></p>
|
||
<ul>
|
||
<li><code>.pt-5px</code> - For padding 5px top side</li>
|
||
<li><code>.pt-10px</code> - For padding 10px top side</li>
|
||
<li><code>.pt-15px</code> - For padding 15px top side</li>
|
||
<li><code>.pt-20px</code> - For padding 20px top side</li>
|
||
<li><code>.pt-25px</code> - For padding 25px top side</li>
|
||
<li><code>.pt-30px</code> - For padding 30px top side</li>
|
||
<li><code>.pt-35px</code> - For padding 35px top side</li>
|
||
<li><code>.pt-40px</code> - For padding 40px top side</li>
|
||
<li><code>.pt-45px</code> - For padding 45px top side</li>
|
||
<li><code>.pt-50px</code> - For padding 50px top side</li>
|
||
<li><code>.pt-55px</code> - For padding 55px top side</li>
|
||
<li><code>.pt-60px</code> - For padding 60px top side</li>
|
||
<li><code>.pt-65px</code> - For padding 65px top side</li>
|
||
<li><code>.pt-70px</code> - For padding 70px top side</li>
|
||
<li><code>.pt-1</code> - For padding 1 percentage top side</li>
|
||
<li><code>.pt-2</code> - For padding 2 percentage top side</li>
|
||
<li><code>.pt-3</code> - For padding 3 percentage top side</li>
|
||
<li><code>.pt-4</code> - For padding 4 percentage top side</li>
|
||
<li><code>.pt-5</code> - For padding 5 percentage top side</li>
|
||
<li><code>.pt-6</code> - For padding 6 percentage top side</li>
|
||
<li><code>.pt-7</code> - For padding 7 percentage top side</li>
|
||
<li><code>.pt-8</code> - For padding 8 percentage top side</li>
|
||
<li><code>.pt-9</code> - For padding 9 percentage top side</li>
|
||
<li><code>.pt-10</code> - For padding 10 percentage top side</li>
|
||
<li><code>.pt-11</code> - For padding 11 percentage top side</li>
|
||
<li><code>.pt-12</code> - For padding 12 percentage top side</li>
|
||
<li><code>.pt-13</code> - For padding 13 percentage top side</li>
|
||
<li><code>.pt-14</code> - For padding 14 percentage top side</li>
|
||
<li><code>.pt-15</code> - For padding 15 percentage top side</li>
|
||
<li><code>.pt-16</code> - For padding 16 percentage top side</li>
|
||
<li><code>.pt-17</code> - For padding 17 percentage top side</li>
|
||
<li><code>.pt-18</code> - For padding 18 percentage top side</li>
|
||
<li><code>.pt-19</code> - For padding 19 percentage top side</li>
|
||
<li><code>.pt-20</code> - For padding 20 percentage top side</li>
|
||
<li><code>.pt-21</code> - For padding 21 percentage top side</li>
|
||
<li><code>.pt-22</code> - For padding 22 percentage top side</li>
|
||
<li><code>.pt-23</code> - For padding 23 percentage top side</li>
|
||
<li><code>.pt-24</code> - For padding 24 percentage top side</li>
|
||
<li><code>.pt-25</code> - For padding 25 percentage top side</li>
|
||
<li><code>.pt-26</code> - For padding 26 percentage top side</li>
|
||
<li><code>.pt-27</code> - For padding 27 percentage top side</li>
|
||
<li><code>.pt-28</code> - For padding 28 percentage top side</li>
|
||
<li><code>.pt-29</code> - For padding 29 percentage top side</li>
|
||
<li><code>.pt-30</code> - For padding 30 percentage top side</li>
|
||
</ul>
|
||
<br>
|
||
|
||
|
||
<p id="padding-bottom-side" class="pt-30px"><strong>Padding Bottom</strong></p>
|
||
<ul>
|
||
<li><code>.pb-5px</code> - For padding 5px bottom side</li>
|
||
<li><code>.pb-10px</code> - For padding 10px bottom side</li>
|
||
<li><code>.pb-15px</code> - For padding 15px bottom side</li>
|
||
<li><code>.pb-20px</code> - For padding 20px bottom side</li>
|
||
<li><code>.pb-25px</code> - For padding 25px bottom side</li>
|
||
<li><code>.pb-30px</code> - For padding 30px bottom side</li>
|
||
<li><code>.pb-35px</code> - For padding 35px bottom side</li>
|
||
<li><code>.pb-40px</code> - For padding 40px bottom side</li>
|
||
<li><code>.pb-45px</code> - For padding 45px bottom side</li>
|
||
<li><code>.pb-50px</code> - For padding 50px bottom side</li>
|
||
<li><code>.pb-55px</code> - For padding 55px bottom side</li>
|
||
<li><code>.pb-60px</code> - For padding 60px bottom side</li>
|
||
<li><code>.pb-65px</code> - For padding 65px bottom side</li>
|
||
<li><code>.pb-70px</code> - For padding 70px bottom side</li>
|
||
<li><code>.pb-1</code> - For padding 1 percentage bottom side</li>
|
||
<li><code>.pb-2</code> - For padding 2 percentage bottom side</li>
|
||
<li><code>.pb-3</code> - For padding 3 percentage bottom side</li>
|
||
<li><code>.pb-4</code> - For padding 4 percentage bottom side</li>
|
||
<li><code>.pb-5</code> - For padding 5 percentage bottom side</li>
|
||
<li><code>.pb-6</code> - For padding 6 percentage bottom side</li>
|
||
<li><code>.pb-7</code> - For padding 7 percentage bottom side</li>
|
||
<li><code>.pb-8</code> - For padding 8 percentage bottom side</li>
|
||
<li><code>.pb-9</code> - For padding 9 percentage bottom side</li>
|
||
<li><code>.pb-10</code> - For padding 10 percentage bottom side</li>
|
||
<li><code>.pb-11</code> - For padding 11 percentage bottom side</li>
|
||
<li><code>.pb-12</code> - For padding 12 percentage bottom side</li>
|
||
<li><code>.pb-13</code> - For padding 13 percentage bottom side</li>
|
||
<li><code>.pb-14</code> - For padding 14 percentage bottom side</li>
|
||
<li><code>.pb-15</code> - For padding 15 percentage bottom side</li>
|
||
<li><code>.pb-16</code> - For padding 16 percentage bottom side</li>
|
||
<li><code>.pb-17</code> - For padding 17 percentage bottom side</li>
|
||
<li><code>.pb-18</code> - For padding 18 percentage bottom side</li>
|
||
<li><code>.pb-19</code> - For padding 19 percentage bottom side</li>
|
||
<li><code>.pb-20</code> - For padding 20 percentage bottom side</li>
|
||
<li><code>.pb-21</code> - For padding 21 percentage bottom side</li>
|
||
<li><code>.pb-22</code> - For padding 22 percentage bottom side</li>
|
||
<li><code>.pb-23</code> - For padding 23 percentage bottom side</li>
|
||
<li><code>.pb-24</code> - For padding 24 percentage bottom side</li>
|
||
<li><code>.pb-25</code> - For padding 25 percentage bottom side</li>
|
||
<li><code>.pb-26</code> - For padding 26 percentage bottom side</li>
|
||
<li><code>.pb-27</code> - For padding 27 percentage bottom side</li>
|
||
<li><code>.pb-28</code> - For padding 28 percentage bottom side</li>
|
||
<li><code>.pb-29</code> - For padding 29 percentage bottom side</li>
|
||
<li><code>.pb-30</code> - For padding 30 percentage bottom side</li>
|
||
</ul>
|
||
<br>
|
||
|
||
|
||
<p id="padding-left-side" class="pt-30px"><strong>Padding Left</strong></p>
|
||
<ul>
|
||
<li><code>.ps-5px</code> - For padding 5px left side</li>
|
||
<li><code>.ps-10px</code> - For padding 10px left side</li>
|
||
<li><code>.ps-15px</code> - For padding 15px left side</li>
|
||
<li><code>.ps-20px</code> - For padding 20px left side</li>
|
||
<li><code>.ps-25px</code> - For padding 25px left side</li>
|
||
<li><code>.ps-30px</code> - For padding 30px left side</li>
|
||
<li><code>.ps-35px</code> - For padding 35px left side</li>
|
||
<li><code>.ps-40px</code> - For padding 40px left side</li>
|
||
<li><code>.ps-45px</code> - For padding 45px left side</li>
|
||
<li><code>.ps-50px</code> - For padding 50px left side</li>
|
||
<li><code>.ps-55px</code> - For padding 55px left side</li>
|
||
<li><code>.ps-60px</code> - For padding 60px left side</li>
|
||
<li><code>.ps-65px</code> - For padding 65px left side</li>
|
||
<li><code>.ps-70px</code> - For padding 70px left side</li>
|
||
<li><code>.ps-1</code> - For padding 1 percentage left side</li>
|
||
<li><code>.ps-2</code> - For padding 2 percentage left side</li>
|
||
<li><code>.ps-3</code> - For padding 3 percentage left side</li>
|
||
<li><code>.ps-4</code> - For padding 4 percentage left side</li>
|
||
<li><code>.ps-5</code> - For padding 5 percentage left side</li>
|
||
<li><code>.ps-6</code> - For padding 6 percentage left side</li>
|
||
<li><code>.ps-7</code> - For padding 7 percentage left side</li>
|
||
<li><code>.ps-8</code> - For padding 8 percentage left side</li>
|
||
<li><code>.ps-9</code> - For padding 9 percentage left side</li>
|
||
<li><code>.ps-10</code> - For padding 10 percentage left side</li>
|
||
<li><code>.ps-11</code> - For padding 11 percentage left side</li>
|
||
<li><code>.ps-12</code> - For padding 12 percentage left side</li>
|
||
<li><code>.ps-13</code> - For padding 13 percentage left side</li>
|
||
<li><code>.ps-14</code> - For padding 14 percentage left side</li>
|
||
<li><code>.ps-15</code> - For padding 15 percentage left side</li>
|
||
<li><code>.ps-16</code> - For padding 16 percentage left side</li>
|
||
<li><code>.ps-17</code> - For padding 17 percentage left side</li>
|
||
<li><code>.ps-18</code> - For padding 18 percentage left side</li>
|
||
<li><code>.ps-19</code> - For padding 19 percentage left side</li>
|
||
<li><code>.ps-20</code> - For padding 20 percentage left side</li>
|
||
<li><code>.ps-21</code> - For padding 21 percentage left side</li>
|
||
<li><code>.ps-22</code> - For padding 22 percentage left side</li>
|
||
<li><code>.ps-23</code> - For padding 23 percentage left side</li>
|
||
<li><code>.ps-24</code> - For padding 24 percentage left side</li>
|
||
<li><code>.ps-25</code> - For padding 25 percentage left side</li>
|
||
<li><code>.ps-26</code> - For padding 26 percentage left side</li>
|
||
<li><code>.ps-27</code> - For padding 27 percentage left side</li>
|
||
<li><code>.ps-28</code> - For padding 28 percentage left side</li>
|
||
<li><code>.ps-29</code> - For padding 29 percentage left side</li>
|
||
<li><code>.ps-30</code> - For padding 30 percentage left side</li>
|
||
</ul>
|
||
<br>
|
||
|
||
|
||
<p id="padding-right-side" class="pt-30px"><strong>Padding Right</strong></p>
|
||
<ul>
|
||
<li><code>.pe-5px</code> - For padding 5px right side</li>
|
||
<li><code>.pe-10px</code> - For padding 10px right side</li>
|
||
<li><code>.pe-15px</code> - For padding 15px right side</li>
|
||
<li><code>.pe-20px</code> - For padding 20px right side</li>
|
||
<li><code>.pe-25px</code> - For padding 25px right side</li>
|
||
<li><code>.pe-30px</code> - For padding 30px right side</li>
|
||
<li><code>.pe-35px</code> - For padding 35px right side</li>
|
||
<li><code>.pe-40px</code> - For padding 40px right side</li>
|
||
<li><code>.pe-45px</code> - For padding 45px right side</li>
|
||
<li><code>.pe-50px</code> - For padding 50px right side</li>
|
||
<li><code>.pe-55px</code> - For padding 55px right side</li>
|
||
<li><code>.pe-60px</code> - For padding 60px right side</li>
|
||
<li><code>.pe-65px</code> - For padding 65px right side</li>
|
||
<li><code>.pe-70px</code> - For padding 70px right side</li>
|
||
<li><code>.pe-1</code> - For padding 1 percentage right side</li>
|
||
<li><code>.pe-2</code> - For padding 2 percentage right side</li>
|
||
<li><code>.pe-3</code> - For padding 3 percentage right side</li>
|
||
<li><code>.pe-4</code> - For padding 4 percentage right side</li>
|
||
<li><code>.pe-5</code> - For padding 5 percentage right side</li>
|
||
<li><code>.pe-6</code> - For padding 6 percentage right side</li>
|
||
<li><code>.pe-7</code> - For padding 7 percentage right side</li>
|
||
<li><code>.pe-8</code> - For padding 8 percentage right side</li>
|
||
<li><code>.pe-9</code> - For padding 9 percentage right side</li>
|
||
<li><code>.pe-10</code> - For padding 10 percentage right side</li>
|
||
<li><code>.pe-11</code> - For padding 11 percentage right side</li>
|
||
<li><code>.pe-12</code> - For padding 12 percentage right side</li>
|
||
<li><code>.pe-13</code> - For padding 13 percentage right side</li>
|
||
<li><code>.pe-14</code> - For padding 14 percentage right side</li>
|
||
<li><code>.pe-15</code> - For padding 15 percentage right side</li>
|
||
<li><code>.pe-16</code> - For padding 16 percentage right side</li>
|
||
<li><code>.pe-17</code> - For padding 17 percentage right side</li>
|
||
<li><code>.pe-18</code> - For padding 18 percentage right side</li>
|
||
<li><code>.pe-19</code> - For padding 19 percentage right side</li>
|
||
<li><code>.pe-20</code> - For padding 20 percentage right side</li>
|
||
<li><code>.pe-21</code> - For padding 21 percentage right side</li>
|
||
<li><code>.pe-22</code> - For padding 22 percentage right side</li>
|
||
<li><code>.pe-23</code> - For padding 23 percentage right side</li>
|
||
<li><code>.pe-24</code> - For padding 24 percentage right side</li>
|
||
<li><code>.pe-25</code> - For padding 25 percentage right side</li>
|
||
<li><code>.pe-26</code> - For padding 26 percentage right side</li>
|
||
<li><code>.pe-27</code> - For padding 27 percentage right side</li>
|
||
<li><code>.pe-28</code> - For padding 28 percentage right side</li>
|
||
<li><code>.pe-29</code> - For padding 29 percentage right side</li>
|
||
<li><code>.pe-30</code> - For padding 30 percentage right side</li>
|
||
</ul>
|
||
<br>
|
||
|
||
|
||
<p id="outside-box-top" class="pt-30px"><strong>Outside Box Top</strong></p>
|
||
<ul>
|
||
<li><code>.outside-box-top-15</code> - For margin outside box minus 15 percentage viewport width top side</li>
|
||
<li><code>.outside-box-top-18</code> - For margin outside box minus 18 percentage viewport width top side</li>
|
||
</ul>
|
||
<br>
|
||
|
||
|
||
<p id="outside-box-left" class="pt-30px"><strong>Outside Box Left</strong></p>
|
||
<ul>
|
||
<li><code>.outside-box-left-2</code> - For margin outside box minus 2 percentage viewport width left side </li>
|
||
<li><code>.outside-box-left-5</code> - For margin outside box minus 5 percentage viewport width left side </li>
|
||
<li><code>.outside-box-left-7</code> - For margin outside box minus 7 percentage viewport width left side </li>
|
||
<li><code>.outside-box-left-8</code> - For margin outside box minus 8 percentage viewport width left side </li>
|
||
<li><code>.outside-box-left-10</code> - For margin outside box minus 10 percentage viewport width left side </li>
|
||
<li><code>.outside-box-left-15</code> - For margin outside box minus 15 percentage viewport width left side </li>
|
||
<li><code>.outside-box-left-20</code> - For margin outside box minus 20 percentage viewport width left side </li>
|
||
<li><code>.outside-box-left-25</code> - For margin outside box minus 25 percentage viewport width left side </li>
|
||
<li><code>.outside-box-left-30</code> - For margin outside box minus 30 percentage viewport width left side </li>
|
||
<li><code>.outside-box-left-35</code> - For margin outside box minus 35 percentage viewport width left side </li>
|
||
<li><code>.outside-box-left-40</code> - For margin outside box minus 40 percentage viewport width left side </li>
|
||
<li><code>.outside-box-left-50</code> - For margin outside box minus 50 percentage viewport width left side </li>
|
||
<li><code>.outside-box-left-60</code> - For margin outside box minus 60 percentage viewport width left side </li>
|
||
<li><code>.outside-box-left-65</code> - For margin outside box minus 65 percentage viewport width left side </li>
|
||
</ul>
|
||
<br>
|
||
|
||
|
||
<p id="outside-box-right" class="pt-30px"><strong>Outside Box Right</strong></p>
|
||
<ul>
|
||
<li><code>.outside-box-right-2</code> - For margin outside box minus 2 percentage viewport width right side</li>
|
||
<li><code>.outside-box-right-5</code> - For margin outside box minus 5 percentage viewport width right side</li>
|
||
<li><code>.outside-box-right-7</code> - For margin outside box minus 7 percentage viewport width right side</li>
|
||
<li><code>.outside-box-right-10</code> - For margin outside box minus 10 percentage viewport width right side</li>
|
||
<li><code>.outside-box-right-15</code> - For margin outside box minus 15 percentage viewport width right side</li>
|
||
<li><code>.outside-box-right-20</code> - For margin outside box minus 20 percentage viewport width right side</li>
|
||
<li><code>.outside-box-right-25</code> - For margin outside box minus 25 percentage viewport width right side</li>
|
||
<li><code>.outside-box-right-30</code> - For margin outside box minus 30 percentage viewport width right side</li>
|
||
<li><code>.outside-box-right-35</code> - For margin outside box minus 35 percentage viewport width right side</li>
|
||
<li><code>.outside-box-right-40</code> - For margin outside box minus 40 percentage viewport width right side</li>
|
||
<li><code>.outside-box-right-45</code> - For margin outside box minus 45 percentage viewport width right side</li>
|
||
<li><code>.outside-box-right-50</code> - For margin outside box minus 50 percentage viewport width right side</li>
|
||
<li><code>.outside-box-right-60</code> - For margin outside box minus 60 percentage viewport width right side</li>
|
||
<li><code>.outside-box-right-65</code> - For margin outside box minus 65 percentage viewport width right side</li>
|
||
</ul>
|
||
<br>
|
||
|
||
|
||
<p id="position" class="pt-30px"><strong>Position</strong></p>
|
||
<ul>
|
||
<li><code>.position-inherit</code> - For inherit position</li>
|
||
<li><code>.position-initial</code> - For initial position</li>
|
||
<li><code>.absolute-middle-center</code> - For middle center absolute position</li>
|
||
<li><code>.absolute-middle-left</code> - For middle left absolute position</li>
|
||
<li><code>.absolute-middle-right</code> - For middle right absolute position</li>
|
||
<li><code>.absolute-top-center</code> - For top center absolute position</li>
|
||
<li><code>.absolute-bottom-center</code> - For bottom center absolute position</li>
|
||
<li><code>.absolute-bottom-left</code> - For bottom left absolute position</li>
|
||
<li><code>.absolute-bottom-right</code> - For bottom right absolute position</li>
|
||
</ul>
|
||
<br>
|
||
|
||
|
||
<p id="top-side" class="pt-30px"><strong>Top</strong></p>
|
||
<ul>
|
||
<li><code>.top-0px</code> - For top side of 0 pixel</li>
|
||
<li><code>.top-1px</code> - For top side of 1 pixel</li>
|
||
<li><code>.top-2px</code> - For top side of 2 pixel</li>
|
||
<li><code>.top-3px</code> - For top side of 3 pixel</li>
|
||
<li><code>.top-4px</code> - For top side of 4 pixel</li>
|
||
<li><code>.top-5px</code> - For top side of 5 pixel</li>
|
||
<li><code>.top-6px</code> - For top side of 6 pixel</li>
|
||
<li><code>.top-7px</code> - For top side of 7 pixel</li>
|
||
<li><code>.top-8px</code> - For top side of 8 pixel</li>
|
||
<li><code>.top-9px</code> - For top side of 9 pixel</li>
|
||
<li><code>.top-10px</code> - For top side of 10 pixel</li>
|
||
<li><code>.top-11px</code> - For top side of 11 pixel</li>
|
||
<li><code>.top-12px</code> - For top side of 12 pixel</li>
|
||
<li><code>.top-13px</code> - For top side of 13 pixel</li>
|
||
<li><code>.top-14px</code> - For top side of 14 pixel</li>
|
||
<li><code>.top-15px</code> - For top side of 15 pixel</li>
|
||
<li><code>.top-16px</code> - For top side of 16 pixel</li>
|
||
<li><code>.top-17px</code> - For top side of 17 pixel</li>
|
||
<li><code>.top-18px</code> - For top side of 18 pixel</li>
|
||
<li><code>.top-19px</code> - For top side of 19 pixel</li>
|
||
<li><code>.top-20px</code> - For top side of 20 pixel</li>
|
||
<li><code>.top-21px</code> - For top side of 21 pixel</li>
|
||
<li><code>.top-22px</code> - For top side of 22 pixel</li>
|
||
<li><code>.top-23px</code> - For top side of 23 pixel</li>
|
||
<li><code>.top-24px</code> - For top side of 24 pixel</li>
|
||
<li><code>.top-25px</code> - For top side of 25 pixel</li>
|
||
<li><code>.top-26px</code> - For top side of 26 pixel</li>
|
||
<li><code>.top-27px</code> - For top side of 27 pixel</li>
|
||
<li><code>.top-28px</code> - For top side of 28 pixel</li>
|
||
<li><code>.top-29px</code> - For top side of 29 pixel</li>
|
||
<li><code>.top-30px</code> - For top side of 30 pixel</li>
|
||
<li><code>.top-40px</code> - For top side of 40 pixel</li>
|
||
<li><code>.top-50px</code> - For top side of 50 pixel</li>
|
||
<li><code>.top-60px</code> - For top side of 60 pixel</li>
|
||
<li><code>.top-70px</code> - For top side of 70 pixel</li>
|
||
<li><code>.top-80px</code> - For top side of 80 pixel</li>
|
||
<li><code>.top-90px</code> - For top side of 90 pixel</li>
|
||
<li><code>.top-100px</code> - For top side of 100 pixel</li>
|
||
<li><code>.top-110px</code> - For top side of 110 pixel</li>
|
||
<li><code>.top-120px</code> - For top side of 120 pixel</li>
|
||
<li><code>.top-130px</code> - For top side of 130 pixel</li>
|
||
<li><code>.top-140px</code> - For top side of 140 pixel</li>
|
||
<li><code>.top-150px</code> - For top side of 150 pixel</li>
|
||
</ul>
|
||
<br>
|
||
|
||
|
||
<p id="right-side" class="pt-30px"><strong>Right</strong></p>
|
||
<ul>
|
||
<li><code>.right-0px</code> - For right side of 0 pixel</li>
|
||
<li><code>.right-1px</code> - For right side of 1 pixel</li>
|
||
<li><code>.right-2px</code> - For right side of 2 pixel</li>
|
||
<li><code>.right-3px</code> - For right side of 3 pixel</li>
|
||
<li><code>.right-4px</code> - For right side of 4 pixel</li>
|
||
<li><code>.right-5px</code> - For right side of 5 pixel</li>
|
||
<li><code>.right-6px</code> - For right side of 6 pixel</li>
|
||
<li><code>.right-7px</code> - For right side of 7 pixel</li>
|
||
<li><code>.right-8px</code> - For right side of 8 pixel</li>
|
||
<li><code>.right-9px</code> - For right side of 9 pixel</li>
|
||
<li><code>.right-10px</code> - For right side of 10 pixel</li>
|
||
<li><code>.right-11px</code> - For right side of 11 pixel</li>
|
||
<li><code>.right-12px</code> - For right side of 12 pixel</li>
|
||
<li><code>.right-13px</code> - For right side of 13 pixel</li>
|
||
<li><code>.right-14px</code> - For right side of 14 pixel</li>
|
||
<li><code>.right-15px</code> - For right side of 15 pixel</li>
|
||
<li><code>.right-16px</code> - For right side of 16 pixel</li>
|
||
<li><code>.right-17px</code> - For right side of 17 pixel</li>
|
||
<li><code>.right-18px</code> - For right side of 18 pixel</li>
|
||
<li><code>.right-19px</code> - For right side of 19 pixel</li>
|
||
<li><code>.right-20px</code> - For right side of 20 pixel</li>
|
||
<li><code>.right-21px</code> - For right side of 21 pixel</li>
|
||
<li><code>.right-22px</code> - For right side of 22 pixel</li>
|
||
<li><code>.right-23px</code> - For right side of 23 pixel</li>
|
||
<li><code>.right-24px</code> - For right side of 24 pixel</li>
|
||
<li><code>.right-25px</code> - For right side of 25 pixel</li>
|
||
<li><code>.right-26px</code> - For right side of 26 pixel</li>
|
||
<li><code>.right-27px</code> - For right side of 27 pixel</li>
|
||
<li><code>.right-28px</code> - For right side of 28 pixel</li>
|
||
<li><code>.right-29px</code> - For right side of 29 pixel</li>
|
||
<li><code>.right-30px</code> - For right side of 30 pixel</li>
|
||
<li><code>.right-40px</code> - For right side of 40 pixel</li>
|
||
<li><code>.right-50px</code> - For right side of 50 pixel</li>
|
||
<li><code>.right-60px</code> - For right side of 60 pixel</li>
|
||
<li><code>.right-70px</code> - For right side of 70 pixel</li>
|
||
<li><code>.right-80px</code> - For right side of 80 pixel</li>
|
||
<li><code>.right-90px</code> - For right side of 90 pixel</li>
|
||
<li><code>.right-100px</code> - For right side of 100 pixel</li>
|
||
<li><code>.right-110px</code> - For right side of 110 pixel</li>
|
||
<li><code>.right-120px</code> - For right side of 120 pixel</li>
|
||
<li><code>.right-130px</code> - For right side of 130 pixel</li>
|
||
<li><code>.right-140px</code> - For right side of 140 pixel</li>
|
||
<li><code>.right-150px</code> - For right side of 150 pixel</li>
|
||
</ul>
|
||
<br>
|
||
|
||
|
||
<p id="bottom-side" class="pt-30px"><strong>Bottom</strong></p>
|
||
<ul>
|
||
<li><code>.bottom-0px</code> - For bottom side of 0 pixel</li>
|
||
<li><code>.bottom-1px</code> - For bottom side of 1 pixel</li>
|
||
<li><code>.bottom-2px</code> - For bottom side of 2 pixel</li>
|
||
<li><code>.bottom-3px</code> - For bottom side of 3 pixel</li>
|
||
<li><code>.bottom-4px</code> - For bottom side of 4 pixel</li>
|
||
<li><code>.bottom-5px</code> - For bottom side of 5 pixel</li>
|
||
<li><code>.bottom-6px</code> - For bottom side of 6 pixel</li>
|
||
<li><code>.bottom-7px</code> - For bottom side of 7 pixel</li>
|
||
<li><code>.bottom-8px</code> - For bottom side of 8 pixel</li>
|
||
<li><code>.bottom-9px</code> - For bottom side of 9 pixel</li>
|
||
<li><code>.bottom-10px</code> - For bottom side of 10 pixel</li>
|
||
<li><code>.bottom-11px</code> - For bottom side of 11 pixel</li>
|
||
<li><code>.bottom-12px</code> - For bottom side of 12 pixel</li>
|
||
<li><code>.bottom-13px</code> - For bottom side of 13 pixel</li>
|
||
<li><code>.bottom-14px</code> - For bottom side of 14 pixel</li>
|
||
<li><code>.bottom-15px</code> - For bottom side of 15 pixel</li>
|
||
<li><code>.bottom-16px</code> - For bottom side of 16 pixel</li>
|
||
<li><code>.bottom-17px</code> - For bottom side of 17 pixel</li>
|
||
<li><code>.bottom-18px</code> - For bottom side of 18 pixel</li>
|
||
<li><code>.bottom-19px</code> - For bottom side of 19 pixel</li>
|
||
<li><code>.bottom-20px</code> - For bottom side of 20 pixel</li>
|
||
<li><code>.bottom-21px</code> - For bottom side of 21 pixel</li>
|
||
<li><code>.bottom-22px</code> - For bottom side of 22 pixel</li>
|
||
<li><code>.bottom-23px</code> - For bottom side of 23 pixel</li>
|
||
<li><code>.bottom-24px</code> - For bottom side of 24 pixel</li>
|
||
<li><code>.bottom-25px</code> - For bottom side of 25 pixel</li>
|
||
<li><code>.bottom-26px</code> - For bottom side of 26 pixel</li>
|
||
<li><code>.bottom-27px</code> - For bottom side of 27 pixel</li>
|
||
<li><code>.bottom-28px</code> - For bottom side of 28 pixel</li>
|
||
<li><code>.bottom-29px</code> - For bottom side of 29 pixel</li>
|
||
<li><code>.bottom-30px</code> - For bottom side of 30 pixel</li>
|
||
<li><code>.bottom-40px</code> - For bottom side of 40 pixel</li>
|
||
<li><code>.bottom-50px</code> - For bottom side of 50 pixel</li>
|
||
<li><code>.bottom-60px</code> - For bottom side of 60 pixel</li>
|
||
<li><code>.bottom-70px</code> - For bottom side of 70 pixel</li>
|
||
<li><code>.bottom-80px</code> - For bottom side of 80 pixel</li>
|
||
<li><code>.bottom-90px</code> - For bottom side of 90 pixel</li>
|
||
<li><code>.bottom-100px</code> - For bottom side of 100 pixel</li>
|
||
<li><code>.bottom-110px</code> - For bottom side of 110 pixel</li>
|
||
<li><code>.bottom-120px</code> - For bottom side of 120 pixel</li>
|
||
<li><code>.bottom-130px</code> - For bottom side of 130 pixel</li>
|
||
<li><code>.bottom-140px</code> - For bottom side of 140 pixel</li>
|
||
<li><code>.bottom-150px</code> - For bottom side of 150 pixel</li>
|
||
</ul>
|
||
<br>
|
||
|
||
|
||
<p id="left-side" class="pt-30px"><strong>Left</strong></p>
|
||
<ul>
|
||
<li><code>.left-0px</code> - For left side 0 pixel</li>
|
||
<li><code>.left-1px</code> - For left side 1 pixel</li>
|
||
<li><code>.left-2px</code> - For left side 2 pixel</li>
|
||
<li><code>.left-3px</code> - For left side 3 pixel</li>
|
||
<li><code>.left-4px</code> - For left side 4 pixel</li>
|
||
<li><code>.left-5px</code> - For left side 5 pixel</li>
|
||
<li><code>.left-6px</code> - For left side 6 pixel</li>
|
||
<li><code>.left-7px</code> - For left side 7 pixel</li>
|
||
<li><code>.left-8px</code> - For left side 8 pixel</li>
|
||
<li><code>.left-9px</code> - For left side 9 pixel</li>
|
||
<li><code>.left-10px</code> - For left side 10 pixel</li>
|
||
<li><code>.left-11px</code> - For left side 11 pixel</li>
|
||
<li><code>.left-12px</code> - For left side 12 pixel</li>
|
||
<li><code>.left-13px</code> - For left side 13 pixel</li>
|
||
<li><code>.left-14px</code> - For left side 14 pixel</li>
|
||
<li><code>.left-15px</code> - For left side 15 pixel</li>
|
||
<li><code>.left-16px</code> - For left side 16 pixel</li>
|
||
<li><code>.left-17px</code> - For left side 17 pixel</li>
|
||
<li><code>.left-18px</code> - For left side 18 pixel</li>
|
||
<li><code>.left-19px</code> - For left side 19 pixel</li>
|
||
<li><code>.left-20px</code> - For left side 20 pixel</li>
|
||
<li><code>.left-21px</code> - For left side 21 pixel</li>
|
||
<li><code>.left-22px</code> - For left side 22 pixel</li>
|
||
<li><code>.left-23px</code> - For left side 23 pixel</li>
|
||
<li><code>.left-24px</code> - For left side 24 pixel</li>
|
||
<li><code>.left-25px</code> - For left side 25 pixel</li>
|
||
<li><code>.left-26px</code> - For left side 26 pixel</li>
|
||
<li><code>.left-27px</code> - For left side 27 pixel</li>
|
||
<li><code>.left-28px</code> - For left side 28 pixel</li>
|
||
<li><code>.left-29px</code> - For left side 29 pixel</li>
|
||
<li><code>.left-30px</code> - For left side 30 pixel</li>
|
||
<li><code>.left-40px</code> - For left side 40 pixel</li>
|
||
<li><code>.left-50px</code> - For left side 50 pixel</li>
|
||
<li><code>.left-60px</code> - For left side 60 pixel</li>
|
||
<li><code>.left-70px</code> - For left side 70 pixel</li>
|
||
<li><code>.left-80px</code> - For left side 80 pixel</li>
|
||
<li><code>.left-90px</code> - For left side 90 pixel</li>
|
||
<li><code>.left-100px</code> - For left side 100 pixel</li>
|
||
<li><code>.left-110px</code> - For left side 110 pixel</li>
|
||
<li><code>.left-120px</code> - For left side 120 pixel</li>
|
||
<li><code>.left-130px</code> - For left side 130 pixel</li>
|
||
<li><code>.left-140px</code> - For left side 140 pixel</li>
|
||
<li><code>.left-150px</code> - For left side 150 pixel</li>
|
||
</ul>
|
||
<br>
|
||
|
||
|
||
<p id="top-minus-side" class="pt-30px"><strong>Top Minus</strong></p>
|
||
<ul>
|
||
<li><code>.top-minus-0px</code> - For minus top side of 0 pixel</li>
|
||
<li><code>.top-minus-1px</code> - For minus top side of 1 pixel</li>
|
||
<li><code>.top-minus-2px</code> - For minus top side of 2 pixel</li>
|
||
<li><code>.top-minus-3px</code> - For minus top side of 3 pixel</li>
|
||
<li><code>.top-minus-4px</code> - For minus top side of 4 pixel</li>
|
||
<li><code>.top-minus-5px</code> - For minus top side of 5 pixel</li>
|
||
<li><code>.top-minus-6px</code> - For minus top side of 6 pixel</li>
|
||
<li><code>.top-minus-7px</code> - For minus top side of 7 pixel</li>
|
||
<li><code>.top-minus-8px</code> - For minus top side of 8 pixel</li>
|
||
<li><code>.top-minus-9px</code> - For minus top side of 9 pixel</li>
|
||
<li><code>.top-minus-10px</code> - For minus top side of 10 pixel</li>
|
||
<li><code>.top-minus-11px</code> - For minus top side of 11 pixel</li>
|
||
<li><code>.top-minus-12px</code> - For minus top side of 12 pixel</li>
|
||
<li><code>.top-minus-13px</code> - For minus top side of 13 pixel</li>
|
||
<li><code>.top-minus-14px</code> - For minus top side of 14 pixel</li>
|
||
<li><code>.top-minus-15px</code> - For minus top side of 15 pixel</li>
|
||
<li><code>.top-minus-16px</code> - For minus top side of 16 pixel</li>
|
||
<li><code>.top-minus-17px</code> - For minus top side of 17 pixel</li>
|
||
<li><code>.top-minus-18px</code> - For minus top side of 18 pixel</li>
|
||
<li><code>.top-minus-19px</code> - For minus top side of 19 pixel</li>
|
||
<li><code>.top-minus-20px</code> - For minus top side of 20 pixel</li>
|
||
<li><code>.top-minus-21px</code> - For minus top side of 21 pixel</li>
|
||
<li><code>.top-minus-22px</code> - For minus top side of 22 pixel</li>
|
||
<li><code>.top-minus-23px</code> - For minus top side of 23 pixel</li>
|
||
<li><code>.top-minus-24px</code> - For minus top side of 24 pixel</li>
|
||
<li><code>.top-minus-25px</code> - For minus top side of 25 pixel</li>
|
||
<li><code>.top-minus-26px</code> - For minus top side of 26 pixel</li>
|
||
<li><code>.top-minus-27px</code> - For minus top side of 27 pixel</li>
|
||
<li><code>.top-minus-28px</code> - For minus top side of 28 pixel</li>
|
||
<li><code>.top-minus-29px</code> - For minus top side of 29 pixel</li>
|
||
<li><code>.top-minus-30px</code> - For minus top side of 30 pixel</li>
|
||
<li><code>.top-minus-40px</code> - For minus top side of 40 pixel</li>
|
||
<li><code>.top-minus-50px</code> - For minus top side of 50 pixel</li>
|
||
<li><code>.top-minus-60px</code> - For minus top side of 60 pixel</li>
|
||
<li><code>.top-minus-70px</code> - For minus top side of 70 pixel</li>
|
||
<li><code>.top-minus-80px</code> - For minus top side of 80 pixel</li>
|
||
<li><code>.top-minus-90px</code> - For minus top side of 90 pixel</li>
|
||
<li><code>.top-minus-100px</code> - For minus top side of 100 pixel</li>
|
||
<li><code>.top-minus-110px</code> - For minus top side of 110 pixel</li>
|
||
<li><code>.top-minus-120px</code> - For minus top side of 120 pixel</li>
|
||
<li><code>.top-minus-130px</code> - For minus top side of 130 pixel</li>
|
||
<li><code>.top-minus-140px</code> - For minus top side of 140 pixel</li>
|
||
<li><code>.top-minus-150px</code> - For minus top side of 150 pixel</li>
|
||
</ul>
|
||
<br>
|
||
|
||
|
||
<p id="right-minus-side" class="pt-30px"><strong>Right Minus</strong></p>
|
||
<ul>
|
||
<li><code>.right-minus-0px</code> - For minus right side of 0 pixel</li>
|
||
<li><code>.right-minus-1px</code> - For minus right side of 1 pixel</li>
|
||
<li><code>.right-minus-2px</code> - For minus right side of 2 pixel</li>
|
||
<li><code>.right-minus-3px</code> - For minus right side of 3 pixel</li>
|
||
<li><code>.right-minus-4px</code> - For minus right side of 4 pixel</li>
|
||
<li><code>.right-minus-5px</code> - For minus right side of 5 pixel</li>
|
||
<li><code>.right-minus-6px</code> - For minus right side of 6 pixel</li>
|
||
<li><code>.right-minus-7px</code> - For minus right side of 7 pixel</li>
|
||
<li><code>.right-minus-8px</code> - For minus right side of 8 pixel</li>
|
||
<li><code>.right-minus-9px</code> - For minus right side of 9 pixel</li>
|
||
<li><code>.right-minus-10px</code> - For minus right side of 10 pixel</li>
|
||
<li><code>.right-minus-11px</code> - For minus right side of 11 pixel</li>
|
||
<li><code>.right-minus-12px</code> - For minus right side of 12 pixel</li>
|
||
<li><code>.right-minus-13px</code> - For minus right side of 13 pixel</li>
|
||
<li><code>.right-minus-14px</code> - For minus right side of 14 pixel</li>
|
||
<li><code>.right-minus-15px</code> - For minus right side of 15 pixel</li>
|
||
<li><code>.right-minus-16px</code> - For minus right side of 16 pixel</li>
|
||
<li><code>.right-minus-17px</code> - For minus right side of 17 pixel</li>
|
||
<li><code>.right-minus-18px</code> - For minus right side of 18 pixel</li>
|
||
<li><code>.right-minus-19px</code> - For minus right side of 19 pixel</li>
|
||
<li><code>.right-minus-20px</code> - For minus right side of 20 pixel</li>
|
||
<li><code>.right-minus-21px</code> - For minus right side of 21 pixel</li>
|
||
<li><code>.right-minus-22px</code> - For minus right side of 22 pixel</li>
|
||
<li><code>.right-minus-23px</code> - For minus right side of 23 pixel</li>
|
||
<li><code>.right-minus-24px</code> - For minus right side of 24 pixel</li>
|
||
<li><code>.right-minus-25px</code> - For minus right side of 25 pixel</li>
|
||
<li><code>.right-minus-26px</code> - For minus right side of 26 pixel</li>
|
||
<li><code>.right-minus-27px</code> - For minus right side of 27 pixel</li>
|
||
<li><code>.right-minus-28px</code> - For minus right side of 28 pixel</li>
|
||
<li><code>.right-minus-29px</code> - For minus right side of 29 pixel</li>
|
||
<li><code>.right-minus-30px</code> - For minus right side of 30 pixel</li>
|
||
<li><code>.right-minus-40px</code> - For minus right side of 40 pixel</li>
|
||
<li><code>.right-minus-50px</code> - For minus right side of 50 pixel</li>
|
||
<li><code>.right-minus-60px</code> - For minus right side of 60 pixel</li>
|
||
<li><code>.right-minus-70px</code> - For minus right side of 70 pixel</li>
|
||
<li><code>.right-minus-80px</code> - For minus right side of 80 pixel</li>
|
||
<li><code>.right-minus-90px</code> - For minus right side of 90 pixel</li>
|
||
<li><code>.right-minus-100px</code> - For minus right side of 100 pixel</li>
|
||
<li><code>.right-minus-110px</code> - For minus right side of 110 pixel</li>
|
||
<li><code>.right-minus-120px</code> - For minus right side of 120 pixel</li>
|
||
<li><code>.right-minus-130px</code> - For minus right side of 130 pixel</li>
|
||
<li><code>.right-minus-140px</code> - For minus right side of 140 pixel</li>
|
||
<li><code>.right-minus-150px</code> - For minus right side of 150 pixel</li>
|
||
</ul>
|
||
<br>
|
||
|
||
|
||
<p id="bottom-minus-side" class="pt-30px"><strong>Bottom Minus</strong></p>
|
||
<ul>
|
||
<li><code>.bottom-minus-0px</code> - For minus bottom side of 0 pixel</li>
|
||
<li><code>.bottom-minus-1px</code> - For minus bottom side of 1 pixel</li>
|
||
<li><code>.bottom-minus-2px</code> - For minus bottom side of 2 pixel</li>
|
||
<li><code>.bottom-minus-3px</code> - For minus bottom side of 3 pixel</li>
|
||
<li><code>.bottom-minus-4px</code> - For minus bottom side of 4 pixel</li>
|
||
<li><code>.bottom-minus-5px</code> - For minus bottom side of 5 pixel</li>
|
||
<li><code>.bottom-minus-6px</code> - For minus bottom side of 6 pixel</li>
|
||
<li><code>.bottom-minus-7px</code> - For minus bottom side of 7 pixel</li>
|
||
<li><code>.bottom-minus-8px</code> - For minus bottom side of 8 pixel</li>
|
||
<li><code>.bottom-minus-9px</code> - For minus bottom side of 9 pixel</li>
|
||
<li><code>.bottom-minus-10px</code> - For minus bottom side of 10 pixel</li>
|
||
<li><code>.bottom-minus-11px</code> - For minus bottom side of 11 pixel</li>
|
||
<li><code>.bottom-minus-12px</code> - For minus bottom side of 12 pixel</li>
|
||
<li><code>.bottom-minus-13px</code> - For minus bottom side of 13 pixel</li>
|
||
<li><code>.bottom-minus-14px</code> - For minus bottom side of 14 pixel</li>
|
||
<li><code>.bottom-minus-15px</code> - For minus bottom side of 15 pixel</li>
|
||
<li><code>.bottom-minus-16px</code> - For minus bottom side of 16 pixel</li>
|
||
<li><code>.bottom-minus-17px</code> - For minus bottom side of 17 pixel</li>
|
||
<li><code>.bottom-minus-18px</code> - For minus bottom side of 18 pixel</li>
|
||
<li><code>.bottom-minus-19px</code> - For minus bottom side of 19 pixel</li>
|
||
<li><code>.bottom-minus-20px</code> - For minus bottom side of 20 pixel</li>
|
||
<li><code>.bottom-minus-21px</code> - For minus bottom side of 21 pixel</li>
|
||
<li><code>.bottom-minus-22px</code> - For minus bottom side of 22 pixel</li>
|
||
<li><code>.bottom-minus-23px</code> - For minus bottom side of 23 pixel</li>
|
||
<li><code>.bottom-minus-24px</code> - For minus bottom side of 24 pixel</li>
|
||
<li><code>.bottom-minus-25px</code> - For minus bottom side of 25 pixel</li>
|
||
<li><code>.bottom-minus-26px</code> - For minus bottom side of 26 pixel</li>
|
||
<li><code>.bottom-minus-27px</code> - For minus bottom side of 27 pixel</li>
|
||
<li><code>.bottom-minus-28px</code> - For minus bottom side of 28 pixel</li>
|
||
<li><code>.bottom-minus-29px</code> - For minus bottom side of 29 pixel</li>
|
||
<li><code>.bottom-minus-30px</code> - For minus bottom side of 30 pixel</li>
|
||
<li><code>.bottom-minus-40px</code> - For minus bottom side of 40 pixel</li>
|
||
<li><code>.bottom-minus-50px</code> - For minus bottom side of 50 pixel</li>
|
||
<li><code>.bottom-minus-60px</code> - For minus bottom side of 60 pixel</li>
|
||
<li><code>.bottom-minus-70px</code> - For minus bottom side of 70 pixel</li>
|
||
<li><code>.bottom-minus-80px</code> - For minus bottom side of 80 pixel</li>
|
||
<li><code>.bottom-minus-90px</code> - For minus bottom side of 90 pixel</li>
|
||
<li><code>.bottom-minus-100px</code> - For minus bottom side of 100 pixel</li>
|
||
<li><code>.bottom-minus-110px</code> - For minus bottom side of 110 pixel</li>
|
||
<li><code>.bottom-minus-120px</code> - For minus bottom side of 120 pixel</li>
|
||
<li><code>.bottom-minus-130px</code> - For minus bottom side of 130 pixel</li>
|
||
<li><code>.bottom-minus-140px</code> - For minus bottom side of 140 pixel</li>
|
||
<li><code>.bottom-minus-150px</code> - For minus bottom side of 150 pixel</li>
|
||
</ul>
|
||
<br>
|
||
|
||
|
||
<p id="left-minus-side" class="pt-30px"><strong>Left Minus</strong></p>
|
||
<ul>
|
||
<li><code>.left-minus-0px</code> - For minus left side 0 pixel</li>
|
||
<li><code>.left-minus-1px</code> - For minus left side 1 pixel</li>
|
||
<li><code>.left-minus-2px</code> - For minus left side 2 pixel</li>
|
||
<li><code>.left-minus-3px</code> - For minus left side 3 pixel</li>
|
||
<li><code>.left-minus-4px</code> - For minus left side 4 pixel</li>
|
||
<li><code>.left-minus-5px</code> - For minus left side 5 pixel</li>
|
||
<li><code>.left-minus-6px</code> - For minus left side 6 pixel</li>
|
||
<li><code>.left-minus-7px</code> - For minus left side 7 pixel</li>
|
||
<li><code>.left-minus-8px</code> - For minus left side 8 pixel</li>
|
||
<li><code>.left-minus-9px</code> - For minus left side 9 pixel</li>
|
||
<li><code>.left-minus-10px</code> - For minus left side 10 pixel</li>
|
||
<li><code>.left-minus-11px</code> - For minus left side 11 pixel</li>
|
||
<li><code>.left-minus-12px</code> - For minus left side 12 pixel</li>
|
||
<li><code>.left-minus-13px</code> - For minus left side 13 pixel</li>
|
||
<li><code>.left-minus-14px</code> - For minus left side 14 pixel</li>
|
||
<li><code>.left-minus-15px</code> - For minus left side 15 pixel</li>
|
||
<li><code>.left-minus-16px</code> - For minus left side 16 pixel</li>
|
||
<li><code>.left-minus-17px</code> - For minus left side 17 pixel</li>
|
||
<li><code>.left-minus-18px</code> - For minus left side 18 pixel</li>
|
||
<li><code>.left-minus-19px</code> - For minus left side 19 pixel</li>
|
||
<li><code>.left-minus-20px</code> - For minus left side 20 pixel</li>
|
||
<li><code>.left-minus-21px</code> - For minus left side 21 pixel</li>
|
||
<li><code>.left-minus-22px</code> - For minus left side 22 pixel</li>
|
||
<li><code>.left-minus-23px</code> - For minus left side 23 pixel</li>
|
||
<li><code>.left-minus-24px</code> - For minus left side 24 pixel</li>
|
||
<li><code>.left-minus-25px</code> - For minus left side 25 pixel</li>
|
||
<li><code>.left-minus-26px</code> - For minus left side 26 pixel</li>
|
||
<li><code>.left-minus-27px</code> - For minus left side 27 pixel</li>
|
||
<li><code>.left-minus-28px</code> - For minus left side 28 pixel</li>
|
||
<li><code>.left-minus-29px</code> - For minus left side 29 pixel</li>
|
||
<li><code>.left-minus-30px</code> - For minus left side 30 pixel</li>
|
||
<li><code>.left-minus-40px</code> - For minus left side 40 pixel</li>
|
||
<li><code>.left-minus-50px</code> - For minus left side 50 pixel</li>
|
||
<li><code>.left-minus-60px</code> - For minus left side 60 pixel</li>
|
||
<li><code>.left-minus-70px</code> - For minus left side 70 pixel</li>
|
||
<li><code>.left-minus-80px</code> - For minus left side 80 pixel</li>
|
||
<li><code>.left-minus-90px</code> - For minus left side 90 pixel</li>
|
||
<li><code>.left-minus-100px</code> - For minus left side 100 pixel</li>
|
||
<li><code>.left-minus-110px</code> - For minus left side 110 pixel</li>
|
||
<li><code>.left-minus-120px</code> - For minus left side 120 pixel</li>
|
||
<li><code>.left-minus-130px</code> - For minus left side 130 pixel</li>
|
||
<li><code>.left-minus-140px</code> - For minus left side 140 pixel</li>
|
||
<li><code>.left-minus-150px</code> - For minus left side 150 pixel</li>
|
||
</ul>
|
||
<br>
|
||
|
||
|
||
<p id="width" class="pt-30px"><strong>Width</strong></p>
|
||
<ul>
|
||
<li><code>.w-1px</code> - For width of 1px on DIV/Text</li>
|
||
<li><code>.w-2px</code> - For width of 2px on DIV/Text</li>
|
||
<li><code>.w-3px</code> - For width of 3px on DIV/Text</li>
|
||
<li><code>.w-4px</code> - For width of 4px on DIV/Text</li>
|
||
<li><code>.w-5px</code> - For width of 5px on DIV/Text</li>
|
||
<li><code>.w-6px</code> - For width of 6px on DIV/Text</li>
|
||
<li><code>.w-7px</code> - For width of 7px on DIV/Text</li>
|
||
<li><code>.w-8px</code> - For width of 8px on DIV/Text</li>
|
||
<li><code>.w-9px</code> - For width of 9px on DIV/Text</li>
|
||
<li><code>.w-10px</code> - For width of 10px on DIV/Text</li>
|
||
<li><code>.w-15px</code> - For width of 15px on DIV/Text</li>
|
||
<li><code>.w-20px</code> - For width of 20px on DIV/Text</li>
|
||
<li><code>.w-25px</code> - For width of 25px on DIV/Text</li>
|
||
<li><code>.w-30px</code> - For width of 30px on DIV/Text</li>
|
||
<li><code>.w-35px</code> - For width of 35px on DIV/Text</li>
|
||
<li><code>.w-40px</code> - For width of 40px on DIV/Text</li>
|
||
<li><code>.w-45px</code> - For width of 45px on DIV/Text</li>
|
||
<li><code>.w-50px</code> - For width of 50px on DIV/Text</li>
|
||
<li><code>.w-55px</code> - For width of 55px on DIV/Text</li>
|
||
<li><code>.w-60px</code> - For width of 60px on DIV/Text</li>
|
||
<li><code>.w-65px</code> - For width of 65px on DIV/Text</li>
|
||
<li><code>.w-70px</code> - For width of 70px on DIV/Text</li>
|
||
<li><code>.w-75px</code> - For width of 75px on DIV/Text</li>
|
||
<li><code>.w-80px</code> - For width of 80px on DIV/Text</li>
|
||
<li><code>.w-85px</code> - For width of 85px on DIV/Text</li>
|
||
<li><code>.w-90px</code> - For width of 90px on DIV/Text</li>
|
||
<li><code>.w-95px</code> - For width of 95px on DIV/Text</li>
|
||
<li><code>.w-100px</code> - For width of 100px on DIV/Text</li>
|
||
<li><code>.w-110px</code> - For width of 110px on DIV/Text</li>
|
||
<li><code>.w-120px</code> - For width of 120px on DIV/Text</li>
|
||
<li><code>.w-130px</code> - For width of 130px on DIV/Text</li>
|
||
<li><code>.w-140px</code> - For width of 140px on DIV/Text</li>
|
||
<li><code>.w-150px</code> - For width of 150px on DIV/Text</li>
|
||
<li><code>.w-160px</code> - For width of 160px on DIV/Text</li>
|
||
<li><code>.w-170px</code> - For width of 170px on DIV/Text</li>
|
||
<li><code>.w-180px</code> - For width of 180px on DIV/Text</li>
|
||
<li><code>.w-190px</code> - For width of 190px on DIV/Text</li>
|
||
<li><code>.w-200px</code> - For width of 200px on DIV/Text</li>
|
||
<li><code>.w-210px</code> - For width of 210px on DIV/Text</li>
|
||
<li><code>.w-220px</code> - For width of 220px on DIV/Text</li>
|
||
<li><code>.w-230px</code> - For width of 230px on DIV/Text</li>
|
||
<li><code>.w-240px</code> - For width of 240px on DIV/Text</li>
|
||
<li><code>.w-250px</code> - For width of 250px on DIV/Text</li>
|
||
<li><code>.w-260px</code> - For width of 260px on DIV/Text</li>
|
||
<li><code>.w-270px</code> - For width of 270px on DIV/Text</li>
|
||
<li><code>.w-280px</code> - For width of 280px on DIV/Text</li>
|
||
<li><code>.w-290px</code> - For width of 290px on DIV/Text</li>
|
||
<li><code>.w-300px</code> - For width of 300px on DIV/Text</li>
|
||
<li><code>.w-310px</code> - For width of 310px on DIV/Text</li>
|
||
<li><code>.w-320px</code> - For width of 320px on DIV/Text</li>
|
||
<li><code>.w-330px</code> - For width of 330px on DIV/Text</li>
|
||
<li><code>.w-340px</code> - For width of 340px on DIV/Text</li>
|
||
<li><code>.w-350px</code> - For width of 350px on DIV/Text</li>
|
||
<li><code>.w-360px</code> - For width of 360px on DIV/Text</li>
|
||
<li><code>.w-370px</code> - For width of 370px on DIV/Text</li>
|
||
<li><code>.w-380px</code> - For width of 380px on DIV/Text</li>
|
||
<li><code>.w-390px</code> - For width of 390px on DIV/Text</li>
|
||
<li><code>.w-400px</code> - For width of 400px on DIV/Text</li>
|
||
<li><code>.w-450px</code> - For width of 450px on DIV/Text</li>
|
||
<li><code>.w-500px</code> - For width of 500px on DIV/Text</li>
|
||
<li><code>.w-550px</code> - For width of 550px on DIV/Text</li>
|
||
<li><code>.w-600px</code> - For width of 600px on DIV/Text</li>
|
||
<li><code>.w-650px</code> - For width of 650px on DIV/Text</li>
|
||
<li><code>.w-700px</code> - For width of 700px on DIV/Text</li>
|
||
<li><code>.w-750px</code> - For width of 750px on DIV/Text</li>
|
||
<li><code>.w-800px</code> - For width of 800px on DIV/Text</li>
|
||
<li><code>.w-850px</code> - For width of 850px on DIV/Text</li>
|
||
<li><code>.w-900px</code> - For width of 900px on DIV/Text</li>
|
||
<li><code>.w-950px</code> - For width of 950px on DIV/Text</li>
|
||
<li><code>.w-1000px</code> - For width of 1000px on DIV/Text</li>
|
||
<li><code>.w-10</code> - For width of 10 percentage on DIV/Text</li>
|
||
<li><code>.w-15</code> - For width of 15 percentage on DIV/Text</li>
|
||
<li><code>.w-20</code> - For width of 20 percentage on DIV/Text</li>
|
||
<li><code>.w-25</code> - For width of 25 percentage on DIV/Text</li>
|
||
<li><code>.w-30</code> - For width of 30 percentage on DIV/Text</li>
|
||
<li><code>.w-35</code> - For width of 35 percentage on DIV/Text</li>
|
||
<li><code>.w-40</code> - For width of 40 percentage on DIV/Text</li>
|
||
<li><code>.w-45</code> - For width of 45 percentage on DIV/Text</li>
|
||
<li><code>.w-50</code> - For width of 50 percentage on DIV/Text</li>
|
||
<li><code>.w-55</code> - For width of 55 percentage on DIV/Text</li>
|
||
<li><code>.w-60</code> - For width of 60 percentage on DIV/Text</li>
|
||
<li><code>.w-65</code> - For width of 65 percentage on DIV/Text</li>
|
||
<li><code>.w-70</code> - For width of 70 percentage on DIV/Text</li>
|
||
<li><code>.w-75</code> - For width of 75 percentage on DIV/Text</li>
|
||
<li><code>.w-80</code> - For width of 80 percentage on DIV/Text</li>
|
||
<li><code>.w-85</code> - For width of 85 percentage on DIV/Text</li>
|
||
<li><code>.w-90</code> - For width of 90 percentage on DIV/Text</li>
|
||
<li><code>.w-95</code> - For width of 95 percentage on DIV/Text</li>
|
||
<li><code>.w-100</code> - For width of 100 percentage on DIV/Text</li>
|
||
<li><code>.w-auto</code> - For width of auto on DIV/Text</li>
|
||
</ul>
|
||
<br>
|
||
|
||
|
||
<p id="height" class="pt-30px"><strong>Height</strong></p>
|
||
<ul>
|
||
<li><code>.h-1px</code> - For height of 1px on DIV</li>
|
||
<li><code>.h-2px</code> - For height of 2px on DIV</li>
|
||
<li><code>.h-3px</code> - For height of 3px on DIV</li>
|
||
<li><code>.h-4px</code> - For height of 4px on DIV</li>
|
||
<li><code>.h-5px</code> - For height of 5px on DIV</li>
|
||
<li><code>.h-6px</code> - For height of 6px on DIV</li>
|
||
<li><code>.h-7px</code> - For height of 7px on DIV</li>
|
||
<li><code>.h-8px</code> - For height of 8px on DIV</li>
|
||
<li><code>.h-9px</code> - For height of 9px on DIV</li>
|
||
<li><code>.h-10px</code> - For height of 10px on DIV</li>
|
||
<li><code>.h-11px</code> - For height of 11px on DIV</li>
|
||
<li><code>.h-12px</code> - For height of 12px on DIV</li>
|
||
<li><code>.h-13px</code> - For height of 13px on DIV</li>
|
||
<li><code>.h-14px</code> - For height of 14px on DIV</li>
|
||
<li><code>.h-15px</code> - For height of 15px on DIV</li>
|
||
<li><code>.h-20px</code> - For height of 20px on DIV</li>
|
||
<li><code>.h-25px</code> - For height of 25px on DIV</li>
|
||
<li><code>.h-30px</code> - For height of 30px on DIV</li>
|
||
<li><code>.h-35px</code> - For height of 35px on DIV</li>
|
||
<li><code>.h-40px</code> - For height of 40px on DIV</li>
|
||
<li><code>.h-42px</code> - For height of 42px on DIV</li>
|
||
<li><code>.h-45px</code> - For height of 45px on DIV</li>
|
||
<li><code>.h-50px</code> - For height of 50px on DIV</li>
|
||
<li><code>.h-55px</code> - For height of 55px on DIV</li>
|
||
<li><code>.h-60px</code> - For height of 60px on DIV</li>
|
||
<li><code>.h-65px</code> - For height of 65px on DIV</li>
|
||
<li><code>.h-70px</code> - For height of 70px on DIV</li>
|
||
<li><code>.h-75px</code> - For height of 75px on DIV</li>
|
||
<li><code>.h-80px</code> - For height of 80px on DIV</li>
|
||
<li><code>.h-85px</code> - For height of 85px on DIV</li>
|
||
<li><code>.h-90px</code> - For height of 90px on DIV</li>
|
||
<li><code>.h-95px</code> - For height of 95px on DIV</li>
|
||
<li><code>.h-100px</code> - For height of 100px on DIV</li>
|
||
<li><code>.h-110px</code> - For height of 110px on DIV</li>
|
||
<li><code>.h-120px</code> - For height of 120px on DIV</li>
|
||
<li><code>.h-130px</code> - For height of 130px on DIV</li>
|
||
<li><code>.h-140px</code> - For height of 140px on DIV</li>
|
||
<li><code>.h-150px</code> - For height of 150px on DIV</li>
|
||
<li><code>.h-160px</code> - For height of 160px on DIV</li>
|
||
<li><code>.h-170px</code> - For height of 170px on DIV</li>
|
||
<li><code>.h-180px</code> - For height of 180px on DIV</li>
|
||
<li><code>.h-190px</code> - For height of 190px on DIV</li>
|
||
<li><code>.h-200px</code> - For height of 200px on DIV</li>
|
||
<li><code>.h-210px</code> - For height of 210px on DIV</li>
|
||
<li><code>.h-220px</code> - For height of 220px on DIV</li>
|
||
<li><code>.h-230px</code> - For height of 230px on DIV</li>
|
||
<li><code>.h-240px</code> - For height of 240px on DIV</li>
|
||
<li><code>.h-250px</code> - For height of 250px on DIV</li>
|
||
<li><code>.h-260px</code> - For height of 260px on DIV</li>
|
||
<li><code>.h-270px</code> - For height of 270px on DIV</li>
|
||
<li><code>.h-280px</code> - For height of 280px on DIV</li>
|
||
<li><code>.h-290px</code> - For height of 290px on DIV</li>
|
||
<li><code>.h-300px</code> - For height of 300px on DIV</li>
|
||
<li><code>.h-350px</code> - For height of 350px on DIV</li>
|
||
<li><code>.h-400px</code> - For height of 400px on DIV</li>
|
||
<li><code>.h-450px</code> - For height of 450px on DIV</li>
|
||
<li><code>.h-480px</code> - For height of 480px on DIV</li>
|
||
<li><code>.h-500px</code> - For height of 500px on DIV</li>
|
||
<li><code>.h-550px</code> - For height of 550px on DIV</li>
|
||
<li><code>.h-580px</code> - For height of 580px on DIV</li>
|
||
<li><code>.h-600px</code> - For height of 600px on DIV</li>
|
||
<li><code>.h-650px</code> - For height of 650px on DIV</li>
|
||
<li><code>.h-700px</code> - For height of 700px on DIV</li>
|
||
<li><code>.h-750px</code> - For height of 750px on DIV</li>
|
||
<li><code>.h-800px</code> - For height of 800px on DIV</li>
|
||
<li><code>.h-850px</code> - For height of 850px on DIV</li>
|
||
<li><code>.h-auto</code> - For height of auto on DIV</li>
|
||
</ul>
|
||
<br>
|
||
|
||
|
||
<p id="screen-height" class="pt-30px"><strong>Screen Height</strong></p>
|
||
<ul>
|
||
<li><code>.extra-very-small-screen</code> - For extra very small screen on DIV</li>
|
||
<li><code>.extra-small-screen</code> - For extra small screen on DIV</li>
|
||
<li><code>.small-screen</code> - For small screen on DIV</li>
|
||
<li><code>.one-half-screen</code> - For one half screen on DIV</li>
|
||
<li><code>.one-third-screen</code> - For one third screen on DIV</li>
|
||
<li><code>.one-fourth-screen</code> - For one fourth screen on DIV</li>
|
||
<li><code>.one-fifth-screen</code> - For one fifth screen on DIV</li>
|
||
<li><code>.one-sixth-screen</code> - For one sixth screen on DIV</li>
|
||
<li><code>.one-seventh-screen</code> - For one seventh screen on DIV</li>
|
||
</ul>
|
||
<br>
|
||
|
||
|
||
<p id="minimum-height" class="pt-30px"><strong>Minimum Height</strong></p>
|
||
<ul>
|
||
<li><code>.min-h-100px</code> - For minimum height of 100 pixel</li>
|
||
<li><code>.min-h-150px</code> - For minimum height of 150 pixel</li>
|
||
<li><code>.min-h-200px</code> - For minimum height of 200 pixel</li>
|
||
<li><code>.min-h-250px</code> - For minimum height of 250 pixel</li>
|
||
<li><code>.min-h-300px</code> - For minimum height of 300 pixel</li>
|
||
<li><code>.min-h-350px</code> - For minimum height of 350 pixel</li>
|
||
<li><code>.min-h-400px</code> - For minimum height of 400 pixel</li>
|
||
<li><code>.min-h-450px</code> - For minimum height of 450 pixel</li>
|
||
<li><code>.min-h-500px</code> - For minimum height of 500 pixel</li>
|
||
<li><code>.min-h-550px</code> - For minimum height of 550 pixel</li>
|
||
<li><code>.min-h-600px</code> - For minimum height of 600 pixel</li>
|
||
<li><code>.min-h-650px</code> - For minimum height of 650 pixel</li>
|
||
<li><code>.min-h-700px</code> - For minimum height of 700 pixel</li>
|
||
<li><code>.min-h-750px</code> - For minimum height of 750 pixel</li>
|
||
<li><code>.min-h-800px</code> - For minimum height of 800 pixel</li>
|
||
<li><code>.min-h-850px</code> - For minimum height of 850 pixel</li>
|
||
<li><code>.min-h-900px</code> - For minimum height of 900 pixel</li>
|
||
<li><code>.min-h-950px</code> - For minimum height of 950 pixel</li>
|
||
</ul>
|
||
<br>
|
||
|
||
|
||
<p id="full-screen" class="pt-30px"><strong>Full Screen</strong></p>
|
||
<ul>
|
||
<li><code>.full-screen</code> - For full screen on DIV</li>
|
||
</ul>
|
||
<br>
|
||
|
||
|
||
<p id="separator" class="pt-30px"><strong>Separator</strong></p>
|
||
<ul>
|
||
<li><code>.separator-line-1px</code> - For separator horizontal 1 pixel line</li>
|
||
<li><code>.separator-line-2px</code> - For separator horizontal 2 pixel line</li>
|
||
<li><code>.separator-line-3px</code> - For separator horizontal 3 pixel line</li>
|
||
<li><code>.separator-line-4px</code> - For separator horizontal 4 pixel line</li>
|
||
<li><code>.separator-line-5px</code> - For separator horizontal 5 pixel line</li>
|
||
</ul>
|
||
<br>
|
||
|
||
|
||
<p id="border-width" class="pt-30px"><strong>Border Width</strong></p>
|
||
<ul>
|
||
<li><code>.border-1</code> - For border width of 1 pixel</li>
|
||
<li><code>.border-2</code> - For border width of 2 pixel</li>
|
||
<li><code>.border-3</code> - For border width of 3 pixel</li>
|
||
<li><code>.border-4</code> - For border width of 4 pixel</li>
|
||
<li><code>.border-5</code> - For border width of 5 pixel</li>
|
||
<li><code>.border-6</code> - For border width of 6 pixel</li>
|
||
<li><code>.border-7</code> - For border width of 7 pixel</li>
|
||
<li><code>.border-8</code> - For border width of 8 pixel</li>
|
||
<li><code>.border-9</code> - For border width of 9 pixel</li>
|
||
<li><code>.border-10</code> - For border width of 10 pixel</li>
|
||
</ul>
|
||
<br>
|
||
|
||
|
||
<p id="border-color" class="pt-30px"><strong>Border Color</strong></p>
|
||
<ul>
|
||
<li><code>.border-color-base-color</code> - For border color of base-color</li>
|
||
<li><code>.border-color-white</code> - For border color of white</li>
|
||
<li><code>.border-color-dark-gray</code> - For border color of dark gray</li>
|
||
<li><code>.border-color-medium-gray</code> - For border color of medium gray</li>
|
||
<li><code>.border-color-light-gray</code> - For border color of light gray</li>
|
||
<li><code>.border-color-very-light-gray</code> - For border color of very light gray</li>
|
||
<li><code>.border-color-light-medium-gray</code> - For border color of light medium gray</li>
|
||
<li><code>.border-color-extra-medium-gray</code> - For border color of extra medium gray</li>
|
||
<li><code>.border-color-yellow</code> - For border color of yellow</li>
|
||
<li><code>.border-color-transparent-dark-very-light</code> - For border color of transparent dark very light</li>
|
||
<li><code>.border-color-transparent-white-very-light</code> - For border color of transparent white very light</li>
|
||
<li><code>.border-color-transparent-white-light</code> - For border color of transparent white light</li>
|
||
<li><code>.border-color-transparent-white</code> - For border color of transparent white</li>
|
||
<li><code>.border-color-transparent</code> - For border color of transparent</li>
|
||
<li><code>.border-color-transparent-on-hover</code> - For border color of transparent on hover</li>
|
||
</ul>
|
||
<br>
|
||
|
||
|
||
<p id="border-gradient-color" class="pt-30px"><strong>Border Gradient Color</strong></p>
|
||
<ul>
|
||
<li><code>.border-gradient-light-pink-light-orange</code> - For border gradient color of light pink light orange</li>
|
||
<li><code>.border-gradient-purple-pink</code> - For border gradient color of purple pink</li>
|
||
<li><code>.border-gradient-fast-pink-light-yellow</code> - For border gradient color of fast pink light yellow</li>
|
||
<li><code>.border-gradient-pink-orange</code> - For border gradient color of pink orange</li>
|
||
<li><code>.border-gradient-fast-blue-purple</code> - For border gradient color of fast blue purple</li>
|
||
<li><code>.border-gradient-light-pink-light-purple</code> - For border gradient color of light pink light purple</li>
|
||
<li><code>.border-gradient-light-green-light-perotgreen</code> - For border gradient color of light green light perotgreen</li>
|
||
<li><code>.border-gradient-sky-blue-pink</code> - For border gradient color of sky blue pink</li>
|
||
</ul>
|
||
<br>
|
||
|
||
|
||
<p id="border-style" class="pt-30px"><strong>Border Style</strong></p>
|
||
<ul>
|
||
<li><code>.border-dotted</code> - For Border style dotted</li>
|
||
<li><code>.border-dashed</code> - For Border style dashed</li>
|
||
<li><code>.border-solid</code> - For Border style solid</li>
|
||
<li><code>.border-double</code> - For Border style double</li>
|
||
<li><code>.border-groove</code> - For Border style groove</li>
|
||
<li><code>.border-ridge</code> - For Border style ridge</li>
|
||
<li><code>.border-inset</code> - For Border style inset</li>
|
||
<li><code>.border-outset</code> - For Border style outset</li>
|
||
<li><code>.border-none</code> - For Border style none</li>
|
||
<li><code>.border-hidden</code> - For Border style hidden</li>
|
||
</ul>
|
||
<br>
|
||
|
||
|
||
<p id="border-radius" class="pt-30px"><strong>Border Radius</strong></p>
|
||
<ul>
|
||
<li><code>.border-radius-0px</code> - For border radius of 0 pixel</li>
|
||
<li><code>.border-radius-1px</code> - For border radius of 1 pixel</li>
|
||
<li><code>.border-radius-2px</code> - For border radius of 2 pixel</li>
|
||
<li><code>.border-radius-3px</code> - For border radius of 3 pixel</li>
|
||
<li><code>.border-radius-4px</code> - For border radius of 4 pixel</li>
|
||
<li><code>.border-radius-5px</code> - For border radius of 5 pixel</li>
|
||
<li><code>.border-radius-6px</code> - For border radius of 6 pixel</li>
|
||
<li><code>.border-radius-7px</code> - For border radius of 7 pixel</li>
|
||
<li><code>.border-radius-8px</code> - For border radius of 8 pixel</li>
|
||
<li><code>.border-radius-9px</code> - For border radius of 9 pixel</li>
|
||
<li><code>.border-radius-10px</code> - For border radius of 10 pixel</li>
|
||
<li><code>.border-radius-15px</code> - For border radius of 15 pixel</li>
|
||
<li><code>.border-radius-18px</code> - For border radius of 18 pixel</li>
|
||
<li><code>.border-radius-20px</code> - For border radius of 20 pixel</li>
|
||
<li><code>.border-radius-22px</code> - For border radius of 22 pixel</li>
|
||
<li><code>.border-radius-24px</code> - For border radius of 24 pixel</li>
|
||
<li><code>.border-radius-26px</code> - For border radius of 26 pixel</li>
|
||
<li><code>.border-radius-30px</code> - For border radius of 30 pixel</li>
|
||
<li><code>.border-radius-40px</code> - For border radius of 40 pixel</li>
|
||
<li><code>.border-radius-50px</code> - For border radius of 50 pixel</li>
|
||
<li><code>.border-radius-100px</code> - For border radius of 100 pixel</li>
|
||
<li><code>.border-radius-50</code> - For border radius of 50 percentage</li>
|
||
<li><code>.border-radius-100</code> - For border radius of 100 percentage</li>
|
||
<li><code>.no-border-radius</code> - For border radius of no border radius</li>
|
||
</ul>
|
||
<br>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
|
||
<section id="slider" class="hidden">
|
||
<div class="container-fluid">
|
||
|
||
<div class="row">
|
||
<div class="col-md-12 docs-content-inner" id="slider-slider-types-options">
|
||
<h1>Slider Types & Options</h1>
|
||
<p>Crafto includes 2 types of sliders as mentioned below:</p>
|
||
<ul>
|
||
<li><a href="index.html#slider-swiper-slider" class="inner-link">Swiper Slider</a></li>
|
||
<li><a href="index.html#slider-revolution-slider" class="inner-link">Revolution Slider</a></li>
|
||
</ul>
|
||
|
||
<h2 id="slider-swiper-slider">Swiper Slider</h2>
|
||
<br>
|
||
<a href="../demo-startup.html" target="_blank"><img src="images/swiper-slider.jpg" alt="Crafto" /></a>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<span class="comment"><!-- start section --></span>
|
||
<section class="p-0 bg-dark-gray">
|
||
<div class="swiper lg-no-parallax full-screen md-h-600px sm-h-500px swiper-light-pagination ipad-top-space-margin magic-cursor drag-cursor" data-slider-options='{ "slidesPerView": 1, "loop": true, "parallax": true, "speed": 1200, "autoplay": { "delay": 4000, "disableOnInteraction": false }, "pagination": { "el": ".swiper-pagination-bullets", "clickable": true }, "navigation": { "nextEl": ".slider-one-slide-next-1", "prevEl": ".slider-one-slide-prev-1" }, "keyboard": { "enabled": true, "onlyInViewport": true }, "effect": "slide" }'>
|
||
<div class="swiper-wrapper">
|
||
<span class="comment"><!-- start slider item --></span>
|
||
<div class="swiper-slide overflow-hidden">
|
||
<div class="cover-background position-absolute top-0 start-0 w-100 h-100" style="background-image:url('image path');" data-swiper-parallax="1000">
|
||
<div class="opacity-light bg-gradient-black-green"></div>
|
||
<div class="container h-100" data-swiper-parallax="-300">
|
||
<div class="row align-items-center justify-content-center h-100 text-center">
|
||
<div class="col-xl-7 col-lg-9 col-md-10 position-relative text-white">
|
||
<span data-anime='{ "el": "childs", "translateY": [0, 0], "opacity": [0,0.7], "duration": 1500, "delay": 200, "staggervalue": 300, "easing": "easeOutQuad" }'><span class="fw-300 fs-22 opacity-7 mb-15px d-inline-block">Creative solutions for everyone</span></span>
|
||
<span class="opacity-7 fs-80 xs-fs-60 alt-font fw-700 text-shadow-extra-large ls-minus-2px mb-45px sm-mb-30px xs-mb-20px d-inline-block swiper-parallax-fancy-text" data-fancy-text='{ "effect": "rotate", "string": ["We craft unique business ideas"] }'></span>
|
||
<div data-anime='{ "el": "childs", "translateY": [80, 0], "opacity": [0,1], "duration": 600, "delay": 1000, "staggervalue": 300, "easing": "easeOutQuad" }'>
|
||
<a href="#" target="_blank" class="btn btn-large btn-gradient-emerald-blue-emerald-green btn-hover-animation-switch btn-round-edge btn-box-shadow me-20px xs-m-10px">
|
||
<span>
|
||
<span class="btn-text">Discover crafto</span>
|
||
<span class="btn-icon"><i class="feather icon-feather-arrow-right"></i></span>
|
||
<span class="btn-icon"><i class="feather icon-feather-arrow-right"></i></span>
|
||
</span>
|
||
</a>
|
||
<a href="#" target="_blank" class="btn btn-large btn-transparent-white-light border-1 btn-hover-animation btn-box-shadow btn-round-edge xs-m-10px">
|
||
<span>
|
||
<span class="btn-text">Get started now</span>
|
||
<span class="btn-icon"><i class="feather icon-feather-arrow-right"></i></span>
|
||
</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<span class="comment"><!-- end slider item --></span>
|
||
<span class="comment"><!-- start slider item --></span>
|
||
<div class="swiper-slide overflow-hidden">
|
||
<div class="cover-background position-absolute top-0 start-0 w-100 h-100" style="background-image:url('image path');" data-swiper-parallax="1000" >
|
||
<div class="opacity-light bg-gradient-black-green"></div>
|
||
<div class="container h-100" data-swiper-parallax="-300">
|
||
<div class="row align-items-center justify-content-center h-100 text-center">
|
||
<div class="col-xl-7 col-lg-9 col-md-10 position-relative text-white">
|
||
<span data-anime='{ "el": "childs", "translateY": [0, 0], "opacity": [0,0.7], "duration": 1500, "delay": 200, "staggervalue": 300, "easing": "easeOutQuad" }'><span class="fw-300 fs-22 opacity-7 mb-15px d-inline-block">Ideas and brainstorming</span></span>
|
||
<span class="opacity-7 fs-80 xs-fs-60 alt-font fw-700 text-shadow-extra-large ls-minus-2px mb-45px sm-mb-30px xs-mb-20px d-inline-block swiper-parallax-fancy-text" data-fancy-text='{ "effect": "rotate", "string": ["Business growth and solution"] }'></span>
|
||
<span data-anime='{ "el": "childs", "translateY": [80, 0], "opacity": [0,1], "duration": 600, "delay": 500, "staggervalue": 300, "easing": "easeOutQuad" }'>
|
||
<a href="#" target="_blank" class="btn btn-large btn-gradient-emerald-blue-emerald-green btn-hover-animation-switch btn-round-edge btn-box-shadow me-20px xs-m-10px">
|
||
<span>
|
||
<span class="btn-text">Discover crafto</span>
|
||
<span class="btn-icon"><i class="feather icon-feather-arrow-right"></i></span>
|
||
<span class="btn-icon"><i class="feather icon-feather-arrow-right"></i></span>
|
||
</span>
|
||
</a>
|
||
<a href="#" target="_blank" class="btn btn-large btn-transparent-white-light border-1 btn-hover-animation btn-box-shadow btn-round-edge xs-m-10px">
|
||
<span>
|
||
<span class="btn-text">Get started now</span>
|
||
<span class="btn-icon"><i class="feather icon-feather-arrow-right"></i></span>
|
||
</span>
|
||
</a>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<span class="comment"><!-- end slider item --></span>
|
||
<span class="comment"><!-- start slider item --></span>
|
||
<div class="swiper-slide overflow-hidden">
|
||
<div class="cover-background position-absolute top-0 start-0 w-100 h-100" style="background-image:url('image path');" data-swiper-parallax="1000">
|
||
<div class="opacity-light bg-gradient-black-green"></div>
|
||
<div class="container h-100" data-swiper-parallax="-300">
|
||
<div class="row align-items-center justify-content-center h-100 text-center">
|
||
<div class="col-xl-7 col-lg-9 col-md-10 position-relative text-white">
|
||
<span data-anime='{ "el": "childs", "translateY": [0, 0], "opacity": [0,0.7], "duration": 1500, "delay": 200, "staggervalue": 300, "easing": "easeOutQuad" }'><span class="fw-300 fs-22 opacity-7 mb-15px d-inline-block">Ideas and brainstorming</span></span>
|
||
<span class="opacity-7 fs-80 xs-fs-60 alt-font fw-700 text-shadow-extra-large ls-minus-2px mb-45px sm-mb-30px xs-mb-20px d-inline-block swiper-parallax-fancy-text" data-fancy-text='{ "effect": "rotate", "string": ["We safeguard your business"] }'></span>
|
||
<span data-anime='{ "el": "childs", "translateY": [80, 0], "opacity": [0,1], "duration": 600, "delay": 500, "staggervalue": 300, "easing": "easeOutQuad" }'>
|
||
<a href="#" target="_blank" class="btn btn-large btn-gradient-emerald-blue-emerald-green btn-hover-animation-switch btn-round-edge btn-box-shadow me-20px xs-m-10px">
|
||
<span>
|
||
<span class="btn-text">Discover crafto</span>
|
||
<span class="btn-icon"><i class="feather icon-feather-arrow-right"></i></span>
|
||
<span class="btn-icon"><i class="feather icon-feather-arrow-right"></i></span>
|
||
</span>
|
||
</a>
|
||
<a href="#" target="_blank" class="btn btn-large btn-transparent-white-light border-1 btn-hover-animation btn-box-shadow btn-round-edge xs-m-10px">
|
||
<span>
|
||
<span class="btn-text">Get started now</span>
|
||
<span class="btn-icon"><i class="feather icon-feather-arrow-right"></i></span>
|
||
</span>
|
||
</a>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<span class="comment"><!-- end slider item --></span>
|
||
</div>
|
||
<span class="comment"><!-- start slider pagination --></span>
|
||
<div class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets"></div>
|
||
<span class="comment"><!-- end slider pagination --></span>
|
||
<span class="comment"><!-- start slider navigation --></span>
|
||
<span class="comment"><!--<div class="slider-one-slide-prev-1 icon-extra-large text-white swiper-button-prev slider-navigation-style-06 d-none d-sm-inline-block"><i class="line-icon-Arrow-OutLeft"></i></div>
|
||
<div class="slider-one-slide-next-1 icon-extra-large text-white swiper-button-next slider-navigation-style-06 d-none d-sm-inline-block"><i class="line-icon-Arrow-OutRight"></i></div></span>
|
||
<span class="comment"><!-- end slider navigation --></span>
|
||
</div>
|
||
</section>
|
||
<span class="comment"><!-- end section --></span>
|
||
</pre>
|
||
</div>
|
||
<p>Following are some parameters that you can use in <code>data-slider-option</code> attribute.</p>
|
||
<div class="panel panel-default params-table">
|
||
|
||
<table class="table">
|
||
<tr>
|
||
<th>Parameter</th>
|
||
<th>Description</th>
|
||
</tr>
|
||
<tr>
|
||
<th><code>a11y</code></th>
|
||
<td>Object with a11y parameters or boolean <strong>true</strong> to enable with default settings.
|
||
<pre>
|
||
const swiper = new Swiper('.swiper', {
|
||
a11y: {
|
||
prevSlideMessage: 'Previous slide',
|
||
nextSlideMessage: 'Next slide',
|
||
},
|
||
});
|
||
</pre>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<th><code>allowSlideNext</code></th>
|
||
<td>Set to <strong>false</strong> to disable swiping to next slide direction (to right or bottom)</td>
|
||
</tr>
|
||
<tr>
|
||
<th><code>allowSlidePrev</code></th>
|
||
<td>Set to <strong>false</strong> to disable swiping to previous slide direction (to left or top)</td>
|
||
</tr>
|
||
<tr>
|
||
<th><code>allowTouchMove</code></th>
|
||
<td>If <strong>false</strong>, then the only way to switch the slide is use of external API functions like slidePrev or slideNext</td>
|
||
</tr>
|
||
<tr>
|
||
<th><code>autoHeight</code></th>
|
||
<td>Set to <strong>true</strong> and slider wrapper will adapt its height to the height of the currently active slide</td>
|
||
</tr>
|
||
<tr>
|
||
<th><code>autoplay</code></th>
|
||
<td>Object with autoplay parameters or boolean <strong>true</strong> to enable with default settings
|
||
<pre>
|
||
const swiper = new Swiper('.swiper', {
|
||
autoplay: {
|
||
delay: 5000,
|
||
},
|
||
});
|
||
</pre>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<th><code>breakpoints</code></th>
|
||
<td>Allows to set different parameter for different responsive breakpoints (screen sizes). Not all parameters can be changed in breakpoints, only those which do not require different layout and logic, like <strong>slidesPerView</strong>, <strong>slidesPerGroup</strong>, <strong>spaceBetween</strong>, <strong>grid.rows.</strong> Such parameters like <strong>loop</strong> and <strong>effect</strong> won't work
|
||
<pre>
|
||
const swiper = new Swiper('.swiper', {
|
||
// Default parameters
|
||
slidesPerView: 1,
|
||
spaceBetween: 10,
|
||
// Responsive breakpoints
|
||
breakpoints: {
|
||
// when window width is >= 320px
|
||
320: {
|
||
slidesPerView: 2,
|
||
spaceBetween: 20
|
||
},
|
||
// when window width is >= 480px
|
||
480: {
|
||
slidesPerView: 3,
|
||
spaceBetween: 30
|
||
},
|
||
// when window width is >= 640px
|
||
640: {
|
||
slidesPerView: 4,
|
||
spaceBetween: 40
|
||
}
|
||
}
|
||
})
|
||
</pre>
|
||
<pre>
|
||
const swiper = new Swiper('.swiper', {
|
||
slidesPerView: 1,
|
||
spaceBetween: 10,
|
||
// using "ratio" endpoints
|
||
breakpoints: {
|
||
'@0.75': {
|
||
slidesPerView: 2,
|
||
spaceBetween: 20,
|
||
},
|
||
'@1.00': {
|
||
slidesPerView: 3,
|
||
spaceBetween: 40,
|
||
},
|
||
'@1.50': {
|
||
slidesPerView: 4,
|
||
spaceBetween: 50,
|
||
},
|
||
}
|
||
});
|
||
</pre>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<th><code>breakpointsBase</code></th>
|
||
<td>Base for breakpoints (beta). Can be <strong>window</strong> or <strong>container</strong>. If set to <strong>window</strong> (by default) then breakpoint keys mean window width. If set to <strong>container</strong> then breakpoint keys treated as swiper container width</td>
|
||
</tr>
|
||
<tr>
|
||
<th><code>cardsEffect</code></th>
|
||
<td>Object with Cards-effect parameters
|
||
<pre>
|
||
const swiper = new Swiper('.swiper', {
|
||
effect: 'cards',
|
||
cardsEffect: {
|
||
// ...
|
||
},
|
||
});
|
||
</pre>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<th><code>centerInsufficientSlides</code></th>
|
||
<td>When enabled it center slides if the amount of slides less than <strong>slidesPerView</strong>. Not intended to be used <strong>loop</strong> mode and <strong>grid.rows</strong></td>
|
||
</tr>
|
||
<tr>
|
||
<th><code>centeredSlides</code></th>
|
||
<td>If <strong>true</strong>, then active slide will be centered, not always on the left side.</td>
|
||
</tr>
|
||
<tr>
|
||
<th><code>centeredSlides</code></th>
|
||
<td>If <strong>true</strong>, then active slide will be centered, not always on the left side.</td>
|
||
</tr>
|
||
<tr>
|
||
<th><code>centeredSlidesBounds</code></th>
|
||
<td>If <strong>true</strong>, then active slide will be centered without adding gaps at the beginning and end of slider. Required <strong>centeredSlides: true</strong>. Not intended to be used with <strong>loop</strong> or <strong>pagination</strong></td>
|
||
</tr>
|
||
<tr>
|
||
<th><code>containerModifierClass</code></th>
|
||
<td>The beginning of the modifier CSS class that can be added to swiper container depending on different parameters</td>
|
||
</tr>
|
||
<tr>
|
||
<th><code>controller</code></th>
|
||
<td>Object with controller parameters or boolean true to enable with default settings
|
||
<pre>
|
||
const swiper = new Swiper('.swiper', {
|
||
controller: {
|
||
inverse: true,
|
||
},
|
||
});
|
||
</pre>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<th><code>coverflowEffect</code></th>
|
||
<td>Object with Coverflow-effect parameters.
|
||
<pre>
|
||
const swiper = new Swiper('.swiper', {
|
||
effect: 'coverflow',
|
||
coverflowEffect: {
|
||
rotate: 30,
|
||
slideShadows: false,
|
||
},
|
||
});
|
||
</pre>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<th><code>createElements</code></th>
|
||
<td>When enabled Swiper will automatically wrap slides with swiper-wrapper element, and will create required elements for navigation, pagination and scrollbar they are enabled (with their respective params object or with boolean <strong>true</strong>))</td>
|
||
</tr>
|
||
<tr>
|
||
<th><code>creativeEffect</code></th>
|
||
<td>Object with Creative-effect parameters
|
||
<pre>
|
||
const swiper = new Swiper('.swiper', {
|
||
effect: 'creative',
|
||
creativeEffect: {
|
||
prev: {
|
||
// will set `translateZ(-400px)` on previous slides
|
||
translate: [0, 0, -400],
|
||
},
|
||
next: {
|
||
// will set `translateX(100%)` on next slides
|
||
translate: ['100%', 0, 0],
|
||
},
|
||
},
|
||
});
|
||
</pre>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<th><code>cssMode</code></th>
|
||
<td>When enabled it will use modern CSS Scroll Snap API. It doesn't support all of Swiper's features, but potentially should bring a much better performance in simple configurations.
|
||
<p>This is what is not supported when it is enabled:</p>
|
||
<ul>
|
||
<li>Cube effect</li>
|
||
<li><strong>speed</strong> parameter may not have no effect</li>
|
||
<li>All transition start/end related events (use <strong>slideChange</strong> instead)</li>
|
||
<li><strong>slidesPerGroup</strong> has limited support</li>
|
||
<li><strong>simulateTouch</strong> doesn't have effect and "dragging" with mouse doesn't work</li>
|
||
<li><strong>resistance</strong> doesn't have any effect</li>
|
||
<li><strong>allowSlidePrev/Next</strong></li>
|
||
<li><strong>swipeHandler</strong></li>
|
||
</ul>
|
||
<p>In case if you use it with other effects, especially 3D effects, it is required to wrap slide's content with <strong><div className="swiper-slide-transform"></strong> element. And if you use any custom styles on slides (like background colors, border radius, border, etc.), they should be set on <strong>swiper-slide-transform</strong> element instead.</p>
|
||
<pre>
|
||
<div class="swiper">
|
||
<div class="swiper-wrapper">
|
||
<div class="swiper-slide">
|
||
<span class="comment"><!-- wrap slide content with transform element --></span>
|
||
<div class="swiper-slide-transform">
|
||
... slide content ...
|
||
</div>
|
||
</div>
|
||
...
|
||
</div>
|
||
</div>
|
||
<script>
|
||
const swiper = new Swiper('.swiper', {
|
||
effect: 'flip',
|
||
cssMode: true,
|
||
});
|
||
</script>
|
||
</pre>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<th><code>cubeEffect</code></th>
|
||
<td>Object with Cube-effect parameters
|
||
<pre>
|
||
const swiper = new Swiper('.swiper', {
|
||
effect: 'cube',
|
||
cubeEffect: {
|
||
slideShadows: false,
|
||
},
|
||
});
|
||
</pre>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<th><code>direction</code></th>
|
||
<td>Can be <strong>'horizontal'</strong> or <strong>'vertical'</strong> (for vertical slider).</td>
|
||
</tr>
|
||
<tr>
|
||
<th><code>edgeSwipeDetection</code></th>
|
||
<td>Enable to release Swiper events for swipe-back work in app. If set to <strong>'prevent'</strong> then it will prevent system swipe-back navigation instead. This feature works only with "touch" events (and not pointer events), so it will work on iOS/Android devices and won't work on Windows devices with pointer (touch) events.</td>
|
||
</tr>
|
||
<tr>
|
||
<th><code>edgeSwipeThreshold</code></th>
|
||
<td>Area (in px) from left edge of the screen to release touch events for swipe-back in app</td>
|
||
</tr>
|
||
<tr>
|
||
<th><code>effect</code></th>
|
||
<td>Transition effect. Can be <strong>'slide'</strong>, <strong>'fade'</strong>, <strong>'cube'</strong>, <strong>'coverflow'</strong>, <strong>'flip'</strong> or <strong>'creative'</strong></td>
|
||
</tr>
|
||
<tr>
|
||
<th><code>enabled</code></th>
|
||
<td>Whether Swiper initially enabled. When Swiper is disabled, it will hide all navigation elements and won't respond to any events and interactions</td>
|
||
</tr>
|
||
<tr>
|
||
<th><code>eventsPrefix</code></th>
|
||
<td>Event name prefix for all DOM events emitted by Swiper Element (web component)</td>
|
||
</tr>
|
||
<tr>
|
||
<th><code>fadeEffect</code></th>
|
||
<td>Object with Fade-effect parameters
|
||
<pre>
|
||
const swiper = new Swiper('.swiper', {
|
||
effect: 'fade',
|
||
fadeEffect: {
|
||
crossFade: true
|
||
},
|
||
});
|
||
</pre>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<th><code>flipEffect</code></th>
|
||
<td>Object with Flip-effect parameters
|
||
<pre>
|
||
const swiper = new Swiper('.swiper', {
|
||
effect: 'flip',
|
||
flipEffect: {
|
||
slideShadows: false,
|
||
},
|
||
});
|
||
</pre>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<th><code>focusableElements</code></th>
|
||
<td>CSS selector for focusable elements. Swiping will be disabled on such elements if they are "focused"</td>
|
||
</tr>
|
||
<tr>
|
||
<th><code>followFinger</code></th>
|
||
<td>If disabled, then slider will be animated only when you release it, it will not move while you hold your finger on it</td>
|
||
</tr>
|
||
<tr>
|
||
<th><code>freeMode</code></th>
|
||
<td>Enables free mode functionality. Object with free mode parameters or boolean <strong>true</strong> to enable with default settings.
|
||
<pre>
|
||
const swiper = new Swiper('.swiper', {
|
||
freeMode: true,
|
||
});
|
||
|
||
const swiper = new Swiper('.swiper', {
|
||
freeMode: {
|
||
enabled: true,
|
||
sticky: true,
|
||
},
|
||
});
|
||
</pre>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<th><code>grabCursor</code></th>
|
||
<td>This option may a little improve desktop usability. If <strong>true</strong>, user will see the "grab" cursor when hover on Swiper</td>
|
||
</tr>
|
||
<tr>
|
||
<th><code>grid</code></th>
|
||
<td>Object with grid parameters to enable "multirow" slider.
|
||
<pre>
|
||
const swiper = new Swiper('.swiper', {
|
||
grid: {
|
||
rows: 2,
|
||
},
|
||
});
|
||
</pre>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<th><code>hashNavigation</code></th>
|
||
<td>Enables hash url navigation to for slides. Object with hash navigation parameters or boolean <strong>true</strong> to enable with default settings
|
||
<pre>
|
||
const swiper = new Swiper('.swiper', {
|
||
hashNavigation: {
|
||
replaceState: true,
|
||
},
|
||
});
|
||
</pre>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<th><code>height</code></th>
|
||
<td>Swiper height (in px). Parameter allows to force Swiper height. Useful only if you initialize Swiper when it is hidden and in SSR and Test environments for correct Swiper initialization
|
||
<br>
|
||
<div class="notice">Setting this parameter will make Swiper not responsive</div>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<th><code>history</code></th>
|
||
<td>Enables history push state where every slide will have its own url. In this parameter you have to specify main slides url like <strong>"slides"</strong> and specify every slide url using <strong>data-history</strong> attribute.
|
||
<br>
|
||
Object with history navigation parameters or boolean <strong>true</strong> to enable with default settings
|
||
<pre>
|
||
const swiper = new Swiper('.swiper', {
|
||
history: {
|
||
replaceState: true,
|
||
},
|
||
});
|
||
</pre>
|
||
<pre>
|
||
<span class="comment"><!-- will produce "slides/slide1" url in browser history --></span>
|
||
<div class="swiper-slide" data-history="slide1"></div>
|
||
</pre>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<th><code>init</code></th>
|
||
<td>Whether Swiper should be initialised automatically when you create an instance. If disabled, then you need to init it manually by calling <strong>swiper.init()</strong>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<th><code>initialSlide</code></th>
|
||
<td>Index number of initial slide.</td>
|
||
</tr>
|
||
<tr>
|
||
<th><code>injectStyles</code></th>
|
||
<td>Inject text styles to the shadow DOM. Only for usage with Swiper Element</td>
|
||
</tr>
|
||
<tr>
|
||
<th><code>injectStylesUrls</code></th>
|
||
<td>Inject styles <strong><link></strong> s to the shadow DOM. Only for usage with Swiper Element</td>
|
||
</tr>
|
||
<tr>
|
||
<th><code>keyboard</code></th>
|
||
<td>Enables navigation through slides using keyboard. Object with keyboard parameters or boolean true to enable with default settings
|
||
<pre>
|
||
const swiper = new Swiper('.swiper', {
|
||
keyboard: {
|
||
enabled: true,
|
||
onlyInViewport: false,
|
||
},
|
||
});
|
||
</pre>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<th><code>lazyPreloadPrevNext</code></th>
|
||
<td>Number of next and previous slides to preload. Only applicable if using lazy loading.</td>
|
||
</tr>
|
||
<tr>
|
||
<th><code>lazyPreloaderClass</code></th>
|
||
<td>CSS class name of lazy preloader</td>
|
||
</tr>
|
||
<tr>
|
||
<th><code>longSwipes</code></th>
|
||
<td>Set to <strong>false</strong> if you want to disable long swipes</td>
|
||
</tr>
|
||
<tr>
|
||
<th><code>longSwipesMs</code></th>
|
||
<td>Minimal duration (in ms) to trigger swipe to next/previous slide during long swipes</td>
|
||
</tr>
|
||
<tr>
|
||
<th><code>longSwipesRatio</code></th>
|
||
<td>Ratio to trigger swipe to next/previous slide during long swipes</td>
|
||
</tr>
|
||
<tr>
|
||
<th><code>loop</code></th>
|
||
<td>Set to <strong>true</strong> to enable continuous loop mode
|
||
<br>
|
||
Because of nature of how the loop mode works (it will rearrange slides), total number of slides must be:
|
||
<ul>
|
||
<li>more than or equal to <strong>slidesPerView</strong> + <strong>slidesPerGroup</strong></li>
|
||
<li>even to <strong>slidesPerGroup</strong> (or use <strong>loopAddBlankSlides</strong> parameter)</li>
|
||
<li>even to <strong>grid.rows</strong> (or use <strong>loopAddBlankSlides</strong> parameter)</li>
|
||
</ul>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<th><code>loopAddBlankSlides</code></th>
|
||
<td>Automatically adds blank slides if you use Grid or <strong>slidesPerGroup</strong> and the total amount of slides is not even to <strong>slidesPerGroup</strong> or to <strong>grid.rows</strong>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<th><code>loopAdditionalSlides</code></th>
|
||
<td>Allows to increase amount of looped slides</td>
|
||
</tr>
|
||
<tr>
|
||
<th><code>loopPreventsSliding</code></th>
|
||
<td>If enabled then slideNext/Prev will do nothing while slider is animating in loop mode</td>
|
||
</tr>
|
||
<tr>
|
||
<th><code>maxBackfaceHiddenSlides</code></th>
|
||
<td>If total number of slides less than specified here value, then Swiper will enable <strong>backface-visibility: hidden</strong> on slide elements to reduce visual "flicker" in Safari.
|
||
<br>
|
||
<div class="notice">It is not recommended to enable it on large amount of slides as it will reduce performance</div>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<th><code>modules</code></th>
|
||
<td>Array with Swiper modules
|
||
<pre>
|
||
import Swiper from 'swiper';
|
||
import { Navigation, Pagination } from 'swiper/modules';
|
||
|
||
const swiper = new Swiper('.swiper', {
|
||
modules: [ Navigation, Pagination ],
|
||
});
|
||
</pre>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<th><code>mousewheel</code></th>
|
||
<td>Enables navigation through slides using mouse wheel. Object with mousewheel parameters or boolean <strong>true</strong> to enable with default settings
|
||
<pre>
|
||
const swiper = new Swiper('.swiper', {
|
||
mousewheel: {
|
||
invert: true,
|
||
},
|
||
});
|
||
</pre>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<th><code>navigation</code></th>
|
||
<td>Object with navigation parameters or boolean <strong>true</strong> to enable with default settings.
|
||
<pre>
|
||
const swiper = new Swiper('.swiper', {
|
||
navigation: {
|
||
nextEl: '.swiper-button-next',
|
||
prevEl: '.swiper-button-prev',
|
||
},
|
||
});
|
||
</pre>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<th><code>nested</code></th>
|
||
<td>Set to <strong>true</strong> on Swiper for correct touch events interception. Use only on swipers that use same direction as the parent one</td>
|
||
</tr>
|
||
<tr>
|
||
<th><code>noSwiping</code></th>
|
||
<td>Enable/disable swiping on elements matched to class specified in <strong>noSwipingClass</strong></td>
|
||
</tr>
|
||
<tr>
|
||
<th><code>noSwipingClass</code></th>
|
||
<td>Specify <strong>noSwiping</strong>'s element css class</strong></td>
|
||
</tr>
|
||
<tr>
|
||
<th><code>noSwipingSelector</code></th>
|
||
<td>Can be used instead of <strong>noSwipingClass</strong> to specify elements to disable swiping on. For example <strong>'input'</strong> will disable swiping on all inputs</td>
|
||
</tr>
|
||
<tr>
|
||
<th><code>normalizeSlideIndex</code></th>
|
||
<td>Normalize slide index.</td>
|
||
</tr>
|
||
<tr>
|
||
<th><code>observeParents</code></th>
|
||
<td>Set to <strong>true</strong> if you also need to watch Mutations for Swiper parent elements</td>
|
||
</tr>
|
||
<tr>
|
||
<th><code>observeSlideChildren</code></th>
|
||
<td>Set to <strong>true</strong> if you also need to watch Mutations for Swiper slide children elements</td>
|
||
</tr>
|
||
<tr>
|
||
<th><code>observer</code></th>
|
||
<td>Set to <strong>true</strong> to enable Mutation Observer on Swiper and its elements. In this case Swiper will be updated (reinitialized) each time if you change its style (like hide/show) or modify its child elements (like adding/removing slides)</td>
|
||
</tr>
|
||
<tr>
|
||
<th><code>on</code></th>
|
||
<td>Register event handlers</td>
|
||
</tr>
|
||
<tr>
|
||
<th><code>onAny</code></th>
|
||
<td>Add event listener that will be fired on all events
|
||
<pre>
|
||
const swiper = new Swiper('.swiper', {
|
||
onAny(eventName, ...args) {
|
||
console.log('Event: ', eventName);
|
||
console.log('Event data: ', args);
|
||
}
|
||
});
|
||
</pre>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<th><code>oneWayMovement</code></th>
|
||
<td>When enabled, will swipe slides only forward (one-way) regardless of swipe direction</td>
|
||
</tr>
|
||
<tr>
|
||
<th><code>pagination</code></th>
|
||
<td>Object with pagination parameters or boolean <strong>true</strong> to enable with default settings.
|
||
<pre>
|
||
const swiper = new Swiper('.swiper', {
|
||
pagination: {
|
||
el: '.swiper-pagination',
|
||
type: 'bullets',
|
||
},
|
||
});
|
||
</pre>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<th><code>parallax</code></th>
|
||
<td>Object with parallax parameters or boolean true to enable with default settings.
|
||
<pre>
|
||
const swiper = new Swiper('.swiper', {
|
||
parallax: true,
|
||
});
|
||
</pre>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<th><code>passiveListeners</code></th>
|
||
<td>Passive event listeners will be used by default where possible to improve scrolling performance on mobile devices. But if you need to use <strong>e.preventDefault</strong> and you have conflict with it, then you should disable this parameter</td>
|
||
</tr>
|
||
<tr>
|
||
<th><code>preventClicks</code></th>
|
||
<td>Set to <strong>true</strong> to prevent accidental unwanted clicks on links during swiping</td>
|
||
</tr>
|
||
<tr>
|
||
<th><code>preventClicksPropagation</code></th>
|
||
<td>Set to <strong>true</strong> to stop clicks event propagation on links during swiping</td>
|
||
</tr>
|
||
<tr>
|
||
<th><code>preventInteractionOnTransition</code></th>
|
||
<td>When enabled it won't allow to change slides by swiping or navigation/pagination buttons during transition</td>
|
||
</tr>
|
||
<tr>
|
||
<th><code>resistance</code></th>
|
||
<td>Set to <strong>false</strong> if you want to disable resistant bounds</td>
|
||
</tr>
|
||
<tr>
|
||
<th><code>resistanceRatio</code></th>
|
||
<td>This option allows you to control resistance ratio</td>
|
||
</tr>
|
||
<tr>
|
||
<th><code>resizeObserver</code></th>
|
||
<td>When enabled it will use ResizeObserver (if supported by browser) on swiper container to detect container resize (instead of watching for window resize)</td>
|
||
</tr>
|
||
<tr>
|
||
<th><code>rewind</code></th>
|
||
<td>
|
||
Set to <strong>true</strong> to enable "rewind" mode. When enabled, clicking "next" navigation button (or calling <strong>.slideNext()</strong>) when on last slide will slide back to the first slide. Clicking "prev" navigation button (or calling <strong>.slidePrev()</strong>) when on first slide will slide forward to the last slide.
|
||
<div class="notice">Should not be used together with <strong>loop</strong> mode</div>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<th><code>roundLengths</code></th>
|
||
<td>Set to <strong>true</strong> to round values of slides width and height to prevent blurry texts on usual resolution screens (if you have such)</td>
|
||
</tr>
|
||
<tr>
|
||
<th><code>runCallbacksOnInit</code></th>
|
||
<td>Fire Transition/SlideChange/Start/End events on swiper initialization. Such events will be fired on initialization in case of your initialSlide is not 0, or you use loop mode</td>
|
||
</tr>
|
||
<tr>
|
||
<th><code>scrollbar</code></th>
|
||
<td>Object with scrollbar parameters or boolean true to enable with default settings.
|
||
<pre>
|
||
const swiper = new Swiper('.swiper', {
|
||
scrollbar: {
|
||
el: '.swiper-scrollbar',
|
||
draggable: true,
|
||
},
|
||
});
|
||
</pre>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<th><code>setWrapperSize</code></th>
|
||
<td>Enabled this option and plugin will set width/height on swiper wrapper equal to total size of all slides. Mostly should be used as compatibility fallback option for browser that don't support flexbox layout well</td>
|
||
</tr>
|
||
<tr>
|
||
<th><code>shortSwipes</code></th>
|
||
<td>Set to <strong>false</strong> if you want to disable short swipes</td>
|
||
</tr>
|
||
<tr>
|
||
<th><code>simulateTouch</code></th>
|
||
<td>If <strong>true</strong>, Swiper will accept mouse events like touch events (click and drag to change slides)</td>
|
||
</tr>
|
||
<tr>
|
||
<th><code>slideActiveClass</code></th>
|
||
<td>CSS class name of currently active slide
|
||
<br>
|
||
<div class="notice">By changing classes you will also need to change Swiper's CSS to reflect changed classes</div>
|
||
<div class="notice">Not supported in Swiper React/Vue components</div>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<th><code>slideBlankClass</code></th>
|
||
<td>CSS class name of the blank slide added by the loop mode (when <strong>loopAddBlankSlides</strong> is enabled)
|
||
<div class="notice">Not supported in Swiper React/Vue</div>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<th><code>slideClass</code></th>
|
||
<td>CSS class name of slide
|
||
<div class="notice">By changing classes you will also need to change Swiper's CSS to reflect changed classes</div>
|
||
<div class="notice">Not supported in Swiper React/Vue components</div>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<th><code>slideFullyVisibleClass</code></th>
|
||
<td>CSS class name of fully (when whole slide is in the viewport) visible slide
|
||
<div class="notice">Not supported in Swiper React/Vue</div>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<th><code>slideNextClass</code></th>
|
||
<td>CSS class name of slide which is right after currently active slide
|
||
<div class="notice">By changing classes you will also need to change Swiper's CSS to reflect changed classes</div>
|
||
<div class="notice">Not supported in Swiper React/Vue</div>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<th><code>slidePrevClass</code></th>
|
||
<td>CSS class name of slide which is right before currently active slide
|
||
<div class="notice">By changing classes you will also need to change Swiper's CSS to reflect changed classes</div>
|
||
<div class="notice">Not supported in Swiper React/Vue</div>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<th><code>slideToClickedSlide</code></th>
|
||
<td>Set to <strong>true</strong> and click on any slide will produce transition to this slide</td>
|
||
</tr>
|
||
<tr>
|
||
<th><code>slideVisibleClass</code></th>
|
||
<td>CSS class name of currently/partially visible slide
|
||
<div class="notice">By changing classes you will also need to change Swiper's CSS to reflect changed classes</div>
|
||
<div class="notice">Not supported in Swiper React/Vue</div>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<th><code>slidesOffsetAfter</code></th>
|
||
<td>Add (in px) additional slide offset in the end of the container (after all slides)</td>
|
||
</tr>
|
||
<tr>
|
||
<th><code>slidesOffsetBefore</code></th>
|
||
<td>Add (in px) additional slide offset in the beginning of the container (before all slides)</td>
|
||
</tr>
|
||
<tr>
|
||
<th><code>slidesPerGroup</code></th>
|
||
<td>Set numbers of slides to define and enable group sliding. Useful to use with slidesPerView > 1</td>
|
||
</tr>
|
||
<tr>
|
||
<th><code>slidesPerGroupAuto</code></th>
|
||
<td>This param intended to be used only with <strong>slidesPerView: 'auto'</strong> and <strong>slidesPerGroup: 1</strong>. When enabled, it will skip all slides in view on <strong>.slideNext()</strong> & <strong>.slidePrev()</strong> methods calls, on Navigation "buttons" clicks and in autoplay.</td>
|
||
</tr>
|
||
<tr>
|
||
<th><code>slidesPerGroupSkip</code></th>
|
||
<td>The parameter works in the following way: If <strong>slidesPerGroupSkip</strong> equals <strong>0</strong> (default), no slides are excluded from grouping, and the resulting behaviour is the same as without this change.
|
||
<br>
|
||
If <strong>slidesPerGroupSkip</strong> is equal or greater than <strong>1</strong> the first X slides are treated as single groups, whereas all following slides are grouped by the <strong>slidesPerGroup</strong> value.
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<th><code>slidesPerView</code></th>
|
||
<td>Number of slides per view (slides visible at the same time on slider's container).
|
||
<div class="notice"><strong>slidesPerView: 'auto'</strong> is currently not compatible with multirow mode, when <strong>grid.rows</strong> > 1</div>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<th><code>spaceBetween</code></th>
|
||
<td>Distance between slides in px.
|
||
<div class="notice">If you use "margin" css property to the elements which go into Swiper in which you pass "spaceBetween" into, navigation might not work properly.</div>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<th><code>speed</code></th>
|
||
<td>Duration of transition between slides (in ms)</td>
|
||
</tr>
|
||
<tr>
|
||
<th><code>swipeHandler</code></th>
|
||
<td>String with CSS selector or HTML element of the container with pagination that will work as only available handler for swiping</td>
|
||
</tr>
|
||
<tr>
|
||
<th><code>threshold</code></th>
|
||
<td>Threshold value in px. If "touch distance" will be lower than this value then swiper will not move</td>
|
||
</tr>
|
||
<tr>
|
||
<th><code>thumbs</code></th>
|
||
<td>Object with thumbs component parameters
|
||
<pre>
|
||
const swiper = new Swiper('.swiper', {
|
||
...
|
||
thumbs: {
|
||
swiper: thumbsSwiper
|
||
}
|
||
});
|
||
</pre>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<th><code>touchAngle</code></th>
|
||
<td>Allowable angle (in degrees) to trigger touch move</td>
|
||
</tr>
|
||
<tr>
|
||
<th><code>touchEventsTarget</code></th>
|
||
<td>Target element to listen touch events on. Can be <strong>'container'</strong> (to listen for touch events on swiper) or <strong>'wrapper'</strong>(to listen for touch events on swiper-wrapper)</td>
|
||
</tr>
|
||
<tr>
|
||
<th><code>touchMoveStopPropagation</code></th>
|
||
<td>If enabled, then propagation of "touchmove" will be stopped</td>
|
||
</tr>
|
||
<tr>
|
||
<th><code>touchRatio</code></th>
|
||
<td>Touch ratio</td>
|
||
</tr>
|
||
<tr>
|
||
<th><code>touchReleaseOnEdges</code></th>
|
||
<td>Enable to release touch events on slider edge position (beginning, end) to allow for further page scrolling. This feature works only with "touch" events (and not pointer events), so it will work on iOS/Android devices and won't work on Windows devices with pointer events. Also <strong>threshold</strong> parameter must be set to <strong>0</strong></td>
|
||
</tr>
|
||
<tr>
|
||
<th><code>touchStartForcePreventDefault</code></th>
|
||
<td>Force to always prevent default for <strong>touchstart</strong> (<strong>pointerdown</strong>) event</td>
|
||
</tr>
|
||
<tr>
|
||
<th><code>touchStartPreventDefault</code></th>
|
||
<td>If disabled, <strong>pointerdown</strong> event won't be prevented</td>
|
||
</tr>
|
||
<tr>
|
||
<th><code>uniqueNavElements</code></th>
|
||
<td>If enabled (by default) and navigation elements' parameters passed as a string (like <strong>".pagination"</strong>) then Swiper will look for such elements through child elements first. Applies for pagination, prev/next buttons and scrollbar elements</td>
|
||
</tr>
|
||
<tr>
|
||
<th><code>updateOnWindowResize</code></th>
|
||
<td>Swiper will recalculate slides position on window resize (orientationchange)</td>
|
||
</tr>
|
||
<tr>
|
||
<th><code>url</code></th>
|
||
<td>Required for active slide detection when rendered on server-side and enabled history</td>
|
||
</tr>
|
||
<tr>
|
||
<th><code>userAgent</code></th>
|
||
<td>userAgent string. Required for browser/device detection when rendered on server-side</td>
|
||
</tr>
|
||
<tr>
|
||
<th><code>virtual</code></th>
|
||
<td>Enables virtual slides functionality. Object with virtual slides parameters or boolean true to enable with default settings.
|
||
<pre>
|
||
const swiper = new Swiper('.swiper', {
|
||
virtual: {
|
||
slides: ['Slide 1', 'Slide 2', 'Slide 3', 'Slide 4', 'Slide 5'],
|
||
},
|
||
});
|
||
</pre>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<th><code>virtualTranslate</code></th>
|
||
<td>Enabled this option and swiper will be operated as usual except it will not move, real translate values on wrapper will not be set. Useful when you may need to create custom slide transition</td>
|
||
</tr>
|
||
<tr>
|
||
<th><code>virtualTranslate</code></th>
|
||
<td>Enabled this option and swiper will be operated as usual except it will not move, real translate values on wrapper will not be set. Useful when you may need to create custom slide transition</td>
|
||
</tr>
|
||
<tr>
|
||
<th><code>watchOverflow</code></th>
|
||
<td>When enabled Swiper will be disabled and hide navigation buttons on case there are not enough slides for sliding.</td>
|
||
</tr>
|
||
<tr>
|
||
<th><code>watchSlidesProgress</code></th>
|
||
<td>Enable this feature to calculate each slides progress and visibility (slides in viewport will have additional visible class)</td>
|
||
</tr>
|
||
<tr>
|
||
<th><code>width</code></th>
|
||
<td>Swiper width (in px). Parameter allows to force Swiper width. Useful only if you initialize Swiper when it is hidden and in SSR and Test environments for correct Swiper initialization
|
||
<div class="notice">Setting this parameter will make Swiper not responsive</div>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<th><code>wrapperClass</code></th>
|
||
<td>CSS class name of slides' wrapper
|
||
<div class="notice">By changing classes you will also need to change Swiper's CSS to reflect changed classes</div>
|
||
<div class="notice">Not supported in Swiper React/Vue</div>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<th><code>zoom</code></th>
|
||
<td>Enables zooming functionality. Object with zoom parameters or boolean <strong>true</strong> to enable with default settings
|
||
<pre>
|
||
const swiper = new Swiper('.swiper', {
|
||
zoom: {
|
||
maxRatio: 5,
|
||
},
|
||
});
|
||
</pre>
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
|
||
</div>
|
||
<p><span class="label label-danger">Note</span> You can find swiper slider code in <strong><a href="../demo-startup.html" target="_blank">demo-startup.html</a></strong> page and above is the code for your reference.</p><br/>
|
||
<p class="mb-0">You can find the Swiper slider related documentation here.</p>
|
||
<a class="button" href="https://swiperjs.com/get-started/" target="_blank">Read Swiper Slider Document</a>
|
||
|
||
|
||
<h2 id="slider-revolution-slider">Revolution Slider</h2>
|
||
<br>
|
||
<a href="../demo-corporate.html" target="_blank"><img src="images/revolution-slider.jpg" alt="Crfato" /></a>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<span class="comment"><!-- start slider --></span>
|
||
<section id="slider" class="p-0 top-space-margin ">
|
||
<div class="demo-corporate-slider_wrapper fullscreen-container" data-alias="portfolio-viewer" data-source="gallery" style="background-color:transparent;padding:0px;">
|
||
<div id="demo-corporate-slider" class="rev_slider bg-regal-blue fullscreenbanner" style="display:none;" data-version="5.3.1.6">
|
||
<span class="comment"><!-- begin slides list --></span>
|
||
<ul>
|
||
<span class="comment"><!-- minimum slide structure --></span>
|
||
<li data-index="rs-01" data-transition="parallaxleft" data-slotamount="default"
|
||
data-hideafterloop="0" data-hideslideonmobile="off" data-easein="default"
|
||
data-easeout="default" data-masterspeed="1500" data-rotate="0" data-saveperformance="off"
|
||
data-title="Crossfit" data-param1="" data-param2="" data-param3="" data-param4=""
|
||
data-param5="" data-param6="" data-param7="" data-param8="" data-param9="" data-param10=""
|
||
data-description="">
|
||
<span class="comment"><!-- slide's main background image --></span>
|
||
<img src="image path" alt="Image"
|
||
data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat"
|
||
class="rev-slidebg" data-no-retina>
|
||
<span class="comment"><!-- start overlay layer --></span>
|
||
<div class="tp-caption tp-shape tp-shapewrapper " id="slide-1-layer-01"
|
||
data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']"
|
||
data-y="['middle','middle','middle','middle']" data-voffset="['0','0','0','0']"
|
||
data-width="full" data-height="full" data-whitespace="nowrap" data-type="shape"
|
||
data-basealign="slide" data-responsive_offset="off" data-responsive="off"
|
||
data-frames='[{"delay":0,"speed":1000,"frame":"0","from":"opacity:0;","to":"o:1;","ease":"Power4.easeInOut"},
|
||
{"delay":"wait","speed":1000,"frame":"999","to":"opacity:0;","ease":"Power4.easeInOut"}]' style="background:rgba(22,35,63,0.1); z-index: 0;">
|
||
</div>
|
||
<span class="comment"><!-- end overlay layer --></span>
|
||
<span class="comment"><!-- start shape layer --></span>
|
||
<div class="tp-caption tp-shape tp-shapewrapper tp-resizeme bg-regal-blue border-radius-50"
|
||
id="slide-1-layer-02" data-x="['center','center','center','center']"
|
||
data-hoffset="['0','0','0','0']" data-y="['middle','middle','middle','middle']"
|
||
data-voffset="['0','0','0','0']" data-width="['900','700','700','600']"
|
||
data-height="['900','700','700','600']" data-whitespace="nowrap" data-type="shape"
|
||
data-responsive_offset="on"
|
||
data-frames='[{"delay":1000,"speed":1000,"frame":"0","from":"x:0px;y:50px;rX:0deg;rY:0deg;rZ:0deg;sX:0.5;sY:0.5;opacity:0;","to":"o:0.5;","ease":"Back.easeOut"},{"delay":"wait","speed":300,"frame":"999","to":"opacity:0;","ease":"Power3.easeInOut"}]'
|
||
data-textAlign="['inherit','inherit','inherit','inherit']" data-paddingtop="[0,0,0,0]"
|
||
data-paddingright="[0,0,0,0]" data-paddingbottom="[0,0,0,0]"
|
||
data-paddingleft="[0,0,0,0]" style="z-index: 0;">
|
||
</div>
|
||
<span class="comment"><!-- end shape layer --></span>
|
||
<span class="comment"><!-- start shape layer --></span>
|
||
<div class="tp-caption tp-shape tp-shapewrapper tp-resizeme bg-regal-blue border-radius-50"
|
||
id="slide-1-layer-03" data-x="['center','center','center','center']"
|
||
data-hoffset="['0','0','0','0']" data-y="['middle','middle','middle','middle']"
|
||
data-voffset="['0','0','0','0']" data-width="['1200','1000','900','800']"
|
||
data-height="['1200','1000','900','800']" data-whitespace="nowrap" data-type="shape"
|
||
data-responsive_offset="on"
|
||
data-frames='[{"delay":1300,"speed":1000,"frame":"0","from":"x:0px;y:50px;rX:0deg;rY:0deg;rZ:0deg;sX:0.5;sY:0.5;opacity:0;","to":"o:0.3;","ease":"Back.easeOut"},{"delay":"wait","speed":300,"frame":"999","to":"opacity:0;","ease":"Power3.easeInOut"}]'
|
||
data-textAlign="['inherit','inherit','inherit','inherit']" data-paddingtop="[0,0,0,0]"
|
||
data-paddingright="[0,0,0,0]" data-paddingbottom="[0,0,0,0]"
|
||
data-paddingleft="[0,0,0,0]" style="z-index: 0;">
|
||
</div>
|
||
<span class="comment"><!-- end shape layer --></span>
|
||
<span class="comment"><!-- start row zone layer --></span>
|
||
<div id="rrzm_638" class="rev_row_zone rev_row_zone_middle">
|
||
<span class="comment"><!-- start row layer --></span>
|
||
<div class="tp-caption " id="slide-1-layer-04" data-x="['left','left','left','left']"
|
||
data-hoffset="['0','0','0','0']" data-y="['middle','middle','middle','middle']"
|
||
data-voffset="['-426','-426','-426','-426']" data-width="none" data-height="none"
|
||
data-whitespace="nowrap" data-type="row" data-columnbreak="3"
|
||
data-responsive_offset="on" data-responsive="off"
|
||
data-frames='[{"delay":10,"speed":300,"frame":"0","from":"opacity:0;","to":"o:1;","ease":"Power3.easeInOut"},{"delay":"wait","speed":300,"frame":"999","to":"opacity:0;","ease":"Power3.easeInOut"}]'
|
||
data-textAlign="['inherit','inherit','inherit','inherit']"
|
||
data-paddingtop="[0,0,0,0]" data-paddingright="[100,75,50,30]"
|
||
data-paddingbottom="[0,0,0,0]" data-paddingleft="[100,75,50,30]">
|
||
<span class="comment"><!-- start column layer --></span>
|
||
<div class="tp-caption" id="slide-1-layer-05" data-x="['left','left','left','left']"
|
||
data-hoffset="['100','100','100','100']" data-y="['top','top','top','top']"
|
||
data-voffset="['100','100','100','100']" data-width="none" data-height="none"
|
||
data-whitespace="nowrap" data-type="column" data-responsive_offset="on"
|
||
data-responsive="off"
|
||
data-frames='[{"delay":"+0","speed":300,"frame":"0","from":"opacity:0;","to":"o:1;","ease":"Power3.easeInOut"},{"delay":"wait","speed":300,"frame":"999","to":"opacity:0;","ease":"Power3.easeInOut"}]'
|
||
data-columnwidth="100%" data-verticalalign="top"
|
||
data-textAlign="['center','center','center','center']">
|
||
<span class="comment"><!-- start subtitle layer --></span>
|
||
<div class="tp-caption mx-auto text-uppercase" id="slide-1-layer-06"
|
||
data-x="['center','center','center','center']"
|
||
data-hoffset="['0','0','0','0']"
|
||
data-y="['middle','middle','middle','middle']"
|
||
data-voffset="['0','0','0','0']" data-fontsize="['13','13','13','13']"
|
||
data-lineheight="['20','20','20','20']"
|
||
data-fontweight="['500','500','500','500']"
|
||
data-letterspacing="['1','1','1','1']"
|
||
data-color="['#ffffff','#ffffff','#ffffff','#ffffff']"
|
||
data-width="['800','auto','auto','auto']" data-height="auto"
|
||
data-whitespace="normal" data-basealign="grid" data-type="text"
|
||
data-responsive_offset="off" data-verticalalign="middle"
|
||
data-responsive="off"
|
||
data-frames='[{"delay":2500,"speed":800,"frame":"0","from":"y:-50px;opacity:0;fb:20px;","to":"o:1;fb:0;","ease":"power3.inOut"},{"delay":"wait","speed":300,"frame":"999","to":"opacity:0;","ease":"power3.inOut"}]'
|
||
data-textAlign="['center','center','center','center']"
|
||
data-paddingtop="[0,0,0,0]" data-paddingright="[0,0,0,0]"
|
||
data-paddingbottom="[25,25,10,10]" data-paddingleft="[0,0,0,0]"
|
||
style="word-break: initial;">
|
||
<i class="bi bi-award pe-5px icon-small"></i>On demand live support
|
||
</div>
|
||
<span class="comment"><!-- end subtitle layer --></span>
|
||
<span class="comment"><!-- start title layer --></span>
|
||
<div class="tp-caption mx-auto" id="slide-1-layer-07"
|
||
data-x="['center','center','center','center']"
|
||
data-hoffset="['0','0','0','0']"
|
||
data-y="['middle','middle','middle','middle']"
|
||
data-voffset="['0','0','0','0']" data-fontsize="['75','60','70','50']"
|
||
data-lineheight="['70','65','75','55']"
|
||
data-fontweight="['700','700','700','700']"
|
||
data-letterspacing="['-2','-2','-2','0']"
|
||
data-color="['#ffffff','#ffffff','#ffffff','#ffffff']"
|
||
data-width="['700','600','600','auto']" data-height="auto"
|
||
data-whitespace="normal" data-basealign="grid" data-type="text"
|
||
data-responsive_offset="off" data-verticalalign="middle"
|
||
data-responsive="on"
|
||
data-frames='[{"delay":"1500","split":"chars","splitdelay":0.03,"speed":800,"split_direction":"middletoedge","frame":"0","from":"x:50px;opacity:0;fb:10px;","to":"o:1;fb:0;","ease":"Power4.easeOut"},{"delay":"wait","speed":100,"frame":"999","to":"opacity:0;fb:0;","ease":"Power4.easeOut"}]'
|
||
data-textAlign="['center','center','center','center']"
|
||
data-paddingtop="[0,0,0,0]" data-paddingright="[0,0,0,0]"
|
||
data-paddingbottom="[33,28,35,25]" data-paddingleft="[0,0,0,0]"
|
||
style="word-break: initial; text-shadow: #0b1236 3px 3px 15px;">
|
||
Awesome solutions for your business
|
||
</div>
|
||
<span class="comment"><!-- end title layer --></span>
|
||
<span class="comment"><!-- start text layer --></span>
|
||
<div class="tp-caption mx-auto" id="slide-1-layer-08"
|
||
data-x="['center','center','center','center']"
|
||
data-hoffset="['0','0','0','0']"
|
||
data-y="['middle','middle','middle','middle']"
|
||
data-voffset="['0','0','0','0']" data-fontsize="['20','20','24','20']"
|
||
data-lineheight="['36','36','40','30']"
|
||
data-fontweight="['300','300','300','300']"
|
||
data-letterspacing="['0','0','0','0']"
|
||
data-color="['#ffffff','#ffffff','#ffffff','#ffffff']"
|
||
data-width="['500','500','auto','auto']" data-height="auto"
|
||
data-whitespace="normal" data-basealign="grid" data-type="text"
|
||
data-responsive_offset="off" data-verticalalign="middle"
|
||
data-responsive="on"
|
||
data-frames='[{"delay":2500,"speed":800,"frame":"0","from":"y:50px;opacity:0;fb:20px;","to":"o:0.6;fb:0;","ease":"power3.inOut"},{"delay":"wait","speed":300,"frame":"999","to":"opacity:0;","ease":"power3.inOut"}]'
|
||
data-textAlign="['center','center','center','center']"
|
||
data-paddingtop="[0,0,0,0]" data-paddingright="[0,0,0,0]"
|
||
data-paddingbottom="[36,36,60,40]" data-paddingleft="[0,0,0,0]">
|
||
We're a fully dedicated corporate service agency collaborating with brands
|
||
all over the world.
|
||
</div>
|
||
<span class="comment"><!-- end text layer --></span>
|
||
<span class="comment"><!-- start button layer --></span>
|
||
<div class="tp-caption tp-resizeme" id="slide-1-layer-09"
|
||
data-x="['center','center','center','center']"
|
||
data-hoffset="['0','0','0','0']" data-y="['top','top','top','top']"
|
||
data-voffset="['0','0','0','0']" data-width="auto" data-height="none"
|
||
data-whitespace="nowrap" data-fontsize="['18','16','16','16']"
|
||
data-lineheight="['70','55','55','55']" data-type="text"
|
||
data-responsive_offset="off" data-responsive="off"
|
||
data-frames='[{"delay":3000,"speed":1000,"frame":"0","from":"y:100px;opacity:0;","to":"o:1;","ease":"Power3.easeOut"},{"delay":"wait","speed":300,"frame":"999","to":"opacity:0;","ease":"Power3.easeInOut"}]'
|
||
data-textAlign="['inherit','inherit','inherit','inherit']"
|
||
data-paddingtop="[0,0,0,0]" data-paddingright="[75,70,65,60]"
|
||
data-paddingbottom="[0,0,0,0]" data-paddingleft="[45,35,30,30]">
|
||
<a href="#"
|
||
class="btn btn-extra-large get-started-btn btn-rounded with-rounded btn-gradient-flamingo-amethyst-green btn-box-shadow">Get
|
||
started now<span class="bg-white text-base-color"><i
|
||
class="fa-solid fa-arrow-right"></i></span></a>
|
||
</div>
|
||
<span class="comment"><!-- end button layer --></span>
|
||
</div>
|
||
<span class="comment"><!-- end column layer --></span>
|
||
</div>
|
||
<span class="comment"><!-- end row layer --></span>
|
||
</div>
|
||
<span class="comment"><!-- end row zone layer --></span>
|
||
<span class="comment"><!-- start beige background layer --></span>
|
||
<div class="tp-caption tp-shape tp-shapewrapper tp-resizeme bg-base-color border-radius-50"
|
||
id="slide-1-layer-10" data-x="['center','center','center','center']"
|
||
data-hoffset="['510','410','310','0']" data-y="['middle','middle','middle','middle']"
|
||
data-voffset="['-320','-250','-250','0']" data-width="['122','122','120','120']"
|
||
data-height="['122','122','120','120']" data-visibility="['on','on','off','off']"
|
||
data-whitespace="nowrap" data-basealign="grid" data-type="shape"
|
||
data-responsive_offset="on"
|
||
data-frames='[{"delay":3500,"speed":1000,"frame":"0","from":"x:0px;y:50px;rX:0deg;rY:0deg;rZ:0deg;sX:0.5;sY:0.5;opacity:0;","to":"o:1;","ease":"Back.easeOut"},{"delay":"wait","speed":300,"frame":"999","to":"opacity:0;","ease":"Power3.easeInOut"}]'
|
||
data-textAlign="['inherit','inherit','inherit','inherit']" data-paddingtop="[0,0,0,0]"
|
||
data-paddingright="[0,0,0,0]" data-paddingbottom="[0,0,0,0]"
|
||
data-paddingleft="[0,0,0,0]" style="z-index: 0;">
|
||
</div>
|
||
<span class="comment"><!-- end beige background layer --></span>
|
||
<span class="comment"><!-- start beige text layer --></span>
|
||
<div class="tp-caption d-inline-block" id="slide-1-layer-11"
|
||
data-x="['center','center','center','center']" data-hoffset="['510','410','310','0']"
|
||
data-y="['middle','middle','middle','middle']" data-voffset="['-305','-250','-250','0']"
|
||
data-visibility="['on','on','off','off']" data-fontsize="['13','13','13','13']"
|
||
data-lineheight="['16','16','16','16']" data-fontweight="['500','600','600','600']"
|
||
data-letterspacing="['0','0','0','0']"
|
||
data-color="['#ffffff','#ffffff','#ffffff','#ffffff']"
|
||
data-width="['100','100','100','100']" data-height="auto" data-whitespace="normal"
|
||
data-basealign="grid" data-type="text" data-responsive_offset="on"
|
||
data-verticalalign="middle" data-responsive="on"
|
||
data-frames='[{"delay":3700,"speed":1000,"frame":"0","from":"x:0px;y:50px;rX:0deg;rY:0deg;rZ:0deg;sX:0.5;sY:0.5;opacity:0;","to":"o:1;","ease":"Back.easeOut"},{"delay":"wait","speed":300,"frame":"999","to":"opacity:0;","ease":"Power3.easeInOut"}]'
|
||
data-textAlign="['center','center','center','center']" data-paddingtop="[0,0,0,0]"
|
||
data-paddingright="[0,0,0,0]" data-paddingbottom="[33,0,0,0]"
|
||
data-paddingleft="[0,0,0,0]" style="word-break: initial;">
|
||
<i class="bi bi-patch-check-fill icon-extra-medium d-block pb-10px"></i> <span
|
||
class="d-block text-uppercase">Decided quality</span>
|
||
</div>
|
||
<span class="comment"><!-- end beige text layer --></span>
|
||
</li>
|
||
<li data-index="rs-02" data-transition="parallaxleft" data-slotamount="default"
|
||
data-hideafterloop="0" data-hideslideonmobile="off" data-easein="default"
|
||
data-easeout="default" data-masterspeed="1500" data-rotate="0" data-saveperformance="off"
|
||
data-title="Crossfit" data-param1="" data-param2="" data-param3="" data-param4=""
|
||
data-param5="" data-param6="" data-param7="" data-param8="" data-param9="" data-param10=""
|
||
data-description="">
|
||
<span class="comment"><!-- slide's main background image --></span>
|
||
<img src="image path" alt="Image"
|
||
data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat"
|
||
class="rev-slidebg" data-no-retina>
|
||
<span class="comment"><!-- start overlay layer --></span>
|
||
<div class="tp-caption tp-shape tp-shapewrapper " id="slide-2-layer-01"
|
||
data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']"
|
||
data-y="['middle','middle','middle','middle']" data-voffset="['0','0','0','0']"
|
||
data-width="full" data-height="full" data-whitespace="nowrap" data-type="shape"
|
||
data-basealign="slide" data-responsive_offset="off" data-responsive="off"
|
||
data-frames='[{"delay":0,"speed":1000,"frame":"0","from":"opacity:0;","to":"o:1;","ease":"Power4.easeInOut"},
|
||
{"delay":"wait","speed":1000,"frame":"999","to":"opacity:0;","ease":"Power4.easeInOut"}]' style="background:rgba(22,35,63,0.1); z-index: 0;">
|
||
</div>
|
||
<span class="comment"><!-- end overlay layer --></span>
|
||
<span class="comment"><!-- start shape layer --></span>
|
||
<div class="tp-caption tp-shape tp-shapewrapper tp-resizeme bg-regal-blue border-radius-50"
|
||
id="slide-2-layer-02" data-x="['center','center','center','center']"
|
||
data-hoffset="['0','0','0','0']" data-y="['middle','middle','middle','middle']"
|
||
data-voffset="['0','0','0','0']" data-width="['900','700','700','600']"
|
||
data-height="['900','700','700','600']" data-whitespace="nowrap" data-type="shape"
|
||
data-responsive_offset="on"
|
||
data-frames='[{"delay":1000,"speed":1000,"frame":"0","from":"x:0px;y:50px;rX:0deg;rY:0deg;rZ:0deg;sX:0.5;sY:0.5;opacity:0;","to":"o:0.5;","ease":"Back.easeOut"},{"delay":"wait","speed":300,"frame":"999","to":"opacity:0;","ease":"Power3.easeInOut"}]'
|
||
data-textAlign="['inherit','inherit','inherit','inherit']" data-paddingtop="[0,0,0,0]"
|
||
data-paddingright="[0,0,0,0]" data-paddingbottom="[0,0,0,0]"
|
||
data-paddingleft="[0,0,0,0]" style="z-index: 0;">
|
||
</div>
|
||
<span class="comment"><!-- end shape layer --></span>
|
||
<span class="comment"><!-- start shape layer --></span>
|
||
<div class="tp-caption tp-shape tp-shapewrapper tp-resizeme bg-regal-blue border-radius-50"
|
||
id="slide-2-layer-03" data-x="['center','center','center','center']"
|
||
data-hoffset="['0','0','0','0']" data-y="['middle','middle','middle','middle']"
|
||
data-voffset="['0','0','0','0']" data-width="['1200','1000','900','800']"
|
||
data-height="['1200','1000','900','800']" data-whitespace="nowrap" data-type="shape"
|
||
data-responsive_offset="on"
|
||
data-frames='[{"delay":1300,"speed":1000,"frame":"0","from":"x:0px;y:50px;rX:0deg;rY:0deg;rZ:0deg;sX:0.5;sY:0.5;opacity:0;","to":"o:0.3;","ease":"Back.easeOut"},{"delay":"wait","speed":300,"frame":"999","to":"opacity:0;","ease":"Power3.easeInOut"}]'
|
||
data-textAlign="['inherit','inherit','inherit','inherit']" data-paddingtop="[0,0,0,0]"
|
||
data-paddingright="[0,0,0,0]" data-paddingbottom="[0,0,0,0]"
|
||
data-paddingleft="[0,0,0,0]" style="z-index: 0;">
|
||
</div>
|
||
<span class="comment"><!-- end shape layer --></span>
|
||
<span class="comment"><!-- start row zone layer --></span>
|
||
<div id="rrzm_639" class="rev_row_zone rev_row_zone_middle">
|
||
<span class="comment"><!-- start row layer --></span>
|
||
<div class="tp-caption " id="slide-2-layer-04" data-x="['left','left','left','left']"
|
||
data-hoffset="['0','0','0','0']" data-y="['middle','middle','middle','middle']"
|
||
data-voffset="['-426','-426','-426','-426']" data-width="none" data-height="none"
|
||
data-whitespace="nowrap" data-type="row" data-columnbreak="3"
|
||
data-responsive_offset="on" data-responsive="off"
|
||
data-frames='[{"delay":10,"speed":300,"frame":"0","from":"opacity:0;","to":"o:1;","ease":"Power3.easeInOut"},{"delay":"wait","speed":300,"frame":"999","to":"opacity:0;","ease":"Power3.easeInOut"}]'
|
||
data-textAlign="['inherit','inherit','inherit','inherit']"
|
||
data-paddingtop="[0,0,0,0]" data-paddingright="[100,75,50,30]"
|
||
data-paddingbottom="[0,0,0,0]" data-paddingleft="[100,75,50,30]">
|
||
<span class="comment"><!-- start column layer --></span>
|
||
<div class="tp-caption" id="slide-2-layer-05" data-x="['left','left','left','left']"
|
||
data-hoffset="['100','100','100','100']" data-y="['top','top','top','top']"
|
||
data-voffset="['100','100','100','100']" data-width="none" data-height="none"
|
||
data-whitespace="nowrap" data-type="column" data-responsive_offset="on"
|
||
data-responsive="off"
|
||
data-frames='[{"delay":"+0","speed":300,"frame":"0","from":"opacity:0;","to":"o:1;","ease":"Power3.easeInOut"},{"delay":"wait","speed":300,"frame":"999","to":"opacity:0;","ease":"Power3.easeInOut"}]'
|
||
data-columnwidth="100%" data-verticalalign="top"
|
||
data-textAlign="['center','center','center','center']">
|
||
<span class="comment"><!-- start subtitle layer --></span>
|
||
<div class="tp-caption mx-auto text-uppercase" id="slide-2-layer-06"
|
||
data-x="['center','center','center','center']"
|
||
data-hoffset="['0','0','0','0']"
|
||
data-y="['middle','middle','middle','middle']"
|
||
data-voffset="['0','0','0','0']" data-fontsize="['13','13','13','13']"
|
||
data-lineheight="['20','20','20','20']"
|
||
data-fontweight="['500','500','500','500']"
|
||
data-letterspacing="['1','1','1','1']"
|
||
data-color="['#ffffff','#ffffff','#ffffff','#ffffff']"
|
||
data-width="['800','auto','auto','auto']" data-height="auto"
|
||
data-whitespace="normal" data-basealign="grid" data-type="text"
|
||
data-responsive_offset="off" data-verticalalign="middle"
|
||
data-responsive="off"
|
||
data-frames='[{"delay":2500,"speed":800,"frame":"0","from":"y:-50px;opacity:0;fb:20px;","to":"o:1;fb:0;","ease":"power3.inOut"},{"delay":"wait","speed":300,"frame":"999","to":"opacity:0;","ease":"power3.inOut"}]'
|
||
data-textAlign="['center','center','center','center']"
|
||
data-paddingtop="[0,0,0,0]" data-paddingright="[0,0,0,0]"
|
||
data-paddingbottom="[25,25,10,10]" data-paddingleft="[0,0,0,0]"
|
||
style="word-break: initial;">
|
||
<i class="bi bi-award pe-5px icon-small"></i>On demand live support
|
||
</div>
|
||
<span class="comment"><!-- end subtitle layer --></span>
|
||
<span class="comment"><!-- start title layer --></span>
|
||
<div class="tp-caption mx-auto" id="slide-2-layer-07"
|
||
data-x="['center','center','center','center']"
|
||
data-hoffset="['0','0','0','0']"
|
||
data-y="['middle','middle','middle','middle']"
|
||
data-voffset="['0','0','0','0']" data-fontsize="['75','60','70','50']"
|
||
data-lineheight="['70','65','75','55']"
|
||
data-fontweight="['700','700','700','700']"
|
||
data-letterspacing="['-2','-2','-2','0']"
|
||
data-color="['#ffffff','#ffffff','#ffffff','#ffffff']"
|
||
data-width="['700','600','600','auto']" data-height="auto"
|
||
data-whitespace="normal" data-basealign="grid" data-type="text"
|
||
data-responsive_offset="off" data-verticalalign="middle"
|
||
data-responsive="on"
|
||
data-frames='[{"delay":"1500","split":"chars","splitdelay":0.03,"speed":800,"split_direction":"middletoedge","frame":"0","from":"x:50px;opacity:0;fb:10px;","to":"o:1;fb:0;","ease":"Power4.easeOut"},{"delay":"wait","speed":100,"frame":"999","to":"opacity:0;fb:0;","ease":"Power4.easeOut"}]'
|
||
data-textAlign="['center','center','center','center']"
|
||
data-paddingtop="[0,0,0,0]" data-paddingright="[0,0,0,0]"
|
||
data-paddingbottom="[33,28,35,25]" data-paddingleft="[0,0,0,0]"
|
||
style="word-break: initial; text-shadow: #0b1236 3px 3px 15px;">
|
||
Start your online business today
|
||
</div>
|
||
<span class="comment"><!-- end title layer --></span>
|
||
<span class="comment"><!-- start text layer --></span>
|
||
<div class="tp-caption mx-auto" id="slide-2-layer-08"
|
||
data-x="['center','center','center','center']"
|
||
data-hoffset="['0','0','0','0']"
|
||
data-y="['middle','middle','middle','middle']"
|
||
data-voffset="['0','0','0','0']" data-fontsize="['20','20','24','20']"
|
||
data-lineheight="['36','36','40','30']"
|
||
data-fontweight="['300','300','300','300']"
|
||
data-letterspacing="['0','0','0','0']"
|
||
data-color="['#ffffff','#ffffff','#ffffff','#ffffff']"
|
||
data-width="['500','500','auto','auto']" data-height="auto"
|
||
data-whitespace="normal" data-basealign="grid" data-type="text"
|
||
data-responsive_offset="off" data-verticalalign="middle"
|
||
data-responsive="on"
|
||
data-frames='[{"delay":2500,"speed":800,"frame":"0","from":"y:50px;opacity:0;fb:20px;","to":"o:0.6;fb:0;","ease":"power3.inOut"},{"delay":"wait","speed":300,"frame":"999","to":"opacity:0;","ease":"power3.inOut"}]'
|
||
data-textAlign="['center','center','center','center']"
|
||
data-paddingtop="[0,0,0,0]" data-paddingright="[0,0,0,0]"
|
||
data-paddingbottom="[36,36,60,40]" data-paddingleft="[0,0,0,0]">
|
||
We're a fully dedicated corporate service agency collaborating with brands
|
||
all over the world.
|
||
</div>
|
||
<span class="comment"><!-- end text layer --></span>
|
||
<span class="comment"><!-- start button layer --></span>
|
||
<div class="tp-caption tp-resizeme" id="slide-2-layer-09"
|
||
data-x="['center','center','center','center']"
|
||
data-hoffset="['0','0','0','0']" data-y="['top','top','top','top']"
|
||
data-voffset="['0','0','0','0']" data-width="auto" data-height="none"
|
||
data-whitespace="nowrap" data-fontsize="['18','16','16','16']"
|
||
data-lineheight="['70','55','55','55']" data-type="text"
|
||
data-responsive_offset="off" data-responsive="off"
|
||
data-frames='[{"delay":3000,"speed":1000,"frame":"0","from":"y:100px;opacity:0;","to":"o:1;","ease":"Power3.easeOut"},{"delay":"wait","speed":300,"frame":"999","to":"opacity:0;","ease":"Power3.easeInOut"}]'
|
||
data-textAlign="['inherit','inherit','inherit','inherit']"
|
||
data-paddingtop="[0,0,0,0]" data-paddingright="[75,70,65,60]"
|
||
data-paddingbottom="[0,0,0,0]" data-paddingleft="[45,35,30,30]">
|
||
<a href="#"
|
||
class="btn btn-extra-large get-started-btn btn-rounded with-rounded btn-gradient-flamingo-amethyst-green btn-box-shadow">Get
|
||
started now<span class="bg-white text-base-color"><i
|
||
class="fa-solid fa-arrow-right"></i></span></a>
|
||
</div>
|
||
<span class="comment"><!-- end button layer --></span>
|
||
</div>
|
||
<span class="comment"><!-- end column layer --></span>
|
||
</div>
|
||
<span class="comment"><!-- end row layer --></span>
|
||
</div>
|
||
<span class="comment"><!-- end row zone layer --></span>
|
||
<span class="comment"><!-- start beige background layer --></span>
|
||
<div class="tp-caption tp-shape tp-shapewrapper tp-resizeme bg-base-color border-radius-50"
|
||
id="slide-2-layer-10" data-x="['center','center','center','center']"
|
||
data-hoffset="['510','410','310','0']" data-y="['middle','middle','middle','middle']"
|
||
data-voffset="['-320','-250','-250','0']" data-width="['122','122','120','120']"
|
||
data-height="['122','122','120','120']" data-visibility="['on','on','off','off']"
|
||
data-whitespace="nowrap" data-basealign="grid" data-type="shape"
|
||
data-responsive_offset="on"
|
||
data-frames='[{"delay":3500,"speed":1000,"frame":"0","from":"x:0px;y:50px;rX:0deg;rY:0deg;rZ:0deg;sX:0.5;sY:0.5;opacity:0;","to":"o:1;","ease":"Back.easeOut"},{"delay":"wait","speed":300,"frame":"999","to":"opacity:0;","ease":"Power3.easeInOut"}]'
|
||
data-textAlign="['inherit','inherit','inherit','inherit']" data-paddingtop="[0,0,0,0]"
|
||
data-paddingright="[0,0,0,0]" data-paddingbottom="[0,0,0,0]"
|
||
data-paddingleft="[0,0,0,0]" style="z-index: 0;">
|
||
</div>
|
||
<span class="comment"><!-- end beige background layer --></span>
|
||
<span class="comment"><!-- start beige text layer --></span>
|
||
<div class="tp-caption d-inline-block" id="slide-2-layer-11"
|
||
data-x="['center','center','center','center']" data-hoffset="['510','410','310','0']"
|
||
data-y="['middle','middle','middle','middle']" data-voffset="['-305','-250','-250','0']"
|
||
data-visibility="['on','on','off','off']" data-fontsize="['13','13','13','13']"
|
||
data-lineheight="['16','16','16','16']" data-fontweight="['500','600','600','600']"
|
||
data-letterspacing="['0','0','0','0']"
|
||
data-color="['#ffffff','#ffffff','#ffffff','#ffffff']"
|
||
data-width="['100','100','100','100']" data-height="auto" data-whitespace="normal"
|
||
data-basealign="grid" data-type="text" data-responsive_offset="on"
|
||
data-verticalalign="middle" data-responsive="on"
|
||
data-frames='[{"delay":3700,"speed":1000,"frame":"0","from":"x:0px;y:50px;rX:0deg;rY:0deg;rZ:0deg;sX:0.5;sY:0.5;opacity:0;","to":"o:1;","ease":"Back.easeOut"},{"delay":"wait","speed":300,"frame":"999","to":"opacity:0;","ease":"Power3.easeInOut"}]'
|
||
data-textAlign="['center','center','center','center']" data-paddingtop="[0,0,0,0]"
|
||
data-paddingright="[0,0,0,0]" data-paddingbottom="[33,0,0,0]"
|
||
data-paddingleft="[0,0,0,0]" style="word-break: initial;">
|
||
<i class="bi bi-patch-check-fill icon-extra-medium d-block pb-10px"></i> <span
|
||
class="d-block text-uppercase">Decided quality</span>
|
||
</div>
|
||
<span class="comment"><!-- end beige text layer --></span>
|
||
</li>
|
||
<li data-index="rs-03" data-transition="parallaxleft" data-slotamount="default"
|
||
data-hideafterloop="0" data-hideslideonmobile="off" data-easein="default"
|
||
data-easeout="default" data-masterspeed="1500" data-rotate="0" data-saveperformance="off"
|
||
data-title="Crossfit" data-param1="" data-param2="" data-param3="" data-param4=""
|
||
data-param5="" data-param6="" data-param7="" data-param8="" data-param9="" data-param10=""
|
||
data-description="">
|
||
<span class="comment"><!-- slide's main background image --></span>
|
||
<img src="image path" alt="Image"
|
||
data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat"
|
||
class="rev-slidebg" data-no-retina>
|
||
<span class="comment"><!-- start overlay layer --></span>
|
||
<div class="tp-caption tp-shape tp-shapewrapper " id="slide-3-layer-01"
|
||
data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']"
|
||
data-y="['middle','middle','middle','middle']" data-voffset="['0','0','0','0']"
|
||
data-width="full" data-height="full" data-whitespace="nowrap" data-type="shape"
|
||
data-basealign="slide" data-responsive_offset="off" data-responsive="off"
|
||
data-frames='[{"delay":0,"speed":1000,"frame":"0","from":"opacity:0;","to":"o:1;","ease":"Power4.easeInOut"},
|
||
{"delay":"wait","speed":1000,"frame":"999","to":"opacity:0;","ease":"Power4.easeInOut"}]' style="background:rgba(22,35,63,0.1); z-index: 0;">
|
||
</div>
|
||
<span class="comment"><!-- end overlay layer --></span>
|
||
<span class="comment"><!-- start shape layer --></span>
|
||
<div class="tp-caption tp-shape tp-shapewrapper tp-resizeme bg-regal-blue border-radius-50"
|
||
id="slide-3-layer-02" data-x="['center','center','center','center']"
|
||
data-hoffset="['0','0','0','0']" data-y="['middle','middle','middle','middle']"
|
||
data-voffset="['0','0','0','0']" data-width="['900','700','700','600']"
|
||
data-height="['900','700','700','600']" data-whitespace="nowrap" data-type="shape"
|
||
data-responsive_offset="on"
|
||
data-frames='[{"delay":1000,"speed":1000,"frame":"0","from":"x:0px;y:50px;rX:0deg;rY:0deg;rZ:0deg;sX:0.5;sY:0.5;opacity:0;","to":"o:0.5;","ease":"Back.easeOut"},{"delay":"wait","speed":300,"frame":"999","to":"opacity:0;","ease":"Power3.easeInOut"}]'
|
||
data-textAlign="['inherit','inherit','inherit','inherit']" data-paddingtop="[0,0,0,0]"
|
||
data-paddingright="[0,0,0,0]" data-paddingbottom="[0,0,0,0]"
|
||
data-paddingleft="[0,0,0,0]" style="z-index: 0;">
|
||
</div>
|
||
<span class="comment"><!-- end shape layer --></span>
|
||
<span class="comment"><!-- start shape layer --></span>
|
||
<div class="tp-caption tp-shape tp-shapewrapper tp-resizeme bg-regal-blue border-radius-50"
|
||
id="slide-3-layer-03" data-x="['center','center','center','center']"
|
||
data-hoffset="['0','0','0','0']" data-y="['middle','middle','middle','middle']"
|
||
data-voffset="['0','0','0','0']" data-width="['1200','1000','900','800']"
|
||
data-height="['1200','1000','900','800']" data-whitespace="nowrap" data-type="shape"
|
||
data-responsive_offset="on"
|
||
data-frames='[{"delay":1300,"speed":1000,"frame":"0","from":"x:0px;y:50px;rX:0deg;rY:0deg;rZ:0deg;sX:0.5;sY:0.5;opacity:0;","to":"o:0.3;","ease":"Back.easeOut"},{"delay":"wait","speed":300,"frame":"999","to":"opacity:0;","ease":"Power3.easeInOut"}]'
|
||
data-textAlign="['inherit','inherit','inherit','inherit']" data-paddingtop="[0,0,0,0]"
|
||
data-paddingright="[0,0,0,0]" data-paddingbottom="[0,0,0,0]"
|
||
data-paddingleft="[0,0,0,0]" style="z-index: 0;">
|
||
</div>
|
||
<span class="comment"><!-- end shape layer --></span>
|
||
<span class="comment"><!-- start row zone layer --></span>
|
||
<div id="rrzm_640" class="rev_row_zone rev_row_zone_middle">
|
||
<span class="comment"><!-- start row layer --></span>
|
||
<div class="tp-caption " id="slide-3-layer-04" data-x="['left','left','left','left']"
|
||
data-hoffset="['0','0','0','0']" data-y="['middle','middle','middle','middle']"
|
||
data-voffset="['-426','-426','-426','-426']" data-width="none" data-height="none"
|
||
data-whitespace="nowrap" data-type="row" data-columnbreak="3"
|
||
data-responsive_offset="on" data-responsive="off"
|
||
data-frames='[{"delay":10,"speed":300,"frame":"0","from":"opacity:0;","to":"o:1;","ease":"Power3.easeInOut"},{"delay":"wait","speed":300,"frame":"999","to":"opacity:0;","ease":"Power3.easeInOut"}]'
|
||
data-textAlign="['inherit','inherit','inherit','inherit']"
|
||
data-paddingtop="[0,0,0,0]" data-paddingright="[100,75,50,30]"
|
||
data-paddingbottom="[0,0,0,0]" data-paddingleft="[100,75,50,30]">
|
||
<span class="comment"><!-- start column layer --></span>
|
||
<div class="tp-caption" id="slide-3-layer-05" data-x="['left','left','left','left']"
|
||
data-hoffset="['100','100','100','100']" data-y="['top','top','top','top']"
|
||
data-voffset="['100','100','100','100']" data-width="none" data-height="none"
|
||
data-whitespace="nowrap" data-type="column" data-responsive_offset="on"
|
||
data-responsive="off"
|
||
data-frames='[{"delay":"+0","speed":300,"frame":"0","from":"opacity:0;","to":"o:1;","ease":"Power3.easeInOut"},{"delay":"wait","speed":300,"frame":"999","to":"opacity:0;","ease":"Power3.easeInOut"}]'
|
||
data-columnwidth="100%" data-verticalalign="top"
|
||
data-textAlign="['center','center','center','center']">
|
||
<span class="comment"><!-- start subtitle layer --></span>
|
||
<div class="tp-caption mx-auto text-uppercase" id="slide-3-layer-06"
|
||
data-x="['center','center','center','center']"
|
||
data-hoffset="['0','0','0','0']"
|
||
data-y="['middle','middle','middle','middle']"
|
||
data-voffset="['0','0','0','0']" data-fontsize="['13','13','13','13']"
|
||
data-lineheight="['20','20','20','20']"
|
||
data-fontweight="['500','500','500','500']"
|
||
data-letterspacing="['1','1','1','1']"
|
||
data-color="['#ffffff','#ffffff','#ffffff','#ffffff']"
|
||
data-width="['800','auto','auto','auto']" data-height="auto"
|
||
data-whitespace="normal" data-basealign="grid" data-type="text"
|
||
data-responsive_offset="off" data-verticalalign="middle"
|
||
data-responsive="off"
|
||
data-frames='[{"delay":2500,"speed":800,"frame":"0","from":"y:-50px;opacity:0;fb:20px;","to":"o:1;fb:0;","ease":"power3.inOut"},{"delay":"wait","speed":300,"frame":"999","to":"opacity:0;","ease":"power3.inOut"}]'
|
||
data-textAlign="['center','center','center','center']"
|
||
data-paddingtop="[0,0,0,0]" data-paddingright="[0,0,0,0]"
|
||
data-paddingbottom="[25,25,10,10]" data-paddingleft="[0,0,0,0]"
|
||
style="word-break: initial;">
|
||
<i class="bi bi-award pe-5px icon-small"></i>On demand live support
|
||
</div>
|
||
<span class="comment"><!-- end subtitle layer --></span>
|
||
<span class="comment"><!-- start title layer --></span>
|
||
<div class="tp-caption mx-auto" id="slide-3-layer-07"
|
||
data-x="['center','center','center','center']"
|
||
data-hoffset="['0','0','0','0']"
|
||
data-y="['middle','middle','middle','middle']"
|
||
data-voffset="['0','0','0','0']" data-fontsize="['75','60','70','50']"
|
||
data-lineheight="['70','65','75','55']"
|
||
data-fontweight="['700','700','700','700']"
|
||
data-letterspacing="['-2','-2','-2','0']"
|
||
data-color="['#ffffff','#ffffff','#ffffff','#ffffff']"
|
||
data-width="['700','600','600','auto']" data-height="auto"
|
||
data-whitespace="normal" data-basealign="grid" data-type="text"
|
||
data-responsive_offset="off" data-verticalalign="middle"
|
||
data-responsive="on"
|
||
data-frames='[{"delay":"1500","split":"chars","splitdelay":0.03,"speed":800,"split_direction":"middletoedge","frame":"0","from":"x:50px;opacity:0;fb:10px;","to":"o:1;fb:0;","ease":"Power4.easeOut"},{"delay":"wait","speed":100,"frame":"999","to":"opacity:0;fb:0;","ease":"Power4.easeOut"}]'
|
||
data-textAlign="['center','center','center','center']"
|
||
data-paddingtop="[0,0,0,0]" data-paddingright="[0,0,0,0]"
|
||
data-paddingbottom="[33,28,35,25]" data-paddingleft="[0,0,0,0]"
|
||
style="word-break: initial; text-shadow: #0b1236 3px 3px 15px;">
|
||
Delivering creative digital products
|
||
</div>
|
||
<span class="comment"><!-- end title layer --></span>
|
||
<span class="comment"><!-- start text layer --></span>
|
||
<div class="tp-caption mx-auto" id="slide-3-layer-08"
|
||
data-x="['center','center','center','center']"
|
||
data-hoffset="['0','0','0','0']"
|
||
data-y="['middle','middle','middle','middle']"
|
||
data-voffset="['0','0','0','0']" data-fontsize="['20','20','24','20']"
|
||
data-lineheight="['36','36','40','30']"
|
||
data-fontweight="['300','300','300','300']"
|
||
data-letterspacing="['0','0','0','0']"
|
||
data-color="['#ffffff','#ffffff','#ffffff','#ffffff']"
|
||
data-width="['500','500','auto','auto']" data-height="auto"
|
||
data-whitespace="normal" data-basealign="grid" data-type="text"
|
||
data-responsive_offset="off" data-verticalalign="middle"
|
||
data-responsive="on"
|
||
data-frames='[{"delay":2500,"speed":800,"frame":"0","from":"y:50px;opacity:0;fb:20px;","to":"o:0.6;fb:0;","ease":"power3.inOut"},{"delay":"wait","speed":300,"frame":"999","to":"opacity:0;","ease":"power3.inOut"}]'
|
||
data-textAlign="['center','center','center','center']"
|
||
data-paddingtop="[0,0,0,0]" data-paddingright="[0,0,0,0]"
|
||
data-paddingbottom="[36,36,60,40]" data-paddingleft="[0,0,0,0]">
|
||
We're a fully dedicated corporate service agency collaborating with brands
|
||
all over the world.
|
||
</div>
|
||
<span class="comment"><!-- end text layer --></span>
|
||
<span class="comment"><!-- start button layer --></span>
|
||
<div class="tp-caption tp-resizeme" id="slide-3-layer-09"
|
||
data-x="['center','center','center','center']"
|
||
data-hoffset="['0','0','0','0']" data-y="['top','top','top','top']"
|
||
data-voffset="['0','0','0','0']" data-width="auto" data-height="none"
|
||
data-whitespace="nowrap" data-fontsize="['18','16','16','16']"
|
||
data-lineheight="['70','55','55','55']" data-type="text"
|
||
data-responsive_offset="off" data-responsive="off"
|
||
data-frames='[{"delay":3000,"speed":1000,"frame":"0","from":"y:100px;opacity:0;","to":"o:1;","ease":"Power3.easeOut"},{"delay":"wait","speed":300,"frame":"999","to":"opacity:0;","ease":"Power3.easeInOut"}]'
|
||
data-textAlign="['inherit','inherit','inherit','inherit']"
|
||
data-paddingtop="[0,0,0,0]" data-paddingright="[75,70,65,60]"
|
||
data-paddingbottom="[0,0,0,0]" data-paddingleft="[45,35,30,30]">
|
||
<a href="#"
|
||
class="btn btn-extra-large get-started-btn btn-rounded with-rounded btn-gradient-flamingo-amethyst-green btn-box-shadow">Get
|
||
started now<span class="bg-white text-base-color"><i
|
||
class="fa-solid fa-arrow-right"></i></span></a>
|
||
</div>
|
||
<span class="comment"><!-- end button layer --></span>
|
||
</div>
|
||
<span class="comment"><!-- end column layer --></span>
|
||
</div>
|
||
<span class="comment"><!-- end row layer --></span>
|
||
</div>
|
||
<span class="comment"><!-- end row zone layer --></span>
|
||
<span class="comment"><!-- start beige background layer --></span>
|
||
<div class="tp-caption tp-shape tp-shapewrapper tp-resizeme bg-base-color border-radius-50"
|
||
id="slide-3-layer-10" data-x="['center','center','center','center']"
|
||
data-hoffset="['510','410','310','0']" data-y="['middle','middle','middle','middle']"
|
||
data-voffset="['-320','-250','-250','0']" data-width="['122','122','120','120']"
|
||
data-height="['122','122','120','120']" data-visibility="['on','on','off','off']"
|
||
data-whitespace="nowrap" data-basealign="grid" data-type="shape"
|
||
data-responsive_offset="on"
|
||
data-frames='[{"delay":3500,"speed":1000,"frame":"0","from":"x:0px;y:50px;rX:0deg;rY:0deg;rZ:0deg;sX:0.5;sY:0.5;opacity:0;","to":"o:1;","ease":"Back.easeOut"},{"delay":"wait","speed":300,"frame":"999","to":"opacity:0;","ease":"Power3.easeInOut"}]'
|
||
data-textAlign="['inherit','inherit','inherit','inherit']" data-paddingtop="[0,0,0,0]"
|
||
data-paddingright="[0,0,0,0]" data-paddingbottom="[0,0,0,0]"
|
||
data-paddingleft="[0,0,0,0]" style="z-index: 0;">
|
||
</div>
|
||
<span class="comment"><!-- end beige background layer --></span>
|
||
<span class="comment"><!-- start beige text layer --></span>
|
||
<div class="tp-caption d-inline-block" id="slide-3-layer-11"
|
||
data-x="['center','center','center','center']" data-hoffset="['510','410','310','0']"
|
||
data-y="['middle','middle','middle','middle']" data-voffset="['-305','-250','-250','0']"
|
||
data-visibility="['on','on','off','off']" data-fontsize="['13','13','13','13']"
|
||
data-lineheight="['16','16','16','16']" data-fontweight="['500','600','600','600']"
|
||
data-letterspacing="['0','0','0','0']"
|
||
data-color="['#ffffff','#ffffff','#ffffff','#ffffff']"
|
||
data-width="['100','100','100','100']" data-height="auto" data-whitespace="normal"
|
||
data-basealign="grid" data-type="text" data-responsive_offset="on"
|
||
data-verticalalign="middle" data-responsive="on"
|
||
data-frames='[{"delay":3700,"speed":1000,"frame":"0","from":"x:0px;y:50px;rX:0deg;rY:0deg;rZ:0deg;sX:0.5;sY:0.5;opacity:0;","to":"o:1;","ease":"Back.easeOut"},{"delay":"wait","speed":300,"frame":"999","to":"opacity:0;","ease":"Power3.easeInOut"}]'
|
||
data-textAlign="['center','center','center','center']" data-paddingtop="[0,0,0,0]"
|
||
data-paddingright="[0,0,0,0]" data-paddingbottom="[33,0,0,0]"
|
||
data-paddingleft="[0,0,0,0]" style="word-break: initial;">
|
||
<i class="bi bi-patch-check-fill icon-extra-medium d-block pb-10px"></i> <span
|
||
class="d-block text-uppercase">Decided quality</span>
|
||
</div>
|
||
<span class="comment"><!-- end beige text layer --></span>
|
||
</li>
|
||
</ul>
|
||
<div class="tp-bannertimer"
|
||
style="height: 10px; background-color: rgba(0, 0, 0, 0.10); z-index: 98"></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<span class="comment"><!-- end slider --></span>
|
||
</pre>
|
||
</div>
|
||
<h3>JavaScript</h3>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
var tpj = jQuery;
|
||
var revapi7;
|
||
var $ = jQuery.noConflict();
|
||
tpj(document).ready(function () {
|
||
if (tpj("#demo-corporate-slider").revolution == undefined) {
|
||
revslider_showDoubleJqueryError("#demo-corporate-slider");
|
||
} else {
|
||
revapi7 = tpj("#demo-corporate-slider").show().revolution({
|
||
sliderType: "standard",
|
||
/* sets the Slider's default timeline */
|
||
delay: 9000,
|
||
/* options are 'auto', 'fullwidth' or 'fullscreen' */
|
||
sliderLayout: 'fullscreen',
|
||
/* RESPECT ASPECT RATIO */
|
||
autoHeight: 'off',
|
||
/* options that disable autoplay */
|
||
stopLoop: "off",
|
||
stopAfterLoops: -1,
|
||
stopAtSlide: -1,
|
||
navigation: {
|
||
keyboardNavigation: 'on',
|
||
keyboard_direction: 'horizontal',
|
||
mouseScrollNavigation: 'off',
|
||
mouseScrollReverse: 'reverse',
|
||
onHoverStop: 'off',
|
||
arrows: {
|
||
enable: true,
|
||
style: 'hesperiden',
|
||
rtl: false,
|
||
hide_onleave: false,
|
||
hide_onmobile: true,
|
||
hide_under: 500,
|
||
hide_over: 9999,
|
||
hide_delay: 200,
|
||
hide_delay_mobile: 1200,
|
||
left: {
|
||
container: 'slider',
|
||
h_align: 'left',
|
||
v_align: 'center',
|
||
h_offset: 50,
|
||
v_offset: 0
|
||
},
|
||
right: {
|
||
container: 'slider',
|
||
h_align: 'right',
|
||
v_align: 'center',
|
||
h_offset: 50,
|
||
v_offset: 0
|
||
}
|
||
},
|
||
bullets: {
|
||
|
||
enable: true,
|
||
style: 'hermes',
|
||
tmp: '',
|
||
direction: 'horizontal',
|
||
rtl: false,
|
||
|
||
container: 'layergrid',
|
||
h_align: 'center',
|
||
v_align: 'bottom',
|
||
h_offset: 0,
|
||
v_offset: 30,
|
||
space: 12,
|
||
|
||
hide_onleave: false,
|
||
hide_onmobile: true,
|
||
hide_under: 0,
|
||
hide_over: 500,
|
||
hide_delay: true,
|
||
hide_delay_mobile: 500
|
||
|
||
},
|
||
touch: {
|
||
touchenabled: 'on',
|
||
touchOnDesktop: "on",
|
||
swipe_threshold: 75,
|
||
swipe_min_touches: 1,
|
||
swipe_direction: 'horizontal',
|
||
drag_block_vertical: true
|
||
}
|
||
},
|
||
responsiveLevels: [1240, 1024, 768, 480],
|
||
visibilityLevels: [1240, 1024, 768, 480],
|
||
gridwidth: [1240, 1024, 768, 480],
|
||
gridheight: [930, 850, 900, 850],
|
||
lazyType: "none",
|
||
parallax: {
|
||
type: "scroll",
|
||
origo: "slidercenter",
|
||
speed: 400,
|
||
levels: [5, 10, 15, 20, 25, 30, 35, 40, 45, 46, 47, 48, 49, 50, 51, 5],
|
||
},
|
||
shadow: 0,
|
||
spinner: "off",
|
||
shuffle: "off",
|
||
fullScreenAutoWidth: "on",
|
||
fullScreenAlignForce: "on",
|
||
fullScreenOffsetContainer: "nav",
|
||
fullScreenOffset: "",
|
||
hideThumbsOnMobile: "off",
|
||
hideSliderAtLimit: 0,
|
||
hideCaptionAtLimit: 0,
|
||
hideAllCaptionAtLilmit: 0,
|
||
debugMode: false,
|
||
fallbacks: {
|
||
simplifyAll: "off",
|
||
nextSlideOnWindowFocus: "off",
|
||
disableFocusListener: false,
|
||
}
|
||
});
|
||
}
|
||
});
|
||
</pre>
|
||
</div>
|
||
<p><span class="label label-danger">Note</span> You can find revolution slider code in <strong><a href="../demo-corporate.html" target="_blank">demo-corporate.html</a></strong> page and above is the code for your reference. Please make sure to add revolution CSS and JS files in your page as per the demo page to make your revolution slider working. And also add the inline JS code like above or as per demo page above.</p><br/>
|
||
<p class="mb-0">You can find the Revolution slider related documentation here.</p>
|
||
<a class="button" href="https://www.themepunch.com/revsliderjquery-doc/slider-revolution-jquery-5-x-documentation/" target="_blank">Read Revolution Slider Document</a>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="row">
|
||
<div class="col-md-12 docs-content-inner last-section" id="slider-helper-classes">
|
||
<h1>Helper Classes</h1>
|
||
<p>We have created some helper classes for the Sliders. Here are a few of them:</p>
|
||
<ul>
|
||
<li><code>.full-screen</code> - For full screen on DIV</li>
|
||
<li><code>.opacity-very-light</code> - For very light opacity</li>
|
||
<li><code>.opacity-light</code> - For light opacity</li>
|
||
<li><code>.opacity-extra-medium</code> - For extra medium opacity</li>
|
||
<li><code>.opacity-medium</code> - For medium opacity</li>
|
||
<li><code>.opacity-full</code> - For full opacity</li>
|
||
<li><code>.opacity-full-dark</code> - For full dark opacity</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
|
||
<section id="elements" class="hidden">
|
||
<div class="container-fluid">
|
||
|
||
<div class="row">
|
||
<div class="col-md-12 docs-content-inner" id="elements-3d-parallax-hover">
|
||
<h1>3D Parallax Hover</h1>
|
||
<p>Atropos is a lightweight, free and open-source JavaScript library to create stunning touch-friendly 3D parallax hover effects.</p>
|
||
<a href="../element-3d-parallax-hover.html" target="_blank"><img src="images/3d-parallax-hover.jpg" alt="Crafto" /></a>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<span class="comment"><!-- start section --></span>
|
||
<section class="p-0 ipad-top-space-margin full-screen sm-h-500px position-relative overflow-hidden cover-background" style="background-image: url('image path')">
|
||
<div class="container h-100 position-relative">
|
||
<div class="row align-items-center justify-content-center text-center h-100">
|
||
<div class="col-md-12 position-relative atropos transform-3d" data-atropos>
|
||
<div class="atropos-scale">
|
||
<div class="atropos-rotate">
|
||
<div class="atropos-inner text-center overflow-visible">
|
||
<div data-atropos-offset="-8" class="position-absolute left-0px right-0px top-100px" data-anime='{ "scale":[1.2,1], "opacity": [0,1], "duration": 500, "delay": 0, "staggervalue": 200, "easing": "easeOutQuad" }'>
|
||
<img src="image path" alt="">
|
||
</div>
|
||
<img data-atropos-offset="3" class="position-relative z-index-9" src="image path" alt="" data-anime='{ "translateY": [50, 0], "rotateX": [10, 0], "perspective": [1000,1200], "scale": [1.1, 1], "opacity": [0,1], "duration": 800, "delay": 200, "staggervalue": 300, "easing": "easeOutQuad" }'>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<span class="comment"><!-- end section --></span>
|
||
</pre>
|
||
</div>
|
||
<h2 class="pt-30px">Parameters</h2>
|
||
<div class="panel panel-default params-table grid-table">
|
||
<table class="table">
|
||
<tr>
|
||
<th>Name</th>
|
||
<th>Type</th>
|
||
<th>Default</th>
|
||
<th>Description</th>
|
||
</tr>
|
||
<tr>
|
||
<td><code>el</code></td>
|
||
<td>HTMLElement | string</td>
|
||
<td></td>
|
||
<td>Atropos element</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>eventsEl</code></td>
|
||
<td>HTMLElement | string</td>
|
||
<td></td>
|
||
<td>Pointer events target. If not specified event handlers will be attached to main container <code>(el)</code></td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>activeOffset</code></td>
|
||
<td>number</td>
|
||
<td>50</td>
|
||
<td>Main container offset when activated (on hover), basically means <code>translateZ</code> value</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>alwaysActive</code></td>
|
||
<td>boolean</td>
|
||
<td>false</td>
|
||
<td>Enables Atropos to be always active</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>duration</code></td>
|
||
<td>number</td>
|
||
<td>300</td>
|
||
<td>Transition duration when activated, leave and and during rotate (in ms)</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>rotate</code></td>
|
||
<td>boolean</td>
|
||
<td>true</td>
|
||
<td>Defines whether to rotate container on pointer move (when activated)</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>rotateTouch</code></td>
|
||
<td>boolean | string</td>
|
||
<td>true</td>
|
||
<td>Defines whether to rotate container on touch move (when activated), rotate must be enabled.<br> Also accepts special values:
|
||
<ul>
|
||
<li><code>scroll-y</code> - will not rotate container with initial vertical touch-move (vertical scrolling),<br> basically will not block page vertical scrolling</li>
|
||
<li><code>scroll-x</code> - will not rotate container with initial horizontal touch-move (horizontal scrolling),<br> basically will not block page horizontal scrolling</li>
|
||
</ul>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>rotateXMax</code></td>
|
||
<td>number</td>
|
||
<td>15</td>
|
||
<td>Max rotation along the X-axis (in deg)</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>rotateYMax</code></td>
|
||
<td>number</td>
|
||
<td>15</td>
|
||
<td>Max rotation along the Y-axis (in deg)</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>rotateXInvert</code></td>
|
||
<td>boolean</td>
|
||
<td>false</td>
|
||
<td>Inverts rotation along the X-axis (in deg)</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>rotateYInvert</code></td>
|
||
<td>boolean</td>
|
||
<td>false</td>
|
||
<td>Inverts rotation along the Y-axis (in deg)</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>stretchX</code></td>
|
||
<td>number</td>
|
||
<td>0</td>
|
||
<td>Move (translate) atropos container along the X-axis on this value (in percentage). E.g. `50` value will move container +-50% of its width. Only for multiple Atropos, when multiple Atropos uses same parent `eventsEl` container</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>stretchY</code></td>
|
||
<td>number</td>
|
||
<td>0</td>
|
||
<td>Move (translate) atropos container along the Y-axis on this value (in percentage). E.g. `50` value will move container +-50% of its height. Only for multiple Atropos, when multiple Atropos uses same parent `eventsEl` container</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>stretchZ</code></td>
|
||
<td>number</td>
|
||
<td>0</td>
|
||
<td>Move (translate) atropos container along the Z-axis on this value (in percentage). E.g. `50` value will move container +-50% of its height. Only for multiple Atropos, when multiple Atropos uses same parent `eventsEl` container</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>commonOrigin</code></td>
|
||
<td>boolean</td>
|
||
<td>true</td>
|
||
<td>Will dynamically set `transform-origin` for all Atropos components with same parent to same point (usually pointer position). Only for multiple Atropos, when multiple Atropos uses same parent `eventsEl` container</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>shadow</code></td>
|
||
<td>boolean</td>
|
||
<td>true</td>
|
||
<td>Enables shadow</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>shadowOffset</code></td>
|
||
<td>number</td>
|
||
<td>50</td>
|
||
<td>Shadow offset, basically shadow element's <code>translateZ</code> value</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>shadowScale</code></td>
|
||
<td>number</td>
|
||
<td>1</td>
|
||
<td>Shadow scale factor</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>highlight</code></td>
|
||
<td>boolean</td>
|
||
<td>true</td>
|
||
<td>Enables highlight</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>onEnter</code></td>
|
||
<td>function</td>
|
||
<td></td>
|
||
<td>Callback function will be fired when Atropos activated (on hover)</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>onLeave</code></td>
|
||
<td>function</td>
|
||
<td></td>
|
||
<td>Callback function will be fired when Atropos deactivated (on pointer out)</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>onRotate</code></td>
|
||
<td>function(x, y)</td>
|
||
<td></td>
|
||
<td>Callback function will be fired on rotate. As arguments accepts <code>x</code> and <code>y</code> rotation angles</td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
<p class="pt-30px"><strong>For example:</strong></p>
|
||
<pre>
|
||
const myAtropos = Atropos({
|
||
el: '.my-atropos',
|
||
activeOffset: 40,
|
||
shadowScale: 1.05,
|
||
onEnter() {
|
||
console.log('Enter');
|
||
},
|
||
onLeave() {
|
||
console.log('Leave');
|
||
},
|
||
onRotate(x, y) {
|
||
console.log('Rotate', x, y);
|
||
}
|
||
});
|
||
</pre>
|
||
<h2 class="pt-30px">Instance Properties</h2>
|
||
<p>After we initialize Atropos we have its initialized instance with some helpful methods and properties:</p>
|
||
<div class="panel panel-default params-table grid-table">
|
||
<table class="table">
|
||
<tr>
|
||
<th>Name</th>
|
||
<th>Type</th>
|
||
<th>Description</th>
|
||
</tr>
|
||
<tr>
|
||
<td><code>el</code></td>
|
||
<td>HTMLElement</td>
|
||
<td>Main container HTML element</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>isActive</code></td>
|
||
<td>boolean</td>
|
||
<td>Indicates whether the Atropos is active (hovered) or not</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>params</code></td>
|
||
<td>object</td>
|
||
<td>Atropos parameters used for initialization (extended with defaults)</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>destroy()</code></td>
|
||
<td>function</td>
|
||
<td>Method to destroy the Atropos and detach all event listeners</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>destroyed</code></td>
|
||
<td>boolean</td>
|
||
<td>Indicates whether the Atropos was destroyed or not</td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
<p class="pt-30px"><strong>For example:</strong></p>
|
||
<pre>
|
||
<span class="comment">// init Atropos</span>
|
||
const myAtropos = Atropos({
|
||
el: '.my-atropos',
|
||
activeOffset: 40,
|
||
});
|
||
|
||
setTimeout(() => {
|
||
<span class="comment">// destroy it when needed</span>
|
||
myAtropos.destroy();
|
||
}, 10000)
|
||
</pre>
|
||
<h2 class="pt-30px">Control Elements Offsets</h2>
|
||
<p>Atropos uses special <code>data-</code> attributes to control elements offset (parallax effect):</p>
|
||
<ul>
|
||
<li><code>data-atropos-offset</code> - controls element offset/translate in percentage.</li>
|
||
<p class="pt-30px mb-0"><strong>For example:</strong></p>
|
||
<li><code>data-atropos-offset="5"</code> means that element will move <code>'5%'</code> of its size on max rotate angles.</li>
|
||
<li><code>data-atropos-offset="-5"</code> means that element will move <code>'-5%'</code> of its size on max rotate angles.</li>
|
||
<p>Basically if you want the element to appear closer (be in front of the scene), then this value should be positive. And if you want the element to appear in the distance (be behind the scene), then this value should be negative.</p>
|
||
<li><code>data-atropos-opacity</code> - controls element opacity.</li>
|
||
<p class="pt-30px mb-0"><strong>For example:</strong></p>
|
||
<li><code>data-atropos-opacity="0;1"</code> - means element's opacity will change from <code>'0'</code> (on initial state) and up to <code>'1'</code> (on max rotate angles).</li>
|
||
<li><code>data-atropos-opacity="0.1;0.8"</code> - means element's opacity will change from <code>'0.1'</code> (on initial state) and up to <code>'0.8'</code> (on max rotate angles).</li>
|
||
<li><code>data-atropos-opacity="1;0"</code> - means element's opacity will change from <code>'1'</code> (on initial state) and down to <code>'0'</code> (on max rotate angles).</li>
|
||
</ul>
|
||
<p class="pt-30px"><strong>For example:</strong></p>
|
||
<pre>
|
||
<div class="atropos">
|
||
<div class="atropos-scale">
|
||
<div class="atropos-rotate">
|
||
<div class="atropos-inner">
|
||
<span class="comment"><!-- Element with negative offset will move in reverse direction,making it appear behind the scene --> </span>
|
||
<img src="image-bg.png" data-atropos-offset="-5" />
|
||
<span class="comment"><!-- Element with no offset will not move --></span>
|
||
<img src="image-middle.png" data-atropos-offset="0" />
|
||
<span class="comment"><!-- Element with positive offset will move in same direction, making it appear in front of the scene --></span>
|
||
<img src="image-front.png" data-atropos-offset="5" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</pre>
|
||
<p><span class="label label-danger">Note</span>You can find this demo in <strong><a href="../element-3d-parallax-hover.html" target="_blank">element-3d-parallax-hover.html</a></strong> page for your reference.</p>
|
||
<br>
|
||
<p class="mb-0">You can find the Atropos related documentation here.</p>
|
||
<a class="button" href="https://atroposjs.com/docs" target="_blank">Read Atropos Document</a>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="row">
|
||
<div class="col-md-12 docs-content-inner" id="elements-accordion">
|
||
<h1>Accordion</h1>
|
||
<p>The accordion element lets you display different sets of information in a classic "accordion" format. You can expand or collapse each section to reveal its specific content. This element gives you the flexibility to present various pieces of information without overwhelming your audience, keeping things tidy and easy to navigate.</p>
|
||
<a href="../element-accordion.html" target="_blank"><img src="images/accordions.jpg" alt="Crafto" /></a>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<div class="row justify-content-center align-items-center">
|
||
<div class="col-12 col-lg-6 col-md-10">
|
||
<div class="accordion accordion-style-01" id="accordion-style-01" data-active-icon="fa-angle-down" data-inactive-icon="fa-angle-right">
|
||
<span class="comment"><!-- start accordion item --></span>
|
||
<div class="accordion-item bg-white active-accordion">
|
||
<div class="accordion-header">
|
||
<a href="#" data-bs-toggle="collapse" data-bs-target="#accordion-style-01-01" aria-expanded="true" data-bs-parent="#accordion-style-01">
|
||
<div class="accordion-title position-relative fs-18 d-flex align-items-center pe-20px text-dark-gray fw-600 alt-font mb-0">Unique and bold website design<span><i class="fa-solid fa-angle-down icon-small"></i></span></div>
|
||
</a>
|
||
</div>
|
||
<div id="accordion-style-01-01" class="accordion-collapse collapse show" data-bs-parent="#accordion-style-01">
|
||
<div class="accordion-body last-paragraph-no-margin">
|
||
<p>We deliver customized marketing campaign to use your audience to make a positive move.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<span class="comment"><!-- end accordion item --></span>
|
||
<span class="comment"><!-- start accordion item --></span>
|
||
<div class="accordion-item bg-white">
|
||
<div class="accordion-header">
|
||
<a href="#" data-bs-toggle="collapse" data-bs-target="#accordion-style-01-02" aria-expanded="false" data-bs-parent="#accordion-style-01">
|
||
<div class="accordion-title position-relative fs-18 d-flex align-items-center pe-20px text-dark-gray fw-600 alt-font mb-0">We're ready to start marketing now<span><i class="fa-solid fa-angle-right icon-small"></i></span></div>
|
||
</a>
|
||
</div>
|
||
<div id="accordion-style-01-02" class="accordion-collapse collapse" data-bs-parent="#accordion-style-01">
|
||
<div class="accordion-body last-paragraph-no-margin">
|
||
<p>We deliver customized marketing campaign to use your audience to make a positive move.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<span class="comment"><!-- end accordion item --></span>
|
||
<span class="comment"><!-- start accordion item --></span>
|
||
<div class="accordion-item bg-white">
|
||
<div class="accordion-header">
|
||
<a href="#" data-bs-toggle="collapse" data-bs-target="#accordion-style-01-03" aria-expanded="false" data-bs-parent="#accordion-style-01">
|
||
<div class="accordion-title position-relative fs-18 d-flex align-items-center pe-20px text-dark-gray fw-600 alt-font mb-0">Something marketing for everyone<span><i class="fa-solid fa-angle-right icon-small"></i></span></div>
|
||
</a>
|
||
</div>
|
||
<div id="accordion-style-01-03" class="accordion-collapse collapse" data-bs-parent="#accordion-style-01">
|
||
<div class="accordion-body last-paragraph-no-margin">
|
||
<p>We deliver customized marketing campaign to use your audience to make a positive move.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<span class="comment"><!-- end accordion item --></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</pre>
|
||
</div>
|
||
<p><span class="label label-danger">Note</span>We have many examples and shown in <strong><a href="../element-accordion.html" target="_blank">element-accordion.html</a></strong> page. You can add your desired icon name in <strong>data-active-icon</strong> and <strong>data-inactive-icon</strong> attributes in panel-group DIV to expand and collapse more details respectively. And same way add icon name class in accordion item <code>i</code> tag for default load view. You can add <strong>show</strong> class in accordion item expanded content DIV to make that opened by default when the page load.</p>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="row">
|
||
<div class="col-md-12 docs-content-inner" id="elements-adaptive-background">
|
||
<h1>Adaptive Background</h1>
|
||
<p>An adaptive background is a clever feature that automatically alters the background color of a webpage as you scroll down or up. Instead of having a static background, this dynamic change is based on your position on the page. It adds a visually appealing element to the website, making it more engaging and interactive.</p>
|
||
<a href="../element-adaptive-backgrounds.html" target="_blank"><img src="images/adaptive-backgrounds.jpg" alt="Crafto" /></a>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<div class="page-content position-relative">
|
||
<span class="comment"><!-- start section --></span>
|
||
<section class="overflow-hidden background-position-center-top position-relative" data-background="#d6d9de" style="background-image: url(image path)">
|
||
<div class="container h-100">
|
||
<div class="row align-items-center justify-content-center h-100">
|
||
...
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<span class="comment"><!-- end section --></span>
|
||
<span class="comment"><!-- start section --></span>
|
||
<section class="overflow-hidden background-position-center-top position-relative threeD-letter-menu d-flex align-items-center" data-background="#232323" style="background-image: url(image path)">
|
||
<div class="container h-100">
|
||
<div class="row align-items-center justify-content-center h-100">
|
||
...
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<span class="comment"><!-- end section --></span>
|
||
</div>
|
||
</pre>
|
||
</div>
|
||
<p><span class="label label-danger">Note</span> For demo, You can please check this in <strong><a href="../element-adaptive-backgrounds.html" target="_blank">element-adaptive-backgrounds.html</a></strong> page. It is mandatory to place the <code>.page-content .position-relative</code> page content class and position relative class in the parent <code>div</code> of the section where you see the adaptive background color. and then in the section For example <code><section data-background="#d6d9de"> </section></code>, passing a default in the data attribute section like custom data attribute stores the value.</p>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="row">
|
||
<div class="col-md-12 docs-content-inner" id="elements-alert-box">
|
||
<h1>Alert Box</h1>
|
||
<p>The alert element serves the purpose of displaying an alert message within a styled box, showcasing the text that you've chosen for the alert. Wrap any text and an optional dismiss button in <code>.alert</code> and one of the four contextual classes (e.g., <code>.alert-success</code>) for basic alert messages.</p>
|
||
<a href="../element-alert-boxes.html" target="_blank"><img src="images/alert-box.jpg" alt="Crafto" /></a>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<div class="row justify-content-center">
|
||
<div class="col-12 col-lg-8 alert-box-style-01">
|
||
<span class="comment"><!-- start alert box item --></span>
|
||
<div class="alert alert-success alert-dismissable">
|
||
<a href="#" class="close float-end" data-bs-dismiss="alert" aria-label="close"><i class="fa-solid fa-xmark"></i></a>
|
||
<strong>Success!</strong> Indicates a successful or positive action.
|
||
</div>
|
||
<span class="comment"><!-- end alert box item --></span>
|
||
<span class="comment"><!-- start alert box item --></span>
|
||
<div class="alert alert-info alert-dismissable">
|
||
<a href="#" class="close float-end" data-bs-dismiss="alert" aria-label="close"><i class="fa-solid fa-xmark"></i></a>
|
||
<strong>Info!</strong> Indicates a neutral informative change or action.
|
||
</div>
|
||
<span class="comment"><!-- end alert box item --></span>
|
||
<span class="comment"><!-- start alert box item --></span>
|
||
<div class="alert alert-warning alert-dismissable">
|
||
<a href="#" class="close float-end" data-bs-dismiss="alert" aria-label="close"><i class="fa-solid fa-xmark"></i></a>
|
||
<strong>Warning!</strong> Indicates a warning that might need attention.
|
||
</div>
|
||
<span class="comment"><!-- end alert box item --></span>
|
||
<span class="comment"><!-- start alert box item --></span>
|
||
<div class="alert alert-danger alert-dismissable">
|
||
<a href="#" class="close float-end" data-bs-dismiss="alert" aria-label="close"><i class="fa-solid fa-xmark"></i></a>
|
||
<strong>Danger!</strong> Indicates a dangerous or potentially negative action.
|
||
</div>
|
||
<span class="comment"><!-- end alert box item --></span>
|
||
</div>
|
||
</div>
|
||
</pre>
|
||
</div>
|
||
<p><span class="label label-danger">Note</span>For demo, You can please check this in <strong><a href="../element-alert-boxes.html" target="_blank">element-alert-boxes.html</a></strong> page.</p>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="row">
|
||
<div class="col-md-12 docs-content-inner" id="elements-animated-particles">
|
||
<h1>Animated Particles</h1>
|
||
<p>Animated particles are cool visual animations and dynamic elements created using JavaScript and CSS. These effects make websites more interactive and captivating. Imagine small, animated particles moving and reacting to user actions, making the website content more engaging and immersive.</p>
|
||
<a href="../element-animated-particles.html" target="_blank"><img src="images/animated-particles.jpg" alt="Crafto" /></a>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<span class="comment"><!-- start section --></span>
|
||
<section class="p-0 ipad-top-space-margin full-screen md-h-600px sm-h-500px position-relative overflow-hidden">
|
||
<div id="particles-style-06" class="h-100 position-absolute left-0px top-0 w-100" data-particle="true" data-particle-options='{"particles": {"number": {"value": 10,"density": {"enable": true,"value_area": 800}},"color": {"value": ["#f7ccaf", "#f6cacd", "dbf5f8", "#c5d8f8", "#c5f8ce", "#f7afbd", "#b2d6ef", "#f1ecb7"]},"shape": {"type": "triangle","stroke":{"width":0,"color":"#000000"}},"opacity": {"value": 0.5,"random": false,"anim": {"enable": false,"speed": 1,"sync": false}},"size": {"value": 40,"random": true,"anim": {"enable": false,"sync": true}},"line_linked":{"enable":false,"distance":0,"color":"#ffffff","opacity":0.4,"width":1},"move": {"enable": true,"speed":1,"direction": "top","random": false,"straight": false}},"interactivity": {"detect_on": "canvas","events": {"onhover": {"enable": false,"mode": "repulse"},"onclick": {"enable": false,"mode": "push"},"resize": true}},"retina_detect": false}'></div>
|
||
<div class="container h-100 position-relative">
|
||
<div class="row align-items-center justify-content-center text-center h-100">
|
||
<div class="col-md-12">
|
||
<div class="text-dark-gray fs-130 lg-fs-110 md-fs-85 fw-500 ls-minus-6px sm-ls-minus-3px xs-ms-0 fancy-text-style-4" data-bottom-top="transform: translate3d(40px, 0px, 0px);" data-top-bottom="transform: translate3d(-40px, 0px, 0px);">Use any <span class="fw-700" data-fancy-text='{ "effect": "rubber-band", "direction": "left", "string": ["colors", "shapes", "directions", "images"], "speed": 100, "duration": 3000 }'></span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<span class="comment"><!-- end section --></span>
|
||
</pre>
|
||
</div>
|
||
<h2 class="pt-30px">Parameters</h2>
|
||
<div class="panel panel-default params-table grid-table">
|
||
<table class="table">
|
||
<tr>
|
||
<th>Key</th>
|
||
<th>Option type / Notes</th>
|
||
<th>Example</th>
|
||
</tr>
|
||
<tr>
|
||
<td><code>particles.number.value</code></td>
|
||
<td>number</td>
|
||
<td>40</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>particles.number.density.enable </code></td>
|
||
<td>boolean</td>
|
||
<td>true / false</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>particles.number.density.value_area</code></td>
|
||
<td>number</td>
|
||
<td>800</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>particles.color.value</code></td>
|
||
<td>
|
||
HEX (string)<br>
|
||
RGB (object)<br>
|
||
HSL (object)<br>
|
||
array selection (HEX)<br>
|
||
random (string)
|
||
</td>
|
||
<td>
|
||
"#b61924"<br>
|
||
{r:182, g:25, b:36}<br>
|
||
{h:356, s:76, l:41}<br>
|
||
["#b61924", "#333333", "999999"]<br>
|
||
"random"
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>particles.shape.type</code></td>
|
||
<td>string array selection</td>
|
||
<td>
|
||
"circle"<br>
|
||
"edge"<br>
|
||
"triangle"<br>
|
||
"polygon"<br>
|
||
"star"<br>
|
||
"image"<br>
|
||
["circle", "triangle", "image"]
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>particles.shape.stroke.width</code></td>
|
||
<td>number</td>
|
||
<td>2</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>particles.shape.stroke.color</code></td>
|
||
<td>HEX (string)</td>
|
||
<td>"#222222"</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>particles.shape.polygon.nb_slides</code></td>
|
||
<td>number</td>
|
||
<td>5</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>particles.shape.image.src</code></td>
|
||
<td>path link svg / png / gif / jpg</td>
|
||
<td>
|
||
"assets/img/yop.svg"
|
||
"http://mywebsite.com/assets/img/yop.png"
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>particles.shape.image.width</code></td>
|
||
<td>number (for aspect ratio)</td>
|
||
<td>100</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>particles.shape.image.height</code></td>
|
||
<td>number (for aspect ratio)</td>
|
||
<td>100</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>particles.opacity.value</code></td>
|
||
<td>number (0 to 1)</td>
|
||
<td>0.75</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>particles.opacity.random</code></td>
|
||
<td>boolean</td>
|
||
<td>true / false</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>particles.opacity.anim.enable</code></td>
|
||
<td>boolean</td>
|
||
<td>true / false</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>particles.opacity.anim.speed</code></td>
|
||
<td>number</td>
|
||
<td>3</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>particles.opacity.anim.opacity_min</code></td>
|
||
<td>number (0 to 1)</td>
|
||
<td>0.25</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>particles.opacity.anim.sync</code></td>
|
||
<td>boolean</td>
|
||
<td>true / false</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>particles.size.value</code></td>
|
||
<td>number</td>
|
||
<td>20</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>particles.size.random</code></td>
|
||
<td>boolean</td>
|
||
<td>true / false</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>particles.size.anim.enable</code></td>
|
||
<td>boolean</td>
|
||
<td>true / false</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>particles.size.anim.speed</code></td>
|
||
<td>number</td>
|
||
<td>3</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>particles.size.anim.size_min</code></td>
|
||
<td>number</td>
|
||
<td>0.25</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>particles.size.anim.sync</code></td>
|
||
<td>boolean</td>
|
||
<td>true / false</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>particles.line_linked.enable</code></td>
|
||
<td>boolean</td>
|
||
<td>true / false</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>particles.line_linked.distance</code></td>
|
||
<td>number</td>
|
||
<td>150</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>particles.line_linked.color</code></td>
|
||
<td>HEX (string)</td>
|
||
<td>#ffffff</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>particles.line_linked.opacity</code></td>
|
||
<td>number (0 to 1)</td>
|
||
<td>0.5</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>particles.line_linked.width</code></td>
|
||
<td>number</td>
|
||
<td>1.5</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>particles.move.enable</code></td>
|
||
<td>boolean</td>
|
||
<td>true / false</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>particles.move.speed</code></td>
|
||
<td>number</td>
|
||
<td>4</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>particles.move.direction</code></td>
|
||
<td>string</td>
|
||
<td>
|
||
"none"<br>
|
||
"top"<br>
|
||
"top-right"<br>
|
||
"right"<br>
|
||
"bottom-right"<br>
|
||
"bottom"<br>
|
||
"bottom-left"<br>
|
||
"left"<br>
|
||
"top-left"
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>particles.move.random</code></td>
|
||
<td>boolean</td>
|
||
<td>true / false</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>particles.move.straight</code></td>
|
||
<td>boolean</td>
|
||
<td>true / false</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>particles.move.out_mode</code></td>
|
||
<td>string (out of canvas)</td>
|
||
<td>
|
||
"out"<br>
|
||
"bounce"<br>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>particles.move.bounce</code></td>
|
||
<td>boolean (between particles)</td>
|
||
<td>true / false</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>particles.move.attract.enable</code></td>
|
||
<td>boolean</td>
|
||
<td>true / false</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>particles.move.attract.rotateX</code></td>
|
||
<td>number</td>
|
||
<td>3000</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>particles.move.attract.rotateY</code></td>
|
||
<td>number</td>
|
||
<td>1500</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>interactivity.detect_on</code></td>
|
||
<td>string</td>
|
||
<td>"canvas", "window"</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>interactivity.events.onhover.enable</code></td>
|
||
<td>boolean</td>
|
||
<td>true / false</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>interactivity.events.onhover.mode</code></td>
|
||
<td>string array selection</td>
|
||
<td>
|
||
"grab"<br>
|
||
"bubble"<br>
|
||
"repulse"<br>
|
||
["grab", "bubble"]
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>interactivity.events.onclick.enable</code></td>
|
||
<td>boolean</td>
|
||
<td>true / false</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>interactivity.events.onclick.mode</code></td>
|
||
<td>string array selection</td>
|
||
<td>
|
||
"push"<br>
|
||
"remove"<br>
|
||
"bubble"<br>
|
||
"repulse"<br>
|
||
["push", "repulse"]
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>interactivity.events.resize</code></td>
|
||
<td>boolean</td>
|
||
<td>true / false</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>interactivity.events.modes.grab.distance</code></td>
|
||
<td>number</td>
|
||
<td>100</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>interactivity.events.modes.grab.line_linked.opacity</code></td>
|
||
<td>number (0 to 1)</td>
|
||
<td>0.75</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>interactivity.events.modes.bubble.distance</code></td>
|
||
<td>number</td>
|
||
<td>100</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>interactivity.events.modes.bubble.size</code></td>
|
||
<td>number</td>
|
||
<td>40</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>interactivity.events.modes.bubble.duration</code></td>
|
||
<td>number (second)</td>
|
||
<td>0.4</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>interactivity.events.modes.repulse.distance</code></td>
|
||
<td>number</td>
|
||
<td>200</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>interactivity.events.modes.repulse.duration</code></td>
|
||
<td>number (second)</td>
|
||
<td>1.2</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>interactivity.events.modes.push.particles_nb</code></td>
|
||
<td>number</td>
|
||
<td>4</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>interactivity.events.modes.push.particles_nb</code></td>
|
||
<td>number</td>
|
||
<td>4</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>retina_detect</code></td>
|
||
<td>boolean</td>
|
||
<td>true / false</td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
<p><span class="label label-danger">Note</span>You can find this demo in <strong><a href="../element-animated-particles.html" target="_blank">element-animated-particles.html</a></strong> page for your reference.</p>
|
||
<br>
|
||
<p class="mb-0">You can find the Particles related documentation here.</p>
|
||
<a class="button" href="https://vincentgarreau.com/particles.js/" target="_blank">Read Particles Document</a>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="row">
|
||
<div class="col-md-12 docs-content-inner" id="elements-animation">
|
||
<h1>Animation</h1>
|
||
<p>Stay on trend with the latest scroll-to-reveal animations using Crafto. Animations add dynamic and visually appealing effects to different elements and content on your website. These animations serve to capture the attention of your visitors and enhance the overall user experience. Check out this sample code to get started:</p>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<div class="row row-cols-1 justify-content-center">
|
||
<span class="comment"><!-- start fadeIn animation --></span>
|
||
<div class="col fw-600 text-dark-gray text-center pb-11 border-bottom border-color-extra-medium-gray overflow-hidden">
|
||
<h3 class="mb-0" data-anime='{"opacity": [0,1], "duration": 800, "delay": 0, "easing": "easeOutQuad" }'>fadeIn</h3>
|
||
</div>
|
||
<span class="comment"><!-- end fadeIn animation --> </span>
|
||
<span class="comment"><!-- start fadeInDown animation --></span>
|
||
<div class="col fw-600 text-dark-gray text-center pt-11 pb-11 border-bottom border-color-extra-medium-gray overflow-hidden">
|
||
<h3 class="mb-0" data-anime='{"translateY": [-50, 0], "opacity": [0,1], "duration": 800, "delay": 0, "easing": "easeOutQuad" }'>fadeInDown</h3>
|
||
</div>
|
||
<span class="comment"><!-- end fadeInDown animation --></span>
|
||
<span class="comment"><!-- start fadeInLeft animation --></span>
|
||
<div class="col fw-600 text-dark-gray text-center pt-11 pb-11 border-bottom border-color-extra-medium-gray overflow-hidden">
|
||
<h3 class="mb-0" data-anime='{"translateX": [-50, 0], "opacity": [0,1], "duration": 800, "delay": 0, "easing": "easeOutQuad" }'>fadeInLeft</h3>
|
||
</div>
|
||
<span class="comment"><!-- end fadeInLeft animation --></span>
|
||
<span class="comment"><!-- start fadeInRight animation --></span>
|
||
<div class="col fw-600 text-dark-gray text-center pt-11 pb-11 border-bottom border-color-extra-medium-gray overflow-hidden">
|
||
<h3 class="mb-0" data-anime='{"translateX": [50, 0], "opacity": [0,1], "duration": 800, "delay": 0, "easing": "easeOutQuad" }'>fadeInRight</h3>
|
||
</div>
|
||
<span class="comment"><!-- end fadeInRight animation --></span>
|
||
<span class="comment"><!-- start fadeInUp animation --></span>
|
||
<div class="col fw-600 text-dark-gray text-center pt-11 pb-11 border-bottom border-color-extra-medium-gray overflow-hidden">
|
||
<h3 class="mb-0" data-anime='{"translateY": [50, 0], "opacity": [0,1], "duration": 800, "delay": 0, "easing": "easeOutQuad" }'>fadeInUp</h3>
|
||
</div>
|
||
<span class="comment"><!-- end fadeInUp animation --></span>
|
||
</div>
|
||
</pre>
|
||
</div>
|
||
<h3>Properties</h3>
|
||
<p>Any CSS properties can be animated.</p>
|
||
<div class="panel panel-default params-table grid-table">
|
||
<table class="table">
|
||
<tbody>
|
||
<tr>
|
||
<th>Properties</th>
|
||
<th>Value</th>
|
||
<th>Description</th>
|
||
</tr>
|
||
<tr>
|
||
<td><code>translateX</code></td>
|
||
<td>number</td>
|
||
<td>"translateX": [-30, 0] - The translateX property is used to translate the element along the horizontal axis. </td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>translateY</code></td>
|
||
<td>number</td>
|
||
<td>"translateY": [30, 0] - The translateY property is used to reposition an element along the vertical axis.</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>translateZ</code></td>
|
||
<td>number</td>
|
||
<td>"translateZ": [30, 0] - The translateZ property This property applies to translating an element along the z-axis in 3D space.</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>rotate</code></td>
|
||
<td>number</td>
|
||
<td>"rotate": [10, 0] - The rotate property is used to rotate the element as argument based on the given angle. The angle can be set in terms of degrees, gradians, radians, or turns.</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>rotateX</code></td>
|
||
<td>number</td>
|
||
<td>"rotateX": [60, 0] - The rotateX property is used to rotate an element around the x-axis.</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>rotateY</code></td>
|
||
<td>number</td>
|
||
<td>"rotateY": [45, 0] - The rotateY property is used to rotate the element around a vertical axis.</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>rotateZ</code></td>
|
||
<td>number</td>
|
||
<td>"rotateZ": [10, 0] - The rotateZ property is used to rotate an element around the z-axis.</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>scale</code></td>
|
||
<td>number</td>
|
||
<td>"scale": [1.1, 1] - The Scale property is used to resize an element in a 2D plane. It scales elements horizontally and vertically.</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>scaleX</code></td>
|
||
<td>number</td>
|
||
<td>"scaleX": [1.1, 1] - The ScaleX property is used to resize an element along the x-axis in a 2D plane. It measures elements horizontally.</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>scaleY</code></td>
|
||
<td>number</td>
|
||
<td>"scaleY": [0, 1] - The scaleY property is used to scale an element along the y-axis in a 2D plane. It measures elements vertically.</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>scaleZ</code></td>
|
||
<td>number</td>
|
||
<td>"scaleZ": [1.5, 1] - The ScaleZ property is used to resize an element along the z-axis.</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>skew</code></td>
|
||
<td>number</td>
|
||
<td>"skew": [45, 0] - The skew property is used to transform an element in a 2D plane. Skewing an element means picking a point and pushing or pulling it in different directions.</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>skewX</code></td>
|
||
<td>number</td>
|
||
<td>"skewX": [45,0] - The skewX property is used to transform an element horizontally in a 2D plane.</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>skewY</code></td>
|
||
<td>number</td>
|
||
<td>"skewY": [45,0] - The skewY property is used to transform an element vertically in a 2D plane.</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>perspective</code></td>
|
||
<td>number</td>
|
||
<td>"perspective": 800 - The perspective property is used with the transform property to set the perspective effect on images.</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>opacity</code></td>
|
||
<td>number</td>
|
||
<td>"opacity": [0, 1] - The Opacity property is used to set the transparency of the image to apply a filter to the image. From 0.0 (fully transparent) to 1.0 (fully opaque).</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>duration</code></td>
|
||
<td>number</td>
|
||
<td>"duration": 600 - property sets the length of time that an animation takes to complete one cycle.</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>delay</code></td>
|
||
<td>number</td>
|
||
<td>"delay": 100 - The delay property defines when the animation will start.</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>easing</code></td>
|
||
<td></td>
|
||
<td>"easing": "easeOutQuad" - This keyword represents the interpolation starts slowly, then progressively speeds up until the end, at which point it stops abruptly It indicates.<br> more example code source link <a href="https://easings.net/" target="_blank">source link</a></td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>staggervalue</code></td>
|
||
<td>number</td>
|
||
<td>"staggervalue": 300 - When using an animation parameter inside stagger like stagger like delay the animation fails, because the parameter is not replaced.</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</br>
|
||
<p><span class="label label-danger">Note</span>You can find this demo in <strong><a href="../animations.html" target="_blank">animations.html</a></strong> page for your reference.</p>
|
||
<br>
|
||
<p class="mb-0">You can find the Animation related documentation here.</p>
|
||
<a class="button" href="https://animejs.com/documentation/" target="_blank">Read Anime Document</a>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="row">
|
||
<div class="col-md-12 docs-content-inner" id="elements-banner">
|
||
<h1>Banner</h1>
|
||
<p>Banner advertising works a lot like the ads you see traditionally. They use pictures and text to attract people to click on them, taking them quickly to a sales page. See below image and code for more information.</p>
|
||
<a href="../element-banners.html" target="_blank"><img src="images/banners.jpg" alt="Crafto" /></a>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<div class="row row-cols-1 row-cols-lg-2">
|
||
<span class="comment"><!-- start interactive banner item --></span>
|
||
<div class="col interactive-banner-style-08 md-mb-30px">
|
||
<figure class="m-0 hover-box overflow-hidden position-relative border-radius-6px">
|
||
<img src="image path" alt="" />
|
||
<figcaption class="d-flex flex-column align-items-start justify-content-center position-absolute left-0px top-0px w-100 h-100 z-index-1 p-50px sm-p-6">
|
||
<span class="ps-15px pe-15px pt-5px pb-5px text-uppercase text-dark-gray fs-13 lh-24 fw-600 border-radius-4px bg-white d-inline-block">Flat 50% off</span>
|
||
<div class="d-flex w-100 align-items-center mt-auto">
|
||
<div class="col last-paragraph-no-margin pe-15px">
|
||
<h5 class="alt-font text-white mb-0 fw-500">Bridal makeup</h5>
|
||
<p class="lh-38 text-white fw-300 ls-05px opacity-6 mb-0">Special packages for wedding.</p>
|
||
</div>
|
||
<span class="border border-2 border-color-transparent-white-very-light bg-transparent w-60px h-60px sm-w-50px sm-h-50px rounded-circle ms-auto position-relative">
|
||
<i class="bi bi-arrow-right-short absolute-middle-center icon-very-medium lh-0px text-white"></i>
|
||
</span>
|
||
</div>
|
||
<div class="position-absolute left-0px top-0px w-100 h-100 bg-gradient-gray-light-dark-transparent z-index-minus-1 opacity-9"></div>
|
||
<a href="#" class="position-absolute z-index-1 top-0px left-0px h-100 w-100"></a>
|
||
</figcaption>
|
||
</figure>
|
||
</div>
|
||
<span class="comment"><!-- end interactive banner item --></span>
|
||
<span class="comment"><!-- start interactive banner item --></span>
|
||
<div class="col interactive-banner-style-08 md-mb-30px">
|
||
<figure class="m-0 hover-box overflow-hidden position-relative border-radius-6px">
|
||
<img src="image path" alt="" />
|
||
<figcaption class="d-flex flex-column align-items-start justify-content-center position-absolute left-0px top-0px w-100 h-100 z-index-1 p-50px sm-p-6">
|
||
<span class="ps-15px pe-15px pt-5px pb-5px text-uppercase text-dark-gray fs-13 lh-24 fw-600 border-radius-4px bg-white d-inline-block">Flat 50% off</span>
|
||
<div class="d-flex w-100 align-items-center mt-auto">
|
||
<div class="col last-paragraph-no-margin pe-15px">
|
||
<h5 class="alt-font text-white mb-0 fw-500">Expert makeup</h5>
|
||
<p class="lh-38 text-white fw-300 ls-05px opacity-6 mb-0">Unlock your true beauty potential.</p>
|
||
</div>
|
||
<span class="border border-2 border-color-transparent-white-very-light bg-transparent w-60px h-60px sm-w-50px sm-h-50px rounded-circle ms-auto position-relative">
|
||
<i class="bi bi-arrow-right-short absolute-middle-center icon-very-medium lh-0px text-white"></i>
|
||
</span>
|
||
</div>
|
||
<div class="position-absolute left-0px top-0px w-100 h-100 bg-gradient-gray-light-dark-transparent z-index-minus-1 opacity-9"></div>
|
||
<a href="#" class="position-absolute z-index-1 top-0px left-0px h-100 w-100"></a>
|
||
</figcaption>
|
||
</figure>
|
||
</div>
|
||
<span class="comment"><!-- end interactive banner item --></span>
|
||
</div>
|
||
</pre>
|
||
</div>
|
||
<p><span class="label label-danger">Note</span>For demo, You can please check this in <strong><a href="../element-banners.html" target="_blank">element-banners.html</a></strong> page.</p>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="row">
|
||
<div class="col-md-12 docs-content-inner" id="elements-blockquote">
|
||
<h1>Blockquote</h1>
|
||
<p>A blockquote is a big piece of text from somewhere else, and it looks different from the rest of the writing. It stands out because of a special code your text editor uses. Wrap <code><blockquote></code> around any HTML as the quote. For straight quotes, we recommend a <code><p>...</p></code>.</p>
|
||
<a href="../element-blockquote.html" target="_blank"><img src="images/blockquote.jpg" alt="Crafto" /></a>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<div class="row justify-content-center align-items-center blockquote-style-03">
|
||
<div class="col-xl-12 col-lg-6 col-md-7">
|
||
<span class="comment"><!-- start blockquote item --></span>
|
||
<blockquote class="border-4 border-start text-dark-gray fw-500 border-color-red ps-40px">
|
||
<p class="fs-22 mb-15px">Tomorrow is the most important thing in life. It's perfect when it arrives and it puts itself in our hands. It hopes we've learned something from yesterday.</p>
|
||
<div class="fs-14 fw-700 alt-font text-red d-inline-block text-uppercase">John Wayne</div>
|
||
</blockquote>
|
||
<span class="comment"><!-- end blockquote item --></span>
|
||
</div>
|
||
</div>
|
||
</pre>
|
||
</div>
|
||
<p><span class="label label-danger">Note</span>For demo, You can please check this in <strong><a href="../element-blockquote.html" target="_blank">element-blockquote.html</a></strong> page.</p>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="row">
|
||
<div class="col-md-12 docs-content-inner" id="elements-button">
|
||
<h1>Button</h1>
|
||
<p>The button element lets you showcase buttons in different looks, sizes, and colors. It comes with various features such as custom links, icons, and cool hover effects. You can use the button classes on this <code><a></code> and <code><button></code> element.</p>
|
||
<a href="../element-buttons.html" target="_blank"><img src="images/buttons.jpg" alt="Crfato" /></a>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<span class="comment"><!-- start buttons --></span>
|
||
<a href="#" class="btn btn-base-color btn-extra-large">Button Extra Large</a>
|
||
<a href="#" class="btn btn-base-color btn-large">Button Large</a>
|
||
<a href="#" class="btn btn-base-color btn-medium">Button Medium</a>
|
||
<a href="#" class="btn btn-base-color btn-small">Button Small</a>
|
||
<a href="#" class="btn btn-base-color btn-very-small">Very Small</a>
|
||
<span class="comment"><!-- end buttons --></span>
|
||
</pre>
|
||
</div>
|
||
<p><span class="label label-danger">Note</span>For demo, You can please check this in <strong><a href="../element-buttons.html" target="_blank">element-buttons.html</a></strong> page.</p>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="row">
|
||
<div class="col-md-12 docs-content-inner" id="elements-call-to-action">
|
||
<h1>Call To Action</h1>
|
||
<p>A call to action is like a friendly prompt in a marketing message, urging people to take specific actions such as clicking a link, commenting on social media, exploring an online store, or making a purchase. In simple terms, it's a way to inspire people to act based on the message they've received.</p>
|
||
<a href="../element-call-to-action.html" target="_blank"><img src="images/call-to-action.jpg" alt="Crafto" /></a>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<div class="row justify-content-center" data-anime='{ "translateY": [0, 0], "opacity": [0,1], "duration": 1200, "delay": 0, "staggervalue": 150, "easing": "easeOutQuad" }'>
|
||
<div class="col-12" data-bottom-top="transform:scale(1, 1);" data-top-bottom="transform:scale(1.1, 1.1);">
|
||
<div class="border-radius-6px h-450px md-h-350px sm-h-400px d-flex flex-wrap align-items-center justify-content-center overflow-hidden cover-background box-shadow-quadruple-large pt-15 md-pt-7 sm-pt-11" style="background-image: url('image path')">
|
||
<div class="opacity-full-dark bg-gradient-dark-transparent"></div>
|
||
<div class="row justify-content-center align-items-center">
|
||
<div class="col-xl-6 col-lg-7 col-md-8 col-sm-9 z-index-1 text-center text-lg-start md-mb-20px">
|
||
<h3 class="text-white mb-0 fw-500 ls-minus-1px ps-10px pe-10px">We make the creative solutions for business! </h3>
|
||
</div>
|
||
<div class="col-xl-3 col-lg-4 position-relative z-index-1 text-center md-mb-20px">
|
||
<a href="#" class="btn btn-extra-large btn-white btn-box-shadow btn-rounded text-transform-none fw-600 primary-font ls-0px">Free consultation<i class="fa-solid fa-arrow-right"></i></a>
|
||
</div>
|
||
</div>
|
||
<div class="w-100 text-center position-relative mt-auto pt-20px pb-25px ps-15px pe-15px border-top border-color-transparent-white-light">
|
||
<div class="fs-14 text-uppercase text-white fw-500 ls-05px">Let's make something great work together. <a href="#" class="text-decoration-line-bottom text-white">Got a project in mind?</a></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</pre>
|
||
</div>
|
||
<p><span class="label label-danger">Note</span>For demo, You can please check this in <strong><a href="../element-call-to-action.html" target="_blank">element-call-to-action.html</a></strong> page.</p>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="row">
|
||
<div class="col-md-12 docs-content-inner" id="elements-carousel">
|
||
<h1>Carousel</h1>
|
||
<p>The carousel is a cool feature in the image gallery element. It lets you display your images in a carousel that works smoothly with touch screens. You can easily adjust the number of columns for different screen sizes and give it your own style by changing various design options.</p>
|
||
<a href="../element-carousel.html" target="_blank"><img src="images/carousel.jpg" alt="Crafto" /></a>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<div class="row align-items-center g-0">
|
||
<div class="col-12 position-relative swiper-dark-pagination magic-cursor drag-cursor" data-anime='{ "translateX": [150, 0], "opacity": [0,1], "duration": 1200, "delay": 100, "staggervalue": 150, "easing": "easeOutQuad" }'>
|
||
<div class="swiper overflow-visible" data-slider-options='{ "slidesPerView": 1, "spaceBetween": 40, "centeredSlides": "true", "loop": true, "pagination": { "el": ".swiper-pagination-bullets-01", "clickable": true, "dynamicBullets": false }, "keyboard": { "enabled": true, "onlyInViewport": true }, "breakpoints": { "992": { "slidesPerView": 1.8 }, "768": { "slidesPerView": 1.8 }, "320": { "slidesPerView": 1.4 } }, "effect": "slide" }'>
|
||
<div class="swiper-wrapper align-items-center">
|
||
<span class="comment"><!-- start carousal item --></span>
|
||
<div class="swiper-slide">
|
||
<img class="border-radius-6px" src="image path" alt="" />
|
||
</div>
|
||
<span class="comment"><!-- end carousal item --></span>
|
||
<span class="comment"><!-- start carousal item --></span>
|
||
<div class="swiper-slide">
|
||
<img class="border-radius-6px" src="image path" alt="" />
|
||
</div>
|
||
<span class="comment"><!-- end carousal item --></span>
|
||
<span class="comment"><!-- start carousal item --></span>
|
||
<div class="swiper-slide">
|
||
<img class="border-radius-6px" src="image path" alt="" />
|
||
</div>
|
||
<span class="comment"><!-- end carousal item --></span>
|
||
<span class="comment"><!-- start carousal item --></span>
|
||
<div class="swiper-slide">
|
||
<img class="border-radius-6px" src="image path" alt="" />
|
||
</div>
|
||
<span class="comment"><!-- end carousal item --></span>
|
||
<span class="comment"><!-- start carousal item --></span>
|
||
<div class="swiper-slide">
|
||
<img class="border-radius-6px" src="image path" alt="" />
|
||
</div>
|
||
<span class="comment"><!-- end carousal item --></span>
|
||
</div>
|
||
</div>
|
||
<span class="comment"><!-- start slider pagination --></span>
|
||
<div class="swiper-pagination swiper-pagination-clickable swiper-pagination-style-01 swiper-pagination-bullets-01 position-static mt-40px"></div>
|
||
<span class="comment"><!-- end slider pagination --></span>
|
||
</div>
|
||
</div>
|
||
</pre>
|
||
</div>
|
||
<p><span class="label label-danger">Note</span>For demo, You can please check this in <strong><a href="../element-carousel.html" target="_blank">element-carousel.html</a></strong> page.</p>
|
||
<br>
|
||
<p class="mb-0">You can find the Swiper related documentation here.</p>
|
||
<a class="button" href="https://swiperjs.com/get-started/" target="_blank">Read Swiper Slider Document</a>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="row">
|
||
<div class="col-md-12 docs-content-inner" id="elements-client">
|
||
<h1>Client</h1>
|
||
<p>The Crafto client element allows you to display the names and logo you've collaborated with in a stylish, modern design. It offers various options for customization, letting you tailor the showcase to your clients. It's a great way to highlight your professional connections.</p>
|
||
<a href="../element-clients.html" target="_blank"><img src="images/clients.jpg" alt="Crafto" /></a>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<div class="row row-cols-1 row-cols-md-4 row-cols-sm-2 clients-style-06" data-anime='{ "el": "childs", "scale": [0,1], "opacity": [0,1], "duration": 300, "delay": 0, "staggervalue": 200, "easing": "easeOutQuad" }'>
|
||
<span class="comment"><!-- start client item --></span>
|
||
<div class="col client-box text-center pt-5 pb-5 sm-pt-8 sm-pb-8">
|
||
<a href="#"><img src="image path" class="h-40px md-h-30px sm-h-40px" alt=""></a>
|
||
</div>
|
||
<span class="comment"><!-- end client item --></span>
|
||
<span class="comment"><!-- start client item --></span>
|
||
<div class="col client-box text-center pt-5 pb-5 sm-pt-8 sm-pb-8">
|
||
<a href="#"><img src="image path" class="h-40px md-h-30px sm-h-40px" alt="" /></a>
|
||
</div>
|
||
<span class="comment"><!-- end client item --></span>
|
||
<span class="comment"><!-- start client item --></span>
|
||
<div class="col client-box text-center pt-5 pb-5 sm-pt-8 sm-pb-8">
|
||
<a href="#"><img src="image path" class="h-40px md-h-30px sm-h-40px" alt="" /></a>
|
||
</div>
|
||
<span class="comment"><!-- end client item --></span>
|
||
<span class="comment"><!-- start client item --></span>
|
||
<div class="col client-box text-center pt-5 pb-5 sm-pt-8 sm-pb-8">
|
||
<a href="#"><img src="image path" class="h-40px md-h-30px sm-h-40px" alt="" /></a>
|
||
</div>
|
||
<span class="comment"><!-- end client item --></span>
|
||
<span class="comment"><!-- start client item --></span>
|
||
<div class="col client-box text-center pt-5 pb-5 sm-pt-8 sm-pb-8">
|
||
<a href="#"><img src="image path" class="h-40px md-h-30px sm-h-40px" alt="" /></a>
|
||
</div>
|
||
<span class="comment"><!-- end client item --></span>
|
||
<span class="comment"><!-- start client item --></span>
|
||
<div class="col client-box text-center pt-5 pb-5 sm-pt-8 sm-pb-8">
|
||
<a href="#"><img src="image path" class="h-40px md-h-30px sm-h-40px" alt="" /></a>
|
||
</div>
|
||
<span class="comment"><!-- end client item --></span>
|
||
<span class="comment"><!-- start client item --></span>
|
||
<div class="col client-box text-center pt-5 pb-5 sm-pt-8 sm-pb-8">
|
||
<a href="#"><img src="image path" class="h-40px md-h-30px sm-h-40px" alt="" /></a>
|
||
</div>
|
||
<span class="comment"><!-- end client item --></span>
|
||
<span class="comment"><!-- start client item --></span>
|
||
<div class="col client-box text-center pt-5 pb-5 sm-pt-8 sm-pb-8">
|
||
<a href="#"><img src="image path" class="h-40px md-h-30px sm-h-40px" alt="" /></a>
|
||
</div>
|
||
<span class="comment"><!-- end client item --></span>
|
||
</div>
|
||
</pre>
|
||
</div>
|
||
<p><span class="label label-danger">Note</span>For demo, You can please check this in <strong><a href="../element-clients.html" target="_blank">element-clients.html</a></strong> page.</p>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="row">
|
||
<div class="col-md-12 docs-content-inner" id="elements-column">
|
||
<h1>Column</h1>
|
||
<p>With just one set of <code>.col-lg-*</code> grid classes, you can set up a simple grid system. Initially, it's stacked on smaller screens like mobiles and tablets (extra small to small range), and then it transforms into a horizontal layout on larger desktops (medium devices). You can position grid columns within any <code>.row</code>.</p>
|
||
<a href="../element-columns.html" target="_blank"><img src="images/columns.jpg" alt="Crfato" /></a>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<span class="comment"><!-- start row --></span>
|
||
<div class="row show-grid">
|
||
<div class="col-12 col-lg-1">.col-lg-1</div>
|
||
<div class="col-12 col-lg-1">.col-lg-1</div>
|
||
<div class="col-12 col-lg-1">.col-lg-1</div>
|
||
<div class="col-12 col-lg-1">.col-lg-1</div>
|
||
<div class="col-12 col-lg-1">.col-lg-1</div>
|
||
<div class="col-12 col-lg-1">.col-lg-1</div>
|
||
<div class="col-12 col-lg-1">.col-lg-1</div>
|
||
<div class="col-12 col-lg-1">.col-lg-1</div>
|
||
<div class="col-12 col-lg-1">.col-lg-1</div>
|
||
<div class="col-12 col-lg-1">.col-lg-1</div>
|
||
<div class="col-12 col-lg-1">.col-lg-1</div>
|
||
<div class="col-12 col-lg-1">.col-lg-1</div>
|
||
</div>
|
||
|
||
<div class="row show-grid">
|
||
<div class="col-12 col-lg-2">.col-lg-2</div>
|
||
<div class="col-12 col-lg-2">.col-lg-2</div>
|
||
<div class="col-12 col-lg-2">.col-lg-2</div>
|
||
<div class="col-12 col-lg-2">.col-lg-2</div>
|
||
<div class="col-12 col-lg-2">.col-lg-2</div>
|
||
<div class="col-12 col-lg-2">.col-lg-2</div>
|
||
</div>
|
||
|
||
<div class="row show-grid">
|
||
<div class="col-12 col-lg-3">.col-lg-3</div>
|
||
<div class="col-12 col-lg-3">.col-lg-3</div>
|
||
<div class="col-12 col-lg-3">.col-lg-3</div>
|
||
<div class="col-12 col-lg-3">.col-lg-3</div>
|
||
</div>
|
||
|
||
<div class="row show-grid">
|
||
<div class="col-12 col-lg-4">.col-lg-4</div>
|
||
<div class="col-12 col-lg-4">.col-lg-4</div>
|
||
<div class="col-12 col-lg-4">.col-lg-4</div>
|
||
</div>
|
||
|
||
<div class="row show-grid">
|
||
<div class="col-12 col-lg-5">.col-lg-5</div>
|
||
<div class="col-12 col-lg-5">.col-lg-5</div>
|
||
<div class="col-12 col-lg-2">.col-lg-2</div>
|
||
</div>
|
||
|
||
<div class="row show-grid">
|
||
<div class="col-12 col-lg-6">.col-lg-6</div>
|
||
<div class="col-12 col-lg-6">.col-lg-6</div>
|
||
</div>
|
||
|
||
<div class="row show-grid">
|
||
<div class="col-12 col-lg-1">.col-lg-1</div>
|
||
<div class="col-12 col-lg-11">.col-lg-11</div>
|
||
</div>
|
||
|
||
<div class="row show-grid">
|
||
<div class="col-12 col-lg-2">.col-lg-2</div>
|
||
<div class="col-12 col-lg-10">.col-lg-10</div>
|
||
</div>
|
||
|
||
<div class="row show-grid">
|
||
<div class="col-12 col-lg-3">.col-lg-3</div>
|
||
<div class="col-12 col-lg-9">.col-lg-9</div>
|
||
</div>
|
||
|
||
<div class="row show-grid">
|
||
<div class="col-12 col-lg-4">.col-lg-4</div>
|
||
<div class="col-12 col-lg-8">.col-lg-8</div>
|
||
</div>
|
||
|
||
<div class="row show-grid">
|
||
<div class="col-12 col-lg-5">.col-lg-5</div>
|
||
<div class="col-12 col-lg-7">.col-lg-7</div>
|
||
</div>
|
||
<span class="comment"><!-- end row --></span>
|
||
</pre>
|
||
</div>
|
||
<p><span class="label label-danger">Note</span>For demo, You can please check this in <strong><a href="../element-columns.html" target="_blank">element-columns.html</a></strong> page.</p>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="row">
|
||
<div class="col-md-12 docs-content-inner" id="element-content-carousel">
|
||
<h1>Content Carousel</h1>
|
||
<p>The content carousel functionality provides the ability to create a slider featuring any text content, enhancing its visual appeal. This feature allows you to showcase multiple pieces of text in an attractive and dynamic manner, creating an engaging and visually appealing presentation.</p>
|
||
<a href="../element-content-carousel.html" target="_blank"><img src="images/content-carousel.jpg" alt="Crafto" /></a>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<div class="row">
|
||
<div class="col-md-12 position-relative feather-shadow">
|
||
<div class="outside-box-right-15 outside-box-left-15" data-anime='{ "el": "childs", "translateY": [0, 0], "opacity": [0,1], "duration": 1200, "delay": 0, "staggervalue": 150, "easing": "easeOutQuad" }'>
|
||
<div class="swiper swiper-dark-pagination swiper-line-pagination-style-01 magic-cursor" data-slider-options='{ "slidesPerView": 1, "spaceBetween": 30, "loop": true, "autoplay": { "delay": 2500, "disableOnInteraction": false }, "pagination": { "el": ".slider-four-slide-pagination-1", "clickable": true }, "keyboard": { "enabled": true, "onlyInViewport": true }, "breakpoints": { "1200": { "slidesPerView": 5 }, "992": { "slidesPerView": 3 }, "768": { "slidesPerView": 3 }, "320": { "slidesPerView": 1 } }, "effect": "slide" }'>
|
||
<div class="swiper-wrapper">
|
||
<span class="comment"><!-- start slider item --></span>
|
||
<div class="swiper-slide">
|
||
<div class="services-box-style-01 hover-box last-paragraph-no-margin">
|
||
<div class="position-relative box-image border-radius-6px">
|
||
<img class="w-100 border-radius-6px" src="image path" alt="">
|
||
<div class="box-overlay bg-dark-gray"></div>
|
||
<span class="d-flex justify-content-center align-items-center mx-auto icon-box absolute-middle-center z-index-1 w-130px h-130px rounded-circle bg-white box-shadow-extra-large text-uppercase alt-font fs-20 lh-24 fw-600 text-red ps-15px pe-15px text-center">Just $35.00</span>
|
||
</div>
|
||
<div class="pt-30px pb-30px bg-very-light-gray text-center">
|
||
<span class="d-inline-block text-dark-gray fs-19 fw-600">Chicken breast burger</span>
|
||
<div class="w-100">
|
||
<span class="d-inline-block align-middle">Capsicum</span>
|
||
<span class="d-inline-block align-middle ms-10px me-10px fs-12 opacity-5">◍</span>
|
||
<span class="d-inline-block align-middle">Parmesan</span>
|
||
<span class="d-inline-block align-middle ms-10px me-10px fs-12 opacity-5">◍</span>
|
||
<span class="d-inline-block align-middle">Paneer</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<span class="comment"><!-- end slider item --></span>
|
||
<span class="comment"><!-- start slider item --></span>
|
||
<div class="swiper-slide">
|
||
...
|
||
</div>
|
||
<span class="comment"><!-- end slider item --></span>
|
||
<span class="comment"><!-- start slider item --></span>
|
||
<div class="swiper-slide">
|
||
...
|
||
</div>
|
||
<span class="comment"><!-- end slider item --> </span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<span class="comment"><!-- start slider pagination --></span>
|
||
<span class="comment"><!--<div class="swiper-pagination slider-four-slide-pagination-1 swiper-pagination-style-2 swiper-pagination-clickable swiper-pagination-bullets"></div>--></span>
|
||
<span class="comment"><!-- end slider pagination --></span>
|
||
</div>
|
||
</div>
|
||
</pre>
|
||
</div>
|
||
<p><span class="label label-danger">Note</span>For demo, You can please check this in <strong><a href="../element-content-carousel.html" target="_blank">element-content-carousel.html</a></strong> page.</p>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="row">
|
||
<div class="col-md-12 docs-content-inner" id="elements-countdown">
|
||
<h1>Countdown</h1>
|
||
<p>Include a countdown timer on your page to highlight a special deal, announce the upcoming launch of a website, or for any other purpose you may have. For additional details, refer to the image and code provided below.</p>
|
||
<a href="../element-countdown.html" target="_blank"><img src="images/countdown.jpg" alt="Crafto" /></a>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<div class="row justify-content-center align-items-center text-center">
|
||
<div class="col-12">
|
||
<div class="countdown-style-04">
|
||
<span class="comment"><!-- start timer --></span>
|
||
<div data-enddate="2024/08/01 12:00:00" class="countdown"></div>
|
||
<span class="comment"><!-- end timer --></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</pre>
|
||
</div>
|
||
<p><span class="label label-danger">Note</span>You can add your desired end date of timer in <code>data-enddate</code> attribute. For demo, You can please check this in <strong><a href="../element-countdown.html" target="_blank">element-countdown.html</a></strong> page.</p>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="row">
|
||
<div class="col-md-12 docs-content-inner" id="elements-counter">
|
||
<h1>Counter</h1>
|
||
<p>Explore various styles of counters for your website to effectively showcase your statistics using numbers. These counters offer diverse visual representations to present your data in an engaging and informative manner. For additional information, refer to the image and code provided below.</p>
|
||
<a href="../element-counters.html" target="_blank"><img src="images/counters.jpg" alt="Crafto" /></a>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<div class="row row-cols-1 row-cols-lg-4 row-cols-sm-2 counter-style-05">
|
||
<span class="comment"><!-- start counter item --></span>
|
||
<div class="col transition-inner-all md-mb-30px">
|
||
<div class="feature-box overflow-hidden hover-box dark-hover bg-white box-shadow-quadruple-large box-shadow-quadruple-large-hover border-radius-8px p-35px lg-p-25px">
|
||
<div class="feature-box-content">
|
||
<h2 class="fw-700 text-dark-gray ls-minus-1px mb-0 counter" data-speed="2000" data-to="3353"></h2>
|
||
<span class="d-block text-dark-gray text-light-opacity fw-600 text-uppercase fs-13 ls-1px">Projects</span>
|
||
</div>
|
||
<div class="feature-box-overlay bg-gradient-fast-blue-purple"></div>
|
||
</div>
|
||
</div>
|
||
<span class="comment"><!-- end counter item --></span>
|
||
<span class="comment"><!-- start counter item --></span>
|
||
<div class="col transition-inner-all md-mb-30px">
|
||
<div class="feature-box overflow-hidden hover-box dark-hover bg-white box-shadow-quadruple-large box-shadow-quadruple-large-hover border-radius-8px p-35px lg-p-25px">
|
||
<div class="feature-box-content">
|
||
<h2 class="alt-font fw-700 text-dark-gray ls-minus-1px mb-0 counter" data-speed="2000" data-to="2264"></h2>
|
||
<span class="d-block text-dark-gray text-light-opacity fw-600 text-uppercase fs-13 ls-1px">Clients</span>
|
||
</div>
|
||
<div class="feature-box-overlay bg-gradient-fast-blue-purple"></div>
|
||
</div>
|
||
</div>
|
||
<span class="comment"><!-- end counter item --></span>
|
||
</div>
|
||
</pre>
|
||
</div>
|
||
<p><span class="label label-danger">Note</span>You simply need to add your desired counter value in <code>data-to</code> attribute and the counting speed in <code>data-speed</code> attribute. For demo, You can please check this in <strong><a href="../element-counters.html" target="_blank">element-counters.html</a></strong> page.</p>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="row">
|
||
<div class="col-md-12 docs-content-inner" id="elements-divider">
|
||
<h1>Divider</h1>
|
||
<p>Dividers are excellent for splitting lengthy posts or sections into smaller parts, emphasizing important announcements or promotions, and distinctly separating various sections on a page.</p>
|
||
<a href="../element-dividers.html" target="_blank"><img src="images/dividers.jpg" alt="Crfato" /></a>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<div class="row row-cols-1 justify-content-center">
|
||
<div class="col-lg-7 text-center divider-style-01 mb-7 sm-mb-50px">
|
||
<div class="d-flex justify-content-center">
|
||
<span class="comment"><!-- start separator line --></span>
|
||
<div class="divider-shadow d-flex align-items-center w-100">
|
||
<span class="d-flex flex-column justify-content-center bg-white w-70px h-70px box-shadow rounded-circle"><i class="feather icon-feather-globe icon-extra-medium text-dark-gray"></i></span>
|
||
</div>
|
||
<span class="comment"><!-- end separator line --></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="row row-cols-1 justify-content-center mb-7 sm-mb-50px">
|
||
<div class="col-lg-5 text-center divider-style-01">
|
||
<div class="d-flex justify-content-center">
|
||
<span class="comment"><!-- start separator line --></span>
|
||
<div class="divider-border d-flex align-items-center w-100">
|
||
<span class="d-flex flex-column justify-content-center w-65px h-65px border border-color-extra-medium-gray rounded-circle ms-20px me-20px"><i class="feather icon-feather-arrow-down icon-extra-medium text-dark-gray"></i></span>
|
||
</div>
|
||
<span class="comment"><!-- end separator line --></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="row row-cols-1 justify-content-center">
|
||
<div class="col-lg-7 text-center divider-style-01 mb-7 sm-mb-50px">
|
||
<div class="d-flex justify-content-center">
|
||
<span class="comment"><!-- start separator line --></span>
|
||
<div class="divider-border d-flex align-items-center w-100">
|
||
<span class="d-flex flex-column justify-content-center w-90px h-90px box-shadow-extra-large rounded-circle"><i class="feather icon-feather-twitter icon-medium text-dark-gray"></i></span>
|
||
</div>
|
||
<span class="comment"><!-- end separator line --></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="row row-cols-1 justify-content-center">
|
||
<div class="col-lg-4 text-center divider-style-01">
|
||
<div class="d-flex justify-content-center">
|
||
<span class="comment"><!-- start separator line --></span>
|
||
<div class="divider-border d-flex align-items-center w-100">
|
||
<span class="ps-20px pe-20px"><i class="feather icon-feather-disc icon-small text-red"></i></span>
|
||
</div>
|
||
<span class="comment"><!-- end separator line --></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</pre>
|
||
</div>
|
||
<p><span class="label label-danger">Note</span>For demo, You can please check this in <strong><a href="../element-dividers.html" target="_blank">element-dividers.html</a></strong> page.</p>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="row">
|
||
<div class="col-md-12 docs-content-inner" id="elements-dropcaps">
|
||
<h1>Dropcaps</h1>
|
||
<p>Dropcaps are stylish ways to kick off a paragraph or essay. They grab attention by visually enhancing the first sentence. Placed at the beginning of paragraphs, they introduce the topic creatively, making the text more engaging and easier to read with a touch of artistic typography.</p>
|
||
<a href="../element-dropcaps.html" target="_blank"><img src="images/dropcaps.jpg" alt="Crfato" /></a>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<span class="comment"><!-- start dropcaps item --></span>
|
||
<div class="row justify-content-center align-items-center">
|
||
<div class="col-12 col-lg-5 col-md-6 dropcap-style-02 last-paragraph-no-margin sm-mb-30px">
|
||
<p><span class="first-letter first-letter-block text-white bg-majorelle-blue">M</span>Lorem ipsum is simply dummy text of the printing and typesetting industry. It has survived not only five centuries. Simply dummy text of the printing and typesetting industry. Lorem ipsum dolor amet consectetur adipiscing elit sed do eiusmod tempor labore dolore magna aliqua.</p>
|
||
<p>It has survived only five centuries. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
|
||
</div>
|
||
</div>
|
||
<span class="comment"><!-- end dropcaps style --></span>
|
||
</pre>
|
||
</div>
|
||
<p><span class="label label-danger">Note</span>For demo, You can please check this in <strong><a href="../element-dropcaps.html" target="_blank">element-dropcaps.html</a></strong> page.</p>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="row">
|
||
<div class="col-md-12 docs-content-inner" id="elements-event">
|
||
<h1>Event</h1>
|
||
<p>An event is a visual element in a graphical user interface, frequently employed on websites to present information interactively. This element serves as a point of interaction for users, allowing them to engage with and respond to displayed content.</p>
|
||
<a href="../element-event.html" target="_blank"><img src="images/event.jpg" alt="Crfato" /></a>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<span class="comment"><!-- start section --></span>
|
||
<section class="p-0 bg-black border-bottom border-color-transparent-white-very-light background-position-left-bottom background-no-repeat overflow-hidden" style="background-image: url('image path')">
|
||
<div class="container-fluid">
|
||
<div class="row justify-content-center" data-anime='{ "el": "childs", "translateX": [50, 0], "opacity": [0,1], "duration": 1200, "delay": 0, "staggervalue": 150, "easing": "easeOutQuad" }'>
|
||
<span class="comment"><!-- start features box item --></span>
|
||
<div class="col-xl-3 p-0">
|
||
<div class="ps-20 pe-20 pt-25 pb-25 xxl-ps-15 xxl-pe-15 lg-p-7 sm-p-40px overflow-hidden h-100 text-center text-xl-start border-top border-end border-color-transparent-white-very-light">
|
||
<h2 class="alt-font fw-500 text-white ls-minus-2px"><span class="w-20px h-4px d-inline-block bg-red me-10px"></span>Event schedule</h2>
|
||
<a href="#" class="btn btn-large btn-dark-gray btn-hover-animation btn-round-edge btn-box-shadow align-self-center">
|
||
<span>
|
||
<span class="btn-text">Download schedule</span>
|
||
<span class="btn-icon"><i class="fa-solid fa-arrow-right"></i></span>
|
||
</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<span class="comment"><!-- end features box item --></span>
|
||
<span class="comment"><!-- start features box item --></span>
|
||
<div class="col-xl-3 col-md-4 event-style-01 p-0">
|
||
<div class="bg-black hover-box will-change-inherit dark-hover feature-box ps-19 pe-19 pt-22 pb-27 md-p-8 md-pb-25 sm-pb-50px overflow-hidden h-100 text-center text-md-start border-top border-end border-color-transparent-white-very-light">
|
||
<div class="feature-box-content w-100 lg-mb-5 last-paragraph-no-margin">
|
||
<div class="text-white fs-22 alt-font fw-500 mb-20px">Friday, Dec 24</div>
|
||
<p class="text-white opacity-7">Psychologist - John parker<br>10:00 AM to 12:30 PM</p>
|
||
<div class="divider-style-03 mb-20px divider-style-03-01 border-color-transparent-white-very-light"></div>
|
||
<p class="text-white opacity-7">Sociology - Herman miller<br>02:00 PM to 04:30 PM</p>
|
||
<div class="divider-style-03 mb-20px divider-style-03-01 border-color-transparent-white-very-light"></div>
|
||
<p class="text-white opacity-7">Geologist - Jeremy dupont<br>05:00 PM to 07:30 PM</p>
|
||
<span class="number fs-120 ls-minus-5px fw-500 text-outline text-outline-width-2px text-outline-color-red opacity-7 alt-font position-absolute bottom-minus-50px sm-bottom-minus-40px left-0px ps-20 sm-ps-0 sm-right-0px sm-left-0px">01</span>
|
||
</div>
|
||
<div class="feature-box-overlay bg-red"></div>
|
||
</div>
|
||
</div>
|
||
<span class="comment"><!-- end features box item --></span>
|
||
<span class="comment"><!-- start features box item --></span>
|
||
<div class="col-xl-3 col-md-4 event-style-01 p-0">
|
||
<div class="bg-black hover-box will-change-inherit dark-hover feature-box ps-19 pe-19 pt-22 pb-27 md-p-8 md-pb-25 sm-pb-50px overflow-hidden h-100 text-center text-md-start border-top border-end border-color-transparent-white-very-light">
|
||
<div class="feature-box-content w-100 lg-mb-5 last-paragraph-no-margin">
|
||
<div class="text-white fs-22 alt-font fw-500 mb-20px">Saturday, Dec 25</div>
|
||
<p class="text-white opacity-7">Economy - Michal ruheen<br>10:00 AM to 12:30 PM</p>
|
||
<div class="divider-style-03 mb-20px divider-style-03-01 border-color-transparent-white-very-light"></div>
|
||
<p class="text-white opacity-7">Engineer - Jessica dover<br>02:00 PM to 04:30 PM</p>
|
||
<div class="divider-style-03 mb-20px divider-style-03-01 border-color-transparent-white-very-light"></div>
|
||
<p class="text-white opacity-7">Psychologist - John parker<br>05:00 PM to 07:30 PM</p>
|
||
<span class="number fs-120 ls-minus-5px fw-500 text-outline text-outline-width-2px text-outline-color-red opacity-7 alt-font position-absolute bottom-minus-50px sm-bottom-minus-40px left-0px ps-20 sm-ps-0 sm-right-0px sm-left-0px">02</span>
|
||
</div>
|
||
<div class="feature-box-overlay bg-red"></div>
|
||
</div>
|
||
</div>
|
||
<span class="comment"><!-- end features box item --></span>
|
||
<span class="comment"><!-- start features box item --></span>
|
||
<div class="col-xl-3 col-md-4 event-style-01 p-0">
|
||
<div class="bg-black hover-box will-change-inherit dark-hover feature-box ps-19 pe-19 pt-22 pb-27 md-p-8 md-pb-25 sm-pb-50px overflow-hidden h-100 text-center text-md-start border-top border-end border-color-transparent-white-very-light">
|
||
<div class="feature-box-content w-100 lg-mb-5 last-paragraph-no-margin">
|
||
<div class="text-white fs-22 alt-font fw-500 mb-20px">Sunday, Dec 26</div>
|
||
<p class="text-white opacity-7">Biologist- Saleena fountain<br>10:00 AM to 12:30 PM</p>
|
||
<div class="divider-style-03 mb-20px divider-style-03-01 border-color-transparent-white-very-light"></div>
|
||
<p class="text-white opacity-7">Secretary- Paulina morris<br>02:00 PM to 04:30 PM</p>
|
||
<div class="divider-style-03 mb-20px divider-style-03-01 border-color-transparent-white-very-light"></div>
|
||
<p class="text-white opacity-7">Politician - Wendaya royin<br>05:00 PM to 07:30 PM</p>
|
||
<span class="number fs-120 ls-minus-5px fw-500 text-outline text-outline-width-2px text-outline-color-red opacity-7 alt-font position-absolute bottom-minus-50px sm-bottom-minus-40px left-0px ps-20 sm-ps-0 sm-right-0px sm-left-0px">03</span>
|
||
</div>
|
||
<div class="feature-box-overlay bg-red"></div>
|
||
</div>
|
||
</div>
|
||
<span class="comment"><!-- end features box item --></span>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<span class="comment"><!-- end section --></span>
|
||
</pre>
|
||
</div>
|
||
<p><span class="label label-danger">Note</span>For demo, You can please check this in <strong><a href="../element-event.html" target="_blank">element-event.html</a></strong> page.</p>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="row">
|
||
<div class="col-md-12 docs-content-inner" id="elements-fancy-heading">
|
||
<h1>Fancy Heading</h1>
|
||
<p>The fancy heading shortcode in the Crafto theme is a handy tool you can use. It lets you showcase eye-catching titles with various stylish designs, grabbing your viewers' attention right from the start. Check out the image and code below for additional details.</p>
|
||
<a href="../element-fancy-heading.html" target="_blank"><img src="images/fancy-heading.jpg" alt="Crafto" /></a>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<span class="comment"><!-- start section --></span>
|
||
<section class="position-relative overflow-hidden">
|
||
<div id="particles-style-01" class="h-100 position-absolute left-0px top-0 w-100" data-particle="true" data-particle-options='{"particles": {"number": {"value": 12,"density": {"enable": true,"value_area": 2000}},"color": {"value": ["#0036ff", "#ff00cb", "#ff0274", "#f96436", "#ee7600"]},"shape": {"type": "circle","stroke":{"width":0,"color":"#000000"}},"opacity": {"value": 0.8,"random": false,"anim": {"enable": false,"speed": 1,"sync": false}},"size": {"value": 8,"random": true,"anim": {"enable": false,"sync": true}},"line_linked":{"enable":false,"distance":0,"color":"#ffffff","opacity":0.4,"width":1},"move": {"enable": true,"speed":1,"direction": "right","random": false,"straight": false}},"interactivity": {"detect_on": "canvas","events": {"onhover": {"enable": false,"mode": "repulse"},"onclick": {"enable": false,"mode": "push"},"resize": true}},"retina_detect": false}'></div>
|
||
<div class="container position-relative one-half-screen sm-h-350px">
|
||
<div class="row justify-content-center align-items-center h-100">
|
||
<div class="col-xxl-11 col-xl-12">
|
||
<h4 class="fs-80 xs-fs-60 fw-700 ls-minus-3px text-dark-gray mb-0 lh-0" data-anime='{ "translateX": [50, 0], "opacity": [0,1], "duration": 800, "delay": 200, "staggervalue": 300, "easing": "easeOutQuad" }'>Everywhere</h4>
|
||
<h2 class="fs-225 lg-fs-180 md-fs-140 xs-fs-100 lh-normal ls-minus-5px fw-700 text-gradient-blue-magenta-orange mb-0 lg-pt-30px xs-pt-10px lg-pb-30px" data-anime='{ "translateX": [-80, 0], "opacity": [0,1], "duration": 800, "delay": 200, "staggervalue": 300, "easing": "easeOutQuad" }'>gradients.</h2>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="position-absolute left-0px top-0px h-100 w-130px d-none d-xl-inline-block" data-anime='{ "translateX": [-30, 0], "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 300, "easing": "easeOutQuad" }'>
|
||
<div class="vertical-title-center align-items-center justify-content-center">
|
||
<div class="title fs-18 text-dark-gray fw-600">Liquid gradient colors</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<span class="comment"><!-- end section --></span>
|
||
</pre>
|
||
</div>
|
||
<h2>Options</h2>
|
||
<h3>Animate Every Character</h3>
|
||
<p>Represents animate every single character. See below code for more information.</p>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<span data-fancy-text='{ "opacity": [0, 1], "rotate": [10, 0], "translateX": [-30, 0], "translateY": [30, 0], "delay": 100, "speed": 50, "string": ["Your text goes here..."], "easing": "easeOutQuad" }'></span>
|
||
</pre>
|
||
</div>
|
||
<h3>Animate Every Word</h3>
|
||
<p>Represents animate every word. See below code for more information.</p>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<span data-anime='{ "el": "words", "rotateX": [50, 0], "perspective": [1000,1200], "scale": [1.1, 1], "translateY": [30, 0], "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 300, "easing": "easeOutQuad" }'>Your text goes here...</span>
|
||
</pre>
|
||
</div>
|
||
<h3>Animate Every Line</h3>
|
||
<p>Represents animate every line. See below code for more information.</p>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<span class="fs-80 lg-fs-75 sm-fs-60 ls-minus-2px fw-600 text-dark-gray" data-anime='{ "el": "lines", "translateY": [30, 0], "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 300, "easing": "easeOutQuad" }'>Your text goes here...</span>
|
||
</pre>
|
||
</div>
|
||
<h3>Rotating words</h3>
|
||
<p>Represents animate rotating every word and character all types effects.</p>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<span class="fancy-text-style-4">
|
||
<span class="fs-130 xl-fs-110 lg-fs-90 md-fs-80 xs-fs-60 fs-500 mb-0 text-dark-gray fw-300 ls-minus-4px">Great design made <span class="fw-600" data-fancy-text='{ "effect": "wave", "direction": "up", "speed": 50, "string": ["affordable", "simple", "creative"], "duration": 2500 }'></span> for you.</span>
|
||
</span>
|
||
</pre>
|
||
</div>
|
||
<h3>Properties</h3>
|
||
<p>Any CSS properties can be animated.</p>
|
||
<div class="panel panel-default params-table grid-table">
|
||
<table class="table">
|
||
<tbody>
|
||
<tr>
|
||
<th>Properties</th>
|
||
<th>Value</th>
|
||
<th>Description</th>
|
||
</tr>
|
||
<tr>
|
||
<td><code>translateX</code></td>
|
||
<td>number</td>
|
||
<td>"translateX": [-30, 0] - The translateX property is used to translate the element along the horizontal axis. </td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>translateY</code></td>
|
||
<td>number</td>
|
||
<td>"translateY": [30, 0] - The translateY property is used to reposition an element along the vertical axis.</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>translateZ</code></td>
|
||
<td>number</td>
|
||
<td>"translateZ": [30, 0] - The translateZ property This property applies to translating an element along the z-axis in 3D space.</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>rotate</code></td>
|
||
<td>number</td>
|
||
<td>"rotate": [10, 0] - The rotate property is used to rotate the element as argument based on the given angle. The angle can be set in terms of degrees, gradians, radians, or turns.</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>rotateX</code></td>
|
||
<td>number</td>
|
||
<td>"rotateX": [60, 0] - The rotateX property is used to rotate an element around the x-axis.</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>rotateY</code></td>
|
||
<td>number</td>
|
||
<td>"rotateY": [45, 0] - The rotateY property is used to rotate the element around a vertical axis.</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>rotateZ</code></td>
|
||
<td>number</td>
|
||
<td>"rotateZ": [10, 0] - The rotateZ property is used to rotate an element around the z-axis.</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>scale</code></td>
|
||
<td>number</td>
|
||
<td>"scale": [1.1, 1] - The Scale property is used to resize an element in a 2D plane. It scales elements horizontally and vertically.</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>scaleX</code></td>
|
||
<td>number</td>
|
||
<td>"scaleX": [1.1, 1] - The ScaleX property is used to resize an element along the x-axis in a 2D plane. It measures elements horizontally.</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>scaleY</code></td>
|
||
<td>number</td>
|
||
<td>"scaleY": [0, 1] - The scaleY property is used to scale an element along the y-axis in a 2D plane. It measures elements vertically.</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>scaleZ</code></td>
|
||
<td>number</td>
|
||
<td>"scaleZ": [1.5, 1] - The ScaleZ property is used to resize an element along the z-axis.</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>skew</code></td>
|
||
<td>number</td>
|
||
<td>"skew": [45, 0] - The skew property is used to transform an element in a 2D plane. Skewing an element means picking a point and pushing or pulling it in different directions.</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>skewX</code></td>
|
||
<td>number</td>
|
||
<td>"skewX": [45,0] - The skewX property is used to transform an element horizontally in a 2D plane.</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>skewY</code></td>
|
||
<td>number</td>
|
||
<td>"skewY": [45,0] - The skewY property is used to transform an element vertically in a 2D plane.</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>perspective</code></td>
|
||
<td>number</td>
|
||
<td>"perspective": 800 - The perspective property is used with the transform property to set the perspective effect on images.</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>opacity</code></td>
|
||
<td>number</td>
|
||
<td>"opacity": [0, 1] - The Opacity property is used to set the transparency of the image to apply a filter to the image. From 0.0 (fully transparent) to 1.0 (fully opaque).</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>duration</code></td>
|
||
<td>number</td>
|
||
<td>"duration": 600 - property sets the length of time that an animation takes to complete one cycle.</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>delay</code></td>
|
||
<td>number</td>
|
||
<td>"delay": 100 - The delay property defines when the animation will start.</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>easing</code></td>
|
||
<td></td>
|
||
<td>"easing": "easeOutQuad" - This keyword represents the interpolation starts slowly, then progressively speeds up until the end, at which point it stops abruptly It indicates.<br> more example code source link <a href="https://easings.net/" target="_blank">source link</a></td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>staggervalue</code></td>
|
||
<td>number</td>
|
||
<td>"staggervalue": 300 - When using an animation parameter inside stagger like stagger like delay the animation fails, because the parameter is not replaced.</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>speed</code></td>
|
||
<td>number</td>
|
||
<td>"speed": 50 - Duration of transition between element (in ms).</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>string</code></td>
|
||
<td>string</td>
|
||
<td>A string (or a text string) is a series of characters like "Your text goes here..."<br>
|
||
Strings are written with quotes. You can use single or double quotes.represents sequence of characters e.g. "hello".
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>el</code></td>
|
||
<td>string</td>
|
||
<td>
|
||
"el": "words" - Defines a el translation, using only the words animated text dealy.<br>
|
||
"el": "lines" - Defines a el translation, using every line animated text dealy.
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>effects</code></td>
|
||
<td>string</td>
|
||
<td>wave</br>fade</br>rotate</br>slide</br>jump</br>zoom</br>rubber-band</br>curve</br>smooth-wave</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>direction</code></td>
|
||
<td>string</td>
|
||
<td>up</br>down</br>left</br>right</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<p><span class="label label-danger">Note</span>For demo, You can please check this in <strong><a href="../element-fancy-heading.html" target="_blank">element-fancy-heading.html</a></strong> page.</p>
|
||
<br>
|
||
<p class="mb-0">You can find the Fancy heading documentation here.</p>
|
||
<a class="button" href="https://animejs.com/documentation/#cssProperties" target="_blank">Read Anime Document</a>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="row">
|
||
<div class="col-md-12 docs-content-inner" id="elements-fancy-images">
|
||
<h1>Fancy Images</h1>
|
||
<p>The fancy image element in a Crafto adds a touch of style and flair to your website's visual content. This feature allows you to present images in a captivating and attractive manner, making your website more visually appealing.</p>
|
||
<h2 class="mb-0">Cascading</h2>
|
||
<a href="../element-fancy-images.html" target="_blank"><img src="images/cascading.jpg" alt="Crafto" /></a>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<div class="w-100" data-anime='{ "effect": "slide", "direction": "lr", "color": "#2d663c", "duration": 1000, "delay": 0 }'>
|
||
<img src="image path" alt="" class="w-100 liquid-parallax" data-parallax-liquid="true" data-parallax-position="top" data-parallax-scale="1.1" data-parallax-scale-fraction="0.005">
|
||
</div>
|
||
</pre>
|
||
</div>
|
||
<h3>Options</h3>
|
||
<ul>
|
||
<li><code>data-parallax-liquid="true"</code> - Here's the code to perform an image smooth scroll.</li>
|
||
<li><code>data-parallax-position="top"</code> - This is analogous to the <code>background-position</code> CSS property. Specify coordinates as top, bottom, right, left, center, The parallax image will be positioned as close to these values as possible while still covering the target element.</li>
|
||
<li><code>data-parallax-scale="1.1"</code> - The higher the scale is set, the more visible the parallax effect will be. In return, the image will lose in quality. To reduce the lossless effect, if the scale is set at 1.5 and your image is 500px width, do the simple math 500 * 1.5 = 750. So you can choose a 750px image to replace your 500px one.</li>
|
||
<li><code>data-parallax-scale-fraction="0.005"</code> - If the scale factor is a fraction, the shape will be smaller. This is called reduction. Therefore, a 1/2 scaling factor means that the new shape is half of the original shape.</li>
|
||
</ul>
|
||
</br>
|
||
<p><span class="label label-danger">Note</span>For demo, You can please check this in <strong><a href="../element-fancy-images.html" target="_blank">element-fancy-images.html</a></strong> page.</p>
|
||
<h2 class="mb-0">Grouped Fancy Images</h2>
|
||
<a href="../element-fancy-images.html" target="_blank"><img src="images/fancy-images.jpg" alt="Crafto" /></a>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<div class="page-content position-relative">
|
||
<span class="comment"><!-- start section --></span>
|
||
<section class="big-section" data-background="#ffffff">
|
||
<div class="container">
|
||
<div class="row align-items-center justify-content-center mb-8 sm-mb-40px">
|
||
<div class="col-md-12">
|
||
<div class="text-dark-gray fs-100 md-fs-85 sm-fs-70 fw-500 ls-minus-4px xs-ms-0 fancy-text-style-4">Easily manage <span class="fw-700" data-fancy-text='{ "effect": "rubber-band", "direction": "left", "string": ["positioning", "animations", "directions", "overlaping", "shadows"], "speed": 100, "duration": 3000 }'></span></div>
|
||
</div>
|
||
</div>
|
||
<div class="row align-items-center justify-content-center">
|
||
<div class="col-lg-9 position-relative">
|
||
<div class="row align-items-center position-relative md-mb-10 sm-mb-0 g-0" data-anime='{ "opacity": [0,1], "duration": 600, "delay":0, "staggervalue": 300, "easing": "easeOutQuad" }'>
|
||
<div class="col-md-5 sm-mb-30px" data-shadow-animation="true" data-animation-delay="100" data-bottom-top="transform: translateY(50px)" data-top-bottom="transform: translateY(-50px)">
|
||
<img src="image path" alt="" />
|
||
</div>
|
||
<div class="col-md-6 offset-md-1 sm-mb-30px text-end" data-shadow-animation="true" data-animation-delay="200" data-bottom-top="transform: translateY(-30px)" data-top-bottom="transform: translateY(30px)">
|
||
<img src="image path" alt="" class="box-shadow-quadruple-large w-100" />
|
||
</div>
|
||
<div class="w-50 sm-w-100 overflow-hidden position-absolute sm-position-relative left-150px bottom-minus-150px sm-bottom-0px sm-left-0px" data-shadow-animation="true" data-animation-delay="250" data-bottom-top="transform: translateY(20px)" data-top-bottom="transform: translateY(-20px)">
|
||
<img src="image path" alt="" class="box-shadow-quadruple-large w-100" />
|
||
</div>
|
||
</div>
|
||
<div class="position-absolute right-minus-100px top-50px z-index-9 md-w-200px d-none d-lg-block" data-anime='{ "translateY": [0, 0], "scale": [0.7, 1], "opacity": [0,1], "duration": 800, "delay": 1200, "staggervalue": 300, "easing": "easeOutQuad" }'>
|
||
<img src="image path" class="animation-rotation" alt="">
|
||
<div class="absolute-middle-center w-100 z-index-minus-1"><img src="image path" alt=""></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<span class="comment"><!-- end section --></span>
|
||
</div>
|
||
</pre>
|
||
</div>
|
||
<h3>Options</h3>
|
||
<ul>
|
||
<li><code>data-shadow-animation="true"</code> - Here's the code to perform add image shadow.</li>
|
||
<li><code>data-animation-delay="200"</code> - Defines the delay in milliseconds of the animation.</li>
|
||
</ul>
|
||
</br>
|
||
<p><span class="label label-danger">Note</span>For demo, You can please check this in <strong><a href="../element-fancy-images.html" target="_blank">element-fancy-images.html</a></strong> page.</p>
|
||
<h2 class="mb-0">Reveal Effects</h2>
|
||
<p>Start page on load Reveal Effects are image sliding from left side and right side from top to bottom and page scroll in time animation is smooth scrolling slowly from top to bottom each image is animated.</p>
|
||
<a href="../element-fancy-images.html" target="_blank"><img src="images/reveal-effects.jpg" alt="Crafto" /></a>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<div class="row row-cols-1 row-cols-lg-4 row-cols-sm-2">
|
||
<div class="col lg-mb-30px" data-bottom-top="transform: translateY(30px)" data-top-bottom="transform: translateY(-30px)">
|
||
<div class="overflow-hidden position-relative">
|
||
<div class="w-100 border-radius-8px overflow-hidden" data-anime='{ "effect": "slide", "direction": "lr", "color": "#507590", "duration": 1000, "delay": 500 }'>
|
||
<img src="image path" class="w-100" alt=""/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</pre>
|
||
</div>
|
||
<h3>Options</h3>
|
||
<ul>
|
||
<li><code>effects</code> - Different types of animation are valued here. <code>wave</code>, <code>fade</code>, <code>rotate</code>, <code>slide</code>, <code>jump</code>, <code>zoom</code>,<code>rubber</code>, <code>band</code>, <code>curve</code>, <code>smooth-wave</code>.</li>
|
||
<li><code>direction</code> - Property defines whether an animation should be played forwards, backwards or in alternate cycles. Here are the values of different <code>lr</code>, <code>tb</code>, <code>rl</code>, <code>bt</code>.
|
||
</li>
|
||
<li><code>color</code> - This property use to how to color change in images overlay in animation. You can use hexa code of any color to change the color. like example <code>"color": "#507590"</code>.</li>
|
||
<li><code>duration</code> - property sets the length of time that an animation takes to complete one cycle. like example <code>"duration": 600</code>.</li>
|
||
<li><code>delay</code> - The delay property defines when the animation will start. like example <code>"delay": 500</code>.</li>
|
||
</ul>
|
||
<p class="pt-30px"><span class="label label-danger">Note</span>For demo, You can please check this in <strong><a href="../element-fancy-images.html" target="_blank">element-fancy-images.html</a></strong> page.</p>
|
||
<h2 class="mb-0">Tilt Effects</h2>
|
||
<a href="../element-fancy-images.html" target="_blank"><img src="images/tilt-effects.jpg" alt="Crafto" /></a>
|
||
<p> Tilt Effect on cards when users hover over them offers several advantages. This effect adds an engaging and interactive element to your website, making it visually attractive and memorable. It can effectively capture users' attention.</p>
|
||
<h3>Options</h3>
|
||
<ul>
|
||
<li><code>data-atropos-offset</code>- controls element offset/translate in percentage.</li>
|
||
<li><code>data-atropos-offset="5"</code>means that element will move <code>5%</code> of its size on max rotate angles.</li>
|
||
<li><code>data-atropos-offset="-5"</code>means that element will move <code>-5%</code> of its size on max rotate angles.</li>
|
||
</ul>
|
||
<p class="pt-30px"><span class="label label-danger">Note</span>For demo, You can please check this in <strong><a href="../element-fancy-images.html" target="_blank">element-fancy-images.html</a></strong> page.</p>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="row">
|
||
<div class="col-md-12 docs-content-inner" id="elements-fancy-text-box">
|
||
<h1>Fancy Text Box</h1>
|
||
<p>The fancy text Box add a touch of creativity and style to textual content on your website. This feature allows you to present text in an eye-catching and visually appealing manner, breaking away from the standard format and making your content more engaging.</p>
|
||
<a href="../element-fancy-text-box.html" target="_blank"><img src="images/fancy-text-box.jpg" alt="Crfato" /></a>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<div class="row justify-content-center" data-anime='{ "el": "childs", "perspective": [1200,1200], "translateY": [30, 0], "scale": [1.05, 1], "rotateX": [30, 0], "opacity": [0,1], "duration": 800, "delay": 0, "staggervalue": 300, "easing": "easeOutQuad" }'>
|
||
<span class="comment"><!-- start fancy text box item --></span>
|
||
<div class="col-lg-6 col-md-8 fancy-text-box-style-02 mb-30px">
|
||
<div class="feature-box feature-box-left-icon-middle h-100 bg-white hover-box dark-hover border-radius-6px ps-4 pe-4 pt-9 pb-9 box-shadow-extra-large box-shadow-extra-large-hover overflow-hidden">
|
||
<div class="feature-box-icon ms-40px me-40px lg-ms-15px lg-me-15px">
|
||
<h2 class="text-dark-gray fw-700 ls-minus-1px mb-0">2010</h2>
|
||
</div>
|
||
<div class="feature-box-content border-start border-color-extra-medium-gray ps-40px pe-40px lg-ps-15px lg-pe-15px last-paragraph-no-margin">
|
||
<span class="text-dark-gray fw-600 fs-20 xs-fs-18">Business founded</span>
|
||
<p class="text-light-opacity">Lorem ipsum dolor amet</p>
|
||
</div>
|
||
<div class="feature-box-overlay bg-majorelle-blue"></div>
|
||
</div>
|
||
</div>
|
||
<span class="comment"><!-- end fancy text box item --></span>
|
||
<span class="comment"><!-- start fancy text box item --></span>
|
||
<div class="col-lg-6 col-md-8 fancy-text-box-style-02 mb-30px">
|
||
<div class="feature-box feature-box-left-icon-middle h-100 bg-white hover-box dark-hover border-radius-6px ps-4 pe-4 pt-9 pb-9 box-shadow-extra-large box-shadow-extra-large-hover overflow-hidden">
|
||
<div class="feature-box-icon ms-40px me-40px lg-ms-15px lg-me-15px">
|
||
<h2 class="text-dark-gray fw-700 ls-minus-1px mb-0">2012</h2>
|
||
</div>
|
||
<div class="feature-box-content border-start border-color-extra-medium-gray ps-40px pe-40px lg-ps-15px lg-pe-15px last-paragraph-no-margin">
|
||
<span class="text-dark-gray fw-600 fs-20 xs-fs-18">Build new office</span>
|
||
<p class="text-light-opacity">Lorem ipsum dolor amet</p>
|
||
</div>
|
||
<div class="feature-box-overlay bg-majorelle-blue"></div>
|
||
</div>
|
||
</div>
|
||
<span class="comment"><!-- end fancy text box item --></span>
|
||
<span class="comment"><!-- start fancy text box item --></span>
|
||
<div class="col-lg-6 col-md-8 fancy-text-box-style-02 md-mb-30px">
|
||
<div class="feature-box feature-box-left-icon-middle h-100 bg-white hover-box dark-hover border-radius-6px ps-4 pe-4 pt-9 pb-9 box-shadow-extra-large box-shadow-extra-large-hover overflow-hidden">
|
||
<div class="feature-box-icon ms-40px me-40px lg-ms-15px lg-me-15px">
|
||
<h2 class="text-dark-gray fw-700 ls-minus-1px mb-0">2014</h2>
|
||
</div>
|
||
<div class="feature-box-content border-start border-color-extra-medium-gray ps-40px pe-40px lg-ps-15px lg-pe-15px last-paragraph-no-margin">
|
||
<span class="text-dark-gray fw-600 fs-20 xs-fs-18">Relocates headquarter</span>
|
||
<p class="text-light-opacity">Lorem ipsum dolor amet</p>
|
||
</div>
|
||
<div class="feature-box-overlay bg-majorelle-blue"></div>
|
||
</div>
|
||
</div>
|
||
<span class="comment"><!-- end fancy text box item --></span>
|
||
<span class="comment"><!-- start fancy text box item --></span>
|
||
<div class="col-lg-6 col-md-8 fancy-text-box-style-02">
|
||
<div class="feature-box feature-box-left-icon-middle h-100 bg-white hover-box dark-hover border-radius-6px ps-4 pe-4 pt-9 pb-9 box-shadow-extra-large box-shadow-extra-large-hover overflow-hidden">
|
||
<div class="feature-box-icon ms-40px me-40px lg-ms-15px lg-me-15px">
|
||
<h2 class="text-dark-gray fw-700 ls-minus-1px mb-0">2018</h2>
|
||
</div>
|
||
<div class="feature-box-content border-start border-color-extra-medium-gray ps-40px pe-40px lg-ps-15px lg-pe-15px last-paragraph-no-margin">
|
||
<span class="text-dark-gray fw-600 fs-20 xs-fs-18">Revenue of millions</span>
|
||
<p class="text-light-opacity">Lorem ipsum dolor amet</p>
|
||
</div>
|
||
<div class="feature-box-overlay bg-majorelle-blue"></div>
|
||
</div>
|
||
</div>
|
||
<span class="comment"><!-- end fancy text box item --></span>
|
||
</div>
|
||
</pre>
|
||
</div>
|
||
<p><span class="label label-danger">Note</span>For demo, You can please check this in <strong><a href="../element-fancy-text-box.html" target="_blank">element-fancy-text-box.html</a></strong> page.</p>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="row">
|
||
<div class="col-md-12 docs-content-inner" id="elements-google-map">
|
||
<h1>Google Map</h1>
|
||
<p>Adding a google map to your website is super easy with Crafto’s Google Map element. Here, you can see different styles for Google map where you can set image, pin, paddings, background, pop up, and so on.</p>
|
||
<a href="../element-google-map.html" target="_blank"><img src="images/google-map.jpg" alt="Crafto" /></a>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<div class="row">
|
||
<div class="col-12 sm-mb-30px">
|
||
<div id="map" class="map h-650px md-h-550px sm-h-450px border-radius-6px" data-map-options='{ "lat": -37.817240, "lng": 144.955820, "style": "night", "marker": { "type": "image", "class": "marker01", "src": "images/marker04.png" }, "popup": { "defaultOpen": false, "html": "<div class=infowindow><strong class=\"mb-3 d-inline-block alt-font\">Crafto eLearning</strong><p class=\"alt-font\">16122 Collins street, Melbourne, Australia</p></div><div class=\"google-maps-link alt-font\"> <a class=\"text-white\" aria-label=\"View larger map\" target=\"_blank\" jstcache=\"31\" href=\"https://maps.google.com/maps?ll=-37.805688,144.962312&z=17&t=m&hl=en-US&gl=IN&mapclient=embed&cid=13153204942596594449\" jsaction=\"mouseup:placeCard.largerMap\">VIEW LARGER MAP</a></div>" } }'></div>
|
||
</div>
|
||
<div class="col-lg-5 col-md-6 contact-form-style-03 position-absolute sm-position-relative right-0px bottom-0" data-anime='{ "opacity": [0, 1], "translateY": [-20, 0], "translateX": [-20, 0], "staggervalue": 100, "easing": "easeOutQuad" }'>
|
||
<div class="bg-white p-13 md-p-10 position-relative overflow-hidden background-no-repeat background-position-right-bottom box-shadow-extra-large" style="background-image: url(images/demo-elearning-contact-bg-01.png)">
|
||
<div>
|
||
<h6 class="text-dark-gray fw-600 ls-minus-1px mb-5px">Crafto - London</h6>
|
||
<p class="w-100 mb-10px">401 Broadway, 24th Floor,<br>Orchard View, London, UK</p>
|
||
<div class="w-100 d-block">
|
||
<span class="d-block"><span class="text-dark-gray fw-600">T:</span><a href="tel:1234567890"> 123 456 7890</a></span>
|
||
<span class="d-block"><span class="text-dark-gray fw-600">E:</span> <a href="email path" class="text-dark-gray text-decoration-line-bottom fw-600"><span class="__cf_email__" data-cfemail="452c2b232a053c2a3037212a28242c2b6b262a28">[email protected]</span></a></span>
|
||
<a href="map path" target="_blank" class="btn btn-large btn-dark-gray btn-box-shadow btn-rounded btn-switch-text mt-35px text-transform-none">
|
||
<span>
|
||
<span class="btn-double-text" data-text="View on google map">View on google map</span>
|
||
<span><i class="fa-solid fa-arrow-right"></i></span>
|
||
</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</pre>
|
||
</div>
|
||
<h3>Options</h3>
|
||
<p><strong>data-map-options</strong> is a data attribute that contains several types of properties as follows:</p>
|
||
<ul>
|
||
<li><code>latitude and longitude</code>- To locate a place, input the GPS coordinates of latitude and longitude into Google Map.<br>
|
||
<strong>For Example:</strong><br>
|
||
<code>"lat": -37.817240</code> - This property and value are for the latitude property. and In geography, latitude is a coordinate that specifies the north–south position of a point on the surface of the Earth or another celestial body.<br>
|
||
<code>"lng": 144.955820</code> - This property and value are for the longitude property. and Longitude is a geographic coordinate that specifies the east–west position of a point on the surface of the Earth, or another celestial body.
|
||
</li>
|
||
<li><code>style</code> - The style property encompasses various types, including <code>Standard</code>, <code>Silver</code>, <code>Retro</code>, <code>Dark</code>, <code>night</code>, <code>Aubergine</code>. Each represents a distinct color theme for different maps. <br>
|
||
<strong>For Example:</strong> - <code>"style": "night"</code>
|
||
</li>
|
||
<li><code>marker</code> - A marker is a type of object that represents a pin point in the middle of a map.<br>
|
||
<code>type</code> - The type property of marker comes with two types of values <code>image</code> & <code>HTML</code><br>
|
||
<strong>For Example:</strong> - <code>"type": "image"</code> & <code>"type": "HTML"</code>
|
||
</li>
|
||
<li>
|
||
<code>class</code> - The class property is used to change the style via CSS code:<br>
|
||
</li>
|
||
<li>
|
||
<code>src</code> - Specifies the path to replace the image at the pin point in the marker.<br>
|
||
<strong>For Example:</strong> - <code>"src": "image path"</code><br>
|
||
<code>color</code> - Color indicates which color to change at the pin point in the marker.<br>
|
||
<strong>For Example:</strong> - <code>"color": "#FFFF00"</code>
|
||
</li>
|
||
<li>
|
||
<code>popup</code> - The popup property shows the window in the marker. Popup has two values. The value indicates whether the window will be open by default or not.<br>
|
||
<code>DefaultOpen</code> - It has two values <code>true</code> and <code>false</code><br>
|
||
<strong>For Example:</strong> - <code>"defaultOpen": true</code><br>
|
||
<code>html</code> - Here you can add HTML code to display your content like title, address, view direction link or whatever you wish.<br>
|
||
<strong>For Example:</strong> - <code>"html": "<div>...</div>"</code>
|
||
</li>
|
||
</ul>
|
||
<p class="pt-30px"><span class="label label-danger">Note</span>For demo, You can please check this in <strong><a href="../element-google-map.html" target="_blank">element-google-map.html</a></strong> page.</p>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="row">
|
||
<div class="col-md-12 docs-content-inner" id="elements-heading">
|
||
<h1>Heading</h1>
|
||
<p>If you want headings on your website to look different from the theme's defaults, the heading shortcode is your go-to tool. It's perfect for creating special headings that match the style of a particular section on your site. If a heading is close to what you want, you can also pick the HTML tag (like H1, H2, H3, etc.) as a starting point for customization.</p>
|
||
<a href="../element-heading.html" target="_blank"><img src="images/heading.jpg" alt="Crafto" /></a>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<div class="row justify-content-center">
|
||
<div class="col-12 col-xl-7 col-lg-8 last-paragraph-no-margin">
|
||
<h1 class="text-dark-gray alt-font fw-600">Heading</h1>
|
||
<h2 class="text-dark-gray alt-font fw-600">Heading</h2>
|
||
<h3 class="text-dark-gray alt-font fw-600">Heading</h3>
|
||
<h4 class="text-dark-gray alt-font fw-600">Heading</h4>
|
||
<h5 class="text-dark-gray alt-font fw-600">Heading</h5>
|
||
<h6 class="text-dark-gray alt-font fw-600">Heading</h6>
|
||
</div>
|
||
</div>
|
||
</pre>
|
||
</div>
|
||
<p><span class="label label-danger">Note</span>For demo, You can please check this in <strong><a href="../element-heading.html" target="_blank">element-heading.html</a></strong> page.</p>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="row">
|
||
<div class="col-md-12 docs-content-inner" id="elements-highlight">
|
||
<h1>Highlight</h1>
|
||
<p>Make your text pop on your site by using Crafto's highlight shortcode. You can customize the background color and font color to match your style. This shortcode is handy for making important text stand out.</p>
|
||
<a href="../element-highlights.html" target="_blank"><img src="images/highlight.jpg" alt="Crafto" /></a>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<div class="row align-items-center justify-content-center">
|
||
<div class="col-xxl-4 col-xl-5 col-lg-6 md-mb-50px sm-mb-30px">
|
||
<h2 class="text-uppercase text-dark-gray md-lh-60 ls-minus-2px mb-0">Relax at the luxury resorts <span class="bg-jade text-white fw-700 ps-2 pe-2">entire world!</span></h2>
|
||
</div>
|
||
<div class="col-xl-5 col-lg-6">
|
||
<img class="w-100" src="image path" alt="">
|
||
</div>
|
||
</div>
|
||
</pre>
|
||
</div>
|
||
<p><span class="label label-danger">Note</span>For demo, You can please check this in <strong><a href="../element-highlights.html" target="_blank">element-highlights.html</a></strong> page.</p>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="row">
|
||
<div class="col-md-12 docs-content-inner" id="elements-horizontal-list-item">
|
||
<h1>Horizontal List Item</h1>
|
||
<p>Design dynamic and mobile-friendly tables effortlessly using the Horizontal List Item feature. This tool lets you organize information horizontally, making it easily accessible and visually appealing on various devices.</p>
|
||
<a href="../element-horizontal-list-item.html" target="_blank"><img src="images/horizontal-list-item.jpg" alt="Crafto" /></a>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<div class="row justify-content-center">
|
||
<div class="col-xl-10" data-anime='{ "el": "childs", "translateY": [15, 0], "opacity": [0,1], "duration": 800, "delay": 200, "staggervalue": 300, "easing": "easeOutQuad" }'>
|
||
<div class="row border-bottom border-2 border-color-dark-gray pb-50px mb-50px sm-pb-35px sm-mb-35px align-items-center">
|
||
<div class="col-md-1 text-center text-md-end md-mb-15px">
|
||
<div class="fs-16 fw-600 text-dark-gray">01</div>
|
||
</div>
|
||
<div class="col-md-7 offset-lg-1 icon-with-text-style-01 md-mb-25px">
|
||
<div class="feature-box feature-box-left-icon-middle last-paragraph-no-margin">
|
||
<div class="feature-box-icon me-50px md-me-35px">
|
||
<img src="#" class="w-75px" alt=""/>
|
||
</div>
|
||
<div class="feature-box-content">
|
||
<span class="d-inline-block text-dark-gray mb-5px fs-20 ls-minus-05px">Pixel perfect <span class="fw-700">web design</span></span>
|
||
<p class="w-90 md-w-100">Lorem ipsum is simply dummy text of the printing typesetting industry been text.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-3 col-md-4 text-center text-md-end">
|
||
<a href="#" class="btn btn-dark-gray btn-box-shadow btn-medium btn-switch-text btn-rounded">
|
||
<span>
|
||
<span class="btn-double-text" data-text="Get started now">Get started now</span>
|
||
</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div class="row border-bottom border-2 border-color-dark-gray pb-50px mb-50px sm-pb-35px sm-mb-35px align-items-center">
|
||
<div class="col-md-1 text-center text-md-end md-mb-15px">
|
||
<div class="fs-16 fw-600 text-dark-gray">02</div>
|
||
</div>
|
||
<div class="col-md-7 offset-lg-1 icon-with-text-style-01 md-mb-25px">
|
||
<div class="feature-box feature-box-left-icon-middle last-paragraph-no-margin">
|
||
<div class="feature-box-icon me-50px md-me-35px">
|
||
<img src="#" class="w-75px" alt=""/>
|
||
</div>
|
||
<div class="feature-box-content">
|
||
<span class="d-inline-block text-dark-gray mb-5px fs-20 ls-minus-05px">Creative <span class="fw-700">web development</span></span>
|
||
<p class="w-90 md-w-100">Lorem ipsum is simply dummy text of the printing typesetting industry been text.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-3 col-md-4 text-center text-md-end">
|
||
<a href="#" class="btn btn-dark-gray btn-box-shadow btn-medium btn-switch-text btn-rounded">
|
||
<span>
|
||
<span class="btn-double-text" data-text="Get started now">Get started now</span>
|
||
</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div class="row align-items-center">
|
||
<div class="col-md-1 text-center text-md-end md-mb-15px">
|
||
<div class="fs-16 fw-600 text-dark-gray">03</div>
|
||
</div>
|
||
<div class="col-md-7 offset-lg-1 icon-with-text-style-01 md-mb-25px">
|
||
<div class="feature-box feature-box-left-icon-middle last-paragraph-no-margin">
|
||
<div class="feature-box-icon me-50px md-me-35px">
|
||
<img src="#" class="w-75px" alt=""/>
|
||
</div>
|
||
<div class="feature-box-content">
|
||
<span class="d-inline-block text-dark-gray mb-5px fs-20 ls-minus-05px">Best <span class="fw-700">eCommerce solution</span></span>
|
||
<p class="w-90 md-w-100">Lorem ipsum is simply dummy text of the printing typesetting industry been text.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-3 col-md-4 text-center text-md-end">
|
||
<a href="#" class="btn btn-dark-gray btn-box-shadow btn-medium btn-switch-text btn-rounded">
|
||
<span>
|
||
<span class="btn-double-text" data-text="Get started now">Get started now</span>
|
||
</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</pre>
|
||
</div>
|
||
<p><span class="label label-danger">Note</span>For demo, You can please check this in <strong><a href="../element-horizontal-list-item.html" target="_blank">element-horizontal-list-item.html</a></strong> page.</p>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="row">
|
||
<div class="col-md-12 docs-content-inner" id="elements-icon-with-text">
|
||
<h1>Icon With Text</h1>
|
||
<p>The icon with text in a Crafto is a handy tool. It lets you pair small pictures (icons) with text to make information more interesting and visually attractive. People often use it to showcase important features, services, or interesting things on a website.</p>
|
||
<a href="../element-icon-with-text.html" target="_blank"><img src="images/icon-with-text.jpg" alt="Crafto" /></a>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<div class="row row-cols-1 row-cols-lg-3 row-cols-sm-2 justify-content-center" data-anime='{ "el": "childs", "translateY": [50, 0], "opacity": [0,1], "duration": 1200, "delay": 0, "staggervalue": 150, "easing": "easeOutQuad" }'>
|
||
<span class="comment"><!-- start features box item --></span>
|
||
<div class="col icon-with-text-style-03">
|
||
<div class="feature-box p-8">
|
||
<div class="feature-box-icon">
|
||
<i class="line-icon-Microphone-4 icon-double-large text-majorelle-blue mb-20px"></i>
|
||
</div>
|
||
<div class="feature-box-content last-paragraph-no-margin">
|
||
<span class="d-inline-block fw-700 text-dark-gray mb-5px fs-19">Microphone built-in</span>
|
||
<p class="w-85 lg-w-100 mx-auto">Lorem ipsum consectetur elit eiusmod tempor incididunt.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<span class="comment"><!-- end features box item --></span>
|
||
<span class="comment"><!-- start features box item --></span>
|
||
<div class="col icon-with-text-style-03">
|
||
<div class="feature-box p-8">
|
||
<div class="feature-box-icon">
|
||
<i class="line-icon-No-Drop icon-double-large text-majorelle-blue mb-20px"></i>
|
||
</div>
|
||
<div class="feature-box-content last-paragraph-no-margin">
|
||
<span class="d-inline-block fw-700 text-dark-gray mb-5px fs-19">Water resistant</span>
|
||
<p class="w-85 lg-w-100 mx-auto">Lorem ipsum consectetur elit eiusmod tempor incididunt.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<span class="comment"><!-- end features box item --></span>
|
||
<span class="comment"><!-- start features box item --></span>
|
||
<div class="col icon-with-text-style-03">
|
||
<div class="feature-box p-8">
|
||
<div class="feature-box-icon">
|
||
<i class="line-icon-Signal icon-double-large text-majorelle-blue mb-20px"></i>
|
||
</div>
|
||
<div class="feature-box-content last-paragraph-no-margin">
|
||
<span class="d-inline-block fw-700 text-dark-gray mb-5px fs-19">Powerful signal</span>
|
||
<p class="w-85 lg-w-100 mx-auto">Lorem ipsum consectetur elit eiusmod tempor incididunt.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<span class="comment"><!-- end features box item --></span>
|
||
<span class="comment"><!-- start features box item --></span>
|
||
<div class="col icon-with-text-style-03">
|
||
<div class="feature-box p-8">
|
||
<div class="feature-box-icon">
|
||
<i class="line-icon-Sound icon-double-large text-majorelle-blue mb-20px"></i>
|
||
</div>
|
||
<div class="feature-box-content last-paragraph-no-margin">
|
||
<span class="d-inline-block fw-700 text-dark-gray mb-5px fs-19">Noise cancellation</span>
|
||
<p class="w-85 lg-w-100 mx-auto">Lorem ipsum consectetur elit eiusmod tempor incididunt.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<span class="comment"><!-- end features box item --></span>
|
||
<span class="comment"><!-- start features box item --></span>
|
||
<div class="col icon-with-text-style-03">
|
||
<div class="feature-box p-8">
|
||
<div class="feature-box-icon">
|
||
<i class="line-icon-Environmental-3 icon-double-large text-majorelle-blue mb-20px"></i>
|
||
</div>
|
||
<div class="feature-box-content last-paragraph-no-margin">
|
||
<span class="d-inline-block fw-700 text-dark-gray mb-5px fs-19">Environment friendly</span>
|
||
<p class="w-85 lg-w-100 mx-auto">Lorem ipsum consectetur elit eiusmod tempor incididunt.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<span class="comment"><!-- end features box item --></span>
|
||
<span class="comment"><!-- start features box item --></span>
|
||
<div class="col icon-with-text-style-03">
|
||
<div class="feature-box p-8">
|
||
<div class="feature-box-icon">
|
||
<i class="line-icon-Headphones icon-double-large text-majorelle-blue mb-20px"></i>
|
||
</div>
|
||
<div class="feature-box-content last-paragraph-no-margin">
|
||
<span class="d-inline-block fw-700 text-dark-gray mb-5px fs-19">Sleek design</span>
|
||
<p class="w-85 lg-w-100 mx-auto">Lorem ipsum consectetur elit eiusmod tempor incididunt.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<span class="comment"><!-- end features box item --></span>
|
||
</div>
|
||
</pre>
|
||
</div>
|
||
<p><span class="label label-danger">Note</span>For demo, You can please check this in <strong><a href="../element-icon-with-text.html" target="_blank">element-icon-with-text.html</a></strong> page.</p>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="row">
|
||
<div class="col-md-12 docs-content-inner" id="elements-image-gallery">
|
||
<h1>Image Gallery</h1>
|
||
<p>The image gallery shortcode, part of the Crafto collection, empowers you to elegantly present images in diverse grid styles. This feature comes with a range of hover effects that add a touch of sophistication, allowing you to customize the appearance when users hover over each image.</p>
|
||
<a href="../element-image-gallery.html" target="_blank"><img src="images/image-gallery.jpg" alt="Crafto" /></a>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<div class="row mb-6">
|
||
<div class="col px-0 sm-ps-15px sm-pe-15px">
|
||
<ul class="image-gallery-style-01 gallery-wrapper grid grid-3col xl-grid-3col lg-grid-3col md-grid-2col sm-grid-1col xs-grid-1col gutter-extra-large">
|
||
<li class="grid-sizer"></li>
|
||
<span class="comment"><!-- start gallery item --></span>
|
||
<li class="grid-item grid-item-double transition-inner-all">
|
||
<div class="gallery-box">
|
||
<a href="image path" data-group="lightbox-gallery" title="Lightbox gallery image title...">
|
||
<div class="position-relative gallery-image bg-white overflow-hidden">
|
||
<img src="image path" alt="" />
|
||
<div class="d-flex align-items-center justify-content-center position-absolute top-0px left-0px w-100 h-100 gallery-hover move-bottom-top">
|
||
<div class="d-flex align-items-center justify-content-center w-50px h-50px rounded-circle bg-dark-gray">
|
||
<i class="feather icon-feather-search text-white icon-small"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
</li>
|
||
<span class="comment"><!-- end gallery item --></span>
|
||
<span class="comment"><!-- start gallery item --></span>
|
||
<li class="grid-item transition-inner-all">
|
||
<div class="gallery-box overflow-hidden">
|
||
<a href="image path" data-group="lightbox-gallery" title="Lightbox gallery image title...">
|
||
<div class="position-relative gallery-image bg-white overflow-hidden">
|
||
<img src="image path" alt="" />
|
||
<div class="d-flex align-items-center justify-content-center position-absolute top-0px left-0px w-100 h-100 gallery-hover move-bottom-top">
|
||
<div class="d-flex align-items-center justify-content-center w-50px h-50px rounded-circle bg-dark-gray">
|
||
<i class="feather icon-feather-search text-white icon-small"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
</li>
|
||
<span class="comment"><!-- end gallery item --></span>
|
||
<span class="comment"><!-- start gallery item --></span>
|
||
<li class="grid-item transition-inner-all">
|
||
<div class="gallery-box overflow-hidden">
|
||
<a href="image path" data-group="lightbox-gallery" title="Lightbox gallery image title...">
|
||
<div class="position-relative gallery-image bg-white overflow-hidden">
|
||
<img src="image path" alt="" />
|
||
<div class="d-flex align-items-center justify-content-center position-absolute top-0px left-0px w-100 h-100 gallery-hover move-bottom-top">
|
||
<div class="d-flex align-items-center justify-content-center w-50px h-50px rounded-circle bg-dark-gray">
|
||
<i class="feather icon-feather-search text-white icon-small"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
</li>
|
||
<span class="comment"><!-- end gallery item --></span>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</pre>
|
||
</div>
|
||
<p>You can manage number of items to display in a row in different device width as per below classes and those should be added in <code>portfolio-wrapper</code> DIV. Please make sure to replace X with your desired number of items to display in a row. This same mechanism will be applicable to any type of grid like portfolio, blog and shop grids.</p>
|
||
<ul>
|
||
<li><code>grid-Xcol</code> - In general for all device width.</li>
|
||
<li><code>xxl-grid-Xcol</code> - For extra extra large devices greater than equal to 1600px width.</li>
|
||
<li><code>xl-grid-Xcol</code> - For extra large devices greater than equal to 1399px width.</li>
|
||
<li><code>lg-grid-Xcol</code> - For large devices greater than equal to 1199px width.</li>
|
||
<li><code>md-grid-Xcol</code> - For medium devices greater than equal to 991px width.</li>
|
||
<li><code>sm-grid-Xcol</code> - For small devices greater than equal to 767px width.</li>
|
||
<li><code>xs-grid-Xcol</code> - For extra small devices less than 575px width.</li>
|
||
</ul>
|
||
</br>
|
||
<p>If you have added multiple galleries with Lightbox popup feature in the same page and want to separate big images display in the Lightbox popup per gallery then you need to add same value in <strong>li a href</strong> <code>data-group</code> property for one gallery items and another value for other items of another gallery. But in this case you need to add <code>lightbox-group-gallery-item</code> class in all the items <strong>li a href</strong> of all the galleries in the page.</p>
|
||
<p><span class="label label-danger">Note</span>For demo, You can please check this in <strong><a href="../element-image-gallery.html" target="_blank">element-image-gallery.html</a></strong> page.</p>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="row">
|
||
<div class="col-md-12 docs-content-inner" id="elements-instagram">
|
||
<h1>Instagram</h1>
|
||
<p>Instagram shortcode typically allows you to customize the display, choosing options such as the number of posts to show, the layout style, and other visual settings. This flexibility ensures that the integrated Instagram feed aligns with your website's design and overall aesthetic.</p>
|
||
<a href="../element-instagram.html" target="_blank"><img src="images/instagram.jpg" alt="Crafto" /></a>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<span class="comment"><!-- start instagram images --></span>
|
||
<div class="row justify-content-center">
|
||
<div class="col-12 col-xl-8 col-lg-10 col-md-12">
|
||
<ul class="instafeed-grid instafeed-wrapper grid grid-3col xl-grid-3col lg-grid-3col md-grid-2col sm-grid-2col xs-grid-1col gutter-large" data-total="6">
|
||
<li class="grid-item"><figure><a href="#" data-href="{{link}}" target="_blank"><img src="#" data-src="{{image}}" class="insta-image" alt="" /><span class="insta-icon"><i class="fa-brands fa-instagram"></i>{{likes}}</span></a></figure></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<span class="comment"><!-- end instagram images --></span>
|
||
</pre>
|
||
</div>
|
||
<p><span class="label label-danger">Note</span>First of all you need to create Instagram access token from your account, you can read <strong><a href="https://litho.themezaa.com/documentation/how-to-find-your-instagram-access-token/" target="_blank">this article</a></strong> for more information and then add that token in /js/main.js file in var token variable under Instagram feed section. You can use data-total attribute in HTML code to fetch your desired number of Instagram photos. For demo, You can please check this in <strong><a href="../element-instagram.html" target="_blank">element-instagram.html</a></strong> page.</p>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="row">
|
||
<div class="col-md-12 docs-content-inner" id="elements-interactive-banner">
|
||
<h1>Interactive Banner</h1>
|
||
<p>An interactive banner in a Crafto is like a lively and attention-grabbing picture on a website. It's not just a regular picture; it can do cool things to make your visit more interesting. Instead of just sitting there, it might move, have buttons you can click, or show different pictures.</p>
|
||
<a href="../element-interactive-banners.html" target="_blank"><img src="images/interactive-banner.jpg" alt="Crafto" /></a>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<div class="row row-cols-1 row-cols-lg-3 row-cols-md-2 justify-content-center mb-5" data-anime='{ "el": "childs", "translateY": [-30, 0], "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 300, "easing": "easeOutQuad" }'>
|
||
<span class="comment"><!-- start interactive banner item --></span>
|
||
<div class="col interactive-banner-style-07 md-mb-30px">
|
||
<figure class="mb-0 border-radius-8px overflow-hidden box-shadow-quadruple-large-hover box-shadow-quadruple-large">
|
||
<img src="image path" alt="" />
|
||
<div class="overlay-bg bg-dark-gray opacity-extra-medium"></div>
|
||
<figcaption>
|
||
<div class="hover-content align-items-center d-flex flex-column justify-content-center h-100 p-50px text-center">
|
||
<div class="w-65 lg-w-90 mt-auto mb-auto">
|
||
<span class="fs-14 fw-500 ls-2px text-white text-uppercase">Exclusive</span>
|
||
<div class="divider-style-03 divider-style-03-01 border-color-transparent-white-very-light pt-15px mt-10px"></div>
|
||
<h6 class="alt-font text-white mb-0 fw-500">Honeymoon<br>package</h6>
|
||
</div>
|
||
<div class="hover-show-content text-center">
|
||
<a href="#" class="bg-gradient-pink-orange w-55px h-55px rounded-circle position-relative mx-auto d-block">
|
||
<i class="bi bi-arrow-right-short icon-extra-medium absolute-middle-center text-white"></i>
|
||
</a>
|
||
</div>
|
||
<div class="hover-hide-content">
|
||
<span class="fs-13 lh-34 text-dark-gray text-uppercase bg-white ps-20px pe-20px d-inline-block border-radius-4px fw-700">Get 40% off</span>
|
||
</div>
|
||
</div>
|
||
</figcaption>
|
||
</figure>
|
||
</div>
|
||
<span class="comment"><!-- end interactive banner item --></span>
|
||
<span class="comment"><!-- start interactive banner item --></span>
|
||
<div class="col interactive-banner-style-07 md-mb-30px">
|
||
<figure class="mb-0 border-radius-8px overflow-hidden box-shadow-quadruple-large-hover box-shadow-quadruple-large">
|
||
<img src="image path" alt="" />
|
||
<div class="overlay-bg bg-dark-gray opacity-extra-medium"></div>
|
||
<figcaption>
|
||
<div class="hover-content align-items-center d-flex flex-column justify-content-center h-100 p-60px text-center">
|
||
<div class="w-65 lg-w-90 mt-auto mb-auto">
|
||
<span class="fs-14 fw-500 ls-2px text-white text-uppercase">Unbundled</span>
|
||
<div class="divider-style-03 divider-style-03-01 border-color-transparent-white-very-light pt-15px mt-10px"></div>
|
||
<h6 class="alt-font text-white mb-0 fw-500">Cocktail<br>package</h6>
|
||
</div>
|
||
<div class="hover-show-content text-center">
|
||
<a href="#" class="bg-gradient-pink-orange w-55px h-55px rounded-circle position-relative mx-auto d-block">
|
||
<i class="bi bi-arrow-right-short icon-extra-medium absolute-middle-center text-white"></i>
|
||
</a>
|
||
</div>
|
||
<div class="hover-hide-content">
|
||
<span class="fs-13 lh-34 text-dark-gray text-uppercase bg-white ps-20px pe-20px d-inline-block border-radius-4px fw-700">Get 30% off</span>
|
||
</div>
|
||
</div>
|
||
</figcaption>
|
||
</figure>
|
||
</div>
|
||
<span class="comment"><!-- end interactive banner item --></span>
|
||
<span class="comment"><!-- start interactive banner item --></span>
|
||
<div class="col interactive-banner-style-07">
|
||
<figure class="mb-0 border-radius-8px overflow-hidden box-shadow-quadruple-large-hover box-shadow-quadruple-large">
|
||
<img src="image path" alt="" />
|
||
<div class="overlay-bg bg-dark-gray opacity-extra-medium"></div>
|
||
<figcaption>
|
||
<div class="hover-content align-items-center d-flex flex-column justify-content-center h-100 p-60px text-center">
|
||
<div class="w-65 lg-w-90 mt-auto mb-auto">
|
||
<span class="fs-14 fw-500 ls-2px text-white text-uppercase">Wellness</span>
|
||
<div class="divider-style-03 divider-style-03-01 border-color-transparent-white-very-light pt-15px mt-10px"></div>
|
||
<h6 class="alt-font text-white mb-0 fw-500">Massage<br>package</h6>
|
||
</div>
|
||
<div class="hover-show-content text-center">
|
||
<a href="#" class="bg-gradient-pink-orange w-55px h-55px rounded-circle position-relative mx-auto d-block">
|
||
<i class="bi bi-arrow-right-short icon-extra-medium absolute-middle-center text-white"></i>
|
||
</a>
|
||
</div>
|
||
<div class="hover-hide-content">
|
||
<span class="fs-13 lh-34 text-dark-gray text-uppercase bg-white ps-20px pe-20px d-inline-block border-radius-4px fw-700">Get 20% off</span>
|
||
</div>
|
||
</div>
|
||
</figcaption>
|
||
</figure>
|
||
</div>
|
||
<span class="comment"><!-- end interactive banner item --> </span>
|
||
</div>
|
||
</pre>
|
||
</div>
|
||
<p><span class="label label-danger">Note</span>For demo, You can please check this in <strong><a href="../element-interactive-banners.html" target="_blank">element-interactive-banners.html</a></strong> page.</p>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="row">
|
||
<div class="col-md-12 docs-content-inner" id="elements-lightbox-and-modal">
|
||
<h1>Lightbox & Modal</h1>
|
||
<p>Include pictures, videos, HTML, and iframe content using the lightbox shortcode. Lightboxes are like special pop-ups that show up on the webpage. You can pick from various types of lightboxes to make your content look cool.</p>
|
||
<ul>
|
||
<li><a href="index.html#simple-modal" class="inner-link">Simple Modal</a></li>
|
||
<li><a href="index.html#subscription" class="inner-link">Subscription</a></li>
|
||
<li><a href="index.html#contact-form" class="inner-link">Contact Form</a></li>
|
||
<li><a href="index.html#youtube-video" class="inner-link">Youtube Video</a></li>
|
||
<li><a href="index.html#vimeo-video" class="inner-link">Vimeo Video</a></li>
|
||
<li><a href="index.html#google-map" class="inner-link">Google Map</a></li>
|
||
</ul>
|
||
<h2 id="simple-modal">Simple Modal</h2>
|
||
<p class="mb-0">Click the buttons below to launch a modals demo. Simple Modal is a dialog box/popup window that is displayed on center of the current page</p>
|
||
<a href="../modal-simple.html" target="_blank"><img src="images/modal-simple.jpg" alt="Crafto" /></a>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<div class="row justify-content-center">
|
||
<div class="col-12 col-xl-8 col-md-10 text-center">
|
||
<span class="text-white fs-20 mb-15px d-inline-block">Simple modal</span>
|
||
<h2 class="text-white mb-50px fw-600 ls-minus-2px">A modal popup disables the usual ways to close popups.</h2>
|
||
<a class="btn btn-gradient-pink-orange btn-extra-large btn-rounded modal-popup text-transform-none" href="#modal-popup">Open modal popup<i class="fa-solid fa-arrow-right"></i></a>
|
||
<!-- start modal pop-up -->
|
||
<div id="modal-popup" class="white-popup-block mfp-hide col-xl-3 col-lg-6 col-md-7 col-11 mx-auto bg-white text-center modal-popup-main p-50px">
|
||
<span class="text-dark-gray fw-600 fs-24 mb-10px d-block">Simple modal</span>
|
||
<p>Lorem ipsum is simply dummy text of the printing typesetting industry. Lorem ipsum has been the industry's standard dummy text ever since.</p>
|
||
<a class="btn btn-small btn-rounded btn-dark-gray popup-modal-dismiss mt-10px" href="#">Dismiss</a>
|
||
</div>
|
||
<!-- end modal pop-up -->
|
||
</div>
|
||
</div>
|
||
</pre>
|
||
</div>
|
||
<p><span class="label label-danger">Note</span>For demo, You can please check this in <strong><a href="../modal-simple.html" target="_blank">modal-simple.html</a></strong> page.</p>
|
||
<h2 id="subscription">Subscription</h2>
|
||
<p class="mb-0">The modal box is a dialog box that displays some information on the webpage. This may display any of the content like the product details, subscription form, and so on.</p>
|
||
<p>You can add a DIV with subscribe-popup ID in a page and then it will display this DIV content in popup when this page load. If you want to add some delay like the popup should display 5 seconds after the page load then please open /js/main.js file, search delaySecond and set it to 5. You can also set expireDays value, so this popup will not be visible to user for value of expireDays if Don't show this popup again checkbox is clicked by user and then closed.</p>
|
||
<a href="../modal-subscription.html" target="_blank"><img src="images/modal-subscription.jpg" alt="Crafto" /></a>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<div class="row justify-content-center">
|
||
<div class="col-12 col-xl-8 text-center z-index-1">
|
||
<span class="text-white fs-20 mb-15px d-inline-block">Auto open subscription modal</span>
|
||
<h3 class="text-white mx-auto mb-50px ls-minus-1px fw-500 text-shadow-double-large">This is a simple subscription form and it will be showed after the pre-defined delay once the pages is loaded.</h3>
|
||
<a href="#subscribe-popup" class="btn btn-extra-large btn-base-color btn-box-shadow text-transform-none btn-rounded btn-hover-animation-switch slide-up-animation">
|
||
<span>
|
||
<span class="btn-text">Open modal popup again</span>
|
||
<span class="btn-icon"><i class="feather icon-feather-arrow-right"></i></span>
|
||
<span class="btn-icon"><i class="feather icon-feather-arrow-right"></i></span>
|
||
</span>
|
||
</a>
|
||
<span class="comment"><!-- start subscription popup --></span>
|
||
<div id="subscribe-popup" class="mfp-hide subscribe-popup">
|
||
<div class="container">
|
||
<div class="row justify-content-center">
|
||
<div class="col-xl-9 col-md-10 bg-white">
|
||
<div class="row position-relative box-shadow-quadruple-large">
|
||
<div class="col-lg-6 cover-background md-h-400px xs-h-300px" style="background-image:url('image path');"></div>
|
||
<div class="col-lg-6 newsletter-popup p-8 pt-10 pb-10 lg-p-5 md-p-6 xs-p-8 position-relative">
|
||
<h4 class="d-inline-block alt-font ls-minus-1px fw-700 text-dark-gray mb-15px">Subscribe to the latest updates!</h4>
|
||
<p>Subscribe to our newsletters and get the latest business updates.</p>
|
||
<div class="d-inline-block w-100 newsletter-style-05 position-relative mb-20px">
|
||
<form action="email-templates/subscribe-newsletter.php" method="post">
|
||
<input class="input-medium w-100 border-radius-4px form-control required mb-15px" type="email" name="email" placeholder="Enter your email address" />
|
||
<input type="hidden" name="redirect" value="">
|
||
<button type="submit" class="btn btn-medium btn-round-edge btn-dark-gray btn-box-shadow w-100 submit">Subscribe now!</button>
|
||
<div class="form-results border-radius-4px mt-10px lh-normal pt-10px pb-10px ps-15px pe-15px fs-16 w-100 text-center position-absolute z-index-1 d-none"></div>
|
||
</form>
|
||
</div>
|
||
<label for="newsletter-off" class="fs-15"><input class="w-auto me-10px position-relative top-1px p-0" type="checkbox" id="newsletter-off" name="newsletter-off">Don't show this popup again</label>
|
||
</div>
|
||
<button title="Close (Esc)" type="button" class="mfp-close text-dark-gray"></button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<span class="comment"><!-- end subscription popup --></span>
|
||
</div>
|
||
</pre>
|
||
</div>
|
||
<p><span class="label label-danger">Note</span>For demo, You can please check this in <strong><a href="../modal-subscription.html" target="_blank">modal-subscription.html</a></strong> page.</p>
|
||
<h2 id="contact-form">Contact Form</h2>
|
||
<p class="mb-0">Click the buttons below to launch a modals demo. Use modal contact to display a window with textarea and forms where the user can enter the necessary details.</p>
|
||
<a href="../modal-contact-form.html" target="_blank"><img src="images/modal-contact-form.jpg" alt="Crafto" /></a>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<div class="row justify-content-center">
|
||
<div class="col-12 col-xl-8 text-center z-index-1">
|
||
<span class="text-white fs-20 mb-15px d-inline-block">Popup with form</span>
|
||
<h2 class="text-white mx-auto mb-50px ls-minus-1px fw-500 text-shadow-double-large">We would love to hear about start your new project.</h2>
|
||
<a href="#contact-form" class="btn btn-extra-large btn-base-color btn-box-shadow text-transform-none btn-rounded popup-with-form btn-hover-animation-switch">
|
||
<span>
|
||
<span class="btn-text">Start new projects</span>
|
||
<span class="btn-icon"><i class="feather icon-feather-arrow-right"></i></span>
|
||
<span class="btn-icon"><i class="feather icon-feather-arrow-right"></i></span>
|
||
</span>
|
||
</a>
|
||
<!-- start contact popup -->
|
||
<div id="contact-form" class="container p-0 contact-form-style-01 position-relative text-center mfp-hide">
|
||
<div class="row g-0">
|
||
<div class="col-lg-5 cover-background md-h-600px xs-h-400px" style="background-image:url('image path');"></div>
|
||
<div class="col-lg-7">
|
||
<div class="p-15 lg-p-10 bg-white">
|
||
<span class="fs-18 mb-10px">Looking for a finance agent?</span>
|
||
<h3 class="d-inline-block fw-600 text-dark-gray mb-10 ls-minus-1px">How we can help you?</h3>
|
||
<form action="email-templates/contact-form.php" method="post">
|
||
<div class="position-relative form-group mb-20px">
|
||
<span class="form-icon"><i class="bi bi-emoji-smile"></i></span>
|
||
<input type="text" name="name" class="form-control required" placeholder="Enter your name*" />
|
||
</div>
|
||
<div class="position-relative form-group mb-20px">
|
||
<span class="form-icon"><i class="bi bi-envelope"></i></span>
|
||
<input type="email" name="email" class="form-control required" placeholder="Enter your email*" />
|
||
</div>
|
||
<div class="position-relative form-group mb-20px">
|
||
<span class="form-icon"><i class="bi bi-telephone-outbound"></i></span>
|
||
<input type="tel" name="phone" class="form-control" placeholder="Enter your phone" />
|
||
</div>
|
||
<div class="position-relative form-group form-textarea">
|
||
<span class="form-icon"><i class="bi bi-chat-square-dots"></i></span>
|
||
<textarea placeholder="Your message" name="comment" class="form-control" rows="3"></textarea>
|
||
<input type="hidden" name="redirect" value="">
|
||
<button class="btn btn-medium btn-dark-gray btn-box-shadow btn-round-edge w-100 mt-20px submit" type="submit">Send message</button>
|
||
<div class="form-results mt-20px d-none"></div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- end contact popup -->
|
||
</div>
|
||
</div>
|
||
</pre>
|
||
</div>
|
||
<p><span class="label label-danger">Note</span>For demo, You can please check this in <strong><a href="../modal-contact-form.html" target="_blank">modal-contact-form.html</a></strong> page.</p>
|
||
<h2 id="youtube-video">Youtube Video</h2>
|
||
<p class="mb-0">Click the buttons below to launch a modals demo. Display youtube videos in a pop-up modal.</p>
|
||
<a href="../modal-youtube-video.html" target="_blank"><img src="images/modal-youtube-video.jpg" alt="Crafto" /></a>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<div class="row justify-content-center">
|
||
<div class="col-12 col-xl-10 text-center z-index-1">
|
||
<span class="text-white fs-20 mb-15px d-inline-block">Popup with YouTube video</span>
|
||
<h3 class="text-white mx-auto mb-50px ls-minus-1px fw-500 text-shadow-double-large">In this example lightboxes are automatically disabled on small screen size and default behavior of link is triggered.</h3>
|
||
<a href="youtube path" class="btn btn-extra-large btn-base-color btn-box-shadow text-transform-none btn-rounded btn-hover-animation-switch popup-youtube">
|
||
<span>
|
||
<span class="btn-text">Open YouTube video</span>
|
||
<span class="btn-icon"><i class="feather icon-feather-arrow-right"></i></span>
|
||
<span class="btn-icon"><i class="feather icon-feather-arrow-right"></i></span>
|
||
</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</pre>
|
||
</div>
|
||
<p><span class="label label-danger">Note</span>For demo, You can please check this in <strong><a href="../modal-youtube-video.html" target="_blank">modal-youtube-video.html</a></strong> page.</p>
|
||
<h2 id="vimeo-video">Vimeo Video</h2>
|
||
<p class="mb-0">Click the buttons below to launch a modals demo. Display vimeo videos in a pop-up modal.</p>
|
||
<a href="../modal-vimeo-video.html" target="_blank"><img src="images/modal-vimeo-video.jpg" alt="Crafto" /></a>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<div class="row justify-content-center">
|
||
<div class="col-12 col-xl-10 text-center z-index-1">
|
||
<span class="text-white fs-20 mb-15px d-inline-block">Popup with Vimeo video</span>
|
||
<h3 class="text-white mx-auto mb-50px ls-minus-1px fw-500 text-shadow-double-large">In this example lightboxes are automatically disabled on small screen size and default behavior of link is triggered.</h3>
|
||
<a href="vimeo path" class="btn btn-extra-large btn-base-color btn-box-shadow text-transform-none btn-rounded btn-hover-animation-switch popup-vimeo">
|
||
<span>
|
||
<span class="btn-text">Open Vimeo video</span>
|
||
<span class="btn-icon"><i class="feather icon-feather-arrow-right"></i></span>
|
||
<span class="btn-icon"><i class="feather icon-feather-arrow-right"></i></span>
|
||
</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</pre>
|
||
</div>
|
||
<p><span class="label label-danger">Note</span>For demo, You can please check this in <strong><a href="../modal-vimeo-video.html" target="_blank">modal-vimeo-video.html</a></strong> page.</p>
|
||
<h2 id="google-map">Google Map</h2>
|
||
<p class="mb-0">Click the buttons below to launch a modals demo. Display google map in a pop-up modal.</p>
|
||
<a href="../modal-google-map.html" target="_blank"><img src="images/modal-google-map.jpg" alt="Crafto" /></a>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<div class="row justify-content-center">
|
||
<div class="col-12 col-xl-10 text-center z-index-1">
|
||
<span class="text-white fs-20 mb-15px d-inline-block">Popup with Google map</span>
|
||
<h3 class="text-white mx-auto mb-50px ls-minus-1px fw-500 text-shadow-double-large">In this example lightboxes are automatically disabled on small screen size and default behavior of link is triggered.</h3>
|
||
<a href="google map path" class="btn btn-extra-large btn-base-color btn-box-shadow text-transform-none btn-rounded btn-hover-animation-switch popup-googlemap">
|
||
<span>
|
||
<span class="btn-text">Open Google map</span>
|
||
<span class="btn-icon"><i class="feather icon-feather-arrow-right"></i></span>
|
||
<span class="btn-icon"><i class="feather icon-feather-arrow-right"></i></span>
|
||
</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</pre>
|
||
</div>
|
||
<p><span class="label label-danger">Note</span>For demo, You can please check this in <strong><a href="../modal-google-map.html" target="_blank">modal-google-map.html</a></strong> page.</p>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="row">
|
||
<div class="col-md-12 docs-content-inner" id="elements-list">
|
||
<h1>List</h1>
|
||
<p>Crafting a list becomes a breeze with Crafto. It offers a specialized List block, providing you with versatile options to personalize this element. Seamlessly organize your text into numbered or bulleted lists using the intuitive List block.</p>
|
||
<a href="../element-lists.html" target="_blank"><img src="images/lists.jpg" alt="Crafto" /></a>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<div class="row align-items-center justify-content-center">
|
||
<div class="col-xl-5 col-lg-6 lg-ps-40px md-ps-15px" data-anime='{ "el": "childs", "opacity": [0, 1], "translateY": [30, 0], "duration": 600, "delay": 100, "staggervalue": 300, "easing": "easeOutQuad" }'>
|
||
<span class="comment"><!-- start list style --></span>
|
||
<ul class="p-0 m-0 list-style-03 text-dark-gray fw-500">
|
||
<li>Beautiful and easy to understand UI</li>
|
||
<li>Theme advantages are pixel perfect design</li>
|
||
<li>Present your services with flexible</li>
|
||
<li>Find more creative ideas for your projects</li>
|
||
</ul>
|
||
<span class="comment"><!-- end list style --></span>
|
||
</div>
|
||
</div>
|
||
</pre>
|
||
</div>
|
||
<p><span class="label label-danger">Note</span>For demo, You can please check this in <strong><a href="../element-lists.html" target="_blank">element-lists.html</a></strong> page.</p>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="row">
|
||
<div class="col-md-12 docs-content-inner" id="elements-marquee">
|
||
<h1>Marquee</h1>
|
||
<p>The marquee control is like a moving display that shows text or objects you choose. It can scroll in different ways - from left to right or the other way around. You can also adjust the speed, pause the animation when you hover your mouse over it, and change how the animation looks.</p>
|
||
<a href="../element-marquee.html" target="_blank"><img src="images/marquee.jpg" alt="Crafto" /></a>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<div class="row g-0 align-items-center justify-content-center text-center h-100">
|
||
<div class="col-md-12">
|
||
<div class="swiper swiper-width-auto text-center pb-30px sm-pb-20px" data-slider-options='{ "slidesPerView": "auto", "spaceBetween":80, "speed": 8000, "loop": true, "pagination": { "el": ".slider-four-slide-pagination-2", "clickable": false }, "allowTouchMove": false, "autoplay": { "delay":0, "disableOnInteraction": false }, "navigation": { "nextEl": ".slider-four-slide-next-2", "prevEl": ".slider-four-slide-prev-2" }, "keyboard": { "enabled": true, "onlyInViewport": true }, "breakpoints": { "1200": { "slidesPerView": 3 }, "992": { "slidesPerView": 3 }, "768": { "slidesPerView": 2, "spaceBetween": 70 } }, "effect": "slide" }' >
|
||
<div class="swiper-wrapper marquee-slide">
|
||
<span class="comment"><!-- start client item --></span>
|
||
<div class="swiper-slide">
|
||
<div class="fs-170 sm-fs-150 text-dark-gray fw-600 ls-minus-8px word-break-normal">developers</div>
|
||
</div>
|
||
<span class="comment"><!-- end client item --></span>
|
||
<span class="comment"><!-- start client item --></span>
|
||
<div class="swiper-slide">
|
||
<div class="fs-200 sm-fs-150 text-dark-gray fw-600 ls-minus-8px word-break-normal">designers</div>
|
||
</div>
|
||
<span class="comment"><!-- end client item --></span>
|
||
<span class="comment"><!-- start client item --></span>
|
||
<div class="swiper-slide">
|
||
<div class="fs-150 sm-fs-150 text-dark-gray fw-600 ls-minus-8px word-break-normal">thinkers</div>
|
||
</div>
|
||
<span class="comment"><!-- end client item --></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</pre>
|
||
</div>
|
||
<p><span class="label label-danger">Note</span>For demo, You can please check this in <strong><a href="../element-marquee.html" target="_blank">element-marquee.html</a></strong> page.</p>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="row">
|
||
<div class="col-md-12 docs-content-inner" id="element-media">
|
||
<h1>Media</h1>
|
||
<p>The media shortcode lets you show pictures, videos, or sound from external platform or self hosted files.</p>
|
||
<a href="../element-media.html" target="_blank"><img src="images/media.jpg" alt="Crfato" /></a>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<iframe width="560" height="315" src="https://www.youtube.com/embed/sU3FkzUKHXU?autoplay=1;&mute=1;rel=0&showinfo=0" allowfullscreen></iframe>
|
||
</pre>
|
||
</div>
|
||
<p><span class="label label-danger">Note</span>For demo, You can please check this in <strong><a href="../element-media.html" target="_blank">element-media.html</a></strong> page.</p>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="row">
|
||
<div class="col-md-12 docs-content-inner" id="elements-parallax-scrolling">
|
||
<h1>Parallax Scrolling</h1>
|
||
<p>With parallax scrolling, you can easily put special background pictures that move as you scroll in sliders, sections, or any part of your webpage. Look at the picture and the example code below to learn more.</p>
|
||
<a href="../element-parallax-scrolling.html" target="_blank"><img src="images/parallax-scrolling.jpg" alt="Crafto" /></a>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<span class="comment"><!-- start section --></span>
|
||
<section class="position-relative h-800px parallax-scrolling-style-3" data-parallax-background-ratio="0.5" style="background-image: url('image path');">
|
||
</section>
|
||
<span class="comment"><!-- end section --></span>
|
||
</pre>
|
||
</div>
|
||
<p><span class="label label-danger">Note</span>For demo, You can please check this in <strong><a href="../element-parallax-scrolling.html" target="_blank">element-parallax-scrolling.html</a></strong> page.</p>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="row">
|
||
<div class="col-md-12 docs-content-inner" id="elements-pricing-table">
|
||
<h1>Pricing Table</h1>
|
||
<p>Show off your plans or packages in a creative way by using a pricing table that looks good on different devices. You can highlight important details to make it stand out and grab attention.</p>
|
||
<a href="../element-pricing-table.html" target="_blank"><img src="images/pricing-table.jpg" alt="Crafto" /></a>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<div class="row align-items-center justify-content-center pricing-table-style-06" data-anime='{ "el": "childs", "translateX": [50, 0], "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 150, "easing": "easeOutQuad" }'>
|
||
<span class="comment"><!-- start pricing item --></span>
|
||
<div class="col-lg-4 col-md-8 md-mb-30px">
|
||
<div class="bg-white box-shadow-quadruple-large border-radius-6px p-18 lg-p-13 text-center">
|
||
<h6 class="text-dark-gray fw-600 mb-0">Standard</h6>
|
||
<span class="mb-20px d-inline-block">Unlimited users</span>
|
||
<div class="row align-items-center">
|
||
<div class="col-sm-5 pe-sm-0">
|
||
<h2 class="text-dark-gray mb-0 fw-700 ls-minus-2px text-center text-sm-end"><sup class="fs-28">$</sup>22</h2>
|
||
</div>
|
||
<div class="col-lg-7 col-sm-5 text-center text-sm-start last-paragraph-no-margin fs-15 lh-24">
|
||
<p>per user/month billed annually</p>
|
||
</div>
|
||
</div>
|
||
<ul class="p-0 mt-20px mb-30px list-style-01 text-start lh-normal">
|
||
<li class="border-color-extra-medium-gray pt-20px pb-20px text-dark-gray d-flex"><i class="feather icon-feather-check fs-20 text-green me-10px"></i>Marketing strategy</li>
|
||
<li class="border-color-extra-medium-gray pt-20px pb-20px text-dark-gray d-flex"><i class="feather icon-feather-check fs-20 text-green me-10px"></i>Competitive work analysis</li>
|
||
<li class="border-color-extra-medium-gray pt-20px pb-20px text-dark-gray d-flex"><i class="feather icon-feather-x fs-20 text-red me-10px"></i>Social media share audit</li>
|
||
<li class="border-color-extra-medium-gray pt-20px pb-20px text-dark-gray d-flex"><i class="feather icon-feather-x fs-20 text-red me-10px"></i>Monthly management</li>
|
||
</ul>
|
||
<div class="pricing-footer w-100">
|
||
<a href="#" class="btn btn-medium btn-dark-gray btn-round-edge w-100 btn-box-shadow fw-600">Choose package</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<span class="comment"><!-- end pricing item --></span>
|
||
<span class="comment"><!-- start pricing item --></span>
|
||
<div class="col-lg-4 col-md-8 md-mb-30px">
|
||
<div class="bg-white box-shadow-quadruple-large border-radius-6px p-18 lg-p-13 text-center">
|
||
<span class="ps-15px pe-15px mb-20px text-uppercase text-white fs-12 lh-26 alt-font fw-700 border-radius-4px bg-dark-gray d-inline-block">Popular </span>
|
||
<h6 class="text-dark-gray fw-600 mb-0">Business</h6>
|
||
<span class="mb-20px d-inline-block">Unlimited users</span>
|
||
<div class="row align-items-center">
|
||
<div class="col-sm-5 pe-sm-0">
|
||
<h2 class="text-dark-gray mb-0 fw-700 ls-minus-2px text-center text-sm-end"><sup class="fs-28">$</sup>44</h2>
|
||
</div>
|
||
<div class="col-lg-7 col-sm-5 text-center text-sm-start last-paragraph-no-margin fs-15 lh-24">
|
||
<p>per user/month billed annually</p>
|
||
</div>
|
||
</div>
|
||
<ul class="p-0 mt-20px mb-30px list-style-01 text-start lh-normal">
|
||
<li class="border-color-extra-medium-gray pt-20px pb-20px text-dark-gray d-flex"><i class="feather icon-feather-check fs-20 text-green me-10px"></i>Marketing strategy</li>
|
||
<li class="border-color-extra-medium-gray pt-20px pb-20px text-dark-gray d-flex"><i class="feather icon-feather-check fs-20 text-green me-10px"></i>Competitive work analysis</li>
|
||
<li class="border-color-extra-medium-gray pt-20px pb-20px text-dark-gray d-flex"><i class="feather icon-feather-check fs-20 text-green me-10px"></i>Social media share audit</li>
|
||
<li class="border-color-extra-medium-gray pt-20px pb-20px text-dark-gray d-flex"><i class="feather icon-feather-x fs-20 text-red me-10px"></i>Monthly management</li>
|
||
</ul>
|
||
<div class="pricing-footer w-100">
|
||
<a href="#" class="btn btn-medium btn-gradient-pink-orange btn-round-edge w-100 btn-box-shadow fw-600">Choose package</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<span class="comment"><!-- end pricing item --></span>
|
||
<span class="comment"><!-- start pricing item --></span>
|
||
<div class="col-lg-4 col-md-8">
|
||
<div class="bg-white box-shadow-quadruple-large border-radius-6px p-18 lg-p-13 text-center">
|
||
<h6 class="text-dark-gray fw-600 mb-0">Ultimate</h6>
|
||
<span class="mb-20px d-inline-block">Unlimited users</span>
|
||
<div class="row align-items-center">
|
||
<div class="col-sm-5 pe-sm-0">
|
||
<h2 class="text-dark-gray mb-0 fw-700 ls-minus-2px text-center text-sm-end"><sup class="fs-28">$</sup>33</h2>
|
||
</div>
|
||
<div class="col-lg-7 col-sm-5 text-center text-sm-start last-paragraph-no-margin fs-15 lh-24">
|
||
<p>per user/month billed annually</p>
|
||
</div>
|
||
</div>
|
||
<ul class="p-0 mt-20px mb-30px list-style-01 text-start lh-normal">
|
||
<li class="border-color-extra-medium-gray pt-20px pb-20px text-dark-gray d-flex"><i class="feather icon-feather-check fs-20 text-green me-10px"></i>Marketing strategy</li>
|
||
<li class="border-color-extra-medium-gray pt-20px pb-20px text-dark-gray d-flex"><i class="feather icon-feather-check fs-20 text-green me-10px"></i>Competitive work analysis</li>
|
||
<li class="border-color-extra-medium-gray pt-20px pb-20px text-dark-gray d-flex"><i class="feather icon-feather-check fs-20 text-green me-10px"></i>Social media share audit</li>
|
||
<li class="border-color-extra-medium-gray pt-20px pb-20px text-dark-gray d-flex"><i class="feather icon-feather-check fs-20 text-green me-10px"></i>Monthly management</li>
|
||
</ul>
|
||
<div class="pricing-footer w-100">
|
||
<a href="#" class="btn btn-medium btn-dark-gray btn-round-edge w-100 btn-box-shadow fw-600">Choose package</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<span class="comment"><!-- end pricing item --></span>
|
||
</div>
|
||
</pre>
|
||
</div>
|
||
<p><span class="label label-danger">Note</span>For demo, You can please check this in <strong><a href="../element-pricing-table.html" target="_blank">element-pricing-table.html</a></strong> page.</p>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="row">
|
||
<div class="col-md-12 docs-content-inner" id="elements-process-step">
|
||
<h1>Process Step</h1>
|
||
<p>Process steps is a visual component designed to showcase a series of steps or stages in a process. This element is commonly used to guide users through a sequence of actions or provide a visual representation of a workflow.</p>
|
||
<a href="../element-process-step.html" target="_blank"><img src="images/process-step.jpg" alt="Crafto" /></a>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<div class="row row-cols-1 row-cols-md-3 justify-content-center" data-anime='{ "el": "childs", "translateX": [-30, 0], "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 300, "easing": "easeOutQuad" }'>
|
||
<span class="comment"><!-- start process step item --></span>
|
||
<div class="col text-center last-paragraph-no-margin hover-box process-step-style-01 sm-mb-40px">
|
||
<div class="process-step-icon-box position-relative mb-25px">
|
||
<span class="progress-step-separator bg-white w-60 separator-line-1px opacity-2"></span>
|
||
<div class="process-step-icon d-flex justify-content-center align-items-center mx-auto rounded-circle h-80px w-80px fs-18 bg-white box-shadow-large text-dark-gray alt-font fw-500">
|
||
<span class="fw-600 number position-relative z-index-1">01</span>
|
||
<div class="box-overlay bg-base-color rounded-circle"></div>
|
||
</div>
|
||
</div>
|
||
<span class="d-inline-block fs-17 fw-500 text-white mb-5px">Choose a hosting</span>
|
||
<p class="w-80 md-w-90 d-inline-block">Lorem ipsum is simply dummy text typesetting industry.</p>
|
||
</div>
|
||
<span class="comment"><!-- end process step item --></span>
|
||
<span class="comment"><!-- start process step item --></span>
|
||
<div class="col text-center last-paragraph-no-margin hover-box process-step-style-01 sm-mb-40px">
|
||
<div class="process-step-icon-box position-relative mb-25px">
|
||
<span class="progress-step-separator bg-white w-60 separator-line-1px opacity-2"></span>
|
||
<div class="process-step-icon d-flex justify-content-center align-items-center mx-auto rounded-circle h-80px w-80px fs-18 bg-white box-shadow-large text-dark-gray alt-font fw-500">
|
||
<span class="fw-600 number position-relative z-index-1">02</span>
|
||
<div class="box-overlay bg-base-color rounded-circle"></div>
|
||
</div>
|
||
</div>
|
||
<span class="d-inline-block fs-17 fw-500 text-white mb-5px">Select a domain</span>
|
||
<p class="w-80 md-w-90 d-inline-block">Lorem ipsum is simply dummy text typesetting industry.</p>
|
||
</div>
|
||
<span class="comment"><!-- end process step item --></span>
|
||
<span class="comment"><!-- start process step item --></span>
|
||
<div class="col text-center last-paragraph-no-margin hover-box process-step-style-01">
|
||
<div class="process-step-icon-box position-relative mb-25px">
|
||
<span class="progress-step-separator bg-white w-60 separator-line-1px opacity-2 d-md-none"></span>
|
||
<div class="process-step-icon d-flex justify-content-center align-items-center mx-auto rounded-circle h-80px w-80px fs-18 bg-white box-shadow-large text-dark-gray alt-font fw-500">
|
||
<span class="fw-600 number position-relative z-index-1">03</span>
|
||
<div class="box-overlay bg-base-color rounded-circle"></div>
|
||
</div>
|
||
</div>
|
||
<span class="d-inline-block fs-17 fw-500 text-white mb-5px">Upload your website</span>
|
||
<p class="w-80 md-w-90 d-inline-block">Lorem ipsum is simply dummy text typesetting industry.</p>
|
||
</div>
|
||
<span class="comment"><!-- end process step item --></span>
|
||
</div>
|
||
</pre>
|
||
</div>
|
||
<p><span class="label label-danger">Note</span>For demo, You can please check this in <strong><a href="../element-process-step.html" target="_blank">element-process-step.html</a></strong> page.</p>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="row">
|
||
<div class="col-md-12 docs-content-inner" id="elements-progress-bar">
|
||
<h1>Progress Bar</h1>
|
||
<p>Progress bar is a valuable tool in web design to visually represent the completion or progress of tasks. It enhances user experience by providing clear and concise information, making it a popular choice for various scenarios across different types of websites.</p>
|
||
<h2>Progress Bar</h2>
|
||
<a href="../element-progress-bar.html" target="_blank"><img src="images/progress-bar.jpg" alt="Crafto" /></a>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<div class="row justify-content-center">
|
||
<div class="col-lg-6 progress-bar-style-04 mt-40px">
|
||
<span class="comment"><!-- start progress bar item --></span>
|
||
<div class="progress mb-11 sm-mb-20 bg-transparent alt-font fs-14 fw-500">
|
||
<div class="progress-bar-title text-white d-inline-block alt-font fs-14 ls-1px text-uppercase">Branding</div>
|
||
<div class="progress-bar bg-gradient-emerald-blue-emerald-green m-0" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" aria-label="branding">
|
||
<span class="progress-bar-percent text-white">90%</span>
|
||
</div>
|
||
</div>
|
||
<span class="comment"><!-- end progress bar item --></span>
|
||
<span class="comment"><!-- start progress bar item --></span>
|
||
<div class="progress mb-11 sm-mb-20 bg-transparent alt-font fs-14 fw-500">
|
||
<div class="progress-bar-title text-white d-inline-block alt-font fs-14 ls-1px text-uppercase">Web</div>
|
||
<div class="progress-bar bg-gradient-emerald-blue-emerald-green m-0" role="progressbar" aria-valuenow="82" aria-valuemin="0" aria-valuemax="100" aria-label="web">
|
||
<span class="progress-bar-percent text-white">82%</span>
|
||
</div>
|
||
</div>
|
||
<span class="comment"><!-- end progress bar item --></span>
|
||
<span class="comment"><!-- start progress bar item --></span>
|
||
<div class="progress bg-transparent alt-font fs-14 fw-500">
|
||
<div class="progress-bar-title text-white d-inline-block alt-font fs-14 ls-1px text-uppercase">Graphics</div>
|
||
<div class="progress-bar bg-gradient-emerald-blue-emerald-green m-0" role="progressbar" aria-valuenow="87" aria-valuemin="0" aria-valuemax="100" aria-label="design">
|
||
<span class="progress-bar-percent text-white">87%</span>
|
||
</div>
|
||
</div>
|
||
<span class="comment"><!-- end progress bar item --></span>
|
||
</div>
|
||
</div>
|
||
</pre>
|
||
</div>
|
||
<h2>Pie Chart</h2>
|
||
<a href="../element-progress-bar.html" target="_blank"><img src="images/pie-charts.jpg" alt="Crafto" /></a>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<div class="row row-cols-1 row-cols-lg-4 row-cols-sm-2 mt-6 justify-content-center" data-anime='{ "el": "childs", "translateX": [-50, 0], "opacity": [0,1], "duration": 600, "delay": 100, "staggervalue": 100, "easing": "easeOutQuad" }'<
|
||
<span class="comment"><!-- start pie chart item --<</span>
|
||
<div class="col md-mb-45px"<
|
||
<div class="chart-percent mb-20px"<
|
||
<span class="pie-chart-style-01 d-flex align-items-center justify-content-center" data-line-width="4" data-percent="90" data-track-color="#cccfe3" data-start-color="#1935dd" data-end-color="#6679ec"<
|
||
<span class="percent d-flex align-items-center justify-content-center fs-22 ls-minus-1px fw-600 text-dark-gray bg-gradient-extra-midium-gray-transparent box-shadow-double-large w-100px h-100px rounded-circle"<</span<
|
||
</span<
|
||
</div<
|
||
<div class="chart-text text-center text-dark-gray fw-600 fs-19"<Finance issues</div<
|
||
</div<
|
||
<span class="comment"><!-- end pie chart item --<</span>
|
||
<span class="comment"><!-- start pie chart item --<</span>
|
||
<div class="col md-mb-45px"<
|
||
<div class="chart-percent mb-20px"<
|
||
<span class="pie-chart-style-01 d-flex align-items-center justify-content-center" data-line-width="4" data-percent="92" data-track-color="#cccfe3" data-start-color="#1935dd" data-end-color="#6679ec"<
|
||
<span class="percent d-flex align-items-center justify-content-center fs-22 ls-minus-1px fw-600 text-dark-gray bg-gradient-extra-midium-gray-transparent box-shadow-double-large w-100px h-100px rounded-circle"<</span<
|
||
</span<
|
||
</div<
|
||
<div class="chart-text text-center text-dark-gray fw-600 fs-19"<Cost analysis</div<
|
||
</div<
|
||
<span class="comment"><!-- end pie chart item --<</span>
|
||
<span class="comment"><!-- start pie chart item --<</span>
|
||
<div class="col xs-mb-45px"<
|
||
<div class="chart-percent mb-20px"<
|
||
<span class="pie-chart-style-01 d-flex align-items-center justify-content-center" data-line-width="4" data-percent="94" data-track-color="#cccfe3" data-start-color="#1935dd" data-end-color="#6679ec"<
|
||
<span class="percent d-flex align-items-center justify-content-center fs-22 ls-minus-1px fw-600 text-dark-gray bg-gradient-extra-midium-gray-transparent box-shadow-double-large w-100px h-100px rounded-circle"<</span<
|
||
</span<
|
||
</div<
|
||
<div class="chart-text text-center text-dark-gray fw-600 fs-19"<Profit calculation</div<
|
||
</div<
|
||
<span class="comment"><!-- end pie chart item --<</span>
|
||
<span class="comment"><!-- start pie chart item --<</span>
|
||
<div class="col"<
|
||
<div class="chart-percent mb-20px"<
|
||
<span class="pie-chart-style-01 d-flex align-items-center justify-content-center" data-line-width="4" data-percent="90" data-track-color="#cccfe3" data-start-color="#1935dd" data-end-color="#6679ec"<
|
||
<span class="percent d-flex align-items-center justify-content-center fs-22 ls-minus-1px fw-600 text-dark-gray bg-gradient-extra-midium-gray-transparent box-shadow-double-large w-100px h-100px rounded-circle"<</span<
|
||
</span<
|
||
</div<
|
||
<div class="chart-text text-center text-dark-gray fw-600 fs-19"<Growth ratio</div<
|
||
</div<
|
||
<span class="comment"><!-- end pie chart item --<</span>
|
||
</div<
|
||
</pre>
|
||
</div>
|
||
<h2>Options</h2>
|
||
<ul>
|
||
<li><code>data-line-width</code> This attribute shows the line width of the pie chart which you can change in your own way. As for example understand you is used in this way <code>data-line-width="4"</code></li>
|
||
<li><code>data-percent</code> This attribute shows the percentage of the percentage value in the pie chart showing you what percent of 100 percent the value is shown. For example, understand that you are used this way <code>data-percent="92"</code>.</li>
|
||
<li><code>data-track-color</code> This attribute shows the track color in the pie chart to show you what circle stripe color to put in. For example understand that you are used as <code>data-track-color="#cccfe3"</code>.</li>
|
||
<li><code>data-start-color</code> This attribute shows the start color in the pie chart to show you which color to place above the color of the circular band based on the percentage value. For example, understand that you are using <code>data-start-color="#1935dd"</code>.</li>
|
||
<li><code>data-end-color</code> This attribute shows the end color in the pie chart to show you which color to place above the color of the circular band based on the percentage value. For example, understand that you use <code>data-end-color="#6679ec"</code>.</li>
|
||
</ul>
|
||
<p class="pt-30px"><span class="label label-danger">Note</span>For demo, You can please check this in <strong><a href="../element-progress-bar.html" target="_blank">element-progress-bar.html</a></strong> page.</p>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="row">
|
||
<div class="col-md-12 docs-content-inner" id="elements-review">
|
||
<h1>Review</h1>
|
||
<p>Review element is a valuable feature that allowing users to effectively display reviews and testimonials. It contributes to building trust, attracting potential customers, and enhancing the overall user experience on a website.</p>
|
||
<a href="../element-review.html" target="_blank"><img src="images/review.jpg" alt="Crafto" /></a>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<div class="row row-cols-1 row-cols-xl-3 row-cols-lg-2 row-cols-md-2 position-relative justify-content-center">
|
||
<span class="comment"><!-- start review item --></span>
|
||
<div class="col review-style-02 lg-mb-30px">
|
||
<div class="d-flex justify-content-center h-100 flex-column bg-extra-medium-slate-blue p-13 border-radius-6px last-paragraph-no-margin">
|
||
<div class="mb-20px">
|
||
<img class="rounded-circle w-90px me-20px" src="image path" alt="" />
|
||
<div class="d-inline-block align-middle">
|
||
<div class="review-star-icon lh-24 fs-17">
|
||
<i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i>
|
||
</div>
|
||
<div class="text-white fs-17 fw-500">Herman Miller</div>
|
||
</div>
|
||
</div>
|
||
<p>Lorem ipsum is simply dummy text of the printing typesetting lorem ipsum been dummy text.</p>
|
||
</div>
|
||
</div>
|
||
<span class="comment"><!-- end review item --></span>
|
||
<span class="comment"><!-- start review item --></span>
|
||
<div class="col review-style-02 lg-mb-30px">
|
||
<div class="d-flex justify-content-center h-100 flex-column bg-extra-medium-slate-blue p-13 border-radius-6px last-paragraph-no-margin">
|
||
<div class="mb-20px">
|
||
<img class="rounded-circle w-90px me-20px" src="image path" alt="" />
|
||
<div class="d-inline-block align-middle">
|
||
<div class="review-star-icon lh-24 fs-17">
|
||
<i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i>
|
||
</div>
|
||
<div class="text-white fs-17 fw-500">Alexander Harad</div>
|
||
</div>
|
||
</div>
|
||
<p>Lorem ipsum is simply dummy text of the printing typesetting lorem ipsum been dummy text.</p>
|
||
</div>
|
||
</div>
|
||
<span class="comment"><!-- end review item --></span>
|
||
<span class="comment"><!-- start review item --></span>
|
||
<div class="col review-style-02">
|
||
<div class="d-flex justify-content-center h-100 flex-column bg-extra-medium-slate-blue p-13 border-radius-6px last-paragraph-no-margin">
|
||
<div class="mb-20px">
|
||
<img class="rounded-circle w-90px me-20px" src="image path" alt="" />
|
||
<div class="d-inline-block align-middle">
|
||
<div class="review-star-icon lh-24 fs-17">
|
||
<i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i>
|
||
</div>
|
||
<div class="text-white fs-17 fw-500">Jacob Kalling</div>
|
||
</div>
|
||
</div>
|
||
<p>Lorem ipsum is simply dummy text of the printing typesetting lorem ipsum been dummy text.</p>
|
||
</div>
|
||
</div>
|
||
<span class="comment"><!-- end review item --></span>
|
||
</div>
|
||
</pre>
|
||
</div>
|
||
<p><span class="label label-danger">Note</span>For demo, You can please check this in <strong><a href="../element-review.html" target="_blank">element-review.html</a></strong> page.</p>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="row">
|
||
<div class="col-md-12 docs-content-inner" id="elements-rotate-box">
|
||
<h1>Rotate Box</h1>
|
||
<p>The rotate box element in Crafto theme is a cool tool that lets you make a stylish and informative section on your website. When visitors hover over this section, it creates a fascinating rotating effect, making your content look more dynamic and engaging.</p>
|
||
<a href="../element-rotate-box.html" target="_blank"><img src="images/rotate-box.jpg" alt="Crafto" /></a>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<div class="row row-cols-1 row-cols-lg-3 row-cols-md-2 justify-content-center" data-anime='{ "el": "childs", "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 300, "easing": "easeOutQuad" }'>
|
||
<span class="comment"><!-- start rotate box item --> </span>
|
||
<div class="col text-center rotate-box-style-01 lg-mb-45px" data-bottom-top="transform: translateY(80px)" data-top-bottom="transform: translateY(-80px)">
|
||
<div class="rm-rotate-box text-center">
|
||
<div class="flipper to-left">
|
||
<div class="thumb-wrap">
|
||
<div class="front overflow-hidden h-250px md-h-250px border-radius-4px overflow-hidden" style="background-image:url('image path')">
|
||
</div>
|
||
<div class="back border-radius-4px overflow-hidden">
|
||
<div class="box-overlay bg-dark-gray"></div>
|
||
<div class="content-wrap p-40px xs-p-30px last-paragraph-no-margin">
|
||
<i class="line-icon-Dumbbell align-middle icon-extra-large text-white mb-20px"></i>
|
||
<p class="text-white opacity-7 lh-30 sm-w-70 xs-w-100 mx-auto">Lorem ipsum dolor consectetur adipiscing eiusmod tempor.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<span class="fs-20 d-inline-block mt-30px fw-600 text-dark-gray">Urban fitness centre</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<span class="comment"><!-- end rotate box item --></span>
|
||
<span class="comment"><!-- start rotate box item --></span>
|
||
<div class="col text-center rotate-box-style-01 lg-mb-45px" data-bottom-top="transform: translateY(-40px)" data-top-bottom="transform: translateY(40px)">
|
||
<div class="rm-rotate-box text-center">
|
||
<div class="flipper to-top">
|
||
<div class="thumb-wrap">
|
||
<div class="front overflow-hidden h-250px md-h-250px border-radius-4px overflow-hidden" style="background-image:url('image path')">
|
||
</div>
|
||
<div class="back border-radius-4px overflow-hidden">
|
||
<div class="box-overlay bg-dark-gray"></div>
|
||
<div class="content-wrap p-40px xs-p-30px last-paragraph-no-margin">
|
||
<i class="line-icon-Leafs align-middle icon-extra-large text-white mb-20px"></i>
|
||
<p class="text-white opacity-7 lh-30 sm-w-70 xs-w-100 mx-auto">Lorem ipsum dolor consectetur adipiscing eiusmod tempor.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<span class="fs-20 d-inline-block mt-30px fw-600 text-dark-gray">Luxury spa massage</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<span class="comment"><!-- end rotate box item --></span>
|
||
<span class="comment"><!-- start rotate box item --></span>
|
||
<div class="col text-center rotate-box-style-01 lg-mb-45px" data-bottom-top="transform: translateY(80px)" data-top-bottom="transform: translateY(-80px)">
|
||
<div class="rm-rotate-box text-center">
|
||
<div class="flipper to-right">
|
||
<div class="thumb-wrap">
|
||
<div class="front overflow-hidden h-250px md-h-250px border-radius-4px overflow-hidden" style="background-image:url('image path')">
|
||
</div>
|
||
<div class="back border-radius-4px overflow-hidden">
|
||
<div class="box-overlay bg-dark-gray"></div>
|
||
<div class="content-wrap p-40px xs-p-30px last-paragraph-no-margin">
|
||
<i class="line-icon-Summer align-middle icon-extra-large text-white mb-20px"></i>
|
||
<p class="text-white opacity-7 lh-30 sm-w-70 xs-w-100 mx-auto">Lorem ipsum dolor consectetur adipiscing eiusmod tempor.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<span class="fs-20 d-inline-block mt-30px fw-600 text-dark-gray">Secure private beach</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<span class="comment"><!-- end rotate box item --></span>
|
||
</div>
|
||
</pre>
|
||
</div>
|
||
<p><span class="label label-danger">Note</span>For demo, You can please check this in <strong><a href="../element-rotate-box.html" target="_blank">element-rotate-box.html</a></strong> page.</p>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="row">
|
||
<div class="col-md-12 docs-content-inner" id="elements-scrolling-effects">
|
||
<h1>Scrolling Effects</h1>
|
||
<p>The scrolling effect is like a classic parallax trick. When you scroll up or down, a specific part of the page moves at a different speed than the rest, following your scroll but at its own pace and in the way you decide. It adds a dynamic touch to your website.</p>
|
||
<a href="../element-scrolling-effects.html" target="_blank"><img src="images/scrolling-effects.jpg" alt="Crafto" /></a>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<div class="page-content position-relative">
|
||
<span class="comment"><!-- start section --></span>
|
||
<section class="bg-dark-gray position-relative overflow-hidden cover-background" style="background-image: url('image path')" data-background="#0f0708">
|
||
<div class="p-0 position-absolute end-0 mt-15 text-end" data-bottom-top="transform: translateY(-100px)" data-top-bottom="transform: translateY(100px)">
|
||
<img src="image path" alt="">
|
||
</div>
|
||
<div class="container h-100">
|
||
<div class="row justify-content-center align-items-center h-100">
|
||
<div class="col-12 position-relative text-center">
|
||
<h2 class="fs-180 lg-fs-150 sm-fs-100 fw-700 text-white mb-0 position-absolute left-minus-20px lg-left-0px z-index-1 mt-24 ls-minus-5px" data-bottom-top="transform: translate3d(-80px, 0px, 0px);" data-top-bottom="transform: translate3d(80px, 0px, 0px);">Natural</h2>
|
||
<div class="position-absolute left-100px md-left-0px mt-27 lg-w-650px d-none d-md-inline-block" data-anime='{ "translateX": [-50, 1], "opacity": [0,1], "duration": 600, "delay": 500, "staggervalue":200, "easing": "easeOutQuad" }' data-bottom-top="transform: rotate(-10deg) translateX(-60px) translateY(-30px);" data-top-bottom="transform:rotate(10deg) translateX(60px) translateY(30px)">
|
||
<img src="image path" alt="">
|
||
</div>
|
||
<img class="position-relative z-index-1 sm-w-70" src="image path" alt="" data-bottom-top="transform:scale(1, 1)" data-top-bottom="transform:scale(0.8, 0.8)">
|
||
<h2 class="fs-180 lg-fs-150 sm-fs-100 fw-700 text-white mb-28 pe-70px md-pe-0 position-absolute start-0 bottom-0px w-100 text-end z-index-2 text-shadow-large ls-minus-5px" data-bottom-top="transform: translate3d(80px, 0px, 0px);" data-top-bottom="transform: translate3d(-80px, 0px, 0px);">wine</h2>
|
||
<div class="position-absolute top-150px right-50px d-none d-md-inline-block" data-bottom-top="transform: translateY(-50px)" data-top-bottom="transform: translateY(50px)">
|
||
<img src="image path" class="animation-rotation" alt="">
|
||
</div>
|
||
<div class="position-absolute top-50 start-50 z-index-2 ms-10" data-bottom-top="transform: translateY(50px)" data-top-bottom="transform: translateY(-50px)">
|
||
<img src="image path" class="animation-rotation" alt="">
|
||
</div>
|
||
<div class="position-absolute bottom-150px left-70px z-index-2" data-bottom-top="transform: translateY(50px)" data-top-bottom="transform: translateY(-50px)">
|
||
<img src="image path" alt="">
|
||
</div>
|
||
<div class="position-absolute bottom-150px right-100px lg-right-0px md-w-500px d-none d-md-inline-block" data-anime='{ "translateX": [50, 1], "opacity": [0,1], "duration": 600, "delay": 1000, "staggervalue":200, "easing": "easeOutQuad" }' data-bottom-top="transform: rotate(10deg) translateX(60px) translateY(30px);" data-top-bottom="transform:rotate(-10deg) translateX(-60px) translateY(-30px)">
|
||
<img src="image path" alt="">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<span class="comment"><!-- end section --></span>
|
||
</div>
|
||
</pre>
|
||
</div>
|
||
<h2>Options</h2>
|
||
<ul>
|
||
<li><code>data-bottom-top</code> - Here the data-bottom-top attribute shows that the element is moved from bottom to top and from top to bottom while scrolling.</li>
|
||
<li><code>data-top-bottom</code> - Here the data-top-bottom attribute shows that the element is moved from top to bottom and from bottom to top while scrolling.</li>
|
||
<li><code>filter</code> - The filter property defines visual effects (like blur and saturation) to an element (often <img>).<br>filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url()<br>
|
||
<strong>Like Example:</strong><br>
|
||
<ol>
|
||
<li><code>none</code> - Default value. Specifies no effects.</li>
|
||
<li><code>blur(px)</code> - Applies a blur effect to the image. A larger value will create more blur.</li>
|
||
<li><code>brightness(%)</code> - Adjusts the brightness of the image.</li>
|
||
<li><code>contrast(%)</code> - Adjusts the contrast of the image.</li>
|
||
<li><code>drop-shadow(h-shadow v-shadow blur spread color)</code> - Applies a drop shadow effect to the image.</li>
|
||
<li><code>grayscale(%)</code> - Converts the image to grayscale.</li>
|
||
<li><code>hue-rotate(deg)</code> - Inverts the samples in the image.</li>
|
||
<li><code>opacity(%)</code> - Sets the opacity level for the image. The opacity-level describes the transparency-level, where:</li>
|
||
<li><code>saturate(%)</code> - Saturates the image.</li>
|
||
<li><code>sepia(%)</code> - Converts the image to sepia.</li>
|
||
<li><code>url()</code> - The url() function takes the location of an XML file that specifies an SVG filter, and may include an anchor to a specific filter element.<br>Example: filter: url(svg-url#element-id)</li>
|
||
</ol>
|
||
You can find the filter related documentation here.<a href="https://www.w3schools.com/cssref/css3_pr_filter.php" target="_blank"> filter property</a>.
|
||
</li>
|
||
</ul>
|
||
<h3 class="pt-30px">Properties</h3>
|
||
<p>Any CSS properties can be animated.</p>
|
||
<div class="panel panel-default params-table grid-table">
|
||
<table class="table">
|
||
<tbody>
|
||
<tr>
|
||
<th>Properties</th>
|
||
<th>Value</th>
|
||
<th>Description</th>
|
||
</tr>
|
||
<tr>
|
||
<td><code>translate3d</code></td>
|
||
<td>number</td>
|
||
<td>translate3d(80px, 0px, 0px) - The translate3d property is used to reposition an element in 3D space. Syntax: translate3d( tx, ty, tz ).</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>translateX</code></td>
|
||
<td>number</td>
|
||
<td>"translateX": [-30, 0] - The translateX property is used to translate the element along the horizontal axis. </td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>translateY</code></td>
|
||
<td>number</td>
|
||
<td>"translateY": [30, 0] - The translateY property is used to reposition an element along the vertical axis.</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>translateZ</code></td>
|
||
<td>number</td>
|
||
<td>"translateZ": [30, 0] - The translateZ property This property applies to translating an element along the z-axis in 3D space.</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>rotate</code></td>
|
||
<td>number</td>
|
||
<td>"rotate": [10, 0] - The rotate property is used to rotate the element as argument based on the given angle. The angle can be set in terms of degrees, gradians, radians, or turns.</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>rotateX</code></td>
|
||
<td>number</td>
|
||
<td>"rotateX": [60, 0] - The rotateX property is used to rotate an element around the x-axis.</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>rotateY</code></td>
|
||
<td>number</td>
|
||
<td>"rotateY": [45, 0] - The rotateY property is used to rotate the element around a vertical axis.</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>rotateZ</code></td>
|
||
<td>number</td>
|
||
<td>"rotateZ": [10, 0] - The rotateZ property is used to rotate an element around the z-axis.</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>scale</code></td>
|
||
<td>number</td>
|
||
<td>"scale": [1.1, 1] - The Scale property is used to resize an element in a 2D plane. It scales elements horizontally and vertically.</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>scaleX</code></td>
|
||
<td>number</td>
|
||
<td>"scaleX": [1.1, 1] - The ScaleX property is used to resize an element along the x-axis in a 2D plane. It measures elements horizontally.</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>scaleY</code></td>
|
||
<td>number</td>
|
||
<td>"scaleY": [0, 1] - The scaleY property is used to scale an element along the y-axis in a 2D plane. It measures elements vertically.</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>scaleZ</code></td>
|
||
<td>number</td>
|
||
<td>"scaleZ": [1.5, 1] - The ScaleZ property is used to resize an element along the z-axis.</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>skew</code></td>
|
||
<td>number</td>
|
||
<td>"skew": [45, 0] - The skew property is used to transform an element in a 2D plane. Skewing an element means picking a point and pushing or pulling it in different directions.</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>skewX</code></td>
|
||
<td>number</td>
|
||
<td>"skewX": [45,0] - The skewX property is used to transform an element horizontally in a 2D plane.</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>skewY</code></td>
|
||
<td>number</td>
|
||
<td>"skewY": [45,0] - The skewY property is used to transform an element vertically in a 2D plane.</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>perspective</code></td>
|
||
<td>number</td>
|
||
<td>"perspective": 800 - The perspective property is used with the transform property to set the perspective effect on images.</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>opacity</code></td>
|
||
<td>number</td>
|
||
<td>"opacity": [0, 1] - The Opacity property is used to set the transparency of the image to apply a filter to the image. From 0.0 (fully transparent) to 1.0 (fully opaque).</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>duration</code></td>
|
||
<td>number</td>
|
||
<td>"duration": 600 - property sets the length of time that an animation takes to complete one cycle.</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>delay</code></td>
|
||
<td>number</td>
|
||
<td>"delay": 100 - The delay property defines when the animation will start.</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>easing</code></td>
|
||
<td></td>
|
||
<td>"easing": "easeOutQuad" - This keyword represents the interpolation starts slowly, then progressively speeds up until the end, at which point it stops abruptly It indicates.<br> more example code source link <a href="https://easings.net/" target="_blank">source link</a></td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>staggervalue</code></td>
|
||
<td>number</td>
|
||
<td>"staggervalue": 300 - When using an animation parameter inside stagger like stagger like delay the animation fails, because the parameter is not replaced.</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<p><span class="label label-danger">Note</span> For demo, You can please check this in <strong><a href="../element-scrolling-effects.html" target="_blank">element-scrolling-effects.html</a></strong> page.</p>
|
||
<br>
|
||
<p class="mb-0">You can find the Scrolling Effects related documentation here.</p>
|
||
<a class="button" href="https://animejs.com/documentation/" target="_blank">Read Scrolling Document</a>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="row">
|
||
<div class="col-md-12 docs-content-inner" id="elements-services-box">
|
||
<h1>Services Box</h1>
|
||
<p>Services box is a useful element in Crafto for presenting and highlighting the services offered by your website or business. It contributes to a positive user experience by providing clear and concise information about each service in a visually appealing format.</p>
|
||
<a href="../element-services-box.html" target="_blank"><img src="images/services-box.jpg" alt="Crafto" /></a>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<div class="row row-cols-1 row-cols-lg-3 row-cols-md-2 justify-content-center mb-5 sm-mb-35px" data-anime='{ "el": "childs", "translateY": [30, 0], "opacity": [0,1], "duration": 600, "delay": 100, "staggervalue": 200, "easing": "easeOutQuad" }'>
|
||
<div class="col md-mb-30px">
|
||
<span class="comment"><!-- start services box style --></span>
|
||
<div class="box-shadow-quadruple-large box-shadow-quadruple-large-hover services-box-style-03 last-paragraph-no-margin border-radius-4px overflow-hidden">
|
||
<div class="position-relative">
|
||
<a href="#"><img src="image path" alt=""></a>
|
||
<a href="#" class="btn btn-small btn-rounded btn-white text-dark-gray btn-box-shadow ps-15px pe-15px pt-5px pb-5px lh-16 ls-0px fw-700 position-absolute right-25px top-25px">Education</a>
|
||
</div>
|
||
<div class="bg-white">
|
||
<div class="ps-50px pe-50px pt-20px pb-30px xl-ps-20px xl-pe-20px text-center progress-bar-style-01">
|
||
<a href="demo-charity-blog-single-simple.html" class="d-inline-block fs-20 fw-600 text-dark-gray text-dark-gray-hover mb-5px ls-minus-05px">Education for children</a>
|
||
<p>Lorem ipsum dolor consectetur adipiscing eiusmod tempor.</p>
|
||
<span class="comment"><!-- start progress bar item --></span>
|
||
<div class="progress mt-50px mb-15px bg-zircon-grey border-radius-6px h-7px">
|
||
<div class="progress-bar bg-dark-gray border-radius-6px h-7px" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" aria-label="child-issue-one">
|
||
<span class="progress-bar-percent text-center bg-dark-gray fs-11 lh-12 fw-500 text-white">80%</span>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-6 text-start">
|
||
<div class="fs-15 lh-normal"><span class="fw-500 text-dark-gray d-block d-xl-inline-block">Goal:</span> $30,000</div>
|
||
</div>
|
||
<div class="col-6 text-end">
|
||
<div class="fs-15 lh-normal"><span class="fw-500 text-dark-gray d-block d-xl-inline-block">Raised:</span> $22,000</div>
|
||
</div>
|
||
</div>
|
||
<span class="comment"><!-- end progress bar item --></span>
|
||
</div>
|
||
<div class="border-top border-color-extra-medium-gray pt-15px pb-20px text-center">
|
||
<a href="demo-charity-blog-single-simple.html" class="btn btn-link btn-hover-animation-switch btn-large text-dark-gray fw-700">
|
||
<span>
|
||
<span class="btn-text">Explore more</span>
|
||
<span class="btn-icon"><i class="fa-solid fa-arrow-right"></i></span>
|
||
<span class="btn-icon"><i class="fa-solid fa-arrow-right"></i></span>
|
||
</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<span class="comment"><!-- end services box style --></span>
|
||
</div>
|
||
<div class="col md-mb-30px">
|
||
<span class="comment"><!-- start services box style --></span>
|
||
<div class="box-shadow-quadruple-large box-shadow-quadruple-large-hover services-box-style-03 last-paragraph-no-margin border-radius-4px overflow-hidden">
|
||
<div class="position-relative">
|
||
<a href="#"><img src="image path" alt=""></a>
|
||
<a href="#" class="btn btn-small btn-rounded btn-white text-dark-gray btn-box-shadow ps-15px pe-15px pt-5px pb-5px lh-16 ls-0px fw-700 position-absolute right-25px top-25px">Support</a>
|
||
</div>
|
||
<div class="bg-white">
|
||
<div class="ps-50px pe-50px pt-20px pb-30px xl-ps-20px xl-pe-20px text-center progress-bar-style-01">
|
||
<a href="demo-charity-blog-single-simple.html" class="d-inline-block fs-20 fw-600 text-dark-gray text-dark-gray-hover mb-5px ls-minus-05px">Build a secure happy life</a>
|
||
<p>Lorem ipsum dolor consectetur adipiscing eiusmod tempor.</p>
|
||
<span class="comment"><!-- start progress bar item --></span>
|
||
<div class="progress mt-50px mb-15px bg-zircon-grey border-radius-6px h-7px">
|
||
<div class="progress-bar bg-dark-gray border-radius-6px h-7px" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" aria-label="child-issue-two">
|
||
<span class="progress-bar-percent text-center bg-dark-gray fs-11 lh-12 fw-500 text-white">90%</span>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-6 text-start">
|
||
<div class="fs-15 lh-normal"><span class="fw-500 text-dark-gray d-block d-xl-inline-block">Goal:</span> $50,000</div>
|
||
</div>
|
||
<div class="col-6 text-end">
|
||
<div class="fs-15 lh-normal"><span class="fw-500 text-dark-gray d-block d-xl-inline-block">Raised:</span> $55,000</div>
|
||
</div>
|
||
</div>
|
||
<span class="comment"><!-- end progress bar item --></span>
|
||
</div>
|
||
<div class="border-top border-color-extra-medium-gray pt-15px pb-20px text-center">
|
||
<a href="demo-charity-blog-single-simple.html" class="btn btn-link btn-hover-animation-switch btn-large text-dark-gray fw-700">
|
||
<span>
|
||
<span class="btn-text">Explore more</span>
|
||
<span class="btn-icon"><i class="fa-solid fa-arrow-right"></i></span>
|
||
<span class="btn-icon"><i class="fa-solid fa-arrow-right"></i></span>
|
||
</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<span class="comment"><!-- end services box style --></span>
|
||
</div>
|
||
<div class="col">
|
||
<span class="comment"><!-- start services box style --></span>
|
||
<div class="box-shadow-quadruple-large box-shadow-quadruple-large-hover services-box-style-03 last-paragraph-no-margin border-radius-4px overflow-hidden">
|
||
<div class="position-relative">
|
||
<a href="#"><img src="image path" alt=""></a>
|
||
<a href="#" class="btn btn-small btn-rounded btn-white text-dark-gray btn-box-shadow ps-15px pe-15px pt-5px pb-5px lh-16 ls-0px fw-700 position-absolute right-25px top-25px">Childhood</a>
|
||
</div>
|
||
<div class="bg-white">
|
||
<div class="ps-50px pe-50px pt-20px pb-30px xl-ps-20px xl-pe-20px text-center progress-bar-style-01">
|
||
<a href="demo-charity-blog-single-simple.html" class="d-inline-block fs-20 fw-600 text-dark-gray text-dark-gray-hover mb-5px ls-minus-05px">Save childhood africa</a>
|
||
<p>Lorem ipsum dolor consectetur adipiscing eiusmod tempor.</p>
|
||
<span class="comment"><!-- start progress bar item --></span>
|
||
<div class="progress mt-50px mb-15px bg-zircon-grey border-radius-6px h-7px">
|
||
<div class="progress-bar bg-dark-gray border-radius-6px h-7px" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" aria-label="child-issue-three">
|
||
<span class="progress-bar-percent text-center bg-dark-gray fs-11 lh-12 fw-500 text-white">50%</span>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-6 text-start">
|
||
<div class="fs-15 lh-normal"><span class="fw-500 text-dark-gray d-block d-xl-inline-block">Goal:</span> $50,000</div>
|
||
</div>
|
||
<div class="col-6 text-end">
|
||
<div class="fs-15 lh-normal"><span class="fw-500 text-dark-gray d-block d-xl-inline-block">Raised:</span> $25,000</div>
|
||
</div>
|
||
</div>
|
||
<span class="comment"><!-- end progress bar item --></span>
|
||
</div>
|
||
<div class="border-top border-color-extra-medium-gray pt-15px pb-20px text-center">
|
||
<a href="demo-charity-blog-single-simple.html" class="btn btn-link btn-hover-animation-switch btn-large text-dark-gray fw-700">
|
||
<span>
|
||
<span class="btn-text">Explore more</span>
|
||
<span class="btn-icon"><i class="fa-solid fa-arrow-right"></i></span>
|
||
<span class="btn-icon"><i class="fa-solid fa-arrow-right"></i></span>
|
||
</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<span class="comment"><!-- end services box style --></span>
|
||
</div>
|
||
</div>
|
||
</pre>
|
||
</div>
|
||
<p><span class="label label-danger">Note</span>For demo, You can please check this in <strong><a href="../element-services-box.html" target="_blank">element-services-box.html</a></strong> page.</p>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="row">
|
||
<div class="col-md-12 docs-content-inner" id="element-shape-divider">
|
||
<h1>Shape Divider</h1>
|
||
<p>Shape divider is a design element that enhances the visual appeal by allowing users to add decorative shapes between sections and containers. It adds a creative flair to webpage layouts and contributes to a more engaging and aesthetically pleasing user experience.</p>
|
||
<a href="../element-shape-dividers.html" target="_blank"><img src="images/shape-dividers.jpg" alt="Crafto" /></a>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<span class="comment"><!-- start section --></span>
|
||
<section class="bg-extra-dark-slate-blue position-relative pb-0">
|
||
<div class="container">
|
||
<div class="row mb-5">
|
||
<div class="col-11">
|
||
<span class="fs-80 md-fs-70 sm-fs-60 text-white fw-500 ls-minus-2px" data-fancy-text='{ "opacity": [0, 1], "translateY": [50, 0], "translateX": [50, 0], "filter": ["blur(20px)", "blur(0px)"], "string": ["It's so challenging to find a good team to do great things. But we can provide you the best one."], "duration": 400, "delay": 0, "speed": 20, "easing": "easeOutQuad" }'></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="page-divider-wrapper">
|
||
<svg aria-hidden="true" fill="#fff" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 100" preserveAspectRatio="none"><path d="M 0 45.86 h 458 c 29 0 42 19.27 42 19.27 s 13 -19.27 42.74 -19.27 h 457.26 v 54.14 h -1000 z"></path></svg>
|
||
</div>
|
||
</section>
|
||
<span class="comment"><!-- end section --></span>
|
||
</pre>
|
||
</div>
|
||
<p><span class="label label-danger">Note</span>For demo, You can please check this in <strong><a href="../element-shape-dividers.html" target="_blank">element-shape-dividers.html</a></strong> page.</p>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="row">
|
||
<div class="col-md-12 docs-content-inner" id="element-sliding-box">
|
||
<h1>Sliding Box</h1>
|
||
<p>Sliding boxes are a cool way to show important info on your website. When visitors hover their mouse over the info, the box slides to reveal more details. You can also close the box when you're done reading the info. It's a neat and interactive way to share information.</p>
|
||
<a href="../element-sliding-box.html" target="_blank"><img src="images/sliding-box.jpg" alt="Crafto" /></a>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<div class="row justify-content-center">
|
||
<div class="col-12 sliding-box sliding-box-style-01 d-flex lg-flex-nowrap flex-wrap">
|
||
<span class="comment"><!-- start sliding box item --></span>
|
||
<div class="sliding-box-item box-shadow-extra-large md-mb-30px">
|
||
<div class="sliding-box-img">
|
||
<img src="image path" alt="" class="w-100" />
|
||
</div>
|
||
<div class="d-flex flex-column align-items-start justify-content-center sliding-box-content bg-white p-60px md-p-40px xl-p-30px">
|
||
<div class="content-hover w-100">
|
||
<div class="d-inline-block fs-15 text-uppercase fw-600 text-gradient-pink-orange mb-5px">Digital</div>
|
||
<div class="fs-26 lh-32 ls-minus-1px fw-600 text-dark-gray mb-15px">Web development premium solutions</div>
|
||
<p class="mb-30px">Lorem ipsum is simply dummy text the printing typesetting.</p>
|
||
<a href="#" class="btn btn-medium btn-gradient-pink-orange btn-rounded">Explore more</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<span class="comment"><!-- end sliding box item --></span>
|
||
<span class="comment"><!-- start sliding box item --></span>
|
||
<div class="sliding-box-item box-shadow-extra-large active md-mb-30px">
|
||
<div class="sliding-box-img">
|
||
<img src="image path" alt="" class="w-100" />
|
||
</div>
|
||
<div class="d-flex flex-column align-items-start justify-content-center sliding-box-content bg-white p-65px md-p-40px xl-p-30px">
|
||
<div class="content-hover w-100">
|
||
<div class="d-inline-block fs-15 text-uppercase fw-600 text-gradient-pink-orange mb-5px">Branding</div>
|
||
<div class="fs-26 lh-32 ls-minus-1px fw-600 text-dark-gray mb-15px">Perfect design delivered to you</div>
|
||
<p class="mb-30px">Lorem ipsum is simply dummy text the printing typesetting.</p>
|
||
<a href="#" class="btn btn-medium btn-gradient-pink-orange btn-rounded">Explore more</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<span class="comment"><!-- end sliding box item --></span>
|
||
<span class="comment"><!-- start sliding box item --></span>
|
||
<div class="sliding-box-item box-shadow-extra-large">
|
||
<div class="sliding-box-img">
|
||
<img src="image path" alt="" class="w-100" />
|
||
</div>
|
||
<div class="d-flex flex-column align-items-start justify-content-center sliding-box-content bg-white p-60px md-p-40px xl-p-30px">
|
||
<div class="content-hover w-100">
|
||
<div class="d-inline-block fs-15 text-uppercase fw-600 text-gradient-pink-orange mb-5px">Graphic</div>
|
||
<div class="fs-26 lh-32 ls-minus-1px fw-600 text-dark-gray mb-15px">We are creative perfect frame work</div>
|
||
<p class="mb-30px">Lorem ipsum is simply dummy text the printing typesetting.</p>
|
||
<a href="#" class="btn btn-medium btn-gradient-pink-orange btn-rounded">Explore more</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<span class="comment"><!-- end sliding box item --></span>
|
||
</div>
|
||
</div>
|
||
</pre>
|
||
</div>
|
||
<p><span class="label label-danger">Note</span>For demo, You can please check this in <strong><a href="../element-sliding-box.html" target="_blank">element-sliding-box.html</a></strong> page.</p>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="row">
|
||
<div class="col-md-12 docs-content-inner" id="elements-social-icon">
|
||
<h1>Social Icon</h1>
|
||
<p>The social icon feature in a Crafto allows you to display links to your social media profiles on your website. This element is commonly found in headers, footers, sidebars, or other designated areas of a theme.</p>
|
||
<a href="../element-social-icons.html" target="_blank"><img src="images/social-icons.jpg" alt="Crafto" /></a>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<div class="row justify-content-center">
|
||
<span class="comment"><!-- start social icons --></span>
|
||
<div class="col-lg-12 col-md-12 col-sm-12 text-center elements-social social-icon-style-03">
|
||
<ul class="large-icon">
|
||
<li><a class="facebook" href="https://www.facebook.com/" target="_blank"><i class="fa-brands fa-facebook-f"></i></a></li>
|
||
<li><a class="twitter" href="http://www.twitter.com" target="_blank"><i class="fa-brands fa-twitter"></i></a></li>
|
||
<li><a class="google" href="http://plus.google.com" target="_blank"><i class="fa-brands fa-google-plus-g"></i></a></li>
|
||
<li><a class="dribbble" href="http://www.dribbble.com" target="_blank"><i class="fa-brands fa-dribbble"></i></a></li>
|
||
<li><a class="linkedin" href="http://www.linkedin.com" target="_blank"><i class="fa-brands fa-linkedin-in"></i></a></li>
|
||
<li><a class="instagram" href="http://www.instagram.com" target="_blank"><i class="fa-brands fa-instagram"></i></a></li>
|
||
<li><a class="behance" href="http://www.behance.com/" target="_blank"><i class="fa-brands fa-behance"></i></a></li>
|
||
</ul>
|
||
</div>
|
||
<span class="comment"><!-- end social icons --></span>
|
||
</div>
|
||
</pre>
|
||
</div>
|
||
<p><span class="label label-danger">Note</span>For demo, You can please check this in <strong><a href="../element-social-icons.html" target="_blank">element-social-icons.html</a></strong> page.</p>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="row">
|
||
<div class="col-md-12 docs-content-inner" id="elements-sticky-column">
|
||
<h1>Sticky Column</h1>
|
||
<p>Sticky column is a helpful feature that lets you make a column stay in place as you scroll through a section. It's great for keeping important content visible while users check out other parts of a webpage.</p>
|
||
<a href="../element-sticky-column.html" target="_blank"><img src="images/sticky-column.jpg" alt="Crafto" /></a>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<span class="comment"><!-- start section --></span>
|
||
<section class="p-0 position-relative" style="background: #d9e8d7">
|
||
<div class="cover-background full-screen position-absolute left-0px top-0px w-100" style="background-image: url('image path')"></div>
|
||
<div id="particles-style-04" class="position-absolute h-100 top-0 left-0 w-100" data-particle="true" data-particle-options='{"particles":{"number":{"value":5,"density":{"enable":true,"value_area":800}},"color":{"value": "#232323"},"shape":{"type":"circle","stroke":{"width":0,"color":"#000000"},"polygon":{"nb_sides":5},"image":{"src":"img/github.svg","width":100,"height":100}},"opacity":{"value":1,"random":false,"anim":{"enable":false,"speed":1,"opacity_min":0.1,"sync":false}},"size":{"value":6,"random":true,"anim":{"enable":false,"speed":40,"size_min":0.1,"sync":false}},"line_linked":{"enable":false,"distance":150,"color":"#ffffff","opacity":0.4,"width":1},"move":{"enable":true,"speed":6,"direction":"none","random":false,"straight":false,"out_mode":"out","bounce":false,"attract":{"enable":false,"rotateX":600,"rotateY":1200}}},"interactivity":{"detect_on":"canvas","events":{"onhover":{"enable":true,"mode":"repulse"},"onclick":{"enable":true,"mode":"push"},"resize":true},"modes":{"grab":{"distance":400,"line_linked":{"opacity":1}},"bubble":{"distance":400,"size":40,"duration":2,"opacity":8,"speed":3},"repulse":{"distance":200,"duration":0.4},"push":{"particles_nb":4},"remove":{"particles_nb":2}}},"retina_detect":true}'></div>
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-lg-5 text-lg-start text-center" data-anime='{"translateX": [-30, 0], "opacity": [0,1], "duration": 800, "delay": 50, "staggervalue": 300, "easing": "easeOutQuad" }'>
|
||
<div class="position-sticky pt-30 pb-30 md-pb-12 top-150px xl-top-50px">
|
||
<span class="fs-140 xl-fs-110 md-fs-100 lh-120 ls-minus-4px md-ls-minus-2px text-dark-gray fw-700 mb-40px d-block">strong energy</span>
|
||
<p class="fs-19 w-90 text-dark-gray opacity-7 mb-35px md-mx-auto">Forceful and vigorous energy. Also energetic and resilient power. Unyielding strength.</p>
|
||
<a href="#" class="btn btn-extra-large btn-dark-gray btn-hover-animation-switch btn-box-shadow btn-rounded text-transform-none">
|
||
<span>
|
||
<span class="btn-text">Explore now</span>
|
||
<span class="btn-icon"><i class="feather icon-feather-youtube"></i></span>
|
||
<span class="btn-icon"><i class="feather icon-feather-youtube"></i></span>
|
||
</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-7">
|
||
<div class="outside-box-right-15 xxl-outside-box-right-7 xl-outside-box-right-5 lg-outside-box-right-0">
|
||
<div class="mt-15 md-mt-0">
|
||
<img src="image path" data-bottom-top="transform: rotate(0deg) translateY(250px); filter: blur(-10px)" data-top-bottom="transform:rotate(0deg) translateY(-250px); filter: blur(10px)" alt=""/>
|
||
</div>
|
||
<div class="mt-15 md-mt-10">
|
||
<img src="image path" data-bottom-top="transform: rotate(0deg) translateY(250px); filter: blur(-10px)" data-top-bottom="transform:rotate(0deg) translateY(-250px); filter: blur(10px)" alt=""/>
|
||
</div>
|
||
<div class="mt-15 md-mt-10">
|
||
<img src="image path" data-bottom-top="transform: rotate(0deg) translateY(250px); filter: blur(-10px)" data-top-bottom="transform:rotate(0deg) translateY(-250px); filter: blur(10px)" alt=""/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<span class="comment"><!-- end section --></span>
|
||
</pre>
|
||
</div>
|
||
<p><span class="label label-danger">Note</span>For demo, You can please check this in <strong><a href="../element-sticky-column.html" target="_blank">element-sticky-column.html</a></strong> page.</p>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="row">
|
||
<div class="col-md-12 docs-content-inner" id="elements-tab">
|
||
<h1>Tab</h1>
|
||
<p>Enable swift and dynamic tab functionality to effortlessly switch between different sections of content, even using dropdown menus. Activating tab navigation is easy – just use <code>data-bs-toggle="tab"</code> on an element without the need for JavaScript. Apply the stylish Bootstrap tab design by adding the <code>nav</code> and <code>nav-tabs</code> classes to the tab <code>ul</code>.</p>
|
||
<a href="../element-tab.html" target="_blank"><img src="images/tab.jpg" alt="Crafto" /></a>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<div class="row">
|
||
<div class="col-12 tab-style-04">
|
||
<span class="comment"><!-- start tab navigation --></span>
|
||
<ul class="nav nav-tabs border-0 justify-content-center fw-500 fs-19 mb-4 md-mb-6 sm-mb-5px alt-font">
|
||
<li class="nav-item"><a data-bs-toggle="tab" href="#tab_five1" class="nav-link active">Keyword research<span class="tab-border bg-dark-gray"></span></a></li>
|
||
<li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#tab_five2">Target analysis<span class="tab-border bg-dark-gray"></span></a></li>
|
||
<li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#tab_five3">Social marketing<span class="tab-border bg-dark-gray"></span></a></li>
|
||
<li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#tab_five4">Email campaign<span class="tab-border bg-dark-gray"></span></a></li>
|
||
</ul>
|
||
<span class="comment"><!-- end tab navigation --></span>
|
||
<div class="tab-content">
|
||
<span class="comment"><!-- start tab content --></span>
|
||
<div class="tab-pane fade in active show" id="tab_five1">
|
||
<div class="row align-items-center justify-content-center">
|
||
<div class="col-lg-7 col-md-6 sm-mb-30px" data-anime='{ "opacity": [0, 1], "staggervalue": 200, "duration": 600, "delay": 0, "easing": "easeOutCirc" }'>
|
||
<img src="image path" alt=""/>
|
||
</div>
|
||
<div class="col-lg-5 col-md-6 ps-8 lg-ps-3 sm-ps-15px text-center text-md-start" data-anime='{ "el": "childs", "willchange": "transform", "opacity": [0, 1], "rotateY": [-90, 0], "rotateZ": [-10, 0], "translateY": [80, 0], "translateZ": [50, 0], "staggervalue": 200, "duration": 600, "delay": 100, "easing": "easeOutCirc" }'>
|
||
<span class="ps-20px pe-20px mb-25px md-mb-20px text-uppercase text-cornflower-blue fs-13 lh-40 border-radius-100px md-lh-50 ls-1px alt-font fw-700 bg-solitude-blue d-inline-block">Keyword research</span>
|
||
<h2 class="alt-font text-dark-gray fw-600 ls-minus-1px">Keywords lead to customers.</h2>
|
||
<p class="w-80 xl-w-90 md-w-100">We are committed to deliver unique digital media solutions from web design to eCommerce solutions for our clients by using our knowledge and expertise.</p>
|
||
<a href="#" class="btn btn-small btn-switch-text btn-round-edge btn-dark-gray" style="will-change: transform;">
|
||
<span>
|
||
<span class="btn-double-text" data-text="Explore more">Explore more</span>
|
||
</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<span class="comment"><!-- end tab content --></span>
|
||
<span class="comment"><!-- start tab content --></span>
|
||
<div class="tab-pane fade in" id="tab_five2">
|
||
<div class="row align-items-center justify-content-center">
|
||
<div class="col-lg-7 col-md-6 sm-mb-30px">
|
||
<img src="image path" alt=""/>
|
||
</div>
|
||
<div class="col-lg-5 col-md-6 ps-8 lg-ps-3 sm-ps-15px text-center text-md-start">
|
||
<span class="ps-20px pe-20px mb-25px md-mb-20px text-uppercase text-cornflower-blue fs-13 lh-40 border-radius-100px md-lh-50 ls-1px alt-font fw-700 bg-solitude-blue d-inline-block">Target analysis</span>
|
||
<h2 class="alt-font text-dark-gray fw-600 ls-minus-1px">Power your online visibility.</h2>
|
||
<p class="w-80 xl-w-90 md-w-100">We are committed to deliver unique digital media solutions from web design to eCommerce solutions for our clients by using our knowledge and expertise.</p>
|
||
<a href="#" class="btn btn-small btn-switch-text btn-round-edge btn-dark-gray" style="will-change: transform;">
|
||
<span>
|
||
<span class="btn-double-text" data-text="Explore more">Explore more</span>
|
||
</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<span class="comment"><!-- end tab content --></span>
|
||
<span class="comment"><!-- start tab content --></span>
|
||
<div class="tab-pane fade in" id="tab_five3">
|
||
<div class="row align-items-center justify-content-center">
|
||
<div class="col-lg-7 col-md-6 sm-mb-30px">
|
||
<img src="image path" alt=""/>
|
||
</div>
|
||
<div class="col-lg-5 col-md-6 ps-8 lg-ps-3 sm-ps-15px text-center text-md-start">
|
||
<span class="ps-20px pe-20px mb-25px md-mb-20px text-uppercase text-cornflower-blue fs-13 lh-40 border-radius-100px md-lh-50 ls-1px alt-font fw-700 bg-solitude-blue d-inline-block">Social marketing</span>
|
||
<h2 class="alt-font text-dark-gray fw-600 ls-minus-1px">Brand identity and strategy.</h2>
|
||
<p class="w-80 xl-w-90 md-w-100">We are committed to deliver unique digital media solutions from web design to eCommerce solutions for our clients by using our knowledge and expertise.</p>
|
||
<a href="#" class="btn btn-small btn-switch-text btn-round-edge btn-dark-gray" style="will-change: transform;">
|
||
<span>
|
||
<span class="btn-double-text" data-text="Explore more">Explore more</span>
|
||
</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<span class="comment"><!-- end tab content --></span>
|
||
<span class="comment"><!-- start tab content --></span>
|
||
<div class="tab-pane fade in" id="tab_five4">
|
||
<div class="row align-items-center justify-content-center">
|
||
<div class="col-lg-7 col-md-6 sm-mb-30px">
|
||
<img src="image path" alt=""/>
|
||
</div>
|
||
<div class="col-lg-5 col-md-6 ps-8 lg-ps-3 sm-ps-15px text-center text-md-start">
|
||
<span class="ps-20px pe-20px mb-25px md-mb-20px text-uppercase text-cornflower-blue fs-13 lh-40 border-radius-100px md-lh-50 ls-1px alt-font fw-700 bg-solitude-blue d-inline-block">Email marketing</span>
|
||
<h2 class="alt-font text-dark-gray fw-600 ls-minus-1px">Tailor-made campaign.</h2>
|
||
<p class="w-80 xl-w-90 md-w-100">We are committed to deliver unique digital media solutions from web design to eCommerce solutions for our clients by using our knowledge and expertise.</p>
|
||
<a href="#" class="btn btn-small btn-switch-text btn-round-edge btn-dark-gray" style="will-change: transform;">
|
||
<span>
|
||
<span class="btn-double-text" data-text="Explore more">Explore more</span>
|
||
</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<span class="comment"><!-- end tab content --></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</pre>
|
||
</div>
|
||
<p><span class="label label-danger">Note</span>For demo, You can please check this in <strong><a href="../element-tab.html" target="_blank">element-tab.html</a></strong> page.</p>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="row">
|
||
<div class="col-md-12 docs-content-inner" id="elements-team">
|
||
<h1>Team</h1>
|
||
<p>The team in a Crafto makes it easy to show off your team on your website. It helps you share team details, highlight each member, and connect with your audience by introducing the people behind your project or business.</p>
|
||
<a href="../element-team.html" target="_blank"><img src="images/team.jpg" alt="Crafto" /></a>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<div class="row row-cols-1 row-cols-lg-3 row-cols-md-2 justify-content-center mb-5 md-mb-6" data-anime='{ "el": "childs", "translateY": [30, 0], "opacity": [0,1], "duration": 1200, "delay": 0, "staggervalue": 150, "easing": "easeOutQuad" }'>
|
||
<span class="comment"><!-- start team member item --></span>
|
||
<div class="col text-center team-style-02 border-radius-6px md-mb-30px">
|
||
<figure class="mb-0 position-relative">
|
||
<img class="border-radius-6px" src="image path" alt="" />
|
||
<figcaption class="w-100 h-100 d-flex flex-column justify-content-end align-items-center p-12 bg-gradient-sky-blue-pink-transparent border-radius-6px">
|
||
<div class="social-icon absolute-middle-center">
|
||
<a href="https://www.facebook.com/" target="_blank" class="text-white"><i class="fa-brands fa-facebook-f icon-extra-medium"></i></a>
|
||
<a href="https://www.instagram.com/" target="_blank" class="text-white"><i class="fa-brands fa-instagram icon-extra-medium"></i></a>
|
||
<a href="https://www.twitter.com/" target="_blank" class="text-white"><i class="fa-brands fa-twitter icon-extra-medium"></i></a>
|
||
</div>
|
||
<span class="team-member-name d-block text-uppercase alt-font fw-500 text-white">Matthew taylor</span>
|
||
<span class="member-designation text-white opacity-8 text-uppercase fs-14">Director</span>
|
||
</figcaption>
|
||
</figure>
|
||
</div>
|
||
<span class="comment"><!-- end team member item --></span>
|
||
<span class="comment"><!-- start team member item --></span>
|
||
<div class="col text-center team-style-02 border-radius-6px md-mb-30px">
|
||
<figure class="mb-0 position-relative">
|
||
<img class="border-radius-6px" src="image path" alt="" />
|
||
<figcaption class="w-100 h-100 d-flex flex-column justify-content-end align-items-center p-12 bg-gradient-sky-blue-pink-transparent border-radius-6px">
|
||
<div class="social-icon absolute-middle-center">
|
||
<a href="https://www.facebook.com/" target="_blank" class="text-white"><i class="fa-brands fa-facebook-f icon-extra-medium"></i></a>
|
||
<a href="https://www.instagram.com/" target="_blank" class="text-white"><i class="fa-brands fa-instagram icon-extra-medium"></i></a>
|
||
<a href="https://www.twitter.com/" target="_blank" class="text-white"><i class="fa-brands fa-twitter icon-extra-medium"></i></a>
|
||
</div>
|
||
<span class="team-member-name d-block text-uppercase alt-font fw-500 text-white">Jessica dover</span>
|
||
<span class="member-designation text-white opacity-8 text-uppercase fs-14">Designer</span>
|
||
</figcaption>
|
||
</figure>
|
||
</div>
|
||
<span class="comment"><!-- end team member item --></span>
|
||
<span class="comment"><!-- start team member item --></span>
|
||
<div class="col text-left team-style-02">
|
||
<figure class="mb-0 position-relative">
|
||
<img class="border-radius-6px" src="image path" alt="" />
|
||
<figcaption class="w-100 h-100 d-flex flex-column justify-content-end align-items-center p-12 bg-gradient-sky-blue-pink-transparent border-radius-6px">
|
||
<div class="social-icon absolute-middle-center">
|
||
<a href="https://www.facebook.com/" target="_blank" class="text-white"><i class="fa-brands fa-facebook-f icon-extra-medium"></i></a>
|
||
<a href="https://www.instagram.com/" target="_blank" class="text-white"><i class="fa-brands fa-instagram icon-extra-medium"></i></a>
|
||
<a href="https://www.twitter.com/" target="_blank" class="text-white"><i class="fa-brands fa-twitter icon-extra-medium"></i></a>
|
||
</div>
|
||
<span class="team-member-name d-block text-uppercase alt-font fw-500 text-white">Michal ruheen</span>
|
||
<span class="member-designation text-white opacity-8 text-uppercase fs-14">Photographer</span>
|
||
</figcaption>
|
||
</figure>
|
||
</div>
|
||
<span class="comment"><!-- end team member item --></span>
|
||
</div>
|
||
</pre>
|
||
</div>
|
||
<p><span class="label label-danger">Note</span>For demo, You can please check this in <strong><a href="../element-team.html" target="_blank">element-team.html</a></strong> page.</p>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="row">
|
||
<div class="col-md-12 docs-content-inner" id="elements-testimonial">
|
||
<h1>Testimonial</h1>
|
||
<p>The testimonial element in Crafto is a special feature crafted to highlight positive feedback, reviews, or testimonials from clients or users. It presents a visually appealing and well-organized method to showcase credibility, fostering trust with your audience.</p>
|
||
<a href="../element-testimonials.html" target="_blank"><img src="images/testimonials.jpg" alt="Crfato" /></a>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<div class="row row-cols-1 row-cols-lg-3 row-cols-md-2 justify-content-center mt-4 sm-mt-40px" data-anime='{ "el": "childs", "translateY": [30, 0], "opacity": [0,1], "duration": 600, "delay": 100, "staggervalue": 300, "easing": "easeOutQuad" }'>
|
||
<span class="comment"><!-- start testimonials item --></span>
|
||
<div class="col testimonials-style-01 md-mb-30px">
|
||
<div class="position-relative bg-white testimonial-arrow ps-50px pe-50px pt-30px pb-30px lg-p-30px border-radius-10px box-shadow-quadruple-large">
|
||
<span>Lorem ipsum dolor amet ipsum adipiscing elit eiusmod tempor lorem ipsum incididunt.</span>
|
||
</div>
|
||
<div class="mt-10px pt-20px pb-20px ps-15px pe-15px">
|
||
<img src="image path" class="w-80px h-80px rounded-circle me-15px" alt="" />
|
||
<div class="d-inline-block align-middle lh-20">
|
||
<div class="fw-600 text-dark-gray fs-17 mb-5px">Herman miller</div>
|
||
<span class="fs-15">Chief financial</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<span class="comment"><!-- end testimonials item --></span>
|
||
<span class="comment"><!-- start testimonials item --></span>
|
||
<div class="col testimonials-style-01 md-mb-30px">
|
||
<div class="position-relative bg-white testimonial-arrow ps-50px pe-50px pt-30px pb-30px lg-p-30px border-radius-10px box-shadow-quadruple-large">
|
||
<span>Lorem ipsum dolor amet ipsum adipiscing elit eiusmod tempor lorem ipsum incididunt.</span>
|
||
</div>
|
||
<div class="mt-10px pt-20px pb-20px ps-15px pe-15px">
|
||
<img src="image path" class="w-80px h-80px rounded-circle me-15px" alt="" />
|
||
<div class="d-inline-block align-middle lh-20">
|
||
<div class="fw-600 text-dark-gray fs-17 mb-5px">Shoko mugikura</div>
|
||
<span class="fs-15">Financial manager</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<span class="comment"><!-- end testimonials item --></span>
|
||
<span class="comment"><!-- start testimonials item --></span>
|
||
<div class="col testimonials-style-01">
|
||
<div class="position-relative bg-white testimonial-arrow ps-50px pe-50px pt-30px pb-30px lg-p-30px border-radius-10px box-shadow-quadruple-large">
|
||
<span>Lorem ipsum dolor amet ipsum adipiscing elit eiusmod tempor lorem ipsum incididunt.</span>
|
||
</div>
|
||
<div class="mt-10px pt-20px pb-20px ps-15px pe-15px">
|
||
<img src="image path" class="w-80px h-80px rounded-circle me-15px" alt="" />
|
||
<div class="d-inline-block align-middle lh-20">
|
||
<div class="fw-600 text-dark-gray fs-17 mb-5px">Matthew taylor</div>
|
||
<span class="fs-15">Office manager</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<span class="comment"><!-- end testimonials item --></span>
|
||
</div>
|
||
</pre>
|
||
</div>
|
||
<p><span class="label label-danger">Note</span>For demo, You can please check this in <strong><a href="../element-testimonials.html" target="_blank">element-testimonials.html</a></strong> page.</p>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="row">
|
||
<div class="col-md-12 docs-content-inner" id="element-tilt-effect">
|
||
<h1>Tilt Effect</h1>
|
||
<p>The tilt effect is typically subtle, providing a gentle animation to elements without being overly distracting. It adds a modern and playful touch to the website's design. Tilt effects can be applied to different elements, such as images, buttons, or even entire sections of a webpage.</p>
|
||
<a href="../element-tilt-effect.html" target="_blank"><img src="images/tilt-effect.jpg" alt="Crafto" /></a>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<div class="row row-cols-1 row-cols-xl-4 row-cols-md-2 row-cols-sm-2 justify-content-center" data-anime='{ "el": "childs", "translateX": [30, 0], "opacity": [0,1], "duration": 800, "delay": 200, "staggervalue": 300, "easing": "easeOutQuad" }'>
|
||
<span class="comment"><!-- start interactive banner item --></span>
|
||
<div class="col interactive-banner-style-05 lg-mb-30px position-relative z-index-1">
|
||
<div class="atropos" data-atropos data-atropos-perspective="1450">
|
||
<div class="atropos-scale">
|
||
<div class="atropos-rotate">
|
||
<div class="atropos-inner">
|
||
<figure class="m-0 hover-box border-radius-8px overflow-hidden position-relative" data-atropos-offset="3">
|
||
<img class="w-100" src="image path" alt="" />
|
||
<figcaption class="d-flex flex-column align-items-start justify-content-center position-absolute left-0px top-0px w-100 h-100 z-index-1 p-15 xl-p-12 last-paragraph-no-margin">
|
||
<div class="mb-auto bg-majorelle-blue fw-500 text-white text-uppercase border-radius-30px ps-20px pe-20px fs-13">Flexible</div>
|
||
<span class="text-white fw-500 fs-22 sm-lh-26 xs-lh-28 sm-mb-5px">Audit assurance</span>
|
||
<p class="text-white opacity-6 fs-18">Innovative solutions</p>
|
||
<div class="position-absolute left-0px top-0px w-100 h-100 bg-gradient-gray-light-dark-transparent z-index-minus-1 opacity-9"></div>
|
||
<div class="box-overlay bg-gradient-gray-light-dark-transparent z-index-minus-1"></div>
|
||
<a href="#" class="position-absolute z-index-1 top-0px left-0px h-100 w-100"></a>
|
||
</figcaption>
|
||
</figure>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<span class="comment"><!-- end interactive banner item --> </span>
|
||
<span class="comment"><!-- start interactive banner item --></span>
|
||
<div class="col interactive-banner-style-05 lg-mb-30px position-relative z-index-1">
|
||
<div class="atropos" data-atropos data-atropos-perspective="1450">
|
||
<div class="atropos-scale">
|
||
<div class="atropos-rotate">
|
||
<div class="atropos-inner">
|
||
<figure class="m-0 hover-box border-radius-8px overflow-hidden position-relative" data-atropos-offset="3">
|
||
<img class="w-100" src="image path" alt="" />
|
||
<figcaption class="d-flex flex-column align-items-start justify-content-center position-absolute left-0px top-0px w-100 h-100 z-index-1 p-15 xl-p-12 last-paragraph-no-margin">
|
||
<div class="mb-auto bg-majorelle-blue fw-500 text-white text-uppercase border-radius-30px ps-20px pe-20px fs-13">Diversity</div>
|
||
<span class="text-white fw-500 fs-22 sm-lh-26 xs-lh-28">Financial advisory</span>
|
||
<p class="text-white opacity-6 fs-18">Business consalting</p>
|
||
<div class="position-absolute left-0px top-0px w-100 h-100 bg-gradient-gray-light-dark-transparent z-index-minus-1 opacity-9"></div>
|
||
<div class="box-overlay bg-gradient-gray-light-dark-transparent z-index-minus-1"></div>
|
||
<a href="#" class="position-absolute z-index-1 top-0px left-0px h-100 w-100"></a>
|
||
</figcaption>
|
||
</figure>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<span class="comment"><!-- end interactive banner item --> </span>
|
||
<span class="comment"><!-- start interactive banner item --></span>
|
||
<div class="col interactive-banner-style-05 sm-mb-30px position-relative z-index-1">
|
||
<div class="atropos" data-atropos data-atropos-perspective="1450">
|
||
<div class="atropos-scale">
|
||
<div class="atropos-rotate">
|
||
<div class="atropos-inner">
|
||
<figure class="m-0 hover-box border-radius-8px overflow-hidden position-relative" data-atropos-offset="3">
|
||
<img class="w-100" src="image path" alt="" />
|
||
<figcaption class="d-flex flex-column align-items-start justify-content-center position-absolute left-0px top-0px w-100 h-100 z-index-1 p-15 xl-p-12 last-paragraph-no-margin">
|
||
<div class="mb-auto bg-majorelle-blue fw-500 text-white text-uppercase border-radius-30px ps-20px pe-20px fs-13">Inclusion</div>
|
||
<span class="text-white fw-500 fs-22 sm-lh-26 xs-lh-28">Business analytics</span>
|
||
<p class="text-white opacity-6 fs-18">Driving sustainable</p>
|
||
<div class="position-absolute left-0px top-0px w-100 h-100 bg-gradient-gray-light-dark-transparent z-index-minus-1 opacity-9"></div>
|
||
<div class="box-overlay bg-gradient-gray-light-dark-transparent z-index-minus-1"></div>
|
||
<a href="#" class="position-absolute z-index-1 top-0px left-0px h-100 w-100"></a>
|
||
</figcaption>
|
||
</figure>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<span class="comment"><!-- end interactive banner item --> </span>
|
||
<span class="comment"><!-- start interactive banner item --></span>
|
||
<div class="col interactive-banner-style-05 position-relative z-index-1">
|
||
<div class="atropos" data-atropos data-atropos-perspective="1450">
|
||
<div class="atropos-scale">
|
||
<div class="atropos-rotate">
|
||
<div class="atropos-inner">
|
||
<figure class="m-0 hover-box border-radius-8px overflow-hidden position-relative" data-atropos-offset="3">
|
||
<img class="w-100" src="image path" alt="" />
|
||
<figcaption class="d-flex flex-column align-items-start justify-content-center position-absolute left-0px top-0px w-100 h-100 z-index-1 p-15 xl-p-12 last-paragraph-no-margin">
|
||
<div class="mb-auto bg-majorelle-blue fw-500 text-white text-uppercase border-radius-30px ps-20px pe-20px fs-13">Strategy</div>
|
||
<span class="text-white fw-500 fs-22 sm-lh-26 xs-lh-28">Middle marketing</span>
|
||
<p class="text-white opacity-6 fs-18">Inclusive growth</p>
|
||
<div class="position-absolute left-0px top-0px w-100 h-100 bg-gradient-gray-light-dark-transparent z-index-minus-1 opacity-9"></div>
|
||
<div class="box-overlay bg-gradient-gray-light-dark-transparent z-index-minus-1"></div>
|
||
<a href="#" class="position-absolute z-index-1 top-0px left-0px h-100 w-100"></a>
|
||
</figcaption>
|
||
</figure>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<span class="comment"><!-- end interactive banner item --> </span>
|
||
</div>
|
||
</pre>
|
||
</div>
|
||
<p><span class="label label-danger">Note</span>For demo, You can please check this in <strong><a href="../element-tilt-effect.html" target="_blank">element-tilt-effect.html</a></strong> page.</p>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
|
||
<section id="portfolio" class="hidden">
|
||
<div class="container-fluid">
|
||
|
||
<div class="row">
|
||
<div class="col-md-12 docs-content-inner" id="portfolio-setup">
|
||
|
||
<h1>Portfolio</h1>
|
||
<p class="no-margin-bottom">Crafto provides a very elegant way to showcase your work. Setting up portfolio is simple and easy. Please see below code and informations:</p>
|
||
<h2>Setting Up Portfolio Filter</h2>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<span class="comment"><!-- start filter navigation --></span>
|
||
<ul class="portfolio-filter nav nav-tabs justify-content-center border-0 text-uppercase fw-500 alt-font pb-8">
|
||
<li class="nav active"><a data-filter="*" href="#">All</a></li>
|
||
<li class="nav"><a data-filter=".selected" href="#">Selected</a></li>
|
||
<li class="nav"><a data-filter=".digital" href="#">Digital</a></li>
|
||
<li class="nav"><a data-filter=".branding" href="#">Branding</a></li>
|
||
<li class="nav"><a data-filter=".web" href="#">Web</a></li>
|
||
</ul>
|
||
<span class="comment"><!-- end filter navigation --></span>
|
||
</pre>
|
||
</div>
|
||
|
||
|
||
<h2>Setting up Portfolio Columns and Items</h2>
|
||
<p>You can change portfolio columns by changing class of portfolio main <code>ul</code> to <code>.grid-2col</code>, <code>.grid-3col</code>, <code>.grid-4col</code>, <code>.grid-5col</code>, and <code>.grid-6col</code> as per the columns you need. You can manage number of items to display in a row in different device width as explained in image gallery element. You can add data filter class name in portfolio <code>li</code> item as per the filter category above. Below is the portfolio section code for your reference:</p>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<div class="col-12 filter-content">
|
||
<ul class="portfolio-classic portfolio-wrapper grid grid-3col xxl-grid-3col xl-grid-3col lg-grid-3col md-grid-2col sm-grid-2col xs-grid-1col gutter-extra-large text-center">
|
||
<li class="grid-sizer"></li>
|
||
<span class="comment"><!-- start portfolio item --></span>
|
||
<li class="grid-item selected digital transition-inner-all">
|
||
<a href="#">
|
||
<div class="portfolio-box">
|
||
<div class="portfolio-image bg-gradient-pink-orange">
|
||
<img src="image path" alt="">
|
||
<div class="portfolio-hover d-flex justify-content-center flex-column p-35px">
|
||
<div class="alt-font fs-18 text-uppercase text-white fw-500"><span>Saloon</span></div>
|
||
<div class="d-block alt-font fs-14 lh-initial text-uppercase text-white opacity-7"><span>Branding</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</li>
|
||
<span class="comment"><!-- end portfolio item --></span>
|
||
<span class="comment"><!-- start portfolio item --></span>
|
||
<li class="grid-item web branding transition-inner-all">
|
||
<a href="#">
|
||
<div class="portfolio-box">
|
||
<div class="portfolio-image bg-gradient-pink-orange">
|
||
<img src="image path" alt="">
|
||
<div class="portfolio-hover d-flex justify-content-center flex-column p-35px">
|
||
<div class="alt-font fs-18 text-uppercase text-white fw-500"><span>Jeremy</span></div>
|
||
<div class="d-block alt-font fs-14 lh-initial text-uppercase text-white opacity-7"><span>Design</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</li>
|
||
<span class="comment"><!-- end portfolio item --></span>
|
||
<span class="comment"><!-- start portfolio item --></span>
|
||
<li class="grid-item web branding transition-inner-all">
|
||
<a href="#">
|
||
<div class="portfolio-box">
|
||
<div class="portfolio-image bg-gradient-pink-orange">
|
||
<img src="image path" alt="">
|
||
<div class="portfolio-hover d-flex justify-content-center flex-column p-35px">
|
||
<div class="alt-font fs-18 text-uppercase text-white fw-500"><span>Truenorth</span></div>
|
||
<div class="d-block alt-font fs-14 lh-initial text-uppercase text-white opacity-7"><span>Brochure</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</li>
|
||
<span class="comment"><!-- end portfolio item --></span>
|
||
</ul>
|
||
</div>
|
||
</pre>
|
||
</div>
|
||
|
||
|
||
<h2>Setting Up Responsive Portfolio Columns</h2>
|
||
<p>You can set responsive columns by adding class into portfolio main <code>ul</code>. <code>.xxl-grid-</code>, <code>.xl-grid-</code>, <code>.lg-grid-</code>, <code>.md-grid-</code>, <code>.sm-grid-</code> and <code>.xs-grid-</code> classes are available as per the columns you need in responsive. Below is the portfolio section code for your reference:</p>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<div class="col-12 filter-content">
|
||
<ul class="portfolio-classic portfolio-wrapper grid grid-3col xxl-grid-3col xl-grid-3col lg-grid-3col md-grid-2col sm-grid-2col xs-grid-1col gutter-extra-large text-center">
|
||
<li class="grid-sizer"></li>
|
||
<span class="comment"><!-- start portfolio item --></span>
|
||
<li class="grid-item selected digital transition-inner-all">
|
||
<a href="#">
|
||
<div class="portfolio-box">
|
||
<div class="portfolio-image bg-gradient-pink-orange">
|
||
...
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</li>
|
||
<span class="comment"><!-- end portfolio item --></span>
|
||
<span class="comment"><!-- start portfolio item --></span>
|
||
<li class="grid-item web branding transition-inner-all">
|
||
<a href="#">
|
||
<div class="portfolio-box">
|
||
<div class="portfolio-image bg-gradient-pink-orange">
|
||
...
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</li>
|
||
<span class="comment"><!-- end portfolio item --></span>
|
||
<span class="comment"><!-- start portfolio item --></span>
|
||
<li class="grid-item web branding transition-inner-all">
|
||
<a href="#">
|
||
<div class="portfolio-box">
|
||
<div class="portfolio-image bg-gradient-pink-orange">
|
||
...
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</li>
|
||
<span class="comment"><!-- end portfolio item --></span>
|
||
</ul>
|
||
</div>
|
||
</pre>
|
||
</div>
|
||
<p>See how aspects of the Portfolio column system work across multiple devices with a handy table.</p>
|
||
<div class="panel panel-default params-table grid-table">
|
||
<table class="table text-center">
|
||
<tr>
|
||
<th></th>
|
||
<th class="text-center">Extra extra large<br/>≤1600px</th>
|
||
<th class="text-center">Extra large<br/>≤1399px</th>
|
||
<th class="text-center">Large<br/>≤1199px</th>
|
||
<th class="text-center">Medium<br/>≤991px</th>
|
||
<th class="text-center">Small<br/>≤767px</th>
|
||
<th class="text-center">Extra small<br/>≤575px</th>
|
||
</tr>
|
||
<tr>
|
||
<th>Max container width</th>
|
||
<td>1220px</td>
|
||
<td>1140px</td>
|
||
<td>960px</td>
|
||
<td>720px</td>
|
||
<td>540px</td>
|
||
<td>None(auto)</td>
|
||
</tr>
|
||
<tr>
|
||
<th>Class prefix</th>
|
||
<td><code>.xxl-grid-</code></td>
|
||
<td><code>.xl-grid-</code></td>
|
||
<td><code>.lg-grid-</code></td>
|
||
<td><code>.md-grid-</code></td>
|
||
<td><code>.sm-grid-</code></td>
|
||
<td><code>.xs-grid-</code></td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
|
||
|
||
<h2>Setting Up Gutter Length</h2>
|
||
<p>You can set gutter length by changing class in portfolio main <code>ul</code> to <code>.gutter-very-small</code>, <code>.gutter-small</code>, <code>.gutter-medium</code>,<code>.gutter-large</code>, <code>.gutter-extra-large</code>, <code>.gutter-double-extra-large</code> and <code>.gutter-triple-extra-large</code> as per the space you need. Below is the section code for your reference:</p>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<div class="col-12 filter-content">
|
||
<ul class="portfolio-classic portfolio-wrapper grid grid-3col xxl-grid-3col xl-grid-3col lg-grid-3col md-grid-2col sm-grid-2col xs-grid-1col gutter-extra-large text-center">
|
||
<li class="grid-sizer"></li>
|
||
<span class="comment"><!-- start portfolio item --></span>
|
||
<li class="grid-item selected digital transition-inner-all">
|
||
<a href="#">
|
||
<div class="portfolio-box">
|
||
<div class="portfolio-image bg-gradient-pink-orange">
|
||
...
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</li>
|
||
<span class="comment"><!-- end portfolio item --></span>
|
||
<span class="comment"><!-- start portfolio item --></span>
|
||
<li class="grid-item web branding transition-inner-all">
|
||
<a href="#">
|
||
<div class="portfolio-box">
|
||
<div class="portfolio-image bg-gradient-pink-orange">
|
||
...
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</li>
|
||
<span class="comment"><!-- end portfolio item --></span>
|
||
<span class="comment"><!-- start portfolio item --></span>
|
||
<li class="grid-item web branding transition-inner-all">
|
||
<a href="#">
|
||
<div class="portfolio-box">
|
||
<div class="portfolio-image bg-gradient-pink-orange">
|
||
...
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</li>
|
||
<span class="comment"><!-- end portfolio item --></span>
|
||
</ul>
|
||
</div>
|
||
</pre>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="row">
|
||
<div class="col-md-12 docs-content-inner" id="portfolio-layout">
|
||
<h1>Portfolio Layout</h1>
|
||
<p>Crafto includes different types of portfolio layout as mentioned below to setup your own portfolio as per your requirement:</p>
|
||
<ul>
|
||
<li><a href="index.html#portfolio-classic" class="inner-link">Portfolio Classic</a></li>
|
||
<li><a href="index.html#portfolio-boxed" class="inner-link">Portfolio Boxed</a></li>
|
||
<li><a href="index.html#portfolio-transform" class="inner-link">Portfolio Transform</a></li>
|
||
<li><a href="index.html#portfolio-creative" class="inner-link">Portfolio Creative</a></li>
|
||
<li><a href="index.html#portfolio-attractive" class="inner-link">Portfolio Attractive</a></li>
|
||
<li><a href="index.html#portfolio-clean" class="inner-link">Portfolio Clean</a></li>
|
||
<li><a href="index.html#portfolio-simple" class="inner-link">Portfolio Simple</a></li>
|
||
<li><a href="index.html#portfolio-modern" class="inner-link">Portfolio Modern</a></li>
|
||
</ul>
|
||
|
||
<h3 id="portfolio-classic">Portfolio Classic</h3>
|
||
<a href="../portfolio-classic-three-column.html" target="_blank"><img src="images/portfolio-classic.jpg" alt="Crafto" /></a>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<div class="col-12 filter-content">
|
||
<ul class="portfolio-classic portfolio-wrapper grid grid-3col xxl-grid-3col xl-grid-3col lg-grid-3col md-grid-2col sm-grid-2col xs-grid-1col gutter-extra-large text-center">
|
||
<li class="grid-sizer"></li>
|
||
<span class="comment"><!-- start portfolio item --></span>
|
||
<li class="grid-item selected digital transition-inner-all">
|
||
<a href="#">
|
||
<div class="portfolio-box">
|
||
<div class="portfolio-image bg-gradient-pink-orange">
|
||
<img src="image path" alt="">
|
||
<div class="portfolio-hover d-flex justify-content-center flex-column p-35px">
|
||
<div class="alt-font fs-18 text-uppercase text-white fw-500"><span>Saloon</span></div>
|
||
<div class="d-block alt-font fs-14 lh-initial text-uppercase text-white opacity-7"><span>Branding</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</li>
|
||
<span class="comment"><!-- end portfolio item --></span>
|
||
<span class="comment"><!-- start portfolio item --></span>
|
||
<li class="grid-item web branding transition-inner-all">
|
||
<a href="#">
|
||
<div class="portfolio-box">
|
||
<div class="portfolio-image bg-gradient-pink-orange">
|
||
<img src="image path" alt="">
|
||
<div class="portfolio-hover d-flex justify-content-center flex-column p-35px">
|
||
<div class="alt-font fs-18 text-uppercase text-white fw-500"><span>Jeremy</span></div>
|
||
<div class="d-block alt-font fs-14 lh-initial text-uppercase text-white opacity-7"><span>Design</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</li>
|
||
<span class="comment"><!-- end portfolio item --></span>
|
||
<span class="comment"><!-- start portfolio item --></span>
|
||
<li class="grid-item web branding transition-inner-all">
|
||
<a href="#">
|
||
<div class="portfolio-box">
|
||
<div class="portfolio-image bg-gradient-pink-orange">
|
||
<img src="image path" alt="">
|
||
<div class="portfolio-hover d-flex justify-content-center flex-column p-35px">
|
||
<div class="alt-font fs-18 text-uppercase text-white fw-500"><span>Truenorth</span></div>
|
||
<div class="d-block alt-font fs-14 lh-initial text-uppercase text-white opacity-7"><span>Brochure</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</li>
|
||
<span class="comment"><!-- end portfolio item --></span>
|
||
</ul>
|
||
</div>
|
||
</pre>
|
||
</div>
|
||
<p><span class="label label-danger">Note</span>For demo, You can please check this in <strong><a href="../portfolio-classic-three-column.html" target="_blank">portfolio-classic-three-column.html</a></strong> page.</p>
|
||
|
||
|
||
<h3 id="portfolio-boxed">Portfolio Boxed</h3>
|
||
<a href="../portfolio-boxed-three-column.html" target="_blank"><img src="images/portfolio-boxed.jpg" alt="Crafto" /></a>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<ul class="portfolio-boxed portfolio-wrapper grid grid-3col grid-3col xxl-grid-3col xl-grid-3col lg-grid-3col md-grid-2col sm-grid-2col xs-grid-1col gutter-extra-large text-center">
|
||
<li class="grid-sizer"></li>
|
||
<span class="comment"><!-- start portfolio item --></span>
|
||
<li class="grid-item selected digital transition-inner-all">
|
||
<div class="portfolio-box border-radius-4px">
|
||
<div class="portfolio-image border-radius-4px">
|
||
<img src="image path" alt="">
|
||
<div class="portfolio-hover d-flex justify-content-center flex-column">
|
||
<div class="portfolio-icon d-flex flex-row justify-content-center align-items-center">
|
||
<a href="#" class="d-flex flex-column justify-content-center text-dark-gray text-dark-gray-hover rounded-circle bg-white w-50px h-50px move-bottom-top">
|
||
<i class="ti-plus fw-600" aria-hidden="true"></i>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div class="portfolio-overlay bg-dark-gray"></div>
|
||
</div>
|
||
<div class="portfolio-caption pt-30px pb-30px lg-pt-20px lg-pb-20px">
|
||
<div class="alt-font fs-14 lh-20 text-uppercase">Branding</div>
|
||
<a href="#" class="alt-font fw-500 text-dark-gray text-dark-gray-hover mb-5px">Stream stones</a>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<span class="comment"><!-- end portfolio item --></span>
|
||
<span class="comment"><!-- start portfolio item --></span>
|
||
<li class="grid-item web branding transition-inner-all">
|
||
<div class="portfolio-box border-radius-4px">
|
||
<div class="portfolio-image border-radius-4px">
|
||
<img src="image path" alt="">
|
||
<div class="portfolio-hover d-flex justify-content-center flex-column">
|
||
<div class="portfolio-icon d-flex flex-row justify-content-center align-items-center">
|
||
<a href="#" class="d-flex flex-column justify-content-center text-dark-gray text-dark-gray-hover rounded-circle bg-white w-50px h-50px move-bottom-top">
|
||
<i class="ti-plus fw-600" aria-hidden="true"></i>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div class="portfolio-overlay bg-dark-gray"></div>
|
||
</div>
|
||
<div class="portfolio-caption pt-30px pb-30px lg-pt-20px lg-pb-20px">
|
||
<div class="alt-font fs-14 lh-20 text-uppercase">Graphics</div>
|
||
<a href="#" class="alt-font fw-500 text-dark-gray text-dark-gray-hover mb-5px">Skoda corporate</a>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<span class="comment"><!-- end portfolio item --></span>
|
||
<span class="comment"><!-- start portfolio item --></span>
|
||
<li class="grid-item web digital transition-inner-all">
|
||
<div class="portfolio-box border-radius-4px">
|
||
<div class="portfolio-image border-radius-4px">
|
||
<img src="image path" alt="">
|
||
<div class="portfolio-hover d-flex justify-content-center flex-column">
|
||
<div class="portfolio-icon d-flex flex-row justify-content-center align-items-center">
|
||
<a href="#" class="d-flex flex-column justify-content-center text-dark-gray text-dark-gray-hover rounded-circle bg-white w-50px h-50px move-bottom-top">
|
||
<i class="ti-plus fw-600" aria-hidden="true"></i>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div class="portfolio-overlay bg-dark-gray"></div>
|
||
</div>
|
||
<div class="portfolio-caption pt-30px pb-30px lg-pt-20px lg-pb-20px">
|
||
<div class="alt-font fs-14 lh-20 text-uppercase">Photography</div>
|
||
<a href="#" class="alt-font fw-500 text-dark-gray text-dark-gray-hover mb-5px">Potato islands</a>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<span class="comment"><!-- end portfolio item --></span>
|
||
</ul>
|
||
</pre>
|
||
</div>
|
||
<p><span class="label label-danger">Note</span>For demo, You can please check this in <strong><a href="../portfolio-boxed-three-column.html" target="_blank">portfolio-boxed-three-column.html</a></strong> page.</p>
|
||
|
||
|
||
<h3 id="portfolio-transform">Portfolio Transform</h3>
|
||
<a href="../portfolio-transform-three-column.html" target="_blank"><img src="images/portfolio-transform.jpg" alt="Crafto" /></a>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<ul class="portfolio-transform portfolio-wrapper grid grid-3col xxl-grid-3col xl-grid-3col lg-grid-3col md-grid-2col sm-grid-2col xs-grid-1col gutter-extra-large">
|
||
<li class="grid-sizer"></li>
|
||
<span class="comment"><!-- start portfolio item --></span>
|
||
<li class="grid-item selected digital">
|
||
<div class="portfolio-box mousetip-wrapper">
|
||
<a href="single-project-page-02.html">
|
||
<div class="portfolio-image overflow-hidden">
|
||
<img src="image path" alt="">
|
||
</div>
|
||
<div class="caption bg-white border-radius-4px text-uppercase alt-font">
|
||
<span class="text-dark-gray fw-500 lh-14 d-block">Tailoring</span>
|
||
<span class="fs-13 lh-initial text-medium-gray">Branding</span>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
</li>
|
||
<span class="comment"><!-- end portfolio item --></span>
|
||
<span class="comment"><!-- start portfolio item --></span>
|
||
<li class="grid-item web branding">
|
||
<div class="portfolio-box mousetip-wrapper">
|
||
<a href="single-project-page-02.html">
|
||
<div class="portfolio-image overflow-hidden">
|
||
<img src="image path" alt="">
|
||
</div>
|
||
<div class="caption bg-white border-radius-4px text-uppercase alt-font">
|
||
<span class="text-dark-gray fw-500 lh-14 d-block">Stream</span>
|
||
<span class="fs-13 lh-initial text-medium-gray">Branding</span>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
</li>
|
||
<span class="comment"><!-- end portfolio item --></span>
|
||
<span class="comment"><!-- start portfolio item --></span>
|
||
<li class="grid-item web branding">
|
||
<div class="portfolio-box mousetip-wrapper">
|
||
<a href="single-project-page-02.html">
|
||
<div class="portfolio-image overflow-hidden">
|
||
<img src="image path" alt="">
|
||
</div>
|
||
<div class="caption bg-white border-radius-4px text-uppercase alt-font">
|
||
<span class="text-dark-gray fw-500 lh-14 d-block">Jeremy</span>
|
||
<span class="fs-13 lh-initial text-medium-gray">Digital</span>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
</li>
|
||
<span class="comment"><!-- end portfolio item --></span>
|
||
</ul>
|
||
</pre>
|
||
</div>
|
||
<p><span class="label label-danger">Note</span>For demo, You can please check this in <strong><a href="../portfolio-transform-three-column.html" target="_blank">portfolio-transform-three-column.html</a></strong> page.</p>
|
||
|
||
|
||
<h3 id="portfolio-creative">Portfolio Creative</h3>
|
||
<a href="../portfolio-creative-three-column.html" target="_blank"><img src="images/portfolio-creative.jpg" alt="Crafto" /></a>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<ul class="portfolio-creative portfolio-wrapper grid grid-3col xxl-grid-3col xl-grid-3col lg-grid-3col md-grid-2col sm-grid-2col xs-grid-1col gutter-extra-large text-center">
|
||
<li class="grid-sizer"></li>
|
||
<span class="comment"><!-- start portfolio item --></span>
|
||
<li class="grid-item selected digital transition-inner-all">
|
||
<a href="#">
|
||
<div class="portfolio-box">
|
||
<div class="portfolio-image">
|
||
<img src="image path" alt="">
|
||
</div>
|
||
<div class="portfolio-hover justify-content-center align-items-center d-flex flex-column pt-40px pb-40px">
|
||
<div class="text-uppercase portfolio-title mt-auto alt-font fs-26 fw-600 text-white" data-text="Tailoring"></div>
|
||
<span class="mt-auto d-inline-block text-uppercase pt-5px pb-5px fw-500 ps-15px pe-15px bg-white text-dark-gray fs-12 lh-20 border-radius-2px">Branding</span>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</li>
|
||
<span class="comment"><!-- end portfolio item --></span>
|
||
<span class="comment"><!-- start portfolio item --></span>
|
||
<li class="grid-item web branding transition-inner-all">
|
||
<a href="#">
|
||
<div class="portfolio-box">
|
||
<div class="portfolio-image">
|
||
<img src="image path" alt="">
|
||
</div>
|
||
<div class="portfolio-hover justify-content-center align-items-center d-flex flex-column pt-40px pb-40px">
|
||
<div class="text-uppercase portfolio-title mt-auto alt-font fs-26 fw-600 text-white" data-text="Northde"></div>
|
||
<span class="mt-auto d-inline-block text-uppercase pt-5px pb-5px fw-500 ps-15px pe-15px bg-white text-dark-gray fs-12 lh-20 border-radius-2px">Digital</span>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</li>
|
||
<span class="comment"><!-- end portfolio item --></span>
|
||
<span class="comment"><!-- start portfolio item --></span>
|
||
<li class="grid-item web branding transition-inner-all">
|
||
<a href="#">
|
||
<div class="portfolio-box">
|
||
<div class="portfolio-image">
|
||
<img src="image path" alt="">
|
||
</div>
|
||
<div class="portfolio-hover justify-content-center align-items-center d-flex flex-column pt-40px pb-40px">
|
||
<div class="text-uppercase portfolio-title mt-auto alt-font fs-26 fw-600 text-white" data-text="Swasha"></div>
|
||
<span class="mt-auto d-inline-block text-uppercase pt-5px pb-5px fw-500 ps-15px pe-15px bg-white text-dark-gray fs-12 lh-20 border-radius-2px">Design</span>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</li>
|
||
<span class="comment"><!-- end portfolio item --></span>
|
||
</ul>
|
||
</pre>
|
||
</div>
|
||
<p><span class="label label-danger">Note</span>For demo, You can please check this in <strong><a href="../portfolio-creative-three-column.html" target="_blank">portfolio-creative-three-column.html</a></strong> page.</p>
|
||
|
||
|
||
<h3 id="portfolio-attractive">Portfolio Attractive</h3>
|
||
<a href="../portfolio-attractive-three-column.html" target="_blank"><img src="images/portfolio-attractive.jpg" alt="Crafto" /></a>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<ul class="portfolio-attractive portfolio-wrapper grid-loading grid grid-3col xxl-grid-3col xl-grid-3col lg-grid-3col md-grid-2col sm-grid-2col xs-grid-1col gutter-extra-large text-center">
|
||
<li class="grid-sizer"></li>
|
||
<span class="comment"><!-- start portfolio item --></span>
|
||
<li class="grid-item selected digital transition-inner-all atropos" data-atropos data-atropos-perspective="1450">
|
||
<div class="atropos-scale">
|
||
<div class="atropos-rotate">
|
||
<div class="atropos-inner" data-atropos-offset="3">
|
||
<a href="#">
|
||
<div class="portfolio-box bg-gradient-sky-blue-pink">
|
||
<div class="portfolio-image">
|
||
<img src="image path" alt="" />
|
||
</div>
|
||
<div class="portfolio-hover justify-content-end align-items-center d-flex flex-column pt-40px pb-40px sm-pt-30px sm-pb-30px">
|
||
<span class="icon-box z-index-1 mb-auto ms-auto me-30px"><i class="bi bi-arrow-up-right icon-very-medium text-white" aria-hidden="true"></i></span>
|
||
<div class="text-white fs-19 move-top-bottom-self"><span>Tailoring</span></div>
|
||
<div class="fs-15 lh-22 text-white opacity-6 move-bottom-top-self"><span>Brochure</span></div>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<span class="comment"><!-- end portfolio item --></span>
|
||
<span class="comment"><!-- start portfolio item --></span>
|
||
<li class="grid-item web branding transition-inner-all atropos" data-atropos data-atropos-perspective="1450">
|
||
<div class="atropos-scale">
|
||
<div class="atropos-rotate">
|
||
<div class="atropos-inner" data-atropos-offset="3">
|
||
<a href="#">
|
||
<div class="portfolio-box bg-gradient-sky-blue-pink">
|
||
<div class="portfolio-image">
|
||
<img src="image path" alt="" />
|
||
</div>
|
||
<div class="portfolio-hover justify-content-end align-items-center d-flex flex-column pt-40px pb-40px sm-pt-30px sm-pb-30px">
|
||
<span class="icon-box z-index-1 mb-auto ms-auto me-30px"><i class="bi bi-arrow-up-right icon-very-medium text-white" aria-hidden="true"></i></span>
|
||
<div class="text-white fs-19 move-top-bottom-self"><span>Violator</span></div>
|
||
<div class="fs-15 lh-22 text-white opacity-6 move-bottom-top-self"><span>Branding</span></div>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<span class="comment"><!-- end portfolio item --></span>
|
||
<span class="comment"><!-- start portfolio item --></span>
|
||
<li class="grid-item web branding transition-inner-all atropos" data-atropos data-atropos-perspective="1450">
|
||
<div class="atropos-scale">
|
||
<div class="atropos-rotate">
|
||
<div class="atropos-inner" data-atropos-offset="3">
|
||
<a href="#">
|
||
<div class="portfolio-box bg-gradient-sky-blue-pink">
|
||
<div class="portfolio-image">
|
||
<img src="image path" alt="" />
|
||
</div>
|
||
<div class="portfolio-hover justify-content-end align-items-center d-flex flex-column pt-40px pb-40px sm-pt-30px sm-pb-30px">
|
||
<span class="icon-box z-index-1 mb-auto ms-auto me-30px"><i class="bi bi-arrow-up-right icon-very-medium text-white" aria-hidden="true"></i></span>
|
||
<div class="text-white fs-19 move-top-bottom-self"><span>Gardner</span></div>
|
||
<div class="fs-15 lh-22 text-white opacity-6 move-bottom-top-self"><span>Branding</span></div>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<span class="comment"><!-- end portfolio item --></span>
|
||
</ul>
|
||
</pre>
|
||
</div>
|
||
<p><span class="label label-danger">Note</span>For demo, You can please check this in <strong><a href="../portfolio-attractive-three-column.html" target="_blank">portfolio-attractive-three-column.html</a></strong> page.</p>
|
||
|
||
|
||
<h3 id="portfolio-clean">Portfolio Clean</h3>
|
||
<a href="../portfolio-clean-three-column.html" target="_blank"><img src="images/portfolio-clean.jpg" alt="Crafto" /></a>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<ul class="portfolio-clean portfolio-wrapper grid-loading grid grid-3col xxl-grid-3col xl-grid-3col lg-grid-3col md-grid-2col sm-grid-2col xs-grid-1col gutter-extra-large">
|
||
<li class="grid-sizer"></li>
|
||
<span class="comment"><!-- start portfolio item --></span>
|
||
<li class="grid-item selected digital transition-inner-all">
|
||
<a href="#">
|
||
<div class="portfolio-box">
|
||
<div class="portfolio-image">
|
||
<img src="image path" alt="" />
|
||
</div>
|
||
<div class="portfolio-hover d-flex justify-content-end align-items-end flex-column ps-35px pe-35px pt-5px pb-5px lg-ps-15px lg-pe-15px">
|
||
<div class="d-flex align-items-center justify-content-start flex-wrap text-left w-100">
|
||
<div class="fs-17 alt-font fw-500 text-dark-gray portfolio-title">Pixflow</div>
|
||
<i class="line-icon-Arrow-OutRight icon-large align-middle text-dark-gray"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</li>
|
||
<span class="comment"><!-- end portfolio item --></span>
|
||
<span class="comment"><!-- start portfolio item --></span>
|
||
<li class="grid-item web branding transition-inner-all">
|
||
<a href="#">
|
||
<div class="portfolio-box">
|
||
<div class="portfolio-image">
|
||
<img src="image path" alt="" />
|
||
</div>
|
||
<div class="portfolio-hover d-flex justify-content-end align-items-end flex-column ps-35px pe-35px pt-5px pb-5px lg-ps-15px lg-pe-15px">
|
||
<div class="d-flex align-items-center justify-content-start flex-wrap text-left w-100">
|
||
<div class="fs-17 alt-font fw-500 text-dark-gray portfolio-title">Skoda</div>
|
||
<i class="line-icon-Arrow-OutRight icon-large align-middle text-dark-gray"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</li>
|
||
<span class="comment"><!-- end portfolio item --></span>
|
||
<span class="comment"><!-- start portfolio item --></span>
|
||
<li class="grid-item web branding transition-inner-all">
|
||
<a href="#">
|
||
<div class="portfolio-box">
|
||
<div class="portfolio-image">
|
||
<img src="image path" alt="" />
|
||
</div>
|
||
<div class="portfolio-hover d-flex justify-content-end align-items-end flex-column ps-35px pe-35px pt-5px pb-5px lg-ps-15px lg-pe-15px">
|
||
<div class="d-flex align-items-center justify-content-start flex-wrap text-left w-100">
|
||
<div class="fs-17 alt-font fw-500 text-dark-gray portfolio-title">Tailoring</div>
|
||
<i class="line-icon-Arrow-OutRight icon-large align-middle text-dark-gray"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</li>
|
||
<span class="comment"><!-- end portfolio item --></span>
|
||
</ul>
|
||
</pre>
|
||
</div>
|
||
<p><span class="label label-danger">Note</span>For demo, You can please check this in <strong><a href="../portfolio-clean-three-column.html" target="_blank">portfolio-clean-three-column.html</a></strong> page.</p>
|
||
|
||
|
||
<h3 id="portfolio-simple">Portfolio Simple</h3>
|
||
<a href="../portfolio-simple-three-column.html" target="_blank"><img src="images/portfolio-simple.jpg" alt="Crafto" /></a>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<ul class="portfolio-simple portfolio-wrapper grid-loading grid grid-3col xxl-grid-3col xl-grid-3col lg-grid-3col md-grid-2col sm-grid-2col xs-grid-1col gutter-extra-large text-center">
|
||
<li class="grid-sizer"></li>
|
||
<span class="comment"><!-- start portfolio item --></span>
|
||
<li class="grid-item selected digital transition-inner-all">
|
||
<div class="portfolio-box">
|
||
<div class="portfolio-image bg-medium-gray border-radius-4px">
|
||
<img src="image path" alt="" />
|
||
<div class="portfolio-hover d-flex justify-content-center flex-column p-35px">
|
||
<div class="portfolio-icon d-flex flex-row justify-content-center align-items-center">
|
||
<a href="#" data-group="portfolio-items" class="d-flex flex-column justify-content-center text-dark-gray text-dark-gray-hover rounded-circle bg-white w-55px h-55px rounded-circle box-shadow-large move-bottom-top">
|
||
<i class="feather icon-feather-search fw-600" aria-hidden="true"></i>
|
||
</a>
|
||
<a href="#" class="d-flex flex-column justify-content-center text-dark-gray text-dark-gray-hover rounded-circle bg-white w-55px h-55px rounded-circle box-shadow-large move-bottom-top">
|
||
<i class="feather icon-feather-link fw-600" aria-hidden="true"></i>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="portfolio-caption pt-30px pb-30px sm-pt-20px sm-pb-20px">
|
||
<a href="#" class="text-dark-gray text-dark-gray-hover fw-500">Tailoring inteo</a>
|
||
<span class="d-inline-block align-middle w-10px separator-line-1px bg-light-gray ms-10px me-10px"></span>
|
||
<div class="d-inline-block">Branding</div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<span class="comment"><!-- end portfolio item --></span>
|
||
<span class="comment"><!-- start portfolio item --></span>
|
||
<li class="grid-item web branding transition-inner-all">
|
||
<div class="portfolio-box">
|
||
<div class="portfolio-image bg-medium-gray border-radius-4px">
|
||
<img src="image path" alt="" />
|
||
<div class="portfolio-hover d-flex justify-content-center flex-column p-35px">
|
||
<div class="portfolio-icon d-flex flex-row justify-content-center align-items-center">
|
||
<a href="#" data-group="portfolio-items" class="d-flex flex-column justify-content-center text-dark-gray text-dark-gray-hover rounded-circle bg-white w-55px h-55px rounded-circle box-shadow-large move-bottom-top">
|
||
<i class="feather icon-feather-search fw-600" aria-hidden="true"></i>
|
||
</a>
|
||
<a href="#" class="d-flex flex-column justify-content-center text-dark-gray text-dark-gray-hover rounded-circle bg-white w-55px h-55px rounded-circle box-shadow-large move-bottom-top">
|
||
<i class="feather icon-feather-link fw-600" aria-hidden="true"></i>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="portfolio-caption pt-30px pb-30px sm-pt-20px sm-pb-20px">
|
||
<a href="#" class="text-dark-gray text-dark-gray-hover fw-500">Designblast inc</a>
|
||
<span class="d-inline-block align-middle w-10px separator-line-1px bg-light-gray ms-10px me-10px"></span>
|
||
<div class="d-inline-block">Photography</div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<span class="comment"><!-- end portfolio item --></span>
|
||
<span class="comment"><!-- start portfolio item --></span>
|
||
<li class="grid-item web branding transition-inner-all">
|
||
<div class="portfolio-box">
|
||
<div class="portfolio-image bg-medium-gray border-radius-4px">
|
||
<img src="image path" alt="" />
|
||
<div class="portfolio-hover d-flex justify-content-center flex-column p-35px">
|
||
<div class="portfolio-icon d-flex flex-row justify-content-center align-items-center">
|
||
<a href="#" data-group="portfolio-items" class="d-flex flex-column justify-content-center text-dark-gray text-dark-gray-hover rounded-circle bg-white w-55px h-55px rounded-circle box-shadow-large move-bottom-top">
|
||
<i class="feather icon-feather-search fw-600" aria-hidden="true"></i>
|
||
</a>
|
||
<a href="#" class="d-flex flex-column justify-content-center text-dark-gray text-dark-gray-hover rounded-circle bg-white w-55px h-55px rounded-circle box-shadow-large move-bottom-top">
|
||
<i class="feather icon-feather-link fw-600" aria-hidden="true"></i>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="portfolio-caption pt-30px pb-30px sm-pt-20px sm-pb-20px">
|
||
<a href="#" class="text-dark-gray text-dark-gray-hover fw-500">Herbal beauty</a>
|
||
<span class="d-inline-block align-middle w-10px separator-line-1px bg-light-gray ms-10px me-10px"></span>
|
||
<div class="d-inline-block">Application</div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<span class="comment"><!-- end portfolio item --></span>
|
||
</ul>
|
||
</pre>
|
||
</div>
|
||
<p><span class="label label-danger">Note</span>For demo, You can please check this in <strong><a href="../portfolio-simple-three-column.html" target="_blank">portfolio-simple-three-column.html</a></strong> page.</p>
|
||
|
||
|
||
<h3 id="portfolio-modern">Portfolio Modern</h3>
|
||
<a href="../portfolio-modern-three-column.html" target="_blank"><img src="images/portfolio-modern.jpg" alt="Crafto" /></a>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<ul class="portfolio-modern portfolio-wrapper grid-loading grid grid-3col xxl-grid-3col xl-grid-3col lg-grid-3col md-grid-2col sm-grid-2col xs-grid-1col gutter-extra-large text-center">
|
||
<li class="grid-sizer"></li>
|
||
<span class="comment"><!-- start portfolio item --></span>
|
||
<li class="grid-item selected digital transition-inner-all">
|
||
<a href="#">
|
||
<div class="portfolio-box">
|
||
<div class="portfolio-image border-radius-4px">
|
||
<img src="image path" alt="" />
|
||
</div>
|
||
<div class="portfolio-hover box-shadow-extra-large">
|
||
<div class="bg-white d-flex align-items-center align-self-end text-start border-radius-4px ps-30px pe-30px pt-20px pb-20px lg-p-20px w-100">
|
||
<div class="me-auto">
|
||
<div class="alt-font fs-13 fw-300 text-medium-gray text-uppercase lh-initial">Branding</div>
|
||
<div class="alt-font fw-500 text-dark-gray text-uppercase lh-initial">Tailoring</div>
|
||
</div>
|
||
<div class="ms-auto"><i class="feather icon-feather-plus icon-extra-medium text-dark-gray lh-36"></i></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</li>
|
||
<span class="comment"><!-- end portfolio item --></span>
|
||
<span class="comment"><!-- start portfolio item --></span>
|
||
<li class="grid-item web branding transition-inner-all">
|
||
<a href="#">
|
||
<div class="portfolio-box">
|
||
<div class="portfolio-image border-radius-6px">
|
||
<img src="image path" alt="" />
|
||
</div>
|
||
<div class="portfolio-hover box-shadow-extra-large">
|
||
<div class="bg-white d-flex align-items-center align-self-end text-start border-radius-4px ps-30px pe-30px pt-20px pb-20px lg-p-20px w-100">
|
||
<div class="me-auto">
|
||
<div class="alt-font fs-13 fw-300 text-medium-gray text-uppercase lh-initial">Design</div>
|
||
<div class="alt-font fw-500 text-dark-gray text-uppercase lh-initial">Spanio</div>
|
||
</div>
|
||
<div class="ms-auto"><i class="feather icon-feather-plus icon-extra-medium text-dark-gray lh-36"></i></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</li>
|
||
<span class="comment"><!-- end portfolio item --></span>
|
||
<span class="comment"><!-- start portfolio item --></span>
|
||
<li class="grid-item web branding transition-inner-all">
|
||
<a href="#">
|
||
<div class="portfolio-box">
|
||
<div class="portfolio-image border-radius-6px">
|
||
<img src="image path" alt="" />
|
||
</div>
|
||
<div class="portfolio-hover box-shadow-extra-large">
|
||
<div class="bg-white d-flex align-items-center align-self-end text-start border-radius-4px ps-30px pe-30px pt-20px pb-20px lg-p-20px w-100">
|
||
<div class="me-auto">
|
||
<div class="alt-font fs-13 fw-300 text-medium-gray text-uppercase lh-initial">Branding</div>
|
||
<div class="alt-font fw-500 text-dark-gray text-uppercase lh-initial">Herbal</div>
|
||
</div>
|
||
<div class="ms-auto"><i class="feather icon-feather-plus icon-extra-medium text-dark-gray lh-36"></i></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</li>
|
||
<span class="comment"><!-- end portfolio item --></span>
|
||
</ul>
|
||
</pre>
|
||
</div>
|
||
<p><span class="label label-danger">Note</span>For demo, You can please check this in <strong><a href="../portfolio-modern-three-column.html" target="_blank">portfolio-modern-three-column.html</a></strong> page.</p>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="row">
|
||
<div class="col-md-12 docs-content-inner" id="portfolio-item-link">
|
||
<h1>Portfolio Item Link</h1>
|
||
<p>There are different types of portfolio item linking available in Crafto as mentioned below:</p>
|
||
|
||
<h2>Open External Page</h2>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<ul class="portfolio-classic portfolio-wrapper grid grid-3col xxl-grid-3col xl-grid-3col lg-grid-3col md-grid-2col sm-grid-2col xs-grid-1col gutter-extra-large grid-loading">
|
||
<li class="grid-sizer"></li>
|
||
<span class="comment"><!-- start portfolio item --></span>
|
||
<li class="grid-item selected digital transition-inner-all">
|
||
<a href="#">
|
||
<div class="portfolio-box">
|
||
<div class="portfolio-image bg-gradient-pink-orange">
|
||
<img src="image path" alt="" >
|
||
<div class="portfolio-hover d-flex justify-content-center flex-column p-35px">
|
||
<div class="alt-font fs-18 text-uppercase text-white fw-600"><span>Saloon</span></div>
|
||
<div class="d-block alt-font fs-14 lh-initial text-uppercase text-white opacity-7"><span>Branding</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</li>
|
||
<span class="comment"><!-- end portfolio item --></span>
|
||
</ul>
|
||
</pre>
|
||
</div>
|
||
<p><span class="label label-danger">Note</span>For demo, You can please check this in <strong><a href="../portfolio-classic-three-column.html" target="_blank">portfolio-classic-three-column.html</a></strong> page.</p>
|
||
|
||
|
||
<h2>Lightbox Photo Gallery</h2>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<ul class="image-gallery-style-01 gallery-wrapper grid grid-3col xxl-grid-3col xl-grid-3col lg-grid-3col md-grid-2col sm-grid-2col xs-grid-1col gutter-extra-large grid-loading">
|
||
<li class="grid-sizer"></li>
|
||
<span class="comment"><!-- start portfolio item --></span>
|
||
<li class="grid-item transition-inner-all">
|
||
<div class="gallery-box">
|
||
<a href="image path" data-group="lightbox-gallery" title="Lightbox gallery image title">
|
||
<div class="position-relative gallery-image bg-white overflow-hidden">
|
||
<img src="image path" alt="" />
|
||
<div class="d-flex align-items-center justify-content-center position-absolute top-0px left-0px w-100 h-100 gallery-hover move-bottom-top">
|
||
<div class="d-flex align-items-center justify-content-center w-50px h-50px rounded-circle bg-dark-gray">
|
||
<i class="feather icon-feather-search text-white icon-small"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
</li>
|
||
<span class="comment"><!-- end portfolio item --></span>
|
||
</ul>
|
||
</pre>
|
||
</div>
|
||
<p><span class="label label-danger">Note</span>For demo, You can please check this in <strong><a href="../element-image-gallery.html" target="_blank">element-image-gallery.html</a></strong> page.</p>
|
||
|
||
|
||
<h2>Video Lightbox</h2>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<ul class="portfolio-creative portfolio-wrapper grid-loading grid grid-3col xxl-grid-3col xl-grid-3col lg-grid-3col md-grid-2col sm-grid-2col xs-grid-1col gutter-extra-large text-center" data-anime='{ "el": "childs","translateY": [30, 0], "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 300, "easing": "easeOutQuad" }'>
|
||
<li class="grid-sizer"></li>
|
||
<span class="comment"><!-- start portfolio item --></span>
|
||
<li class="grid-item transition-inner-all">
|
||
<a href="video path/link" class="popup-vimeo">
|
||
<div class="portfolio-box">
|
||
<div class="portfolio-image">
|
||
<img src="image path" alt="" />
|
||
</div>
|
||
<div class="portfolio-hover justify-content-center align-items-center d-flex flex-column pt-40px pb-40px">
|
||
<h3 class="text-uppercase portfolio-title mt-auto alt-font text-white" data-text="Morning"></h3>
|
||
<span class="d-flex justify-content-center align-items-center mt-auto icon-box w-50px h-50px rounded-circle border border-color-transparent-white-very-light border-2"><i class="bi bi-play-fill text-white icon-small"></i></span>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</li>
|
||
<span class="comment"><!-- end portfolio item --></span>
|
||
</ul>
|
||
</pre>
|
||
</div>
|
||
<p><span class="label label-danger">Note</span>for demo visit page <strong><a href="../demo-music-onepage.html" target="_blank">demo-music-onepage.html</a></strong> page.</p>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="row">
|
||
<div class="col-md-12 docs-content-inner" id="portfolio-single-page">
|
||
<h1>Portfolio Single Page</h1>
|
||
<p>Crafto offers different layouts of portfolio item dedicated pages as mentioned below:</p>
|
||
<div class="row portfolio-details-page">
|
||
<div class="col-md-4"><a href="../demo-digital-agency-single-project-minimal.html" target="_blank"><img src="images/demo-digital-agency-single-project-minimal.jpg" alt="Crafto" /></a></div>
|
||
<div class="col-md-4"><a href="../demo-branding-agency-single-project-slider.html" target="_blank"><img src="images/demo-branding-agency-single-project-slider.jpg" alt="Crafto" /></a></div>
|
||
<div class="col-md-4"><a href="../demo-architecture-single-project-gallery.html" target="_blank"><img src="images/demo-architecture-single-project-gallery.jpg" alt="Crafto" /></a></div>
|
||
<div class="col-md-4"><a href="../demo-interactive-portfolio-single-project-modern.html" target="_blank"><img src="images/demo-interactive-portfolio-single-project-modern.jpg" alt="Crafto" /></a></div>
|
||
<div class="col-md-4"><a href="../demo-marketing-single-project-simple.html" target="_blank"><img src="images/demo-marketing-single-project-simple.jpg" alt="Crafto" /></a></div>
|
||
<div class="col-md-4"><a href="../demo-web-agency-single-project-creative.html" target="_blank"><img src="images/demo-web-agency-single-project-creative.jpg" alt="Crafto" /></a></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
|
||
<section id="blog" class="hidden">
|
||
<div class="container-fluid">
|
||
|
||
<div class="row">
|
||
<div class="col-md-12 docs-content-inner" id="blog-setup">
|
||
<h1>Blog</h1>
|
||
<p class="no-margin">Our template contains all the required pages to create a fully working and oriented blog using the provided templates and implement backend programming with features to make it dynamic with a database as per your need.</p>
|
||
<h2>Blog Setup</h2>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<span class="comment"><!-- start blog item --></span>
|
||
<div class="col-12 mb-40px">
|
||
<div class="card border-0 no-border-radius box-shadow-extra-large">
|
||
<div class="blog-image">
|
||
<a href="#"><img src="image path" alt="" /></a>
|
||
<div class="blog-categories">
|
||
<a href="#" class="categories-btn bg-white text-dark-gray text-dark-gray-hover text-uppercase alt-font fw-500">Agency</a>
|
||
</div>
|
||
</div>
|
||
<div class="card-body p-10 bg-white sm-p-8">
|
||
...
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<span class="comment"><!-- end blog item --></span>
|
||
<span class="comment"><!-- start sidebar --></span>
|
||
<aside class="col-12 col-xl-3 offset-xl-1 col-lg-4 col-md-7 sidebar">
|
||
...
|
||
</aside>
|
||
<span class="comment"><!-- end sidebar --></span>
|
||
</pre>
|
||
</div>
|
||
<p><span class="label label-danger">Note</span>You can add aside section before or after the main section if you don't want to add aside panel then simply remove the aside code and make main section to full width.</p>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="row">
|
||
<div class="col-md-12 docs-content-inner" id="blog-layout">
|
||
<h1>Blog Layout</h1>
|
||
<p>Crafto includes different types of blog layout as mentioned below to setup your own blog listing as per your requirement:</p>
|
||
<ul>
|
||
<li><a href="index.html#blog-grid" class="inner-link">Blog Grid</a></li>
|
||
<li><a href="index.html#blog-classic" class="inner-link">Blog Classic</a></li>
|
||
<li><a href="index.html#blog-metro" class="inner-link">Blog Metro</a></li>
|
||
<li><a href="index.html#blog-masonry" class="inner-link">Blog Masonry</a></li>
|
||
<li><a href="index.html#blog-simple" class="inner-link">Blog Simple</a></li>
|
||
<li><a href="index.html#blog-date" class="inner-link">Blog Date</a></li>
|
||
<li><a href="index.html#blog-only-text" class="inner-link">Blog Only Text</a></li>
|
||
<li><a href="index.html#blog-side-image" class="inner-link">Blog Side Image</a></li>
|
||
<li><a href="index.html#blog-modern" class="inner-link">Blog Modern</a></li>
|
||
<li><a href="index.html#blog-standard" class="inner-link">Blog Standard</a></li>
|
||
</ul>
|
||
|
||
<h3 id="blog-grid">Blog Grid</h3>
|
||
<a href="../blog-grid.html" target="_blank"><img src="images/blog-grid.jpg" alt="Crafto" /></a>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<ul class="blog-grid blog-wrapper grid-loading grid grid-4col xl-grid-4col lg-grid-3col md-grid-2col sm-grid-2col xs-grid-1col gutter-double-extra-large">
|
||
<li class="grid-sizer"></li>
|
||
<span class="comment"><!-- start blog item --></span>
|
||
<li class="grid-item">
|
||
<div class="card border-0 border-radius-4px box-shadow-medium box-shadow-extra-large-hover">
|
||
<div class="blog-image">
|
||
<a href="#" class="d-block"><img src="image path" alt="" /></a>
|
||
<div class="blog-categories">
|
||
<a href="#" class="categories-btn bg-white text-dark-gray text-dark-gray-hover text-uppercase alt-font fw-500">Agency</a>
|
||
</div>
|
||
</div>
|
||
<div class="card-body p-13">
|
||
<a href="#" class="card-title mb-15px alt-font fw-500 lh-30 text-dark-gray d-inline-block">How to bring the season into your great marketing</a>
|
||
<p>Lorem ipsum has been industry standard dummy text ever...</p>
|
||
<div class="author d-flex justify-content-center align-items-center position-relative overflow-hidden fs-14 text-uppercase">
|
||
<div class="me-auto">
|
||
<span class="blog-date d-inline-block">30 August 2021</span>
|
||
<div class="d-inline-block author-name">By <a href="#" class="text-dark-gray text-decoration-line-bottom fw-500">Den viliamson</a></div>
|
||
</div>
|
||
<div class="like-count">
|
||
<a href="#"><i class="fa-regular fa-heart text-red d-inline-block"></i><span class="text-dark-gray align-middle">65</span></a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<span class="comment"><!-- end blog item --></span>
|
||
<span class="comment"><!-- start blog item --></span>
|
||
<li class="grid-item">
|
||
<div class="card border-0 border-radius-4px box-shadow-medium box-shadow-extra-large-hover">
|
||
<div class="blog-image">
|
||
<a href="#" class="d-block"><img src="image path" alt="" /></a>
|
||
<div class="blog-categories">
|
||
<a href="#" class="categories-btn bg-white text-dark-gray text-dark-gray-hover text-uppercase alt-font fw-500">Luxurious</a>
|
||
</div>
|
||
</div>
|
||
<div class="card-body p-13">
|
||
<a href="#" class="card-title mb-15px alt-font fw-500 lh-30 text-dark-gray d-inline-block">Build up healthy habits and strong peaceful life</a>
|
||
<p>Lorem ipsum has been industry standard dummy text ever...</p>
|
||
<div class="author d-flex justify-content-center align-items-center position-relative overflow-hidden fs-14 text-uppercase">
|
||
<div class="me-auto">
|
||
<span class="blog-date d-inline-block">28 August 2021</span>
|
||
<div class="d-inline-block author-name">By <a href="#" class="text-dark-gray text-decoration-line-bottom fw-500">Hugh macleod</a></div>
|
||
</div>
|
||
<div class="like-count">
|
||
<a href="#"><i class="fa-regular fa-heart text-red d-inline-block"></i><span class="text-dark-gray align-middle">25</span></a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<span class="comment"><!-- end blog item --></span>
|
||
<span class="comment"><!-- start blog item --></span>
|
||
<li class="grid-item">
|
||
<div class="card border-0 border-radius-4px box-shadow-medium box-shadow-extra-large-hover">
|
||
<div class="blog-image">
|
||
<a href="#" class="d-block"><img src="image path" alt="" /></a>
|
||
<div class="blog-categories">
|
||
<a href="#" class="categories-btn bg-white text-dark-gray text-dark-gray-hover text-uppercase alt-font fw-500">Business</a>
|
||
</div>
|
||
</div>
|
||
<div class="card-body p-13">
|
||
<a href="#" class="card-title mb-15px alt-font fw-500 lh-30 text-dark-gray d-inline-block">Make business easy with beautiful application</a>
|
||
<p>Lorem ipsum has been industry standard dummy text ever...</p>
|
||
<div class="author d-flex justify-content-center align-items-center position-relative overflow-hidden fs-14 text-uppercase">
|
||
<div class="me-auto">
|
||
<span class="blog-date d-inline-block">26 August 2021</span>
|
||
<div class="d-inline-block author-name">By <a href="#" class="text-dark-gray text-decoration-line-bottom fw-500">Walton smith</a></div>
|
||
</div>
|
||
<div class="like-count">
|
||
<a href="#"><i class="fa-regular fa-heart text-red d-inline-block"></i><span class="text-dark-gray align-middle">30</span></a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<span class="comment"><!-- end blog item --></span>
|
||
<span class="comment"><!-- start blog item --></span>
|
||
<li class="grid-item">
|
||
<div class="card border-0 border-radius-4px box-shadow-medium box-shadow-extra-large-hover">
|
||
<div class="blog-image">
|
||
<a href="#" class="d-block"><img src="image path" alt="" /></a>
|
||
<div class="blog-categories">
|
||
<a href="#" class="categories-btn bg-white text-dark-gray text-dark-gray-hover text-uppercase alt-font fw-500">Lifestyle</a>
|
||
</div>
|
||
</div>
|
||
<div class="card-body p-13">
|
||
<a href="#" class="card-title mb-15px alt-font fw-500 lh-30 text-dark-gray d-inline-block">Get in over your head as often and as joyfully</a>
|
||
<p>Lorem ipsum has been industry standard dummy text ever...</p>
|
||
<div class="author d-flex justify-content-center align-items-center position-relative overflow-hidden fs-14 text-uppercase">
|
||
<div class="me-auto">
|
||
<span class="blog-date d-inline-block">24 August 2021</span>
|
||
<div class="d-inline-block author-name">By <a href="#" class="text-dark-gray text-decoration-line-bottom fw-500">Hugh macleod</a></div>
|
||
</div>
|
||
<div class="like-count">
|
||
<a href="#"><i class="fa-regular fa-heart text-red d-inline-block"></i><span class="text-dark-gray align-middle">16</span></a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<span class="comment"><!-- end blog item --></span>
|
||
</ul>
|
||
</pre>
|
||
</div>
|
||
<p><span class="label label-danger">Note</span>For demo, You can please check this in <strong><a href="../blog-grid.html" target="_blank">blog-grid.html</a></strong> page.</p>
|
||
|
||
|
||
<h3 id="blog-classic">Blog Classic</h3>
|
||
<a href="../blog-classic.html" target="_blank"><img src="images/blog-classic.jpg" alt="Crafto" /></a>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<ul class="blog-classic blog-wrapper grid-loading grid grid-4col xl-grid-4col lg-grid-3col md-grid-2col sm-grid-2col xs-grid-1col gutter-double-extra-large">
|
||
<li class="grid-sizer"></li>
|
||
<span class="comment"><!-- start blog item --></span>
|
||
<li class="grid-item">
|
||
<div class="card bg-transparent border-0 h-100">
|
||
<div class="blog-image position-relative overflow-hidden border-radius-4px">
|
||
<a href="#"><img src="image path" alt="" /></a>
|
||
</div>
|
||
<div class="card-body px-0 pt-30px pb-30px">
|
||
<span class="fs-13 text-uppercase"><a href="#" class="text-dark-gray fw-500 categories-text">Business</a><a href="#" class="blog-date">26 August 2023</a></span>
|
||
<a href="#" class="card-title mb-15px alt-font fw-500 lh-30 text-dark-gray d-inline-block w-95">Recognizing the need is the primary condition for design</a>
|
||
<p class="mb-15px w-95">Lorem ipsum is simply dummy printing typesetting industry...</p>
|
||
<a href="#" class="card-link alt-font fs-13 text-uppercase text-base-color fw-500">More reading<i class="bi bi-arrow-right icon-small"></i></a>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<span class="comment"><!-- end blog item --></span>
|
||
<span class="comment"><!-- start blog item --></span>
|
||
<li class="grid-item">
|
||
<div class="card bg-transparent border-0 h-100">
|
||
<div class="blog-image position-relative overflow-hidden border-radius-4px">
|
||
<a href="#"><img src="image path" alt="" /></a>
|
||
</div>
|
||
<div class="card-body px-0 pt-30px pb-30px">
|
||
<span class="fs-13 text-uppercase"><a href="#" class="text-dark-gray fw-500 categories-text">Marketing</a><a href="#" class="blog-date">25 August 2023</a></span>
|
||
<a href="#" class="card-title mb-15px alt-font fw-500 lh-30 text-dark-gray d-inline-block w-95">At a meta level digital design connects the dots between</a>
|
||
<p class="mb-15px w-95">Lorem ipsum is simply dummy printing typesetting industry...</p>
|
||
<a href="#" class="card-link alt-font fs-13 text-uppercase text-base-color fw-500">More reading<i class="bi bi-arrow-right icon-small"></i></a>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<span class="comment"><!-- end blog item --></span>
|
||
<span class="comment"><!-- start blog item --></span>
|
||
<li class="grid-item">
|
||
<div class="card bg-transparent border-0 h-100">
|
||
<div class="blog-image position-relative overflow-hidden border-radius-4px">
|
||
<a href="#"><img src="image path" alt="" /></a>
|
||
</div>
|
||
<div class="card-body px-0 pt-30px pb-30px">
|
||
<span class="fs-13 text-uppercase"><a href="#" class="text-dark-gray fw-500 categories-text">Design</a><a href="#" class="blog-date">23 August 2023</a></span>
|
||
<a href="#" class="card-title mb-15px alt-font fw-500 lh-30 text-dark-gray d-inline-block w-95">Make business easy with beautiful application store</a>
|
||
<p class="mb-15px w-95">Lorem ipsum is simply dummy printing typesetting industry...</p>
|
||
<a href="#" class="card-link alt-font fs-13 text-uppercase text-base-color fw-500">More reading<i class="bi bi-arrow-right icon-small"></i></a>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<span class="comment"><!-- end blog item --></span>
|
||
<span class="comment"><!-- start blog item --></span>
|
||
<li class="grid-item">
|
||
<div class="card bg-transparent border-0 h-100">
|
||
<div class="blog-image position-relative overflow-hidden border-radius-4px">
|
||
<a href="#"><img src="image path" alt="" /></a>
|
||
</div>
|
||
<div class="card-body px-0 pt-30px pb-30px">
|
||
<span class="fs-13 text-uppercase"><a href="#" class="text-dark-gray fw-500 categories-text">Business</a><a href="#" class="blog-date">20 August 2023</a></span>
|
||
<a href="#" class="card-title mb-15px alt-font fw-500 lh-30 text-dark-gray d-inline-block w-95">Get in over your head as often and as joyfully as possible</a>
|
||
<p class="mb-15px w-95">Lorem ipsum is simply dummy printing typesetting industry...</p>
|
||
<a href="#" class="card-link alt-font fs-13 text-uppercase text-base-color fw-500">More reading<i class="bi bi-arrow-right icon-small"></i></a>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<span class="comment"><!-- end blog item --></span>
|
||
</ul>
|
||
</pre>
|
||
</div>
|
||
<p><span class="label label-danger">Note</span>For demo, You can please check this in <strong><a href="../blog-classic.html" target="_blank">blog-classic.html</a></strong> page.</p>
|
||
|
||
|
||
<h3 id="blog-metro">Blog Metro</h3>
|
||
<a href="../blog-metro.html" target="_blank"><img src="images/blog-metro.jpg" alt="Crafto" /></a>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<ul class="blog-metro blog-wrapper grid-loading grid grid-4col xl-grid-4col lg-grid-3col md-grid-2col sm-grid-2col xs-grid-1col gutter-large">
|
||
<li class="grid-sizer"></li>
|
||
<span class="comment"><!-- start portfolio item --></span>
|
||
<li class="grid-item grid-item-double">
|
||
<figure class="position-relative mb-0 overflow-hidden">
|
||
<div class="blog-image bg-dark-slate-blue">
|
||
<a href="#"><img src="image path" alt="" /></a>
|
||
<div class="blog-overlay"></div>
|
||
</div>
|
||
<figcaption class="d-flex flex-column justify-content-end h-100 ps-7 pe-7 pt-6 pb-6">
|
||
<div class="blog-categories mb-auto">
|
||
<a href="#" class="categories-btn bg-white text-dark-gray text-uppercase alt-font fw-500 ms-0 mb-auto align-self-start">Design</a>
|
||
</div>
|
||
<a href="#" class="fs-13 alt-font mb-10px text-white opacity-6 text-uppercase">30 August 2021</a>
|
||
<a href="#" class="text-white card-title fs-18 lh-30 alt-font">It takes a real designer to design for women</a>
|
||
</figcaption>
|
||
</figure>
|
||
</li>
|
||
<span class="comment"><!-- end portfolio item --></span>
|
||
<span class="comment"><!-- start portfolio item --></span>
|
||
<li class="grid-item">
|
||
<figure class="position-relative mb-0 overflow-hidden">
|
||
<div class="blog-image bg-dark-slate-blue">
|
||
<a href="#"><img src="image path" alt="" /></a>
|
||
<div class="blog-overlay"></div>
|
||
</div>
|
||
<figcaption class="d-flex flex-column justify-content-end h-100 ps-14 pe-14 pt-12 pb-12 sm-ps-7 sm-pe-7 sm-pt-6 sm-pb-6">
|
||
<div class="blog-categories mb-auto">
|
||
<a href="#" class="categories-btn bg-white text-dark-gray text-uppercase alt-font fw-500 ms-0 mb-auto align-self-start">Adventure</a>
|
||
</div>
|
||
<a href="#" class="fs-13 alt-font mb-10px text-white opacity-6 text-uppercase">28 August 2021</a>
|
||
<a href="#" class="text-white card-title fs-18 lh-30 w-85 sm-w-100 alt-font">Experience breathtaking views and perspectives</a>
|
||
</figcaption>
|
||
</figure>
|
||
</li>
|
||
<span class="comment"><!-- end portfolio item --></span>
|
||
<span class="comment"><!-- start portfolio item --></span>
|
||
<li class="grid-item">
|
||
<figure class="position-relative mb-0 overflow-hidden">
|
||
<div class="blog-image bg-dark-slate-blue">
|
||
<a href="#"><img src="image path" alt="" /></a>
|
||
<div class="blog-overlay"></div>
|
||
</div>
|
||
<figcaption class="d-flex flex-column justify-content-end h-100 ps-14 pe-14 pt-12 pb-12 sm-ps-7 sm-pe-7 sm-pt-6 sm-pb-6">
|
||
<div class="blog-categories mb-auto">
|
||
<a href="#" class="categories-btn bg-white text-dark-gray text-uppercase alt-font fw-500 ms-0 mb-auto align-self-start">Luxurious</a>
|
||
</div>
|
||
<a href="#" class="fs-13 alt-font mb-10px text-white opacity-6 text-uppercase">26 August 2020</a>
|
||
<a href="#" class="text-white card-title fs-18 lh-30 w-85 sm-w-100 alt-font">Get in over your head as often and as joyfully</a>
|
||
</figcaption>
|
||
</figure>
|
||
</li>
|
||
<span class="comment"><!-- end portfolio item --></span>
|
||
<span class="comment"><!-- start portfolio item --></span>
|
||
<li class="grid-item grid-item-double">
|
||
<figure class="position-relative mb-0 overflow-hidden">
|
||
<div class="blog-image bg-dark-slate-blue">
|
||
<a href="#"><img src="image path" alt="" /></a>
|
||
<div class="blog-overlay"></div>
|
||
</div>
|
||
<figcaption class="d-flex flex-column justify-content-end h-100 ps-7 pe-7 pt-6 pb-6">
|
||
<div class="blog-categories mb-auto">
|
||
<a href="#" class="categories-btn bg-white text-dark-gray text-uppercase alt-font fw-500 ms-0 mb-auto align-self-start">Adventure</a>
|
||
</div>
|
||
<a href="#" class="fs-13 alt-font mb-10px text-white opacity-6 text-uppercase">24 August 2021</a>
|
||
<a href="#" class="text-white card-title fs-18 lh-30 alt-font">Build up healthy habits and strong peaceful life</a>
|
||
</figcaption>
|
||
</figure>
|
||
</li>
|
||
<span class="comment"><!-- end portfolio item --></span>
|
||
</ul>
|
||
</pre>
|
||
</div>
|
||
<p><span class="label label-danger">Note</span>For demo, You can please check this in <strong><a href="../blog-metro.html" target="_blank">blog-metro.html</a></strong> page.</p>
|
||
|
||
|
||
<h3 id="blog-masonry">Blog Masonry</h3>
|
||
<a href="../blog-masonry.html" target="_blank"><img src="images/blog-masonry.jpg" alt="Crafto" /></a>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<ul class="blog-masonry blog-wrapper grid-loading grid grid-4col xl-grid-4col lg-grid-3col md-grid-2col sm-grid-2col xs-grid-1col gutter-extra-large">
|
||
<li class="grid-sizer"></li>
|
||
<span class="comment"><!-- start blog item --></span>
|
||
<li class="grid-item">
|
||
<div class="card border-0 border-radius-4px overflow-hidden box-shadow-large box-shadow-extra-large-hover">
|
||
<div class="card-top d-flex align-items-center">
|
||
<a href="#"><img src="image path" class="avtar" alt=""></a>
|
||
<span class="fs-15">By <a href="#" class="text-dark-gray fw-500">Andy glamer</a></span>
|
||
<div class="like-count ms-auto fs-13">
|
||
<a href="#"><i class="fa-regular fa-heart text-red d-inline-block"></i><span class="text-dark-gray">65</span></a>
|
||
</div>
|
||
</div>
|
||
<div class="blog-image position-relative overflow-hidden">
|
||
<a href="#"><img src="image path" alt="" /></a>
|
||
<div class="blog-categories">
|
||
<a href="#" class="categories-btn bg-white text-dark-gray text-dark-gray-hover text-uppercase alt-font fw-500">Agency</a>
|
||
</div>
|
||
</div>
|
||
<div class="card-body p-0">
|
||
<div class="post-content ps-13 pe-13 pt-11 pb-11">
|
||
<a href="#" class="card-title mb-15px alt-font fw-500 lh-30 text-dark-gray d-inline-block">It takes a real designer to design for real women</a>
|
||
<p class="mb-15px">Lorem ipsum has been industry standard dummy text ever...</p>
|
||
<a href="#" class="blog-date fs-14 text-medium-gray"><i class="feather icon-feather-calendar text-dark-gray fs-15"></i>30 August 2021</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<span class="comment"><!-- end blog item --></span>
|
||
<span class="comment"><!-- start blog item --></span>
|
||
<li class="grid-item">
|
||
<div class="card border-0 border-radius-4px overflow-hidden box-shadow-large box-shadow-extra-large-hover">
|
||
<div class="card-top d-flex align-items-center">
|
||
<a href="#"><img src="image path" class="avtar" alt=""></a>
|
||
<span class="fs-15">By <a href="#" class="text-dark-gray fw-500">Den viliamson</a></span>
|
||
<div class="like-count ms-auto fs-13">
|
||
<a href="#"><i class="fa-regular fa-heart text-red d-inline-block"></i><span class="text-dark-gray">35</span></a>
|
||
</div>
|
||
</div>
|
||
<div class="blog-image position-relative overflow-hidden">
|
||
<a href="#"><img src="image path" alt="" /></a>
|
||
<div class="blog-categories">
|
||
<a href="#" class="categories-btn bg-white text-dark-gray text-dark-gray-hover text-uppercase alt-font fw-500">Design</a>
|
||
</div>
|
||
</div>
|
||
<div class="card-body p-0">
|
||
<div class="post-content ps-13 pe-13 pt-11 pb-11">
|
||
<a href="#" class="card-title mb-15px alt-font fw-500 lh-30 text-dark-gray d-inline-block">Experience the breathtaking views and perspectives</a>
|
||
<p class="mb-15px">Lorem ipsum has been industry standard dummy text ever...</p>
|
||
<a href="#" class="blog-date fs-14"><i class="feather icon-feather-calendar text-dark-gray fs-15"></i>28 August 2021</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<span class="comment"><!-- end blog item --></span>
|
||
<span class="comment"><!-- start blog item --></span>
|
||
<li class="grid-item">
|
||
<div class="card border-0 border-radius-4px overflow-hidden box-shadow-large box-shadow-extra-large-hover">
|
||
<div class="card-top d-flex align-items-center">
|
||
<a href="#"><img src="image path" class="avtar" alt=""></a>
|
||
<span class="fs-15">By <a href="#" class="text-dark-gray fw-500">Jones robbert</a></span>
|
||
<div class="like-count ms-auto fs-13">
|
||
<a href="#"><i class="fa-regular fa-heart text-red d-inline-block"></i><span class="text-dark-gray">58</span></a>
|
||
</div>
|
||
</div>
|
||
<div class="blog-image position-relative overflow-hidden">
|
||
<a href="#"><img src="image path" alt="" /></a>
|
||
<div class="blog-categories">
|
||
<a href="#" class="categories-btn bg-white text-dark-gray text-dark-gray-hover text-uppercase alt-font fw-500">Branding</a>
|
||
</div>
|
||
</div>
|
||
<div class="card-body p-0">
|
||
<div class="post-content ps-13 pe-13 pt-11 pb-11">
|
||
<a href="#" class="card-title mb-15px alt-font fw-500 lh-30 text-dark-gray d-inline-block">Build up healthy habits and strong peaceful life</a>
|
||
<p class="mb-15px">Lorem ipsum has been industry standard dummy text ever...</p>
|
||
<a href="#" class="blog-date fs-14"><i class="feather icon-feather-calendar text-dark-gray fs-15"></i>26 August 2021</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<span class="comment"><!-- end blog item --></span>
|
||
<span class="comment"><!-- start blog item --></span>
|
||
<li class="grid-item">
|
||
<div class="card border-0 border-radius-4px overflow-hidden box-shadow-large box-shadow-extra-large-hover">
|
||
<div class="card-top d-flex align-items-center">
|
||
<a href="#"><img src="image path" class="avtar" alt=""></a>
|
||
<span class="fs-15">By <a href="#" class="text-dark-gray fw-500">Andy glamer</a></span>
|
||
<div class="like-count ms-auto fs-13">
|
||
<a href="#"><i class="fa-regular fa-heart text-red d-inline-block"></i><span class="text-dark-gray">25</span></a>
|
||
</div>
|
||
</div>
|
||
<div class="blog-image position-relative overflow-hidden">
|
||
<a href="#"><img src="image path" alt="" /></a>
|
||
<div class="blog-categories">
|
||
<a href="#" class="categories-btn bg-white text-dark-gray text-dark-gray-hover text-uppercase alt-font fw-500">Agency</a>
|
||
</div>
|
||
</div>
|
||
<div class="card-body p-0">
|
||
<div class="post-content ps-13 pe-13 pt-11 pb-11">
|
||
<a href="#" class="card-title mb-15px alt-font fw-500 lh-30 text-dark-gray d-inline-block">Some people just try to celebrate the joys of life</a>
|
||
<p class="mb-15px">Lorem ipsum has been industry standard dummy text ever...</p>
|
||
<a href="#" class="blog-date fs-14"><i class="feather icon-feather-calendar text-dark-gray fs-15"></i>24 August 2021</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<span class="comment"><!-- end blog item --></span>
|
||
</ul>
|
||
</pre>
|
||
</div>
|
||
<p><span class="label label-danger">Note</span>For demo, You can please check this in <strong><a href="../blog-masonry.html" target="_blank">blog-masonry.html</a></strong> page.</p>
|
||
|
||
|
||
<h3 id="blog-simple">Blog Simple</h3>
|
||
<a href="../blog-simple.html" target="_blank"><img src="images/blog-simple.jpg" alt="Crafto" /></a>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<ul class="blog-simple blog-wrapper grid-loading grid grid-4col xl-grid-4col lg-grid-3col md-grid-2col sm-grid-2col xs-grid-1col gutter-extra-large">
|
||
<li class="grid-sizer"></li>
|
||
<span class="comment"><!-- start blog item --></span>
|
||
<li class="grid-item">
|
||
<figure class="position-relative mb-0 box-hover">
|
||
<div class="blog-image">
|
||
<img src="image path" alt="" />
|
||
<span class="box-overlay bg-dark-slate-blue"></span>
|
||
<span class="bg-gradient-gray-light-dark-transparent position-absolute opacity-6 top-0px left-0px w-100 h-100"></span>
|
||
</div>
|
||
<figcaption class="d-flex flex-column h-100">
|
||
<div class="my-auto w-100 text-center blog-hover-icon"><a href="#" class="d-inline-block"><i class="line-icon-Arrow-OutRight icon-extra-large text-white"></i></a></div>
|
||
<div class="position-relative post-content p-14 text-center last-paragraph-no-margin">
|
||
<div class="position-relative z-index-2 overflow-hidden">
|
||
<a href="#" class="d-inline-block fs-15 text-gradient-light-blue-light-turquoise mb-5px text-uppercase fw-500">30 August 2021</a>
|
||
<a href="#" class="card-title fs-20 alt-font text-white mb-0 d-block">Get in over your head as often and as joyfully</a>
|
||
<div class="hover-text"><a href="#" class="btn btn-link-gradient btn-medium text-white thin mt-20px mb-5px opacity-6 fw-300">Continue reading<span class="bg-white"></span></a></div>
|
||
</div>
|
||
<div class="box-overlay bg-dark-slate-blue"></div>
|
||
</div>
|
||
</figcaption>
|
||
</figure>
|
||
</li>
|
||
<span class="comment"><!-- end blog item --></span>
|
||
<span class="comment"><!-- start blog item --></span>
|
||
<li class="grid-item">
|
||
<figure class="position-relative mb-0 box-hover">
|
||
<div class="blog-image">
|
||
<img src="image path" alt="" />
|
||
<span class="box-overlay bg-dark-slate-blue"></span>
|
||
<span class="bg-gradient-gray-light-dark-transparent position-absolute opacity-6 top-0px left-0px w-100 h-100"></span>
|
||
</div>
|
||
<figcaption class="d-flex flex-column h-100">
|
||
<div class="my-auto w-100 text-center blog-hover-icon"><a href="#" class="d-inline-block"><i class="line-icon-Arrow-OutRight icon-extra-large text-white"></i></a></div>
|
||
<div class="position-relative post-content p-14 text-center last-paragraph-no-margin">
|
||
<div class="position-relative z-index-2 overflow-hidden">
|
||
<a href="#" class="d-inline-block fs-15 text-gradient-light-blue-light-turquoise mb-5px text-uppercase fw-500">28 August 2021</a>
|
||
<a href="#" class="card-title fs-20 alt-font text-white mb-0 d-block">Everything is designed things are designed</a>
|
||
<div class="hover-text"><a href="#" class="btn btn-link-gradient btn-medium text-white thin mt-20px mb-5px opacity-6 fw-300">Continue reading<span class="bg-white"></span></a></div>
|
||
</div>
|
||
<div class="box-overlay bg-dark-slate-blue"></div>
|
||
</div>
|
||
</figcaption>
|
||
</figure>
|
||
</li>
|
||
<span class="comment"><!-- end blog item --></span>
|
||
<span class="comment"><!-- start blog item --></span>
|
||
<li class="grid-item">
|
||
<figure class="position-relative mb-0 box-hover">
|
||
<div class="blog-image">
|
||
<img src="image path" alt="" />
|
||
<span class="box-overlay bg-dark-slate-blue"></span>
|
||
<span class="bg-gradient-gray-light-dark-transparent position-absolute opacity-6 top-0px left-0px w-100 h-100"></span>
|
||
</div>
|
||
<figcaption class="d-flex flex-column h-100">
|
||
<div class="my-auto w-100 text-center blog-hover-icon"><a href="#" class="d-inline-block"><i class="line-icon-Arrow-OutRight icon-extra-large text-white"></i></a></div>
|
||
<div class="position-relative post-content p-14 text-center last-paragraph-no-margin">
|
||
<div class="position-relative z-index-2 overflow-hidden">
|
||
<a href="#" class="d-inline-block fs-15 text-gradient-light-blue-light-turquoise mb-5px text-uppercase fw-500">26 August 2021</a>
|
||
<a href="#" class="card-title fs-20 alt-font text-white mb-0 d-block">Good work for good people good design</a>
|
||
<div class="hover-text"><a href="#" class="btn btn-link-gradient btn-medium text-white thin mt-20px mb-5px opacity-6 fw-300">Continue reading<span class="bg-white"></span></a></div>
|
||
</div>
|
||
<div class="box-overlay bg-dark-slate-blue"></div>
|
||
</div>
|
||
</figcaption>
|
||
</figure>
|
||
</li>
|
||
<span class="comment"><!-- end blog item --></span>
|
||
<span class="comment"><!-- start blog item --></span>
|
||
<li class="grid-item">
|
||
<figure class="position-relative mb-0 box-hover">
|
||
<div class="blog-image">
|
||
<img src="image path" alt="" />
|
||
<span class="box-overlay bg-dark-slate-blue"></span>
|
||
<span class="bg-gradient-gray-light-dark-transparent position-absolute opacity-6 top-0px left-0px w-100 h-100"></span>
|
||
</div>
|
||
<figcaption class="d-flex flex-column h-100">
|
||
<div class="my-auto w-100 text-center blog-hover-icon"><a href="#" class="d-inline-block"><i class="line-icon-Arrow-OutRight icon-extra-large text-white"></i></a></div>
|
||
<div class="position-relative post-content p-14 text-center last-paragraph-no-margin">
|
||
<div class="position-relative z-index-2 overflow-hidden">
|
||
<a href="#" class="d-inline-block fs-15 text-gradient-light-blue-light-turquoise mb-5px text-uppercase fw-500">24 August 2021</a>
|
||
<a href="#" class="card-title fs-20 alt-font text-white mb-0 d-block">A business needs a successful mix of design</a>
|
||
<div class="hover-text"><a href="#" class="btn btn-link-gradient btn-medium text-white thin mt-20px mb-5px opacity-6 fw-300">Continue reading<span class="bg-white"></span></a></div>
|
||
</div>
|
||
<div class="box-overlay bg-dark-slate-blue"></div>
|
||
</div>
|
||
</figcaption>
|
||
</figure>
|
||
</li>
|
||
<span class="comment"><!-- end blog item --></span>
|
||
</ul>
|
||
</pre>
|
||
</div>
|
||
<p><span class="label label-danger">Note</span>For demo, You can please check this in <strong><a href="../blog-simple.html" target="_blank">blog-simple.html</a></strong> page.</p>
|
||
|
||
|
||
<h3 id="blog-date">Blog Date</h3>
|
||
<a href="../blog-date.html" target="_blank"><img src="images/blog-date.jpg" alt="Crafto" /></a>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<ul class="blog-date blog-wrapper grid-loading grid grid-3col xl-grid-3col lg-grid-2col md-grid-2col sm-grid-1col xs-grid-1col gutter-double-extra-large">
|
||
<li class="grid-sizer"></li>
|
||
<span class="comment"><!-- start blog item --></span>
|
||
<li class="grid-item">
|
||
<div class="feature-box border-radius-5px feature-box-left-icon bg-white box-shadow-medium box-shadow-large-hover p-11 last-paragraph-no-margin">
|
||
<div class="feature-box-icon">
|
||
<time class="alt-font text-center post-date border-radius-3px bg-dark-gray text-white text-uppercase fw-500 d-inline-block">
|
||
<span class="date d-block fs-24 lh-22">28</span>
|
||
<span class="month d-block lh-24 text-medium-gray">Jun</span>
|
||
</time>
|
||
</div>
|
||
<div class="feature-box-content">
|
||
<div class="alt-font fs-14 lh-24 text-uppercase mb-10px d-inline-block text-gradient-sky-blue-pink fw-500">By <a href="#">Andy glamer</a></div>
|
||
<a href="#" class="card-title text-dark-gray mb-10px fs-18 fw-500 d-block">Leopard is an animal my designs come from nature</a>
|
||
<p>Lorem ipsum been the industry way standard dummy text...</p>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<span class="comment"><!-- end blog item --></span>
|
||
<span class="comment"><!-- start blog item --></span>
|
||
<li class="grid-item">
|
||
<div class="feature-box border-radius-5px feature-box-left-icon bg-white box-shadow-medium box-shadow-large-hover p-11 last-paragraph-no-margin">
|
||
<div class="feature-box-icon">
|
||
<time class="alt-font text-center post-date border-radius-3px bg-dark-gray text-white text-uppercase fw-500 d-inline-block">
|
||
<span class="date d-block fs-24 lh-22">26</span>
|
||
<span class="month d-block lh-24 text-medium-gray">Jun</span>
|
||
</time>
|
||
</div>
|
||
<div class="feature-box-content">
|
||
<div class="alt-font fs-14 lh-24 text-uppercase mb-10px d-inline-block text-gradient-sky-blue-pink fw-500">By <a href="#">Walton smith</a></div>
|
||
<a href="#" class="card-title text-dark-gray mb-10px fs-18 fw-500 d-block">Good work for good people good design is a language</a>
|
||
<p>Lorem ipsum been the industry way standard dummy text...</p>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<span class="comment"><!-- end blog item --></span>
|
||
<span class="comment"><!-- start blog item --></span>
|
||
<li class="grid-item">
|
||
<div class="feature-box border-radius-5px feature-box-left-icon bg-white box-shadow-medium box-shadow-large-hover p-11 last-paragraph-no-margin">
|
||
<div class="feature-box-icon">
|
||
<time class="alt-font text-center post-date border-radius-3px bg-dark-gray text-white text-uppercase fw-500 d-inline-block">
|
||
<span class="date d-block fs-24 lh-22">24</span>
|
||
<span class="month d-block lh-24 text-medium-gray">Jun</span>
|
||
</time>
|
||
</div>
|
||
<div class="feature-box-content">
|
||
<div class="alt-font fs-14 lh-24 text-uppercase mb-10px d-inline-block text-gradient-sky-blue-pink fw-500">By <a href="#">Bill gardner</a></div>
|
||
<a href="#" class="card-title text-dark-gray mb-10px fs-18 fw-500 d-block">Everything is designed things are good designed</a>
|
||
<p>Lorem ipsum been the industry way standard dummy text...</p>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<span class="comment"><!-- end blog item --></span>
|
||
<span class="comment"><!-- start blog item --></span>
|
||
<li class="grid-item">
|
||
<div class="feature-box border-radius-5px feature-box-left-icon bg-white box-shadow-medium box-shadow-large-hover p-11 last-paragraph-no-margin">
|
||
<div class="feature-box-icon">
|
||
<time class="alt-font text-center post-date border-radius-3px bg-dark-gray text-white text-uppercase fw-500 d-inline-block">
|
||
<span class="date d-block fs-24 lh-22">22</span>
|
||
<span class="month d-block lh-24 text-medium-gray">Jun</span>
|
||
</time>
|
||
</div>
|
||
<div class="feature-box-content">
|
||
<div class="alt-font fs-14 lh-24 text-uppercase mb-10px d-inline-block text-gradient-sky-blue-pink fw-500">By <a href="#">Vico magistre</a></div>
|
||
<a href="#" class="card-title text-dark-gray mb-10px fs-18 fw-500 d-block">Reason and judgment are the qualities of a leader</a>
|
||
<p>Lorem ipsum been the industry way standard dummy text...</p>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<span class="comment"><!-- end blog item --></span>
|
||
</ul>
|
||
</pre>
|
||
</div>
|
||
<p><span class="label label-danger">Note</span>For demo, You can please check this in <strong><a href="../blog-date.html" target="_blank">blog-date.html</a></strong> page.</p>
|
||
|
||
|
||
<h3 id="blog-only-text">Blog Only Text</h3>
|
||
<a href="../blog-only-text.html" target="_blank"><img src="images/blog-ony-text.jpg" alt="Crafto" /></a>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<ul class="blog-only-text blog-wrapper grid-loading grid grid-4col xl-grid-4col lg-grid-3col md-grid-2col sm-grid-2col xs-grid-1col gutter-extra-large">
|
||
<li class="grid-sizer"></li>
|
||
<span class="comment"><!-- start blog item --></span>
|
||
<li class="grid-item">
|
||
<div class="card border-radius-4px box-shadow-extra-large border-0 h-100 overflow-hidden">
|
||
<div class="card-body hover-box dark-hover p-15 md-p-12">
|
||
<img src="image path" class="hover-img" alt="">
|
||
<a href="#" class="categories-btn ms-0 bg-base-color text-white text-dark-gray-hover text-uppercase alt-font fw-500 mb-70px">Business</a>
|
||
<a href="#" class="fs-13 text-uppercase d-block mb-5px text-medium-opacity text-medium-opacity">Jonse robbert</a>
|
||
<a href="#" class="card-title d-block fs-22 ls-minus-05px fw-500 text-dark-gray mb-0 w-90 w-90">Design can speak the in tongue of art force of commerce</a>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<span class="comment"><!-- end blog item --></span>
|
||
<span class="comment"><!-- start blog item --></span>
|
||
<li class="grid-item">
|
||
<div class="card border-radius-4px box-shadow-extra-large border-0 h-100 overflow-hidden">
|
||
<div class="card-body hover-box dark-hover p-15 md-p-12">
|
||
<img src="image path" class="hover-img" alt="">
|
||
<a href="#" class="categories-btn ms-0 bg-base-color text-white text-dark-gray-hover text-uppercase alt-font fw-500 mb-70px">Business</a>
|
||
<a href="#" class="fs-13 text-uppercase d-block mb-5px text-medium-opacity">Den viliamson</a>
|
||
<a href="#" class="card-title d-block fs-22 ls-minus-05px fw-500 text-dark-gray mb-0 w-90">Simplicity is process the obvious and adding meaningful</a>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<span class="comment"><!-- end blog item --></span>
|
||
<span class="comment"><!-- start blog item --></span>
|
||
<li class="grid-item">
|
||
<div class="card border-radius-4px box-shadow-extra-large border-0 h-100 overflow-hidden">
|
||
<div class="card-body hover-box dark-hover p-15 md-p-12">
|
||
<img src="image path" class="hover-img" alt="">
|
||
<a href="#" class="categories-btn ms-0 bg-base-color text-white text-dark-gray-hover text-uppercase alt-font fw-500 mb-70px">Marketing</a>
|
||
<a href="#" class="fs-13 text-uppercase d-block mb-5px text-medium-opacity">Rosald smith</a>
|
||
<a href="#" class="card-title d-block fs-22 ls-minus-05px fw-500 text-dark-gray mb-0 w-90">Everything know about midi skirts and how to wear fashion</a>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<span class="comment"><!-- end blog item --></span>
|
||
<span class="comment"><!-- start blog item --></span>
|
||
<li class="grid-item">
|
||
<div class="card border-radius-4px box-shadow-extra-large border-0 h-100 overflow-hidden">
|
||
<div class="card-body hover-box dark-hover p-15 md-p-12">
|
||
<img src="image path" class="hover-img" alt="">
|
||
<a href="#" class="categories-btn ms-0 bg-base-color text-white text-dark-gray-hover text-uppercase alt-font fw-500 mb-70px">Design</a>
|
||
<a href="#" class="fs-13 text-uppercase d-block mb-5px text-medium-opacity">Andy glamere</a>
|
||
<a href="#" class="card-title d-block fs-22 ls-minus-05px fw-500 text-dark-gray mb-0 w-90">Recognizing the need is the primary condition for design</a>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<span class="comment"><!-- end blog item --></span>
|
||
</ul>
|
||
</pre>
|
||
</div>
|
||
<p><span class="label label-danger">Note</span>For demo, You can please check this in <strong><a href="../blog-only-text.html" target="_blank">blog-only-text.html</a></strong> page.</p>
|
||
|
||
|
||
<h3 id="blog-side-image">Blog Side Image</h3>
|
||
<a href="../blog-side-image.html" target="_blank"><img src="images/blog-side-image.jpg" alt="Crafto" /></a>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<ul class="blog-side-image blog-wrapper grid-loading grid grid-3col xxl-grid-2col xl-grid-2col lg-grid-2col md-grid-1col sm-grid-1col xs-grid-1col gutter-double-extra-large">
|
||
<li class="grid-sizer"></li>
|
||
<span class="comment"><!-- start blog item --></span>
|
||
<li class="grid-item">
|
||
<div class="blog-box d-md-flex d-block flex-row h-100 border-radius-4px overflow-hidden box-shadow-extra-large">
|
||
<div class="blog-image w-50 sm-w-100 cover-background" style="background-image: url('image path')">
|
||
<a href="#" class="blog-post-image-overlay"></a>
|
||
</div>
|
||
<div class="blog-content w-50 sm-w-100 p-50px lg-p-30px bg-white d-flex flex-column justify-content-center align-items-start xs-p-35px">
|
||
<a href="#" class="fs-14 text-uppercase fw-500 mb-30px lg-mb-15px text-gradient-sky-blue-pink">Creative</a>
|
||
<a href="#" class="card-title text-dark-gray mb-10px fw-500 fs-18 lh-28">Creativity is nothing but a mind set free</a>
|
||
<p class="mb-30px lg-mb-15px">Lorem ipsum is simply text of the printing...</p>
|
||
<div><span class="separator bg-dark-gray"></span><a href="#" class="text-dark-gray d-inline-block fs-15 fw-500 fw-500">Den viliamson</a></div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<span class="comment"><!-- end blog item --></span>
|
||
<span class="comment"><!-- start blog item --></span>
|
||
<li class="grid-item">
|
||
<div class="blog-box d-md-flex d-block flex-row h-100 border-radius-4px overflow-hidden box-shadow-extra-large">
|
||
<div class="blog-image w-50 sm-w-100 cover-background" style="background-image: url('image path')">
|
||
<a href="#" class="blog-post-image-overlay"></a>
|
||
</div>
|
||
<div class="blog-content w-50 sm-w-100 p-50px lg-p-30px bg-white d-flex flex-column justify-content-center align-items-start xs-p-35px">
|
||
<a href="#" class="fs-14 text-uppercase fw-500 mb-30px lg-mb-15px text-gradient-sky-blue-pink">Creative</a>
|
||
<a href="#" class="card-title text-dark-gray mb-10px fw-500 fs-18 lh-28">Simplicity, wit, and good typography</a>
|
||
<p class="mb-30px lg-mb-15px">Lorem ipsum is simply text of the printing...</p>
|
||
<div><span class="separator bg-dark-gray"></span><a href="#" class="text-dark-gray d-inline-block fs-15 fw-500">Walton smith</a></div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<span class="comment"><!-- end blog item --></span>
|
||
<span class="comment"><!-- start blog item --></span>
|
||
<li class="grid-item">
|
||
<div class="blog-box d-md-flex d-block flex-row h-100 border-radius-4px overflow-hidden box-shadow-extra-large">
|
||
<div class="blog-image w-50 sm-w-100 cover-background" style="background-image: url('image path')">
|
||
<a href="#" class="blog-post-image-overlay"></a>
|
||
</div>
|
||
<div class="blog-content w-50 sm-w-100 p-50px lg-p-30px bg-white d-flex flex-column justify-content-center align-items-start xs-p-35px">
|
||
<a href="#" class="fs-14 text-uppercase fw-500 mb-30px lg-mb-15px text-gradient-sky-blue-pink">Meetup</a>
|
||
<a href="#" class="card-title text-dark-gray mb-10px fw-500 fs-18 lh-28">What works good is that good different</a>
|
||
<p class="mb-30px lg-mb-15px">Lorem ipsum is simply text of the printing...</p>
|
||
<div><span class="separator bg-dark-gray"></span><a href="#" class="text-dark-gray d-inline-block fs-15 fw-500">Rosald smith</a></div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<span class="comment"><!-- end blog item --></span>
|
||
</ul>
|
||
</pre>
|
||
</div>
|
||
<p><span class="label label-danger">Note</span>For demo, You can please check this in <strong><a href="../blog-side-image.html" target="_blank">blog-side-image.html</a></strong> page.</p>
|
||
|
||
|
||
<h3 id="blog-modern">Blog Modern</h3>
|
||
<a href="../blog-modern.html" target="_blank"><img src="images/blog-modern.jpg" alt="Crafto" /></a>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<ul class="blog-modern blog-wrapper grid-loading grid grid-4col xl-grid-4col lg-grid-3col md-grid-2col sm-grid-2col xs-grid-1col gutter-extra-large">
|
||
<li class="grid-sizer"></li>
|
||
<span class="comment"><!-- start blog item --></span>
|
||
<li class="grid-item mb-50px">
|
||
<div class="box-hover text-center">
|
||
<figure class="mb-0 position-relative">
|
||
<div class="blog-image position-relative overflow-hidden">
|
||
<a href="#"><img src="image path" alt="" /></a>
|
||
</div>
|
||
<figcaption class="post-content-wrapper">
|
||
<div class="position-relative bg-dark-gray post-content p-35px z-index-2 lh-initial">
|
||
<div class="hover-text">
|
||
<a href="#" class="text-gradient-light-purple-light-orange fs-15 text-uppercase fw-600 mb-15px d-inline-block">Agency</a>
|
||
</div>
|
||
<a href="#" class="card-title mb-0 fs-20 text-white d-inline-block">It takes a real designer to design for real women</a>
|
||
<div class="box-overlay bg-dark-gray z-index-minus-1"></div>
|
||
</div>
|
||
<div class="fs-14 bg-white p-15px lh-initial"><span class="d-inline-block">By <a href="#">Jonse robbert</a></span><span class="separator d-inline-block">|</span><a href="#">30 June 2021</a></div>
|
||
</figcaption>
|
||
</figure>
|
||
</div>
|
||
</li>
|
||
<span class="comment"><!-- end blog item --></span>
|
||
<span class="comment"><!-- start blog item --></span>
|
||
<li class="grid-item mb-50px">
|
||
<div class="box-hover text-center">
|
||
<figure class="mb-0 position-relative">
|
||
<div class="blog-image position-relative overflow-hidden">
|
||
<a href="#"><img src="image path" alt="" /></a>
|
||
</div>
|
||
<figcaption class="post-content-wrapper">
|
||
<div class="position-relative bg-dark-gray post-content p-35px z-index-2 lh-initial">
|
||
<div class="hover-text">
|
||
<a href="#" class="text-gradient-light-purple-light-orange fs-15 text-uppercase fw-600 mb-15px d-inline-block">Branding</a>
|
||
</div>
|
||
<a href="#" class="card-title mb-0 fs-20 text-white d-inline-block">Experience breathtaking views and perspectives</a>
|
||
<div class="box-overlay bg-dark-gray z-index-minus-1"></div>
|
||
</div>
|
||
<div class="fs-14 bg-white p-15px lh-initial"><span class="d-inline-block">By <a href="#">Rosald smith</a></span><span class="separator d-inline-block">|</span><a href="#">28 June 2021</a></div>
|
||
</figcaption>
|
||
</figure>
|
||
</div>
|
||
</li>
|
||
<span class="comment"><!-- end blog item --></span>
|
||
<span class="comment"><!-- start blog item --></span>
|
||
<li class="grid-item mb-50px">
|
||
<div class="box-hover text-center">
|
||
<figure class="mb-0 position-relative">
|
||
<div class="blog-image position-relative overflow-hidden">
|
||
<a href="#"><img src="image path" alt="" /></a>
|
||
</div>
|
||
<figcaption class="post-content-wrapper">
|
||
<div class="position-relative bg-dark-gray post-content p-35px z-index-2 lh-initial">
|
||
<div class="hover-text">
|
||
<a href="#" class="text-gradient-light-purple-light-orange fs-15 text-uppercase fw-600 mb-15px d-inline-block">Business</a>
|
||
</div>
|
||
<a href="#" class="card-title mb-0 fs-20 text-white d-inline-block">Teamwork is essential for small teams to challenges</a>
|
||
<div class="box-overlay bg-dark-gray z-index-minus-1"></div>
|
||
</div>
|
||
<div class="fs-14 bg-white p-15px lh-initial"><span class="d-inline-block">By <a href="#">Den viliamson</a></span><span class="separator d-inline-block">|</span><a href="#">26 June 2021</a></div>
|
||
</figcaption>
|
||
</figure>
|
||
</div>
|
||
</li>
|
||
<span class="comment"><!-- end blog item --></span>
|
||
<span class="comment"><!-- start blog item --></span>
|
||
<li class="grid-item mb-50px">
|
||
<div class="box-hover text-center">
|
||
<figure class="mb-0 position-relative">
|
||
<div class="blog-image position-relative overflow-hidden">
|
||
<a href="#"><img src="image path" alt="" /></a>
|
||
</div>
|
||
<figcaption class="post-content-wrapper">
|
||
<div class="position-relative bg-dark-gray post-content p-35px z-index-2 lh-initial">
|
||
<div class="hover-text">
|
||
<a href="#" class="text-gradient-light-purple-light-orange fs-15 text-uppercase fw-600 mb-15px d-inline-block">Luxurious</a>
|
||
</div>
|
||
<a href="#" class="card-title mb-0 fs-20 text-white d-inline-block">Everything is designed things designed well looks</a>
|
||
<div class="box-overlay bg-dark-gray z-index-minus-1"></div>
|
||
</div>
|
||
<div class="fs-14 bg-white p-15px lh-initial"><span class="d-inline-block">By <a href="#">Andy glamere</a></span><span class="separator d-inline-block">|</span><a href="#">24 June 2021</a></div>
|
||
</figcaption>
|
||
</figure>
|
||
</div>
|
||
</li>
|
||
<span class="comment"><!-- end blog item --></span>
|
||
</ul>
|
||
</pre>
|
||
</div>
|
||
<p><span class="label label-danger">Note</span>For demo, You can please check this in <strong><a href="../blog-modern.html" target="_blank">blog-modern.html</a></strong> page.</p>
|
||
|
||
|
||
<h3 id="blog-standard">Blog Standard</h3>
|
||
<a href="../blog-standard.html" target="_blank"><img src="images/blog-standard.jpg" alt="Crafto" /></a>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<div class="col-12 col-lg-8 blog-standard right-sidebar md-mb-50px sm-mb-40px">
|
||
<span class="comment"><!-- start blog item --></span>
|
||
<div class="col-12 mb-40px">
|
||
<div class="card border-0 no-border-radius box-shadow-extra-large">
|
||
<div class="blog-image">
|
||
<a href="#"><img src="image path" alt="" /></a>
|
||
<div class="blog-categories">
|
||
<a href="#" class="categories-btn bg-white text-dark-gray text-dark-gray-hover text-uppercase alt-font fw-500">Agency</a>
|
||
</div>
|
||
</div>
|
||
<div class="card-body p-10 bg-white sm-p-8">
|
||
<div class="entry-meta mb-20px fs-15">
|
||
<span><i class="feather icon-feather-calendar"></i><a href="#">26 August 2021</a></span>
|
||
<span><i class="feather icon-feather-user"></i><a href="#">Jonse robbert</a></span>
|
||
<span><i class="feather icon-feather-message-square"></i><a href="#">3 Comments</a></span>
|
||
</div>
|
||
<a href="#" class="text-dark-gray card-title mb-25px alt-font fw-500 fs-24 d-block w-85 lg-w-90 sm-w-100">The best way to get started is to quit talking and begin doing</a>
|
||
<p class="w-85 lg-w-90 sm-w-100 mb-25px">Lorem ipsum is simply dummy text of the printing and typesetting industry ipsum has been the industry standard dummy text ever since the unknown printer took a galley of typesetting industry standard...</p>
|
||
<a href="#" class="btn btn-link btn-large text-base-color">Continue reading<span class="bg-base-color"></span></a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<span class="comment"><!-- end blog item --></span>
|
||
<span class="comment"><!-- start blog item --></span>
|
||
<div class="col-12 mb-40px">
|
||
<div class="card border-0 no-border-radius box-shadow-extra-large">
|
||
<div class="blog-image">
|
||
<a href="#"><img src="image path" alt="" /></a>
|
||
<div class="blog-categories">
|
||
<a href="#" class="categories-btn bg-white text-dark-gray text-dark-gray-hover text-uppercase alt-font fw-500">Agency</a>
|
||
</div>
|
||
</div>
|
||
<div class="card-body p-10 bg-white sm-p-8">
|
||
<div class="entry-meta mb-20px fs-15">
|
||
<span><i class="feather icon-feather-calendar"></i><a href="#">24 August 2021</a></span>
|
||
<span><i class="feather icon-feather-user"></i><a href="#">Den viliamson</a></span>
|
||
<span><i class="feather icon-feather-message-square"></i><a href="#">3 Comments</a></span>
|
||
</div>
|
||
<a href="#" class="text-dark-gray card-title mb-25px alt-font fw-500 fs-24 d-block w-85 lg-w-90 sm-w-100">Change your life today, don't gamble on the future without delay</a>
|
||
<p class="w-85 lg-w-90 sm-w-100 mb-25px">Lorem ipsum is simply dummy text of the printing and typesetting industry ipsum has been the industry standard dummy text ever since the unknown printer took a galley of typesetting industry standard...</p>
|
||
<a href="#" class="btn btn-link btn-large text-base-color">Continue reading<span class="bg-base-color"></span></a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<span class="comment"><!-- end blog item --></span>
|
||
</div>
|
||
<span class="comment"><!-- start sidebar --></span>
|
||
<aside class="col-12 col-xl-3 offset-xl-1 col-lg-4 col-md-7 sidebar">
|
||
...
|
||
</aside>
|
||
<span class="comment"><!-- end sidebar --></span>
|
||
</pre>
|
||
</div>
|
||
<p><span class="label label-danger">Note</span>For demo, You can please check this in <strong><a href="../blog-standard.html" target="_blank">blog-standard.html</a></strong> page.</p>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="row">
|
||
<div class="col-md-12 docs-content-inner" id="blog-post-types">
|
||
<h1>Blog Post Types</h1>
|
||
<p>Crafto provides 6 different types of post types:</p>
|
||
<ul>
|
||
<li><a href="index.html#blog-standard-post" class="inner-link">Blog Standard Post</a></li>
|
||
<li><a href="index.html#blog-gallery-post" class="inner-link">Blog Gallery Post</a></li>
|
||
<li><a href="index.html#blog-slider-post" class="inner-link">Blog Slider Post</a></li>
|
||
<li><a href="index.html#blog-audio-post" class="inner-link">Blog Audio Post</a></li>
|
||
<li><a href="index.html#blog-video-post" class="inner-link">Blog Video Post</a></li>
|
||
<li><a href="index.html#blog-blockquote-post" class="inner-link">Blog Blockquote Post</a></li>
|
||
</ul>
|
||
|
||
<h3 id="blog-standard-post">Blog Standard Post</h3>
|
||
<a href="../blog-post-type-standard.html" target="_blank"><img src="images/blog-post-type-standard.jpg" alt="Crafto" /></a>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<div class="col-12 col-lg-8 blog-standard right-sidebar md-mb-50px sm-mb-40px">
|
||
<span class="comment"><!-- start blog details --></span>
|
||
<div class="col-12 blog-details mb-12">
|
||
<div class="entry-meta mb-20px fs-15">
|
||
<span><i class="text-base-color feather icon-feather-calendar"></i><a href="#">26 August 2021</a></span>
|
||
<span><i class="text-base-color feather icon-feather-user"></i><a href="#">Jonse robbert</a></span>
|
||
<span><i class="text-base-color feather icon-feather-folder"></i><a href="#">Creative</a></span>
|
||
</div>
|
||
<h5 class="text-dark-gray alt-font fw-500 w-80 sm-w-100 mb-7">The best way to get started is to quit talking and begin doing</h5>
|
||
<img src="image path" alt="" class="w-100 border-radius-6px mb-7">
|
||
<p>...</p>
|
||
<p>...</p>
|
||
<blockquote class="alt-font border-4 border-start border-color-base-color text-dark-gray fw-500 ps-40px mt-7 mb-7 ms-60px lg-ms-30px sm-ms-0 lg-ps-30px">
|
||
<p>...</p>
|
||
<footer class="fs-14 text-base-color d-inline-block text-uppercase">John Wayne</footer>
|
||
</blockquote>
|
||
<img src="image path" alt="" class="w-100 border-radius-6px mb-7">
|
||
<p><span class="alt-font first-letter text-dark-gray">M</span>...</p>
|
||
</div>
|
||
<div class="col-12">
|
||
<div class="row mb-50px sm-mb-30px">
|
||
<div class="tag-cloud col-12 col-md-9 text-center text-md-start sm-mb-15px">
|
||
<a href="#">Development</a>
|
||
<a href="#">Event</a>
|
||
<a href="#">Multimedia </a>
|
||
<a href="#">Fashion</a>
|
||
</div>
|
||
<div class="tag-cloud col-12 col-md-3 text-uppercase text-center text-md-end">
|
||
<a class="likes-count fw-500 mx-0" href="#"><i class="fa-regular fa-heart text-red me-10px"></i><span class="text-dark-gray text-dark-gray-hover">05 Likes</span></a>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-12 mb-7">
|
||
<div class="d-block d-md-flex w-100 box-shadow-extra-large align-items-center border-radius-4px p-8">
|
||
<div class="w-140px text-center me-60px sm-mx-auto">
|
||
<img src="image path" class="rounded-circle w-110px" alt="">
|
||
<a href="#" class="text-dark-gray fw-500 mt-25px d-inline-block lh-20">Colene Landin</a>
|
||
<span class="fs-15 lh-20 d-block sm-mb-15px">Co-founder</span>
|
||
</div>
|
||
<div class="w-75 sm-w-100 text-center text-md-start">
|
||
<p class="mb-5px">...</p>
|
||
<a href="#" class="btn btn-link btn-large text-dark-gray mt-20px">All author posts</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="row justify-content-center">
|
||
<div class="col-12 text-center elements-social social-icon-style-04">
|
||
<ul class="medium-icon dark">
|
||
<li><a class="facebook" href="#" target="_blank"><i class="fa-brands fa-facebook-f"></i><span></span></a></li>
|
||
<li><a class="twitter" href="#" target="_blank"><i class="fa-brands fa-twitter"></i><span></span></a></li>
|
||
<li><a class="instagram" href="#" target="_blank"><i class="fa-brands fa-instagram"><span></span></i></a></li>
|
||
<li><a class="linkedin" href="#" target="_blank"><i class="fa-brands fa-linkedin-in"><span></span></i></a></li>
|
||
<li><a class="behance" href="#" target="_blank"><i class="fa-brands fa-behance"></i><span></span></a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<span class="comment"><!-- end blog details --></span>
|
||
</div>
|
||
<span class="comment"><!-- start sidebar --></span>
|
||
<aside class="col-12 col-xl-3 offset-xl-1 col-lg-4 col-md-7 sidebar">
|
||
...
|
||
</aside>
|
||
<span class="comment"><!-- end sidebar --></span>
|
||
</pre>
|
||
</div>
|
||
<p><span class="label label-danger">Note</span>For demo, You can please check this in <strong><a href="../blog-post-type-standard.html" target="_blank">blog-post-type-standard.html</a></strong> page.</p>
|
||
|
||
|
||
<h3 id="blog-gallery-post">Blog Gallery Post</h3>
|
||
<a href="../blog-post-type-gallery.html" target="_blank"><img src="images/blog-post-type-gallery.jpg" alt="Crafto" /></a>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<div class="col-12 col-lg-8 blog-standard right-sidebar md-mb-50px sm-mb-40px">
|
||
<span class="comment"><!-- start blog details --></span>
|
||
<div class="col-12 blog-details mb-12">
|
||
<div class="entry-meta mb-30px fs-15">
|
||
<span><i class="text-base-color feather icon-feather-calendar"></i><a href="#">26 August 2021</a></span>
|
||
<span><i class="text-base-color feather icon-feather-user"></i><a href="#">Jonse robbert</a></span>
|
||
<span><i class="text-base-color feather icon-feather-folder"></i><a href="#">Creative</a></span>
|
||
</div>
|
||
<h5 class="text-dark-gray alt-font fw-500 w-80 sm-w-100 mb-7">The best way to get started is to quit talking and begin doing</h5>
|
||
<ul class="image-gallery-style-01 mb-7 gallery-wrapper grid grid-3col xxl-grid-3col xl-grid-3col lg-grid-3col md-grid-2col sm-grid-2col xs-grid-1col gutter-small">
|
||
<li class="grid-sizer"></li>
|
||
<span class="comment"><!-- start gallery item --></span>
|
||
<li class="grid-item transition-inner-all">
|
||
<div class="gallery-box">
|
||
<a href="image path" data-group="lightbox-gallery" title="Lightbox gallery image title">
|
||
<div class="position-relative gallery-image bg-white overflow-hidden">
|
||
<img src="image path" alt="" />
|
||
<div class="d-flex align-items-center justify-content-center position-absolute top-0px left-0px w-100 h-100 gallery-hover move-bottom-top">
|
||
<div class="d-flex align-items-center justify-content-center w-50px h-50px rounded-circle bg-dark-gray">
|
||
<i class="feather icon-feather-search text-white icon-small"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
</li>
|
||
<span class="comment"><!-- end gallery item --></span>
|
||
<span class="comment"><!-- start gallery item --></span>
|
||
<li class="grid-item transition-inner-all">
|
||
<div class="gallery-box">
|
||
<a href="image path" data-group="lightbox-gallery" title="Lightbox gallery image title">
|
||
<div class="position-relative gallery-image bg-white overflow-hidden">
|
||
<img src="image path" alt="" />
|
||
<div class="d-flex align-items-center justify-content-center position-absolute top-0px left-0px w-100 h-100 gallery-hover move-bottom-top">
|
||
<div class="d-flex align-items-center justify-content-center w-50px h-50px rounded-circle bg-dark-gray">
|
||
<i class="feather icon-feather-search text-white icon-small"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
</li>
|
||
<span class="comment"><!-- end gallery item --></span>
|
||
<span class="comment"><!-- start gallery item --></span>
|
||
<li class="grid-item transition-inner-all">
|
||
<div class="gallery-box">
|
||
<a href="image path" data-group="lightbox-gallery" title="Lightbox gallery image title">
|
||
<div class="position-relative gallery-image bg-white overflow-hidden">
|
||
<img src="image path" alt="" />
|
||
<div class="d-flex align-items-center justify-content-center position-absolute top-0px left-0px w-100 h-100 gallery-hover move-bottom-top">
|
||
<div class="d-flex align-items-center justify-content-center w-50px h-50px rounded-circle bg-dark-gray">
|
||
<i class="feather icon-feather-search text-white icon-small"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
</li>
|
||
<span class="comment"><!-- end gallery item --></span>
|
||
<span class="comment"><!-- start gallery item --></span>
|
||
<li class="grid-item transition-inner-all">
|
||
<div class="gallery-box">
|
||
<a href="image path" data-group="lightbox-gallery" title="Lightbox gallery image title">
|
||
<div class="position-relative gallery-image bg-white overflow-hidden">
|
||
<img src="image path" alt="" />
|
||
<div class="d-flex align-items-center justify-content-center position-absolute top-0px left-0px w-100 h-100 gallery-hover move-bottom-top">
|
||
<div class="d-flex align-items-center justify-content-center w-50px h-50px rounded-circle bg-dark-gray">
|
||
<i class="feather icon-feather-search text-white icon-small"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
</li>
|
||
<span class="comment"><!-- end gallery item --></span>
|
||
<span class="comment"><!-- start gallery item --></span>
|
||
<li class="grid-item transition-inner-all">
|
||
<div class="gallery-box">
|
||
<a href="image path" data-group="lightbox-gallery" title="Lightbox gallery image title">
|
||
<div class="position-relative gallery-image bg-white overflow-hidden">
|
||
<img src="image path" alt="" />
|
||
<div class="d-flex align-items-center justify-content-center position-absolute top-0px left-0px w-100 h-100 gallery-hover move-bottom-top">
|
||
<div class="d-flex align-items-center justify-content-center w-50px h-50px rounded-circle bg-dark-gray">
|
||
<i class="feather icon-feather-search text-white icon-small"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
</li>
|
||
<span class="comment"><!-- end gallery item --></span>
|
||
<span class="comment"><!-- start gallery item --></span>
|
||
<li class="grid-item transition-inner-all">
|
||
<div class="gallery-box">
|
||
<a href="video link" data-group="lightbox-gallery-video" class="popup-youtube">
|
||
<div class="position-relative gallery-image bg-white overflow-hidden">
|
||
<img src="image path" alt="" />
|
||
<div class="d-flex align-items-center justify-content-center position-absolute top-0px left-0px w-100 h-100 gallery-hover move-bottom-top">
|
||
<div class="d-flex align-items-center justify-content-center w-50px h-50px rounded-circle bg-dark-gray">
|
||
<i class="feather icon-feather-play left-2px position-relative text-white icon-small"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
</li>
|
||
<span class="comment"><!-- end gallery item --></span>
|
||
</ul>
|
||
<p>...</p>
|
||
<p>...</p>
|
||
<blockquote class="alt-font border-4 border-start border-color-base-color text-dark-gray fw-500 ps-40px mt-7 mb-7 ms-60px lg-ms-30px sm-ms-0 lg-ps-30px">
|
||
<p>...</p>
|
||
<footer class="fs-14 text-base-color d-inline-block text-uppercase">John Wayne</footer>
|
||
</blockquote>
|
||
<img src="image path" alt="" class="w-100 border-radius-6px mb-7">
|
||
<p><span class="alt-font first-letter text-dark-gray">M</span>...</p>
|
||
</div>
|
||
<div class="col-12">
|
||
<div class="row mb-50px sm-mb-30px">
|
||
<div class="tag-cloud col-12 col-md-9 text-center text-md-start sm-mb-15px">
|
||
<a href="#">Development</a>
|
||
<a href="#">Event</a>
|
||
<a href="#">Multimedia </a>
|
||
<a href="#">Fashion</a>
|
||
</div>
|
||
<div class="tag-cloud col-12 col-md-3 text-uppercase text-center text-md-end">
|
||
<a class="likes-count fw-500 mx-0" href="#"><i class="fa-regular fa-heart text-red me-10px"></i><span class="text-dark-gray text-dark-gray-hover">05 Likes</span></a>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-12 mb-7">
|
||
<div class="d-block d-md-flex w-100 box-shadow-extra-large align-items-center border-radius-4px p-8">
|
||
<div class="w-140px text-center me-60px sm-mx-auto">
|
||
<img src="image path" class="rounded-circle w-110px" alt="">
|
||
<a href="#" class="text-dark-gray fw-500 mt-25px d-inline-block lh-20">Colene Landin</a>
|
||
<span class="fs-15 lh-20 d-block sm-mb-15px">Co-founder</span>
|
||
</div>
|
||
<div class="w-75 sm-w-100 text-center text-md-start">
|
||
<p class="mb-5px">...</p>
|
||
<a href="#" class="btn btn-link btn-large text-dark-gray mt-20px">All author posts</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="row justify-content-center">
|
||
<div class="col-12 text-center elements-social social-icon-style-04">
|
||
<ul class="medium-icon dark">
|
||
<li><a class="facebook" href="#" target="_blank"><i class="fa-brands fa-facebook-f"></i><span></span></a></li>
|
||
<li><a class="twitter" href="#" target="_blank"><i class="fa-brands fa-twitter"></i><span></span></a></li>
|
||
<li><a class="instagram" href="#" target="_blank"><i class="fa-brands fa-instagram"><span></span></i></a></li>
|
||
<li><a class="linkedin" href="#" target="_blank"><i class="fa-brands fa-linkedin-in"><span></span></i></a></li>
|
||
<li><a class="behance" href="#" target="_blank"><i class="fa-brands fa-behance"></i><span></span></a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<span class="comment"><!-- end blog details --></span>
|
||
</div>
|
||
<span class="comment"><!-- start sidebar --></span>
|
||
<aside class="col-12 col-xl-3 offset-xl-1 col-lg-4 col-md-7 sidebar">
|
||
...
|
||
</aside>
|
||
<span class="comment"><!-- end sidebar --></span>
|
||
</pre>
|
||
</div>
|
||
<p><span class="label label-danger">Note</span>For demo, You can please check this in <strong><a href="../blog-post-type-gallery.html" target="_blank">blog-post-type-gallery.html</a></strong> page.</p>
|
||
|
||
|
||
<h3 id="blog-slider-post">Blog Slider Post</h3>
|
||
<a href="../blog-post-type-slider.html" target="_blank"><img src="images/blog-post-type-slider.jpg" alt="Crafto" /></a>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<div class="col-12 col-lg-8 blog-standard right-sidebar md-mb-50px sm-mb-40px">
|
||
<span class="comment"><!-- start blog details --></span>
|
||
<div class="col-12 blog-details mb-12">
|
||
...
|
||
<div class="overflow-hidden mb-7">
|
||
<div class="swiper magic-cursor magic-cursor-light" data-slider-options='{ "slidesPerView": 1, "spaceBetween": 0, "loop": true, "autoplay": { "delay": 2000, "disableOnInteraction": false }, "pagination": { "el": ".slider-three-slide-pagination", "clickable": true, "dynamicBullets": true }, "navigation": { "nextEl": ".slider-one-slide-next-1", "prevEl": ".slider-one-slide-prev-1" }, "keyboard": { "enabled": true, "onlyInViewport": true }, "breakpoints": { "992": { "slidesPerView": 1 }, "768": { "slidesPerView": 1 }, "320": { "slidesPerView": 1 } }, "effect": "slide" }'>
|
||
<div class="swiper-wrapper">
|
||
<span class="comment"><!-- start slider item --></span>
|
||
<div class="swiper-slide">
|
||
<img src="image path" class="w-100" alt="" />
|
||
</div>
|
||
<span class="comment"><!-- end slider item --></span>
|
||
<span class="comment"><!-- start slider item --></span>
|
||
<div class="swiper-slide">
|
||
<img src="image path" class="w-100" alt="" />
|
||
</div>
|
||
<span class="comment"><!-- end slider item --></span>
|
||
<span class="comment"><!-- start slider item --></span>
|
||
<div class="swiper-slide">
|
||
<img src="image path" class="w-100" alt="" />
|
||
</div>
|
||
<span class="comment"><!-- end slider item --></span>
|
||
<span class="comment"><!-- start slider item --></span>
|
||
<div class="swiper-slide">
|
||
<img src="image path" class="w-100" alt="" />
|
||
</div>
|
||
<span class="comment"><!-- end slider item --></span>
|
||
</div>
|
||
<span class="comment"><!-- start slider navigation --></span>
|
||
<div class="slider-one-slide-prev-1 icon-very-small text-dark-gray swiper-button-prev slider-navigation-style-02 bg-white text-dark-gray box-shadow-small"><i class="feather icon-feather-arrow-left"></i></div>
|
||
<div class="slider-one-slide-next-1 icon-very-small text-dark-gray swiper-button-next slider-navigation-style-02 bg-white text-dark-gray box-shadow-small"><i class="feather icon-feather-arrow-right"></i></div>
|
||
<span class="comment"><!-- end slider navigation --></span>
|
||
</div>
|
||
</div>
|
||
...
|
||
</div>
|
||
<div class="col-12">
|
||
...
|
||
</div>
|
||
<span class="comment"><!-- end blog details --></span>
|
||
</div>
|
||
<span class="comment"><!-- start sidebar --></span>
|
||
<aside class="col-12 col-xl-3 offset-xl-1 col-lg-4 col-md-7 sidebar">
|
||
...
|
||
</aside>
|
||
<span class="comment"><!-- end sidebar --></span>
|
||
</pre>
|
||
</div>
|
||
<p><span class="label label-danger">Note</span>For demo, You can please check this in <strong><a href="../blog-post-type-slider.html" target="_blank">blog-post-type-slider.html</a></strong> page.</p>
|
||
|
||
|
||
<h3 id="blog-audio-post">Blog Audio Post</h3>
|
||
<a href="../blog-post-type-audio.html" target="_blank"><img src="images/blog-post-type-audio.jpg" alt="Crafto" /></a>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<div class="col-12 col-lg-8 blog-standard right-sidebar md-mb-50px sm-mb-40px">
|
||
<span class="comment"><!-- start blog details --></span>
|
||
<div class="col-12 blog-details mb-12">
|
||
...
|
||
<span class="comment"><!-- start audio --></span>
|
||
<div class="mb-7">
|
||
<iframe class="h-400px w-100" style="border: 0;" src="audio link"></iframe>
|
||
</div>
|
||
<span class="comment"><!-- end audio --></span>
|
||
...
|
||
</div>
|
||
<div class="col-12">
|
||
...
|
||
</div>
|
||
<span class="comment"><!-- end blog details --></span>
|
||
</div>
|
||
<span class="comment"><!-- start sidebar --></span>
|
||
<aside class="col-12 col-xl-3 offset-xl-1 col-lg-4 col-md-7 sidebar">
|
||
...
|
||
</aside>
|
||
<span class="comment"><!-- end sidebar --></span>
|
||
</pre>
|
||
</div>
|
||
<p><span class="label label-danger">Note</span>For demo, You can please check this in <strong><a href="../blog-post-type-audio.html" target="_blank">blog-post-type-audio.html</a></strong> page.</p>
|
||
|
||
|
||
<h3 id="blog-video-post">Blog Video Post</h3>
|
||
<a href="../blog-post-type-video.html" target="_blank"><img src="images/blog-post-type-video.jpg" alt="Crafto" /></a>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<div class="col-12 col-lg-8 blog-standard right-sidebar md-mb-50px sm-mb-40px">
|
||
<span class="comment"><!-- start blog details --></span>
|
||
<div class="col-12 blog-details mb-12">
|
||
...
|
||
<span class="comment"><!-- start video --></span>
|
||
<div class="mb-7">
|
||
<div class="fit-videos">
|
||
<iframe src="video link" width="640" height="360" allowfullscreen></iframe>
|
||
</div>
|
||
</div>
|
||
<span class="comment"><!-- end video --></span>
|
||
...
|
||
</div>
|
||
<div class="col-12">
|
||
...
|
||
</div>
|
||
<span class="comment"><!-- end blog details --></span>
|
||
</div>
|
||
<span class="comment"><!-- start sidebar --></span>
|
||
<aside class="col-12 col-xl-3 offset-xl-1 col-lg-4 col-md-7 sidebar">
|
||
...
|
||
</aside>
|
||
<span class="comment"><!-- end sidebar --></span>
|
||
</pre>
|
||
</div>
|
||
<p><span class="label label-danger">Note</span>For demo, You can please check this in <strong><a href="../blog-post-type-video.html" target="_blank">blog-post-type-video.html</a></strong> page.</p>
|
||
|
||
|
||
<h3 id="blog-blockquote-post">Blog Blockquote Post</h3>
|
||
<a href="../blog-post-type-blockquote.html" target="_blank"><img src="images/blog-post-type-blockquote.jpg" alt="Crafto" /></a>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<div class="col-12 col-lg-8 blog-standard right-sidebar md-mb-50px sm-mb-40px">
|
||
<span class="comment"><!-- start blog details --></span>
|
||
<div class="col-12 blog-details mb-12">
|
||
...
|
||
<div class="p-10 border-radius-5px bg-very-light-gray blockquote-style-01 mb-7">
|
||
<span class="comment"><!-- start blockquote --></span>
|
||
<i class="ti-quote-left float-start me-35px icon-extra-large text-gradient-pink-orange d-inline-block"></i>
|
||
<blockquote class="mb-0 d-table last-paragraph-no-margin">
|
||
<p class="fs-18">I would say I'm an inspirational guidelines book. You can take my life story scenarios or songs relate to them and apply them to your everyday life.</p>
|
||
<footer class="text-dark-gray fw-500 mt-20px fs-18">Aethelwyne Smith</footer>
|
||
</blockquote>
|
||
<span class="comment"><!-- end blockquote --></span>
|
||
</div>
|
||
...
|
||
</div>
|
||
<div class="col-12">
|
||
...
|
||
</div>
|
||
<span class="comment"><!-- end blog details --></span>
|
||
</div>
|
||
<span class="comment"><!-- start sidebar --></span>
|
||
<aside class="col-12 col-xl-3 offset-xl-1 col-lg-4 col-md-7 sidebar">
|
||
...
|
||
</aside>
|
||
<span class="comment"><!-- end sidebar --></span>
|
||
</pre>
|
||
</div>
|
||
<p><span class="label label-danger">Note</span>For demo, You can please check this in <strong><a href="../blog-post-type-blockquote.html" target="_blank">blog-post-type-blockquote.html</a></strong> page.</p>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="row">
|
||
<div class="col-md-12 docs-content-inner" id="blog-single-page">
|
||
<h1>Blog Single Page</h1>
|
||
<p>Crafto includes 5 unique and beautiful blog post page styles as mentioned below.</p>
|
||
<div class="row portfolio-details-page">
|
||
<div class="col-md-4"><a target="_blank" href="../demo-business-blog-single-modern.html"><img alt="Crafto" src="images/blog-single-modern.jpg"></a></div>
|
||
<div class="col-md-4"><a target="_blank" href="../demo-elearning-blog-single-simple.html"><img alt="Crafto" src="images/blog-single-simple.jpg"></a></div>
|
||
<div class="col-md-4"><a target="_blank" href="../demo-web-agency-blog-single-creative.html"><img alt="Crafto" src="images/blog-single-creative.jpg"></a></div>
|
||
<div class="col-md-4"><a target="_blank" href="../demo-blogger-blog-single-classic.html"><img alt="Crafto" src="images/blog-single-classic.jpg"></a></div>
|
||
<div class="col-md-4"><a target="_blank" href="../demo-architecture-blog-single-clean.html"><img alt="Crafto" src="images/blog-single-clean.jpg"></a></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
|
||
<section id="forms" class="hidden">
|
||
<div class="container-fluid">
|
||
|
||
<div class="row">
|
||
<div class="col-md-12 docs-content-inner" id="forms-contact">
|
||
<h1>Contact</h1>
|
||
<p>Contact form for contact pages. With this, your user can contact you for any queries or service requests. See below image and code for more information.</p>
|
||
<a href="../element-contact-form.html" target="_blank"><img src="images/contact-form.jpg" alt="Crafto" /></a>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<div class="row row-cols-md-1 justify-content-center" data-anime='{ "el": "childs", "translateX": [30, 0], "opacity": [0,1], "duration": 300, "delay": 0, "staggervalue": 100, "easing": "easeOutQuad" }'>
|
||
<div class="col-lg-7">
|
||
<span class="comment"><!-- start contact form --></span>
|
||
<form action="email-templates/contact-form.php" method="post" class="contact-form-style-03">
|
||
<div class="row justify-content-center">
|
||
<div class="col-md-6 xs-mb-30px">
|
||
<label for="exampleInputEmail1" class="form-label fw-700 text-dark-gray text-uppercase fs-13 ls-05px mb-0">Enter your name*</label>
|
||
<div class="position-relative form-group mb-25px xs-mb-0">
|
||
<span class="form-icon"><i class="bi bi-emoji-smile text-dark-gray"></i></span>
|
||
<input class="ps-0 border-radius-0px border-color-dark-gray bg-transparent form-control required" id="exampleInputEmail1" type="text" name="name" placeholder="What's your good name?" />
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6 xs-mb-30px">
|
||
<label for="exampleInputEmail1" class="form-label fw-700 text-dark-gray text-uppercase fs-13 ls-05px mb-0">Phone number</label>
|
||
<div class="position-relative form-group mb-25px xs-mb-0">
|
||
<span class="form-icon"><i class="bi bi-telephone text-dark-gray"></i></span>
|
||
<input class="ps-0 border-radius-0px border-color-dark-gray bg-transparent form-control" id="exampleInputEmail2" type="tel" name="phone" placeholder="Enter your phone number" />
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6 xs-mb-30px">
|
||
<label for="exampleInputEmail1" class="form-label fw-700 text-dark-gray text-uppercase fs-13 ls-05px mb-0">Email address*</label>
|
||
<div class="position-relative form-group mb-25px xs-mb-0">
|
||
<span class="form-icon"><i class="bi bi-envelope text-dark-gray"></i></span>
|
||
<input class="ps-0 border-radius-0px border-color-dark-gray bg-transparent form-control required" id="exampleInputEmail3" type="email" name="email" placeholder="Enter your email address" />
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6 xs-mb-30px">
|
||
<label for="exampleInputEmail1" class="form-label fw-700 text-dark-gray text-uppercase fs-13 ls-05px mb-0">Subject</label>
|
||
<div class="position-relative form-group mb-25px xs-mb-0">
|
||
<span class="form-icon"><i class="bi bi-journals text-dark-gray"></i></span>
|
||
<input class="ps-0 border-radius-0px border-color-dark-gray bg-transparent form-control" id="exampleInputEmail4" type="text" name="subject" placeholder="How can we help you?" />
|
||
</div>
|
||
</div>
|
||
<div class="col-12 mb-4 xs-mb-30px">
|
||
<label for="exampleInputEmail1" class="form-label fw-700 text-dark-gray text-uppercase fs-13 ls-05px mb-0">Your message</label>
|
||
<div class="position-relative form-group form-textarea mb-0">
|
||
<textarea class="ps-0 border-radius-0px border-color-dark-gray bg-transparent form-control" name="comment" placeholder="Describe about your project" rows="4"></textarea>
|
||
<span class="form-icon"><i class="bi bi-chat-square-dots text-dark-gray"></i></span>
|
||
</div>
|
||
</div>
|
||
<div class="col-xl-6 col-md-7 col-sm-10">
|
||
<p class="mb-0 fs-14 lh-24 text-center text-md-start">We will never collect information about you without your explicit consent.</p>
|
||
</div>
|
||
<div class="col-xl-6 col-md-5 text-center text-md-end sm-mt-25px">
|
||
<input id="exampleInputEmail5" type="hidden" name="redirect" value="">
|
||
<button class="btn btn-small btn-dark-gray btn-box-shadow btn-round-edge text-transform-none primary-font submit" type="submit">Send message</button>
|
||
</div>
|
||
<div class="col-12">
|
||
<div class="form-results mt-20px d-none"></div>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
<span class="comment"><!-- end contact form --></span>
|
||
</div>
|
||
</div>
|
||
</pre>
|
||
</div>
|
||
<p>Contact us form will not work unless you have your files running on a hosting server with Apache and PHP with a JavaScript-enabled browser. When you have your files ready on your hosting server, you need to edit the settings to make the email function work. You need to upload the whole folder /email-templates/ in your website root directory.</p>
|
||
<p>To make any form field <strong>required</strong>, add the required class in that specific data field in the HTML code, and for email address validation you need to put that field type as email instead of input or others.</p>
|
||
<p>Open /email-templates/contact-form.php and change your Receiver Email Address (receiver_email) at the top from <a href="../cdn-cgi/l/email-protection.html" class="__cf_email__" data-cfemail="553c3b333a15313a38343c3b7b363a38">[email protected]</a> to your real email address, same way you can change the subject line from "Contact form details" as per your need. Also, replace yourdomain.com with your real domain name in the logo image URL in the email body template (http://www.yourdomain.com/images/logo-email.png).</p>
|
||
<p>If your server does not support the PHP mail function and you want to send emails via SMTP then please change enable_smtp to yes and then add your SMTP credentials for these: YOUR_SMTP_HOST, YOUR_SMTP_USERNAME, YOUR_SMTP_PASSWORD, SMTPSecure and Port. Please consult your hosting support to get the required SMTP credentials.</p>
|
||
<p>If you are using a newsletter subscriber form then you can manage email receiver, php mail, or SMTP as per the above details in this file - /email-templates/subscribe-newsletter.php. But if you want to integrate your Mailchimp account, then you do not need to set the above details but you only need to set Mailchimp credentials in that same file like YOUR_MAILCHIMP_API_KEY and YOUR_MAILCHIMP_LIST_ID and also change enable_mailchimp to yes.</p>
|
||
<p>If you want to add Google reCAPTCHA V2 in your form to avoid spam submission then you can add DIV code like the below in the FORM tag above the submit button, with your Google reCAPTCHA site API key, add site secret key inside /email-templates/contact-form.php file in grecaptcha_secret_key variable and also make sure to add a related JS file at the bottom, please take reference from the <strong><a href="../element-contact-form.html" target="_blank">contact-form.html</a></strong> demo page. You can create a Google reCAPTCHA V2/V3 API key from this page - <strong><a href="https://www.google.com/recaptcha/admin/create" target="_blank">https://www.google.com/recaptcha/admin/create</a></strong> by logging in to your Google account.</p>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<div class="g-recaptcha margin-35px-bottom" data-sitekey="YOUR_SITE_KEY"></div>
|
||
</pre><p>If you want to add Google invisible reCAPTCHA V3 in your form then you need to add the script code provided by Google (when you create the V3 API key) in all the pages of your website and make sure to add your Google reCaptcha site key in data-sitekey property of the form submit button as per below example code and also add site secret key inside /email-templates/contact-form.php file in grecaptcha_secret_key variable</p>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<button class="btn btn-dark-gray btn-medium submit" type="submit" data-sitekey="YOUR_SITE_KEY">Send message</button>
|
||
</pre>
|
||
<p>If you want to redirect user to thank you page or any other external url instead of showing success message on the same page, then add your full url in the value of redirect hidden field code like below in the FORM HTML code.</p>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<input type="hidden" name="redirect" value="https://craftohtml.themezaa.com/thank-you.html">
|
||
</pre>
|
||
<p><span class="label label-danger">Note</span>For demo, You can please check this in <strong><a href="../element-contact-form.html" target="_blank">element-contact-form.html</a></strong> page.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="row">
|
||
<div class="col-md-12 docs-content-inner last-section" id="forms-subscribe">
|
||
<h1>Subscribe</h1>
|
||
<p>To create a newsletter for your website, you first need to place the newsletter code, that is shown in the below example.</p>
|
||
<a href="../element-subscribe.html" target="_blank"><img src="images/subscribe.jpg" alt="Crafto" /></a>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<span class="comment"><!-- start subscribe item --></span>
|
||
<div class="row justify-content-center">
|
||
<div class="col-12 col-xl-7 col-md-10 text-center">
|
||
<span class="text-white text-uppercase fs-15 fw-500 ls-1px d-block mb-10px">Get latest news and offers</span>
|
||
<div class="fs-70 sm-fs-80 xs-fs-70 fw-600 mb-20px ls-minus-2px overflow-hidden text-white mb-40px">
|
||
<div class="d-inline-block">
|
||
Get latest update for our
|
||
<div class="highlight-separator" data-shadow-animation="true" data-animation-delay="1500">
|
||
business!<span><img src="images/image path" alt=""></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="d-inline-block w-100 newsletter-style-02 position-relative mb-25px">
|
||
<form action="email-templates/subscribe-newsletter.php" method="post" class="position-relative w-100">
|
||
<input class="input-large bg-white border-color-white w-100 form-control required" type="email" name="email" placeholder="Enter your email address" />
|
||
<input type="hidden" name="redirect" value="">
|
||
<button class="btn submit" aria-label="submit"><i class="icon feather icon-feather-mail icon-extra-medium text-dark-gray"></i></button>
|
||
<div class="form-results border-radius-4px mt-15px pt-10px pb-10px ps-15px pe-15px fs-16 w-100 z-index-1 text-center position-absolute d-none"></div>
|
||
</form>
|
||
</div>
|
||
<p class="text-white opacity-6 fs-14 lh-24 fw-300">We will never collect information about you without your explicit consent.</p>
|
||
</div>
|
||
</div>
|
||
<span class="comment"><!-- end subscribe item --></span>
|
||
</pre>
|
||
<p><span class="label label-danger">Note</span>For demo, You can please check this in <strong><a href="../element-subscribe.html" target="_blank">element-subscribe.html</a></strong> page.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
|
||
<section id="faqs" class="hidden">
|
||
<div class="container-fluid">
|
||
|
||
<div class="row">
|
||
<div class="col-md-12 docs-content-inner last-section" id="page-elements-useful-tips">
|
||
<h1>FAQs</h1>
|
||
<h2>1. How to setup onepage navigation?</h2>
|
||
<p>In Crafto you can add a link/button that directs you to other sections of the same page with a smooth scroll effect like it is one-page website. You just need to add class: <code>inner-link</code> and <code>href</code> should be the ID of the section as per the example shown below:</p>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<a href="#about" class="nav-link inner-link">About</a>
|
||
</pre>
|
||
</div>
|
||
<p><span class="label label-danger">Note</span>Please note that the destination section should have a valid ID and you can check <strong><a href="../demo-barber.html" target="_blank">demo-barber.html</a></strong> page for your reference.</p>
|
||
<h2>2. How to fix revolution slider red error message?</h2>
|
||
<p>If you are opening the HTML page directly in the browser instead of online url with http / https, then in that case please open that page in text editor and uncomment some code at the bottom as per the explanation provided there and then that slider should work fine. But please make sure to comment / remove those lines of code when you upload the page in your server online.</p>
|
||
<h2>3. How to open a popup automatically when the page load?</h2>
|
||
<p>You can add a DIV with subscribe-popup ID in a page and then it will display this DIV content in popup when this page load. Please refer this demo page - <strong><a href="../modal-subscription.html" target="_blank">modal-subscription.html</a></strong> page for your reference. If you want to add some delay like the popup should display 5 seconds after the page load then please open /js/main.js file, search delaySecond and set it to 5. You can also set expireDays value, so this popup will not be visible to user for value of expireDays if Don't show this popup again checkbox is clicked by user and then closed</p>
|
||
<h2>4. How to enable animations in mobile?</h2>
|
||
<p>Some animations create conflict and do not work in mobile devices, so by default we have disabled all the animations for mobile devices. If you want to enable it at your risk then you can change the value of <code>animeBreakPoint</code> variable in /js/main.js file.</p>
|
||
<h2>5. How to open external videos in popup instead of external website in mobile?</h2>
|
||
<p>Magnific library by default open external video / map in external website instead of in popup for mobile devices having width of 767px or lower. But if you want to display external content in popup always in all devices then please change disableOn variable to 0 instead of 767 in /js/main.js file.</p>
|
||
<h2>6. How to add page loader?</h2>
|
||
<p>Page loader will display loading icon till the page is loaded fully. If you want to achieve this then please add below code directly below BODY opening tag in your page HTML code. You can check this demo page - <strong><a href="../demo-minimal-portfolio.html" target="_blank">demo-minimal-portfolio.html</a></strong> for more details.</p>
|
||
<div class="codeblock">
|
||
<span class="copy-clipboard">Copy</span>
|
||
<pre>
|
||
<div class="page-loader"></div>
|
||
</pre>
|
||
</div>
|
||
<h2>7. How to change logo size container?</h2>
|
||
<p>You can increase the max-height as per your need in <code>/css/style.css</code> file under this css class: <code>header .navbar-brand img, .left-modern-menu .left-modern-header .navbar-brand img, .hamburger-logo img</code></p>
|
||
<h2>8. How to add sticky demos and buy now buttons in your website?</h2>
|
||
<p>Please open /js/main.js file and search themeDemoHTML, you can uncomment that variable line and the next line also. You can amend the HTML code in themeDemoHTML variable value as per your need to adjust those side icons, content and images as per your need.</p>
|
||
<h2>9. How to make your footer sticky?</h2>
|
||
<p>You need to put main body content of the page inside a DIV with <code>main-content</code> class and then add <code>footer-sticky</code> class in your footer tag. Please refer this demo page <strong><a href="../demo-design-agency.html" target="_blank">demo-design-agency.html</a></strong> for more details.</code></p>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
|
||
<section id="credits" class="hidden">
|
||
<div class="container-fluid">
|
||
<div class="row">
|
||
<div class="col-md-12 docs-content-inner" id="credits">
|
||
<h1>Credits</h1>
|
||
<p>We would really love to take this opportunity to appreciate guys whose items were helpful to us to make Crafto a really beautiful theme for our awesome users:</p>
|
||
<div class="col-md-12 no-padding">
|
||
|
||
<div class="col-md-4">
|
||
<h3 class="no-padding-top">Images and Videos</h3>
|
||
<ul class="credits">
|
||
<li><a href="https://unsplash.com/" target="_blank">Unsplash</a></li>
|
||
<li><a href="https://nothingtochance.co/" target="_blank">NothingToChance</a></li>
|
||
<li><a href="https://www.freepik.com/" target="_blank">Freepik</a></li>
|
||
<li><a href="https://www.pexels.com/" target="_blank">Pexels</a></li>
|
||
<li><a href="https://www.mockupworld.co/" target="_blank">Mockup World</a></li>
|
||
<li><a href="https://mrmockup.com/freebies/page/2" target="_blank">Mr.Mockup</a></li>
|
||
<li><a href="https://www.flaticon.com/" target="_blank">Flat Icon</a></li>
|
||
<li><a href="https://kaboompics.com/gallery" target="_blank">Kaboompics</a></li>
|
||
<li><a href="https://www.behance.net/bond-agency?tracking_source=search%7Cagency" target="_blank">BondAgency</a></li>
|
||
<li><a href="https://www.behance.net/Anagrama" target="_blank">Anagrama</a></li>
|
||
<li><a href="https://www.behance.net/farmdesign" target="_blank">FarmDesign</a></li>
|
||
<li><a href="https://www.behance.net/twotimeselliott" target="_blank">TwoTimesElliott</a></li>
|
||
<li><a href="https://www.behance.net/moodley" target="_blank">Moodley</a></li>
|
||
<li><a href="https://www.behance.net/mediaff0a" target="_blank">Mediaff0a</a></li>
|
||
<li><a href="https://www.behance.net/gallery/177085081/RENOVA?tracking_source=project_owner_other_projects" target="_blank">Renova</a></li>
|
||
<li><a href="https://www.behance.net/gallery/180930993/PAGERIE-E-commerce-redesign?tracking_source=search_projects%7Cwebsite" target="_blank">Pagerie</a></li>
|
||
<li><a href="https://www.behance.net/gallery/165133041/HealthIV-Health-Care-Website-Design?tracking_source=search_projects%7Csoftware+development+web+design&" target="_blank">HealthIV</a></li>
|
||
<li><a href="https://www.behance.net/gallery/179997039/ZocDoc-Health-Software-Mobile-App-UX-UI-Design?tracking_source=search_projects%7Csoftware+development+web+design&" target="_blank">ZocDocHealthCare</a></li>
|
||
<li><a href="https://www.behance.net/gallery/47717269/endorfina?tracking_source=project_owner_other_projects" target="_blank">Endorfina</a></li>
|
||
<li><a href="https://www.behance.net/gallery/134470723/Endorfina-chocolate-display-stand?tracking_source=search_projects%7Cendorfina" target="_blank">EndorfinaChocolate</a></li>
|
||
<li><a href="https://www.behance.net/gallery/98571965/Cottura" target="_blank">Cottura</a></li>
|
||
<li><a href="https://www.behance.net/andreabasile" target="_blank">AndreaBasile</a></li>
|
||
<li><a href="https://www.caratlane.com/" target="_blank">Carat Lane</a></li>
|
||
<li><a href="https://www.bluestone.com/" target="_blank">Blue Stone</a></li>
|
||
<li><a href="https://psdrepo.com/" target="_blank">PSD Repo</a></li>
|
||
<li><a href="https://www2.hm.com/" target="_blank">Hennes & Mauritz</a></li>
|
||
<li><a href="https://www.zara.com/in/" target="_blank">Zara</a></li>
|
||
</ul>
|
||
</div>
|
||
|
||
|
||
<div class="col-md-4">
|
||
<h3 class="no-padding-top">JS Libraries</h3>
|
||
<ul class="credits">
|
||
<li><a href="https://jquery.com/download/" target="_blank">jQuery</a></li>
|
||
<li><a href="https://animejs.com/" target="_blank">Anime</a></li>
|
||
<li><a href="https://atroposjs.com/" target="_blank">Atropos</a></li>
|
||
<li><a href="https://greensock.com" target="_blank">GSAP</a></li>
|
||
<li><a href="https://imagesloaded.desandro.com/" target="_blank">imagesLoaded</a></li>
|
||
<li><a href="https://isotope.metafizzy.co/" target="_blank">Isotope</a></li>
|
||
<li><a href="https://github.com/morr/jquery.appear/" target="_blank">Appear</a></li>
|
||
<li><a href="http://hilios.github.io/jQuery.countdown/" target="_blank">Countdown</a></li>
|
||
<li><a href="https://github.com/mhuggins/jquery-countTo" target="_blank">countTo</a></li>
|
||
<li><a href="https://rendro.github.io/easy-pie-chart/" target="_blank">Easy Pie Chart</a></li>
|
||
<li><a href="http://fitvidsjs.com/" target="_blank">FitVids</a></li>
|
||
<li><a href="http://dimsemenov.com/plugins/magnific-popup/" target="_blank">Magnific Popup</a></li>
|
||
<li><a href="https://github.com/malihu/malihu-custom-scrollbar-plugin" target="_blank">Custom Scrollbar</a></li>
|
||
<li><a href="https://github.com/carhartl/jquery-cookie" target="_blank">Cookie</a></li>
|
||
<li><a href="http://miromannino.github.io/Justified-Gallery/" target="_blank">Justified Gallery</a></li>
|
||
<li><a href="https://vincentgarreau.com/particles.js/" target="_blank">Particles</a></li>
|
||
<li><a href="http://imulus.github.io/retinajs/" target="_blank">Retina</a></li>
|
||
<li><a href="https://github.com/Prinzhorn/skrollr" target="_blank">Skrollr</a></li>
|
||
<li><a href="https://github.com/kswedberg/jquery-smooth-scroll" target="_blank">Smooth Scroll</a></li>
|
||
<li><a href="https://splitting.js.org" target="_blank">Splitting</a></li>
|
||
<li><a href="https://github.com/leafo/sticky-kit" target="_blank">Sticky Kit</a></li>
|
||
<li><a href="https://swiperjs.com" target="_blank">Swiper</a></li>
|
||
</ul>
|
||
</div>
|
||
|
||
|
||
<div class="col-md-4">
|
||
<h3 class="no-padding-top">CSS & Fonts</h3>
|
||
<ul class="credits">
|
||
<li><a href="https://getbootstrap.com/" target="_blank">Bootstrap</a></li>
|
||
<li><a href="https://fonts.google.com/" target="_blank">Google Fonts</a></li>
|
||
<li><a href="https://themify.me/themify-icons" target="_blank">Themify</a></li>
|
||
<li><a href="https://iconsmind.com/view_icons/" target="_blank">Icons Mind</a></li>
|
||
<li><a href="https://feathericons.com/" target="_blank">Feather</a></li>
|
||
</ul>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="col-md-12" style="margin-top: 100px; text-align: center">
|
||
<h2 style="padding: 10px 30px 12px 30px; border: 2px solid #000; display: inline-block; text-transform: uppercase; color: #232323;">A big thanks to these guys!</h2>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
|
||
<section id="changelog" class="hidden">
|
||
<div class="container-fluid">
|
||
<div class="row">
|
||
<div class="col-md-12 docs-content-inner" id="changelog-ver2-0" style="height: 650px">
|
||
<h1>Version 2.0 - Current Version</h1>
|
||
<p>Released on 27 June 2024</p>
|
||
<ul>
|
||
<li>Added a new <a href="../demo-green-energy.html" target="_blank">Green energy demo.</a></li>
|
||
<li>Added a new <a href="../demo-logistics.html" target="_blank">Logistics demo.</a></li>
|
||
<li>Added a new <a href="../demo-elder-care.html" target="_blank">Elder care demo.</a></li>
|
||
<li>Added a new <a href="../demo-cryptocurrency.html" target="_blank">Cryptocurrency demo.</a></li>
|
||
<li>Added feature to open submenu items on click of parent menu in mobile device if there is no link added in the parent menu item.</li>
|
||
<li>Added simple back to top icon style.</li>
|
||
<li>Added one more sticky header option to make header visible at top upon upward scroll.</li>
|
||
<li>Added my account submenu in jewellery store demo in the header.</li>
|
||
<li>Changed Instagram feed to display videos also.</li>
|
||
</ul>
|
||
</div>
|
||
<div class="col-md-12 docs-content-inner" id="changelog-ver1-0" style="height: 650px">
|
||
<h1>Version 1.0</h1>
|
||
<p>Released on 22 January 2024</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
|
||
<section id="other-templates" class="hidden">
|
||
<div class="container-fluid">
|
||
<div class="row">
|
||
<div class="col-md-12 docs-content-inner" id="other-templates">
|
||
<h1>Other Templates</h1>
|
||
<p>Here we are representing some other awesome and outstanding products that are Litho, Pofo, Brando, Hongo and so on. With these themes, you can create an attractive website as per your domain requirements in various fields.</p>
|
||
<div class="col-md-4 margin-bottom-20">
|
||
<a target="_blank" href="https://1.envato.market/g1DrMX">
|
||
<img src="images/template-hongo-shopify.jpg" alt="Hongo - Multipurpose Shopify Theme OS 2.0" />
|
||
</a>
|
||
</div>
|
||
<div class="col-md-4 margin-bottom-20">
|
||
<a target="_blank" href="https://1.envato.market/n1NzvX">
|
||
<img src="images/template-litho-wordpress.jpg" alt="Litho - Multipurpose Elementor WordPress Theme" />
|
||
</a>
|
||
</div>
|
||
<div class="col-md-4 margin-bottom-20">
|
||
<a target="_blank" href="https://1.envato.market/m3BBO">
|
||
<img src="images/template-hongo.jpg" alt="Hongo - Modern & Multipurpose WooCommerce WordPress Theme" />
|
||
</a>
|
||
</div>
|
||
<div class="col-md-4 margin-bottom-20">
|
||
<a target="_blank" href="https://1.envato.market/AQbko">
|
||
<img src="images/template-pofo-wordpress.jpg" alt="Pofo - Creative Portfolio and Blog WordPress Theme" />
|
||
</a>
|
||
</div>
|
||
<div class="col-md-4 margin-bottom-20">
|
||
<a target="_blank" href="https://1.envato.market/AL7Oj">
|
||
<img src="images/template-litho-html.jpg" alt="Litho – The Multipurpose HTML5 Template" />
|
||
</a>
|
||
</div>
|
||
<div class="col-md-4 margin-bottom-20">
|
||
<a target="_blank" href="https://1.envato.market/rQEmZd">
|
||
<img src="images/template-litho-react.jpg" alt="Litho - The Multipurpose React Template" />
|
||
</a>
|
||
</div>
|
||
<div class="col-md-4 margin-bottom-20">
|
||
<a target="_blank" href="https://1.envato.market/ZdYo00">
|
||
<img src="images/template-bumbo.jpg" alt="Bumbo - Business & Startup Portfolio Elementor Template Kit" />
|
||
</a>
|
||
</div>
|
||
<div class="col-md-4 margin-bottom-20">
|
||
<a target="_blank" href="https://1.envato.market/g7jrr">
|
||
<img src="images/template-pofo-html.jpg" alt="Pofo - Creative Agency, Corporate and Portfolio Multi-purpose Template" />
|
||
</a>
|
||
</div>
|
||
<div class="col-md-4 margin-bottom-20">
|
||
<a target="_blank" href="https://1.envato.market/xvWR5">
|
||
<img src="images/template-h-code-wordpress.jpg" alt="H-Code Responsive & Multipurpose WordPress Theme" />
|
||
</a>
|
||
</div>
|
||
<div class="col-md-4 margin-bottom-20">
|
||
<a target="_blank" href="https://1.envato.market/vvBbe">
|
||
<img src="images/template-brando-wordpress.jpg" alt="Brando Responsive and Multipurpose OnePage WordPress Theme" />
|
||
</a>
|
||
</div>
|
||
<div class="col-md-4 margin-bottom-20">
|
||
<a target="_blank" href="https://1.envato.market/v70xW">
|
||
<img src="images/template-yogger.jpg" alt="Yogger - Meditation and Yoga Elementor Template Kit" />
|
||
</a>
|
||
</div>
|
||
<div class="col-md-4 margin-bottom-20">
|
||
<a target="_blank" href="https://1.envato.market/qaXXb">
|
||
<img src="images/template-hando.jpg" alt="Hando - Corporate & Portfolio Elementor Template Kit" />
|
||
</a>
|
||
</div>
|
||
<div class="col-md-4 margin-bottom-20">
|
||
<a target="_blank" href="https://1.envato.market/vvB0d">
|
||
<img src="images/template-leadgen.jpg" alt="LeadGen - Multipurpose Marketing Landing Page Pack with HTML Builder" />
|
||
</a>
|
||
</div>
|
||
<div class="col-md-4 margin-bottom-20">
|
||
<a target="_blank" href="https://1.envato.market/Wzn9P">
|
||
<img src="images/template-paperio.jpg" alt="Paperio - Responsive and Multipurpose WordPress Blog Theme" />
|
||
</a>
|
||
</div>
|
||
<div class="col-md-4 margin-bottom-20">
|
||
<a target="_blank" href="https://1.envato.market/ryZWR">
|
||
<img src="images/template-h-code.jpg" alt="H-Code Multipurpose OnePage & Multi Page Template" />
|
||
</a>
|
||
</div>
|
||
<div class="col-md-4 margin-bottom-20">
|
||
<a target="_blank" href="https://1.envato.market/yv0o2">
|
||
<img src="images/template-brando.jpg" alt="Brando Responsive & Multipurpose OnePage Template" />
|
||
</a>
|
||
</div>
|
||
<div class="col-md-4 margin-bottom-20">
|
||
<a target="_blank" href="https://1.envato.market/qvJoy">
|
||
<img src="images/template-emailio.jpg" alt="Emailio Responsive Multipurpose Email Template With Online Builder" />
|
||
</a>
|
||
</div>
|
||
<div class="col-md-4 margin-bottom-20">
|
||
<a target="_blank" href="https://1.envato.market/61ORG">
|
||
<img src="images/template-mee.jpg" alt="MEE - Responsive Resume / Personal Portfolio" />
|
||
</a>
|
||
</div>
|
||
<div class="col-md-4 margin-bottom-20">
|
||
<a target="_blank" href="https://1.envato.market/B9rkq">
|
||
<img src="images/template-panara.jpg" alt="Panara - Responsive Coming Soon Template" />
|
||
</a>
|
||
</div>
|
||
<div class="col-md-4 margin-bottom-20">
|
||
<a target="_blank" href="https://1.envato.market/PgXnQ">
|
||
<img src="images/template-sturlly.jpg" alt="Sturlly Responsive One Page Multipurpose Template" />
|
||
</a>
|
||
</div>
|
||
<div class="col-md-4 margin-bottom-20">
|
||
<a target="_blank" href="https://1.envato.market/7V2Qy">
|
||
<img src="images/template-muu.jpg" alt="MUU - Unique and Creative Resume / Portfolio Template" />
|
||
</a>
|
||
</div>
|
||
<div class="col-md-4 margin-bottom-20">
|
||
<a target="_blank" href="https://1.envato.market/XRbKa">
|
||
<img src="images/template-christmas-email-template.jpg" alt="Christmas and New Year Responsive Email Template with Builder" />
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div class="line"></div>
|
||
<div class="col-md-12 text-center"><a href="https://www.themezaa.com/" target="_blank"><img src="images/themezaa-logo.png" alt="Crafto" style="box-shadow: none" /></a></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<a href="javascript:;" class="scrollToTop"><i class="ti-arrow-up"></i></a>
|
||
|
||
<div id="footer"></div>
|
||
<script data-cfasync="false" src="../cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script type="text/javascript" src="js/jquery.min.js"></script>
|
||
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
|
||
<script type="text/javascript" src="js/bootstrap.min.js"></script>
|
||
<script type="text/javascript" src="js/smooth-scroll.js"></script>
|
||
<script type="text/javascript" src="js/jquery.mCustomScrollbar.min.js"></script>
|
||
<script type="text/javascript" src="js/custom.js"></script>
|
||
</body>
|
||
</html> |