Access_New/pages/demo-blogger-lifestyle.html
2024-09-05 11:33:27 +05:45

598 lines
32 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html>
<html class="no-js" lang="en">
<head>
<title>Crafto - The Multipurpose HTML5 Template</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="author" content="ThemeZaa">
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<meta name="description" content="Elevate your online presence with Crafto - a modern, versatile, multipurpose Bootstrap 5 responsive HTML5, SCSS template using highly creative 52+ ready demos.">
<link rel="shortcut icon" href="images/favicon.png">
<link rel="apple-touch-icon" href="images/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="css/vendors.min.css" />
<link rel="stylesheet" href="css/icon.min.css" />
<link rel="stylesheet" href="css/style.min.css" />
<link rel="stylesheet" href="css/responsive.min.css" />
<link rel="stylesheet" href="demos/blogger/blogger.css" />
</head>
<body data-mobile-nav-style="classic">
<div class="box-layout">
<header class="header-with-topbar">
<div class="header-top-bar top-bar-dark bg-dark-gray disable-fixed">
<div class="container">
<div class="row g-0 h-50px align-items-center m-0">
<div class="col-md-7 text-center text-md-start">
<span class="widget fs-14 me-5px text-white d-none d-md-inline-block fw-500"><i class="fa-sharp fa-solid fa-heart text-base-color"></i>Trending:</span>
<a href="demo-blogger-lifestyle.html#" class="fs-14 text-medium-gray-hover">Top 10 night creams will help your skin to relax.</a>
</div>
<div class="col-5 text-end header-icon">
<div class="header-social-icon icon">
<a href="https://www.facebook.com" target="_blank"><i class="fa-brands fa-facebook-f"></i>26k</a>
<a href="https://www.twitter.com" target="_blank"><i class="fa-brands fa-twitter"></i>18k</a>
<a href="http://www.dribbble.com" target="_blank"><i class="fa-brands fa-dribbble"></i>06k</a>
</div>
</div>
</div>
</div>
</div>
<nav class="navbar navbar-expand-lg header-light bg-white disable-fixed" data-header-hover="dark">
<div class="container">
<div class="col-auto p-0">
<a class="navbar-brand" href="demo-blogger.html">
<img src="images/demo-blogger-logo-black.png" data-at2x="images/demo-blogger-logo-black@2x.png" alt class="default-logo">
<img src="images/demo-blogger-logo-black.png" data-at2x="images/demo-blogger-logo-black@2x.png" alt class="alt-logo">
<img src="images/demo-blogger-logo-black.png" data-at2x="images/demo-blogger-logo-black@2x.png" alt class="mobile-logo">
</a>
</div>
<div class="col-auto menu-order left-nav ps-40px md-ps-15px">
<button class="navbar-toggler float-start" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-label="Toggle navigation">
<span class="navbar-toggler-line"></span>
<span class="navbar-toggler-line"></span>
<span class="navbar-toggler-line"></span>
<span class="navbar-toggler-line"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item"><a href="demo-blogger.html" class="nav-link">Home</a></li>
<li class="nav-item"><a href="demo-blogger-fashion.html" class="nav-link">Fashion</a></li>
<li class="nav-item"><a href="demo-blogger-lifestyle.html" class="nav-link">Lifestyle</a></li>
<li class="nav-item"><a href="demo-blogger-style.html" class="nav-link">Style</a></li>
<li class="nav-item"><a href="demo-blogger-about.html" class="nav-link">About</a></li>
<li class="nav-item"><a href="demo-blogger-contact.html" class="nav-link">Contact</a></li>
</ul>
</div>
</div>
<div class="col-auto ms-auto pe-0">
<div class="header-icon">
<div class="header-search-icon icon d-none d-md-flex">
<a href="demo-blogger-lifestyle.html#" class="search-form-icon header-search-form fw-600"><i class="feather icon-feather-search text-base-color align-middle me-5px xl-me-0"></i><span class="align-middle d-none d-xxl-inline-block">Search</span></a>
<div class="search-form-wrapper">
<button title="Close" type="button" class="search-close">×</button>
<form id="search-form" role="search" method="get" class="search-form text-left" action="search-result.html">
<div class="search-form-box">
<h2 class="alt-font text-dark-gray text-center mb-4 fw-600 ls-minus-1px">What are you looking for?</h2>
<input class="search-input" id="search-form-input5e219ef164995" placeholder="Enter your keywords..." name="s" value type="text" autocomplete="off">
<button type="submit" class="search-button">
<i class="feather icon-feather-search" aria-hidden="true"></i>
</button>
</div>
</form>
</div>
</div>
<div class="header-button ms-20px xxl-ms-10px xs-ms-0 d-none d-md-block">
<a href="demo-blogger-lifestyle.html#footer" class="btn btn-small btn-base-color btn-slide-right btn-rounded left-icon section-link"><i class="feather icon-feather-mail"></i>Subscribe<span class="bg-white"></span></a>
</div>
</div>
</div>
</div>
</nav>
</header>
<section class="half-section page-title-center-alignment top-space-margin">
<div class="container">
<div class="row pt-20px pb-20px md-pt-0 md-pb-0">
<div class="col-12 text-center position-relative page-title-large" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [0, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 300, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 200, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<h1 class="alt-font d-block fw-700 text-dark-gray mb-0 ls-minus-1px">Lifestyle</h1>
<h2 class="d-inline-block fw-500 ls-3px text-uppercase mb-0">Beauty is everything</h2>
</div>
</div>
</div>
</section>
<section class="pb-0 pt-30px md-pt-0">
<div class="container-fluid p-0">
<div class="row align-items-center">
<div class="col-12 col-md-12">
<div class="outside-box-right-50 lg-outside-box-right-65 sm-me-0">
<div class="swiper magic-cursor text-slider-style-02" data-slider-options="{ &quot;slidesPerView&quot;: 1, &quot;spaceBetween&quot;: 30, &quot;loop&quot;: true, &quot;autoplay&quot;: { &quot;delay&quot;: 4000, &quot;disableOnInteraction&quot;: false }, &quot;keyboard&quot;: { &quot;enabled&quot;: true, &quot;onlyInViewport&quot;: true }, &quot;breakpoints&quot;: { &quot;1400&quot;: { &quot;slidesPerView&quot;: 2, &quot;spaceBetween&quot;: 130 }, &quot;992&quot;: { &quot;slidesPerView&quot;: 2, &quot;spaceBetween&quot;: 80 }, &quot;768&quot;: { &quot;slidesPerView&quot;: 2, &quot;spaceBetween&quot;: 50 } }, &quot;effect&quot;: &quot;slide&quot; }">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="row">
<div class="col-12 col-lg-4 pt-8 order-lg-1 order-2">
<div class="d-flex align-items-center mb-20px">
<span class="d-inline-block fw-700 text-dark-gray">Jan 20, 2023</span>
<span class="d-inline-block fs-18 alt-font text-base-color ms-10px me-10px"></span>
<span class="d-inline-block fs-15 fw-500 text-dark-gray">
<i class="feather icon-feather-message-circle text-dark-gray d-inline-block fs-14"></i>
<span>13</span>
</span>
<span class="d-inline-block fs-18 alt-font text-base-color ms-10px me-10px"></span>
<span class="d-inline-block fs-15 fw-500 text-dark-gray">
<i class="feather icon-feather-thumbs-up text-dark-gray d-inline-block fs-14"></i>
<span>45</span>
</span>
</div>
<div class="outside-box-right-10 xl-outside-box-right-15 lg-outside-box-right-30 md-me-0 position-relative">
<h2 class="alt-font ls-minus-1px fw-600 word-break-normal mb-40px sm-mb-20px"><a href="demo-blogger-blog-single-classic.html" class="text-dark-gray text-dark-gray-hover">I love seeing fashion from the past making a comeback.</a></h2>
</div>
<div>
<img src="images/avtar-33.jpg" class="rounded-circle w-70px me-15px" alt>
<div class="d-inline-block align-middle">
<a href="demo-blogger-lifestyle.html#" class="text-dark-gray fs-18 fw-600 text-decoration-line-bottom">Walton smith</a>
</div>
</div>
</div>
<div class="col-12 col-lg-8 order-lg-2 order-1">
<a href="demo-blogger-blog-single-classic.html"><img src="images/demo-blogger-blog-listing-01.jpg" class="border-radius-6px" alt /></a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="row">
<div class="col-12 col-lg-4 pt-8 order-lg-1 order-2">
<div class="d-flex align-items-center mb-20px">
<span class="d-inline-block fw-700 text-dark-gray">Jan 18, 2023</span>
<span class="d-inline-block fs-18 alt-font text-base-color ms-10px me-10px"></span>
<span class="d-inline-block fs-15 fw-500 text-dark-gray">
<i class="feather icon-feather-message-circle text-dark-gray d-inline-block fs-14"></i>
<span>13</span>
</span>
<span class="d-inline-block fs-18 alt-font text-base-color ms-10px me-10px"></span>
<span class="d-inline-block fs-15 fw-500 text-dark-gray">
<i class="feather icon-feather-thumbs-up text-dark-gray d-inline-block fs-14"></i>
<span>45</span>
</span>
</div>
<div class="outside-box-right-10 xl-outside-box-right-15 lg-outside-box-right-30 md-me-0 position-relative">
<h2 class="alt-font ls-minus-1px fw-600 word-break-normal mb-40px sm-mb-20px"><a href="demo-blogger-blog-single-classic.html" class="text-dark-gray text-dark-gray-hover">Fashion is the most beautiful illusion you can have.</a></h2>
</div>
<div>
<img src="images/avtar-34.jpg" class="rounded-circle w-70px me-15px" alt>
<div class="d-inline-block align-middle">
<a href="demo-blogger-lifestyle.html#" class="text-dark-gray fs-18 fw-600 text-decoration-line-bottom">Herman miller</a>
</div>
</div>
</div>
<div class="col-12 col-lg-8 order-lg-2 order-1">
<a href="demo-blogger-blog-single-classic.html"><img src="images/demo-blogger-blog-listing-02.jpg" class="border-radius-6px" alt /></a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="row">
<div class="col-12 col-lg-4 pt-8 order-lg-1 order-2">
<div class="d-flex align-items-center mb-20px">
<span class="d-inline-block fw-700 text-dark-gray">Jan 16, 2023</span>
<span class="d-inline-block fs-18 alt-font text-base-color ms-10px me-10px"></span>
<span class="d-inline-block fs-15 fw-500 text-dark-gray">
<i class="feather icon-feather-message-circle text-dark-gray d-inline-block fs-14"></i>
<span>13</span>
</span>
<span class="d-inline-block fs-18 alt-font text-base-color ms-10px me-10px"></span>
<span class="d-inline-block fs-15 fw-500 text-dark-gray">
<i class="feather icon-feather-thumbs-up text-dark-gray d-inline-block fs-14"></i>
<span>45</span>
</span>
</div>
<div class="outside-box-right-10 xl-outside-box-right-15 lg-outside-box-right-30 md-me-0 position-relative">
<h2 class="alt-font ls-minus-1px fw-600 word-break-normal mb-40px sm-mb-20px"><a href="demo-blogger-blog-single-classic.html" class="text-dark-gray text-dark-gray-hover">Fashion is the armor to survive the reality of everyday life.</a></h2>
</div>
<div>
<img src="images/avtar-35.jpg" class="rounded-circle w-70px me-15px" alt>
<div class="d-inline-block align-middle">
<a href="demo-blogger-lifestyle.html#" class="text-dark-gray fs-18 fw-600 text-decoration-line-bottom">Jessica dover</a>
</div>
</div>
</div>
<div class="col-12 col-lg-8 order-lg-2 order-1">
<a href="demo-blogger-blog-single-classic.html"><img src="images/demo-blogger-blog-listing-03.jpg" class="border-radius-6px" alt /></a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="row">
<div class="col-12 col-lg-4 pt-8 order-lg-1 order-2">
<div class="d-flex align-items-center mb-20px">
<span class="d-inline-block fw-700 text-dark-gray">Jan 18, 2023</span>
<span class="d-inline-block fs-18 alt-font text-base-color ms-10px me-10px"></span>
<span class="d-inline-block fs-15 fw-500 text-dark-gray">
<i class="feather icon-feather-message-circle text-dark-gray d-inline-block fs-14"></i>
<span>13</span>
</span>
<span class="d-inline-block fs-18 alt-font text-base-color ms-10px me-10px"></span>
<span class="d-inline-block fs-15 fw-500 text-dark-gray">
<i class="feather icon-feather-thumbs-up text-dark-gray d-inline-block fs-14"></i>
<span>45</span>
</span>
</div>
<div class="outside-box-right-10 xl-outside-box-right-15 lg-outside-box-right-30 md-me-0 position-relative">
<h2 class="alt-font ls-minus-1px fw-600 word-break-normal mb-40px sm-mb-20px"><a href="demo-blogger-blog-single-classic.html" class="text-dark-gray text-dark-gray-hover">Fashion is the most beautiful illusion you can have.</a></h2>
</div>
<div>
<img src="images/avtar-34.jpg" class="rounded-circle w-70px me-15px" alt>
<div class="d-inline-block align-middle">
<a href="demo-blogger-lifestyle.html#" class="text-dark-gray fs-18 fw-600 text-decoration-line-bottom">Herman miller</a>
</div>
</div>
</div>
<div class="col-12 col-lg-8 order-lg-2 order-1">
<a href="demo-blogger-blog-single-classic.html"><img src="images/demo-blogger-blog-listing-02.jpg" class="border-radius-6px" alt /></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section>
<div class="container-fluid p-0">
<div class="row justify-content-center mb-2">
<div class="col-12 col-lg-5 text-center" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [-15, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 300, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 200, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<span class="ls-2px text-uppercase text-dark-gray fw-500 lh-22 mb-10px d-block">Browse the <span class="d-inline-block border-2 border-bottom border-color-transparent-base-color fw-800">latest</span></span>
<h3 class="fw-600 text-dark-gray alt-font ls-minus-1px w-90 mx-auto">Lifestyle articles</h3>
</div>
</div>
<div class="row mb-4">
<div class="col-12">
<ul class="blog-grid blog-wrapper grid grid-4col xl-grid-4col lg-grid-3col md-grid-2col sm-grid-2col xs-grid-1col gutter-extra-large" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [15, 0], &quot;translateX&quot;: [-15, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 300, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 150, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<li class="grid-sizer"></li>
<li class="grid-item">
<div class="card border-radius-6px border-0 box-shadow-medium-bottom box-shadow-medium-bottom-hover">
<div class="blog-image">
<a href="demo-blogger-blog-single-classic.html" class="d-block"><img src="images/blog-images-01.jpg" alt /></a>
<div class="blog-categories">
<a href="demo-blogger-lifestyle.html#" class="categories-btn bg-dark-gray-transparent text-white text-uppercase fw-600">Fashion</a>
</div>
</div>
<div class="card-body p-11">
<a href="demo-blogger-blog-single-classic.html" class="card-title mb-15px fw-600 fs-18 lh-26 text-dark-gray d-inline-block">In difficult times, fashion is always outrageous.</a>
<p>Lorem ipsum dolor consectetur adipiscing elit finibus purus..</p>
<div class="author d-flex justify-content-center align-items-center position-relative overflow-hidden fs-15 text-uppercase">
<div class="me-auto">
<span class="text-dark-gray blog-date d-inline-block fw-600 text-transform-none">30 December 2023</span>
<div class="text-dark-gray d-inline-block author-name text-transform-none">By <a href="demo-blogger-lifestyle.html#" class="text-dark-gray text-decoration-line-bottom fw-600">Andy glamer</a></div>
</div>
<div class="like-count fs-14">
<a href="demo-blogger-lifestyle.html#"><i class="fa-regular fa-heart text-red d-inline-block"></i><span class="text-dark-gray align-middle fw-700">45</span></a>
</div>
</div>
</div>
</div>
</li>
<li class="grid-item">
<div class="card border-radius-6px border-0 box-shadow-medium-bottom box-shadow-medium-bottom-hover">
<div class="blog-image">
<a href="demo-blogger-blog-single-classic.html" class="d-block"><img src="images/blog-images-02.jpg" alt /></a>
<div class="blog-categories">
<a href="demo-blogger-lifestyle.html#" class="categories-btn bg-dark-gray-transparent text-white text-uppercase fw-600">Lifestyle</a>
</div>
</div>
<div class="card-body p-11">
<a href="demo-blogger-blog-single-classic.html" class="card-title mb-15px fw-600 fs-18 lh-26 text-dark-gray d-inline-block">We must never confuse elegance with snobbery.</a>
<p>Lorem ipsum dolor consectetur adipiscing elit finibus purus..</p>
<div class="author d-flex justify-content-center align-items-center position-relative overflow-hidden fs-15 text-uppercase">
<div class="me-auto">
<span class="text-dark-gray blog-date d-inline-block fw-600 text-transform-none">30 December 2023</span>
<div class="text-dark-gray d-inline-block author-name text-transform-none">By <a href="demo-blogger-lifestyle.html#" class="text-dark-gray text-decoration-line-bottom fw-600">Den viliamson</a></div>
</div>
<div class="like-count fs-14">
<a href="demo-blogger-lifestyle.html#"><i class="fa-regular fa-heart text-red d-inline-block"></i><span class="text-dark-gray align-middle fw-700">45</span></a>
</div>
</div>
</div>
</div>
</li>
<li class="grid-item">
<div class="card border-radius-6px border-0 box-shadow-medium-bottom box-shadow-medium-bottom-hover">
<div class="blog-image">
<a href="demo-blogger-blog-single-classic.html" class="d-block"><img src="images/blog-images-03.jpg" alt /></a>
<div class="blog-categories">
<a href="demo-blogger-lifestyle.html#" class="categories-btn bg-dark-gray-transparent text-white text-uppercase fw-600">Style</a>
</div>
</div>
<div class="card-body p-11">
<a href="demo-blogger-blog-single-classic.html" class="card-title mb-15px fw-600 fs-18 lh-26 text-dark-gray d-inline-block">Elegance is not standing out, but being remembered.</a>
<p>Lorem ipsum dolor consectetur adipiscing elit finibus purus..</p>
<div class="author d-flex justify-content-center align-items-center position-relative overflow-hidden fs-15 text-uppercase">
<div class="me-auto">
<span class="text-dark-gray blog-date d-inline-block fw-600 text-transform-none">28 December 2023</span>
<div class="text-dark-gray d-inline-block author-name text-transform-none">By <a href="demo-blogger-lifestyle.html#" class="text-dark-gray text-decoration-line-bottom fw-600">Jones robbert</a></div>
</div>
<div class="like-count fs-14">
<a href="demo-blogger-lifestyle.html#"><i class="fa-regular fa-heart text-red d-inline-block"></i><span class="text-dark-gray align-middle fw-700">45</span></a>
</div>
</div>
</div>
</div>
</li>
<li class="grid-item">
<div class="card border-radius-6px border-0 box-shadow-medium-bottom box-shadow-medium-bottom-hover">
<div class="blog-image">
<a href="demo-blogger-blog-single-classic.html" class="d-block"><img src="images/blog-images-04.jpg" alt /></a>
<div class="blog-categories">
<a href="demo-blogger-lifestyle.html#" class="categories-btn bg-dark-gray-transparent text-white text-uppercase fw-600">Lookbook</a>
</div>
</div>
<div class="card-body p-11">
<a href="demo-blogger-blog-single-classic.html" class="card-title mb-15px fw-600 fs-18 lh-26 text-dark-gray d-inline-block">One should always dress like a marble column.</a>
<p>Lorem ipsum dolor consectetur adipiscing elit finibus purus..</p>
<div class="author d-flex justify-content-center align-items-center position-relative overflow-hidden fs-15 text-uppercase">
<div class="me-auto">
<span class="text-dark-gray blog-date d-inline-block fw-600 text-transform-none">26 December 2023</span>
<div class="text-dark-gray d-inline-block author-name text-transform-none">By <a href="demo-blogger-lifestyle.html#" class="text-dark-gray text-decoration-line-bottom fw-600">Rosald smith</a></div>
</div>
<div class="like-count fs-14">
<a href="demo-blogger-lifestyle.html#"><i class="fa-regular fa-heart text-red d-inline-block"></i><span class="text-dark-gray align-middle fw-700">45</span></a>
</div>
</div>
</div>
</div>
</li>
<li class="grid-item">
<div class="card border-radius-6px border-0 box-shadow-medium-bottom box-shadow-medium-bottom-hover">
<div class="blog-image">
<a href="demo-blogger-blog-single-classic.html" class="d-block"><img src="images/blog-images-05.jpg" alt /></a>
<div class="blog-categories">
<a href="demo-blogger-lifestyle.html#" class="categories-btn bg-dark-gray-transparent text-white text-uppercase fw-600">Fashion</a>
</div>
</div>
<div class="card-body p-11">
<a href="demo-blogger-blog-single-classic.html" class="card-title mb-15px fw-600 fs-18 lh-26 text-dark-gray d-inline-block">You can have anything you want in life if you dress for it.</a>
<p>Lorem ipsum dolor consectetur adipiscing elit finibus purus..</p>
<div class="author d-flex justify-content-center align-items-center position-relative overflow-hidden fs-15 text-uppercase">
<div class="me-auto">
<span class="text-dark-gray blog-date d-inline-block fw-600 text-transform-none">26 December 2023</span>
<div class="text-dark-gray d-inline-block author-name text-transform-none">By <a href="demo-blogger-lifestyle.html#" class="text-dark-gray text-decoration-line-bottom fw-600">Jessica dover</a></div>
</div>
<div class="like-count fs-14">
<a href="demo-blogger-lifestyle.html#"><i class="fa-regular fa-heart text-red d-inline-block"></i><span class="text-dark-gray align-middle fw-700">45</span></a>
</div>
</div>
</div>
</div>
</li>
<li class="grid-item">
<div class="card border-radius-6px border-0 box-shadow-medium-bottom box-shadow-medium-bottom-hover">
<div class="blog-image">
<a href="demo-blogger-blog-single-classic.html" class="d-block"><img src="images/blog-images-06.jpg" alt /></a>
<div class="blog-categories">
<a href="demo-blogger-lifestyle.html#" class="categories-btn bg-dark-gray-transparent text-white text-uppercase fw-600">Beauty</a>
</div>
</div>
<div class="card-body p-11">
<a href="demo-blogger-blog-single-classic.html" class="card-title mb-15px fw-600 fs-18 lh-26 text-dark-gray d-inline-block">We must never confuse elegance with snobbery.</a>
<p>Lorem ipsum dolor consectetur adipiscing elit finibus purus..</p>
<div class="author d-flex justify-content-center align-items-center position-relative overflow-hidden fs-15 text-uppercase">
<div class="me-auto">
<span class="text-dark-gray blog-date d-inline-block fw-600 text-transform-none">24 December 2023</span>
<div class="text-dark-gray d-inline-block author-name text-transform-none">By <a href="demo-blogger-lifestyle.html#" class="text-dark-gray text-decoration-line-bottom fw-600">Rosald smith</a></div>
</div>
<div class="like-count fs-14">
<a href="demo-blogger-lifestyle.html#"><i class="fa-regular fa-heart text-red d-inline-block"></i><span class="text-dark-gray align-middle fw-700">45</span></a>
</div>
</div>
</div>
</div>
</li>
<li class="grid-item">
<div class="card border-radius-6px border-0 box-shadow-medium-bottom box-shadow-medium-bottom-hover">
<div class="blog-image">
<a href="demo-blogger-blog-single-classic.html" class="d-block"><img src="images/blog-images-07.jpg" alt /></a>
<div class="blog-categories">
<a href="demo-blogger-lifestyle.html#" class="categories-btn bg-dark-gray-transparent text-white text-uppercase fw-600">Fashion</a>
</div>
</div>
<div class="card-body p-11">
<a href="demo-blogger-blog-single-classic.html" class="card-title mb-15px fw-600 fs-18 lh-26 text-dark-gray d-inline-block">Keep your heels, head and standards high.</a>
<p>Lorem ipsum dolor consectetur adipiscing elit finibus purus..</p>
<div class="author d-flex justify-content-center align-items-center position-relative overflow-hidden fs-15 text-uppercase">
<div class="me-auto">
<span class="text-dark-gray blog-date d-inline-block fw-600 text-transform-none">22 December 2023</span>
<div class="text-dark-gray d-inline-block author-name text-transform-none">By <a href="demo-blogger-lifestyle.html#" class="text-dark-gray text-decoration-line-bottom fw-600">Jones robbert</a></div>
</div>
<div class="like-count fs-14">
<a href="demo-blogger-lifestyle.html#"><i class="fa-regular fa-heart text-red d-inline-block"></i><span class="text-dark-gray align-middle fw-700">45</span></a>
</div>
</div>
</div>
</div>
</li>
<li class="grid-item">
<div class="card border-radius-6px border-0 box-shadow-medium-bottom box-shadow-medium-bottom-hover">
<div class="blog-image">
<a href="demo-blogger-blog-single-classic.html" class="d-block"><img src="images/blog-images-08.jpg" alt /></a>
<div class="blog-categories">
<a href="demo-blogger-lifestyle.html#" class="categories-btn bg-dark-gray-transparent text-white text-uppercase fw-600">Style</a>
</div>
</div>
<div class="card-body p-11">
<a href="demo-blogger-blog-single-classic.html" class="card-title mb-15px fw-600 fs-18 lh-26 text-dark-gray d-inline-block">You can have anything you want. If you dress for it.</a>
<p>Lorem ipsum dolor consectetur adipiscing elit finibus purus..</p>
<div class="author d-flex justify-content-center align-items-center position-relative overflow-hidden fs-15 text-uppercase">
<div class="me-auto">
<span class="text-dark-gray blog-date d-inline-block fw-600 text-transform-none">22 December 2023</span>
<div class="text-dark-gray d-inline-block author-name text-transform-none">By <a href="demo-blogger-lifestyle.html#" class="text-dark-gray text-decoration-line-bottom fw-600">Andy glamer</a></div>
</div>
<div class="like-count fs-14">
<a href="demo-blogger-lifestyle.html#"><i class="fa-regular fa-heart text-red d-inline-block"></i><span class="text-dark-gray align-middle fw-700">45</span></a>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-12 d-flex justify-content-center">
<ul class="pagination pagination-style-01 fs-13 mb-0 appear anime-complete" data-anime="{ &quot;translate&quot;: [0, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;: 100, &quot;staggervalue&quot;: 150, &quot;easing&quot;: &quot;easeOutQuad&quot; }" translate="no">
<li class="page-item"><a class="page-link" href="demo-blogger-lifestyle.html#"><i class="feather icon-feather-arrow-left fs-18 d-xs-none"></i></a></li>
<li class="page-item"><a class="page-link" href="demo-blogger-lifestyle.html#">01</a></li>
<li class="page-item active"><a class="page-link" href="demo-blogger-lifestyle.html#">02</a></li>
<li class="page-item"><a class="page-link" href="demo-blogger-lifestyle.html#">03</a></li>
<li class="page-item"><a class="page-link" href="demo-blogger-lifestyle.html#">04</a></li>
<li class="page-item"><a class="page-link" href="demo-blogger-lifestyle.html#"><i class="feather icon-feather-arrow-right fs-18 d-xs-none"></i></a></li>
</ul>
</div>
</div>
</div>
</section>
<footer class="p-0 position-relative" id="footer">
<div class="bg-very-light-gray border-radius-6px pt-5 pb-5 md-pt-30px md-pb-30px md-ps-15px md-pe-15px sm-pt-50px sm-pb-50px">
<div class="container">
<div class="row">
<div class="col-md-6 col-lg-3 last-paragraph-no-margin order-md-1 md-mb-30px">
<a href="demo-blogger.html" class="footer-logo d-inline-block mb-10px"><img src="images/demo-blogger-footer-logo-black.png" data-at2x="images/demo-blogger-footer-logo-black@2x.png" alt></a>
<p class="lh-28 d-block w-80 mb-15px">401 Broadway, 24th Floor, Orchard View, London</p>
<div class="text-dark-gray fw-600"><i class="feather icon-feather-phone-call me-10px"></i>+1 234 567 8910</div>
<div class="text-dark-gray fw-600"><i class="feather icon-feather-mail me-10px"></i><a href="cdn-cgi/l/email-protection.html#caa3a4aca58aaea5a7aba3a4e4a9a5a7" class="text-dark-gray text-decoration-line-bottom"><span class="__cf_email__" data-cfemail="9cf5f2faf3dcf8f3f1fdf5f2b2fff3f1">[email&#160;protected]</span></a></div>
</div>
<div class="col-md-4 col-lg-2 order-md-3 order-lg-2 sm-mb-30px">
<span class="fw-700 text-dark-gray d-block mb-5px fs-17">Category</span>
<ul>
<li><a href="demo-blogger-fashion.html">Fashion</a></li>
<li><a href="demo-blogger-lifestyle.html">Lifestyle</a></li>
<li><a href="demo-blogger-style.html">Style</a></li>
<li><a href="demo-blogger-lifestyle.html#">Lookbook</a></li>
<li><a href="demo-blogger-lifestyle.html#">Beauty</a></li>
</ul>
</div>
<div class="col-md-4 col-lg-2 order-md-4 order-lg-3 sm-mb-30px">
<span class="fw-700 text-dark-gray d-block mb-5px fs-17">Information</span>
<ul>
<li><a href="demo-blogger-about.html">About us</a></li>
<li><a href="demo-blogger-lifestyle.html#">Readers guide</a></li>
<li><a href="demo-blogger-contact.html">Contact us</a></li>
<li><a href="demo-blogger-lifestyle.html#">Terms of use</a></li>
<li><a href="demo-blogger-lifestyle.html#">Privacy policy</a></li>
</ul>
</div>
<div class="col-md-4 col-lg-2 order-md-5 order-lg-4 sm-mb-30px">
<span class="fw-700 text-dark-gray d-block mb-5px fs-17">Follow us</span>
<ul>
<li><a href="https://www.facebook.com/" target="_blank">Facebook</a></li>
<li><a href="https://www.instagram.com/" target="_blank">Instagram</a></li>
<li><a href="https://twitter.com/" target="_blank">Twitter</a></li>
<li><a href="https://pinterest.com/" target="_blank">Pinterest</a></li>
<li><a href="https://www.behance.net/" target="_blank">Behance</a></li>
</ul>
</div>
<div class="col-md-6 col-lg-3 order-md-2 order-lg-5 md-mb-30px sm-mb-0">
<h5 class="alt-font fw-600 mb-20px text-dark-gray">Subscribe our newsletter.</h5>
<div class="d-inline-block w-100 newsletter-style-02 position-relative mb-10px">
<form action="email-templates/subscribe-newsletter.php" method="post" class="position-relative w-100">
<input class="input-medium bg-transparent border-color-transparent-base-color w-100 form-control pe-50px ps-20px lg-ps-15px required" type="email" name="email" placeholder="Enter email address" />
<input type="hidden" name="redirect" value>
<button class="btn pe-20px submit" aria-label="submit"><i class="icon feather icon-feather-mail icon-small text-base-color"></i></button>
<div class="form-results border-radius-6px pt-5px pb-5px ps-15px pe-15px fs-14 w-100 text-center position-absolute d-none"></div>
</form>
</div>
<div class="d-flex align-items-center fs-14">
<div class="d-inline-block"><i class="line-icon-Handshake me-10px align-middle icon-very-medium"></i>Protecting your privacy</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row align-items-center pt-25px pb-25px">
<div class="col-xl-8 col-lg-7 last-paragraph-no-margin md-mb-10px lg-mb-0 fs-14 text-center text-lg-start">
<p class="lg-w-70 md-w-100">This site is protected by reCAPTCHA and the Google <a href="demo-blogger-lifestyle.html#" class="text-decoration-line-bottom">privacy policy</a> and <a href="demo-blogger-lifestyle.html#" class="text-decoration-line-bottom">terms of service</a> apply.</p>
</div>
<div class="col-xl-4 col-lg-5 last-paragraph-no-margin fs-14 text-center text-lg-end">
<p>&copy; 2024 Crafto is Proudly Powered by <a href="http://www.themezaa.com/" target="_blank" class="text-decoration-line-bottom text-dark-gray fw-600">ThemeZaa</a></p>
</div>
</div>
</div>
</footer>
</div>
<div id="cookies-model" class="cookie-message bg-dark-gray border-radius-8px">
<div class="cookie-description fs-14 text-white mb-20px lh-22">We use cookies to enhance your browsing experience, serve personalized ads or content, and analyze our traffic. By clicking "Allow cookies" you consent to our use of cookies. </div>
<div class="cookie-btn">
<a href="demo-blogger-lifestyle.html#" class="btn btn-transparent-white border-1 border-color-transparent-white-light btn-very-small btn-switch-text btn-rounded w-100 mb-15px" aria-label="btn">
<span>
<span class="btn-double-text" data-text="Cookie policy">Cookie policy</span>
</span>
</a>
<a href="demo-blogger-lifestyle.html#" class="btn btn-white btn-very-small btn-switch-text btn-box-shadow accept_cookies_btn btn-rounded w-100" data-accept-btn aria-label="text">
<span>
<span class="btn-double-text" data-text="Allow cookies">Allow cookies</span>
</span>
</a>
</div>
</div>
<div class="scroll-progress d-none d-xxl-block">
<a href="demo-blogger-lifestyle.html#" class="scroll-top" aria-label="scroll">
<span class="scroll-text">Scroll</span><span class="scroll-line"><span class="scroll-point"></span></span>
</a>
</div>
<script data-cfasync="false" src="cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/vendors.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>