489 lines
28 KiB
HTML
489 lines
28 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/architecture/architecture.css" />
|
|
</head>
|
|
<body class="custom-cursor overflow-x-hidden" data-mobile-nav-style="classic">
|
|
|
|
<div class="cursor-page-inner">
|
|
<div class="circle-cursor circle-cursor-inner"></div>
|
|
<div class="circle-cursor circle-cursor-outer"></div>
|
|
</div>
|
|
|
|
|
|
<header>
|
|
|
|
<nav class="navbar navbar-expand-lg header-transparent bg-transparent disable-fixed">
|
|
<div class="container-fluid">
|
|
<div class="col-auto col-lg-2 me-lg-0 me-auto d-none d-lg-flex">
|
|
<div class="header-icon">
|
|
<div class="header-social-icon icon social-text-style-01">
|
|
<a class="facebook" href="https://www.facebook.com/" target="_blank">Fb.</a>
|
|
<a class="twitter" href="https://www.twitter.com" target="_blank">Tw.</a>
|
|
<a class="behance" href="https://www.instagram.com/" target="_blank">In.</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-auto">
|
|
<a class="navbar-brand" href="demo-architecture.html">
|
|
<img src="images/demo-architecture-logo-white.png" data-at2x="images/demo-architecture-logo-white@2x.png" alt class="default-logo">
|
|
<img src="images/demo-architecture-logo-white.png" data-at2x="images/demo-architecture-logo-white@2x.png" alt class="alt-logo">
|
|
<img src="images/demo-architecture-logo-black.png" data-at2x="images/demo-architecture-logo-black@2x.png" alt class="mobile-logo">
|
|
</a>
|
|
</div>
|
|
<div class="col-auto col-lg-2 text-end">
|
|
<div class="header-icon header-push-button hamburger-push-button icon">
|
|
<div class="push-button">
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
|
|
<div class="push-menu hamburger-nav hamburger-menu-simple header-dark bg-dark-gray background-position-center-top" style="background-image: url('images/vertical-line-bg-small.svg');">
|
|
<span class="close-menu text-dark-gray text-dark-gray-hover bg-white"><i class="fa-solid fa-xmark"></i></span>
|
|
<div class="container h-100">
|
|
<div class="row align-items-center justify-content-center h-100">
|
|
<div class="col-lg-8 col-md-6 order-2 order-md-1 d-none d-md-inline-block">
|
|
<a class="hamburger-logo d-inline-block" href="demo-architecture.html">
|
|
<img src="images/demo-architecture-footer-logo.png" data-at2x="images/demo-architecture-footer-logo@2x.png" class="w-auto" alt>
|
|
</a>
|
|
<div class="row mt-22 md-mt-30px sm-mt-25px align-items-start">
|
|
|
|
<div class="col-lg-4 last-paragraph-no-margin md-mb-30px sm-mb-20px menu-address">
|
|
<span class="text-base-color fs-14 fw-600 ls-2px text-uppercase mb-5px d-block">Let's meet</span>
|
|
<p class="w-90 md-w-80">27 Eden walk eden centre, Orchard, Paris, France</p>
|
|
</div>
|
|
|
|
|
|
<div class="col-lg-4 last-paragraph-no-margin md-mb-30px sm-mb-20px menu-address">
|
|
<span class="text-base-color fs-14 fw-600 ls-2px text-uppercase mb-5px d-block">Let's talk</span>
|
|
<a href="tel:1800222002" class="text-white-hover">1-800-222-002</a><br>
|
|
<a href="cdn-cgi/l/email-protection.html#ddb4b3bbb29da4b2a8afb9b2b0bcb4b3f3beb2b0" class="text-decoration-line-bottom text-white"><span class="__cf_email__" data-cfemail="0e676068614e77617b7c6a61636f6760206d6163">[email protected]</span></a>
|
|
</div>
|
|
|
|
|
|
<div class="col-lg-4 last-paragraph-no-margin elements-social">
|
|
<span class="text-base-color fs-14 fw-600 ls-2px text-uppercase mb-5px d-block">Connect with us</span>
|
|
<div class="social-icon-style-02 mt-15px">
|
|
<ul class="medium-icon light">
|
|
<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 class="col-lg-3 col-md-5 offset-md-1 order-1 order-md-2 text-center text-md-start">
|
|
<div class="hamburger-menu menu-list-wrapper" data-scroll-options="{ "theme": "light" }">
|
|
<ul class="menu-item-list alt-font ls-minus-05px p-0">
|
|
<li class="menu-item"><a href="demo-architecture.html" class="nav-link">Home</a></li>
|
|
<li class="menu-item"><a href="demo-architecture-about.html" class="nav-link">About</a></li>
|
|
<li class="menu-item"><a href="demo-architecture-services.html" class="nav-link">Services</a></li>
|
|
<li class="menu-item"><a href="demo-architecture-projects.html" class="nav-link">Projects</a></li>
|
|
<li class="menu-item"><a href="demo-architecture-blog.html" class="nav-link">Articles</a></li>
|
|
<li class="menu-item"><a href="demo-architecture-contact.html" class="nav-link">Contact</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 menu-text border-top border-color-transparent-white-light d-none d-md-inline-block text-center pt-3 pb-3 order-3">
|
|
<h6 class="fw-400 d-inline-block align-middle mb-0">Let's build something <span class="text-white">great together</span></h6>
|
|
<div class="separator-line-1px d-inline-block align-middle ms-20px me-20px mt-5px w-70px bg-base-color"></div>
|
|
<a href="cdn-cgi/l/email-protection.html#5d35383131321d3e2f3c3b2932733e3230" class="text-base-color fs-26 fw-500 d-inline-block align-middle"><span class="__cf_email__" data-cfemail="b8d0ddd4d4d7f8dbcad9deccd796dbd7d5">[email protected]</span></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</header>
|
|
|
|
|
|
<section class="ipad-top-space-margin py-0 bg-dark-gray" data-parallax-background-ratio="0.5" style="background-image: url('images/demo-architecture-blog-single-clean-01.jpg')">
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<div class="col-xxl-6 col-xl-9 col-lg-10 d-flex flex-column justify-content-center full-screen md-h-600px">
|
|
<div class="ps-15 pe-15 md-ps-10 md-pe-10 sm-px-0" data-anime="{ "el": "childs", "translateX": [50, 0], "opacity": [0,1], "duration": 1200, "delay": 0, "staggervalue": 150, "easing": "easeOutQuad" }">
|
|
<span class="alt-font ls-minus-05px fs-20 text-white mb-5 d-inline-block fw-300">Posted by <a href="demo-architecture-blog-single-clean.html#" class="text-white text-white-hover fw-700 text-decoration-line-bottom">colene landin</a></span>
|
|
<h1 class="alt-font text-white fw-600 mb-8 ls-minus-2px">Light, God's eldest daughter, is a principal beauty in a building.</h1>
|
|
<a href="demo-architecture-blog-single-clean.html#" class="btn btn-base-color btn-medium fw-600">Interior design</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<section class="bg-dark-gray background-position-center-top" style="background-image: url('images/demo-architecture-dotted-pattern.svg')">
|
|
<div class="container">
|
|
<div class="row justify-content-center">
|
|
<div class="col-lg-8" data-anime="{ "el": "childs", "translateY": [50, 0], "opacity": [0,1], "duration": 1200, "delay": 0, "staggervalue": 150, "easing": "easeOutQuad" }">
|
|
<div class="dropcap-style-04">
|
|
<p><span class="alt-font first-letter first-letter-block border first-letter-round border-2 border-color-charcoal-grey text-white">N</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.</p>
|
|
</div>
|
|
<div class="text-center mt-6">
|
|
<h4 class="fw-600 text-white mx-auto mb-15px xl-w-100">Architecture tends to consume everything else it has become one's entire life.</h4>
|
|
<span class="text-uppercase fs-15 ls-2px alt-font text-base-color">- Shoko mugikura -</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<section class="one-fourth-screen" data-parallax-background-ratio="0.5" style="background-image: url('images/demo-architecture-blog-single-clean-02.jpg')"></section>
|
|
|
|
|
|
<section class="bg-dark-gray background-position-center-top" style="background-image: url('images/demo-architecture-dotted-pattern.svg')">
|
|
<div class="container">
|
|
<div class="row justify-content-center">
|
|
<div class="col-lg-8 last-paragraph-no-margin" data-anime="{ "el": "childs", "translateY": [50, 0], "opacity": [0,1], "duration": 1200, "delay": 0, "staggervalue": 150, "easing": "easeOutQuad" }">
|
|
<h4 class="fw-600 text-white">Tomorrow is the most important thing in life comes into us at midnight very clean.</h4>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ullamcorper ex nunc, in fringilla orci fringilla sed. Nam semper odio eu urna viverra, eu luctus mauris sollicitudin. Morbi ultricies est et odio vehicula, vel lacinia ipsum ullamcorper. Mauris mattis placerat quam, aliquam vestibulum dui bibendum eu. Curabitur eu euismod ex, et hendrerit purus. Donec condimentum vel neque id iaculis. Etiam dui id dolor lobortis cursus ac maximus nisl. In sodales lacus nec cursus varius. Nulla est quam.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<section class="bg-dark-gray background-position-center-top py-0" style="background-image: url('images/demo-architecture-dotted-pattern.svg')">
|
|
<div class="container">
|
|
<div class="row justify-content-center">
|
|
<div class="col-12" data-anime="{ "el": "childs", "translateY": [50, 0], "opacity": [0,1], "duration": 1200, "delay": 0, "staggervalue": 150, "easing": "easeOutQuad" }">
|
|
<img src="images/demo-architecture-blog-single-clean-03.jpg" class="w-100 mb-7" alt>
|
|
<img src="images/demo-architecture-blog-single-clean-04.jpg" class="w-100" alt>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<section class="bg-dark-gray background-position-center-top" style="background-image: url('images/demo-architecture-dotted-pattern.svg')">
|
|
<div class="container">
|
|
<div class="row justify-content-center">
|
|
<div class="col-lg-8 last-paragraph-no-margin" data-anime="{ "el": "childs", "translateY": [50, 0], "opacity": [0,1], "duration": 1200, "delay": 0, "staggervalue": 150, "easing": "easeOutQuad" }">
|
|
<h4 class="fw-600 text-white mb-15px">Architecture is inhabited sculpture</h4>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ullamcorper ex nunc, in fringilla orci fringilla sed. Nam semper odio eu urna viverra, eu luctus mauris sollicitudin. Morbi ultricies est et odio vehicula, vel lacinia ipsum ullamcorper. Mauris mattis placerat quam, aliquam vestibulum dui bibendum eu. Curabitur eu euismod ex, et hendrerit purus. Donec condimentum vel neque id iaculis. Etiam dui id dolor lobortis cursus ac maximus nisl. In sodales lacus nec cursus varius. Nulla est quam.</p>
|
|
<h4 class="fw-600 text-white mb-15px mt-6">A room is not a room without natural light</h4>
|
|
<p>Morbi ultricies est et odio vehicula, vel lacinia ipsum ullamcorper. Mauris mattis placerat quam, aliquam vestibulum dui bibendum eu. Curabitur eu euismod ex, et hendrerit purus. Donec condimentum vel neque id iaculis. Etiam dui id dolor lobortis cursus ac maximus nisl. In sodales lacus nec cursus varius.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<section class="bg-dark-gray background-position-center-top pt-0" style="background-image: url('images/demo-architecture-dotted-pattern.svg')">
|
|
<div class="container">
|
|
<div class="row justify-content-center" data-anime="{ "el": "childs", "translateY": [0, 0], "opacity": [0,1], "duration": 1200, "delay": 0, "staggervalue": 150, "easing": "easeOutQuad" }">
|
|
<div class="col-lg-8">
|
|
<div class="row mb-30px">
|
|
<div class="tag-cloud col-md-9 text-center text-md-start sm-mb-15px">
|
|
<a href="demo-architecture-blog.html">Architecture</a>
|
|
<a href="demo-architecture-blog.html">Interior</a>
|
|
<a href="demo-architecture-blog.html">Landscape</a>
|
|
<a href="demo-architecture-blog.html">Residential</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-architecture-blog-single-clean.html#"><i class="fa-regular fa-heart text-red me-10px"></i><span class="text-white-hover">05 Likes</span></a>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-12 mb-6">
|
|
<div class="bg-nero-grey 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/avtar-07.jpg" class="rounded-circle w-120px" alt>
|
|
<a href="demo-architecture-blog.html" class="text-white 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 took a galley of type.</p>
|
|
<a href="demo-architecture-blog.html" class="btn btn-link btn-large text-white 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 light">
|
|
<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-nero-grey overlap-height background-position-center-top" style="background-image: url('images/demo-architecture-dotted-pattern.svg')">
|
|
<div class="container">
|
|
<div class="row justify-content-center mb-1 sm-mb-7">
|
|
<div class="col-lg-7 text-center" data-anime="{ "el": "childs", "translateY": [50, 0], "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 300, "easing": "easeOutQuad" }">
|
|
<span class="text-base-color fs-12 fw-600 ls-3px text-uppercase d-inline-block">You may also like</span>
|
|
<h4 class="text-white fw-600">Related posts</h4>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<ul class="blog-metro blog-wrapper grid-loading grid grid-3col xl-grid-3col lg-grid-3col md-grid-2col sm-grid-2col xs-grid-1col gutter-extra-large" data-anime="{ "el": "childs", "translateY": [50, 0], "opacity": [0,1], "duration": 1200, "delay": 0, "staggervalue": 150, "easing": "easeOutQuad" }">
|
|
<li class="grid-sizer"></li>
|
|
|
|
<li class="grid-item text-white">
|
|
<figure class="position-relative mb-0 overflow-hidden">
|
|
<div class="blog-image bg-dark-slate-blue">
|
|
<a href="demo-architecture-blog-single-clean.html"><img src="images/demo-architecture-blog-01.jpg" alt /></a>
|
|
<div class="blog-overlay"></div>
|
|
</div>
|
|
<figcaption class="d-flex flex-column justify-content-end h-100 p-50px lg-p-25px">
|
|
<div class="blog-categories mb-auto">
|
|
<a href="demo-architecture-blog-single-clean.html" class="categories-btn bg-white text-dark-gray text-uppercase fw-700 ms-0 mb-auto align-self-start">Architect</a>
|
|
</div>
|
|
<a href="demo-architecture-blog-single-clean.html" class="text-white card-title fs-22 fw-500">Everything designed things are designed.</a>
|
|
</figcaption>
|
|
</figure>
|
|
</li>
|
|
|
|
|
|
<li class="grid-item text-white">
|
|
<figure class="position-relative mb-0 overflow-hidden">
|
|
<div class="blog-image bg-dark-slate-blue">
|
|
<a href="demo-architecture-blog-single-clean.html"><img src="images/demo-architecture-blog-02.jpg" alt /></a>
|
|
<div class="blog-overlay"></div>
|
|
</div>
|
|
<figcaption class="d-flex flex-column justify-content-end h-100 p-50px lg-p-25px">
|
|
<div class="blog-categories mb-auto">
|
|
<a href="demo-architecture-blog-single-clean.html" class="categories-btn bg-white text-dark-gray text-uppercase fw-700 ms-0 mb-auto align-self-start">Interior</a>
|
|
</div>
|
|
<a href="demo-architecture-blog-single-clean.html" class="text-white card-title fs-22 fw-500">Teamwork is essential for small teams challenges.</a>
|
|
</figcaption>
|
|
</figure>
|
|
</li>
|
|
|
|
|
|
<li class="grid-item text-white">
|
|
<figure class="position-relative mb-0 overflow-hidden">
|
|
<div class="blog-image bg-dark-slate-blue">
|
|
<a href="demo-architecture-blog-single-clean.html"><img src="images/demo-architecture-blog-03.jpg" alt /></a>
|
|
<div class="blog-overlay"></div>
|
|
</div>
|
|
<figcaption class="d-flex flex-column justify-content-end h-100 p-50px lg-p-25px">
|
|
<div class="blog-categories mb-auto">
|
|
<a href="demo-architecture-blog-single-clean.html" class="categories-btn bg-white text-dark-gray text-uppercase fw-700 ms-0 mb-auto align-self-start">Landscape</a>
|
|
</div>
|
|
<a href="demo-architecture-blog-single-clean.html" class="text-white card-title fs-22 fw-500">Some people just try to celebrate joys of life.</a>
|
|
</figcaption>
|
|
</figure>
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<section class="bg-dark-gray background-position-center-top" style="background-image: url('images/demo-architecture-dotted-pattern.svg')">
|
|
<div class="container">
|
|
<div class="row justify-content-center" data-anime="{ "el": "childs", "translateY": [0, 0], "opacity": [0,1], "duration": 1200, "delay": 0, "staggervalue": 150, "easing": "easeOutQuad" }">
|
|
<div class="col-lg-9 text-center mb-2">
|
|
<h6 class="alt-font text-white fw-500">4 Comments</h6>
|
|
</div>
|
|
</div>
|
|
<div class="row justify-content-center">
|
|
<div class="col-lg-9">
|
|
<ul class="blog-comment" data-anime="{ "el": "childs", "translateY": [0, 0], "opacity": [0,1], "duration": 1200, "delay": 0, "staggervalue": 150, "easing": "easeOutQuad" }">
|
|
<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-architecture-blog-single-clean.html#" class="text-white fw-500">Herman Miller</a>
|
|
<a href="demo-architecture-blog-single-clean.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-architecture-blog-single-clean.html#" class="text-white fw-500">Wilbur Haddock</a>
|
|
<a href="demo-architecture-blog-single-clean.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-nero-grey">
|
|
<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-architecture-blog-single-clean.html#" class="text-white text-white-hover fw-500">Colene Landin</a>
|
|
<a href="demo-architecture-blog-single-clean.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-architecture-blog-single-clean.html#" class="text-white fw-500">Jennifer Freeman</a>
|
|
<a href="demo-architecture-blog-single-clean.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" class="bg-dark-gray background-position-center-top pt-0" style="background-image: url('images/demo-architecture-dotted-pattern.svg')">
|
|
<div class="container" data-anime="{ "el": "childs", "translateY": [0, 0], "opacity": [0,1], "duration": 1200, "delay": 0, "staggervalue": 150, "easing": "easeOutQuad" }">
|
|
<div class="row justify-content-center">
|
|
<div class="col-lg-9 mb-3 sm-mb-6">
|
|
<h6 class="alt-font text-white 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 border-color-charcoal-grey bg-transparent form-control required" type="text" name="name" placeholder="Enter your name*">
|
|
</div>
|
|
<div class="col-md-6 mb-30px">
|
|
<input class="border-radius-4px border-color-charcoal-grey bg-transparent 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 border-color-charcoal-grey bg-transparent 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-white btn-small btn-round-edge fw-600 submit" type="submit">Post Comment</button>
|
|
<div class="form-results mt-20px d-none"></div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<footer class="bg-nero-grey pb-0 pt-4 md-pt-6 sm-pt-9 xs-pt-11 background-position-center-top" style="background-image: url('images/demo-architecture-dotted-pattern.svg')">
|
|
<div class="container">
|
|
<div class="row align-items-center mb-3 md-mb-5 xs-mb-8">
|
|
<div class="col-sm-10 text-center text-sm-start order-2 order-sm-1">
|
|
<h6 class="fw-400 d-inline-block align-middle mb-0">Let's build something <span class="text-white">great together</span></h6>
|
|
<div class="separator-line-1px d-none d-sm-inline-block align-middle ms-20px me-20px lg-ms-10px lg-me-10px mt-5px w-70px lg-w-50px bg-base-color"></div>
|
|
<a href="cdn-cgi/l/email-protection.html#f9919c959596b99a8b989f8d96d79a9694" class="text-base-color fs-26 fw-500 d-inline-block align-middle"><span class="__cf_email__" data-cfemail="127a777e7e7d5271607374667d3c717d7f">[email protected]</span></a>
|
|
</div>
|
|
<div class="col-sm-2 text-center text-sm-end order-1 order-sm-2 xs-mb-15px">
|
|
<a href="demo-architecture.html" class="footer-logo d-inline-block"><img src="images/demo-architecture-footer-logo.png" data-at2x="images/demo-architecture-footer-logo@2x.png" alt></a>
|
|
</div>
|
|
</div>
|
|
<div class="row align-items-end mb-6 xs-mb-9">
|
|
|
|
<div class="col-lg-3 col-sm-6 last-paragraph-no-margin text-center text-sm-start md-mb-30px">
|
|
<span class="text-white d-block fs-12 fw-600 ls-2px text-uppercase">Crafto - London</span>
|
|
<p class="w-80 lg-w-95 md-w-70 sm-w-85 xs-mx-auto text-medium-gray fs-15 lh-28">401 Broadway, 24th floor, Orchard view, London, UK</p>
|
|
</div>
|
|
|
|
|
|
<div class="col-lg-3 col-sm-6 last-paragraph-no-margin text-center text-sm-start md-mb-30px">
|
|
<span class="text-white d-block fs-12 fw-600 ls-2px text-uppercase">Crafto - France</span>
|
|
<p class="w-80 lg-w-95 md-w-70 sm-w-85 xs-mx-auto text-medium-gray fs-15 lh-28">27 Eden walk eden centre, Orchard view, Paris, France</p>
|
|
</div>
|
|
|
|
|
|
<div class="col-lg-3 col-sm-6 last-paragraph-no-margin text-center text-sm-start xs-mb-30px">
|
|
<span class="text-white d-block fs-12 fw-600 ls-2px text-uppercase">Crafto - Switzerland</span>
|
|
<p class="w-80 lg-w-95 md-w-70 sm-w-85 xs-mx-auto text-medium-gray fs-15 lh-28">701 Sondanella, 24th floor, Gunsberg, Switzerland</p>
|
|
</div>
|
|
|
|
|
|
<div class="col-lg-3 col-sm-6 last-paragraph-no-margin ms-auto text-center text-sm-start text-lg-end fs-19">
|
|
<a href="tel:1235678901" class="text-white">+ 123 567 8901</a><br>
|
|
<a href="cdn-cgi/l/email-protection.html#dcb5b2bab39cb8b3b1bdb5b2f2bfb3b1" class="text-white fw-500 text-decoration-line-bottom"><span class="__cf_email__" data-cfemail="3e575058517e5a51535f5750105d5153">[email protected]</span></a>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="footer-bottom p-20px border-top border-color-transparent-white-light">
|
|
<div class="container">
|
|
<div class="row align-items-center">
|
|
<div class="col-lg-7 text-center text-lg-start md-mb-10px">
|
|
<ul class="footer-navbar fs-15 lh-normal">
|
|
<li class="nav-item active"><a href="demo-architecture.html" class="nav-link">Home</a></li>
|
|
<li class="nav-item"><a href="demo-architecture-about.html" class="nav-link">About</a></li>
|
|
<li class="nav-item"><a href="demo-architecture-services.html" class="nav-link">Services</a></li>
|
|
<li class="nav-item"><a href="demo-architecture-projects.html" class="nav-link">Projects</a></li>
|
|
<li class="nav-item"><a href="demo-architecture-contact.html" class="nav-link">Contact</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-lg-5 text-center text-lg-end">
|
|
<span class="fs-15">© 2024 Crafto is Proudly Powered by <a href="https://www.themezaa.com/" target="_blank" class="text-decoration-line-bottom text-white">ThemeZaa</a></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
|
|
<div class="scroll-progress d-none d-xxl-block">
|
|
<a href="demo-architecture-blog-single-clean.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> |