Root Zanli
Home
Console
Upload
information
Create File
Create Folder
About
Tools
:
/
home
/
o5t6x7pgljbm
/
public_html
/
intuitionexchange.com
/
components
/
Filename :
blog-components.html
back
Copy
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Silicon UI Kit | Blog components</title> <!-- SEO Meta Tags --> <meta name="description" content="Silicon - Multipurpose Technology Bootstrap Template"> <meta name="keywords" content="bootstrap, business, creative agency, mobile app showcase, saas, fintech, finance, online courses, software, medical, conference landing, services, e-commerce, shopping cart, multipurpose, shop, ui kit, marketing, seo, landing, blog, portfolio, html5, css3, javascript, gallery, slider, touch, creative"> <meta name="author" content="Createx Studio"> <!-- Viewport --> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Favicon and Touch Icons --> <link rel="apple-touch-icon" sizes="180x180" href="../assets/favicon/apple-touch-icon.png"> <link rel="icon" type="image/png" sizes="32x32" href="../assets/favicon/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="../assets/favicon/favicon-16x16.png"> <link rel="manifest" href="../assets/favicon/site.webmanifest"> <link rel="mask-icon" href="../assets/favicon/safari-pinned-tab.svg" color="#6366f1"> <link rel="shortcut icon" href="../assets/favicon/favicon.ico"> <meta name="msapplication-TileColor" content="#080032"> <meta name="msapplication-config" content="../assets/favicon/browserconfig.xml"> <meta name="theme-color" content="#ffffff"> <!-- Vendor Styles --> <link rel="stylesheet" media="screen" href="../assets/vendor/boxicons/css/boxicons.min.css"/> <link rel="stylesheet" media="screen" href="../assets/vendor/swiper/swiper-bundle.min.css"/> <link rel="stylesheet" media="screen" href="../assets/vendor/prismjs/themes/prism.css"/> <link rel="stylesheet" media="screen" href="../assets/vendor/prismjs/plugins/toolbar/prism-toolbar.css"/> <link rel="stylesheet" media="screen" href="../assets/vendor/prismjs/plugins/line-numbers/prism-line-numbers.css"/> <!-- Main Theme Styles + Bootstrap --> <link rel="stylesheet" media="screen" href="../assets/css/theme.min.css"> <!-- Theme mode --> <script> let mode = window.localStorage.getItem('mode'), root = document.getElementsByTagName('html')[0]; if (mode !== null && mode === 'dark') { root.classList.add('dark-mode'); } else { root.classList.remove('dark-mode'); } </script> </head> <!-- Body --> <body data-bs-spy="scroll" data-bs-target="#jumpToNav" tabindex="0"> <!-- Navbar --> <header class="header navbar navbar-expand bg-light border-bottom border-light shadow fixed-top" data-scroll-header> <div class="container-fluid pe-lg-4"> <div class="d-flex align-items-center"> <a href="typography.html" class="navbar-brand flex-shrink-0 py-1 py-lg-2"> <img src="../assets/img/logo.svg" width="47" alt="Silicon"> Silicon </a> <span class="badge bg-warning">UI Kit</span> </div> <div class="d-flex align-items-center w-100"> <ul class="navbar-nav d-none d-lg-flex" style="padding-left: 11.75rem;"> <li class="nav-item"> <a href="../index.html" class="nav-link"> <i class="bx bx-desktop opacity-70 fs-lg me-1"></i> Live preview </a> </li> <li class="nav-item"> <a href="../docs/getting-started.html" class="nav-link"> <i class="bx bx-file opacity-70 fs-lg me-1"></i> Documentation </a> </li> </ul> <button type="button" class="navbar-toggler d-block d-lg-none ms-auto me-4" data-bs-toggle="offcanvas" data-bs-target="#componentsNav" aria-controls="componentsNav" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="form-check form-switch mode-switch pe-lg-1 ms-lg-auto" data-bs-toggle="mode"> <input type="checkbox" class="form-check-input" id="theme-mode"> <label class="form-check-label d-none d-sm-block d-lg-none d-xl-block" for="theme-mode">Light</label> <label class="form-check-label d-none d-sm-block d-lg-none d-xl-block" for="theme-mode">Dark</label> </div> <a href="https://themes.getbootstrap.com/product/silicon-business-technology-template-ui-kit/" class="btn btn-primary btn-sm fs-sm rounded ms-4 d-none d-lg-inline-flex" target="_blank" rel="noopener"> <i class="bx bx-cart fs-5 lh-1 me-1"></i> Buy now </a> </div> </div> </header> <!-- Main sidebar navigation --> <aside class="dark-mode"> <div id="componentsNav" class="offcanvas-lg offcanvas-start d-flex flex-column position-fixed top-0 start-0 vh-100 bg-dark border-end-lg" style="width: 21rem; z-index: 1045;"> <div class="offcanvas-header d-none d-lg-flex justify-content-start"> <a href="typography.html" class="navbar-brand text-dark d-none d-lg-flex py-0"> <img src="../assets/img/logo.svg" width="47" alt="Silicon"> Silicon </a> <span class="badge bg-warning d-none d-lg-inline-block">UI Kit</span> </div> <div class="offcanvas-header d-block d-lg-none border-bottom"> <div class="d-flex align-items-center justify-content-between mb-3"> <h5 class="d-lg-none mb-0">Menu</h5> <button type="button" class="btn-close d-lg-none" data-bs-dismiss="offcanvas" data-bs-target="#componentsNav"></button> </div> <div class="list-group list-group-flush mx-n4"> <a href="../index.html" class="list-group-item list-group-item-action d-flex align-items-center border-0 py-2 px-4"> <i class="bx bx-desktop fs-lg opacity-80 me-2"></i> Preview </a> <a href="../docs/getting-started.html" class="list-group-item list-group-item-action d-flex align-items-center border-0 py-2 px-4"> <i class="bx bx-file fs-lg opacity-80 me-2"></i> Documentation </a> </div> </div> <div class="offcanvas-body swiper scrollbar-hover overflow-hidden w-100 p-4" data-swiper-options='{ "direction": "vertical", "slidesPerView": "auto", "freeMode": true, "scrollbar": { "el": ".swiper-scrollbar" }, "mousewheel": true }'> <div class="swiper-wrapper"> <div class="swiper-slide h-auto"> <h3 class="fs-lg">Content</h3> <div class="list-group list-group-flush border-bottom pb-3 mb-4 mx-n4"> <a href="typography.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Typography</a> <a href="https://boxicons.com/" class="list-group-item list-group-item-action border-0 py-2 px-4" target="_blank" rel="noopener">Icon font</a> <a href="code.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Code</a> <a href="images.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Images & figures</a> <a href="tables.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Tables</a> </div> <h3 class="fs-lg">Components</h3> <div class="list-group list-group-flush border-bottom pb-3 mb-4 mx-n4"> <a href="accordion.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Accordion</a> <a href="alerts.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Alerts</a> <a href="audio-player.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Audio player</a> <a href="badges.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Badges</a> <a href="blog-components.html" class="list-group-item list-group-item-action border-0 py-2 px-4 active">Blog components</a> <a href="breadcrumb.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Breadcrumb</a> <a href="buttons.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Buttons</a> <a href="button-group.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Button group</a> <a href="cards.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Cards</a> <a href="carousel.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Carousel (Slider)</a> <a href="collapse.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Collapse</a> <a href="dropdowns.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Dropdowns</a> <a href="forms.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Forms</a> <a href="gallery.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Gallery (Lightbox)</a> <a href="image-comparison-slider.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Image comparison slider</a> <a href="input-group.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Input group</a> <a href="list-group.html" class="list-group-item list-group-item-action border-0 py-2 px-4">List group</a> <a href="modal.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Modal</a> <a href="navbar.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Navbar</a> <a href="offcanvas.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Offcanvas</a> <a href="pagination.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Pagination</a> <a href="parallax.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Parallax</a> <a href="pills.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Pills</a> <a href="placeholders.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Placeholders</a> <a href="popovers.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Popovers</a> <a href="portfolio-components.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Portfolio components</a> <a href="pricing.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Pricing</a> <a href="progress-bars.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Progress bars</a> <a href="social-buttons.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Social buttons</a> <a href="spinners.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Spinners</a> <a href="steps.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Steps</a> <a href="tabs.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Tabs</a> <a href="team.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Team</a> <a href="testimonials.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Testimonials / reviews</a> <a href="toasts.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Toasts</a> <a href="tooltips.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Tooltips</a> <a href="video-popup.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Video popup</a> </div> <h3 class="fs-lg">Utilities</h3> <div class="list-group list-group-flush mx-n4 pb-2"> <a href="https://getbootstrap.com/docs/5.2/utilities/background/" class="list-group-item list-group-item-action border-0 py-2 px-4" target="_blank" rel="noopener">Bootstrap</a> <a href="utilities.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Silicon</a> </div> </div> </div> <div class="swiper-scrollbar end-0"></div> </div> <div class="offcanvas-header border-top"> <a href="https://themes.getbootstrap.com/product/silicon-business-technology-template-ui-kit/" class="btn btn-primary w-100" target="_blank" rel="noopener"> <i class="bx bx-cart fs-4 lh-1 me-1"></i> Buy now </a> </div> </div> </aside> <!-- Page container --> <main class="docs-container pt-5"> <div class="container-fluid px-xxl-5 px-lg-4 pt-4 pt-lg-5 pb-2 pb-lg-4"> <!-- Page title --> <div class="d-sm-flex align-items-end justify-content-between ps-lg-2 ps-xxl-0 mt-2 mt-lg-0 pt-4 mb-n3"> <div class="me-4"> <h1 class="pb-1">Blog components</h1> <p class="text-muted fs-lg mb-2">Components that are related to the blog / news section of the website.</p> </div> <span class="badge bg-warning mb-2">Silicon component</span> </div> <!-- Post preview card: Vertical (grid) --> <section id="blog-card-vertical" class="border-bottom py-5 ps-lg-2 ps-xxl-0"> <h2 class="h4">Post preview card: Vertical (grid)</h2> <div class="d-table"> <ul class="nav nav-tabs-alt" role="tablist"> <li class="nav-item"> <a class="nav-link active" href="#preview1" data-bs-toggle="tab" role="tab" aria-controls="preview1" aria-selected="true"> <i class="bx bx-show-alt fs-base opacity-70 me-2"></i> Preview </a> </li> <li class="nav-item"> <a class="nav-link" href="#html1" data-bs-toggle="tab" role="tab" aria-controls="html1" aria-selected="false"> <i class="bx bx-code-alt fs-base opacity-70 me-2"></i> HTML </a> </li> </ul> </div> <div class="tab-content pt-1"> <div class="tab-pane fade show active" id="preview1" role="tabpanel"> <article class="card h-100 border-0 shadow-sm" style="max-width: 26rem;"> <div class="position-relative"> <a href="#" class="position-absolute top-0 start-0 w-100 h-100" aria-label="Read more"></a> <a href="#" class="btn btn-icon btn-light bg-white border-white btn-sm rounded-circle position-absolute top-0 end-0 zindex-5 me-3 mt-3" data-bs-toggle="tooltip" data-bs-placement="left" title="Read later"> <i class="bx bx-bookmark"></i> </a> <img src="../assets/img/blog/01.jpg" class="card-img-top" alt="Image"> </div> <div class="card-body pb-4"> <div class="d-flex align-items-center justify-content-between mb-3"> <a href="#" class="badge fs-sm text-nav bg-secondary text-decoration-none">Web design</a> <span class="fs-sm text-muted">May 19, 2021</span> </div> <h3 class="h5 mb-0"> <a href="#">5 Bad Landing Page Examples & How We Would Fix Them</a> </h3> </div> <div class="card-footer py-4"> <a href="#" class="d-flex align-items-center fw-bold text-dark text-decoration-none"> <img src="../assets/img/avatar/02.jpg" class="rounded-circle me-3" width="48" alt="Avatar"> Ralph Edwards </a> </div> </article> </div> <div class="tab-pane fade" id="html1" role="tabpanel"> <pre class="line-numbers"><code class="lang-html"><!-- Post preview card: Vertical layout --> <article class="card h-100 border-0 shadow-sm"> <div class="position-relative"> <a href="#" class="position-absolute top-0 start-0 w-100 h-100" aria-label="Read more"></a> <a href="#" class="btn btn-icon btn-light bg-white border-white btn-sm rounded-circle position-absolute top-0 end-0 zindex-5 me-3 mt-3" data-bs-toggle="tooltip" data-bs-placement="left" title="Read later"> <i class="bx bx-bookmark"></i> </a> <img src="assets/img/blog/01.jpg" class="card-img-top" alt="Image"> </div> <div class="card-body pb-4"> <div class="d-flex align-items-center justify-content-between mb-3"> <a href="#" class="badge fs-sm text-nav bg-secondary text-decoration-none">Web design</a> <span class="fs-sm text-muted">May 19, 2021</span> </div> <h3 class="h5 mb-0"> <a href="#">5 Bad Landing Page Examples & How We Would Fix Them</a> </h3> </div> <div class="card-footer py-4"> <a href="#" class="d-flex align-items-center fw-bold text-dark text-decoration-none"> <img src="assets/img/avatar/02.jpg" class="rounded-circle me-3" width="48" alt="Avatar"> Ralph Edwards </a> </div> </article></code></pre> </div> </div> </section> <!-- Post preview card: Horizontal (list) --> <section id="blog-card-horizontal" class="border-bottom py-5 ps-lg-2 ps-xxl-0"> <h2 class="h4">Post preview card: Horizontal (list)</h2> <div class="d-table"> <ul class="nav nav-tabs-alt" role="tablist"> <li class="nav-item"> <a class="nav-link active" href="#preview2" data-bs-toggle="tab" role="tab" aria-controls="preview2" aria-selected="true"> <i class="bx bx-show-alt fs-base opacity-70 me-2"></i> Preview </a> </li> <li class="nav-item"> <a class="nav-link" href="#html2" data-bs-toggle="tab" role="tab" aria-controls="html2" aria-selected="false"> <i class="bx bx-code-alt fs-base opacity-70 me-2"></i> HTML </a> </li> </ul> </div> <div class="tab-content pt-1"> <div class="tab-pane fade show active" id="preview2" role="tabpanel"> <article class="card border-0 shadow-sm overflow-hidden"> <div class="row g-0"> <div class="col-sm-4 position-relative bg-position-center bg-repeat-0 bg-size-cover" style="background-image: url(../assets/img/blog/09.jpg); min-height: 15rem;"> <a href="#" class="position-absolute top-0 start-0 w-100 h-100" aria-label="Read more"></a> <a href="#" class="btn btn-icon btn-light bg-white border-white btn-sm rounded-circle position-absolute top-0 end-0 zindex-5 me-3 mt-3" data-bs-toggle="tooltip" data-bs-placement="left" title="Read later"> <i class="bx bx-bookmark"></i> </a> </div> <div class="col-sm-8"> <div class="card-body"> <div class="d-flex align-items-center mb-3"> <a href="#" class="badge fs-sm text-nav bg-secondary text-decoration-none">Strategy</a> <span class="fs-sm text-muted border-start ps-3 ms-3">May 19, 2021</span> </div> <h3 class="h4"> <a href="#">This Long-Awaited Technology May Finally Change the World</a> </h3> <p>Sapien, nulla placerat in at. Vitae tincidunt quam ornare massa porttitor. Neque a vitae feugiat in sit habitant integer. Cursus et at pulvinar sed neque vitae. Aliquam vitae hac phasellus.</p> <hr class="my-4"> <div class="d-flex align-items-center justify-content-between"> <a href="#" class="d-flex align-items-center fw-bold text-dark text-decoration-none me-3"> <img src="../assets/img/avatar/03.jpg" class="rounded-circle me-3" width="48" alt="Avatar"> Esther Howard </a> <div class="d-flex align-items-center text-muted"> <div class="d-flex align-items-center me-3"> <i class="bx bx-like fs-lg me-1"></i> <span class="fs-sm">8</span> </div> <div class="d-flex align-items-center me-3"> <i class="bx bx-comment fs-lg me-1"></i> <span class="fs-sm">7</span> </div> <div class="d-flex align-items-center"> <i class="bx bx-share-alt fs-lg me-1"></i> <span class="fs-sm">4</span> </div> </div> </div> </div> </div> </div> </article> </div> <div class="tab-pane fade" id="html2" role="tabpanel"> <pre class="line-numbers"><code class="lang-html"><!-- Post preview card: Horizontal layout --> <article class="card border-0 shadow-sm overflow-hidden"> <div class="row g-0"> <div class="col-sm-4 position-relative bg-position-center bg-repeat-0 bg-size-cover" style="background-image: url(assets/img/blog/09.jpg); min-height: 15rem;"> <a href="#" class="position-absolute top-0 start-0 w-100 h-100" aria-label="Read more"></a> <a href="#" class="btn btn-icon btn-light bg-white border-white btn-sm rounded-circle position-absolute top-0 end-0 zindex-5 me-3 mt-3" data-bs-toggle="tooltip" data-bs-placement="left" title="Read later"> <i class="bx bx-bookmark"></i> </a> </div> <div class="col-sm-8"> <div class="card-body"> <div class="d-flex align-items-center mb-3"> <a href="#" class="badge fs-sm text-nav bg-secondary text-decoration-none">Strategy</a> <span class="fs-sm text-muted border-start ps-3 ms-3">May 19, 2021</span> </div> <h3 class="h4"> <a href="#">This Long-Awaited Technology May Finally Change the World</a> </h3> <p>Sapien, nulla placerat in at. Vitae tincidunt quam ornare massa porttitor. Neque a vitae feugiat in sit habitant integer. Cursus et at pulvinar sed neque vitae. Aliquam vitae hac phasellus.</p> <hr class="my-4"> <div class="d-flex align-items-center justify-content-between"> <a href="#" class="d-flex align-items-center fw-bold text-dark text-decoration-none me-3"> <img src="assets/img/avatar/03.jpg" class="rounded-circle me-3" width="48" alt="Avatar"> Esther Howard </a> <div class="d-flex align-items-center text-muted"> <div class="d-flex align-items-center me-3"> <i class="bx bx-like fs-lg me-1"></i> <span class="fs-sm">8</span> </div> <div class="d-flex align-items-center me-3"> <i class="bx bx-comment fs-lg me-1"></i> <span class="fs-sm">7</span> </div> <div class="d-flex align-items-center"> <i class="bx bx-share-alt fs-lg me-1"></i> <span class="fs-sm">4</span> </div> </div> </div> </div> </div> </div> </article></code></pre> </div> </div> </section> <!-- Alt post preview card: Vertical (grid) --> <section id="blog-card-vertical-alt" class="border-bottom py-5 ps-lg-2 ps-xxl-0"> <h2 class="h4">Alt post preview card: Vertical (grid)</h2> <div class="d-table"> <ul class="nav nav-tabs-alt" role="tablist"> <li class="nav-item"> <a class="nav-link active" href="#preview3" data-bs-toggle="tab" role="tab" aria-controls="preview3" aria-selected="true"> <i class="bx bx-show-alt fs-base opacity-70 me-2"></i> Preview </a> </li> <li class="nav-item"> <a class="nav-link" href="#html3" data-bs-toggle="tab" role="tab" aria-controls="html3" aria-selected="false"> <i class="bx bx-code-alt fs-base opacity-70 me-2"></i> HTML </a> </li> </ul> </div> <div class="tab-content pt-1"> <div class="tab-pane fade show active" id="preview3" role="tabpanel"> <div class="d-md-flex align-items-start"> <article class="card border-0 bg-transparent mb-5 mb-md-0 pe-md-3 me-md-4" style="max-width: 27rem;"> <div class="position-relative overflow-hidden rounded-3"> <a href="#" class="position-absolute top-0 start-0 w-100 h-100" aria-label="Read more"></a> <a href="#" class="btn btn-icon btn-light bg-white border-white btn-sm rounded-circle position-absolute top-0 end-0 zindex-5 me-3 mt-3" data-bs-toggle="tooltip" data-bs-placement="left" title="Read later"> <i class="bx bx-bookmark"></i> </a> <img src="../assets/img/blog/05.jpg" alt="Image"> </div> <div class="card-body px-0 pb-0"> <a href="#" class="badge fs-sm text-white bg-info shadow-info text-decoration-none mb-3">Marketing</a> <h3 class="h4"> <a href="#">Inclusive Marketing: Why and How Does it Work?</a> </h3> <p class="mb-4">Nunc aliquet scelerisque pellentesque imperdiet tortor elit, dictum. Tristique odio at dignissim viverra aliquet eleifend erat. Tellus, at arcu, egestas praesent.</p> <div class="d-flex align-items-center text-muted"> <div class="fs-sm border-end pe-3 me-3">Oct 9, 2021</div> <div class="d-flex align-items-center me-3"> <i class="bx bx-like fs-lg me-1"></i> <span class="fs-sm">5</span> </div> <div class="d-flex align-items-center me-3"> <i class="bx bx-comment fs-lg me-1"></i> <span class="fs-sm">0</span> </div> <div class="d-flex align-items-center"> <i class="bx bx-share-alt fs-lg me-1"></i> <span class="fs-sm">2</span> </div> </div> </div> </article> <article class="card w-100" style="max-width: 26rem;"> <div class="card-body"> <div class="d-flex justify-content-between mb-3"> <a href="#" class="badge fs-sm text-white bg-success shadow-success text-decoration-none">Gadgets</a> <a href="#" class="btn btn-icon btn-secondary btn-sm rounded-circle position-absolute top-0 end-0 zindex-5 me-3 mt-3" data-bs-toggle="tooltip" data-bs-placement="left" title="Read later"> <i class="bx bx-bookmark"></i> </a> </div> <h3 class="h4"> <a href="#">A Study on Smartwatch Design Qualities and People’s Preferences</a> </h3> <p class="mb-4">Dignissim varius vehicula sagittis, cursus purus, congue. Tempor aliquam ut ridiculus dolor nibh felis. Feugiat in ut neque pellentesque. Urna adipiscing sodales pretium, pretium ornare enim lacus, ultrices amet. Enim in facilisis sit scelerisque sit.</p> <div class="d-flex align-items-center text-muted"> <div class="fs-sm border-end pe-3 me-3">Sep 3, 2021</div> <div class="d-flex align-items-center me-3"> <i class="bx bx-like fs-lg me-1"></i> <span class="fs-sm">8</span> </div> <div class="d-flex align-items-center me-3"> <i class="bx bx-comment fs-lg me-1"></i> <span class="fs-sm">7</span> </div> <div class="d-flex align-items-center"> <i class="bx bx-share-alt fs-lg me-1"></i> <span class="fs-sm">4</span> </div> </div> </div> </article> </div> </div> <div class="tab-pane fade" id="html3" role="tabpanel"> <pre class="line-numbers"><code class="lang-html"><!-- Alternative post preview card: Vertical layout --> <article class="card border-0 bg-transparent"> <div class="position-relative overflow-hidden rounded-3"> <a href="#" class="position-absolute top-0 start-0 w-100 h-100" aria-label="Read more"></a> <a href="#" class="btn btn-icon btn-light bg-white border-white btn-sm rounded-circle position-absolute top-0 end-0 zindex-5 me-3 mt-3" data-bs-toggle="tooltip" data-bs-placement="left" title="Read later"> <i class="bx bx-bookmark"></i> </a> <img src="assets/img/blog/05.jpg" alt="Image"> </div> <div class="card-body px-0"> <a href="#" class="badge fs-sm text-white bg-info shadow-info text-decoration-none mb-3">Marketing</a> <h3 class="h4"> <a href="#">Inclusive Marketing: Why and How Does it Work?</a> </h3> <p class="mb-4">Nunc aliquet scelerisque pellentesque imperdiet tortor elit, dictum. Tristique odio at dignissim viverra aliquet eleifend erat. Tellus, at arcu, egestas praesent.</p> <div class="d-flex align-items-center text-muted"> <div class="fs-sm border-end pe-3 me-3">Oct 9, 2021</div> <div class="d-flex align-items-center me-3"> <i class="bx bx-like fs-lg me-1"></i> <span class="fs-sm">8</span> </div> <div class="d-flex align-items-center me-3"> <i class="bx bx-comment fs-lg me-1"></i> <span class="fs-sm">7</span> </div> <div class="d-flex align-items-center"> <i class="bx bx-share-alt fs-lg me-1"></i> <span class="fs-sm">4</span> </div> </div> </div> </article> <!-- Without image --> <article class="card"> <div class="card-body"> <div class="d-flex justify-content-between mb-3"> <a href="#" class="badge fs-sm text-white bg-success shadow-success text-decoration-none">Gadgets</a> <a href="#" class="btn btn-icon btn-secondary btn-sm rounded-circle position-absolute top-0 end-0 zindex-5 me-3 mt-3" data-bs-toggle="tooltip" data-bs-placement="left" title="Read later"> <i class="bx bx-bookmark"></i> </a> </div> <h3 class="h4"> <a href="#">A Study on Smartwatch Design Qualities and People’s Preferences</a> </h3> <p class="mb-4">Dignissim varius vehicula sagittis, cursus purus, congue. Tempor aliquam ut ridiculus dolor nibh felis. Feugiat in ut neque pellentesque. Urna adipiscing sodales pretium, pretium ornare enim lacus, ultrices amet. Enim in facilisis sit scelerisque sit.</p> <div class="d-flex align-items-center text-muted"> <div class="fs-sm border-end pe-3 me-3">Sep 3, 2021</div> <div class="d-flex align-items-center me-3"> <i class="bx bx-like fs-lg me-1"></i> <span class="fs-sm">8</span> </div> <div class="d-flex align-items-center me-3"> <i class="bx bx-comment fs-lg me-1"></i> <span class="fs-sm">7</span> </div> <div class="d-flex align-items-center"> <i class="bx bx-share-alt fs-lg me-1"></i> <span class="fs-sm">4</span> </div> </div> </div> </article></code></pre> </div> </div> </section> <!-- Alt post preview card: Horizontal (list) --> <section id="blog-card-horizontal-alt" class="border-bottom py-5 ps-lg-2 ps-xxl-0"> <h2 class="h4">Alt post preview card: Horizontal (list)</h2> <div class="d-table"> <ul class="nav nav-tabs-alt" role="tablist"> <li class="nav-item"> <a class="nav-link active" href="#preview4" data-bs-toggle="tab" role="tab" aria-controls="preview4" aria-selected="true"> <i class="bx bx-show-alt fs-base opacity-70 me-2"></i> Preview </a> </li> <li class="nav-item"> <a class="nav-link" href="#html4" data-bs-toggle="tab" role="tab" aria-controls="html4" aria-selected="false"> <i class="bx bx-code-alt fs-base opacity-70 me-2"></i> HTML </a> </li> </ul> </div> <div class="tab-content pt-1"> <div class="tab-pane fade show active" id="preview4" role="tabpanel"> <article class="card border-0 bg-transparent pb-3 mb-4" style="max-width: 58rem;"> <div class="row g-0"> <div class="col-sm-5 position-relative bg-position-center bg-repeat-0 bg-size-cover rounded-3" style="background-image: url(../assets/img/blog/02.jpg); min-height: 15rem;"> <a href="#" class="position-absolute top-0 start-0 w-100 h-100" aria-label="Read more"></a> <a href="#" class="btn btn-icon btn-light bg-white border-white btn-sm rounded-circle position-absolute top-0 end-0 zindex-5 me-3 mt-3" data-bs-toggle="tooltip" data-bs-placement="left" title="Read later"> <i class="bx bx-bookmark"></i> </a> </div> <div class="col-sm-7"> <div class="card-body px-0 pt-sm-0 ps-sm-4 pb-0 pb-sm-4"> <a href="#" class="badge fs-sm text-white bg-warning shadow-warning text-decoration-none mb-3">Web design</a> <h3 class="h4"> <a href="#">Why UX Design Matters and How it Affects Ranking</a> </h3> <p class="mb-4">In mauris porttitor tincidunt mauris massa sit lorem sed scelerisque. Fringilla pharetra vel massa enim sollicitudin cras. At pulvinar eget sociis adipiscing eget donec ultricies nibh tristique.</p> <div class="d-flex align-items-center text-muted"> <div class="fs-sm border-end pe-3 me-3">Aug 17, 2021</div> <div class="d-flex align-items-center me-3"> <i class="bx bx-like fs-lg me-1"></i> <span class="fs-sm">6</span> </div> <div class="d-flex align-items-center me-3"> <i class="bx bx-comment fs-lg me-1"></i> <span class="fs-sm">2</span> </div> <div class="d-flex align-items-center"> <i class="bx bx-share-alt fs-lg me-1"></i> <span class="fs-sm">9</span> </div> </div> </div> </div> </div> </article> <article class="card" style="max-width: 58rem;"> <div class="card-body"> <div class="d-flex justify-content-between mb-3"> <a href="#" class="badge fs-sm text-white bg-danger shadow-danger text-decoration-none">Technology</a> <a href="#" class="btn btn-icon btn-secondary btn-sm rounded-circle position-absolute top-0 end-0 zindex-5 me-3 mt-3" data-bs-toggle="tooltip" data-bs-placement="left" title="Read later"> <i class="bx bx-bookmark"></i> </a> </div> <h3 class="h4"> <a href="#">This Week in Search: New Limits and Exciting Features</a> </h3> <p class="mb-4">Sed parturient in faucibus porttitor morbi rutrum in. Amet fermentum, scelerisque suspendisse nisi faucibus quis lacus. Convallis eget pretium leo, egestas nisl, congue quam et ultrices. Pharetra, elementum pulvinar massa mattis sapien, sit. Id sollicitudin viverra morbi vitae ac tempor bibendum pulvinar vel. Integer non mattis ultrices est morbi ullamcorper scelerisque hac mi. Id semper ut dui sit magna.</p> <div class="d-flex align-items-center text-muted"> <div class="fs-sm border-end pe-3 me-3">Sep 15, 2021</div> <div class="d-flex align-items-center me-3"> <i class="bx bx-like fs-lg me-1"></i> <span class="fs-sm">4</span> </div> <div class="d-flex align-items-center me-3"> <i class="bx bx-comment fs-lg me-1"></i> <span class="fs-sm">6</span> </div> <div class="d-flex align-items-center"> <i class="bx bx-share-alt fs-lg me-1"></i> <span class="fs-sm">0</span> </div> </div> </div> </article> </div> <div class="tab-pane fade" id="html4" role="tabpanel"> <pre class="line-numbers"><code class="lang-html"><!-- Alternative post preview card: Horizontal layout --> <article class="card border-0 bg-transparent"> <div class="row g-0"> <div class="col-sm-4 position-relative bg-position-center bg-repeat-0 bg-size-cover rounded-3" style="background-image: url(assets/img/blog/02.jpg); min-height: 15rem;"> <a href="#" class="position-absolute top-0 start-0 w-100 h-100" aria-label="Read more"></a> <a href="#" class="btn btn-icon btn-light bg-white border-white btn-sm rounded-circle position-absolute top-0 end-0 zindex-5 me-3 mt-3" data-bs-toggle="tooltip" data-bs-placement="left" title="Read later"> <i class="bx bx-bookmark"></i> </a> </div> <div class="col-sm-8"> <div class="card-body px-0 pt-sm-0 ps-sm-4 pb-0 pb-sm-4"> <a href="#" class="badge fs-sm text-white bg-warning shadow-warning text-decoration-none mb-3">Web design</a> <h3 class="h4"> <a href="#">Why UX Design Matters and How it Affects Ranking</a> </h3> <p class="mb-4">Nunc, enim donec venenatis quis amet, magna vulputate rhoncus. Interdum lacus, nam elementum, cursus felis cras eros vel tincidunt. Felis nunc rhoncus quis curabitur facilisi. Odio cursus in vel et pretium. Ornare interdum in cras nibh lectus fusce. Neque, donec nunc, tellus, bibendum. Id euismod urna diam dolor lobortis consectetu.</p> <div class="d-flex align-items-center text-muted"> <div class="fs-sm border-end pe-3 me-3">Aug 17, 2021</div> <div class="d-flex align-items-center me-3"> <i class="bx bx-like fs-lg me-1"></i> <span class="fs-sm">6</span> </div> <div class="d-flex align-items-center me-3"> <i class="bx bx-comment fs-lg me-1"></i> <span class="fs-sm">2</span> </div> <div class="d-flex align-items-center"> <i class="bx bx-share-alt fs-lg me-1"></i> <span class="fs-sm">9</span> </div> </div> </div> </div> </div> </article> <!-- Without image --> <article class="card"> <div class="card-body"> <div class="d-flex justify-content-between mb-3"> <a href="#" class="badge fs-sm text-white bg-danger shadow-danger text-decoration-none">Technology</a> <a href="#" class="btn btn-icon btn-secondary btn-sm rounded-circle position-absolute top-0 end-0 zindex-5 me-3 mt-3" data-bs-toggle="tooltip" data-bs-placement="left" title="Read later"> <i class="bx bx-bookmark"></i> </a> </div> <h3 class="h4"> <a href="#">This Week in Search: New Limits and Exciting Features</a> </h3> <p class="mb-4">Sed parturient in faucibus porttitor morbi rutrum in. Amet fermentum, scelerisque suspendisse nisi faucibus quis lacus. Convallis eget pretium leo, egestas nisl, congue quam et ultrices. Pharetra, elementum pulvinar massa mattis sapien, sit. Id sollicitudin viverra morbi vitae ac tempor bibendum pulvinar vel. Integer non mattis ultrices est morbi ullamcorper scelerisque hac mi. Id semper ut dui sit magna.</p> <div class="d-flex align-items-center text-muted"> <div class="fs-sm border-end pe-3 me-3">Sep 15, 2021</div> <div class="d-flex align-items-center me-3"> <i class="bx bx-like fs-lg me-1"></i> <span class="fs-sm">4</span> </div> <div class="d-flex align-items-center me-3"> <i class="bx bx-comment fs-lg me-1"></i> <span class="fs-sm">6</span> </div> <div class="d-flex align-items-center"> <i class="bx bx-share-alt fs-lg me-1"></i> <span class="fs-sm">0</span> </div> </div> </div> </article></code></pre> </div> </div> </section> <!-- Color background on hover --> <section id="blog-card-hover-bg" class="border-bottom py-5 ps-lg-2 ps-xxl-0"> <h2 class="h4">Color background on hover</h2> <div class="d-table"> <ul class="nav nav-tabs-alt" role="tablist"> <li class="nav-item"> <a class="nav-link active" href="#preview5" data-bs-toggle="tab" role="tab" aria-controls="preview5" aria-selected="true"> <i class="bx bx-show-alt fs-base opacity-70 me-2"></i> Preview </a> </li> <li class="nav-item"> <a class="nav-link" href="#html5" data-bs-toggle="tab" role="tab" aria-controls="html5" aria-selected="false"> <i class="bx bx-code-alt fs-base opacity-70 me-2"></i> HTML </a> </li> </ul> </div> <div class="tab-content pt-1"> <div class="tab-pane fade show active" id="preview5" role="tabpanel"> <article class="card border-0 shadow-sm card-hover-primary" style="max-width: 26rem;"> <div class="card-body pb-0"> <div class="d-flex align-items-center justify-content-between mb-3"> <a href="#" class="badge fs-sm text-nav bg-secondary text-decoration-none position-relative zindex-2">Software</a> <span class="fs-sm text-muted">May 24, 2021</span> </div> <h3 class="h4"> <a href="#" class="stretched-link">What the Software Stock Slump Means for the Market</a> </h3> <p class="mb-0">Id mollis consectetur congue egestas egestas suspendisse blandit justo. Tellus augue commodo id quis tempus etiam pulvinar at maecenas.</p> </div> <div class="card-footer d-flex align-items-center py-4 text-muted border-top-0"> <div class="fs-sm border-end pe-3 me-3">Sep 15, 2021</div> <div class="d-flex align-items-center me-3"> <i class="bx bx-like fs-lg me-1"></i> <span class="fs-sm">4</span> </div> <div class="d-flex align-items-center me-3"> <i class="bx bx-comment fs-lg me-1"></i> <span class="fs-sm">6</span> </div> <div class="d-flex align-items-center"> <i class="bx bx-share-alt fs-lg me-1"></i> <span class="fs-sm">0</span> </div> </div> </article> </div> <div class="tab-pane fade" id="html5" role="tabpanel"> <pre class="line-numbers"><code class="lang-html"><!-- Color background on hover --> <article class="card border-0 shadow-sm card-hover-primary"> <div class="card-body pb-0"> <div class="d-flex align-items-center justify-content-between mb-3"> <a href="#" class="badge fs-sm text-nav bg-secondary text-decoration-none position-relative zindex-2">Software</a> <span class="fs-sm text-muted">May 24, 2021</span> </div> <h3 class="h4"> <a href="#" class="stretched-link">What the Software Stock Slump Means for the Market</a> </h3> <p class="mb-0">Id mollis consectetur congue egestas egestas suspendisse blandit justo. Tellus augue commodo id quis tempus etiam pulvinar at maecenas.</p> </div> <div class="card-footer d-flex align-items-center py-4 text-muted border-top-0"> <div class="fs-sm border-end pe-3 me-3">Sep 15, 2021</div> <div class="d-flex align-items-center me-3"> <i class="bx bx-like fs-lg me-1"></i> <span class="fs-sm">4</span> </div> <div class="d-flex align-items-center me-3"> <i class="bx bx-comment fs-lg me-1"></i> <span class="fs-sm">6</span> </div> <div class="d-flex align-items-center"> <i class="bx bx-share-alt fs-lg me-1"></i> <span class="fs-sm">0</span> </div> </div> </article></code></pre> </div> </div> </section> <!-- Podcast preview card --> <section id="blog-podcast" class="border-bottom py-5 ps-lg-2 ps-xxl-0"> <h2 class="h4">Podcast preview card</h2> <div class="d-table"> <ul class="nav nav-tabs-alt" role="tablist"> <li class="nav-item"> <a class="nav-link active" href="#preview6" data-bs-toggle="tab" role="tab" aria-controls="preview6" aria-selected="true"> <i class="bx bx-show-alt fs-base opacity-70 me-2"></i> Preview </a> </li> <li class="nav-item"> <a class="nav-link" href="#html6" data-bs-toggle="tab" role="tab" aria-controls="html6" aria-selected="false"> <i class="bx bx-code-alt fs-base opacity-70 me-2"></i> HTML </a> </li> </ul> </div> <div class="tab-content pt-1"> <div class="tab-pane fade show active" id="preview6" role="tabpanel"> <article style="max-width: 306px;"> <div class="d-block position-relative rounded-3 mb-3"> <a href="#" class="btn btn-icon btn-light bg-white btn-sm rounded-circle position-absolute top-0 end-0 zindex-5 me-3 mt-3" data-bs-toggle="tooltip" data-bs-placement="left" title="Listen later"> <i class="bx bx-bookmark"></i> </a> <img src="../assets/img/avatar/06.jpg" class="position-absolute top-0 start-0 rounded-circle zindex-2 mt-3 ms-3" width="48" alt="Avatar"> <span class="badge bg-dark position-absolute bottom-0 end-0 zindex-2 mb-3 me-3">1:53:19</span> <a href="#" class="position-absolute top-0 start-0 w-100 h-100 bg-primary opacity-35 rounded-3" aria-label="Listen podcast"></a> <img src="../assets/img/blog/podcasts/01.jpg" class="rounded-3" alt="Image"> </div> <div class="d-flex align-items-center mb-2"> <a href="#" class="badge fs-sm text-nav bg-secondary text-decoration-none">Startups</a> <span class="fs-sm text-muted border-start ps-3 ms-3">10 hours ago</span> </div> <h3 class="h5"> <a href="#">How to Choose a Fantastic SEO Agency</a> </h3> <div class="d-flex align-items-center text-muted"> <div class="d-flex align-items-center me-3"> <i class="bx bx-like fs-lg me-1"></i> <span class="fs-sm">18</span> </div> <div class="d-flex align-items-center me-3"> <i class="bx bx-comment fs-lg me-1"></i> <span class="fs-sm">9</span> </div> <div class="d-flex align-items-center"> <i class="bx bx-share-alt fs-lg me-1"></i> <span class="fs-sm">5</span> </div> </div> <a href="#" class="btn btn-link px-0 mt-3"> <i class="bx bx-play-circle fs-lg me-2"></i> Listen now </a> </article> </div> <div class="tab-pane fade" id="html6" role="tabpanel"> <pre class="line-numbers"><code class="lang-html"><!-- Podcast preview card --> <article> <div class="d-block position-relative rounded-3 mb-3"> <a href="#" class="btn btn-icon btn-light bg-white btn-sm rounded-circle position-absolute top-0 end-0 zindex-5 me-3 mt-3" data-bs-toggle="tooltip" data-bs-placement="left" title="Listen later"> <i class="bx bx-bookmark"></i> </a> <img src="assets/img/avatar/06.jpg" class="position-absolute top-0 start-0 rounded-circle zindex-2 mt-3 ms-3" width="48" alt="Avatar"> <span class="badge bg-dark position-absolute bottom-0 end-0 zindex-2 mb-3 me-3">1:53:19</span> <a href="#" class="position-absolute top-0 start-0 w-100 h-100 bg-primary opacity-35 rounded-3" aria-label="Listen podcast"></a> <img src="assets/img/blog/podcasts/01.jpg" class="rounded-3" alt="Image"> </div> <div class="d-flex align-items-center mb-2"> <a href="#" class="badge fs-sm text-nav bg-secondary text-decoration-none">Startups</a> <span class="fs-sm text-muted border-start ps-3 ms-3">10 hours ago</span> </div> <h3 class="h5"> <a href="#">How to Choose a Fantastic SEO Agency</a> </h3> <div class="d-flex align-items-center text-muted"> <div class="d-flex align-items-center me-3"> <i class="bx bx-like fs-lg me-1"></i> <span class="fs-sm">18</span> </div> <div class="d-flex align-items-center me-3"> <i class="bx bx-comment fs-lg me-1"></i> <span class="fs-sm">9</span> </div> <div class="d-flex align-items-center"> <i class="bx bx-share-alt fs-lg me-1"></i> <span class="fs-sm">5</span> </div> </div> <a href="#" class="btn btn-link px-0 mt-3"> <i class="bx bx-play-circle fs-lg me-2"></i> Listen now </a> </article></code></pre> </div> </div> </section> <!-- Simple feed --> <section id="blog-simple-feed" class="border-bottom py-5 ps-lg-2 ps-xxl-0"> <h2 class="h4">Simple feed</h2> <div class="d-table"> <ul class="nav nav-tabs-alt" role="tablist"> <li class="nav-item"> <a class="nav-link active" href="#preview7" data-bs-toggle="tab" role="tab" aria-controls="preview7" aria-selected="true"> <i class="bx bx-show-alt fs-base opacity-70 me-2"></i> Preview </a> </li> <li class="nav-item"> <a class="nav-link" href="#html7" data-bs-toggle="tab" role="tab" aria-controls="html7" aria-selected="false"> <i class="bx bx-code-alt fs-base opacity-70 me-2"></i> HTML </a> </li> </ul> </div> <div class="tab-content pt-1"> <div class="tab-pane fade show active" id="preview7" role="tabpanel"> <ul class="list-unstyled mb-0"> <li class="mb-4"> <h3 class="h4 mb-2"> <a href="#">5 Bad Landing Page Examples & How We Would Fix Them</a> </h3> <div class="d-flex align-items-center text-muted pt-1"> <div class="fs-sm border-end pe-3 me-3">12 hours ago</div> <div class="d-flex align-items-center me-3"> <i class="bx bx-like fs-lg me-1"></i> <span class="fs-sm">8</span> </div> <div class="d-flex align-items-center me-3"> <i class="bx bx-comment fs-lg me-1"></i> <span class="fs-sm">4</span> </div> <div class="d-flex align-items-center"> <i class="bx bx-share-alt fs-lg me-1"></i> <span class="fs-sm">2</span> </div> </div> </li> <li class="mb-4"> <h3 class="h4 mb-2"> <a href="#">How Agile is Your Forecasting Process?</a> </h3> <div class="d-flex align-items-center text-muted pt-1"> <div class="fs-sm border-end pe-3 me-3">Oct 9, 2021</div> <div class="d-flex align-items-center me-3"> <i class="bx bx-like fs-lg me-1"></i> <span class="fs-sm">4</span> </div> <div class="d-flex align-items-center me-3"> <i class="bx bx-comment fs-lg me-1"></i> <span class="fs-sm">1</span> </div> <div class="d-flex align-items-center"> <i class="bx bx-share-alt fs-lg me-1"></i> <span class="fs-sm">0</span> </div> </div> </li> <li> <h3 class="h4 mb-2"> <a href="#">Inclusive Marketing: Why and How Does it Work?</a> </h3> <div class="d-flex align-items-center text-muted pt-1"> <div class="fs-sm border-end pe-3 me-3">Sep 13, 2021</div> <div class="d-flex align-items-center me-3"> <i class="bx bx-like fs-lg me-1"></i> <span class="fs-sm">5</span> </div> <div class="d-flex align-items-center me-3"> <i class="bx bx-comment fs-lg me-1"></i> <span class="fs-sm">2</span> </div> <div class="d-flex align-items-center"> <i class="bx bx-share-alt fs-lg me-1"></i> <span class="fs-sm">4</span> </div> </div> </li> </ul> </div> <div class="tab-pane fade" id="html7" role="tabpanel"> <pre class="line-numbers"><code class="lang-html"><!-- Simple feed example --> <ul class="list-unstyled mb-0"> <!-- Item --> <li class="mb-4"> <h3 class="h4 mb-2"> <a href="#">5 Bad Landing Page Examples &amp; How We Would Fix Them</a> </h3> <div class="d-flex align-items-center text-muted pt-1"> <div class="fs-sm border-end pe-3 me-3">12 hours ago</div> <div class="d-flex align-items-center me-3"> <i class="bx bx-like fs-lg me-1"></i> <span class="fs-sm">8</span> </div> <div class="d-flex align-items-center me-3"> <i class="bx bx-comment fs-lg me-1"></i> <span class="fs-sm">4</span> </div> <div class="d-flex align-items-center"> <i class="bx bx-share-alt fs-lg me-1"></i> <span class="fs-sm">2</span> </div> </div> </li> <!-- Item --> <li class="mb-4"> <h3 class="h4 mb-2"> <a href="#">How Agile is Your Forecasting Process?</a> </h3> <div class="d-flex align-items-center text-muted pt-1"> <div class="fs-sm border-end pe-3 me-3">Oct 9, 2021</div> <div class="d-flex align-items-center me-3"> <i class="bx bx-like fs-lg me-1"></i> <span class="fs-sm">4</span> </div> <div class="d-flex align-items-center me-3"> <i class="bx bx-comment fs-lg me-1"></i> <span class="fs-sm">1</span> </div> <div class="d-flex align-items-center"> <i class="bx bx-share-alt fs-lg me-1"></i> <span class="fs-sm">0</span> </div> </div> </li> <!-- Add as many items as you need --> ... </ul></code></pre> </div> </div> </section> <!-- Categories widget --> <section id="blog-categories" class="border-bottom py-5 ps-lg-2 ps-xxl-0"> <h2 class="h4">Categories widget</h2> <div class="d-table"> <ul class="nav nav-tabs-alt" role="tablist"> <li class="nav-item"> <a class="nav-link active" href="#preview8" data-bs-toggle="tab" role="tab" aria-controls="preview8" aria-selected="true"> <i class="bx bx-show-alt fs-base opacity-70 me-2"></i> Preview </a> </li> <li class="nav-item"> <a class="nav-link" href="#html8" data-bs-toggle="tab" role="tab" aria-controls="html8" aria-selected="false"> <i class="bx bx-code-alt fs-base opacity-70 me-2"></i> HTML </a> </li> </ul> </div> <div class="tab-content pt-1"> <div class="tab-pane fade show active" id="preview8" role="tabpanel"> <div class="card card-body" style="max-width: 306px;"> <h3 class="h5">Categories</h3> <ul class="nav flex-column fs-sm"> <li class="nav-item mb-1"> <a href="#" class="nav-link py-1 px-0 active">All topics <span class="fw-normal opacity-60 ms-1">(48)</span></a> </li> <li class="nav-item mb-1"> <a href="#" class="nav-link py-1 px-0">Digital <span class="fw-normal opacity-60 ms-1">(12)</span></a> </li> <li class="nav-item mb-1"> <a href="#" class="nav-link py-1 px-0">Marketing <span class="fw-normal opacity-60 ms-1">(5)</span></a> </li> <li class="nav-item mb-1"> <a href="#" class="nav-link py-1 px-0">Startups <span class="fw-normal opacity-60 ms-1">(10)</span></a> </li> <li class="nav-item mb-1"> <a href="#" class="nav-link py-1 px-0">Technology <span class="fw-normal opacity-60 ms-1">(9)</span></a> </li> <li class="nav-item mb-1"> <a href="#" class="nav-link py-1 px-0">Business <span class="fw-normal opacity-60 ms-1">(4)</span></a> </li> <li class="nav-item"> <a href="#" class="nav-link py-1 px-0">Processes & Tools <span class="fw-normal opacity-60 ms-1">(3)</span></a> </li> </ul> </div> </div> <div class="tab-pane fade" id="html8" role="tabpanel"> <pre class="line-numbers"><code class="lang-html"><!-- List of blog categories --> <div class="card card-body"> <h3 class="h5">Categories</h3> <ul class="nav flex-column fs-sm"> <li class="nav-item mb-1"> <a href="#" class="nav-link py-1 px-0 active">All topics <span class="fw-normal opacity-60 ms-1">(48)</span></a> </li> <li class="nav-item mb-1"> <a href="#" class="nav-link py-1 px-0">Digital <span class="fw-normal opacity-60 ms-1">(12)</span></a> </li> <li class="nav-item mb-1"> <a href="#" class="nav-link py-1 px-0">Marketing <span class="fw-normal opacity-60 ms-1">(5)</span></a> </li> <li class="nav-item mb-1"> <a href="#" class="nav-link py-1 px-0">Startups <span class="fw-normal opacity-60 ms-1">(10)</span></a> </li> <li class="nav-item mb-1"> <a href="#" class="nav-link py-1 px-0">Technology <span class="fw-normal opacity-60 ms-1">(9)</span></a> </li> <li class="nav-item mb-1"> <a href="#" class="nav-link py-1 px-0">Business <span class="fw-normal opacity-60 ms-1">(4)</span></a> </li> <li class="nav-item"> <a href="#" class="nav-link py-1 px-0">Processes & Tools <span class="fw-normal opacity-60 ms-1">(3)</span></a> </li> </ul> </div></code></pre> </div> </div> </section> <!-- Popular / recent posts widget --> <section id="blog-recent-posts" class="border-bottom py-5 ps-lg-2 ps-xxl-0"> <h2 class="h4">Popular / recent posts widget</h2> <div class="d-table"> <ul class="nav nav-tabs-alt" role="tablist"> <li class="nav-item"> <a class="nav-link active" href="#preview9" data-bs-toggle="tab" role="tab" aria-controls="preview9" aria-selected="true"> <i class="bx bx-show-alt fs-base opacity-70 me-2"></i> Preview </a> </li> <li class="nav-item"> <a class="nav-link" href="#html9" data-bs-toggle="tab" role="tab" aria-controls="html9" aria-selected="false"> <i class="bx bx-code-alt fs-base opacity-70 me-2"></i> HTML </a> </li> </ul> </div> <div class="tab-content pt-1"> <div class="tab-pane fade show active" id="preview9" role="tabpanel"> <div class="card card-body border-0 position-relative" style="max-width: 306px;"> <span class="position-absolute top-0 start-0 w-100 h-100 bg-gradient-primary opacity-10 rounded-3"></span> <div class="position-relative zindex-2"> <h3 class="h5">Popular posts</h3> <ul class="list-unstyled mb-0"> <li class="border-bottom pb-3 mb-3"> <h4 class="h6 mb-2"> <a href="#">5 Bad Landing Page Examples & How We Would Fix Them</a> </h4> <div class="d-flex align-items-center text-muted pt-1"> <div class="fs-xs border-end pe-3 me-3">12 hours ago</div> <div class="d-flex align-items-center me-3"> <i class="bx bx-like fs-base me-1"></i> <span class="fs-xs">8</span> </div> <div class="d-flex align-items-center me-3"> <i class="bx bx-comment fs-base me-1"></i> <span class="fs-xs">4</span> </div> <div class="d-flex align-items-center"> <i class="bx bx-share-alt fs-base me-1"></i> <span class="fs-xs">2</span> </div> </div> </li> <li class="border-bottom pb-3 mb-3"> <h4 class="h6 mb-2"> <a href="#">How Agile is Your Forecasting Process?</a> </h4> <div class="d-flex align-items-center text-muted pt-1"> <div class="fs-xs border-end pe-3 me-3">Oct 9, 2021</div> <div class="d-flex align-items-center me-3"> <i class="bx bx-like fs-base me-1"></i> <span class="fs-xs">4</span> </div> <div class="d-flex align-items-center me-3"> <i class="bx bx-comment fs-base me-1"></i> <span class="fs-xs">1</span> </div> <div class="d-flex align-items-center"> <i class="bx bx-share-alt fs-base me-1"></i> <span class="fs-xs">0</span> </div> </div> </li> <li> <h4 class="h6 mb-2"> <a href="#">Inclusive Marketing: Why and How Does it Work?</a> </h4> <div class="d-flex align-items-center text-muted pt-1"> <div class="fs-xs border-end pe-3 me-3">Sep 13, 2021</div> <div class="d-flex align-items-center me-3"> <i class="bx bx-like fs-base me-1"></i> <span class="fs-xs">5</span> </div> <div class="d-flex align-items-center me-3"> <i class="bx bx-comment fs-base me-1"></i> <span class="fs-xs">2</span> </div> <div class="d-flex align-items-center"> <i class="bx bx-share-alt fs-base me-1"></i> <span class="fs-xs">4</span> </div> </div> </li> </ul> </div> </div> </div> <div class="tab-pane fade" id="html9" role="tabpanel"> <pre class="line-numbers"><code class="lang-html"><!-- Popular / recent posts widget --> <div class="card card-body border-0 position-relative"> <span class="position-absolute top-0 start-0 w-100 h-100 bg-gradient-primary opacity-10 rounded-3"></span> <div class="position-relative zindex-2"> <h3 class="h5">Popular posts</h3> <ul class="list-unstyled mb-0"> <li class="border-bottom pb-3 mb-3"> <h4 class="h6 mb-2"> <a href="#">5 Bad Landing Page Examples &amp; How We Would Fix Them</a> </h4> <div class="d-flex align-items-center text-muted pt-1"> <div class="fs-xs border-end pe-3 me-3">12 hours ago</div> <div class="d-flex align-items-center me-3"> <i class="bx bx-like fs-base me-1"></i> <span class="fs-xs">8</span> </div> <div class="d-flex align-items-center me-3"> <i class="bx bx-comment fs-base me-1"></i> <span class="fs-xs">4</span> </div> <div class="d-flex align-items-center"> <i class="bx bx-share-alt fs-base me-1"></i> <span class="fs-xs">2</span> </div> </div> </li> <li class="border-bottom pb-3 mb-3"> <h4 class="h6 mb-2"> <a href="#">How Agile is Your Forecasting Process?</a> </h4> <div class="d-flex align-items-center text-muted pt-1"> <div class="fs-xs border-end pe-3 me-3">Oct 9, 2021</div> <div class="d-flex align-items-center me-3"> <i class="bx bx-like fs-base me-1"></i> <span class="fs-xs">4</span> </div> <div class="d-flex align-items-center me-3"> <i class="bx bx-comment fs-base me-1"></i> <span class="fs-xs">1</span> </div> <div class="d-flex align-items-center"> <i class="bx bx-share-alt fs-base me-1"></i> <span class="fs-xs">0</span> </div> </div> </li> <li> <h4 class="h6 mb-2"> <a href="#">Inclusive Marketing: Why and How Does it Work?</a> </h4> <div class="d-flex align-items-center text-muted pt-1"> <div class="fs-xs border-end pe-3 me-3">Sep 13, 2021</div> <div class="d-flex align-items-center me-3"> <i class="bx bx-like fs-base me-1"></i> <span class="fs-xs">5</span> </div> <div class="d-flex align-items-center me-3"> <i class="bx bx-comment fs-base me-1"></i> <span class="fs-xs">2</span> </div> <div class="d-flex align-items-center"> <i class="bx bx-share-alt fs-base me-1"></i> <span class="fs-xs">4</span> </div> </div> </li> </ul> </div> </div></code></pre> </div> </div> </section> <!-- Tags widget --> <section id="blog-tags" class="border-bottom py-5 ps-lg-2 ps-xxl-0"> <h2 class="h4">Tags widget</h2> <div class="d-table"> <ul class="nav nav-tabs-alt" role="tablist"> <li class="nav-item"> <a class="nav-link active" href="#preview10" data-bs-toggle="tab" role="tab" aria-controls="preview10" aria-selected="true"> <i class="bx bx-show-alt fs-base opacity-70 me-2"></i> Preview </a> </li> <li class="nav-item"> <a class="nav-link" href="#html10" data-bs-toggle="tab" role="tab" aria-controls="html10" aria-selected="false"> <i class="bx bx-code-alt fs-base opacity-70 me-2"></i> HTML </a> </li> </ul> </div> <div class="tab-content pt-1"> <div class="tab-pane fade show active" id="preview10" role="tabpanel"> <div class="card card-body" style="max-width: 306px;"> <h3 class="h5">Tags</h3> <div class="d-flex flex-wrap"> <a href="#" class="btn btn-outline-secondary btn-sm px-3 my-1 me-2">#lifestyle</a> <a href="#" class="btn btn-outline-secondary btn-sm px-3 my-1 me-2">#ux</a> <a href="#" class="btn btn-outline-secondary btn-sm px-3 my-1 me-2">#tech</a> <a href="#" class="btn btn-outline-secondary btn-sm px-3 my-1 me-2">#user</a> <a href="#" class="btn btn-outline-secondary btn-sm px-3 my-1 me-2">#software</a> <a href="#" class="btn btn-outline-secondary btn-sm px-3 my-1 me-2">#it</a> <a href="#" class="btn btn-outline-secondary btn-sm px-3 my-1 me-2">#network</a> <a href="#" class="btn btn-outline-secondary btn-sm px-3 my-1 me-2">#engineering</a> </div> </div> </div> <div class="tab-pane fade" id="html10" role="tabpanel"> <pre class="line-numbers"><code class="lang-html"><!-- Popular tags widget --> <div class="card card-body"> <h3 class="h5">Tags</h3> <div class="d-flex flex-wrap"> <a href="#" class="btn btn-outline-secondary btn-sm px-3 my-1 me-2">#lifestyle</a> <a href="#" class="btn btn-outline-secondary btn-sm px-3 my-1 me-2">#ux</a> <a href="#" class="btn btn-outline-secondary btn-sm px-3 my-1 me-2">#tech</a> <a href="#" class="btn btn-outline-secondary btn-sm px-3 my-1 me-2">#user</a> <a href="#" class="btn btn-outline-secondary btn-sm px-3 my-1 me-2">#software</a> <a href="#" class="btn btn-outline-secondary btn-sm px-3 my-1 me-2">#it</a> <a href="#" class="btn btn-outline-secondary btn-sm px-3 my-1 me-2">#network</a> <a href="#" class="btn btn-outline-secondary btn-sm px-3 my-1 me-2">#engineering</a> </div> </div></code></pre> </div> </div> </section> <!-- Post comments --> <section id="blog-comments" class="py-5 ps-lg-2 ps-xxl-0"> <h2 class="h4">Post comments</h2> <div class="d-table"> <ul class="nav nav-tabs-alt" role="tablist"> <li class="nav-item"> <a class="nav-link active" href="#preview11" data-bs-toggle="tab" role="tab" aria-controls="preview11" aria-selected="true"> <i class="bx bx-show-alt fs-base opacity-70 me-2"></i> Preview </a> </li> <li class="nav-item"> <a class="nav-link" href="#html11" data-bs-toggle="tab" role="tab" aria-controls="html11" aria-selected="false"> <i class="bx bx-code-alt fs-base opacity-70 me-2"></i> HTML </a> </li> </ul> </div> <div class="tab-content pt-1"> <div class="tab-pane fade show active" id="preview11" role="tabpanel" style="max-width: 60rem;"> <div class="pt-2 pb-4"> <div class="d-flex align-items-center justify-content-between pb-2 mb-1"> <div class="d-flex align-items-center me-3"> <img src="../assets/img/avatar/03.jpg" class="rounded-circle" width="48" alt="Avatar"> <div class="ps-3"> <h6 class="fw-semibold mb-0">Esther Howard</h6> <span class="fs-sm text-muted">4 mins ago</span> </div> </div> <a href="#" class="nav-link fs-sm px-0"> <i class="bx bx-share fs-lg me-2"></i> Reply </a> </div> <p class="mb-0">Nibh enim porta ut augue felis, donec sit luctus. Quis ullamcorper dolor sit mauris. Hendrerit eu libero, eu tristique sodales ultrices etiam adipiscing. Donec viverra sodales arcu gravida nibh at. Neque lobortis quis porta integer et placerat lectus scelerisque. Velit eget malesuada morbi faucibus at sed euismod. Tortor, eu ut id tincidunt leo placerat luctus.</p> </div> <hr class="my-2"> <div class="pt-4 pb-2"> <div class="d-flex align-items-center justify-content-between pb-2 mb-1"> <div class="d-flex align-items-center me-3"> <img src="../assets/img/avatar/02.jpg" class="rounded-circle" width="48" alt="Avatar"> <div class="ps-3"> <h6 class="fw-semibold mb-0">Ralph Edwards</h6> <span class="fs-sm text-muted">September 9 at 12:48</span> </div> </div> <a href="#" class="nav-link fs-sm px-0"> <i class="bx bx-share fs-lg me-2"></i> Reply </a> </div> <p class="mb-0 pb-2">Eget amet, ac scelerisque tellus sed. Sapien duis sit neque pulvinar. Est sit aenean nisl etiam donec mattis ut diam. Luctus massa eu nunc aliquam viverra tempus, eu amet, luctus. Ac faucibus vestibulum eu lacus. Ullamcorper sem ultrices tincidunt pharetra?</p> <div class="position-relative ps-4 mt-4"> <span class="position-absolute top-0 start-0 w-1 h-100 bg-primary"></span> <div class="d-flex align-items-center justify-content-between ps-3 pb-2 mb-1"> <div class="d-flex align-items-center me-3"> <img src="../assets/img/avatar/05.jpg" class="rounded-circle" width="48" alt="Avatar"> <div class="ps-3"> <h6 class="fw-semibold mb-0">Albert Flores</h6> <span class="fs-sm text-muted">16 hours ago</span> </div> </div> <a href="#" class="nav-link fs-sm px-0"> <i class="bx bx-share fs-lg me-2"></i> Reply </a> </div> <p class="ps-3 mb-0"><a href="#" class="fw-semibold text-decoration-none">@Ralph Edwards</a> Vulputate malesuada amet, consequat ullamcorper. Orci, cras maecenas in sit purus pellentesque. Ridiculus blandit pellentesque eget arcu morbi nisl. Morbi volutpat adipiscing sapien sed ut tempor.</p> </div> </div> </div> <div class="tab-pane fade" id="html11" role="tabpanel"> <pre class="line-numbers"><code class="lang-html"><!-- Post comments --> <!-- Comment --> <div class="py-4"> <div class="d-flex align-items-center justify-content-between pb-2 mb-1"> <div class="d-flex align-items-center me-3"> <img src="assets/img/avatar/03.jpg" class="rounded-circle" width="48" alt="Avatar"> <div class="ps-3"> <h6 class="fw-semibold mb-0">Esther Howard</h6> <span class="fs-sm text-muted">4 mins ago</span> </div> </div> <a href="#" class="nav-link fs-sm px-0"> <i class="bx bx-share fs-lg me-2"></i> Reply </a> </div> <p class="mb-0">Nibh enim porta ut augue felis, donec sit luctus. Quis ullamcorper dolor sit mauris. Hendrerit eu libero, eu tristique sodales ultrices etiam adipiscing. Donec viverra sodales arcu gravida nibh at. Neque lobortis quis porta integer et placerat lectus scelerisque. Velit eget malesuada morbi faucibus at sed euismod. Tortor, eu ut id tincidunt leo placerat luctus.</p> </div> <hr class="my-2"> <!-- Comment --> <div class="py-4"> <div class="d-flex align-items-center justify-content-between pb-2 mb-1"> <div class="d-flex align-items-center me-3"> <img src="assets/img/avatar/02.jpg" class="rounded-circle" width="48" alt="Avatar"> <div class="ps-3"> <h6 class="fw-semibold mb-0">Ralph Edwards</h6> <span class="fs-sm text-muted">September 9 at 12:48</span> </div> </div> <a href="#" class="nav-link fs-sm px-0"> <i class="bx bx-share fs-lg me-2"></i> Reply </a> </div> <p class="mb-0 pb-2">Eget amet, ac scelerisque tellus sed. Sapien duis sit neque pulvinar. Est sit aenean nisl etiam donec mattis ut diam. Luctus massa eu nunc aliquam viverra tempus, eu amet, luctus. Ac faucibus vestibulum eu lacus. Ullamcorper sem ultrices tincidunt pharetra?</p> <!-- Comment reply --> <div class="position-relative ps-4 mt-4"> <span class="position-absolute top-0 start-0 w-1 h-100 bg-primary"></span> <div class="d-flex align-items-center justify-content-between ps-3 pb-2 mb-1"> <div class="d-flex align-items-center me-3"> <img src="assets/img/avatar/05.jpg" class="rounded-circle" width="48" alt="Avatar"> <div class="ps-3"> <h6 class="fw-semibold mb-0">Albert Flores</h6> <span class="fs-sm text-muted">16 hours ago</span> </div> </div> <a href="#" class="nav-link fs-sm px-0"> <i class="bx bx-share fs-lg me-2"></i> Reply </a> </div> <p class="ps-3 mb-0"><a href="#" class="fw-semibold text-decoration-none">@Ralph Edwards</a> Vulputate malesuada amet, consequat ullamcorper. Orci, cras maecenas in sit purus pellentesque. Ridiculus blandit pellentesque eget arcu morbi nisl. Morbi volutpat adipiscing sapien sed ut tempor.</p> </div> </div></code></pre> </div> </div> </section> </div> </main> <!-- Jump to anchor navigation --> <aside id="jumpToNav" class="side-nav side-nav-end d-none d-xxl-block position-fixed top-0 end-0 vh-100 py-5" style="width: 20rem;"> <h3 class="fs-lg mt-5 pt-5">Jump to</h3> <ul class="nav"> <li class="nav-item"> <a href="#blog-card-vertical" class="nav-link" data-scroll data-scroll-offset="-6">Post preview card: Vertical (grid)</a> </li> <li class="nav-item"> <a href="#blog-card-horizontal" class="nav-link" data-scroll data-scroll-offset="-6">Post preview card: Horizontal (list)</a> </li> <li class="nav-item"> <a href="#blog-card-vertical-alt" class="nav-link" data-scroll data-scroll-offset="-6">Alt post preview card: Vertical (grid)</a> </li> <li class="nav-item"> <a href="#blog-card-horizontal-alt" class="nav-link" data-scroll data-scroll-offset="-6">Alt post preview card: Horizontal (list)</a> </li> <li class="nav-item"> <a href="#blog-card-hover-bg" class="nav-link" data-scroll data-scroll-offset="-6">Color background on hover</a> </li> <li class="nav-item"> <a href="#blog-podcast" class="nav-link" data-scroll data-scroll-offset="-6">Podcast preview card</a> </li> <li class="nav-item"> <a href="#blog-simple-feed" class="nav-link" data-scroll data-scroll-offset="-6">Simple feed</a> </li> <li class="nav-item"> <a href="#blog-categories" class="nav-link" data-scroll data-scroll-offset="-6">Categories widget</a> </li> <li class="nav-item"> <a href="#blog-recent-posts" class="nav-link" data-scroll data-scroll-offset="-6">Popular / recent posts widget</a> </li> <li class="nav-item"> <a href="#blog-tags" class="nav-link" data-scroll data-scroll-offset="-6">Tags widget</a> </li> <li class="nav-item"> <a href="#blog-comments" class="nav-link" data-scroll data-scroll-offset="-6">Post comments</a> </li> </ul> </aside> <!-- Back to top button --> <a href="#top" class="btn-scroll-top" data-scroll> <span class="btn-scroll-top-tooltip text-muted fs-sm me-2">Top</span> <i class="btn-scroll-top-icon bx bx-chevron-up"></i> </a> <!-- Vendor Scripts --> <script src="../assets/vendor/bootstrap/dist/js/bootstrap.bundle.min.js"></script> <script src="../assets/vendor/smooth-scroll/dist/smooth-scroll.polyfills.min.js"></script> <script src="../assets/vendor/swiper/swiper-bundle.min.js"></script> <script src="../assets/vendor/prismjs/components/prism-core.min.js"></script> <script src="../assets/vendor/prismjs/components/prism-markup.min.js"></script> <script src="../assets/vendor/prismjs/components/prism-clike.min.js"></script> <script src="../assets/vendor/prismjs/plugins/toolbar/prism-toolbar.min.js"></script> <script src="../assets/vendor/prismjs/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"></script> <script src="../assets/vendor/prismjs/plugins/line-numbers/prism-line-numbers.min.js"></script> <!-- Main Theme Script --> <script src="../assets/js/theme.min.js"></script> </body> </html>