dev-chiefworks
1711 lines
104 KiB
HTML
1711 lines
104 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="description" content="An impressive and flawless site template that includes various UI elements and countless features, attractive ready-made blocks and rich pages, basically everything you need to create a unique and professional website.">
|
|
<meta name="keywords" content="bootstrap 5, business, corporate, creative, gulp, marketing, minimal, modern, multipurpose, one page, responsive, saas, sass, seo, startup, html5 template, site template">
|
|
<meta name="author" content="elemis">
|
|
<title>Sandbox - Modern & Multipurpose Bootstrap 5 Template</title>
|
|
<link rel="shortcut icon" href="../../assets/img/favicon.png">
|
|
<link rel="stylesheet" href="../../assets/css/plugins.css">
|
|
<link rel="stylesheet" href="../../assets/css/style.css">
|
|
</head>
|
|
|
|
<body>
|
|
<div class="content-wrapper">
|
|
<header class="wrapper bg-soft-primary">
|
|
<nav class="navbar navbar-expand-lg center-nav transparent navbar-light">
|
|
<div class="container flex-lg-row flex-nowrap align-items-center">
|
|
<div class="navbar-brand w-100">
|
|
<a href="../../index.html">
|
|
<img src="../../assets/img/logo.png" srcset="../../assets/img/logo@2x.png 2x" alt="" />
|
|
</a>
|
|
</div>
|
|
<div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
|
|
<div class="offcanvas-header d-lg-none">
|
|
<h3 class="text-white fs-30 mb-0">Sandbox</h3>
|
|
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
|
|
</div>
|
|
<div class="offcanvas-body ms-lg-auto d-flex flex-column h-100">
|
|
<ul class="navbar-nav">
|
|
<li class="nav-item dropdown dropdown-mega">
|
|
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Demos</a>
|
|
<ul class="dropdown-menu mega-menu mega-menu-dark mega-menu-img">
|
|
<li class="mega-menu-content">
|
|
<ul class="row row-cols-1 row-cols-lg-6 gx-0 gx-lg-4 gy-lg-2 list-unstyled">
|
|
<li class="col"><a class="dropdown-item" href="../../demo1.html">
|
|
<figure class="rounded lift d-none d-lg-block"><img src="../../assets/img/demos/mi1.jpg" srcset="../../assets/img/demos/mi1@2x.jpg 2x" alt=""></figure>
|
|
<span class="d-lg-none">Demo I</span>
|
|
</a></li>
|
|
<li class="col"><a class="dropdown-item" href="../../demo2.html">
|
|
<figure class="rounded lift d-none d-lg-block"><img src="../../assets/img/demos/mi2.jpg" srcset="../../assets/img/demos/mi2@2x.jpg 2x" alt=""></figure>
|
|
<span class="d-lg-none">Demo II</span>
|
|
</a></li>
|
|
<li class="col"><a class="dropdown-item" href="../../demo3.html">
|
|
<figure class="rounded lift d-none d-lg-block"><img src="../../assets/img/demos/mi3.jpg" srcset="../../assets/img/demos/mi3@2x.jpg 2x" alt=""></figure>
|
|
<span class="d-lg-none">Demo III</span>
|
|
</a></li>
|
|
<li class="col"><a class="dropdown-item" href="../../demo4.html">
|
|
<figure class="rounded lift d-none d-lg-block"><img src="../../assets/img/demos/mi4.jpg" srcset="../../assets/img/demos/mi4@2x.jpg 2x" alt=""></figure>
|
|
<span class="d-lg-none">Demo IV</span>
|
|
</a></li>
|
|
<li class="col"><a class="dropdown-item" href="../../demo5.html">
|
|
<figure class="rounded lift d-none d-lg-block"><img src="../../assets/img/demos/mi5.jpg" srcset="../../assets/img/demos/mi5@2x.jpg 2x" alt=""></figure>
|
|
<span class="d-lg-none">Demo V</span>
|
|
</a></li>
|
|
<li class="col"><a class="dropdown-item" href="../../demo6.html">
|
|
<figure class="rounded lift d-none d-lg-block"><img src="../../assets/img/demos/mi6.jpg" srcset="../../assets/img/demos/mi6@2x.jpg 2x" alt=""></figure>
|
|
<span class="d-lg-none">Demo VI</span>
|
|
</a></li>
|
|
<li class="col"><a class="dropdown-item" href="../../demo7.html">
|
|
<figure class="rounded lift d-none d-lg-block"><img src="../../assets/img/demos/mi7.jpg" srcset="../../assets/img/demos/mi7@2x.jpg 2x" alt=""></figure>
|
|
<span class="d-lg-none">Demo VII</span>
|
|
</a></li>
|
|
<li class="col"><a class="dropdown-item" href="../../demo8.html">
|
|
<figure class="rounded lift d-none d-lg-block"><img src="../../assets/img/demos/mi8.jpg" srcset="../../assets/img/demos/mi8@2x.jpg 2x" alt=""></figure>
|
|
<span class="d-lg-none">Demo VIII</span>
|
|
</a></li>
|
|
<li class="col"><a class="dropdown-item" href="../../demo9.html">
|
|
<figure class="rounded lift d-none d-lg-block"><img src="../../assets/img/demos/mi9.jpg" srcset="../../assets/img/demos/mi9@2x.jpg 2x" alt=""></figure>
|
|
<span class="d-lg-none">Demo IX</span>
|
|
</a></li>
|
|
<li class="col"><a class="dropdown-item" href="../../demo10.html">
|
|
<figure class="rounded lift d-none d-lg-block"><img src="../../assets/img/demos/mi10.jpg" srcset="../../assets/img/demos/mi10@2x.jpg 2x" alt=""></figure>
|
|
<span class="d-lg-none">Demo X</span>
|
|
</a></li>
|
|
<li class="col"><a class="dropdown-item" href="../../demo11.html">
|
|
<figure class="rounded lift d-none d-lg-block"><img src="../../assets/img/demos/mi11.jpg" srcset="../../assets/img/demos/mi11@2x.jpg 2x" alt=""></figure>
|
|
<span class="d-lg-none">Demo XI</span>
|
|
</a></li>
|
|
<li class="col"><a class="dropdown-item" href="../../demo12.html">
|
|
<figure class="rounded lift d-none d-lg-block"><img src="../../assets/img/demos/mi12.jpg" srcset="../../assets/img/demos/mi12@2x.jpg 2x" alt=""></figure>
|
|
<span class="d-lg-none">Demo XII</span>
|
|
</a></li>
|
|
<li class="col"><a class="dropdown-item" href="../../demo13.html">
|
|
<figure class="rounded lift d-none d-lg-block"><img src="../../assets/img/demos/mi13.jpg" srcset="../../assets/img/demos/mi13@2x.jpg 2x" alt=""></figure>
|
|
<span class="d-lg-none">Demo XIII</span>
|
|
</a></li>
|
|
<li class="col"><a class="dropdown-item" href="../../demo14.html">
|
|
<figure class="rounded lift d-none d-lg-block"><img src="../../assets/img/demos/mi14.jpg" srcset="../../assets/img/demos/mi14@2x.jpg 2x" alt=""></figure>
|
|
<span class="d-lg-none">Demo XIV</span>
|
|
</a></li>
|
|
<li class="col"><a class="dropdown-item" href="../../demo15.html">
|
|
<figure class="rounded lift d-none d-lg-block"><img src="../../assets/img/demos/mi15.jpg" srcset="../../assets/img/demos/mi15@2x.jpg 2x" alt=""></figure>
|
|
<span class="d-lg-none">Demo XV</span>
|
|
</a></li>
|
|
<li class="col"><a class="dropdown-item" href="../../demo16.html">
|
|
<figure class="rounded lift d-none d-lg-block"><img src="../../assets/img/demos/mi16.jpg" srcset="../../assets/img/demos/mi16@2x.jpg 2x" alt=""></figure>
|
|
<span class="d-lg-none">Demo XVI</span>
|
|
</a></li>
|
|
<li class="col"><a class="dropdown-item" href="../../demo17.html">
|
|
<figure class="rounded lift d-none d-lg-block"><img src="../../assets/img/demos/mi17.jpg" srcset="../../assets/img/demos/mi17@2x.jpg 2x" alt=""></figure>
|
|
<span class="d-lg-none">Demo XVII</span>
|
|
</a></li>
|
|
<li class="col"><a class="dropdown-item" href="../../demo18.html">
|
|
<figure class="rounded lift d-none d-lg-block"><img src="../../assets/img/demos/mi18.jpg" srcset="../../assets/img/demos/mi18@2x.jpg 2x" alt=""></figure>
|
|
<span class="d-lg-none">Demo XVIII</span>
|
|
</a></li>
|
|
<li class="col"><a class="dropdown-item" href="../../demo19.html">
|
|
<figure class="rounded lift d-none d-lg-block"><img src="../../assets/img/demos/mi19.jpg" srcset="../../assets/img/demos/mi19@2x.jpg 2x" alt=""></figure>
|
|
<span class="d-lg-none">Demo XIX</span>
|
|
</a></li>
|
|
<li class="col"><a class="dropdown-item" href="../../demo20.html">
|
|
<figure class="rounded lift d-none d-lg-block"><img src="../../assets/img/demos/mi20.jpg" srcset="../../assets/img/demos/mi20@2x.jpg 2x" alt=""></figure>
|
|
<span class="d-lg-none">Demo XX</span>
|
|
</a></li>
|
|
<li class="col"><a class="dropdown-item" href="../../demo21.html">
|
|
<figure class="rounded lift d-none d-lg-block"><img src="../../assets/img/demos/mi21.jpg" srcset="../../assets/img/demos/mi21@2x.jpg 2x" alt=""></figure>
|
|
<span class="d-lg-none">Demo XXI</span>
|
|
</a></li>
|
|
</ul>
|
|
<!--/.row -->
|
|
</li>
|
|
<!--/.mega-menu-content-->
|
|
</ul>
|
|
<!--/.dropdown-menu -->
|
|
</li>
|
|
<li class="nav-item dropdown">
|
|
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Pages</a>
|
|
<ul class="dropdown-menu">
|
|
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Services</a>
|
|
<ul class="dropdown-menu">
|
|
<li class="nav-item"><a class="dropdown-item" href="../../services.html">Services I</a></li>
|
|
<li class="nav-item"><a class="dropdown-item" href="../../services2.html">Services II</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">About</a>
|
|
<ul class="dropdown-menu">
|
|
<li class="nav-item"><a class="dropdown-item" href="../../about.html">About I</a></li>
|
|
<li class="nav-item"><a class="dropdown-item" href="../../about2.html">About II</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Shop</a>
|
|
<ul class="dropdown-menu">
|
|
<li class="nav-item"><a class="dropdown-item" href="../../shop.html">Shop I</a></li>
|
|
<li class="nav-item"><a class="dropdown-item" href="../../shop2.html">Shop II</a></li>
|
|
<li class="nav-item"><a class="dropdown-item" href="../../shop-product.html">Product Page</a></li>
|
|
<li class="nav-item"><a class="dropdown-item" href="../../shop-cart.html">Shopping Cart</a></li>
|
|
<li class="nav-item"><a class="dropdown-item" href="../../shop-checkout.html">Checkout</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Contact</a>
|
|
<ul class="dropdown-menu">
|
|
<li class="nav-item"><a class="dropdown-item" href="../../contact.html">Contact I</a></li>
|
|
<li class="nav-item"><a class="dropdown-item" href="../../contact2.html">Contact II</a></li>
|
|
<li class="nav-item"><a class="dropdown-item" href="../../contact3.html">Contact III</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Career</a>
|
|
<ul class="dropdown-menu">
|
|
<li class="nav-item"><a class="dropdown-item" href="../../career.html">Job Listing I</a></li>
|
|
<li class="nav-item"><a class="dropdown-item" href="../../career2.html">Job Listing II</a></li>
|
|
<li class="nav-item"><a class="dropdown-item" href="../../career-job.html">Job Description</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Utility</a>
|
|
<ul class="dropdown-menu">
|
|
<li class="nav-item"><a class="dropdown-item" href="../../404.html">404 Not Found</a></li>
|
|
<li class="nav-item"><a class="dropdown-item" href="../../page-loader.html">Page Loader</a></li>
|
|
<li class="nav-item"><a class="dropdown-item" href="../../signin.html">Sign In I</a></li>
|
|
<li class="nav-item"><a class="dropdown-item" href="../../signin2.html">Sign In II</a></li>
|
|
<li class="nav-item"><a class="dropdown-item" href="../../signup.html">Sign Up I</a></li>
|
|
<li class="nav-item"><a class="dropdown-item" href="../../signup2.html">Sign Up II</a></li>
|
|
<li class="nav-item"><a class="dropdown-item" href="../../terms.html">Terms</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="nav-item"><a class="dropdown-item" href="../../pricing.html">Pricing</a></li>
|
|
<li class="nav-item"><a class="dropdown-item" href="../../onepage.html">One Page</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="nav-item dropdown">
|
|
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Projects</a>
|
|
<div class="dropdown-menu dropdown-lg">
|
|
<div class="dropdown-lg-content">
|
|
<div>
|
|
<h6 class="dropdown-header">Project Pages</h6>
|
|
<ul class="list-unstyled">
|
|
<li><a class="dropdown-item" href="../../projects.html">Projects I</a></li>
|
|
<li><a class="dropdown-item" href="../../projects2.html">Projects II</a></li>
|
|
<li><a class="dropdown-item" href="../../projects3.html">Projects III</a></li>
|
|
<li><a class="dropdown-item" href="../../projects4.html">Projects IV</a></li>
|
|
</ul>
|
|
</div>
|
|
<!-- /.column -->
|
|
<div>
|
|
<h6 class="dropdown-header">Single Projects</h6>
|
|
<ul class="list-unstyled">
|
|
<li><a class="dropdown-item" href="../../single-project.html">Single Project I</a></li>
|
|
<li><a class="dropdown-item" href="../../single-project2.html">Single Project II</a></li>
|
|
<li><a class="dropdown-item" href="../../single-project3.html">Single Project III</a></li>
|
|
</ul>
|
|
</div>
|
|
<!-- /.column -->
|
|
</div>
|
|
<!-- /auto-column -->
|
|
</div>
|
|
</li>
|
|
<li class="nav-item dropdown">
|
|
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Blog</a>
|
|
<ul class="dropdown-menu">
|
|
<li class="nav-item"><a class="dropdown-item" href="../../blog.html">Blog without Sidebar</a></li>
|
|
<li class="nav-item"><a class="dropdown-item" href="../../blog2.html">Blog with Sidebar</a></li>
|
|
<li class="nav-item"><a class="dropdown-item" href="../../blog3.html">Blog with Left Sidebar</a></li>
|
|
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Blog Posts</a>
|
|
<ul class="dropdown-menu">
|
|
<li class="nav-item"><a class="dropdown-item" href="../../blog-post.html">Post without Sidebar</a></li>
|
|
<li class="nav-item"><a class="dropdown-item" href="../../blog-post2.html">Post with Sidebar</a></li>
|
|
<li class="nav-item"><a class="dropdown-item" href="../../blog-post3.html">Post with Left Sidebar</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li class="nav-item dropdown dropdown-mega">
|
|
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Blocks</a>
|
|
<ul class="dropdown-menu mega-menu mega-menu-dark mega-menu-img">
|
|
<li class="mega-menu-content">
|
|
<ul class="row row-cols-1 row-cols-lg-6 gx-0 gx-lg-6 gy-lg-4 list-unstyled">
|
|
<li class="col"><a class="dropdown-item" href="../../docs/blocks/about.html">
|
|
<div class="rounded img-svg d-none d-lg-block p-4 mb-lg-2"><img class="rounded-0" src="../../assets/img/demos/block1.svg" alt=""></div>
|
|
<span>About</span>
|
|
</a>
|
|
</li>
|
|
<li class="col"><a class="dropdown-item" href="../../docs/blocks/blog.html">
|
|
<div class="rounded img-svg d-none d-lg-block p-4 mb-lg-2"><img class="rounded-0" src="../../assets/img/demos/block2.svg" alt=""></div>
|
|
<span>Blog</span>
|
|
</a>
|
|
</li>
|
|
<li class="col"><a class="dropdown-item" href="../../docs/blocks/call-to-action.html">
|
|
<div class="rounded img-svg d-none d-lg-block p-4 mb-lg-2"><img class="rounded-0" src="../../assets/img/demos/block3.svg" alt=""></div>
|
|
<span>Call to Action</span>
|
|
</a>
|
|
</li>
|
|
<li class="col"><a class="dropdown-item" href="../../docs/blocks/clients.html">
|
|
<div class="rounded img-svg d-none d-lg-block p-4 mb-lg-2"><img class="rounded-0" src="../../assets/img/demos/block4.svg" alt=""></div>
|
|
<span>Clients</span>
|
|
</a>
|
|
</li>
|
|
<li class="col"><a class="dropdown-item" href="../../docs/blocks/contact.html">
|
|
<div class="rounded img-svg d-none d-lg-block p-4 mb-lg-2"><img class="rounded-0" src="../../assets/img/demos/block5.svg" alt=""></div>
|
|
<span>Contact</span>
|
|
</a>
|
|
</li>
|
|
<li class="col"><a class="dropdown-item" href="../../docs/blocks/facts.html">
|
|
<div class="rounded img-svg d-none d-lg-block p-4 mb-lg-2"><img class="rounded-0" src="../../assets/img/demos/block6.svg" alt=""></div>
|
|
<span>Facts</span>
|
|
</a>
|
|
</li>
|
|
<li class="col"><a class="dropdown-item" href="../../docs/blocks/faq.html">
|
|
<div class="rounded img-svg d-none d-lg-block p-4 mb-lg-2"><img class="rounded-0" src="../../assets/img/demos/block7.svg" alt=""></div>
|
|
<span>FAQ</span>
|
|
</a>
|
|
</li>
|
|
<li class="col"><a class="dropdown-item" href="../../docs/blocks/features.html">
|
|
<div class="rounded img-svg d-none d-lg-block p-4 mb-lg-2"><img class="rounded-0" src="../../assets/img/demos/block8.svg" alt=""></div>
|
|
<span>Features</span>
|
|
</a>
|
|
</li>
|
|
<li class="col"><a class="dropdown-item" href="../../docs/blocks/footer.html">
|
|
<div class="rounded img-svg d-none d-lg-block p-4 mb-lg-2"><img class="rounded-0" src="../../assets/img/demos/block9.svg" alt=""></div>
|
|
<span>Footer</span>
|
|
</a>
|
|
</li>
|
|
<li class="col"><a class="dropdown-item" href="../../docs/blocks/hero.html">
|
|
<div class="rounded img-svg d-none d-lg-block p-4 mb-lg-2"><img class="rounded-0" src="../../assets/img/demos/block10.svg" alt=""></div>
|
|
<span>Hero</span>
|
|
</a>
|
|
</li>
|
|
<li class="col"><a class="dropdown-item" href="../../docs/blocks/misc.html">
|
|
<div class="rounded img-svg d-none d-lg-block p-4 mb-lg-2"><img class="rounded-0" src="../../assets/img/demos/block17.svg" alt=""></div>
|
|
<span>Misc</span>
|
|
</a>
|
|
</li>
|
|
<li class="col"><a class="dropdown-item" href="../../docs/blocks/navbar.html">
|
|
<div class="rounded img-svg d-none d-lg-block p-4 mb-lg-2"><img class="rounded-0" src="../../assets/img/demos/block11.svg" alt=""></div>
|
|
<span>Navbar</span>
|
|
</a>
|
|
</li>
|
|
<li class="col"><a class="dropdown-item" href="../../docs/blocks/portfolio.html">
|
|
<div class="rounded img-svg d-none d-lg-block p-4 mb-lg-2"><img class="rounded-0" src="../../assets/img/demos/block12.svg" alt=""></div>
|
|
<span>Portfolio</span>
|
|
</a>
|
|
</li>
|
|
<li class="col"><a class="dropdown-item" href="../../docs/blocks/pricing.html">
|
|
<div class="rounded img-svg d-none d-lg-block p-4 mb-lg-2"><img class="rounded-0" src="../../assets/img/demos/block13.svg" alt=""></div>
|
|
<span>Pricing</span>
|
|
</a>
|
|
</li>
|
|
<li class="col"><a class="dropdown-item" href="../../docs/blocks/process.html">
|
|
<div class="rounded img-svg d-none d-lg-block p-4 mb-lg-2"><img class="rounded-0" src="../../assets/img/demos/block14.svg" alt=""></div>
|
|
<span>Process</span>
|
|
</a>
|
|
</li>
|
|
<li class="col"><a class="dropdown-item" href="../../docs/blocks/team.html">
|
|
<div class="rounded img-svg d-none d-lg-block p-4 mb-lg-2"><img class="rounded-0" src="../../assets/img/demos/block15.svg" alt=""></div>
|
|
<span>Team</span>
|
|
</a>
|
|
</li>
|
|
<li class="col"><a class="dropdown-item" href="../../docs/blocks/testimonials.html">
|
|
<div class="rounded img-svg d-none d-lg-block p-4 mb-lg-2"><img class="rounded-0" src="../../assets/img/demos/block16.svg" alt=""></div>
|
|
<span>Testimonials</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
<!--/.row -->
|
|
</li>
|
|
<!--/.mega-menu-content-->
|
|
</ul>
|
|
<!--/.dropdown-menu -->
|
|
</li>
|
|
<li class="nav-item dropdown dropdown-mega">
|
|
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Documentation</a>
|
|
<ul class="dropdown-menu mega-menu">
|
|
<li class="mega-menu-content">
|
|
<div class="row gx-0 gx-lg-3">
|
|
<div class="col-lg-4">
|
|
<h6 class="dropdown-header">Usage</h6>
|
|
<ul class="list-unstyled cc-2 pb-lg-1">
|
|
<li><a class="dropdown-item" href="../../docs/index.html">Get Started</a></li>
|
|
<li><a class="dropdown-item" href="../../docs/forms.html">Forms</a></li>
|
|
<li><a class="dropdown-item" href="../../docs/faq.html">FAQ</a></li>
|
|
<li><a class="dropdown-item" href="../../docs/changelog.html">Changelog</a></li>
|
|
<li><a class="dropdown-item" href="../../docs/credits.html">Credits</a></li>
|
|
</ul>
|
|
<h6 class="dropdown-header mt-lg-6">Styleguide</h6>
|
|
<ul class="list-unstyled cc-2">
|
|
<li><a class="dropdown-item" href="../../docs/styleguide/colors.html">Colors</a></li>
|
|
<li><a class="dropdown-item" href="../../docs/styleguide/fonts.html">Fonts</a></li>
|
|
<li><a class="dropdown-item" href="../../docs/styleguide/icons-svg.html">SVG Icons</a></li>
|
|
<li><a class="dropdown-item" href="../../docs/styleguide/icons-font.html">Font Icons</a></li>
|
|
<li><a class="dropdown-item" href="../../docs/styleguide/illustrations.html">Illustrations</a></li>
|
|
<li><a class="dropdown-item" href="../../docs/styleguide/backgrounds.html">Backgrounds</a></li>
|
|
<li><a class="dropdown-item" href="../../docs/styleguide/misc.html">Misc</a></li>
|
|
</ul>
|
|
</div>
|
|
<!--/column -->
|
|
<div class="col-lg-8">
|
|
<h6 class="dropdown-header">Elements</h6>
|
|
<ul class="list-unstyled cc-3">
|
|
<li><a class="dropdown-item" href="../../docs/elements/accordion.html">Accordion</a></li>
|
|
<li><a class="dropdown-item" href="../../docs/elements/alerts.html">Alerts</a></li>
|
|
<li><a class="dropdown-item" href="../../docs/elements/animations.html">Animations</a></li>
|
|
<li><a class="dropdown-item" href="../../docs/elements/avatars.html">Avatars</a></li>
|
|
<li><a class="dropdown-item" href="../../docs/elements/background.html">Background</a></li>
|
|
<li><a class="dropdown-item" href="../../docs/elements/badges.html">Badges</a></li>
|
|
<li><a class="dropdown-item" href="../../docs/elements/breadcrumb.html">Breadcrumb</a></li>
|
|
<li><a class="dropdown-item" href="../../docs/elements/buttons.html">Buttons</a></li>
|
|
<li><a class="dropdown-item" href="../../docs/elements/card.html">Card</a></li>
|
|
<li><a class="dropdown-item" href="../../docs/elements/carousel.html">Carousel</a></li>
|
|
<li><a class="dropdown-item" href="../../docs/elements/dividers.html">Dividers</a></li>
|
|
<li><a class="dropdown-item" href="../../docs/elements/form-elements.html">Form Elements</a></li>
|
|
<li><a class="dropdown-item" href="../../docs/elements/image-hover.html">Image Hover</a></li>
|
|
<li><a class="dropdown-item" href="../../docs/elements/image-mask.html">Image Mask</a></li>
|
|
<li><a class="dropdown-item" href="../../docs/elements/lightbox.html">Lightbox</a></li>
|
|
<li><a class="dropdown-item" href="../../docs/elements/player.html">Media Player</a></li>
|
|
<li><a class="dropdown-item" href="../../docs/elements/modal.html">Modal</a></li>
|
|
<li><a class="dropdown-item" href="../../docs/elements/progressbar.html">Progressbar</a></li>
|
|
<li><a class="dropdown-item" href="../../docs/elements/shadows.html">Shadows</a></li>
|
|
<li><a class="dropdown-item" href="../../docs/elements/shapes.html">Shapes</a></li>
|
|
<li><a class="dropdown-item" href="../../docs/elements/tables.html">Tables</a></li>
|
|
<li><a class="dropdown-item" href="../../docs/elements/tabs.html">Tabs</a></li>
|
|
<li><a class="dropdown-item" href="../../docs/elements/text-animations.html">Text Animations</a></li>
|
|
<li><a class="dropdown-item" href="../../docs/elements/text-highlight.html">Text Highlight</a></li>
|
|
<li><a class="dropdown-item" href="../../docs/elements/tiles.html">Tiles</a></li>
|
|
<li><a class="dropdown-item" href="../../docs/elements/tooltips-popovers.html">Tooltips & Popovers</a></li>
|
|
<li><a class="dropdown-item" href="../../docs/elements/typography.html">Typography</a></li>
|
|
</ul>
|
|
</div>
|
|
<!--/column -->
|
|
</div>
|
|
<!--/.row -->
|
|
</li>
|
|
<!--/.mega-menu-content-->
|
|
</ul>
|
|
<!--/.dropdown-menu -->
|
|
</li>
|
|
</ul>
|
|
<!-- /.navbar-nav -->
|
|
<div class="offcanvas-footer d-lg-none">
|
|
<div>
|
|
<a href="mailto:first.last@email.com" class="link-inverse">info@email.com</a>
|
|
<br /> 00 (123) 456 78 90 <br />
|
|
<nav class="nav social social-white mt-4">
|
|
<a href="#"><i class="uil uil-twitter"></i></a>
|
|
<a href="#"><i class="uil uil-facebook-f"></i></a>
|
|
<a href="#"><i class="uil uil-dribbble"></i></a>
|
|
<a href="#"><i class="uil uil-instagram"></i></a>
|
|
<a href="#"><i class="uil uil-youtube"></i></a>
|
|
</nav>
|
|
<!-- /.social -->
|
|
</div>
|
|
</div>
|
|
<!-- /.offcanvas-footer -->
|
|
</div>
|
|
<!-- /.offcanvas-body -->
|
|
</div>
|
|
<!-- /.navbar-collapse -->
|
|
<div class="navbar-other w-100 d-flex ms-auto">
|
|
<ul class="navbar-nav flex-row align-items-center ms-auto">
|
|
<li class="nav-item dropdown language-select text-uppercase">
|
|
<a class="nav-link dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">En</a>
|
|
<ul class="dropdown-menu">
|
|
<li class="nav-item"><a class="dropdown-item" href="#">En</a></li>
|
|
<li class="nav-item"><a class="dropdown-item" href="#">De</a></li>
|
|
<li class="nav-item"><a class="dropdown-item" href="#">Es</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="nav-item d-none d-md-block">
|
|
<a href="../../contact.html" class="btn btn-sm btn-primary rounded-pill">Contact</a>
|
|
</li>
|
|
<li class="nav-item d-lg-none">
|
|
<button class="hamburger offcanvas-nav-btn"><span></span></button>
|
|
</li>
|
|
</ul>
|
|
<!-- /.navbar-nav -->
|
|
</div>
|
|
<!-- /.navbar-other -->
|
|
</div>
|
|
<!-- /.container -->
|
|
</nav>
|
|
<!-- /.navbar -->
|
|
</header>
|
|
<!-- /header -->
|
|
<section class="wrapper bg-soft-primary">
|
|
<div class="container pt-10 pb-12 pt-md-14 pb-md-16 text-center">
|
|
<div class="row">
|
|
<div class="col-md-9 col-lg-7 col-xl-5 mx-auto">
|
|
<h1 class="display-1 mb-3">Blocks - Blog</h1>
|
|
<p class="lead px-xxl-10">Copy any custom block snippet below and paste it on your page to build your website easily.</p>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
</section>
|
|
<!-- /section -->
|
|
<section class="wrapper bg-light wrapper-border">
|
|
<div class="container py-11">
|
|
<h2 class="h5">Filter Blocks:</h2>
|
|
<ul class="list-inline mb-0">
|
|
<li class="list-inline-item me-1 mb-2"><a href="../../docs/blocks/about.html" class="btn btn-soft-ash btn-sm rounded ">About</a></li>
|
|
<li class="list-inline-item me-1 mb-2"><a href="../../docs/blocks/blog.html" class="btn btn-soft-ash btn-sm rounded text-primary pe-none">Blog</a></li>
|
|
<li class="list-inline-item me-1 mb-2"><a href="../../docs/blocks/call-to-action.html" class="btn btn-soft-ash btn-sm rounded ">Call to Action</a></li>
|
|
<li class="list-inline-item me-1 mb-2"><a href="../../docs/blocks/clients.html" class="btn btn-soft-ash btn-sm rounded ">Clients</a></li>
|
|
<li class="list-inline-item me-1 mb-2"><a href="../../docs/blocks/contact.html" class="btn btn-soft-ash btn-sm rounded ">Contact</a></li>
|
|
<li class="list-inline-item me-1 mb-2"><a href="../../docs/blocks/facts.html" class="btn btn-soft-ash btn-sm rounded ">Facts</a></li>
|
|
<li class="list-inline-item me-1 mb-2"><a href="../../docs/blocks/faq.html" class="btn btn-soft-ash btn-sm rounded ">FAQ</a></li>
|
|
<li class="list-inline-item me-1 mb-2"><a href="../../docs/blocks/features.html" class="btn btn-soft-ash btn-sm rounded ">Features</a></li>
|
|
<li class="list-inline-item me-1 mb-2"><a href="../../docs/blocks/footer.html" class="btn btn-soft-ash btn-sm rounded ">Footer</a></li>
|
|
<li class="list-inline-item me-1 mb-2"><a href="../../docs/blocks/hero.html" class="btn btn-soft-ash btn-sm rounded ">Hero</a></li>
|
|
<li class="list-inline-item me-1 mb-2"><a href="../../docs/blocks/misc.html" class="btn btn-soft-ash btn-sm rounded ">Misc</a></li>
|
|
<li class="list-inline-item me-1 mb-2"><a href="../../docs/blocks/navbar.html" class="btn btn-soft-ash btn-sm rounded ">Navbar</a></li>
|
|
<li class="list-inline-item me-1 mb-2"><a href="../../docs/blocks/portfolio.html" class="btn btn-soft-ash btn-sm rounded ">Portfolio</a></li>
|
|
<li class="list-inline-item me-1 mb-2"><a href="../../docs/blocks/pricing.html" class="btn btn-soft-ash btn-sm rounded ">Pricing</a></li>
|
|
<li class="list-inline-item me-1 mb-2"><a href="../../docs/blocks/process.html" class="btn btn-soft-ash btn-sm rounded ">Process</a></li>
|
|
<li class="list-inline-item me-1 mb-2"><a href="../../docs/blocks/team.html" class="btn btn-soft-ash btn-sm rounded ">Team</a></li>
|
|
<li class="list-inline-item me-1 mb-2"><a href="../../docs/blocks/testimonials.html" class="btn btn-soft-ash btn-sm rounded ">Testimonials</a></li>
|
|
</ul>
|
|
</div>
|
|
<!-- /.container -->
|
|
</section>
|
|
<!-- /section -->
|
|
<section id="snippet-1" class="wrapper bg-light wrapper-border">
|
|
<div class="container pt-15 pt-md-17 pb-13 pb-md-15">
|
|
<h2 class="display-4 mb-3 text-center">Our Journal</h2>
|
|
<p class="lead fs-lg mb-10 text-center px-md-16 px-lg-21 px-xl-0">Here are the latest company news from our blog that got the most attention.</p>
|
|
<div class="swiper-container blog grid-view mb-6" data-margin="30" data-dots="true" data-items-xl="3" data-items-md="2" data-items-xs="1">
|
|
<div class="swiper">
|
|
<div class="swiper-wrapper">
|
|
<div class="swiper-slide">
|
|
<article>
|
|
<figure class="overlay overlay-1 hover-scale rounded mb-5"><a href="#"> <img src="../../assets/img/photos/b4.jpg" alt="" /></a>
|
|
<figcaption>
|
|
<h5 class="from-top mb-0">Read More</h5>
|
|
</figcaption>
|
|
</figure>
|
|
<div class="post-header">
|
|
<div class="post-category text-line">
|
|
<a href="#" class="hover" rel="category">Coding</a>
|
|
</div>
|
|
<!-- /.post-category -->
|
|
<h2 class="post-title h3 mt-1 mb-3"><a class="link-dark" href="../../blog-post.html">Ligula tristique quis risus</a></h2>
|
|
</div>
|
|
<!-- /.post-header -->
|
|
<div class="post-footer">
|
|
<ul class="post-meta">
|
|
<li class="post-date"><i class="uil uil-calendar-alt"></i><span>14 Apr 2021</span></li>
|
|
<li class="post-comments"><a href="#"><i class="uil uil-comment"></i>4</a></li>
|
|
</ul>
|
|
<!-- /.post-meta -->
|
|
</div>
|
|
<!-- /.post-footer -->
|
|
</article>
|
|
<!-- /article -->
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide">
|
|
<article>
|
|
<figure class="overlay overlay-1 hover-scale rounded mb-5"><a href="#"> <img src="../../assets/img/photos/b5.jpg" alt="" /></a>
|
|
<figcaption>
|
|
<h5 class="from-top mb-0">Read More</h5>
|
|
</figcaption>
|
|
</figure>
|
|
<div class="post-header">
|
|
<div class="post-category text-line">
|
|
<a href="#" class="hover" rel="category">Workspace</a>
|
|
</div>
|
|
<!-- /.post-category -->
|
|
<h2 class="post-title h3 mt-1 mb-3"><a class="link-dark" href="../../blog-post.html">Nullam id dolor elit id nibh</a></h2>
|
|
</div>
|
|
<!-- /.post-header -->
|
|
<div class="post-footer">
|
|
<ul class="post-meta">
|
|
<li class="post-date"><i class="uil uil-calendar-alt"></i><span>29 Mar 2021</span></li>
|
|
<li class="post-comments"><a href="#"><i class="uil uil-comment"></i>3</a></li>
|
|
</ul>
|
|
<!-- /.post-meta -->
|
|
</div>
|
|
<!-- /.post-footer -->
|
|
</article>
|
|
<!-- /article -->
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide">
|
|
<article>
|
|
<figure class="overlay overlay-1 hover-scale rounded mb-5"><a href="#"> <img src="../../assets/img/photos/b6.jpg" alt="" /></a>
|
|
<figcaption>
|
|
<h5 class="from-top mb-0">Read More</h5>
|
|
</figcaption>
|
|
</figure>
|
|
<div class="post-header">
|
|
<div class="post-category text-line">
|
|
<a href="#" class="hover" rel="category">Meeting</a>
|
|
</div>
|
|
<!-- /.post-category -->
|
|
<h2 class="post-title h3 mt-1 mb-3"><a class="link-dark" href="../../blog-post.html">Ultricies fusce porta elit</a></h2>
|
|
</div>
|
|
<!-- /.post-header -->
|
|
<div class="post-footer">
|
|
<ul class="post-meta">
|
|
<li class="post-date"><i class="uil uil-calendar-alt"></i><span>26 Feb 2021</span></li>
|
|
<li class="post-comments"><a href="#"><i class="uil uil-comment"></i>6</a></li>
|
|
</ul>
|
|
<!-- /.post-meta -->
|
|
</div>
|
|
<!-- /.post-footer -->
|
|
</article>
|
|
<!-- /article -->
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide">
|
|
<article>
|
|
<figure class="overlay overlay-1 hover-scale rounded mb-5"><a href="#"> <img src="../../assets/img/photos/b7.jpg" alt="" /></a>
|
|
<figcaption>
|
|
<h5 class="from-top mb-0">Read More</h5>
|
|
</figcaption>
|
|
</figure>
|
|
<div class="post-header">
|
|
<div class="post-category text-line">
|
|
<a href="#" class="hover" rel="category">Business Tips</a>
|
|
</div>
|
|
<!-- /.post-category -->
|
|
<h2 class="post-title h3 mt-1 mb-3"><a class="link-dark" href="../../blog-post.html">Morbi leo risus porta eget</a></h2>
|
|
</div>
|
|
<div class="post-footer">
|
|
<ul class="post-meta">
|
|
<li class="post-date"><i class="uil uil-calendar-alt"></i><span>7 Jan 2021</span></li>
|
|
<li class="post-comments"><a href="#"><i class="uil uil-comment"></i>2</a></li>
|
|
</ul>
|
|
<!-- /.post-meta -->
|
|
</div>
|
|
<!-- /.post-footer -->
|
|
</article>
|
|
<!-- /article -->
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
</div>
|
|
<!--/.swiper-wrapper -->
|
|
</div>
|
|
<!-- /.swiper -->
|
|
</div>
|
|
<!-- /.swiper-container -->
|
|
</div>
|
|
<!-- /.container -->
|
|
<div class="container pb-15 pb-md-17">
|
|
<div class="card">
|
|
<div class="card-footer border-0 position-relative">
|
|
<a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-snippet-1">View example's code</a>
|
|
</div>
|
|
<!--/.card-footer -->
|
|
<div id="collapse-snippet-1" class="card-footer bg-dark p-0 accordion-collapse collapse">
|
|
<div class="code-wrapper">
|
|
<div class="code-wrapper-inner">
|
|
<pre class="language-html"><code><section class="wrapper bg-light">
|
|
<div class="container py-14 py-md-16">
|
|
<h2 class="display-4 mb-3 text-center">Our Journal</h2>
|
|
<p class="lead fs-lg mb-10 text-center px-md-16 px-lg-21 px-xl-0">Here are the latest company news from our blog that got the most attention.</p>
|
|
<div class="swiper-container blog grid-view mb-6" data-margin="30" data-dots="true" data-items-xl="3" data-items-md="2" data-items-xs="1">
|
|
<div class="swiper">
|
|
<div class="swiper-wrapper">
|
|
<div class="swiper-slide">
|
|
<article>
|
|
<figure class="overlay overlay-1 hover-scale rounded mb-5"><a href="#"> <img src="./assets/img/photos/b4.jpg" alt="" /></a>
|
|
<figcaption>
|
|
<h5 class="from-top mb-0">Read More</h5>
|
|
</figcaption>
|
|
</figure>
|
|
<div class="post-header">
|
|
<div class="post-category text-line">
|
|
<a href="#" class="hover" rel="category">Coding</a>
|
|
</div>
|
|
<!-- /.post-category -->
|
|
<h2 class="post-title h3 mt-1 mb-3"><a class="link-dark" href="./blog-post.html">Ligula tristique quis risus</a></h2>
|
|
</div>
|
|
<!-- /.post-header -->
|
|
<div class="post-footer">
|
|
<ul class="post-meta">
|
|
<li class="post-date"><i class="uil uil-calendar-alt"></i><span>14 Apr 2021</span></li>
|
|
<li class="post-comments"><a href="#"><i class="uil uil-comment"></i>4</a></li>
|
|
</ul>
|
|
<!-- /.post-meta -->
|
|
</div>
|
|
<!-- /.post-footer -->
|
|
</article>
|
|
<!-- /article -->
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide">
|
|
<article>
|
|
<figure class="overlay overlay-1 hover-scale rounded mb-5"><a href="#"> <img src="./assets/img/photos/b5.jpg" alt="" /></a>
|
|
<figcaption>
|
|
<h5 class="from-top mb-0">Read More</h5>
|
|
</figcaption>
|
|
</figure>
|
|
<div class="post-header">
|
|
<div class="post-category text-line">
|
|
<a href="#" class="hover" rel="category">Workspace</a>
|
|
</div>
|
|
<!-- /.post-category -->
|
|
<h2 class="post-title h3 mt-1 mb-3"><a class="link-dark" href="./blog-post.html">Nullam id dolor elit id nibh</a></h2>
|
|
</div>
|
|
<!-- /.post-header -->
|
|
<div class="post-footer">
|
|
<ul class="post-meta">
|
|
<li class="post-date"><i class="uil uil-calendar-alt"></i><span>29 Mar 2021</span></li>
|
|
<li class="post-comments"><a href="#"><i class="uil uil-comment"></i>3</a></li>
|
|
</ul>
|
|
<!-- /.post-meta -->
|
|
</div>
|
|
<!-- /.post-footer -->
|
|
</article>
|
|
<!-- /article -->
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide">
|
|
<article>
|
|
<figure class="overlay overlay-1 hover-scale rounded mb-5"><a href="#"> <img src="./assets/img/photos/b6.jpg" alt="" /></a>
|
|
<figcaption>
|
|
<h5 class="from-top mb-0">Read More</h5>
|
|
</figcaption>
|
|
</figure>
|
|
<div class="post-header">
|
|
<div class="post-category text-line">
|
|
<a href="#" class="hover" rel="category">Meeting</a>
|
|
</div>
|
|
<!-- /.post-category -->
|
|
<h2 class="post-title h3 mt-1 mb-3"><a class="link-dark" href="./blog-post.html">Ultricies fusce porta elit</a></h2>
|
|
</div>
|
|
<!-- /.post-header -->
|
|
<div class="post-footer">
|
|
<ul class="post-meta">
|
|
<li class="post-date"><i class="uil uil-calendar-alt"></i><span>26 Feb 2021</span></li>
|
|
<li class="post-comments"><a href="#"><i class="uil uil-comment"></i>6</a></li>
|
|
</ul>
|
|
<!-- /.post-meta -->
|
|
</div>
|
|
<!-- /.post-footer -->
|
|
</article>
|
|
<!-- /article -->
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide">
|
|
<article>
|
|
<figure class="overlay overlay-1 hover-scale rounded mb-5"><a href="#"> <img src="./assets/img/photos/b7.jpg" alt="" /></a>
|
|
<figcaption>
|
|
<h5 class="from-top mb-0">Read More</h5>
|
|
</figcaption>
|
|
</figure>
|
|
<div class="post-header">
|
|
<div class="post-category text-line">
|
|
<a href="#" class="hover" rel="category">Business Tips</a>
|
|
</div>
|
|
<!-- /.post-category -->
|
|
<h2 class="post-title h3 mt-1 mb-3"><a class="link-dark" href="./blog-post.html">Morbi leo risus porta eget</a></h2>
|
|
</div>
|
|
<div class="post-footer">
|
|
<ul class="post-meta">
|
|
<li class="post-date"><i class="uil uil-calendar-alt"></i><span>7 Jan 2021</span></li>
|
|
<li class="post-comments"><a href="#"><i class="uil uil-comment"></i>2</a></li>
|
|
</ul>
|
|
<!-- /.post-meta -->
|
|
</div>
|
|
<!-- /.post-footer -->
|
|
</article>
|
|
<!-- /article -->
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
</div>
|
|
<!--/.swiper-wrapper -->
|
|
</div>
|
|
<!-- /.swiper -->
|
|
</div>
|
|
<!-- /.swiper-container -->
|
|
</div>
|
|
<!-- /.container -->
|
|
</section>
|
|
<!-- /section --></code></pre>
|
|
</div>
|
|
<!--/.code-wrapper-inner -->
|
|
</div>
|
|
<!--/.code-wrapper -->
|
|
</div>
|
|
<!--/.card-footer -->
|
|
</div>
|
|
<!--/.card -->
|
|
</div>
|
|
<!-- /.container -->
|
|
</section>
|
|
<!-- /section -->
|
|
<section id="snippet-2" class="wrapper bg-light wrapper-border">
|
|
<div class="container pt-15 pt-md-17 pb-13 pb-md-15">
|
|
<div class="row gx-lg-8 gx-xl-12 gy-10 gy-lg-0">
|
|
<div class="col-lg-4 mt-lg-2">
|
|
<h2 class="display-4 mb-3">Our Journal</h2>
|
|
<p class="lead fs-lg mb-6 pe-xxl-5">Here are the latest news from our blog that got the most attention.</p>
|
|
<a href="#" class="btn btn-soft-primary rounded-pill">View All News</a>
|
|
</div>
|
|
<!-- /column -->
|
|
<div class="col-lg-8">
|
|
<div class="swiper-container blog grid-view mb-6" data-margin="30" data-dots="true" data-items-md="2" data-items-xs="1">
|
|
<div class="swiper">
|
|
<div class="swiper-wrapper">
|
|
<div class="swiper-slide">
|
|
<article>
|
|
<figure class="overlay overlay-1 hover-scale rounded mb-5"><a href="#"> <img src="../../assets/img/photos/b4.jpg" alt="" /></a>
|
|
<figcaption>
|
|
<h5 class="from-top mb-0">Read More</h5>
|
|
</figcaption>
|
|
</figure>
|
|
<div class="post-header">
|
|
<div class="post-category text-line">
|
|
<a href="#" class="hover" rel="category">Coding</a>
|
|
</div>
|
|
<!-- /.post-category -->
|
|
<h2 class="post-title h3 mt-1 mb-3"><a class="link-dark" href="../../blog-post.html">Ligula tristique quis risus</a></h2>
|
|
</div>
|
|
<!-- /.post-header -->
|
|
<div class="post-footer">
|
|
<ul class="post-meta mb-0">
|
|
<li class="post-date"><i class="uil uil-calendar-alt"></i><span>14 Apr 2021</span></li>
|
|
<li class="post-comments"><a href="#"><i class="uil uil-comment"></i>4</a></li>
|
|
</ul>
|
|
<!-- /.post-meta -->
|
|
</div>
|
|
<!-- /.post-footer -->
|
|
</article>
|
|
<!-- /article -->
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide">
|
|
<article>
|
|
<figure class="overlay overlay-1 hover-scale rounded mb-5"><a href="#"> <img src="../../assets/img/photos/b5.jpg" alt="" /></a>
|
|
<figcaption>
|
|
<h5 class="from-top mb-0">Read More</h5>
|
|
</figcaption>
|
|
</figure>
|
|
<div class="post-header">
|
|
<div class="post-category text-line">
|
|
<a href="#" class="hover" rel="category">Workspace</a>
|
|
</div>
|
|
<!-- /.post-category -->
|
|
<h2 class="post-title h3 mt-1 mb-3"><a class="link-dark" href="../../blog-post.html">Nullam id dolor elit id nibh</a></h2>
|
|
</div>
|
|
<!-- /.post-header -->
|
|
<div class="post-footer">
|
|
<ul class="post-meta mb-0">
|
|
<li class="post-date"><i class="uil uil-calendar-alt"></i><span>29 Mar 2021</span></li>
|
|
<li class="post-comments"><a href="#"><i class="uil uil-comment"></i>3</a></li>
|
|
</ul>
|
|
<!-- /.post-meta -->
|
|
</div>
|
|
<!-- /.post-footer -->
|
|
</article>
|
|
<!-- /article -->
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide">
|
|
<article>
|
|
<figure class="overlay overlay-1 hover-scale rounded mb-5"><a href="#"> <img src="../../assets/img/photos/b6.jpg" alt="" /></a>
|
|
<figcaption>
|
|
<h5 class="from-top mb-0">Read More</h5>
|
|
</figcaption>
|
|
</figure>
|
|
<div class="post-header">
|
|
<div class="post-category text-line">
|
|
<a href="#" class="hover" rel="category">Meeting</a>
|
|
</div>
|
|
<!-- /.post-category -->
|
|
<h2 class="post-title h3 mt-1 mb-3"><a class="link-dark" href="../../blog-post.html">Ultricies fusce porta elit</a></h2>
|
|
</div>
|
|
<!-- /.post-header -->
|
|
<div class="post-footer">
|
|
<ul class="post-meta mb-0">
|
|
<li class="post-date"><i class="uil uil-calendar-alt"></i><span>26 Feb 2021</span></li>
|
|
<li class="post-comments"><a href="#"><i class="uil uil-comment"></i>6</a></li>
|
|
</ul>
|
|
<!-- /.post-meta -->
|
|
</div>
|
|
<!-- /.post-footer -->
|
|
</article>
|
|
<!-- /article -->
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide">
|
|
<article>
|
|
<figure class="overlay overlay-1 hover-scale rounded mb-5"><a href="#"> <img src="../../assets/img/photos/b7.jpg" alt="" /></a>
|
|
<figcaption>
|
|
<h5 class="from-top mb-0">Read More</h5>
|
|
</figcaption>
|
|
</figure>
|
|
<div class="post-header">
|
|
<div class="post-category text-line">
|
|
<a href="#" class="hover" rel="category">Business Tips</a>
|
|
</div>
|
|
<!-- /.post-category -->
|
|
<h2 class="post-title h3 mt-1 mb-3"><a class="link-dark" href="../../blog-post.html">Morbi leo risus porta eget</a></h2>
|
|
</div>
|
|
<div class="post-footer">
|
|
<ul class="post-meta mb-0">
|
|
<li class="post-date"><i class="uil uil-calendar-alt"></i><span>7 Jan 2021</span></li>
|
|
<li class="post-comments"><a href="#"><i class="uil uil-comment"></i>2</a></li>
|
|
</ul>
|
|
<!-- /.post-meta -->
|
|
</div>
|
|
<!-- /.post-footer -->
|
|
</article>
|
|
<!-- /article -->
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
</div>
|
|
<!--/.swiper-wrapper -->
|
|
</div>
|
|
<!-- /.swiper -->
|
|
</div>
|
|
<!-- /.swiper-container -->
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
<div class="container pb-15 pb-md-17">
|
|
<div class="card">
|
|
<div class="card-footer border-0 position-relative">
|
|
<a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-snippet-2">View example's code</a>
|
|
</div>
|
|
<!--/.card-footer -->
|
|
<div id="collapse-snippet-2" class="card-footer bg-dark p-0 accordion-collapse collapse">
|
|
<div class="code-wrapper">
|
|
<div class="code-wrapper-inner">
|
|
<pre class="language-html"><code><section class="wrapper bg-light">
|
|
<div class="container py-14 py-md-16">
|
|
<div class="row gx-lg-8 gx-xl-12 gy-10 gy-lg-0">
|
|
<div class="col-lg-4 mt-lg-2">
|
|
<h2 class="display-4 mb-3">Our Journal</h2>
|
|
<p class="lead fs-lg mb-6 pe-xxl-5">Here are the latest news from our blog that got the most attention.</p>
|
|
<a href="#" class="btn btn-soft-primary rounded-pill">View All News</a>
|
|
</div>
|
|
<!-- /column -->
|
|
<div class="col-lg-8">
|
|
<div class="swiper-container blog grid-view mb-6" data-margin="30" data-dots="true" data-items-md="2" data-items-xs="1">
|
|
<div class="swiper">
|
|
<div class="swiper-wrapper">
|
|
<div class="swiper-slide">
|
|
<article>
|
|
<figure class="overlay overlay-1 hover-scale rounded mb-5"><a href="#"> <img src="./assets/img/photos/b4.jpg" alt="" /></a>
|
|
<figcaption>
|
|
<h5 class="from-top mb-0">Read More</h5>
|
|
</figcaption>
|
|
</figure>
|
|
<div class="post-header">
|
|
<div class="post-category text-line">
|
|
<a href="#" class="hover" rel="category">Coding</a>
|
|
</div>
|
|
<!-- /.post-category -->
|
|
<h2 class="post-title h3 mt-1 mb-3"><a class="link-dark" href="./blog-post.html">Ligula tristique quis risus</a></h2>
|
|
</div>
|
|
<!-- /.post-header -->
|
|
<div class="post-footer">
|
|
<ul class="post-meta mb-0">
|
|
<li class="post-date"><i class="uil uil-calendar-alt"></i><span>14 Apr 2021</span></li>
|
|
<li class="post-comments"><a href="#"><i class="uil uil-comment"></i>4</a></li>
|
|
</ul>
|
|
<!-- /.post-meta -->
|
|
</div>
|
|
<!-- /.post-footer -->
|
|
</article>
|
|
<!-- /article -->
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide">
|
|
<article>
|
|
<figure class="overlay overlay-1 hover-scale rounded mb-5"><a href="#"> <img src="./assets/img/photos/b5.jpg" alt="" /></a>
|
|
<figcaption>
|
|
<h5 class="from-top mb-0">Read More</h5>
|
|
</figcaption>
|
|
</figure>
|
|
<div class="post-header">
|
|
<div class="post-category text-line">
|
|
<a href="#" class="hover" rel="category">Workspace</a>
|
|
</div>
|
|
<!-- /.post-category -->
|
|
<h2 class="post-title h3 mt-1 mb-3"><a class="link-dark" href="./blog-post.html">Nullam id dolor elit id nibh</a></h2>
|
|
</div>
|
|
<!-- /.post-header -->
|
|
<div class="post-footer">
|
|
<ul class="post-meta mb-0">
|
|
<li class="post-date"><i class="uil uil-calendar-alt"></i><span>29 Mar 2021</span></li>
|
|
<li class="post-comments"><a href="#"><i class="uil uil-comment"></i>3</a></li>
|
|
</ul>
|
|
<!-- /.post-meta -->
|
|
</div>
|
|
<!-- /.post-footer -->
|
|
</article>
|
|
<!-- /article -->
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide">
|
|
<article>
|
|
<figure class="overlay overlay-1 hover-scale rounded mb-5"><a href="#"> <img src="./assets/img/photos/b6.jpg" alt="" /></a>
|
|
<figcaption>
|
|
<h5 class="from-top mb-0">Read More</h5>
|
|
</figcaption>
|
|
</figure>
|
|
<div class="post-header">
|
|
<div class="post-category text-line">
|
|
<a href="#" class="hover" rel="category">Meeting</a>
|
|
</div>
|
|
<!-- /.post-category -->
|
|
<h2 class="post-title h3 mt-1 mb-3"><a class="link-dark" href="./blog-post.html">Ultricies fusce porta elit</a></h2>
|
|
</div>
|
|
<!-- /.post-header -->
|
|
<div class="post-footer">
|
|
<ul class="post-meta mb-0">
|
|
<li class="post-date"><i class="uil uil-calendar-alt"></i><span>26 Feb 2021</span></li>
|
|
<li class="post-comments"><a href="#"><i class="uil uil-comment"></i>6</a></li>
|
|
</ul>
|
|
<!-- /.post-meta -->
|
|
</div>
|
|
<!-- /.post-footer -->
|
|
</article>
|
|
<!-- /article -->
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide">
|
|
<article>
|
|
<figure class="overlay overlay-1 hover-scale rounded mb-5"><a href="#"> <img src="./assets/img/photos/b7.jpg" alt="" /></a>
|
|
<figcaption>
|
|
<h5 class="from-top mb-0">Read More</h5>
|
|
</figcaption>
|
|
</figure>
|
|
<div class="post-header">
|
|
<div class="post-category text-line">
|
|
<a href="#" class="hover" rel="category">Business Tips</a>
|
|
</div>
|
|
<!-- /.post-category -->
|
|
<h2 class="post-title h3 mt-1 mb-3"><a class="link-dark" href="./blog-post.html">Morbi leo risus porta eget</a></h2>
|
|
</div>
|
|
<div class="post-footer">
|
|
<ul class="post-meta mb-0">
|
|
<li class="post-date"><i class="uil uil-calendar-alt"></i><span>7 Jan 2021</span></li>
|
|
<li class="post-comments"><a href="#"><i class="uil uil-comment"></i>2</a></li>
|
|
</ul>
|
|
<!-- /.post-meta -->
|
|
</div>
|
|
<!-- /.post-footer -->
|
|
</article>
|
|
<!-- /article -->
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
</div>
|
|
<!--/.swiper-wrapper -->
|
|
</div>
|
|
<!-- /.swiper -->
|
|
</div>
|
|
<!-- /.swiper-container -->
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
</section>
|
|
<!-- /section --></code></pre>
|
|
</div>
|
|
<!--/.code-wrapper-inner -->
|
|
</div>
|
|
<!--/.code-wrapper -->
|
|
</div>
|
|
<!--/.card-footer -->
|
|
</div>
|
|
<!--/.card -->
|
|
</div>
|
|
<!-- /.container -->
|
|
</section>
|
|
<!-- /section -->
|
|
<section id="snippet-3" class="wrapper bg-light wrapper-border">
|
|
<div class="container pt-15 pt-md-17 pb-13 pb-md-15">
|
|
<div class="row">
|
|
<div class="col-lg-9 col-xl-8 col-xxl-7 mx-auto">
|
|
<h2 class="fs-15 text-uppercase text-primary text-center">Our News</h2>
|
|
<h3 class="display-4 mb-6 text-center">Here are the latest company news from our blog that got the most attention.</h3>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
<div class="position-relative">
|
|
<div class="shape bg-dot primary rellax w-17 h-20" data-rellax-speed="1" style="top: 0; left: -1.7rem;"></div>
|
|
<div class="swiper-container dots-closer blog grid-view mb-6" data-margin="0" data-dots="true" data-items-xl="3" data-items-md="2" data-items-xs="1">
|
|
<div class="swiper">
|
|
<div class="swiper-wrapper">
|
|
<div class="swiper-slide">
|
|
<div class="item-inner">
|
|
<article>
|
|
<div class="card">
|
|
<figure class="card-img-top overlay overlay-1 hover-scale"><a href="#"> <img src="../../assets/img/photos/b4.jpg" alt="" /></a>
|
|
<figcaption>
|
|
<h5 class="from-top mb-0">Read More</h5>
|
|
</figcaption>
|
|
</figure>
|
|
<div class="card-body">
|
|
<div class="post-header">
|
|
<div class="post-category text-line">
|
|
<a href="#" class="hover" rel="category">Coding</a>
|
|
</div>
|
|
<!-- /.post-category -->
|
|
<h2 class="post-title h3 mt-1 mb-3"><a class="link-dark" href="../../blog-post.html">Ligula tristique quis risus</a></h2>
|
|
</div>
|
|
<!-- /.post-header -->
|
|
<div class="post-content">
|
|
<p>Mauris convallis non ligula non interdum. Gravida vulputate convallis tempus vestibulum cras imperdiet nun eu dolor.</p>
|
|
</div>
|
|
<!-- /.post-content -->
|
|
</div>
|
|
<!--/.card-body -->
|
|
<div class="card-footer">
|
|
<ul class="post-meta d-flex mb-0">
|
|
<li class="post-date"><i class="uil uil-calendar-alt"></i><span>14 Apr 2021</span></li>
|
|
<li class="post-comments"><a href="#"><i class="uil uil-comment"></i>4</a></li>
|
|
<li class="post-likes ms-auto"><a href="#"><i class="uil uil-heart-alt"></i>5</a></li>
|
|
</ul>
|
|
<!-- /.post-meta -->
|
|
</div>
|
|
<!-- /.card-footer -->
|
|
</div>
|
|
<!-- /.card -->
|
|
</article>
|
|
<!-- /article -->
|
|
</div>
|
|
<!-- /.item-inner -->
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide">
|
|
<div class="item-inner">
|
|
<article>
|
|
<div class="card">
|
|
<figure class="card-img-top overlay overlay-1 hover-scale"><a href="#"> <img src="../../assets/img/photos/b5.jpg" alt="" /></a>
|
|
<figcaption>
|
|
<h5 class="from-top mb-0">Read More</h5>
|
|
</figcaption>
|
|
</figure>
|
|
<div class="card-body">
|
|
<div class="post-header">
|
|
<div class="post-category text-line">
|
|
<a href="#" class="hover" rel="category">Workspace</a>
|
|
</div>
|
|
<!-- /.post-category -->
|
|
<h2 class="post-title h3 mt-1 mb-3"><a class="link-dark" href="../../blog-post.html">Nullam id dolor elit id nibh</a></h2>
|
|
</div>
|
|
<!-- /.post-header -->
|
|
<div class="post-content">
|
|
<p>Mauris convallis non ligula non interdum. Gravida vulputate convallis tempus vestibulum cras imperdiet nun eu dolor.</p>
|
|
</div>
|
|
<!-- /.post-content -->
|
|
</div>
|
|
<!--/.card-body -->
|
|
<div class="card-footer">
|
|
<ul class="post-meta d-flex mb-0">
|
|
<li class="post-date"><i class="uil uil-calendar-alt"></i><span>29 Mar 2021</span></li>
|
|
<li class="post-comments"><a href="#"><i class="uil uil-comment"></i>3</a></li>
|
|
<li class="post-likes ms-auto"><a href="#"><i class="uil uil-heart-alt"></i>3</a></li>
|
|
</ul>
|
|
<!-- /.post-meta -->
|
|
</div>
|
|
<!-- /.card-footer -->
|
|
</div>
|
|
<!-- /.card -->
|
|
</article>
|
|
<!-- /article -->
|
|
</div>
|
|
<!-- /.item-inner -->
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide">
|
|
<div class="item-inner">
|
|
<article>
|
|
<div class="card">
|
|
<figure class="card-img-top overlay overlay-1 hover-scale"><a href="#"> <img src="../../assets/img/photos/b6.jpg" alt="" /></a>
|
|
<figcaption>
|
|
<h5 class="from-top mb-0">Read More</h5>
|
|
</figcaption>
|
|
</figure>
|
|
<div class="card-body">
|
|
<div class="post-header">
|
|
<div class="post-category text-line">
|
|
<a href="#" class="hover" rel="category">Meeting</a>
|
|
</div>
|
|
<!-- /.post-category -->
|
|
<h2 class="post-title h3 mt-1 mb-3"><a class="link-dark" href="../../blog-post.html">Ultricies fusce porta elit</a></h2>
|
|
</div>
|
|
<!-- /.post-header -->
|
|
<div class="post-content">
|
|
<p>Mauris convallis non ligula non interdum. Gravida vulputate convallis tempus vestibulum cras imperdiet nun eu dolor.</p>
|
|
</div>
|
|
<!-- /.post-content -->
|
|
</div>
|
|
<!--/.card-body -->
|
|
<div class="card-footer">
|
|
<ul class="post-meta d-flex mb-0">
|
|
<li class="post-date"><i class="uil uil-calendar-alt"></i><span>26 Feb 2021</span></li>
|
|
<li class="post-comments"><a href="#"><i class="uil uil-comment"></i>6</a></li>
|
|
<li class="post-likes ms-auto"><a href="#"><i class="uil uil-heart-alt"></i>3</a></li>
|
|
</ul>
|
|
<!-- /.post-meta -->
|
|
</div>
|
|
<!-- /.card-footer -->
|
|
</div>
|
|
<!-- /.card -->
|
|
</article>
|
|
<!-- /article -->
|
|
</div>
|
|
<!-- /.item-inner -->
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide">
|
|
<div class="item-inner">
|
|
<article>
|
|
<div class="card">
|
|
<figure class="card-img-top overlay overlay-1 hover-scale"><a href="#"> <img src="../../assets/img/photos/b7.jpg" alt="" /></a>
|
|
<figcaption>
|
|
<h5 class="from-top mb-0">Read More</h5>
|
|
</figcaption>
|
|
</figure>
|
|
<div class="card-body">
|
|
<div class="post-header">
|
|
<div class="post-category text-line">
|
|
<a href="#" class="hover" rel="category">Business Tips</a>
|
|
</div>
|
|
<!-- /.post-category -->
|
|
<h2 class="post-title h3 mt-1 mb-3"><a class="link-dark" href="../../blog-post.html">Morbi leo risus porta eget</a></h2>
|
|
</div>
|
|
<!-- /.post-header -->
|
|
<div class="post-content">
|
|
<p>Mauris convallis non ligula non interdum. Gravida vulputate convallis tempus vestibulum cras imperdiet nun eu dolor.</p>
|
|
</div>
|
|
<!-- /.post-content -->
|
|
</div>
|
|
<!--/.card-body -->
|
|
<div class="card-footer">
|
|
<ul class="post-meta d-flex mb-0">
|
|
<li class="post-date"><i class="uil uil-calendar-alt"></i><span>7 Jan 2021</span></li>
|
|
<li class="post-comments"><a href="#"><i class="uil uil-comment"></i>2</a></li>
|
|
<li class="post-likes ms-auto"><a href="#"><i class="uil uil-heart-alt"></i>5</a></li>
|
|
</ul>
|
|
<!-- /.post-meta -->
|
|
</div>
|
|
<!-- /.card-footer -->
|
|
</div>
|
|
<!-- /.card -->
|
|
</article>
|
|
<!-- /article -->
|
|
</div>
|
|
<!-- /.item-inner -->
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
</div>
|
|
<!--/.swiper-wrapper -->
|
|
</div>
|
|
<!-- /.swiper -->
|
|
</div>
|
|
<!-- /.swiper-container -->
|
|
</div>
|
|
<!-- /.position-relative -->
|
|
</div>
|
|
<!-- /.container -->
|
|
<div class="container pb-15 pb-md-17">
|
|
<div class="card">
|
|
<div class="card-footer border-0 position-relative">
|
|
<a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-snippet-3">View example's code</a>
|
|
</div>
|
|
<!--/.card-footer -->
|
|
<div id="collapse-snippet-3" class="card-footer bg-dark p-0 accordion-collapse collapse">
|
|
<div class="code-wrapper">
|
|
<div class="code-wrapper-inner">
|
|
<pre class="language-html"><code><section class="wrapper bg-light">
|
|
<div class="container py-14 py-md-16">
|
|
<div class="row">
|
|
<div class="col-lg-9 col-xl-8 col-xxl-7 mx-auto">
|
|
<h2 class="fs-15 text-uppercase text-primary text-center">Our News</h2>
|
|
<h3 class="display-4 mb-6 text-center">Here are the latest company news from our blog that got the most attention.</h3>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
<div class="position-relative">
|
|
<div class="shape bg-dot primary rellax w-17 h-20" data-rellax-speed="1" style="top: 0; left: -1.7rem;"></div>
|
|
<div class="swiper-container dots-closer blog grid-view mb-6" data-margin="0" data-dots="true" data-items-xl="3" data-items-md="2" data-items-xs="1">
|
|
<div class="swiper">
|
|
<div class="swiper-wrapper">
|
|
<div class="swiper-slide">
|
|
<div class="item-inner">
|
|
<article>
|
|
<div class="card">
|
|
<figure class="card-img-top overlay overlay-1 hover-scale"><a href="#"> <img src="./assets/img/photos/b4.jpg" alt="" /></a>
|
|
<figcaption>
|
|
<h5 class="from-top mb-0">Read More</h5>
|
|
</figcaption>
|
|
</figure>
|
|
<div class="card-body">
|
|
<div class="post-header">
|
|
<div class="post-category text-line">
|
|
<a href="#" class="hover" rel="category">Coding</a>
|
|
</div>
|
|
<!-- /.post-category -->
|
|
<h2 class="post-title h3 mt-1 mb-3"><a class="link-dark" href="./blog-post.html">Ligula tristique quis risus</a></h2>
|
|
</div>
|
|
<!-- /.post-header -->
|
|
<div class="post-content">
|
|
<p>Mauris convallis non ligula non interdum. Gravida vulputate convallis tempus vestibulum cras imperdiet nun eu dolor.</p>
|
|
</div>
|
|
<!-- /.post-content -->
|
|
</div>
|
|
<!--/.card-body -->
|
|
<div class="card-footer">
|
|
<ul class="post-meta d-flex mb-0">
|
|
<li class="post-date"><i class="uil uil-calendar-alt"></i><span>14 Apr 2021</span></li>
|
|
<li class="post-comments"><a href="#"><i class="uil uil-comment"></i>4</a></li>
|
|
<li class="post-likes ms-auto"><a href="#"><i class="uil uil-heart-alt"></i>5</a></li>
|
|
</ul>
|
|
<!-- /.post-meta -->
|
|
</div>
|
|
<!-- /.card-footer -->
|
|
</div>
|
|
<!-- /.card -->
|
|
</article>
|
|
<!-- /article -->
|
|
</div>
|
|
<!-- /.item-inner -->
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide">
|
|
<div class="item-inner">
|
|
<article>
|
|
<div class="card">
|
|
<figure class="card-img-top overlay overlay-1 hover-scale"><a href="#"> <img src="./assets/img/photos/b5.jpg" alt="" /></a>
|
|
<figcaption>
|
|
<h5 class="from-top mb-0">Read More</h5>
|
|
</figcaption>
|
|
</figure>
|
|
<div class="card-body">
|
|
<div class="post-header">
|
|
<div class="post-category text-line">
|
|
<a href="#" class="hover" rel="category">Workspace</a>
|
|
</div>
|
|
<!-- /.post-category -->
|
|
<h2 class="post-title h3 mt-1 mb-3"><a class="link-dark" href="./blog-post.html">Nullam id dolor elit id nibh</a></h2>
|
|
</div>
|
|
<!-- /.post-header -->
|
|
<div class="post-content">
|
|
<p>Mauris convallis non ligula non interdum. Gravida vulputate convallis tempus vestibulum cras imperdiet nun eu dolor.</p>
|
|
</div>
|
|
<!-- /.post-content -->
|
|
</div>
|
|
<!--/.card-body -->
|
|
<div class="card-footer">
|
|
<ul class="post-meta d-flex mb-0">
|
|
<li class="post-date"><i class="uil uil-calendar-alt"></i><span>29 Mar 2021</span></li>
|
|
<li class="post-comments"><a href="#"><i class="uil uil-comment"></i>3</a></li>
|
|
<li class="post-likes ms-auto"><a href="#"><i class="uil uil-heart-alt"></i>3</a></li>
|
|
</ul>
|
|
<!-- /.post-meta -->
|
|
</div>
|
|
<!-- /.card-footer -->
|
|
</div>
|
|
<!-- /.card -->
|
|
</article>
|
|
<!-- /article -->
|
|
</div>
|
|
<!-- /.item-inner -->
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide">
|
|
<div class="item-inner">
|
|
<article>
|
|
<div class="card">
|
|
<figure class="card-img-top overlay overlay-1 hover-scale"><a href="#"> <img src="./assets/img/photos/b6.jpg" alt="" /></a>
|
|
<figcaption>
|
|
<h5 class="from-top mb-0">Read More</h5>
|
|
</figcaption>
|
|
</figure>
|
|
<div class="card-body">
|
|
<div class="post-header">
|
|
<div class="post-category text-line">
|
|
<a href="#" class="hover" rel="category">Meeting</a>
|
|
</div>
|
|
<!-- /.post-category -->
|
|
<h2 class="post-title h3 mt-1 mb-3"><a class="link-dark" href="./blog-post.html">Ultricies fusce porta elit</a></h2>
|
|
</div>
|
|
<!-- /.post-header -->
|
|
<div class="post-content">
|
|
<p>Mauris convallis non ligula non interdum. Gravida vulputate convallis tempus vestibulum cras imperdiet nun eu dolor.</p>
|
|
</div>
|
|
<!-- /.post-content -->
|
|
</div>
|
|
<!--/.card-body -->
|
|
<div class="card-footer">
|
|
<ul class="post-meta d-flex mb-0">
|
|
<li class="post-date"><i class="uil uil-calendar-alt"></i><span>26 Feb 2021</span></li>
|
|
<li class="post-comments"><a href="#"><i class="uil uil-comment"></i>6</a></li>
|
|
<li class="post-likes ms-auto"><a href="#"><i class="uil uil-heart-alt"></i>3</a></li>
|
|
</ul>
|
|
<!-- /.post-meta -->
|
|
</div>
|
|
<!-- /.card-footer -->
|
|
</div>
|
|
<!-- /.card -->
|
|
</article>
|
|
<!-- /article -->
|
|
</div>
|
|
<!-- /.item-inner -->
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide">
|
|
<div class="item-inner">
|
|
<article>
|
|
<div class="card">
|
|
<figure class="card-img-top overlay overlay-1 hover-scale"><a href="#"> <img src="./assets/img/photos/b7.jpg" alt="" /></a>
|
|
<figcaption>
|
|
<h5 class="from-top mb-0">Read More</h5>
|
|
</figcaption>
|
|
</figure>
|
|
<div class="card-body">
|
|
<div class="post-header">
|
|
<div class="post-category text-line">
|
|
<a href="#" class="hover" rel="category">Business Tips</a>
|
|
</div>
|
|
<!-- /.post-category -->
|
|
<h2 class="post-title h3 mt-1 mb-3"><a class="link-dark" href="./blog-post.html">Morbi leo risus porta eget</a></h2>
|
|
</div>
|
|
<!-- /.post-header -->
|
|
<div class="post-content">
|
|
<p>Mauris convallis non ligula non interdum. Gravida vulputate convallis tempus vestibulum cras imperdiet nun eu dolor.</p>
|
|
</div>
|
|
<!-- /.post-content -->
|
|
</div>
|
|
<!--/.card-body -->
|
|
<div class="card-footer">
|
|
<ul class="post-meta d-flex mb-0">
|
|
<li class="post-date"><i class="uil uil-calendar-alt"></i><span>7 Jan 2021</span></li>
|
|
<li class="post-comments"><a href="#"><i class="uil uil-comment"></i>2</a></li>
|
|
<li class="post-likes ms-auto"><a href="#"><i class="uil uil-heart-alt"></i>5</a></li>
|
|
</ul>
|
|
<!-- /.post-meta -->
|
|
</div>
|
|
<!-- /.card-footer -->
|
|
</div>
|
|
<!-- /.card -->
|
|
</article>
|
|
<!-- /article -->
|
|
</div>
|
|
<!-- /.item-inner -->
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
</div>
|
|
<!--/.swiper-wrapper -->
|
|
</div>
|
|
<!-- /.swiper -->
|
|
</div>
|
|
<!-- /.swiper-container -->
|
|
</div>
|
|
<!-- /.position-relative -->
|
|
</div>
|
|
<!-- /.container -->
|
|
</section>
|
|
<!-- /section --></code></pre>
|
|
</div>
|
|
<!--/.code-wrapper-inner -->
|
|
</div>
|
|
<!--/.code-wrapper -->
|
|
</div>
|
|
<!--/.card-footer -->
|
|
</div>
|
|
<!--/.card -->
|
|
</div>
|
|
<!-- /.container -->
|
|
</section>
|
|
<!-- /section -->
|
|
<section id="snippet-4" class="wrapper bg-light wrapper-border">
|
|
<div class="container pt-15 pt-md-17 pb-13 pb-md-15">
|
|
<div class="row align-items-center mb-10">
|
|
<div class="col-md-8 col-lg-9 col-xl-8 col-xxl-7 pe-xl-20">
|
|
<h2 class="display-4 mb-0">Company news from our blog that got the most attention.</h2>
|
|
</div>
|
|
<!--/column -->
|
|
<div class="col-md-4 col-lg-3 ms-md-auto text-md-end mt-5 mt-md-0">
|
|
<a href="#" class="btn btn-soft-primary rounded-pill mb-0">View All News</a>
|
|
</div>
|
|
<!--/column -->
|
|
</div>
|
|
<!--/.row -->
|
|
<div class="row gx-lg-8 gx-xl-11 gy-10 blog grid-view">
|
|
<div class="col-lg-8">
|
|
<article class="post">
|
|
<div class="post-slider rounded mb-6">
|
|
<div class="swiper-container dots-over" data-margin="5" data-dots="true">
|
|
<div class="swiper">
|
|
<div class="swiper-wrapper">
|
|
<div class="swiper-slide"><img src="../../assets/img/photos/b2.jpg" alt="" /></div>
|
|
<div class="swiper-slide"><img src="../../assets/img/photos/b3.jpg" alt="" /></div>
|
|
</div>
|
|
<!--/.swiper-wrapper -->
|
|
</div>
|
|
<!-- /.swiper -->
|
|
</div>
|
|
<!-- /.swiper-container -->
|
|
</div>
|
|
<!-- /.post-slider -->
|
|
<div class="post-header mb-5">
|
|
<div class="post-category text-line">
|
|
<a href="#" class="hover" rel="category">Ideas</a>
|
|
</div>
|
|
<!-- /.post-category -->
|
|
<h2 class="post-title mt-1 mb-4"><a class="link-dark" href="../../blog-post.html">Fringilla Ligula Pharetra Amet</a></h2>
|
|
<ul class="post-meta mb-0">
|
|
<li class="post-date"><i class="uil uil-calendar-alt"></i><span>5 Jul 2021</span></li>
|
|
<li class="post-author"><a href="#"><i class="uil uil-user"></i><span>By Sandbox</span></a></li>
|
|
<li class="post-comments"><a href="#"><i class="uil uil-comment"></i>3<span> Comments</span></a></li>
|
|
</ul>
|
|
<!-- /.post-meta -->
|
|
</div>
|
|
<!-- /.post-header -->
|
|
<div class="post-content">
|
|
<p>Maecenas sed diam eget risus varius blandit sit amet non magna. Curabitur blandit tempus porttitor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Maecenas sed diam eget risus varius blandit sit amet non magna. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
|
|
</div>
|
|
<!-- /.post-content -->
|
|
</article>
|
|
<!-- /.post -->
|
|
</div>
|
|
<!-- /column -->
|
|
<div class="col-lg-4">
|
|
<div class="row gy-10">
|
|
<div class="col-md-6 col-lg-12">
|
|
<article class="post">
|
|
<figure class="overlay overlay-1 hover-scale rounded mb-5"><a href="#"> <img src="../../assets/img/photos/b1.jpg" alt="" /></a>
|
|
<figcaption>
|
|
<h5 class="from-top mb-0">Read More</h5>
|
|
</figcaption>
|
|
</figure>
|
|
<div class="post-header">
|
|
<div class="post-category text-line">
|
|
<a href="#" class="hover" rel="category">Coding</a>
|
|
</div>
|
|
<!-- /.post-category -->
|
|
<h2 class="post-title h3 mt-1 mb-3"><a class="link-dark" href="../../blog-post.html">Ligula tristique quis risus</a></h2>
|
|
</div>
|
|
<!-- /.post-header -->
|
|
<div class="post-footer">
|
|
<ul class="post-meta">
|
|
<li class="post-date"><i class="uil uil-calendar-alt"></i><span>14 Apr 2021</span></li>
|
|
<li class="post-comments"><a href="#"><i class="uil uil-comment"></i>4</a></li>
|
|
</ul>
|
|
<!-- /.post-meta -->
|
|
</div>
|
|
<!-- /.post-footer -->
|
|
</article>
|
|
<!-- /.post -->
|
|
</div>
|
|
<!-- /column -->
|
|
<div class="col-md-6 col-lg-12">
|
|
<article class="post">
|
|
<figure class="overlay overlay-1 hover-scale rounded mb-5"><a href="#"> <img src="../../assets/img/photos/b4.jpg" alt="" /></a>
|
|
<figcaption>
|
|
<h5 class="from-top mb-0">Read More</h5>
|
|
</figcaption>
|
|
</figure>
|
|
<div class="post-header">
|
|
<div class="post-category text-line">
|
|
<a href="#" class="hover" rel="category">Workspace</a>
|
|
</div>
|
|
<!-- /.post-category -->
|
|
<h2 class="post-title h3 mt-1 mb-3"><a class="link-dark" href="../../blog-post.html">Nullam id dolor elit id nibh</a></h2>
|
|
</div>
|
|
<!-- /.post-header -->
|
|
<div class="post-footer">
|
|
<ul class="post-meta">
|
|
<li class="post-date"><i class="uil uil-calendar-alt"></i><span>29 Mar 2021</span></li>
|
|
<li class="post-comments"><a href="#"><i class="uil uil-comment"></i>3</a></li>
|
|
</ul>
|
|
<!-- /.post-meta -->
|
|
</div>
|
|
<!-- /.post-footer -->
|
|
</article>
|
|
<!-- /.post -->
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
<div class="container pb-15 pb-md-17">
|
|
<div class="card">
|
|
<div class="card-footer border-0 position-relative">
|
|
<a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-snippet-4">View example's code</a>
|
|
</div>
|
|
<!--/.card-footer -->
|
|
<div id="collapse-snippet-4" class="card-footer bg-dark p-0 accordion-collapse collapse">
|
|
<div class="code-wrapper">
|
|
<div class="code-wrapper-inner">
|
|
<pre class="language-html"><code><section class="wrapper bg-light">
|
|
<div class="container py-14 py-md-16">
|
|
<div class="row align-items-center mb-10">
|
|
<div class="col-md-8 col-lg-9 col-xl-8 col-xxl-7 pe-xl-20">
|
|
<h2 class="display-4 mb-0">Company news from our blog that got the most attention.</h2>
|
|
</div>
|
|
<!--/column -->
|
|
<div class="col-md-4 col-lg-3 ms-md-auto text-md-end mt-5 mt-md-0">
|
|
<a href="#" class="btn btn-soft-primary rounded-pill mb-0">View All News</a>
|
|
</div>
|
|
<!--/column -->
|
|
</div>
|
|
<!--/.row -->
|
|
<div class="row gx-lg-8 gx-xl-11 gy-10 blog grid-view">
|
|
<div class="col-lg-8">
|
|
<article class="post">
|
|
<div class="post-slider rounded mb-6">
|
|
<div class="swiper-container dots-over" data-margin="5" data-dots="true">
|
|
<div class="swiper">
|
|
<div class="swiper-wrapper">
|
|
<div class="swiper-slide"><img src="./assets/img/photos/b2.jpg" alt="" /></div>
|
|
<div class="swiper-slide"><img src="./assets/img/photos/b3.jpg" alt="" /></div>
|
|
</div>
|
|
<!--/.swiper-wrapper -->
|
|
</div>
|
|
<!-- /.swiper -->
|
|
</div>
|
|
<!-- /.swiper-container -->
|
|
</div>
|
|
<!-- /.post-slider -->
|
|
<div class="post-header mb-5">
|
|
<div class="post-category text-line">
|
|
<a href="#" class="hover" rel="category">Ideas</a>
|
|
</div>
|
|
<!-- /.post-category -->
|
|
<h2 class="post-title mt-1 mb-4"><a class="link-dark" href="./blog-post.html">Fringilla Ligula Pharetra Amet</a></h2>
|
|
<ul class="post-meta mb-0">
|
|
<li class="post-date"><i class="uil uil-calendar-alt"></i><span>5 Jul 2021</span></li>
|
|
<li class="post-author"><a href="#"><i class="uil uil-user"></i><span>By Sandbox</span></a></li>
|
|
<li class="post-comments"><a href="#"><i class="uil uil-comment"></i>3<span> Comments</span></a></li>
|
|
</ul>
|
|
<!-- /.post-meta -->
|
|
</div>
|
|
<!-- /.post-header -->
|
|
<div class="post-content">
|
|
<p>Maecenas sed diam eget risus varius blandit sit amet non magna. Curabitur blandit tempus porttitor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Maecenas sed diam eget risus varius blandit sit amet non magna. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
|
|
</div>
|
|
<!-- /.post-content -->
|
|
</article>
|
|
<!-- /.post -->
|
|
</div>
|
|
<!-- /column -->
|
|
<div class="col-lg-4">
|
|
<div class="row gy-10">
|
|
<div class="col-md-6 col-lg-12">
|
|
<article class="post">
|
|
<figure class="overlay overlay-1 hover-scale rounded mb-5"><a href="#"> <img src="./assets/img/photos/b1.jpg" alt="" /></a>
|
|
<figcaption>
|
|
<h5 class="from-top mb-0">Read More</h5>
|
|
</figcaption>
|
|
</figure>
|
|
<div class="post-header">
|
|
<div class="post-category text-line">
|
|
<a href="#" class="hover" rel="category">Coding</a>
|
|
</div>
|
|
<!-- /.post-category -->
|
|
<h2 class="post-title h3 mt-1 mb-3"><a class="link-dark" href="./blog-post.html">Ligula tristique quis risus</a></h2>
|
|
</div>
|
|
<!-- /.post-header -->
|
|
<div class="post-footer">
|
|
<ul class="post-meta">
|
|
<li class="post-date"><i class="uil uil-calendar-alt"></i><span>14 Apr 2021</span></li>
|
|
<li class="post-comments"><a href="#"><i class="uil uil-comment"></i>4</a></li>
|
|
</ul>
|
|
<!-- /.post-meta -->
|
|
</div>
|
|
<!-- /.post-footer -->
|
|
</article>
|
|
<!-- /.post -->
|
|
</div>
|
|
<!-- /column -->
|
|
<div class="col-md-6 col-lg-12">
|
|
<article class="post">
|
|
<figure class="overlay overlay-1 hover-scale rounded mb-5"><a href="#"> <img src="./assets/img/photos/b4.jpg" alt="" /></a>
|
|
<figcaption>
|
|
<h5 class="from-top mb-0">Read More</h5>
|
|
</figcaption>
|
|
</figure>
|
|
<div class="post-header">
|
|
<div class="post-category text-line">
|
|
<a href="#" class="hover" rel="category">Workspace</a>
|
|
</div>
|
|
<!-- /.post-category -->
|
|
<h2 class="post-title h3 mt-1 mb-3"><a class="link-dark" href="./blog-post.html">Nullam id dolor elit id nibh</a></h2>
|
|
</div>
|
|
<!-- /.post-header -->
|
|
<div class="post-footer">
|
|
<ul class="post-meta">
|
|
<li class="post-date"><i class="uil uil-calendar-alt"></i><span>29 Mar 2021</span></li>
|
|
<li class="post-comments"><a href="#"><i class="uil uil-comment"></i>3</a></li>
|
|
</ul>
|
|
<!-- /.post-meta -->
|
|
</div>
|
|
<!-- /.post-footer -->
|
|
</article>
|
|
<!-- /.post -->
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
</section>
|
|
<!-- /section --></code></pre>
|
|
</div>
|
|
<!--/.code-wrapper-inner -->
|
|
</div>
|
|
<!--/.code-wrapper -->
|
|
</div>
|
|
<!--/.card-footer -->
|
|
</div>
|
|
<!--/.card -->
|
|
</div>
|
|
<!-- /.container -->
|
|
</section>
|
|
<!-- /section -->
|
|
</div>
|
|
<!-- /.content-wrapper -->
|
|
<section class="wrapper bg-dark text-white">
|
|
<div class="container pt-14 pt-md-16 text-center">
|
|
<div class="row">
|
|
<div class="col-md-10 col-lg-9 col-xl-8 col-xxl-7 mx-auto">
|
|
<h2 class="display-3 text-white mt-3 mb-3 px-lg-8">Think unique and be creative. Make a difference with Sandbox.</h2>
|
|
<p class="lead fs-lg mb-6">Everything you need to create your next unique and professional website, including impressive and ready-made blocks and pages.</p>
|
|
<a href="https://1.envato.market/NKGrx2" target="_blank" class="btn btn-lg btn-white rounded-pill mb-10">Buy Sandbox</a>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
<img class="img-fluid" src="../../assets/img/demos/f1.png" srcset="../../assets/img/demos/f1@2x.png 2x" alt="" />
|
|
</div>
|
|
<!-- /.container -->
|
|
</section>
|
|
<!-- /section -->
|
|
<div class="progress-wrap">
|
|
<svg class="progress-circle svg-content" width="100%" height="100%" viewBox="-1 -1 102 102">
|
|
<path d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
|
|
</svg>
|
|
</div>
|
|
<script src="../../assets/js/plugins.js"></script>
|
|
<script src="../../assets/js/theme.js"></script>
|
|
</body>
|
|
|
|
</html> |