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

927 lines
49 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.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.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.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="top-space-margin p-0">
<div class="container-fluid p-0">
<div class="row g-0">
<div class="col-12 blog-side-image">
<div class="blog-box d-md-flex d-block flex-row flex-wrap h-100 border-radius-6px overflow-hidden">
<div class="blog-image w-60 xl-w-50 md-w-100 cover-background" style="background-image: url('images/demo-blogger-home-01.jpg')">
<a href="demo-blogger-blog-single-classic.html" class="blog-post-image-overlay"></a>
</div>
<div class="blog-content w-40 xl-w-50 md-w-100 p-5 xxl-p-30px bg-very-light-gray d-flex flex-column justify-content-center align-items-start sm-ps-15px sm-pe-15px sm-pt-30px sm-pb-30px text-center text-md-start" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateX&quot;: [-15, 0], &quot;perspective&quot;: [1200,1200], &quot;scale&quot;: [1.1, 1], &quot;rotateY&quot;: [50, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 300, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 150, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="mb-20px sm-mx-auto">
<a href="demo-blogger.html#" class="fw-600 text-dark-gray d-inline-block">Lifestyle</a>
<span class="fs-18 d-inline-block alt-font text-base-color ms-10px me-10px"></span>
<a href="demo-blogger-fashion.html" class="fw-600 text-dark-gray d-inline-block">Fashion</a>
</div>
<h2 class="fw-600 alt-font">
<a href="demo-blogger-blog-single-classic.html" class="card-title text-dark-gray text-dark-gray-hover ls-minus-1px">Fashion is the armor to survive the reality of everyday life.</a>
</h2>
<p class="w-85 lg-w-100">Lorem ipsum dolor sit amet, consectetur adipiscing elit sed finibus a purus at fermentum. Praesent vitae quam sed dui mattis varius vel in nunc...</p>
<div class="mt-18 xl-mt-10 md-mt-0 w-100">
<div class="separator-line-2px bg-base-color mb-30px w-100"></div>
<div class="d-flex align-items-center flex-column flex-md-row justify-content-center justify-content-md-start">
<div>
<img src="images/avtar-40.jpg" class="rounded-circle w-50px h-50px me-10px" alt>
<div class="d-inline-block align-middle">
<a href="demo-blogger.html#" class="text-dark-gray fw-600 text-decoration-line-bottom">Walton smith</a>
</div>
</div>
<div class="sm-mt-10px">
<span class="d-md-inline-block fs-18 alt-font text-base-color ms-10px me-10px lg-ms-5px lg-me-5px d-none"></span>
<a href="demo-blogger.html#" class="d-inline-block fw-500 text-dark-gray">Jan 20, 2023</a>
<span class="d-inline-block fs-18 alt-font text-base-color ms-10px me-10px me-10px lg-ms-5px lg-me-5px"></span>
<a href="demo-blogger.html#" 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>
</a>
<span class="d-inline-block fs-18 alt-font text-base-color ms-10px me-10px me-10px lg-ms-5px lg-me-5px"></span>
<a href="demo-blogger.html#" 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>
</a>
</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-md-8 text-center" data-anime="{ &quot;translateY&quot;: [0, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 300, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 100, &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">categories</span></span>
<h3 class="fw-600 text-dark-gray alt-font ls-minus-1px w-90 mx-auto sm-w-100">Find the perfect look</h3>
</div>
</div>
<div class="row row-cols-xl-5 row-cols-md-3 row-cols-sm-2 row-cols-1 justify-content-center" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [-15, 0], &quot;perspective&quot;: [1200,1200], &quot;scale&quot;: [1.1, 1], &quot;rotateX&quot;: [50, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 300, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="col categories-style-03 lg-mb-30px">
<div class="categories-box border-radius-6px overflow-hidden">
<div class="category-image">
<a href="demo-blogger.html#" class="d-block">
<img src="images/demo-blogger-home-02.jpg" alt />
<div class="position-absolute left-0px top-0px w-100 h-100 bg-gradient-gray-light-dark-transparent"></div>
</a>
</div>
<div class="category-title d-flex align-items-center">
<a href="demo-blogger.html#" class="fs-20 fw-600 text-white">Lookbook</a>
<div class="circle-box bg-base-color fs-14 w-45px h-45px rounded-circle ms-auto d-flex align-items-center justify-content-center text-white fw-600">07</div>
</div>
</div>
</div>
<div class="col categories-style-03 lg-mb-30px">
<div class="categories-box border-radius-6px overflow-hidden">
<div class="category-image">
<a href="demo-blogger.html#" class="d-block">
<img src="images/demo-blogger-home-03.jpg" alt />
<div class="position-absolute left-0px top-0px w-100 h-100 bg-gradient-gray-light-dark-transparent"></div>
</a>
</div>
<div class="category-title d-flex align-items-center">
<a href="demo-blogger.html#" class="fs-20 fw-600 text-white">Foodies</a>
<div class="circle-box bg-base-color fs-14 w-45px h-45px rounded-circle ms-auto d-flex align-items-center justify-content-center text-white fw-600">05</div>
</div>
</div>
</div>
<div class="col categories-style-03 lg-mb-30px">
<div class="categories-box border-radius-6px overflow-hidden">
<div class="category-image">
<a href="demo-blogger.html#" class="d-block">
<img src="images/demo-blogger-home-04.jpg" alt />
<div class="position-absolute left-0px top-0px w-100 h-100 bg-gradient-gray-light-dark-transparent"></div>
</a>
</div>
<div class="category-title d-flex align-items-center">
<a href="demo-blogger.html#" class="fs-20 fw-600 text-white">Beauty</a>
<div class="circle-box bg-base-color fs-14 w-45px h-45px rounded-circle ms-auto d-flex align-items-center justify-content-center text-white fw-600">09</div>
</div>
</div>
</div>
<div class="col categories-style-03 sm-mb-30px">
<div class="categories-box border-radius-6px overflow-hidden">
<div class="category-image">
<a href="demo-blogger.html#" class="d-block">
<img src="images/demo-blogger-home-05.jpg" alt />
<div class="position-absolute left-0px top-0px w-100 h-100 bg-gradient-gray-light-dark-transparent"></div>
</a>
</div>
<div class="category-title d-flex align-items-center">
<a href="demo-blogger.html#" class="fs-20 fw-600 text-white">Wedding</a>
<div class="circle-box bg-base-color fs-14 w-45px h-45px rounded-circle ms-auto d-flex align-items-center justify-content-center text-white fw-600">22</div>
</div>
</div>
</div>
<div class="col categories-style-03">
<div class="categories-box border-radius-6px overflow-hidden">
<div class="category-image">
<a href="demo-blogger.html#" class="d-block">
<img src="images/demo-blogger-home-06.jpg" alt />
<div class="position-absolute left-0px top-0px w-100 h-100 bg-gradient-gray-light-dark-transparent"></div>
</a>
</div>
<div class="category-title d-flex align-items-center">
<a href="demo-blogger.html#" class="fs-20 fw-600 text-white">Fashion</a>
<div class="circle-box bg-base-color fs-14 w-45px h-45px rounded-circle ms-auto d-flex align-items-center justify-content-center text-white fw-600">08</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="p-5 xxl-p-2 xl-pt-30px xl-pb-30px bg-very-light-gray border-radius-6px position-relative overflow-hidden">
<img src="images/demo-blogger-home-leaf-01.png" class="position-absolute top-minus-10px left-15px w-160px" alt />
<img src="images/demo-blogger-home-leaf-02.png" class="position-absolute top-minus-30px right-minus-50px" alt />
<img src="images/demo-blogger-home-leaf-03.png" class="position-absolute bottom-minus-30px left-150px" alt />
<div class="container-fluid">
<div class="row align-items-center">
<div class="col-12 col-xxl-3 text-center text-xxl-start xl-mt-30px xl-mb-30px sm-mt-20px" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateX&quot;: [-15, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 300, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 100, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<span class="ls-2px text-uppercase text-dark-gray fw-500 lh-22 mb-15px d-block">Trending <span class="d-inline-block border-2 border-bottom border-color-transparent-base-color fw-800">news</span></span>
<h3 class="fw-600 text-dark-gray alt-font ls-minus-1px mb-30px sm-mb-20px">Most popular fashion news.</h3>
<a href="demo-blogger.html#" class="btn btn-medium btn-base-color btn-slide-right btn-rounded section-link">Explore more<i class="fa-sharp fa-solid fa-arrow-right"></i><span class="bg-very-light-gray"></span></a>
</div>
<div class="col-12 col-xxl-9">
<ul class="blog-grid blog-wrapper grid grid-3col xl-grid-3col lg-grid-3col md-grid-2col sm-grid-2col xs-grid-1col gutter-extra-large" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateX&quot;: [15, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 300, &quot;delay&quot;: 200, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<li class="grid-sizer"></li>
<li class="grid-item">
<div class="card border-0 border-radius-6px box-shadow-medium box-shadow-extra-large-hover">
<div class="blog-image">
<a href="demo-blogger-blog-single-classic.html" class="d-block"><img src="images/blog-images-60.jpg" alt /></a>
<div class="blog-categories">
<a href="demo-blogger.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 text-dark-gray d-inline-block author-name text-transform-none">By <a href="demo-blogger.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.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-0 border-radius-6px box-shadow-medium box-shadow-extra-large-hover">
<div class="blog-image">
<a href="demo-blogger-blog-single-classic.html" class="d-block"><img src="images/blog-images-53.jpg" alt /></a>
<div class="blog-categories">
<a href="demo-blogger.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">People will stare. Make it worth their while.</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 text-dark-gray d-inline-block author-name text-transform-none">By <a href="demo-blogger.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.html#"><i class="fa-regular fa-heart text-red d-inline-block"></i><span class="text-dark-gray align-middle fw-700">55</span></a>
</div>
</div>
</div>
</div>
</li>
<li class="grid-item">
<div class="card border-0 border-radius-6px box-shadow-medium box-shadow-extra-large-hover">
<div class="blog-image">
<a href="demo-blogger-blog-single-classic.html" class="d-block"><img src="images/blog-images-63.jpg" alt /></a>
<div class="blog-categories">
<a href="demo-blogger.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">Trendy is the last stage before tacky.</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 text-dark-gray d-inline-block author-name text-transform-none">By <a href="demo-blogger.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.html#"><i class="fa-regular fa-heart text-red d-inline-block"></i><span class="text-dark-gray align-middle fw-700">60</span></a>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</section>
<section class="pt-60px pb-60px sm-pt-50px sm-pb-50px border-bottom border-color-extra-medium-gray">
<div class="container-fluid p-0">
<div class="row row-cols-xl-4 row-cols-lg-2 row-cols-md-2 row-cols-1" 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;: 150, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="col d-flex align-items-center lg-mb-30px">
<figure class="w-100px mb-0">
<a href="demo-blogger-blog-single-classic.html"><img src="images/demo-blogger-home-10.jpg" class="border-radius-6px" alt></a>
</figure>
<div class="col ps-25px">
<a href="demo-blogger-blog-single-classic.html" class="fw-600 fs-18 xl-fs-16 lh-26 xl-lh-22 text-dark-gray d-block mb-5px lg-w-70 md-w-100">People will stare. Make it worth their while.</a>
<span class="d-inline-block fs-15 fw-500">01 month ago</span>
</div>
</div>
<div class="col d-flex align-items-center lg-mb-30px">
<figure class="w-100px mb-0">
<a href="demo-blogger-blog-single-classic.html"><img src="images/demo-blogger-home-11.jpg" class="border-radius-6px" alt></a>
</figure>
<div class="col ps-25px">
<a href="demo-blogger-blog-single-classic.html" class="fw-600 fs-18 xl-fs-16 lh-26 xl-lh-22 text-dark-gray d-block mb-5px lg-w-70 md-w-100">Our 15 favorite music set photographs of 2020.</a>
<span class="d-inline-block fs-15 fw-500">02 month ago</span>
</div>
</div>
<div class="col d-flex align-items-center sm-mb-30px">
<figure class="w-100px mb-0">
<a href="demo-blogger-blog-single-classic.html"><img src="images/demo-blogger-home-12.jpg" class="border-radius-6px" alt></a>
</figure>
<div class="col ps-25px">
<a href="demo-blogger-blog-single-classic.html" class="fw-600 fs-18 xl-fs-16 lh-26 xl-lh-22 text-dark-gray d-block mb-5px lg-w-70 md-w-100">The year the cervantes duo became a superstar.</a>
<span class="d-inline-block fs-15 fw-500">06 month ago</span>
</div>
</div>
<div class="col d-flex align-items-center">
<figure class="w-100px mb-0">
<a href="demo-blogger-blog-single-classic.html"><img src="images/demo-blogger-home-13.jpg" class="border-radius-6px" alt></a>
</figure>
<div class="col ps-25px">
<a href="demo-blogger-blog-single-classic.html" class="fw-600 fs-18 xl-fs-16 lh-26 xl-lh-22 text-dark-gray d-block mb-5px lg-w-70 md-w-100">Richard Norton new album is winning over critics.</a>
<span class="d-inline-block fs-15 fw-500">08 month ago</span>
</div>
</div>
</div>
</div>
</section>
<section>
<div class="container-fluid p-0">
<div class="row justify-content-center mb-1">
<div class="col-12 col-md-5 text-center" data-anime="{ &quot;translateY&quot;: [0, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 300, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 100, &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 sm-w-100 sm-mb-20px">Latest 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;: 200, &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-56.jpg" alt /></a>
<div class="blog-categories">
<a href="demo-blogger.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.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.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-55.jpg" alt /></a>
<div class="blog-categories">
<a href="demo-blogger.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.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.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-59.jpg" alt /></a>
<div class="blog-categories">
<a href="demo-blogger.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.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.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-62.jpg" alt /></a>
<div class="blog-categories">
<a href="demo-blogger.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.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.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-52.jpg" alt /></a>
<div class="blog-categories">
<a href="demo-blogger.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.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.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-58.jpg" alt /></a>
<div class="blog-categories">
<a href="demo-blogger.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.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.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-54.jpg" alt /></a>
<div class="blog-categories">
<a href="demo-blogger.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.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.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-61.jpg" alt /></a>
<div class="blog-categories">
<a href="demo-blogger.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.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.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 text-center">
<a href="demo-blogger.html#" class="border border-color-extra-medium-gray d-inline-block"><img src="images/demo-blogger-home-22.jpg" alt></a>
</div>
</div>
</div>
</section>
<section class="p-0 bg-very-light-gray border-radius-6px position-relative overflow-hidden">
<div class="container-fluid">
<div class="row">
<div class="col-12 col-md-6 p-8 lg-p-5 sm-pt-30px sm-pb-30px sm-ps-20px sm-pe-20px position-relative" 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; }">
<img src="images/demo-blogger-home-leaf-04.png" class="position-absolute top-minus-30px left-minus-40px w-160px" alt>
<img src="images/demo-blogger-home-leaf-05.png" class="position-absolute bottom-40px right-minus-40px w-160px" alt>
<span class="ls-2px text-uppercase text-dark-gray fw-500 lh-22 mb-15px d-block">Reader <span class="d-inline-block border-2 border-bottom border-color-transparent-base-color fw-800">feedback</span></span>
<h3 class="fw-600 text-dark-gray alt-font ls-minus-1px w-90 xxl-w-100 mb-20px">Here is what our reader's have to say.</h3>
<div class="swiper position-relative magic-cursor" data-slider-options="{ &quot;autoHeight&quot;: true, &quot;loop&quot;: true, &quot;allowTouchMove&quot;: true, &quot;autoplay&quot;: { &quot;delay&quot;: 4000, &quot;disableOnInteraction&quot;: false }, &quot;navigation&quot;: { &quot;nextEl&quot;: &quot;.swiper-button-next&quot;, &quot;prevEl&quot;: &quot;.swiper-button-prev&quot; }, &quot;effect&quot;: &quot;fade&quot; }">
<div class="swiper-wrapper">
<div class="swiper-slide review-style-08">
<p class="w-70 xl-w-100">Love the theme, really neat and super easy to use. But the customer support is what makes this an even greater theme! ThemeZaa solved all the problems. I had with my custom settings.</p>
<div class="mt-20px">
<img class="rounded-circle w-95px h-95px me-15px" src="images/avtar-41.jpg" alt>
<div class="d-inline-block align-middle text-start">
<div class="text-dark-gray fs-19"><span class="fw-700">Alexander</span> harvard</div>
<div class="review-star-icon fs-18">
<i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i>
</div>
</div>
</div>
</div>
<div class="swiper-slide review-style-08">
<p class="w-70 xl-w-90 lg-w-100">I've purchased several themes over the years and this theme, by far is absolutely amazing. It's built extremely well the back end was well thought out the design options are endless.</p>
<div class="mt-20px">
<img class="rounded-circle w-95px h-95px me-15px" src="images/avtar-42.jpg" alt>
<div class="d-inline-block align-middle text-start">
<div class="text-dark-gray fs-19"><span class="fw-700">Shoko</span> mugikura</div>
<div class="review-star-icon fs-18">
<i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i>
</div>
</div>
</div>
</div>
<div class="swiper-slide review-style-08">
<p class="w-70 xl-w-90 lg-w-100">The theme is very valid and offers many possibilities of customization to adapt it to your needs, but the thing I got the most out of it was the relationship with the support team.</p>
<div class="mt-20px">
<img class="rounded-circle w-95px h-95px me-15px" src="images/avtar-43.jpg" alt>
<div class="d-inline-block align-middle text-start">
<div class="text-dark-gray fs-19"><span class="fw-700">Leonel</span> mooney</div>
<div class="review-star-icon fs-18">
<i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-6 cover-background sm-h-400px" style="background-image: url('images/demo-blogger-home-23.jpg')">
<a href="https://www.youtube.com/watch?v=cfXHhfNy7tU" class="absolute-middle-center text-center rounded-circle video-icon-box video-icon-extra-large popup-vimeo">
<span>
<span class="video-icon bg-white">
<i class="fa-solid fa-play text-dark-gray"></i>
<span class="video-icon-sonar">
<span class="video-icon-sonar-bfr border border-2 border-color-white"></span>
</span>
</span>
</span>
</a>
<div class="position-absolute text-center border-radius-5px right-25px bottom-25px sm-right-15px sm-bottom-15px ps-30px pe-30px sm-ps-20px sm-pe-20px blur-box bg-white-transparent">
<h2 class="mx-auto mb-0 fw-700 alt-font text-dark-gray mb-10px mt-15px">4.9</h2>
<div class="text-base-color fs-16 ls-2px lh-10">
<i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i>
</div>
<span class="text-dark-gray text-uppercase fs-13 fw-700 mb-15px d-inline-block">TrustScore</span>
</div>
</div>
</div>
</div>
</section>
<section class="half-section position-relative">
<img src="images/demo-blogger-home-figure-01.png" class="position-absolute top-10 left-minus-30 d-none d-lg-block" data-bottom-top="transform: translateY(-50px)" data-top-bottom="transform: translateY(50px)" alt>
<img src="images/demo-blogger-home-figure-02.png" class="position-absolute top-10 right-minus-25 d-none d-lg-block" data-bottom-top="transform: translateY(-50px)" data-top-bottom="transform: translateY(50px)" alt>
<div class="container-fluid p-0">
<div class="row position-relative clients-style-08 pt-35px pb-35px lg-pt-20px lg-pb-20px">
<div class="col swiper text-center feather-shadow" data-slider-options="{ &quot;slidesPerView&quot;: 2, &quot;spaceBetween&quot;:0, &quot;speed&quot;: 4000, &quot;loop&quot;: true, &quot;pagination&quot;: { &quot;el&quot;: &quot;.slider-four-slide-pagination-2&quot;, &quot;clickable&quot;: false }, &quot;allowTouchMove&quot;: false, &quot;autoplay&quot;: { &quot;delay&quot;:0, &quot;disableOnInteraction&quot;: false }, &quot;navigation&quot;: { &quot;nextEl&quot;: &quot;.slider-four-slide-next-2&quot;, &quot;prevEl&quot;: &quot;.slider-four-slide-prev-2&quot; }, &quot;keyboard&quot;: { &quot;enabled&quot;: true, &quot;onlyInViewport&quot;: true }, &quot;breakpoints&quot;: { &quot;1200&quot;: { &quot;slidesPerView&quot;: 6 }, &quot;992&quot;: { &quot;slidesPerView&quot;: 4 }, &quot;768&quot;: { &quot;slidesPerView&quot;: 3 } }, &quot;effect&quot;: &quot;slide&quot; }">
<div class="swiper-wrapper marquee-slide">
<div class="swiper-slide">
<a href="demo-blogger.html#"><img src="images/logo-asos.svg" class="h-35px" alt /></a>
</div>
<div class="swiper-slide">
<a href="demo-blogger.html#"><img src="images/logo-chanel.svg" class="h-35px" alt /></a>
</div>
<div class="swiper-slide">
<a href="demo-blogger.html#"><img src="images/logo-nike.svg" class="h-35px" alt /></a>
</div>
<div class="swiper-slide">
<a href="demo-blogger.html#"><img src="images/logo-gucci.svg" class="h-35px" alt /></a>
</div>
<div class="swiper-slide">
<a href="demo-blogger.html#"><img src="images/logo-zara.svg" class="h-35px" alt /></a>
</div>
<div class="swiper-slide">
<a href="demo-blogger.html#"><img src="images/logo-adidas.svg" class="h-35px" alt /></a>
</div>
<div class="swiper-slide">
<a href="demo-blogger.html#"><img src="images/logo-celine.svg" class="h-35px" alt /></a>
</div>
<div class="swiper-slide">
<a href="demo-blogger.html#"><img src="images/logo-asos.svg" class="h-35px" alt /></a>
</div>
<div class="swiper-slide">
<a href="demo-blogger.html#"><img src="images/logo-chanel.svg" class="h-35px" alt /></a>
</div>
<div class="swiper-slide">
<a href="demo-blogger.html#"><img src="images/logo-nike.svg" class="h-35px" alt /></a>
</div>
<div class="swiper-slide">
<a href="demo-blogger.html#"><img src="images/logo-gucci.svg" class="h-35px" alt /></a>
</div>
<div class="swiper-slide">
<a href="demo-blogger.html#"><img src="images/logo-zara.svg" class="h-35px" alt /></a>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="pt-0 pb-60px sm-pb-30px position-relative">
<div class="container-fluid p-0">
<div class="row mb-3">
<div class="col-12 text-center">
<span class="ls-2px text-uppercase text-dark-gray fw-500 lh-22 mb-15px d-block">Follow us on <span class="d-inline-block border-2 border-bottom border-color-transparent-base-color fw-800">Instagram</span></span>
</div>
</div>
<div class="row row-cols-lg-6 row-cols-md-3 row-cols-2 instagram-follow-api position-relative mb-4 sm-mb-30px">
<div class="col instafeed-grid md-mb-30px">
<figure><a href="https://www.instagram.com" target="_blank"><img src="images/demo-blogger-home-instagram-01.jpg" class="insta-image" alt><span class="insta-icon"><i class="fa-brands fa-instagram"></i></span></a></figure>
</div>
<div class="col instafeed-grid md-mb-30px">
<figure><a href="https://www.instagram.com" target="_blank"><img src="images/demo-blogger-home-instagram-02.jpg" class="insta-image" alt><span class="insta-icon"><i class="fa-brands fa-instagram"></i></span></a></figure>
</div>
<div class="col instafeed-grid md-mb-30px">
<figure><a href="https://www.instagram.com" target="_blank"><img src="images/demo-blogger-home-instagram-03.jpg" class="insta-image" alt><span class="insta-icon"><i class="fa-brands fa-instagram"></i></span></a></figure>
</div>
<div class="col instafeed-grid">
<figure><a href="https://www.instagram.com" target="_blank"><img src="images/demo-blogger-home-instagram-04.jpg" class="insta-image" alt><span class="insta-icon"><i class="fa-brands fa-instagram"></i></span></a></figure>
</div>
<div class="col instafeed-grid">
<figure><a href="https://www.instagram.com" target="_blank"><img src="images/demo-blogger-home-instagram-05.jpg" class="insta-image" alt><span class="insta-icon"><i class="fa-brands fa-instagram"></i></span></a></figure>
</div>
<div class="col instafeed-grid">
<figure><a href="https://www.instagram.com" target="_blank"><img src="images/demo-blogger-home-instagram-06.jpg" class="insta-image" alt><span class="insta-icon"><i class="fa-brands fa-instagram"></i></span></a></figure>
</div>
</div>
<div class="row justify-content-center">
<div class="col-lg-12 col-md-12 col-sm-12 text-center elements-social social-icon-style-10">
<ul class="fs-18">
<li class="me-15px ms-15px"><a class="facebook" href="https://www.facebook.com/" target="_blank">
<i class="fa-brands fa-facebook-f me-10px"></i>
<span class="fw-600">Facebook</span>
</a>
</li>
<li class="me-15px ms-15px">
<a class="dribbble" href="http://www.dribbble.com" target="_blank">
<i class="fa-brands fa-dribbble me-10px"></i>
<span class="fw-600">Dribbble</span>
</a>
</li>
<li class="me-15px ms-15px">
<a class="twitter" href="https://www.twitter.com" target="_blank">
<i class="fa-brands fa-twitter me-10px"></i>
<span class="fw-600">Twitter</span>
</a>
</li>
<li class="me-15px ms-15px">
<a class="instagram" href="https://www.instagram.com" target="_blank">
<i class="fa-brands fa-instagram me-10px"></i>
<span class="fw-600">Instagram</span>
</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#771e1911183713181a161e195914181a" class="text-dark-gray text-decoration-line-bottom"><span class="__cf_email__" data-cfemail="d1b8bfb7be91b5bebcb0b8bfffb2bebc">[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.html#">Lookbook</a></li>
<li><a href="demo-blogger.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.html#">Readers guide</a></li>
<li><a href="demo-blogger-contact.html">Contact us</a></li>
<li><a href="demo-blogger.html#">Terms of use</a></li>
<li><a href="demo-blogger.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.html#" class="text-decoration-line-bottom">privacy policy</a> and <a href="demo-blogger.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.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.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.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>