VvebOIDC/public/themes/solutry/sections/posts.html

334 lines
16 KiB
HTML

<html data-vvvebjs-editor><head><base src="../"><link href="../css/style.bundle.css" rel="stylesheet"><link href="../css/screenshots.css" rel="stylesheet"><style>[data-reveal] {
opacity: 1;
transform: translate(0);
}</style><link href="../css/screenshots.css" rel="stylesheet"></head><body><section title="Posts 1" class="posts-1" aria-label="latest-post-1">
<div class="container">
<div class="row">
<div class="col-12">
<div class="section-heading text-center">
<h2 class="text-center display-6 mb-1 fw-bold">Latest Posts</h2>
<p class="lead text-center text-muted mb-4">Fresh updates from the industry.</p>
</div>
</div>
</div>
</div>
<div class="container" data-v-component-posts="posts-1" data-v-limit="3" data-v-image_size="medium">
<div class="row">
<div class="col-12 col-lg-4 mb-2" data-aos="fade-up" data-aos-delay="000" data-v-post>
<article class="card h-100 shadow-sm">
<div class="card-img-top" data-v-if="post.image">
<img src="demo/img/video-1.webp" alt="" class="w-100" loading="lazy" data-v-size="thumb" data-v-post-image>
</div>
<!-- Post Title -->
<a data-v-post-url>
<div class="card-body p-4">
<div class="post-title card-title">
<h3 class="h4 mb-3" data-v-post-name>
Vivamus sed nunc in arcu cursus mollis quis et orci. Interdum et malesuada
</h3>
</div>
<!-- Hover Content -->
<p class="card-text text-muted" data-v-post-excerpt>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce enim nulla, mollis eu metus in, sagittis fringilla tortor. Phasellus purus dignissim convallis.</p>
<button title="{$post.name}" role="button" class="btn btn-link px-0">
<span>Read more</span>
<i class="la la-angle-right"></i>
</button>
</div>
</a>
</article>
</div>
<div class="col-12 col-lg-4 mb-2" data-aos="fade-up" data-aos-delay="100" data-v-post>
<article class="card h-100 shadow-sm">
<div class="card-img-top" data-v-if="post.image">
<img src="demo/img/video-1.webp" alt="" class="w-100" loading="lazy" data-v-size="thumb" data-v-post-image>
</div>
<!-- Post Title -->
<a data-v-post-url>
<div class="card-body p-4">
<div class="post-title card-title">
<h3 class="h4 mb-3" data-v-post-name>
Vivamus sed nunc in arcu cursus mollis quis et orci. Interdum et malesuada
</h3>
</div>
<!-- Hover Content -->
<p class="card-text text-muted" data-v-post-excerpt>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce enim nulla, mollis eu metus in, sagittis fringilla tortor. Phasellus purus dignissim convallis.</p>
<button title="{$post.name}" role="button" class="btn btn-link px-0">
<span>Read more</span>
<i class="la la-angle-right"></i>
</button>
</div>
</a>
</article>
</div>
<div class="col-12 col-lg-4 mb-2" data-aos="fade-up" data-aos-delay="200" data-v-post>
<article class="card h-100 shadow-sm">
<div class="card-img-top" data-v-if="post.image">
<img src="demo/img/video-1.webp" alt="" class="w-100" loading="lazy" data-v-size="thumb" data-v-post-image>
</div>
<!-- Post Title -->
<a data-v-post-url>
<div class="card-body p-4">
<div class="post-title card-title">
<h3 class="h4 mb-3" data-v-post-name>
Vivamus sed nunc in arcu cursus mollis quis et orci. Interdum et malesuada
</h3>
</div>
<!-- Hover Content -->
<p class="card-text text-muted" data-v-post-excerpt>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce enim nulla, mollis eu metus in, sagittis fringilla tortor. Phasellus purus dignissim convallis.</p>
<button title="{$post.name}" role="button" class="btn btn-link px-0">
<span>Read more</span>
<i class="la la-angle-right"></i>
</button>
</div>
</a>
</article>
</div>
</div>
</div>
</section><section title="Posts 2" class="pt-5 pb-5" aria-label="posts-2">
<div class="container">
<div class="row">
<div class="col-6">
<h3 class="mb-3">News sections</h3>
</div>
<div class="col-6 text-end">
<a class="btn btn-primary mb-3 me-1" href="#carouselPosts2" role="button" data-bs-slide="prev">
<i class="la la-arrow-left"></i>
</a>
<a class="btn btn-primary mb-3 " href="#carouselPosts2" role="button" data-bs-slide="next">
<i class="la la-arrow-right"></i>
</a>
</div>
<div class="col-12">
<div id="carouselPosts2" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active" data-v-component-posts="slide1" data-v-limit="3" data-v-page="1" data-v-image_size="medium">
<div class="row">
<div class="col-md-4 mb-3" data-v-post>
<div class="card">
<img class="img-fluid" loading="lazy" alt="day67-dog" src="demo/img/illustrations.co/day67-dog.svg" data-v-post-image>
<div class="card-body">
<a href="content/post.html" data-v-post-url>
<h4 class="card-title" data-v-post-name>Interdum et malesuada</h4>
</a>
<p class="card-text" data-v-post-excerpt>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce enim nulla, mollis eu metus in, sagittis fringilla tortor. Phasellus purus dignissim convallis.</p>
</div>
</div>
</div>
<div class="col-md-4 mb-3" data-v-post>
<div class="card">
<img class="img-fluid" loading="lazy" alt="day22-owl" src="demo/img/illustrations.co/day22-owl.svg" data-v-post-image>
<div class="card-body">
<a href="content/post.html" data-v-post-url>
<h4 class="card-title" data-v-post-name>Interdum et malesuada</h4>
</a>
<p class="card-text" data-v-post-excerpt>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce enim nulla, mollis eu metus in, sagittis fringilla tortor. Phasellus purus dignissim convallis.</p>
</div>
</div>
</div>
<div class="col-md-4 mb-3" data-v-post>
<div class="card">
<img class="img-fluid" loading="lazy" alt="day68-happy-cat" src="demo/img/illustrations.co/day68-happy-cat.svg" data-v-post-image>
<div class="card-body">
<a href="content/post.html" data-v-post-url>
<h4 class="card-title" data-v-post-name>Interdum et malesuada</h4>
</a>
<p class="card-text" data-v-post-excerpt>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce enim nulla, mollis eu metus in, sagittis fringilla tortor. Phasellus purus dignissim convallis.</p>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item" data-v-component-posts="slide2" data-v-limit="3" data-v-page="2">
<div class="row">
<div class="col-md-4 mb-3" data-v-post>
<div class="card">
<img class="img-fluid" loading="lazy" alt="day79-coffee" src="demo/img/illustrations.co/day79-coffee.svg" data-v-post-image>
<div class="card-body">
<a href="content/post.html" data-v-post-url>
<h4 class="card-title" data-v-post-name>Interdum et malesuada</h4>
</a>
<p class="card-text" data-v-post-excerpt>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce enim nulla, mollis eu metus in, sagittis fringilla tortor. Phasellus purus dignissim convallis.</p>
</div>
</div>
</div>
<div class="col-md-4 mb-3" data-v-post>
<div class="card">
<img class="img-fluid" loading="lazy" alt="109-map-location" src="demo/img/illustrations.co/109-map-location.svg" data-v-post-image>
<div class="card-body">
<a href="content/post.html" data-v-post-url>
<h4 class="card-title" data-v-post-name>Interdum et malesuada</h4>
</a>
<p class="card-text" data-v-post-excerpt>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce enim nulla, mollis eu metus in, sagittis fringilla tortor. Phasellus purus dignissim convallis.</p>
</div>
</div>
</div>
<div class="col-md-4 mb-3" data-v-post>
<div class="card">
<img class="img-fluid" loading="lazy" alt="107-healthy" src="demo/img/illustrations.co/107-healthy.svg" data-v-post-image>
<div class="card-body">
<a href="content/post.html" data-v-post-url>
<h4 class="card-title" data-v-post-name>Interdum et malesuada</h4>
</a>
<p class="card-text" data-v-post-excerpt>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce enim nulla, mollis eu metus in, sagittis fringilla tortor. Phasellus purus dignissim convallis.</p>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item" data-v-component-posts="slide3" data-v-limit="3" data-v-page="3">
<div class="row">
<div class="col-md-4 mb-3" data-v-post>
<div class="card">
<img class="img-fluid" loading="lazy" alt="126-namaste-no-hand-shake" src="demo/img/illustrations.co/126-namaste-no-hand-shake.svg" data-v-post-image>
<div class="card-body">
<a href="content/post.html" data-v-post-url>
<h4 class="card-title" data-v-post-name>Interdum et malesuada</h4>
</a>
<p class="card-text" data-v-post-excerpt>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce enim nulla, mollis eu metus in, sagittis fringilla tortor. Phasellus purus dignissim convallis.</p>
</div>
</div>
</div>
<div class="col-md-4 mb-3" data-v-post>
<div class="card">
<img class="img-fluid" loading="lazy" alt="104-dumbbell" src="demo/img/illustrations.co/104-dumbbell.svg" data-v-post-image>
<div class="card-body">
<a href="content/post.html" data-v-post-url>
<h4 class="card-title" data-v-post-name>Interdum et malesuada</h4>
</a>
<p class="card-text" data-v-post-excerpt>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce enim nulla, mollis eu metus in, sagittis fringilla tortor. Phasellus purus dignissim convallis.</p>
</div>
</div>
</div>
<div class="col-md-4 mb-3" data-v-post>
<div class="card">
<img class="img-fluid" loading="lazy" alt="day50-pirahna" src="demo/img/illustrations.co/day50-pirahna.svg" data-v-post-image>
<div class="card-body">
<a href="content/post.html" data-v-post-url>
<h4 class="card-title" data-v-post-name>Interdum et malesuada</h4>
</a>
<p class="card-text" data-v-post-excerpt>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce enim nulla, mollis eu metus in, sagittis fringilla tortor. Phasellus purus dignissim convallis.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section><section title="Posts 3" class="posts-3 py-5" aria-label="posts-3">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8 text-center">
<h2 class="text-center display-6 mb-1 fw-bold">From Our Blog</h2>
<p class="lead text-center text-muted mb-4">Vivamus sed nunc in arcu cursus mollis quis et orci. Interdum et malesuada.</p>
</div>
</div>
<div class="row mt-4" data-v-component-posts="posts-3" data-v-limit="3" data-v-page="1" data-v-image_size="medium">
<div class="col-md-4" data-v-post>
<div class="card position-relative shadow border-0 mb-4" data-bs-theme="dark">
<img class="card-img" src="demo/img/product.webp" loading="lazy" alt="product" data-v-post-image>
<div class="card-img-overlay overflow-hidden">
<div class="d-flex align-items-center">
<span class="badge bg-primary text-white px-3 py-1 font-weight-normal">New</span>
<div class="ms-2">
<span class="ms-2 small">Jan 21, 2024</span>
</div>
</div>
<a href="content/post.html" class="text-body" data-v-post-url>
<h5 class="card-title my-3 font-weight-normal" data-v-post-name>Interdum et malesuada</h5>
</a>
<p class="card-text" data-v-post-excerpt>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce enim nulla, mollis eu metus in, sagittis fringilla tortor. Phasellus purus dignissim convallis.</p>
</div>
</div>
</div>
<div class="col-md-4" data-v-post>
<div class="card position-relative shadow border-0 mb-4" data-bs-theme="dark">
<img class="card-img" src="demo/img/product.webp" loading="lazy" alt="product" data-v-post-image>
<div class="card-img-overlay overflow-hidden">
<div class="d-flex align-items-center">
<span class="badge bg-primary text-white px-3 py-1 font-weight-normal">New</span>
<div class="ms-2">
<span class="ms-2 small">Jan 21, 2024</span>
</div>
</div>
<a href="content/post.html" class="text-body" data-v-post-url>
<h5 class="card-title my-3 font-weight-normal" data-v-post-name>Interdum et malesuada</h5>
</a>
<p class="card-text" data-v-post-excerpt>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce enim nulla, mollis eu metus in, sagittis fringilla tortor. Phasellus purus dignissim convallis.</p>
</div>
</div>
</div>
<div class="col-md-4" data-v-post>
<div class="card position-relative shadow border-0 mb-4" data-bs-theme="dark">
<img class="card-img" src="demo/img/product.webp" loading="lazy" alt="product" data-v-post-image>
<div class="card-img-overlay overflow-hidden">
<div class="d-flex align-items-center">
<span class="badge bg-primary text-white px-3 py-1 font-weight-normal">New</span>
<div class="ms-2">
<span class="ms-2 small">Jan 21, 2024</span>
</div>
</div>
<a href="content/post.html" class="text-body" data-v-post-url>
<h5 class="card-title my-3 font-weight-normal" data-v-post-name>Interdum et malesuada</h5>
</a>
<p class="card-text" data-v-post-excerpt>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce enim nulla, mollis eu metus in, sagittis fringilla tortor. Phasellus purus dignissim convallis.</p>
</div>
</div>
</div>
</div>
</div>
</section></body></html>