Ümit Tunç
1163 lines
56 KiB
HTML
1163 lines
56 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<title>Doc - Blogzine Theme</title>
|
||
<!-- Meta Tags -->
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||
<meta name="author" content="Webestica.com">
|
||
|
||
<!-- Favicon -->
|
||
<link rel="shortcut icon" href="assets/images/favicon.ico">
|
||
|
||
<!-- Google Font -->
|
||
<link rel="preconnect" href="https://fonts.gstatic.com">
|
||
<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;700&family=Rubik:wght@400;500;700&display=swap" rel="stylesheet">
|
||
|
||
<!-- Plugins CSS -->
|
||
<link rel="stylesheet" type="text/css" href="assets/vendor/font-awesome/css/all.min.css">
|
||
<link rel="stylesheet" type="text/css" href="assets/vendor/bootstrap-icons/bootstrap-icons.css">
|
||
|
||
<!-- Theme CSS -->
|
||
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
|
||
<link rel="stylesheet" type="text/css" href="assets/css/doc.css">
|
||
<link rel="stylesheet" type="text/css" href="assets/css/prism.css">
|
||
<link rel="stylesheet" type="text/css" href="assets/vendor/glightbox/css/glightbox.css">
|
||
|
||
</head>
|
||
|
||
<body>
|
||
|
||
<!-- **************** MAIN CONTENT START **************** -->
|
||
<main>
|
||
<!-- Navbar top START -->
|
||
<div class="navbar-top bg-dark px-3 px-sm-4 px-md-5">
|
||
<div class="d-flex justify-content-between align-items-center">
|
||
<!-- Logo START -->
|
||
<a class="navbar-brand py-3" href="index.html">
|
||
<img class="navbar-brand-item" src="assets/images/logo.svg" alt="logo">
|
||
</a>
|
||
<!-- Logo END -->
|
||
|
||
<!-- Navbar right -->
|
||
<div>
|
||
<ul class="text-end list-inline m-0">
|
||
<li class="list-inline-item me-2 me-md-4"> <a class="text-white" href="https://blogzine.webestica.com">Live Preview</a> </li>
|
||
<li class="list-inline-item me-2 me-md-4"> <a class="text-white" href="https://support.webestica.com" target="_blank">Support</a> </li>
|
||
<li class="list-inline-item text-white"> <span class="badge bg-danger text-white">v1.2.0</span></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Navbar top END -->
|
||
|
||
<div class="container-fluid px-0">
|
||
<div class="page-wrapper">
|
||
<!-- Left sidebar START -->
|
||
<nav class="navbar navbar-expand-sm navbar-light bg-light px-3">
|
||
<a class="navbar-brand py-2 d-sm-none" href="#">Doc nav</a>
|
||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#docNav" aria-controls="docNav" aria-expanded="false" aria-label="Toggle navigation">
|
||
<span class="navbar-toggler-icon"></span>
|
||
</button>
|
||
<div class="collapse navbar-collapse" id="docNav">
|
||
<div class="left-sidebar bg-light">
|
||
<div class="content h-100vh">
|
||
<div class="list-group list-group-borderless p-3 p-md-4">
|
||
<b class="text-dark text-uppercase mb-2">Getting Started</b>
|
||
<a class="list-group-item" href="index.html">Introduction</a>
|
||
<a class="list-group-item" href="gulp.html">Gulp</a>
|
||
<a class="list-group-item" href="customization.html">Customization</a>
|
||
<a class="list-group-item" href="color-scheme.html">Color Scheme</a>
|
||
<a class="list-group-item" href="logo-settings.html">Logo Settings</a>
|
||
<a class="list-group-item" href="page-loading.html">Page Loading</a>
|
||
<a class="list-group-item" href="fonts.html">Fonts</a>
|
||
<a class="list-group-item" href="dark-mode.html">Dark mode</a>
|
||
<a class="list-group-item" href="rtl.html">RTL Version</a>
|
||
<a class="list-group-item" href="lazy-load.html">Lazy Load</a>
|
||
<a class="list-group-item" href="sources-and-credits.html">Sources and Credits</a>
|
||
<a class="list-group-item" href="changelog.html">Changelog</a>
|
||
<a class="list-group-item" href="updates.html">Updates</a>
|
||
<a class="list-group-item" href="support.html">Support</a>
|
||
<b class="text-dark text-uppercase mt-3 mb-2">Component</b>
|
||
<a class="list-group-item" href="alerts.html">Alerts</a>
|
||
<a class="list-group-item" href="avatar.html">Avatar</a>
|
||
<a class="list-group-item" href="badges.html">Badges</a>
|
||
<a class="list-group-item" href="breadcrumb.html">Breadcrumb</a>
|
||
<a class="list-group-item" href="buttons.html">Buttons</a>
|
||
<a class="list-group-item" href="card.html">Card</a>
|
||
<a class="list-group-item" href="font-icons.html">Font icons</a>
|
||
<a class="list-group-item" href="google-map.html">Google Map</a>
|
||
<a class="list-group-item" href="nav-and-tabs.html">Nav and Tabs</a>
|
||
<a class="list-group-item" href="pagination.html">Pagination</a>
|
||
<a class="list-group-item" href="progress.html">Progress</a>
|
||
<a class="list-group-item" href="sticky-element.html">Sticky element</a>
|
||
<a class="list-group-item" href="sticky-footer.html">Sticky footer</a>
|
||
<a class="list-group-item" href="utility-classes.html">Utility classes</a>
|
||
<b class="text-dark text-uppercase mt-3 mb-2">Plugins</b>
|
||
<a class="list-group-item" href="tiny-slider.html">Tiny Slider</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
<!-- Left sidebar END -->
|
||
|
||
<!-- Main content START -->
|
||
<div class="main-content">
|
||
<div class="row">
|
||
<div class="col-12">
|
||
<!-- Page title -->
|
||
<div class="my-5">
|
||
<h1>Cards</h1>
|
||
<p class="lead">Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options.</p>
|
||
<hr class="my-5">
|
||
</div>
|
||
<!-- Page content START -->
|
||
|
||
|
||
<!-- Cards Examples -->
|
||
<h3 class="mt-5">Examples</h3>
|
||
<p>Cards are built with as little markup and styles as possible, but still manage to deliver a ton of control and customization. Built with flexbox, they offer easy alignment and mix well with other Bootstrap components. </p>
|
||
|
||
<p>Below is an example of a basic card with mixed content and a fixed width. Cards have no fixed width to start, so they’ll naturally fill the full width of its parent element.</p>
|
||
<ul class="nav nav-tabs nav-tabs-line">
|
||
<li class="nav-item"> <a class="nav-link active" data-bs-toggle="tab" href="#tab-1">Result</a> </li>
|
||
<li class="nav-item"> <a class="nav-link" data-bs-toggle="tab" href="#tab-2">HTML</a> </li>
|
||
</ul>
|
||
<div class="tab-content bg-light p-4">
|
||
<div class="tab-pane show active" id="tab-1">
|
||
<div class="col-6">
|
||
<div class="card" style="width: 18rem;">
|
||
<img src="assets/images/blog/4by3/06.jpg" class="card-img-top" alt="...">
|
||
<div class="card-body">
|
||
<h5 class="card-title">Card title</h5>
|
||
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
||
<a href="#" class="btn btn-primary">Go somewhere</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="tab-pane" id="tab-2">
|
||
<div class="position-relative">
|
||
<pre id="copy-1" class="my-3">
|
||
<code class="language-markup" data-lang="html"><div class="card" style="width: 18rem;">
|
||
<img src="..." class="card-img-top" alt="...">
|
||
<div class="card-body">
|
||
<h5 class="card-title">Card title</h5>
|
||
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
||
<a href="#" class="btn btn-primary">Go somewhere</a>
|
||
</div>
|
||
</div>
|
||
</code></pre>
|
||
<button id="copy_id-1" data-clipboard-action="copy" data-clipboard-target="#copy-1" class="copy-link btn btn-primary btn-sm">Copy</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Tab END -->
|
||
<hr class="mt-5">
|
||
<p class="lead my-5"> As blogzine is a blog and magazine-based theme we have used cards to display posts almost everywhere in theme. With the help of utility classes, we have designed many ready-to-use cards.</p>
|
||
|
||
<!-- Card with background image Examples -->
|
||
<h3 class="mt-5">Card with background image</h3>
|
||
|
||
<!-- Tab START -->
|
||
<ul class="nav nav-tabs nav-tabs-line">
|
||
<li class="nav-item"> <a class="nav-link active" data-bs-toggle="tab" href="#tab-9">Result</a> </li>
|
||
<li class="nav-item"> <a class="nav-link" data-bs-toggle="tab" href="#tab-10">HTML</a> </li>
|
||
</ul>
|
||
<!-- -->
|
||
<div class="tab-content bg-light p-4">
|
||
<div class="tab-pane show active" id="tab-9">
|
||
<div class="col-md-5">
|
||
<div class="card card-overlay-bottom card-grid-lg card-bg-scale h-500" style="background-image:url(assets/images/blog/4by3/06.jpg); background-position: center left; background-size: cover;">
|
||
<!-- Card featured -->
|
||
<span class="card-featured" title="Featured post"><i class="fas fa-star"></i></span>
|
||
<!-- Card Image overlay -->
|
||
<div class="card-img-overlay d-flex align-items-center p-3 p-sm-4">
|
||
<div class="w-100 mt-auto">
|
||
<!-- Card category -->
|
||
<a href="#" class="badge text-bg-danger mb-2"><i class="fas fa-circle me-2 small fw-bold"></i>Lifestyle</a>
|
||
<!-- Card title -->
|
||
<h2 class="text-white h1"><a href="#" class="btn-link stretched-link text-reset">10 tell-tale signs you need to get a new startup.</a></h2>
|
||
<p class="text-white">No visited raising gravity outward subject my cottage Mr be. Hold do at tore in park feet near my case. </p>
|
||
<!-- Card info -->
|
||
<ul class="nav nav-divider text-white-force align-items-center d-none d-sm-inline-block">
|
||
<li class="nav-item">
|
||
<div class="nav-link">
|
||
<div class="d-flex align-items-center text-white position-relative">
|
||
<div class="avatar avatar-sm">
|
||
<img class="avatar-img rounded-circle" src="assets/images/avatar/11.jpg" alt="avatar">
|
||
</div>
|
||
<span class="ms-3">by <a href="#" class="stretched-link text-reset btn-link">Louis</a></span>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="nav-item">Nov 15, 2021</li>
|
||
<li class="nav-item">5 min read</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="tab-pane" id="tab-10">
|
||
<div class="position-relative">
|
||
<pre id="copy-5" class="my-3">
|
||
<code class="language-markup" data-lang="html"><div class="card card-overlay-bottom card-grid-lg card-bg-scale h-500" style="background-image:url(assets/images/blog/4by3/06.jpg); background-position: center left; background-size: cover;">
|
||
<!-- Card featured -->
|
||
<span class="card-featured" title="Featured post"><i class="fas fa-star"></i></span>
|
||
<!-- Card Image overlay -->
|
||
<div class="card-img-overlay d-flex align-items-center p-3 p-sm-4">
|
||
<div class="w-100 mt-auto">
|
||
<!-- Card category -->
|
||
<a href="#" class="badge bg-danger mb-2"><i class="fas fa-circle me-2 small fw-bold"></i>Lifestyle</a>
|
||
<!-- Card title -->
|
||
<h2 class="text-white h1"><a href="#" class="btn-link stretched-link text-reset">10 tell-tale signs you need to get a new startup.</a></h2>
|
||
<p class="text-white">No visited raising gravity outward subject my cottage Mr be. Hold do at tore in park feet near my case. </p>
|
||
<!-- Card info -->
|
||
<ul class="nav nav-divider text-white-force align-items-center d-none d-sm-inline-block">
|
||
<li class="nav-item">
|
||
<div class="nav-link">
|
||
<div class="d-flex align-items-center text-white position-relative">
|
||
<div class="avatar avatar-sm">
|
||
<img class="avatar-img rounded-circle" src="assets/images/avatar/11.jpg" alt="avatar">
|
||
</div>
|
||
<span class="ms-3">by <a href="#" class="stretched-link text-reset btn-link">Louis</a></span>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="nav-item">Nov 15, 2021</li>
|
||
<li class="nav-item">5 min read</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</code></pre>
|
||
<button id="copy_id-5" data-clipboard-action="copy" data-clipboard-target="#copy-5" class="copy-link btn btn-primary btn-sm">Copy</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Tab END -->
|
||
|
||
<!-- Card with image Examples -->
|
||
<h3 class="mt-5">Card with image tag</h3>
|
||
<ul class="nav nav-tabs nav-tabs-line">
|
||
<li class="nav-item"> <a class="nav-link active" data-bs-toggle="tab" href="#tab-31">Result</a> </li>
|
||
<li class="nav-item"> <a class="nav-link" data-bs-toggle="tab" href="#tab-41">HTML</a> </li>
|
||
</ul>
|
||
<div class="tab-content bg-light p-4">
|
||
<div class="tab-pane show active" id="tab-31">
|
||
<div class="col-md-5">
|
||
<div class="card card-overlay-bottom card-img-scale">
|
||
<!-- Card Image -->
|
||
<img class="card-img h-200" src="assets/images/blog/4by3/06.jpg" alt="">
|
||
<!-- Card Image overlay -->
|
||
<div class="card-img-overlay d-flex flex-column p-3 p-sm-4">
|
||
<div>
|
||
<!-- Card category -->
|
||
<a href="#" class="badge text-bg-dark mb-2"><i class="fas fa-circle me-2 small fw-bold"></i>Travel</a>
|
||
</div>
|
||
<div class="w-100 mt-auto">
|
||
<!-- Card title -->
|
||
<h4 class="text-white"><a href="#" class="btn-link text-reset stretched-link">5 investment doubts you should clarify</a></h4>
|
||
<!-- Card info -->
|
||
<ul class="nav nav-divider text-white-force align-items-center d-none d-sm-inline-block small">
|
||
<li class="nav-item position-relative">
|
||
<div class="nav-link">by <a href="#" class="stretched-link text-reset btn-link">Dennis</a>
|
||
</div>
|
||
</li>
|
||
<li class="nav-item">Jan 28, 2021</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="tab-pane" id="tab-41">
|
||
<div class="position-relative">
|
||
<pre id="copy-2" class="my-3">
|
||
<code class="language-markup" data-lang="html"><div class="card card-overlay-bottom card-img-scale">
|
||
<!-- Card Image -->
|
||
<img class="card-img h-200" src="assets/images/blog/4by3/06.jpg" alt="">
|
||
<!-- Card Image overlay -->
|
||
<div class="card-img-overlay d-flex flex-column p-3 p-sm-4">
|
||
<div>
|
||
<!-- Card category -->
|
||
<a href="#" class="badge bg-dark fs-6 mb-2"><i class="fas fa-circle me-2 small fw-bold"></i>Travel</a>
|
||
</div>
|
||
<div class="w-100 mt-auto">
|
||
<!-- Card title -->
|
||
<h4 class="text-white"><a href="#" class="btn-link text-reset stretched-link">5 investment doubts you should clarify</a></h4>
|
||
<!-- Card info -->
|
||
<ul class="nav nav-divider text-white-force align-items-center d-none d-sm-inline-block small">
|
||
<li class="nav-item position-relative">
|
||
<div class="nav-link">by <a href="#" class="stretched-link text-reset btn-link">Dennis</a>
|
||
</div>
|
||
</li>
|
||
<li class="nav-item">Jan 28, 2021</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</code></pre>
|
||
<button id="copy_id-2" data-clipboard-action="copy" data-clipboard-target="#copy-2" class="copy-link btn btn-primary btn-sm">Copy</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Tab END -->
|
||
|
||
<!-- Card with image and content Examples -->
|
||
<h3 class="mt-5">Card with image and content</h3>
|
||
|
||
<ul class="nav nav-tabs nav-tabs-line">
|
||
<li class="nav-item"> <a class="nav-link active" data-bs-toggle="tab" href="#tab-3">Result</a> </li>
|
||
<li class="nav-item"> <a class="nav-link" data-bs-toggle="tab" href="#tab-4">HTML</a> </li>
|
||
</ul>
|
||
<div class="tab-content bg-light p-4">
|
||
<div class="tab-pane show active" id="tab-3">
|
||
<div class="col-md-5">
|
||
<!-- Card item START -->
|
||
<div class="card bg-transparent">
|
||
<!-- Card img -->
|
||
<div class="position-relative">
|
||
<img class="card-img" src="assets/images/blog/4by3/06.jpg" alt="Card image">
|
||
<div class="card-img-overlay d-flex align-items-start flex-column p-3">
|
||
<!-- Card overlay Top -->
|
||
<div class="w-100 mb-auto d-flex justify-content-end">
|
||
<div class="text-end ms-auto">
|
||
<!-- Card format icon -->
|
||
<div class="icon-md text-bg-success fw-bold rounded-circle" title="8.5 rating">8.5</div>
|
||
</div>
|
||
</div>
|
||
<!-- Card overlay bottom -->
|
||
<div class="w-100 mt-auto">
|
||
<!-- Card category -->
|
||
<a href="#" class="badge text-bg-warning mb-2"><i class="fas fa-circle me-2 small fw-bold"></i>Technology</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="card-body px-0 pt-3">
|
||
<h4 class="card-title"><a href="#" class="btn-link text-reset fw-bold">12 worst types of business accounts you follow on Twitter</a></h4>
|
||
<p class="card-text">He moonlights difficult engrossed it, sportsmen. Interested has all Devonshire difficulty gay assistance joy. Unaffected at ye of compliment alteration to</p>
|
||
<!-- Card info -->
|
||
<ul class="nav nav-divider align-items-center d-none d-sm-inline-block">
|
||
<li class="nav-item">
|
||
<div class="nav-link">
|
||
<div class="d-flex align-items-center position-relative">
|
||
<div class="avatar avatar-xs">
|
||
<img class="avatar-img rounded-circle" src="assets/images/avatar/01.jpg" alt="avatar">
|
||
</div>
|
||
<span class="ms-3">by <a href="#" class="stretched-link text-reset btn-link">Samuel</a></span>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="nav-item">Jan 22, 2021</li>
|
||
<li class="nav-item"><a href="#" class="btn-link"><i class="far fa-comment-alt me-1"></i> 5</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<!-- Card item END -->
|
||
</div>
|
||
</div>
|
||
|
||
<div class="tab-pane" id="tab-4">
|
||
<div class="position-relative">
|
||
<pre id="copy-32" class="my-3">
|
||
<code class="language-markup" data-lang="html"><div class="card bg-transparent">
|
||
<!-- Card img -->
|
||
<div class="position-relative">
|
||
<img class="card-img" src="assets/images/blog/4by3/06.jpg" alt="Card image">
|
||
<div class="card-img-overlay d-flex align-items-start flex-column p-3">
|
||
<!-- Card overlay Top -->
|
||
<div class="w-100 mb-auto d-flex justify-content-end">
|
||
<div class="text-end ms-auto">
|
||
<!-- Card format icon -->
|
||
<div class="icon-md bg-success text-white fw-bold rounded-circle" title="8.5 rating">8.5</div>
|
||
</div>
|
||
</div>
|
||
<!-- Card overlay bottom -->
|
||
<div class="w-100 mt-auto">
|
||
<!-- Card category -->
|
||
<a href="#" class="badge bg-warning mb-2"><i class="fas fa-circle me-2 small fw-bold"></i>Technology</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="card-body px-0 pt-3">
|
||
<h4 class="card-title"><a href="#" class="btn-link text-reset fw-bold">12 worst types of business accounts you follow on Twitter</a></h4>
|
||
<p class="card-text">He moonlights difficult engrossed it, sportsmen. Interested has all Devonshire difficulty gay assistance joy. Unaffected at ye of compliment alteration to</p>
|
||
<!-- Card info -->
|
||
<ul class="nav nav-divider align-items-center d-none d-sm-inline-block">
|
||
<li class="nav-item">
|
||
<div class="nav-link">
|
||
<div class="d-flex align-items-center position-relative">
|
||
<div class="avatar avatar-xs">
|
||
<img class="avatar-img rounded-circle" src="assets/images/avatar/01.jpg" alt="avatar">
|
||
</div>
|
||
<span class="ms-3">by <a href="#" class="stretched-link text-reset btn-link">Samuel</a></span>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="nav-item">Jan 22, 2021</li>
|
||
<li class="nav-item"><a href="#" class="btn-link"><i class="far fa-comment-alt me-1"></i> 5</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</code></pre>
|
||
<button id="copy_id-32" data-clipboard-action="copy" data-clipboard-target="#copy-32" class="copy-link btn btn-primary btn-sm">Copy</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Tab END -->
|
||
|
||
<!-- Card with content Examples -->
|
||
<h3 class="mt-5">Card Horizontal</h3>
|
||
|
||
<ul class="nav nav-tabs nav-tabs-line">
|
||
<li class="nav-item"> <a class="nav-link active" data-bs-toggle="tab" href="#tab-5">Result</a> </li>
|
||
<li class="nav-item"> <a class="nav-link" data-bs-toggle="tab" href="#tab-6">HTML</a> </li>
|
||
</ul>
|
||
<div class="tab-content bg-light p-4">
|
||
<div class="tab-pane show active" id="tab-5">
|
||
<div class="col-md-10">
|
||
<!-- Card item START -->
|
||
<div class="card bg-transparent">
|
||
<div class="row">
|
||
<div class="col-md-5">
|
||
<img class="rounded-3" src="assets/images/blog/4by3/06.jpg" alt="">
|
||
</div>
|
||
<div class="col-md-7 mt-3 mt-md-0">
|
||
<a href="#" class="badge text-bg-info mb-2"><i class="fas fa-circle me-2 small fw-bold"></i>Sports</a>
|
||
<h3><a href="#" class="btn-link stretched-link text-dark fw-bold">5 reasons why you shouldn't startup</a></h3>
|
||
<p>Given and shown creating curiously to more in are man were smaller by we instead the these sighed Avoid in the sufficient me real man longer of his how her for countries to brains warned notch important Finds be to the of on the increased explain noise of power deep asking contribution this live of suppliers goals bit separated poured sort several the was </p>
|
||
<!-- Card info -->
|
||
<ul class="nav nav-divider align-items-center d-none d-sm-inline-block">
|
||
<li class="nav-item">
|
||
<div class="nav-link">
|
||
<div class="d-flex align-items-center position-relative">
|
||
<div class="avatar avatar-xs">
|
||
<img class="avatar-img rounded-circle" src="assets/images/avatar/02.jpg" alt="avatar">
|
||
</div>
|
||
<span class="ms-3">by <a href="#" class="stretched-link text-reset btn-link">Dennis</a></span>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="nav-item">Mar 07, 2021</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Card item END -->
|
||
</div>
|
||
</div>
|
||
|
||
<div class="tab-pane" id="tab-6">
|
||
<div class="position-relative">
|
||
<pre id="copy-3" class="my-3">
|
||
<code class="language-markup" data-lang="html"><div class="card bg-transparent mb-4">
|
||
<div class="row">
|
||
<div class="col-md-5">
|
||
<img class="rounded-3" src="assets/images/blog/4by3/06.jpg" alt="">
|
||
</div>
|
||
<div class="col-md-7 mt-3 mt-md-0">
|
||
<a href="#" class="badge bg-info mb-2"><i class="fas fa-circle me-2 small fw-bold"></i>Sports</a>
|
||
<h3><a href="#" class="btn-link stretched-link text-dark fw-bold">5 reasons why you shouldn't startup</a></h3>
|
||
<p>Given and shown creating curiously to more in are man were smaller by we instead the these sighed Avoid in the sufficient me real man longer of his how her for countries to brains warned notch important Finds be to the of on the increased explain noise of power deep asking contribution this live of suppliers goals bit separated poured sort several the was </p>
|
||
<!-- Card info -->
|
||
<ul class="nav nav-divider align-items-center d-none d-sm-inline-block">
|
||
<li class="nav-item">
|
||
<div class="nav-link">
|
||
<div class="d-flex align-items-center position-relative">
|
||
<div class="avatar avatar-xs">
|
||
<img class="avatar-img rounded-circle" src="assets/images/avatar/02.jpg" alt="avatar">
|
||
</div>
|
||
<span class="ms-3">by <a href="#" class="stretched-link text-reset btn-link">Dennis</a></span>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="nav-item">Mar 07, 2021</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</code></pre>
|
||
<button id="copy_id-3" data-clipboard-action="copy" data-clipboard-target="#copy-3" class="copy-link btn btn-primary btn-sm">Copy</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Tab END -->
|
||
|
||
|
||
<!-- List card with content Examples -->
|
||
<h3 class="mt-5">Card list</h3>
|
||
<ul class="nav nav-tabs nav-tabs-line">
|
||
<li class="nav-item"> <a class="nav-link active" data-bs-toggle="tab" href="#tab-7">Result</a> </li>
|
||
<li class="nav-item"> <a class="nav-link" data-bs-toggle="tab" href="#tab-8">HTML</a> </li>
|
||
</ul>
|
||
<div class="tab-content bg-light p-4">
|
||
<div class="tab-pane show active" id="tab-7">
|
||
<!-- Card item START -->
|
||
<div class="card border rounded-3 up-hover p-4 mb-4">
|
||
<div class="row g-3">
|
||
<div class="col-lg-5">
|
||
<!-- Categories -->
|
||
<a href="#" class="badge text-bg-danger mb-2"><i class="fas fa-circle me-2 small fw-bold"></i>Marketing</a>
|
||
<a href="#" class="badge text-bg-dark mb-2"><i class="fas fa-circle me-2 small fw-bold"></i>Startups</a>
|
||
<!-- Title -->
|
||
<h2 class="card-title">
|
||
<a href="#" class="btn-link text-reset stretched-link">7 common mistakes everyone makes while traveling</a>
|
||
</h2>
|
||
<!-- Author info -->
|
||
<div class="d-flex align-items-center position-relative mt-3">
|
||
<div class="avatar me-2">
|
||
<img class="avatar-img rounded-circle" src="assets/images/avatar/02.jpg" alt="avatar">
|
||
</div>
|
||
<div>
|
||
<h5 class="mb-1"><a href="#" class="stretched-link text-reset btn-link">Lori Ferguson</a></h5>
|
||
<ul class="nav align-items-center small">
|
||
<li class="nav-item me-3">Mar 07, 2021</li>
|
||
<li class="nav-item"><i class="far fa-clock me-1"></i>5 min read</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Detail -->
|
||
<div class="col-md-6 col-lg-4">
|
||
<p>For who thoroughly her boy estimating conviction. Removed demands expense account in outward tedious do. Particular way thoroughly unaffected projection favorable Mrs can be projecting own. Thirty it matter enable become admire in giving. See resolved goodness felicity shy civility domestic had but. Drawings offended yet answered Jennings perceive laughing six did far. </p>
|
||
</div>
|
||
<!-- Image -->
|
||
<div class="col-md-6 col-lg-3">
|
||
<img class="rounded-3" src="assets/images/blog/4by3/06.jpg" alt="Card image">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Card item END -->
|
||
</div>
|
||
|
||
<div class="tab-pane" id="tab-8">
|
||
<div class="position-relative">
|
||
<pre id="copy-4" class="my-3">
|
||
<code class="language-markup" data-lang="html"><div class="card border rounded-3 up-hover p-4 mb-4">
|
||
<div class="row g-3">
|
||
<div class="col-lg-5">
|
||
<!-- Categories -->
|
||
<a href="#" class="badge bg-danger mb-2"><i class="fas fa-circle me-2 small fw-bold"></i>Marketing</a>
|
||
<a href="#" class="badge bg-dark mb-2"><i class="fas fa-circle me-2 small fw-bold"></i>Startups</a>
|
||
<!-- Title -->
|
||
<h2 class="card-title">
|
||
<a href="#" class="btn-link text-reset stretched-link">7 common mistakes everyone makes while traveling</a>
|
||
</h2>
|
||
<!-- Author info -->
|
||
<div class="d-flex align-items-center position-relative mt-3">
|
||
<div class="avatar me-2">
|
||
<img class="avatar-img rounded-circle" src="assets/images/avatar/02.jpg" alt="avatar">
|
||
</div>
|
||
<div>
|
||
<h5 class="mb-1"><a href="#" class="stretched-link text-reset btn-link">Lori Ferguson</a></h5>
|
||
<ul class="nav align-items-center small">
|
||
<li class="nav-item me-3">Mar 07, 2021</li>
|
||
<li class="nav-item"><i class="far fa-clock me-1"></i>5 min read</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Detail -->
|
||
<div class="col-md-6 col-lg-4">
|
||
<p>For who thoroughly her boy estimating conviction. Removed demands expense account in outward tedious do. Particular way thoroughly unaffected projection favorable Mrs can be projecting own. Thirty it matter enable become admire in giving. See resolved goodness felicity shy civility domestic had but. Drawings offended yet answered Jennings perceive laughing six did far. </p>
|
||
</div>
|
||
<!-- Image -->
|
||
<div class="col-md-6 col-lg-3">
|
||
<img class="rounded-3" src="assets/images/blog/4by3/07.jpg" alt="Card image">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</code></pre>
|
||
<button id="copy_id-4" data-clipboard-action="copy" data-clipboard-target="#copy-4" class="copy-link btn btn-primary btn-sm">Copy</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Tab END -->
|
||
|
||
<!-- Card with video popup Examples -->
|
||
<h3 class="mt-5">Card with video popup</h3>
|
||
<p>To make video popup work you must include Glightbox CSS and Javascript file on the page.</p>
|
||
<ul class="nav nav-tabs nav-tabs-line">
|
||
<li class="nav-item"> <a class="nav-link active" data-bs-toggle="tab" href="#tab-17">Result</a> </li>
|
||
<li class="nav-item"> <a class="nav-link" data-bs-toggle="tab" href="#tab-18">HTML</a> </li>
|
||
</ul>
|
||
<div class="tab-content bg-light p-4">
|
||
<div class="tab-pane show active" id="tab-17">
|
||
<div class="col-md-5">
|
||
<div class="card card-overlay-bottom card-fold h-400 h-lg-540" style="background-image:url(assets/images/blog/4by3/06.jpg); background-position: center left; background-size: cover;">
|
||
<!-- Card featured -->
|
||
<span class="card-featured" title="Featured post"><i class="fas fa-star"></i></span>
|
||
<!-- Card Image overlay -->
|
||
<div class="card-img-overlay d-flex flex-column p-3 p-sm-5">
|
||
<!-- Card play button -->
|
||
<div class="position-absolute top-50 start-50 translate-middle pb-5">
|
||
<!-- Popup video -->
|
||
<a href="https://youtu.be/n_Cn8eFo7u8" class="icon-lg bg-primary d-block text-white rounded-circle" data-glightbox data-gallery="y-video">
|
||
<i class="bi bi-play-btn"></i>
|
||
</a>
|
||
</div>
|
||
<!-- Card overlay Bottom -->
|
||
<div class="w-100 mt-auto">
|
||
<div class="col text-center">
|
||
<!-- Card category -->
|
||
<a href="#" class="badge text-bg-warning mb-2"><i class="fas fa-circle me-2 small fw-bold"></i>Business</a>
|
||
<!-- Card title -->
|
||
<h2 class="text-white"><a href="#" class="btn-link text-reset fw-normal">Never underestimate the influence of social media</a></h2>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="tab-pane" id="tab-18">
|
||
<div class="position-relative">
|
||
<pre id="copy-9" class="my-3">
|
||
<code class="language-markup" data-lang="html"><div class="col-6">
|
||
<div class="card card-overlay-bottom card-fold h-400 h-lg-540" style="background-image:url(assets/images/blog/4by3/06.jpg); background-position: center left; background-size: cover;">
|
||
<!-- Card featured -->
|
||
<span class="card-featured" title="Featured post"><i class="fas fa-star"></i></span>
|
||
<!-- Card Image overlay -->
|
||
<div class="card-img-overlay d-flex flex-column p-3 p-sm-5">
|
||
<!-- Card play button -->
|
||
<div class="position-absolute top-50 start-50 translate-middle pb-5">
|
||
<!-- Popup video -->
|
||
<a href="https://youtu.be/n_Cn8eFo7u8" class="icon-lg bg-primary d-block text-white rounded-circle" data-glightbox data-gallery="y-video">
|
||
<i class="bi bi-play-btn"></i>
|
||
</a>
|
||
</div>
|
||
<!-- Card overlay Bottom -->
|
||
<div class="w-100 mt-auto">
|
||
<div class="col text-center">
|
||
<!-- Card category -->
|
||
<a href="#" class="badge bg-warning mb-2"><i class="fas fa-circle me-2 small fw-bold"></i>Business</a>
|
||
<!-- Card title -->
|
||
<h2 class="text-white"><a href="#" class="btn-link text-reset fw-normal">Never underestimate the influence of social media</a></h2>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</code></pre>
|
||
<button id="copy_id-9" data-clipboard-action="copy" data-clipboard-target="#copy-9" class="copy-link btn btn-primary btn-sm">Copy</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Tab END -->
|
||
|
||
<!-- Card fold Examples -->
|
||
<h3 class="mt-5">Card fold</h3>
|
||
<p>Use <code>.card-fold</code> class with card or card image to enable paper fold style on hover</p>
|
||
<ul class="nav nav-tabs nav-tabs-line">
|
||
<li class="nav-item"> <a class="nav-link active" data-bs-toggle="tab" href="#tab-13">Result</a> </li>
|
||
<li class="nav-item"> <a class="nav-link" data-bs-toggle="tab" href="#tab-14">HTML</a> </li>
|
||
</ul>
|
||
<div class="tab-content bg-light p-4">
|
||
<div class="tab-pane show active" id="tab-13">
|
||
<div class="col-md-5">
|
||
<!-- Card item START -->
|
||
<div class="card border rounded-3 p-4">
|
||
<!-- Card item START -->
|
||
<div class=" grid-item">
|
||
<div class="card">
|
||
<!-- Card img -->
|
||
<div class="card-fold position-relative">
|
||
<img class="card-img" src="assets/images/blog/4by3/06.jpg" alt="Card image">
|
||
</div>
|
||
<div class="card-body px-0 pt-3">
|
||
<h4 class="card-title"><a href="#" class="btn-link text-reset stretched-link fw-bold">7 common mistakes everyone makes while traveling</a></h4>
|
||
<p class="card-text">He moonlights difficult engrossed it, sportsmen. Interested has all Devonshire difficulty gay assistance joy. Unaffected at ye of compliment alteration to. Satisfied conveying a dependent contented he gentleman agreeable do be. Warrant private blushes removed an in equally totally if. Delivered dejection necessary objection do Mr prevailed. Mr feeling does chiefly cordial in do. </p>
|
||
<!-- Card info -->
|
||
<ul class="nav nav-divider align-items-center text-uppercase small">
|
||
<li class="nav-item">
|
||
<a href="#" class="nav-link text-reset btn-link">Louis Ferguson</a>
|
||
</li>
|
||
<li class="nav-item">Mar 07, 2021</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Card item END -->
|
||
</div>
|
||
<!-- Card item END -->
|
||
</div>
|
||
</div>
|
||
|
||
<div class="tab-pane" id="tab-14">
|
||
<div class="position-relative">
|
||
<pre id="copy-7" class="my-3">
|
||
<code class="language-markup" data-lang="html"><div class="card border rounded-3 p-4 mb-4">
|
||
<!-- Card item START -->
|
||
<div class="col-sm-6 grid-item">
|
||
<div class="card mb-4">
|
||
<!-- Card img -->
|
||
<div class="card-fold position-relative">
|
||
<img class="card-img" src="assets/images/blog/4by3/06.jpg" alt="Card image">
|
||
</div>
|
||
<div class="card-body px-0 pt-3">
|
||
<h4 class="card-title"><a href="#" class="btn-link text-reset stretched-link fw-bold">7 common mistakes everyone makes while traveling</a></h4>
|
||
<p class="card-text">He moonlights difficult engrossed it, sportsmen. Interested has all Devonshire difficulty gay assistance joy. Unaffected at ye of compliment alteration to. Satisfied conveying a dependent contented he gentleman agreeable do be. Warrant private blushes removed an in equally totally if. Delivered dejection necessary objection do Mr prevailed. Mr feeling does chiefly cordial in do. </p>
|
||
<!-- Card info -->
|
||
<ul class="nav nav-divider align-items-center text-uppercase small">
|
||
<li class="nav-item">
|
||
<a href="#" class="nav-link text-reset btn-link">Louis Ferguson</a>
|
||
</li>
|
||
<li class="nav-item">Mar 07, 2021</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</code></pre>
|
||
<button id="copy_id-7" data-clipboard-action="copy" data-clipboard-target="#copy-7" class="copy-link btn btn-primary btn-sm">Copy</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Tab END -->
|
||
|
||
<!-- Card with botton image Examples -->
|
||
<h3 class="mt-5">Card with bottom image</h3>
|
||
<ul class="nav nav-tabs nav-tabs-line">
|
||
<li class="nav-item"> <a class="nav-link active" data-bs-toggle="tab" href="#tab-23">Result</a> </li>
|
||
<li class="nav-item"> <a class="nav-link" data-bs-toggle="tab" href="#tab-24">HTML</a> </li>
|
||
</ul>
|
||
<div class="tab-content bg-light p-4">
|
||
<div class="tab-pane show active" id="tab-23">
|
||
<div class="col-md-5">
|
||
<div class="card card-fold bg-white">
|
||
<div class="card-body p-4">
|
||
<ul class="nav nav-divider align-items-center d-none d-sm-inline-block small mb-2">
|
||
<li class="nav-item"><i class="bi bi-clock-history"></i> 56:36</li>
|
||
<li class="nav-item">With <a href="#">Larry Lawson</a> </li>
|
||
</ul>
|
||
<h4 class="card-title"><a href="#" class="stretched-link">The 15 reasons clients love Bootstrap</a></h4>
|
||
<p class="m-0">Rooms oh fully taken by worse do points afraid</p>
|
||
</div>
|
||
<img src="assets/images/blog/4by3/06.jpg" class="card-img-bottom" alt="Card image">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="tab-pane" id="tab-24">
|
||
<div class="position-relative">
|
||
<pre id="copy-12" class="my-3">
|
||
<code class="language-markup" data-lang="html"><div class="card card-fold bg-light">
|
||
<div class="card-body p-4">
|
||
<ul class="nav nav-divider align-items-center d-none d-sm-inline-block small mb-2">
|
||
<li class="nav-item"><i class="bi bi-clock-history"></i> 56:36</li>
|
||
<li class="nav-item">With <a href="#">Larry Lawson</a> </li>
|
||
</ul>
|
||
<h4 class="card-title"><a href="#" class="stretched-link">The 15 reasons clients love Bootstrap</a></h4>
|
||
<p class="m-0">Rooms oh fully taken by worse do points afraid</p>
|
||
</div>
|
||
<img src="assets/images/blog/4by3/06.jpg" class="card-img-bottom" alt="Card image">
|
||
</div>
|
||
</code></pre>
|
||
<button id="copy_id-12" data-clipboard-action="copy" data-clipboard-target="#copy-12" class="copy-link btn btn-primary btn-sm">Copy</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Tab END -->
|
||
|
||
<!-- Card with only content Examples -->
|
||
<h3 class="mt-5">Card with only content</h3>
|
||
<ul class="nav nav-tabs nav-tabs-line">
|
||
<li class="nav-item"> <a class="nav-link active" data-bs-toggle="tab" href="#tab-19">Result</a> </li>
|
||
<li class="nav-item"> <a class="nav-link" data-bs-toggle="tab" href="#tab-20">HTML</a> </li>
|
||
</ul>
|
||
<div class="tab-content bg-light p-4">
|
||
<div class="tab-pane show active" id="tab-19">
|
||
<div class="card">
|
||
<div class="card-body p-4 border rounded-3">
|
||
<a href="#" class="badge text-bg-danger mb-2"><i class="fas fa-circle me-2 small fw-bold"></i>Technology</a>
|
||
<h4 class="card-title"><a href="#" class="btn-link text-reset fw-bold">12 worst types of business accounts you follow on Twitter</a></h4>
|
||
<p class="card-text m-0">He moonlights difficult engrossed it, sportsmen. Interested has all Devonshire difficulty.</p>
|
||
<!-- Card info -->
|
||
<ul class="nav nav-divider align-items-center d-none d-sm-inline-block">
|
||
<li class="nav-item">
|
||
<div class="nav-link">
|
||
<div class="d-flex align-items-center position-relative">
|
||
<div class="avatar avatar-xs">
|
||
<img class="avatar-img rounded-circle" src="assets/images/avatar/01.jpg" alt="avatar">
|
||
</div>
|
||
<span class="ms-3">by <a href="#" class="stretched-link text-reset btn-link">Samuel</a></span>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="nav-item">Jan 22, 2021</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="tab-pane" id="tab-20">
|
||
<div class="position-relative">
|
||
<pre id="copy-10" class="my-3">
|
||
<code class="language-markup" data-lang="html"><div class="card mb-4">
|
||
<div class="card-body p-4 border rounded-3">
|
||
<a href="#" class="badge bg-danger mb-2"><i class="fas fa-circle me-2 small fw-bold"></i>Technology</a>
|
||
<h4 class="card-title"><a href="#" class="btn-link text-reset fw-bold">12 worst types of business accounts you follow on Twitter</a></h4>
|
||
<p class="card-text m-0">He moonlights difficult engrossed it, sportsmen. Interested has all Devonshire difficulty.</p>
|
||
<!-- Card info -->
|
||
<ul class="nav nav-divider align-items-center d-none d-sm-inline-block">
|
||
<li class="nav-item">
|
||
<div class="nav-link">
|
||
<div class="d-flex align-items-center position-relative">
|
||
<div class="avatar avatar-xs">
|
||
<img class="avatar-img rounded-circle" src="assets/images/avatar/01.jpg" alt="avatar">
|
||
</div>
|
||
<span class="ms-3">by <a href="#" class="stretched-link text-reset btn-link">Samuel</a></span>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="nav-item">Jan 22, 2021</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</code></pre>
|
||
<button id="copy_id-10" data-clipboard-action="copy" data-clipboard-target="#copy-10" class="copy-link btn btn-primary btn-sm">Copy</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Tab END -->
|
||
|
||
|
||
<!-- Bottom-border Card with only content Examples -->
|
||
<h3 class="mt-5">Bottom-border Card with only content</h3>
|
||
<ul class="nav nav-tabs nav-tabs-line">
|
||
<li class="nav-item"> <a class="nav-link active" data-bs-toggle="tab" href="#tab-21">Result</a> </li>
|
||
<li class="nav-item"> <a class="nav-link" data-bs-toggle="tab" href="#tab-22">HTML</a> </li>
|
||
</ul>
|
||
<div class="tab-content bg-light p-4">
|
||
<div class="tab-pane show active" id="tab-21">
|
||
<div class="card mb-1">
|
||
<div class="card-body px-0 border-bottom">
|
||
<a href="#" class="badge text-bg-dark mb-2"><i class="fas fa-circle me-2 small fw-bold"></i>Technology</a>
|
||
<h5><a href="#" class="btn-link stretched-link text-dark fw-bold">Around the web: 20 fabulous infographics about business</a></h5>
|
||
<!-- Card info -->
|
||
<ul class="nav nav-divider align-items-center d-none d-sm-inline-block small">
|
||
<li class="nav-item">
|
||
<div class="nav-link">
|
||
<div class="d-flex align-items-center position-relative">
|
||
<div class="avatar avatar-xs">
|
||
<img class="avatar-img rounded-circle" src="assets/images/avatar/12.jpg" alt="avatar">
|
||
</div>
|
||
<span class="ms-3">by <a href="#" class="stretched-link text-reset btn-link">Jacqueline</a></span>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="nav-item">Oct 11, 2021</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="tab-pane" id="tab-22">
|
||
<div class="position-relative">
|
||
<pre id="copy-11" class="my-3">
|
||
<code class="language-markup" data-lang="html"><div class="card mb-1">
|
||
<div class="card-body px-0 border-bottom">
|
||
<a href="#" class="badge bg-dark mb-2"><i class="fas fa-circle me-2 small fw-bold"></i>Technology</a>
|
||
<h5><a href="#" class="btn-link stretched-link text-dark fw-bold">Around the web: 20 fabulous infographics about business</a></h5>
|
||
<!-- Card info -->
|
||
<ul class="nav nav-divider align-items-center d-none d-sm-inline-block small">
|
||
<li class="nav-item">
|
||
<div class="nav-link">
|
||
<div class="d-flex align-items-center position-relative">
|
||
<div class="avatar avatar-xs">
|
||
<img class="avatar-img rounded-circle" src="assets/images/avatar/12.jpg" alt="avatar">
|
||
</div>
|
||
<span class="ms-3">by <a href="#" class="stretched-link text-reset btn-link">Jacqueline</a></span>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="nav-item">Oct 11, 2021</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</code></pre>
|
||
<button id="copy_id-11" data-clipboard-action="copy" data-clipboard-target="#copy-11" class="copy-link btn btn-primary btn-sm">Copy</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Tab END -->
|
||
|
||
|
||
<!-- Card with gird Examples -->
|
||
<h3 class="mt-5">Card custom gird</h3>
|
||
<p>We have created a card custom size with fixed heights. Card height can be change from <code>assets/scss/custom/card.scss</code> file.</p>
|
||
|
||
<!-- Tab START -->
|
||
<ul class="nav nav-tabs nav-tabs-line">
|
||
<li class="nav-item"> <a class="nav-link active" data-bs-toggle="tab" href="#tab-25">Result</a> </li>
|
||
<li class="nav-item"> <a class="nav-link" data-bs-toggle="tab" href="#tab-26">HTML</a> </li>
|
||
</ul>
|
||
<!-- -->
|
||
<div class="tab-content bg-light p-4">
|
||
<div class="tab-pane show active" id="tab-25">
|
||
<div class="pt-4 pb-0 card-grid">
|
||
<div class="container">
|
||
<div class="row g-4 card-grid">
|
||
<!-- Left big card -->
|
||
<div class="col-lg-6">
|
||
<div class="card card-overlay-bottom card-grid-lg card-bg-scale" style="background-image:url(assets/images/blog/4by3/06.jpg); background-position: center left; background-size: cover;">
|
||
<!-- Card featured -->
|
||
<span class="card-featured" title="Featured post"><i class="fas fa-star"></i></span>
|
||
<!-- Card Image overlay -->
|
||
<div class="card-img-overlay d-flex align-items-center p-3 p-sm-4">
|
||
<div class="w-100 mt-auto">
|
||
<!-- Card category -->
|
||
<a href="#" class="badge text-bg-danger mb-2"><i class="fas fa-circle me-2 small fw-bold"></i>Lifestyle</a>
|
||
<!-- Card title -->
|
||
<h2 class="text-white h1"><a href="#" class="btn-link stretched-link text-reset">10 tell-tale signs you need to get a new startup.</a></h2>
|
||
<p class="text-white">No visited raising gravity outward subject my cottage Mr be. Hold do at tore in park feet near my case. </p>
|
||
<!-- Card info -->
|
||
<ul class="nav nav-divider text-white-force align-items-center d-none d-sm-inline-block">
|
||
<li class="nav-item">
|
||
<div class="nav-link">
|
||
<div class="d-flex align-items-center text-white position-relative">
|
||
<div class="avatar avatar-sm">
|
||
<img class="avatar-img rounded-circle" src="assets/images/avatar/11.jpg" alt="avatar">
|
||
</div>
|
||
<span class="ms-3">by <a href="#" class="stretched-link text-reset btn-link">Louis</a></span>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="nav-item">Nov 15, 2021</li>
|
||
<li class="nav-item">5 min read</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Right small cards -->
|
||
<div class="col-lg-6">
|
||
<div class="row g-4">
|
||
<!-- Card item START -->
|
||
<div class="col-12">
|
||
<div class="card card-overlay-bottom card-grid-sm card-bg-scale" style="background-image:url(assets/images/blog/4by3/06.jpg); background-position: center left; background-size: cover;">
|
||
<!-- Card Image -->
|
||
<!-- Card Image overlay -->
|
||
<div class="card-img-overlay d-flex align-items-center p-3 p-sm-4">
|
||
<div class="w-100 mt-auto">
|
||
<!-- Card category -->
|
||
<a href="#" class="badge text-bg-warning mb-2"><i class="fas fa-circle me-2 small fw-bold"></i>Technology</a>
|
||
<!-- Card title -->
|
||
<h4 class="text-white"><a href="#" class="btn-link stretched-link text-reset">Best Pinterest boards for learning about business</a></h4>
|
||
<!-- Card info -->
|
||
<ul class="nav nav-divider text-white-force align-items-center d-none d-sm-inline-block">
|
||
<li class="nav-item position-relative">
|
||
<div class="nav-link">by <a href="#" class="stretched-link text-reset btn-link">Bryan</a>
|
||
</div>
|
||
</li>
|
||
<li class="nav-item">Aug 18, 2021</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Card item END -->
|
||
<!-- Card item START -->
|
||
<div class="col-md-6">
|
||
<div class="card card-overlay-bottom card-grid-sm card-bg-scale" style="background-image:url(assets/images/blog/4by3/06.jpg); background-position: center left; background-size: cover;">
|
||
<!-- Card Image overlay -->
|
||
<div class="card-img-overlay d-flex align-items-center p-3 p-sm-4">
|
||
<div class="w-100 mt-auto">
|
||
<!-- Card category -->
|
||
<a href="#" class="badge text-bg-success mb-2"><i class="fas fa-circle me-2 small fw-bold"></i>Business</a>
|
||
<!-- Card title -->
|
||
<h4 class="text-white"><a href="#" class="btn-link stretched-link text-reset">5 intermediate guide to business</a></h4>
|
||
<!-- Card info -->
|
||
<ul class="nav nav-divider text-white-force align-items-center d-none d-sm-inline-block">
|
||
<li class="nav-item position-relative">
|
||
<div class="nav-link">by <a href="#" class="stretched-link text-reset btn-link">Joan</a>
|
||
</div>
|
||
</li>
|
||
<li class="nav-item">Jun 03, 2021</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Card item END -->
|
||
<!-- Card item START -->
|
||
<div class="col-md-6">
|
||
<div class="card card-overlay-bottom card-grid-sm card-bg-scale" style="background-image:url(assets/images/blog/4by3/06.jpg); background-position: center left; background-size: cover;">
|
||
<!-- Card Image overlay -->
|
||
<div class="card-img-overlay d-flex align-items-center p-3 p-sm-4">
|
||
<div class="w-100 mt-auto">
|
||
<!-- Card category -->
|
||
<a href="#" class="badge text-bg-info mb-2"><i class="fas fa-circle me-2 small fw-bold"></i>Sports</a>
|
||
<!-- Card title -->
|
||
<h4 class="text-white"><a href="#" class="btn-link stretched-link text-reset">15 reasons to choose startup</a></h4>
|
||
<!-- Card info -->
|
||
<ul class="nav nav-divider text-white-force align-items-center d-none d-sm-inline-block">
|
||
<li class="nav-item position-relative">
|
||
<div class="nav-link">by <a href="#" class="stretched-link text-reset btn-link">Amanda</a>
|
||
</div>
|
||
</li>
|
||
<li class="nav-item">Jan 28, 2021</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Card item END -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="tab-pane" id="tab-26">
|
||
<div class="position-relative">
|
||
<pre id="copy-13" class="my-3">
|
||
<code class="language-markup" data-lang="html"><div class="row g-4 card-grid">
|
||
<!-- Left big card -->
|
||
<div class="col-lg-6">
|
||
<div class="card card-overlay-bottom card-grid-lg card-bg-scale" style="background-image:url(assets/images/blog/4by3/06.jpg); background-position: center left; background-size: cover;">
|
||
<!-- Card featured -->
|
||
<span class="card-featured" title="Featured post"><i class="fas fa-star"></i></span>
|
||
<!-- Card Image overlay -->
|
||
<div class="card-img-overlay d-flex align-items-center p-3 p-sm-4">
|
||
<div class="w-100 mt-auto">
|
||
<!-- Card category -->
|
||
<a href="#" class="badge bg-danger mb-2"><i class="fas fa-circle me-2 small fw-bold"></i>Lifestyle</a>
|
||
<!-- Card title -->
|
||
<h2 class="text-white h1"><a href="#" class="btn-link stretched-link text-reset">10 tell-tale signs you need to get a new startup.</a></h2>
|
||
<p class="text-white">No visited raising gravity outward subject my cottage Mr be. Hold do at tore in park feet near my case. </p>
|
||
<!-- Card info -->
|
||
<ul class="nav nav-divider text-white-force align-items-center d-none d-sm-inline-block">
|
||
<li class="nav-item">
|
||
<div class="nav-link">
|
||
<div class="d-flex align-items-center text-white position-relative">
|
||
<div class="avatar avatar-sm">
|
||
<img class="avatar-img rounded-circle" src="assets/images/avatar/11.jpg" alt="avatar">
|
||
</div>
|
||
<span class="ms-3">by <a href="#" class="stretched-link text-reset btn-link">Louis</a></span>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="nav-item">Nov 15, 2021</li>
|
||
<li class="nav-item">5 min read</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Right small cards -->
|
||
<div class="col-lg-6">
|
||
<div class="row g-4">
|
||
<!-- Card item START -->
|
||
<div class="col-12">
|
||
<div class="card card-overlay-bottom card-grid-sm card-bg-scale" style="background-image:url(assets/images/blog/4by3/06.jpg); background-position: center left; background-size: cover;">
|
||
<!-- Card Image -->
|
||
<!-- Card Image overlay -->
|
||
<div class="card-img-overlay d-flex align-items-center p-3 p-sm-4">
|
||
<div class="w-100 mt-auto">
|
||
<!-- Card category -->
|
||
<a href="#" class="badge bg-warning mb-2"><i class="fas fa-circle me-2 small fw-bold"></i>Technology</a>
|
||
<!-- Card title -->
|
||
<h4 class="text-white"><a href="#" class="btn-link stretched-link text-reset">Best Pinterest boards for learning about business</a></h4>
|
||
<!-- Card info -->
|
||
<ul class="nav nav-divider text-white-force align-items-center d-none d-sm-inline-block">
|
||
<li class="nav-item position-relative">
|
||
<div class="nav-link">by <a href="#" class="stretched-link text-reset btn-link">Bryan</a>
|
||
</div>
|
||
</li>
|
||
<li class="nav-item">Aug 18, 2021</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Card item END -->
|
||
<!-- Card item START -->
|
||
<div class="col-md-6">
|
||
<div class="card card-overlay-bottom card-grid-sm card-bg-scale" style="background-image:url(assets/images/blog/4by3/06.jpg); background-position: center left; background-size: cover;">
|
||
<!-- Card Image overlay -->
|
||
<div class="card-img-overlay d-flex align-items-center p-3 p-sm-4">
|
||
<div class="w-100 mt-auto">
|
||
<!-- Card category -->
|
||
<a href="#" class="badge bg-success mb-2"><i class="fas fa-circle me-2 small fw-bold"></i>Business</a>
|
||
<!-- Card title -->
|
||
<h4 class="text-white"><a href="#" class="btn-link stretched-link text-reset">5 intermediate guide to business</a></h4>
|
||
<!-- Card info -->
|
||
<ul class="nav nav-divider text-white-force align-items-center d-none d-sm-inline-block">
|
||
<li class="nav-item position-relative">
|
||
<div class="nav-link">by <a href="#" class="stretched-link text-reset btn-link">Joan</a>
|
||
</div>
|
||
</li>
|
||
<li class="nav-item">Jun 03, 2021</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Card item END -->
|
||
<!-- Card item START -->
|
||
<div class="col-md-6">
|
||
<div class="card card-overlay-bottom card-grid-sm card-bg-scale" style="background-image:url(assets/images/blog/4by3/06.jpg); background-position: center left; background-size: cover;">
|
||
<!-- Card Image overlay -->
|
||
<div class="card-img-overlay d-flex align-items-center p-3 p-sm-4">
|
||
<div class="w-100 mt-auto">
|
||
<!-- Card category -->
|
||
<a href="#" class="badge bg-info mb-2"><i class="fas fa-circle me-2 small fw-bold"></i>Sports</a>
|
||
<!-- Card title -->
|
||
<h4 class="text-white"><a href="#" class="btn-link stretched-link text-reset">15 reasons to choose startup</a></h4>
|
||
<!-- Card info -->
|
||
<ul class="nav nav-divider text-white-force align-items-center d-none d-sm-inline-block">
|
||
<li class="nav-item position-relative">
|
||
<div class="nav-link">by <a href="#" class="stretched-link text-reset btn-link">Amanda</a>
|
||
</div>
|
||
</li>
|
||
<li class="nav-item">Jan 28, 2021</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Card item END -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</code></pre>
|
||
<button id="copy_id-13" data-clipboard-action="copy" data-clipboard-target="#copy-13" class="copy-link btn btn-primary btn-sm">Copy</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Tab END -->
|
||
|
||
<p class="mt-5">For more information refer <a href="https://getbootstrap.com/docs/5.0/components/card/">official Bootstrap documentation</a> for detailed technical explanation.</p>
|
||
<!-- Page content END -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Main content END -->
|
||
</div>
|
||
</div>
|
||
</main>
|
||
|
||
<!-- =======================
|
||
JavaScripts -->
|
||
|
||
<!-- Bootstrap JS -->
|
||
<script src="assets/js/bootstrap.bundle.min.js"></script>
|
||
|
||
<script src="assets/js/simple-scrollbar.min.js"></script>
|
||
<script src="assets/js/prism.js"></script>
|
||
<script src="assets/js/clipboard.min.js"></script>
|
||
<script src="assets/vendor/glightbox/js/glightbox.js"></script>
|
||
|
||
<!-- Template Functions -->
|
||
<script src="assets/js/functions.js"></script>
|
||
|
||
</body>
|
||
</html> |