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

465 lines
28 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/magazine/magazine.css" />
</head>
<body data-mobile-nav-style="classic">
<div class="box-layout">
<header>
<nav class="navbar navbar-expand-lg bg-white header-light disable-fixed">
<div class="container-fluid">
<div class="col-auto col-xxl-3 col-lg-2 me-lg-0 me-auto">
<div class="header-icon">
<div class="header-push-button icon">
<div class="push-button">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
<a class="navbar-brand" href="demo-magazine.html">
<img src="images/demo-magazine-logo-black.png" data-at2x="images/demo-magazine-logo-black@2x.png" alt class="default-logo">
<img src="images/demo-magazine-logo-black.png" data-at2x="images/demo-magazine-logo-black@2x.png" alt class="alt-logo">
<img src="images/demo-magazine-logo-black.png" data-at2x="images/demo-magazine-logo-black@2x.png" alt class="mobile-logo">
</a>
</div>
<div class="col-auto menu-order position-static">
<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-magazine.html" class="nav-link">Home</a></li>
<li class="nav-item"><a href="demo-magazine-fashion.html" class="nav-link">Fashion</a></li>
<li class="nav-item"><a href="demo-magazine-food.html" class="nav-link">Food</a></li>
<li class="nav-item"><a href="demo-magazine-travel.html" class="nav-link">Travel</a></li>
<li class="nav-item"><a href="demo-magazine-music.html" class="nav-link">Music</a></li>
<li class="nav-item"><a href="demo-magazine-fitness.html" class="nav-link">Fitness</a></li>
<li class="nav-item"><a href="demo-magazine-contact.html" class="nav-link">Contact</a></li>
</ul>
</div>
</div>
<div class="col-auto col-xxl-3 col-xl-2 text-end md-pe-0">
<div class="header-icon">
<div class="header-search-icon icon d-none d-md-flex">
<a href="demo-magazine-fitness.html#" class="search-form-icon header-search-form fw-800 text-uppercase"><i class="feather icon-feather-search text-dark-gray align-middle me-5px xl-me-0"></i><span class="fs-15 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="text-dark-gray text-center mb-4 fw-700 ls-minus-2px">What are you looking for?</h2>
<input class="search-input border-color-dark-gray" 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-30px xxl-ms-10px xs-ms-0 d-none d-md-block">
<a href="demo-magazine-fitness.html#subscribe" class="btn btn-dark-gray section-link btn-very-small left-icon btn-round-edge btn-box-shadow fw-600">
<i class="feather icon-feather-mail align-middle"></i>Subscribe
</a>
</div>
</div>
</div>
</div>
</nav>
<div class="push-menu push-menu-style-2 ps-50px pe-50px pt-4 pb-4 bg-white">
<span class="close-menu text-dark-gray text-dark-gray-hover"><i class="fa-solid fa-xmark fs-20"></i></span>
<div class="d-flex flex-column align-items-center justify-content-center h-100">
<div class="hamburger-menu menu-list-wrapper w-90 lg-w-100 lg-no-margin" data-scroll-options="{ &quot;theme&quot;: &quot;light&quot; }">
<ul class="text-dark-gray menu-item-list alt-font fw-700 ls-minus-1px">
<li class="nav-item"><a href="demo-magazine.html" class="nav-link">Home</a></li>
<li class="nav-item"><a href="demo-magazine-fashion.html" class="nav-link">Fashion</a></li>
<li class="nav-item"><a href="demo-magazine-food.html" class="nav-link">Food</a></li>
<li class="nav-item"><a href="demo-magazine-travel.html" class="nav-link">Travel</a></li>
<li class="nav-item"><a href="demo-magazine-music.html" class="nav-link">Music</a></li>
<li class="nav-item"><a href="demo-magazine-fitness.html" class="nav-link">Fitness</a></li>
<li class="nav-item"><a href="demo-magazine-contact.html" class="nav-link">Contact</a></li>
</ul>
</div>
<div class="text-center elements-social social-icon-style-04">
<ul class="medium-icon dark">
<li class="mx-0"><a class="facebook" href="https://www.facebook.com/" target="_blank"><i class="fa-brands fa-facebook-f"></i><span></span></a></li>
<li class="mx-0"><a class="instagram" href="https://www.instagram.com" target="_blank"><i class="fa-brands fa-instagram"></i><span></span></a></li>
<li class="mx-0"><a class="twitter" href="https://www.twitter.com" target="_blank"><i class="fa-brands fa-twitter"></i><span></span></a></li>
<li class="mx-0"><a class="dribbble" href="http://www.dribbble.com" target="_blank"><i class="fa-brands fa-dribbble"></i><span></span></a></li>
</ul>
</div>
</div>
</div>
</header>
<section class="top-space-margin page-title-center-alignment pt-55px overlap-height">
<div class="container overlap-gap-section">
<div class="row align-items-center justify-content-center" data-anime="{ &quot;translateY&quot;: [0, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 800, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="col-12 col-lg-6 col-md-8 position-relative text-center page-title-extra-large">
<h1 class="alt-font text-dark-gray fw-800 mb-0 ps-70px pe-70px xs-ps-0 xs-pe-0 d-inline-block position-relative text-highlight shadow-none" data-shadow-animation="true" data-animation-delay="700"><span class="w-100 h-2px position-absolute left-0px top-55 bg-base-color separator-animation d-sm-block d-none"></span>Fitness</h1>
</div>
</div>
</div>
</section>
<section class="bg-gradient-bottom-very-light-gray position-relative">
<div class="container">
<div class="row align-items-center justify-content-center mb-8 overlap-section">
<div class="col-12 position-relative text-center page-title-extra-large">
<div class="interactive-banner-style-09 position-relative overflow-hidden">
<img src="images/demo-magazine-fashion-01.jpg" alt />
<div class="opacity-full bg-gradient-bottom-dark-transparent"></div>
<div class="image-content h-100 w-100 ps-10 pe-10 pb-7 sm-pe-15px sm-ps-15px sm-pt-30px sm-pb-30px text-center d-flex justify-content-end align-items-end flex-column">
<div class="w-100">
<a href="demo-magazine-travel.html" class="btn btn-medium btn-rounded btn-box-shadow btn-white text-uppercase fw-700 ps-15px pe-15px pt-5px pb-5px lh-16 mb-20px">Travel</a>
<div class="alt-font fw-700 sliding-box-title mb-10px w-70 lg-w-90 md-w-100 mx-auto"><a href="demo-magazine-blog-single-creative.html" class="text-white alt-font fw-600 fs-40 sm-fs-24 ls-minus-1px sm-ls-0px">Life is what happens when you're busy making other plans</a></div>
<div class="d-flex justify-content-center align-items-center">
<div class="ms-10px me-10px">
<a href="demo-magazine-travel.html"><i class="feather icon-feather-message-circle text-white d-inline-block me-5px fs-15"></i><span class="fs-13 text-uppercase text-white opacity-7">By Sandra jones</span></a>
</div>
<div class="ms-10px me-10px">
<a href="demo-magazine-travel.html"><i class="feather icon-feather-calendar text-white d-inline-block me-5px fs-15"></i><span class="fs-13 text-uppercase text-white opacity-7">20 Jan 2023</span></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row justify-content-center mb-4 mt-4" data-anime="{ &quot;translateY&quot;: [0, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 800, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="col-lg-8 text-center">
<h2 class="alt-font text-dark-gray fw-700 ls-minus-1px ps-35px pe-35px xs-ps-0 xs-pe-0 d-inline-block position-relative text-highlight shadow-none" data-shadow-animation="true" data-animation-delay="700"><span class="h-2px position-absolute left-0px top-55 bg-base-color separator-animation d-sm-block d-none"></span>Featured stories</h2>
</div>
</div>
<div class="row justify-content-center">
<div class="col-12 col-lg-8 blog-standard md-mb-50px sm-mb-40px">
<ul class="blog-side-image blog-wrapper post-sidebar grid grid-1col xxl-grid-1col xl-grid-1col lg-grid-1col md-grid-1col sm-grid-1col xs-grid-1col" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [50, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 800, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<li class="grid-sizer"></li>
<li class="grid-item">
<div class="blog-box d-md-flex d-block flex-row h-100 overflow-hidden box-shadow-double-large">
<div class="blog-image w-45 sm-w-100 cover-background sm-h-300px xs-h-200px" style="background-image: url('images/demo-magazine-home-14.jpg')">
<a href="demo-magazine-blog-single-creative.html" class="blog-post-image-overlay"></a>
</div>
<div class="blog-content w-55 sm-w-100 p-50px lg-ps-30px lg-pe-30px bg-white d-flex flex-column justify-content-center align-items-start xs-p-25px last-paragraph-no-margin">
<a href="demo-magazine-travel.html" class="categories-btn bg-base-color text-white btn-box-shadow text-uppercase fw-600 mb-20px">Travel</a>
<a href="demo-magazine-blog-single-creative.html" class="card-title text-dark-gray mb-15px fw-600 fs-22 xs-fs-20 alt-font w-95 xs-w-100">Live in the sunshine, swim the sea, drink the wild air.</a>
<p>Lorem ipsum consectetur adipiscing purus fermentum. Praesent vitae quam sed...</p>
</div>
</div>
</li>
<li class="grid-item">
<div class="blog-box d-md-flex d-block flex-row h-100 overflow-hidden box-shadow-double-large">
<div class="blog-image w-45 sm-w-100 cover-background sm-h-300px xs-h-200px" style="background-image: url('images/demo-magazine-home-15.jpg')">
<a href="demo-magazine-blog-single-creative.html" class="blog-post-image-overlay"></a>
</div>
<div class="blog-content w-55 sm-w-100 p-50px lg-ps-30px lg-pe-30px bg-white d-flex flex-column justify-content-center align-items-start xs-p-25px last-paragraph-no-margin">
<a href="demo-magazine-music.html" class="categories-btn bg-base-color text-white btn-box-shadow text-uppercase fw-600 mb-20px">Lifestyle</a>
<a href="demo-magazine-blog-single-creative.html" class="card-title text-dark-gray mb-15px fw-600 fs-22 xs-fs-20 alt-font w-95 xs-w-100">The longer I live, the more beautiful life becomes.</a>
<p>Lorem ipsum consectetur adipiscing purus fermentum. Praesent vitae quam sed...</p>
</div>
</div>
</li>
<li class="grid-item">
<div class="blog-box d-md-flex d-block flex-row h-100 overflow-hidden box-shadow-double-large">
<div class="blog-image w-45 sm-w-100 cover-background sm-h-300px xs-h-200px" style="background-image: url('images/demo-magazine-home-16.jpg')">
<a href="demo-magazine-blog-single-creative.html" class="blog-post-image-overlay"></a>
</div>
<div class="blog-content w-55 sm-w-100 p-50px lg-ps-30px lg-pe-30px bg-white d-flex flex-column justify-content-center align-items-start xs-p-25px last-paragraph-no-margin">
<a href="demo-magazine-fashion.html" class="categories-btn bg-base-color text-white btn-box-shadow text-uppercase fw-600 mb-20px">Fashion</a>
<a href="demo-magazine-blog-single-creative.html" class="card-title text-dark-gray mb-15px fw-600 fs-22 xs-fs-20 alt-font w-95 xs-w-100">When you cease to dream you cease to live.</a>
<p>Lorem ipsum consectetur adipiscing purus fermentum. Praesent vitae quam sed...</p>
</div>
</div>
</li>
<li class="grid-item">
<div class="blog-box d-md-flex d-block flex-row h-100 overflow-hidden box-shadow-double-large">
<div class="blog-image w-45 sm-w-100 cover-background sm-h-300px xs-h-200px" style="background-image: url('images/demo-magazine-home-17.jpg')">
<a href="demo-magazine-blog-single-creative.html" class="blog-post-image-overlay"></a>
</div>
<div class="blog-content w-55 sm-w-100 p-50px lg-ps-30px lg-pe-30px bg-white d-flex flex-column justify-content-center align-items-start xs-p-25px last-paragraph-no-margin">
<a href="demo-magazine-travel.html" class="categories-btn bg-base-color text-white btn-box-shadow text-uppercase fw-600 mb-20px">Travel</a>
<a href="demo-magazine-blog-single-creative.html" class="card-title text-dark-gray mb-15px fw-600 fs-22 xs-fs-20 alt-font w-95 xs-w-100">The best way to predict your future is to create it.</a>
<p>Lorem ipsum consectetur adipiscing purus fermentum. Praesent vitae quam sed...</p>
</div>
</div>
</li>
<li class="grid-item">
<div class="blog-box d-md-flex d-block flex-row h-100 overflow-hidden box-shadow-double-large">
<div class="blog-image w-45 sm-w-100 cover-background sm-h-300px xs-h-200px" style="background-image: url('images/demo-magazine-home-18.jpg')">
<a href="demo-magazine-blog-single-creative.html" class="blog-post-image-overlay"></a>
</div>
<div class="blog-content w-55 sm-w-100 p-50px lg-ps-30px lg-pe-30px bg-white d-flex flex-column justify-content-center align-items-start xs-p-25px last-paragraph-no-margin">
<a href="demo-magazine-fitness.html" class="categories-btn bg-base-color text-white btn-box-shadow text-uppercase fw-600 mb-20px">Interior</a>
<a href="demo-magazine-blog-single-creative.html" class="card-title text-dark-gray mb-15px fw-600 fs-22 xs-fs-20 alt-font w-95 xs-w-100">Be happy for this moment. This moment is your life.</a>
<p>Lorem ipsum consectetur adipiscing purus fermentum. Praesent vitae quam sed...</p>
</div>
</div>
</li>
<li class="grid-item">
<div class="blog-box d-md-flex d-block flex-row h-100 overflow-hidden box-shadow-double-large">
<div class="blog-image w-45 sm-w-100 cover-background sm-h-300px xs-h-200px" style="background-image: url('images/demo-magazine-home-19.jpg')">
<a href="demo-magazine-blog-single-creative.html" class="blog-post-image-overlay"></a>
</div>
<div class="blog-content w-55 sm-w-100 p-50px lg-ps-30px lg-pe-30px bg-white d-flex flex-column justify-content-center align-items-start xs-p-25px last-paragraph-no-margin">
<a href="demo-magazine-food.html" class="categories-btn bg-base-color text-white btn-box-shadow text-uppercase fw-600 mb-20px">Interior</a>
<a href="demo-magazine-blog-single-creative.html" class="card-title text-dark-gray mb-15px fw-600 fs-22 xs-fs-20 alt-font w-95 xs-w-100">All the things I love is what my business is all about.</a>
<p>Lorem ipsum consectetur adipiscing purus fermentum. Praesent vitae quam sed...</p>
</div>
</div>
</li>
</ul>
</div>
<aside class="col-12 col-xl-4 col-lg-4 ps-55px xl-ps-50px lg-ps-15px sidebar">
<div data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [50, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 800, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="mb-15 md-mb-50px xs-mb-35px">
<div class="alt-font fw-700 fs-19 lh-22 ls-minus-05px text-dark-gray border-bottom border-color-dark-gray border-2 d-block mb-30px pb-15px position-relative">Popular post</div>
<ul class="popular-post-sidebar position-relative">
<li class="d-flex align-items-center">
<figure>
<a href="demo-magazine-blog-single-creative.html"><img src="images/demo-magazine-home-20.jpg" alt></a>
</figure>
<div class="col media-body">
<a href="demo-magazine-blog-single-creative.html" class="fw-600 fs-17 text-dark-gray d-inline-block mb-10px">Trendy is the last stage before tacky.</a>
<div><a href="demo-magazine-food.html" class="d-inline-block fs-15">20 February 2023</a></div>
</div>
</li>
<li class="d-flex align-items-center">
<figure>
<a href="demo-magazine-blog-single-creative.html"><img src="images/demo-magazine-home-21.jpg" alt></a>
</figure>
<div class="col media-body">
<a href="demo-magazine-blog-single-creative.html" class="fw-600 fs-17 text-dark-gray d-inline-block mb-10px">Believe you can and you're halfway there.</a>
<div><a href="demo-magazine-fashion.html" class="d-inline-block fs-15">18 February 2023</a></div>
</div>
</li>
<li class="d-flex align-items-center">
<figure>
<a href="demo-magazine-blog-single-creative.html"><img src="images/demo-magazine-home-22.jpg" alt></a>
</figure>
<div class="col media-body">
<a href="demo-magazine-blog-single-creative.html" class="fw-600 fs-17 text-dark-gray d-inline-block mb-10px">In a gentle way, you can shake the world.</a>
<div><a href="demo-magazine-travel.html" class="d-inline-block fs-15">16 February 2023</a></div>
</div>
</li>
</ul>
</div>
<div class="mb-15 md-mb-50px xs-mb-35px">
<div class="alt-font fw-700 fs-19 lh-22 ls-minus-05px text-dark-gray border-bottom border-color-dark-gray border-2 d-block mb-30px pb-15px position-relative">Explore category</div>
<ul class="category-list-sidebar position-relative">
<li class="d-flex align-items-center h-80px cover-background ps-35px pe-35px" style="background-image: url('images/demo-magazine-home-23.jpg')">
<div class="opacity-medium bg-gradient-dark-transparent"></div>
<a href="demo-magazine-fashion.html" class="d-flex align-items-center position-relative w-100 h-100">
<span class="text-white mb-0 fs-20 fw-600 fancy-text-style-4">Fashion</span>
<span class="btn text-white position-absolute"><i class="bi bi-arrow-right ms-0 fs-24"></i></span>
</a>
</li>
<li class="d-flex align-items-center h-80px cover-background ps-35px pe-35px" style="background-image: url('images/demo-magazine-home-24.jpg')">
<div class="opacity-medium bg-gradient-dark-transparent"></div>
<a href="demo-magazine-food.html" class="d-flex align-items-center position-relative w-100 h-100">
<span class="text-white mb-0 fs-20 fw-600 fancy-text-style-4">Creative</span>
<span class="btn text-white position-absolute"><i class="bi bi-arrow-right ms-0 fs-24"></i></span>
</a>
</li>
<li class="d-flex align-items-center h-80px cover-background ps-35px pe-35px" style="background-image: url('images/demo-magazine-home-25.jpg')">
<div class="opacity-medium bg-gradient-dark-transparent"></div>
<a href="demo-magazine-travel.html" class="d-flex align-items-center position-relative w-100 h-100">
<span class="text-white mb-0 fs-20 fw-600 fancy-text-style-4">Business</span>
<span class="btn text-white position-absolute"><i class="bi bi-arrow-right ms-0 fs-24"></i></span>
</a>
</li>
<li class="d-flex align-items-center h-80px cover-background ps-35px pe-35px" style="background-image: url('images/demo-magazine-home-26.jpg')">
<div class="opacity-medium bg-gradient-dark-transparent"></div>
<a href="demo-magazine-music.html" class="d-flex align-items-center position-relative w-100 h-100">
<span class="text-white mb-0 fs-20 fw-600 fancy-text-style-4">Lifestyle</span>
<span class="btn text-white position-absolute"><i class="bi bi-arrow-right ms-0 fs-24"></i></span>
</a>
</li>
</ul>
</div>
<div class="mb-17 md-mb-50px xs-mb-35px">
<div class="bg-very-light-gray p-14 xl-p-10 newsletter-style-05">
<div class="alt-font fw-700 fs-19 lh-22 ls-minus-05px text-dark-gray border-bottom border-color-dark-gray border-2 d-block mb-20px pb-15px position-relative">Newsletter subscribe</div>
<p class="fs-15 lh-24">Signup for free and be the first to get notified on new updates.</p>
<form action="email-templates/subscribe-newsletter.php" method="post" class="position-relative">
<input class="w-100 fs-15 input-small form-control box-shadow-medium-bottom border-radius-0px text-center required mb-10px" type="email" name="email" placeholder="Enter your email address" />
<input type="hidden" name="redirect" value>
<button class="btn btn-small btn-dark-gray w-100 btn-box-shadow submit" aria-label="submit now">submit now</button>
<div class="d-flex fs-14 mt-10px">
<div class="d-inline-block"><i class="line-icon-Handshake me-10px align-middle icon-very-medium"></i>Protecting your privacy</div>
</div>
<div class="form-results border-radius-4px mt-10px lh-normal pt-10px pb-10px ps-15px pe-15px fs-16 w-100 text-center position-absolute z-index-1 d-none"></div>
</form>
</div>
</div>
<div class="mb-17 md-mb-0 elements-social social-icon-style-10">
<div class="alt-font fw-700 fs-19 lh-22 ls-minus-05px text-dark-gray border-bottom border-color-dark-gray border-2 d-block mb-30px pb-15px position-relative">Stay connected</div>
<div class="row row-cols-2 row-cols-lg-2 justify-content-center align-items-center g-0 default-color">
<div class="col border-bottom border-end border-color-extra-medium-gray ps-25px pe-25px xl-ps-15px xl-pe-15px lg-ps-10px lg-pe-10px pt-10px pb-10px">
<a class="facebook" href="https://www.facebook.com/" target="_blank">
<i class="fa-brands fa-facebook-f fs-18 me-10px"></i>
<span class="fw-500">Facebook</span>
</a>
</div>
<div class="col border-bottom border-color-extra-medium-gray ps-25px pe-25px xl-ps-15px xl-pe-15px lg-ps-10px lg-pe-10px pt-10px pb-10px">
<a class="dribbble" href="http://www.dribbble.com" target="_blank">
<i class="fa-brands fa-dribbble fs-18 me-10px"></i>
<span class="fw-500">Dribbble</span>
</a>
</div>
<div class="col border-bottom border-end border-color-extra-medium-gray ps-25px pe-25px xl-ps-15px xl-pe-15px lg-ps-10px lg-pe-10px pt-10px pb-10px">
<a class="twitter" href="https://www.twitter.com" target="_blank">
<i class="fa-brands fa-twitter fs-18 me-10px"></i>
<span class="fw-500">Twitter</span>
</a>
</div>
<div class="col border-bottom border-color-extra-medium-gray ps-25px pe-25px xl-ps-15px xl-pe-15px lg-ps-10px lg-pe-10px pt-10px pb-10px">
<a class="youtube" href="https://www.youtube.com" target="_blank">
<i class="fa-brands fa-youtube fs-18 me-10px"></i>
<span class="fw-500">Youtube</span>
</a>
</div>
<div class="col border-bottom border-end border-color-extra-medium-gray ps-25px pe-25px xl-ps-15px xl-pe-15px lg-ps-10px lg-pe-10px pt-10px pb-10px">
<a class="instagram" href="https://www.instagram.com" target="_blank">
<i class="fa-brands fa-instagram fs-18 me-10px"></i>
<span class="fw-500">Instagram</span>
</a>
</div>
<div class="col border-bottom border-color-extra-medium-gray ps-25px pe-25px xl-ps-15px xl-pe-15px lg-ps-10px lg-pe-10px pt-10px pb-10px">
<a class="vimeo" href="https://vimeo.com/" target="_blank">
<i class="fa-brands fa-vimeo-v fs-18 me-10px"></i>
<span class="fw-500">Vimeo</span>
</a>
</div>
<div class="col border-end border-color-extra-medium-gray ps-25px pe-25px xl-ps-15px xl-pe-15px lg-ps-10px lg-pe-10px pt-10px pb-10px">
<a class="linkedin" href="https://www.linkedin.com/" target="_blank">
<i class="fa-brands fa-linkedin-in fs-18 me-10px"></i>
<span class="fw-500">Linkedin</span>
</a>
</div>
<div class="col ps-25px pe-25px xl-ps-15px xl-pe-15px lg-ps-10px lg-pe-10px pt-10px pb-10px">
<a class="behance" href="http://www.behance.com/" target="_blank">
<i class="fa-brands fa-behance fs-18 me-10px"></i>
<span class="fw-500 fs-16">Behance</span>
</a>
</div>
</div>
</div>
</div>
</aside>
</div>
</div>
</section>
<footer id="subscribe" class="bg-very-light-gray">
<div class="container position-relative">
<div class="position-absolute left-0px top-minus-150px md-top-minus-110px background-no-repeat h-300px w-100 d-none d-xl-inline-block" style="background-image: url('images/demo-magazine-footer-icon.png')" data-bottom-top="transform: translateY(-50px)" data-top-bottom="transform: translateY(50px)"></div>
<div class="row justify-content-center">
<div class="col-12 col-xxl-6 col-xl-7 col-lg-8 text-center mb-50px sm-mb-30px">
<h2 class="alt-font fw-800 ls-minus-1px text-dark-gray">Stay tuned with weekly newsletters.</h2>
<div class="d-inline-block w-100 newsletter-style-04 position-relative">
<form action="email-templates/subscribe-newsletter.php" method="post" class="position-relative w-100">
<input class="bg-transparent w-100 border-0 border-bottom border-1 border-color-dark-gray form-control required" type="email" name="email" placeholder="Enter your email address" />
<input type="hidden" name="redirect" value>
<button type="submit" class="btn text-dark-gray fw-600 submit text-transform-none" aria-label="subscribe">Subscribe</button>
<div class="form-results border-radius-0px p-15px fs-16 lh-24 w-100 text-center position-absolute d-none"></div>
</form>
</div>
</div>
</div>
<div class="footer-bottom">
<div class="row justify-content-center">
<div class="col-12 last-paragraph-no-margin text-center mb-50px sm-mb-30px">
<p class="fs-15 text-dark-gray">&copy; 2024 Crafto is Proudly Powered by <a href="https://www.themezaa.com/" target="_blank" class="text-dark-gray">ThemeZaa.</a></p>
<a href="cdn-cgi/l/email-protection.html#a6cfc8c0c9e6c2c9cbc7cfc888c5c9cb" class="fs-18 text-dark-gray text-dark-gray-hover fw-600 text-decoration-line-bottom"><span class="__cf_email__" data-cfemail="630a0d050c23070c0e020a0d4d000c0e">[email&#160;protected]</span></a>
</div>
<div class="col-12 text-center">
<div class="elements-social social-icon-style-02">
<ul class="large-icon dark">
<li><a class="facebook" href="https://www.facebook.com/" target="_blank"><i class="fa-brands fa-facebook-f"></i></a></li>
<li><a class="dribbble" href="http://www.dribbble.com" target="_blank"><i class="fa-brands fa-dribbble"></i></a></li>
<li><a class="twitter" href="https://www.twitter.com" target="_blank"><i class="fa-brands fa-twitter"></i></a></li>
<li><a class="instagram" href="https://www.instagram.com" target="_blank"><i class="fa-brands fa-instagram"></i></a></li>
</ul>
</div>
</div>
</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-magazine-fitness.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-magazine-fitness.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-magazine-fitness.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>