Access_New/demo-business-blog-single-modern.html
2024-09-05 11:33:27 +05:45

468 lines
26 KiB
HTML

<!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/business/business.css" />
</head>
<body data-mobile-nav-style="classic">
<header>
<nav class="navbar navbar-expand-lg header-transparent bg-transparent header-reverse" data-header-hover="light">
<div class="container-fluid">
<div class="col-auto col-xxl-3 col-lg-2 me-lg-0 me-auto">
<a class="navbar-brand" href="demo-business.html">
<img src="images/demo-business-logo-white.png" data-at2x="images/demo-business-logo-white@2x.png" alt class="default-logo">
<img src="images/demo-business-logo-black.png" data-at2x="images/demo-business-logo-black@2x.png" alt class="alt-logo">
<img src="images/demo-business-logo-black.png" data-at2x="images/demo-business-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 alt-font">
<li class="nav-item"><a href="demo-business.html" class="nav-link">Home</a></li>
<li class="nav-item"><a href="demo-business-about.html" class="nav-link">About</a></li>
<li class="nav-item dropdown dropdown-with-icon-style02">
<a href="demo-business-services.html" class="nav-link">Services</a>
<i class="fa-solid fa-angle-down dropdown-toggle" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false"></i>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li><a href="demo-business-services-details.html"><i class="bi bi-briefcase"></i>Business planning</a></li>
<li><a href="demo-business-services-details.html"><i class="bi bi-clipboard-data"></i>Business research</a></li>
<li><a href="demo-business-services-details.html"><i class="bi bi-peace"></i>Tracking operations</a></li>
<li><a href="demo-business-services-details.html"><i class="bi bi-bar-chart-line"></i>Market research</a></li>
<li><a href="demo-business-services-details.html"><i class="bi bi-send-check"></i>Business campaign</a></li>
<li><a href="demo-business-services-details.html"><i class="bi bi-globe2"></i>Digital solutions</a></li>
</ul>
</li>
<li class="nav-item"><a href="demo-business-clients.html" class="nav-link">Clients</a></li>
<li class="nav-item"><a href="demo-business-pricing.html" class="nav-link">Pricing</a></li>
<li class="nav-item"><a href="demo-business-blog.html" class="nav-link">Blog</a></li>
<li class="nav-item"><a href="demo-business-contact.html" class="nav-link">Contact</a></li>
</ul>
</div>
</div>
<div class="col-auto col-xxl-3 col-lg-2 text-end d-none d-sm-flex">
<div class="header-icon">
<div class="d-none d-xxl-inline-block me-25px xxl-me-10px"><div class="alt-font fs-15 xl-fs-13 widget-text fw-500"><span class="w-35px h-35px bg-base-color d-inline-block lh-36 me-10px border-radius-100px"><i class="feather icon-feather-phone me-10px"></i></span><a href="tel:1800222000" class="widget-text text-white-hover">1 800 222 000</a></div></div>
<div class="header-button"><a href="demo-business-contact.html" class="btn btn-very-small btn-transparent-white-light btn-rounded">Get a quote</a></div>
</div>
</div>
</div>
</nav>
</header>
<section class="one-fourth-screen bg-dark-gray ipad-top-space-margin sm-mb-50px" data-parallax-background-ratio="0.5" style="background-image: url('images/demo-business-blog-single-creative-bg.jpg')"></section>
<section class="p-0">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-10 overlap-section text-center">
<div class="p-10 box-shadow-extra-large border-radius-4px bg-white text-center">
<a href="demo-business-blog.html" class="bg-solitude-blue text-uppercase fs-13 ps-25px pe-25px alt-font fw-500 text-base-color lh-40 sm-lh-55 border-radius-100px d-inline-block mb-3 sm-mb-15px">Business</a>
<h3 class="alt-font text-dark-gray fw-600 ls-minus-1px mb-15px">Better to see something once than hear about it a thousand times</h3>
<div class="lg-20px sm-mb-0">
<span>By <a href="demo-business-blog.html" class="text-dark-gray">Shane smith</a></span> on <a href="demo-business-blog.html" class="text-dark-gray">26 March 2021</a>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="overlap-section text-center p-0 sm-pt-30px">
<img class="rounded-circle box-shadow-extra-large w-130px h-130px border border-8 border-color-white" src="images/demo-business-blog-single-creative-03.jpg" alt>
</section>
<section class="pb-0 pt-3">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-9 dropcap-style-01" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [50, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 1200, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 150, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<p class="mb-6"><span class="alt-font first-letter text-dark-gray">M</span>lorem ipsum dolor sit amet consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non , sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="row">
<div class="col-md-6 sm-mb-30px">
<div class="border-radius-5px border-1 border border-color-light-medium-gray h-100 pt-8 pb-8 ps-10 pe-10 last-paragraph-no-margin">
<span class="fw-500 text-dark-gray mb-5px d-inline-block">A balanced diet is a cookie in hand</span>
<p>Lorem ipsum dolor sit amet consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim.</p>
</div>
</div>
<div class="col-md-6">
<div class="border-radius-5px border-1 border border-color-light-medium-gray h-100 pt-8 pb-8 ps-10 pe-10 last-paragraph-no-margin">
<span class="fw-500 text-dark-gray mb-5px d-inline-block">Nature is wears the bright colors</span>
<p>Lorem ipsum dolor sit amet consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="half-section" data-anime="{ &quot;translateY&quot;: [0, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 1200, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 150, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="container">
<div class="row">
<div class="col-12 position-relative">
<img src="images/demo-business-blog-single-creative-01.jpg" alt class="border-radius-5px">
<a href="https://player.vimeo.com/video/75976293" aria-label="popup video" class="text-center bg-white rounded-circle video-icon-box video-icon-large popup-vimeo slide-up-animation absolute-middle-center">
<span>
<span class="video-icon bg-white">
<i class="fa-solid fa-play text-base-color"></i>
<span class="video-icon-sonar">
<span class="video-icon-sonar-bfr bg-base-color"></span>
</span>
</span>
</span>
</a>
</div>
</div>
</div>
</section>
<section class="py-0">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-9 last-paragraph-no-margin" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [50, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 1200, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 150, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<h6 class="alt-font fw-500 text-dark-gray ls-minus-05px mb-15px">Success is the result of perfection and hard work</h6>
<p class="mb-5">Lorem ipsum dolor sit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.</p>
<h6 class="alt-font fw-500 text-dark-gray ls-minus-05px mb-15px">It is better to fail in originality than to succeed in imitation</h6>
<p>Lorem ipsum dolor sit sed do eiusmod tempor incididunt ut labore enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.</p>
</div>
</div>
</div>
</section>
<section class="half-section pb-0">
<div class="container">
<div class="row justify-content-center" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [50, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 1200, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 150, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="mb-6">
<img src="images/demo-business-blog-single-creative-02.jpg" alt class="border-radius-5px">
</div>
<div class="col-lg-9 last-paragraph-no-margin">
<h6 class="alt-font fw-500 text-dark-gray ls-minus-05px mb-15px">Success is the result of perfection and hard work</h6>
<p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, quia consequuntur magni dolores eos qui ratione sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed numquam eius modi tempora incidunt. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione sequi nesciunt numquam eius modi tempora incidunt.</p>
</div>
</div>
</div>
</section>
<section class="half-section">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-9" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [50, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 1200, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 150, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="row mb-30px">
<div class="tag-cloud col-md-9 text-center text-md-start sm-mb-15px">
<a href="demo-business-blog.html">Development</a>
<a href="demo-business-blog.html">Event</a>
<a href="demo-business-blog.html">Multimedia </a>
<a href="demo-business-blog.html">Fashion</a>
</div>
<div class="tag-cloud col-md-3 text-uppercase text-center text-md-end">
<a class="likes-count fw-500 mx-0" href="demo-business-blog-single-modern.html#"><i class="fa-regular fa-heart text-red me-10px"></i><span class="text-dark-gray text-dark-gray-hover">05 Likes</span></a>
</div>
</div>
<div class="row">
<div class="col-12 mb-6">
<div class="d-block d-md-flex w-100 box-shadow-extra-large align-items-center border-radius-4px p-7 sm-p-35px">
<div class="w-140px text-center me-50px sm-mx-auto">
<img src="images/team-25.jpg" class="rounded-circle w-120px" alt>
<a href="demo-business-blog.html" class="text-dark-gray fw-500 mt-20px d-inline-block lh-20">Colene Landin</a>
<span class="fs-15 lh-20 d-block sm-mb-15px">Co-founder</span>
</div>
<div class="w-75 sm-w-100 text-center text-md-start last-paragraph-no-margin">
<p>Lorem ipsum is simply dummy text of the printing and typesetting industry. Lorem ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer.</p>
<a href="demo-business-blog.html" class="btn btn-link btn-large text-dark-gray mt-15px">All author posts</a>
</div>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-12 text-center elements-social social-icon-style-04">
<ul class="medium-icon dark">
<li><a class="facebook" href="https://www.facebook.com/" target="_blank"><i class="fa-brands fa-facebook-f"></i><span></span></a></li>
<li><a class="twitter" href="https://www.twitter.com" target="_blank"><i class="fa-brands fa-twitter"></i><span></span></a></li>
<li><a class="instagram" href="https://www.instagram.com" target="_blank"><i class="fa-brands fa-instagram"></i><span></span></a></li>
<li><a class="linkedin" href="http://www.linkedin.com" target="_blank"><i class="fa-brands fa-linkedin-in"></i><span></span></a></li>
<li><a class="behance" href="http://www.behance.com/" target="_blank"><i class="fa-brands fa-behance"></i><span></span></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="bg-solitude-blue position-relative sm-pb-20px">
<div class="container">
<div class="row justify-content-center mb-1">
<div class="col-lg-7 text-center">
<span class="bg-white box-shadow-quadruple-large text-uppercase fs-13 ps-25px pe-25px alt-font fw-600 text-base-color lh-40 sm-lh-55 border-radius-100px d-inline-block mb-25px" data-anime="{ &quot;translateY&quot;: [30, 0], &quot;opacity&quot;: [0,1], &quot;delay&quot;: 500, &quot;staggervalue&quot;: 100, &quot;easing&quot;: &quot;easeOutQuad&quot; }">You may also like</span>
<h3 class="alt-font text-dark-gray fw-600 ls-minus-1px" data-anime="{ &quot;el&quot;: &quot;lines&quot;, &quot;translateY&quot;: [30, 0], &quot;opacity&quot;: [0,1], &quot;delay&quot;: 500, &quot;staggervalue&quot;: 100, &quot;easing&quot;: &quot;easeOutQuad&quot; }">Related posts</h3>
</div>
</div>
<div class="row">
<div class="col-12 px-0">
<ul class="blog-classic blog-wrapper grid grid-4col xl-grid-4col lg-grid-3col md-grid-2col sm-grid-2col xs-grid-1col gutter-double-extra-large" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [50, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &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="card bg-transparent border-0 h-100">
<div class="blog-image position-relative overflow-hidden border-radius-4px">
<a href="demo-business-blog-single-modern.html"><img src="images/demo-business-blog-01.jpg" alt /></a>
</div>
<div class="card-body px-0 pb-30px pt-30px xs-pb-15px last-paragraph-no-margin">
<span class="fs-13 text-uppercase mb-5px d-block"><a href="demo-business-blog.html" class="text-dark-gray fw-500 categories-text">Business</a><a href="demo-business-blog-single-modern.html#" class="blog-date">26 August 2023</a></span>
<a href="demo-business-blog-single-modern.html" class="card-title mb-0 fw-500 fs-18 lh-30 text-dark-gray d-inline-block">The best way to predict the secure future is to create it</a>
</div>
</div>
</li>
<li class="grid-item">
<div class="card bg-transparent border-0 h-100">
<div class="blog-image position-relative overflow-hidden border-radius-4px">
<a href="demo-business-blog-single-modern.html"><img src="images/demo-business-blog-02.jpg" alt /></a>
</div>
<div class="card-body px-0 pb-30px pt-30px xs-pb-15px last-paragraph-no-margin">
<span class="fs-13 text-uppercase mb-5px d-block"><a href="demo-business-blog.html" class="text-dark-gray fw-500 categories-text">Business</a><a href="demo-business-blog-single-modern.html#" class="blog-date">26 August 2023</a></span>
<a href="demo-business-blog-single-modern.html" class="card-title mb-0 fw-500 fs-18 lh-30 text-dark-gray d-inline-block">Recognizing the need is the primary condition for design</a>
</div>
</div>
</li>
<li class="grid-item">
<div class="card bg-transparent border-0 h-100">
<div class="blog-image position-relative overflow-hidden border-radius-4px">
<a href="demo-business-blog-single-modern.html"><img src="images/demo-business-blog-03.jpg" alt /></a>
</div>
<div class="card-body px-0 pb-30px pt-30px xs-pb-15px last-paragraph-no-margin">
<span class="fs-13 text-uppercase mb-5px d-block"><a href="demo-business-blog.html" class="text-dark-gray fw-500 categories-text">Business</a><a href="demo-business-blog-single-modern.html#" class="blog-date">26 August 2023</a></span>
<a href="demo-business-blog-single-modern.html" class="card-title mb-0 fw-500 fs-18 lh-30 text-dark-gray d-inline-block">Make business easy with beautiful application store</a>
</div>
</div>
</li>
<li class="grid-item">
<div class="card bg-transparent border-0 h-100">
<div class="blog-image position-relative overflow-hidden border-radius-4px">
<a href="demo-business-blog-single-modern.html"><img src="images/demo-business-blog-04.jpg" alt /></a>
</div>
<div class="card-body px-0 pb-30px pt-30px xs-pb-15px last-paragraph-no-margin">
<span class="fs-13 text-uppercase mb-5px d-block"><a href="demo-business-blog.html" class="text-dark-gray fw-500 categories-text">Business</a><a href="demo-business-blog-single-modern.html#" class="blog-date">26 August 2023</a></span>
<a href="demo-business-blog-single-modern.html" class="card-title mb-0 fw-500 fs-18 lh-30 text-dark-gray d-inline-block">Computers are to design as microwaves are to cooking</a>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</section>
<section class="pb-0">
<div class="container" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [0, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="row justify-content-center">
<div class="col-lg-9 text-center mb-2">
<h6 class="alt-font text-dark-gray fw-500">4 Comments</h6>
</div>
</div>
<div class="row justify-content-center">
<div class="col-lg-9">
<ul class="blog-comment">
<li>
<div class="d-block d-md-flex w-100 align-items-center align-items-md-start ">
<div class="w-90px sm-w-65px sm-mb-10px">
<img src="images/avtar-18.jpg" class="rounded-circle" alt>
</div>
<div class="w-100 ps-30px last-paragraph-no-margin sm-ps-0">
<a href="demo-business-blog-single-modern.html#" class="text-dark-gray fw-500">Herman Miller</a>
<a href="demo-business-blog-single-modern.html#comments" class="btn-reply text-uppercase section-link">Reply</a>
<div class="fs-14 lh-24 mb-10px">17 July 2020, 6:05 PM</div>
<p class="w-85 sm-w-100">Lorem ipsum is simply dummy text of the printing and typesetting industry. Lorem ipsum has been the industry's standard dummy text ever since the make book.</p>
</div>
</div>
<ul class="child-comment">
<li>
<div class="d-block d-md-flex w-100 align-items-center align-items-md-start ">
<div class="w-90px sm-w-65px sm-mb-10px">
<img src="images/avtar-19.jpg" class="rounded-circle" alt>
</div>
<div class="w-100 ps-30px last-paragraph-no-margin sm-ps-0">
<a href="demo-business-blog-single-modern.html#" class="text-dark-gray fw-500">Wilbur Haddock</a>
<a href="demo-business-blog-single-modern.html#comments" class="btn-reply text-uppercase section-link">Reply</a>
<div class="fs-14 lh-24 mb-10px">18 July 2020, 10:19 PM</div>
<p class="w-85 sm-w-100">Lorem ipsum is simply dummy text of the printing and typesetting industry. Lorem ipsum has been the industry's standard dummy text ever since.</p>
</div>
</div>
</li>
<li>
<div class="d-block d-md-flex w-100 align-items-center align-items-md-start border-radius-5px p-50px md-p-30px sm-p-20px bg-very-light-gray">
<div class="w-90px sm-w-65px sm-mb-10px">
<img src="images/avtar-17.jpg" class="rounded-circle" alt>
</div>
<div class="w-100 ps-30px last-paragraph-no-margin sm-ps-0">
<a href="demo-business-blog-single-modern.html#" class="text-dark-gray fw-500">Colene Landin</a>
<a href="demo-business-blog-single-modern.html#comments" class="btn-reply text-uppercase section-link">Reply</a>
<div class="fs-14 lh-24 mb-10px">18 July 2020, 12:39 PM</div>
<p class="w-85 sm-w-100">Lorem ipsum is simply dummy text of the printing and typesetting industry. Ipsum has been the industry's standard dummy text.</p>
</div>
</div>
</li>
</ul>
</li>
<li>
<div class="d-block d-md-flex w-100 align-items-center align-items-md-start ">
<div class="w-90px sm-w-65px sm-mb-10px">
<img src="images/avtar-18.jpg" class="rounded-circle" alt>
</div>
<div class="w-100 ps-30px last-paragraph-no-margin sm-ps-0">
<a href="demo-business-blog-single-modern.html#" class="text-dark-gray fw-500">Jennifer Freeman</a>
<a href="demo-business-blog-single-modern.html#comments" class="btn-reply text-uppercase section-link">Reply</a>
<div class="fs-14 lh-24 mb-10px">19 July 2020, 8:25 PM</div>
<p class="w-85 sm-w-100">Lorem ipsum is simply dummy text of the printing and typesetting industry. Lorem ipsum has been the industry's standard dummy text ever since the make a type specimen book.</p>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</section>
<section id="comments">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-9 mb-3 sm-mb-6">
<h6 class="alt-font text-dark-gray fw-500 mb-5px">Write a comment</h6>
<div class="mb-5px">Your email address will not be published. Required fields are marked *</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-lg-9">
<form action="email-templates/contact-form.php" method="post" class="row contact-form-style-02">
<div class="col-md-6 mb-30px">
<input class="input-name border-radius-4px form-control required" type="text" name="name" placeholder="Enter your name*">
</div>
<div class="col-md-6 mb-30px">
<input class="border-radius-4px form-control required" type="email" name="email" placeholder="Enter your email address*">
</div>
<div class="col-md-12 mb-30px">
<textarea class="border-radius-4px form-control" cols="40" rows="4" name="comment" placeholder="Your message"></textarea>
</div>
<div class="col-12">
<input type="hidden" name="redirect" value>
<button class="btn btn-dark-gray btn-small btn-round-edge submit" type="submit">Post Comment</button>
<div class="form-results mt-20px d-none"></div>
</div>
</form>
</div>
</div>
</div>
</section>
<footer class="pt-5 pb-5 sm-pt-40px sm-pb-45px footer-dark bg-extra-medium-slate-blue">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-3 col-sm-6 last-paragraph-no-margin order-5 order-sm-4 order-lg-1 text-center text-sm-start">
<a href="demo-business.html" class="footer-logo mb-15px d-block d-lg-inline-block"><img src="images/demo-business-logo-white.png" data-at2x="images/demo-business-logo-white@2x.png" alt></a>
<p class="w-90 sm-w-100 d-inline-block mb-15px">Lorem ipsum is consectetur adipiscing eiusmod tempor.</p>
<p>&COPY; 2024 <a href="index.html" target="_blank" class="text-white text-decoration-line-bottom">Crafto.</a></p>
</div>
<div class="col-5 col-lg-2 col-sm-4 md-mb-50px sm-mb-30px order-1 order-lg-2">
<span class="alt-font d-block text-white mb-5px">Company</span>
<ul>
<li><a href="demo-business-about.html">About us</a></li>
<li><a href="demo-business-services.html">Our services</a></li>
<li><a href="demo-business-clients.html">Our clients</a></li>
<li><a href="demo-business-contact.html">Contact</a></li>
</ul>
</div>
<div class="col-7 col-lg-2 col-sm-4 md-mb-50px sm-mb-30px order-2 order-lg-3">
<span class="alt-font d-block text-white mb-5px">Services</span>
<ul>
<li><a href="demo-business-services.html">Branding</a></li>
<li><a href="demo-business-services.html">eCommerce</a></li>
<li><a href="demo-business-services.html">Content</a></li>
<li><a href="demo-business-services.html">Marketing</a></li>
</ul>
</div>
<div class="col-5 col-lg-2 col-sm-4 md-mb-50px sm-mb-30px order-3 order-lg-4">
<span class="alt-font d-block text-white mb-5px">Social connect</span>
<ul>
<li><a href="https://www.facebook.com/" target="_blank">Facebook</a></li>
<li><a href="http://www.dribbble.com" target="_blank">Dribbble</a></li>
<li><a href="https://www.twitter.com" target="_blank">Twitter</a></li>
<li><a href="https://www.instagram.com" target="_blank">Instagram</a></li>
</ul>
</div>
<div class="col-7 col-lg-3 col-sm-6 xs-mb-30px last-paragraph-no-margin order-4 order-sm-5 order-lg-5">
<span class="alt-font d-block text-white mb-5px">Get in touch</span>
<p class="w-80 lg-w-100 md-w-70 sm-w-100 mb-10px">401 Broadway, 24th Floor New York, NY 10013</p>
<div><i class="feather icon-feather-phone-call icon-very-small text-white me-10px"></i><a href="tel:12345678910" class="text-white">+1 234 567 8910</a></div>
<div><i class="feather icon-feather-mail icon-very-small text-white me-10px"></i><a href="cdn-cgi/l/email-protection.html#c9a0a7afa689ada6a4a8a0a7e7aaa6a4" class="text-white text-decoration-line-bottom"><span class="__cf_email__" data-cfemail="167f7870795672797b777f783875797b">[email&#160;protected]</span></a></div>
</div>
</div>
</div>
</footer>
<div class="scroll-progress d-none d-xxl-block">
<a href="demo-business-blog-single-modern.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>