1065 lines
81 KiB
HTML
1065 lines
81 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" type="text/css" href="revolution/css/settings.css">
|
|
<link rel="stylesheet" type="text/css" href="revolution/css/layers.css">
|
|
<link rel="stylesheet" type="text/css" href="revolution/css/navigation.css">
|
|
|
|
<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 data-mobile-nav-style="classic" class="custom-cursor">
|
|
|
|
<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#61080f070e21180e1413050e0c00080f4f020e0c" class="text-decoration-line-bottom text-white"><span class="__cf_email__" data-cfemail="335a5d555c734a5c4641575c5e525a5d1d505c5e">[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#5038353c3c3f1033223136243f7e333f3d" class="text-base-color fs-26 fw-500 d-inline-block align-middle"><span class="__cf_email__" data-cfemail="a3cbc6cfcfcce3c0d1c2c5d7cc8dc0ccce">[email protected]</span></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</header>
|
|
|
|
|
|
<section class="p-0 bg-dark-gray">
|
|
<article class="content">
|
|
<div id="architecture-slider_wrapper" class="rev_slider_wrapper fullwidthbanner-container" style="background:#232323;padding:0px;">
|
|
|
|
<div id="architecture-slider" class="rev_slider fullwidthabanner" data-version="5.4.5">
|
|
|
|
<ul>
|
|
|
|
<li data-index="rs-architecture-01" data-transition="fadethroughdark" data-slotamount="default" data-hideafterloop="0" data-hideslideonmobile="off" data-easein="default" data-easeout="default" data-masterspeed="default" data-thumb="http://works.themepunch.com/revolution_5_3/wp-content/" data-rotate="0" data-saveperformance="off" data-title data-param1 data-param2 data-param3 data-param4 data-param5 data-param6 data-param7 data-param8 data-param9 data-param10 data-description>
|
|
|
|
<img src="images/demo-architecture-rev-slider-01.jpg" alt="slider-image" data-bgposition="center center" data-kenburns="on" data-duration="2500" data-ease="Power3.easeInOut" data-scalestart="100" data-scaleend="100" data-rotatestart="0" data-rotateend="0" data-blurstart="10" data-blurend="0" data-offsetstart="100 100" data-offsetend="0 0" data-bgparallax="3" class="rev-slidebg" data-no-retina>
|
|
|
|
<div id="rrzm_638" class="rev_row_zone rev_row_zone_middle">
|
|
|
|
<div class="tp-caption architecture-slider-text-row" id="slide-01-layer-01" data-x="['left','left','center','center']" data-hoffset="['0','0','0','0']" data-y="['bottom','middle','middle','middle']" data-voffset="['0','0','0','0']" data-width="none" data-height="none" data-whitespace="nowrap" data-type="row" data-columnbreak="2" data-responsive_offset="on" data-responsive="off" data-frames="[{"delay":10,"speed":300,"frame":"0","from":"opacity:0;","to":"o:1;","ease":"Power3.easeInOut"},{"delay":"wait","speed":300,"frame":"999","to":"opacity:0;","ease":"Power3.easeInOut"}]" data-margintop="[370,200,200,0]" data-marginright="[0,0,0,0]" data-marginbottom="[150,0,0,0]" data-marginleft="[0,50,0,0]" data-textAlign="['left','left','center','center']" data-paddingtop="[0,0,0,0]" data-paddingright="[0,0,50,0]" data-paddingbottom="[0,0,0,0]" data-paddingleft="[0,0,50,0]">
|
|
|
|
<div class="tp-caption " id="slide-01-layer-02" data-x="['left','left','center','center']" data-hoffset="['0','0','0','0']" data-y="['bottom','middle','middle','middle']" data-voffset="['0','0','0','0']" data-width="none" data-height="none" data-whitespace="nowrap" data-type="column" data-responsive_offset="on" data-responsive="off" data-frames="[{"delay":"+0","speed":300,"frame":"0","from":"opacity:0;","to":"o:1;","ease":"Power3.easeInOut"},{"delay":"wait","speed":300,"frame":"999","to":"opacity:0;","ease":"Power3.easeInOut"}]" data-columnwidth="100%" data-verticalalign="top" data-margintop="[0,0,0,0]" data-marginright="[0,0,0,0]" data-marginbottom="[0,0,0,0]" data-marginleft="[0,0,0,0]" data-textAlign="['left','left','center','center']" data-paddingtop="[0,0,0,0]" data-paddingright="[0,0,0,0]" data-paddingbottom="[0,0,0,0]" data-paddingleft="[0,0,0,0]">
|
|
|
|
<div class="tp-caption tp-resizeme alt-font" id="slide-01-layer-03" data-frames="[{"delay":2200,"split":"chars","splitdelay":0.1,"speed":1500,"split_direction":"forward","frame":"0","style":"textAlign:inherit","from":"x:50px;opacity:0;fb:20px;","to":"o:1;fb:0;","ease":"Power3.easeInOut"},{"delay":"wait","split":"words","splitdelay":0.02,"speed":300,"split_direction":"backward","frame":"999","to":"auto:auto;fb:0;","ease":"Power3.easeInOut"}]" data-visibility="['on', 'on', 'on', 'on']" data-fontsize="['170','150','160','120']" data-lineheight="['170','160','160','120']" data-fontweight="['500','700', '700','700']" data-color="['#FFF','#FFF','#fff','#fff']" data-textAlign="['left','left','center','center']" data-letterspacing="['-12','-8','-8','-6']" data-x="['left','left','center','center']" data-y="['middle','middle','middle','bottom']" data-hoffset="['0','0','0','0']" data-voffset="['0','0','0','0']" data-width="['500','500','100%','100%']" data-height="['auto','auto','auto','auto']" data-whitespace="['normal', 'normal', 'normal', 'normal']" data-margintop="[0, 0, 0, 0]" data-marginright="[0, 0, 0, 0]" data-marginbottom="[30, 50, 0, 0]" data-marginleft="[0, 0, 0, 0]" data-responsive_offset="off" data-responsive="on">Malena house </div>
|
|
|
|
|
|
<a class="tp-caption text-uppercase text-white btn border-0 btn-switch-text left-icon d-table d-lg-inline-block" href="demo-architecture-projects.html" id="slide-01-layer-05" data-x="['left','left','center','center']" data-y="['middle','middle','middle','bottom']" data-hoffset="['0','0','0','0']" data-voffset="['0','0','0','0']" data-color="['#ffffff','#ffffff','#ffffff','#ffffff']" data-fontsize="['14','16','14','16']" data-lineheight="['42','55','50','55']" data-textAlign="['left','left','center','center']" data-width="['auto','auto','100%','100%']" data-height="['auto']" data-whitespace="['nowrap','nowrap','nowrap','nowrap']" data-fontweight="['500','700','700','700']" data-letterspacing="['1','1','1','1']" data-type="button" data-margintop="[0,0,50,40]" data-marginright="[0,0,0,0]" data-marginbottom="[0,0,0,0]" data-marginleft="[0,0,0,0]" data-responsive_offset="off" data-responsive="on" data-frames="[{"delay":"4000","speed":3000,"frame":"0","from":"x:50px;rY:0deg;opacity:0;fbr:200%;","to":"o:1;fbr:100;","ease":"Power4.easeOut"},{"delay":"wait","speed":300,"frame":"999","to":"opacity:0;fbr:100;","ease":"Power3.easeInOut"}]"><span>
|
|
<span class="border-radius-50 w-50px h-50px md-w-45px md-h-45px border border-2 border-color-white-color d-flex align-items-center justify-content-center me-10px"><i class="fa-solid fa-arrow-right me-0 top-0"></i></span>
|
|
<span class="btn-double-text" data-text="Explore project">Explore project</span>
|
|
</span>
|
|
</a>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<div class="tp-caption tp-resizeme alt-font text-outline text-outline-width-2px text-outline-color-base-color architecture-number" id="slide-01-layer-06" data-whiteboard="{"hand_function":"draw","jitter_repeat":"0","jitter_distance":"0","jitter_offset":"0","jitter_distance_horizontal":"0","jitter_offset_horizontal":"0","hand_angle":"0","goto_next_layer":"on","hand_direction":"top_to_bottom"}" data-frames="[{"from":"x:[100%];","mask":"x:[-100%];y:0%;s:inherit;e:inherit;","speed":2500,"to":"o:1;","delay":1500,"ease":"Power2.easeInOut"},{"delay":"wait","speed":1000,"to":"opacity:0;","ease":"Power2.easeInOut"}]" data-visibility="['on','off','off','off']" data-fontsize="['200','150','200','120']" data-lineheight="['220','360','300','200']" data-fontweight="['700','700', '700','700']" data-color="['#FFF','#FFF', '#000', '#000']" data-textAlign="['left','center','center','center']" data-letterspacing="['0','-5','-10','-8']" data-x="['left','left','left','left']" data-y="['middle','middle','bottom','bottom']" data-hoffset="['-20','-15','0','0']" data-voffset="['45','220','0','0']" data-width="['500px', 'auto', 'auto', 'auto']" data-height="['auto', 'auto', 'auto', 'auto']" data-whitespace="['normal', 'nowrap', 'normal', 'normal']" data-responsive_offset="off" data-responsive="off" data-basealign="slide">01</div>
|
|
|
|
|
|
<div class="tp-caption rev-btn d-flex justify-content-center align-items-center text-derk-gray btn btn-large bg-white btn-slide-right" id="slide-01-layer-07" data-x="['right','right','center','center']" data-hoffset="['0','0','40','40']" data-y="['middle','middle','bottom','bottom']" data-voffset="['60','60','0','0']" data-width="['120','80','80','80']" data-height="['120','80','80','80']" data-whitespace="nowrap" data-fontsize="['28','18','22','15']" data-lineheight="['44','60','50','55']" data-type="button" data-actions="[{"event":"click","action":"jumptoslide","slide":"next","delay":""}]" data-responsive_offset="off" data-responsive="off" data-frames="[{"delay":4200,"speed":1000,"sfxcolor":"#ffffff","sfx_effect":"blockfromright","frame":"0","from":"z:0;","to":"o:1;","ease":"Power3.easeInOut"},{"delay":"wait","speed":500,"sfxcolor":"#ffffff","sfx_effect":"blocktoleft","frame":"999","to":"z:0;","ease":"Power2.easeInOut"},{"frame":"hover","speed":"500","ease":"Power1.easeInOut","to":"o:1;rX:0;rY:0;rZ:0;z:0;","style":"c:rgb(255,255,255);bg:rgba(255,255,255,0);"}]" data-textAlign="['center','center','center','center']" data-basealign="slide" style="border: none;"><i class="bi bi-arrow-right ms-0"></i>
|
|
<span class="bg-black"></span>
|
|
</div>
|
|
|
|
|
|
<div class="tp-caption rev-btn alt-font bg-base-color text-black d-flex justify-content-center align-items-center text-derk-gray" id="slide-01-layer-08" data-x="['right','right','center','center']" data-hoffset="['120','80','-40','-40']" data-y="['middle','middle','bottom','bottom']" data-voffset="['60','60','0','00']" data-width="['120','80','80','80']" data-height="['120','80','80','80']" data-whitespace="nowrap" data-fontsize="['40','18','16','15']" data-fontweight="['700','700','700','700']" data-letterspacing="['-3','0','0','0']" data-lineheight="['44','60','50','55']" data-type="button" data-actions="[{"event":"click","action":"jumptoslide","slide":"next","delay":""}]" data-responsive_offset="off" data-responsive="off" data-frames="[{"delay":4400,"style":"c:rgb(239,255,2);bc:rgb(239,255,2);","speed":1000,"sfxcolor":"#efff02","sfx_effect":"blockfromright","frame":"0","ease":"Power3.easeInOut"},{"delay":"wait","speed":500,"sfxcolor":"#ffffff","sfx_effect":"blocktoleft","frame":"999","to":"z:0;","ease":"Power2.easeInOut"},{"frame":"hover","speed":"500","ease":"Power1.easeInOut","to":"o:1;rX:0;rY:0;rZ:0;z:0;","style":"c:rgb(0,0,0);bc:rgb(0,0,0);"}]" data-textAlign="['center','center','center','center']" data-basealign="slide">02
|
|
</div>
|
|
|
|
</li>
|
|
|
|
<li data-index="rs-architecture-02" data-transition="fadethroughdark" data-slotamount="default" data-hideafterloop="0" data-hideslideonmobile="off" data-easein="default" data-easeout="default" data-masterspeed="default" data-thumb="http://works.themepunch.com/revolution_5_3/wp-content/" data-rotate="0" data-saveperformance="off" data-title data-param1 data-param2 data-param3 data-param4 data-param5 data-param6 data-param7 data-param8 data-param9 data-param10 data-description>
|
|
|
|
<img src="images/demo-architecture-rev-slider-02.jpg" alt="slider-image" data-bgposition="center center" data-kenburns="on" data-duration="2500" data-ease="Power3.easeInOut" data-scalestart="100" data-scaleend="100" data-rotatestart="0" data-rotateend="0" data-blurstart="10" data-blurend="0" data-offsetstart="100 100" data-offsetend="0 0" data-bgparallax="3" class="rev-slidebg" data-no-retina>
|
|
|
|
<div id="rrzm_639" class="rev_row_zone rev_row_zone_middle">
|
|
|
|
<div class="tp-caption architecture-slider-text-row" id="slide-02-layer-01" data-x="['left','left','center','center']" data-hoffset="['0','0','0','0']" data-y="['bottom','middle','middle','middle']" data-voffset="['0','0','0','0']" data-width="none" data-height="none" data-whitespace="nowrap" data-type="row" data-columnbreak="2" data-responsive_offset="on" data-responsive="off" data-frames="[{"delay":10,"speed":300,"frame":"0","from":"opacity:0;","to":"o:1;","ease":"Power3.easeInOut"},{"delay":"wait","speed":300,"frame":"999","to":"opacity:0;","ease":"Power3.easeInOut"}]" data-margintop="[370,200,200,0]" data-marginright="[0,0,0,0]" data-marginbottom="[150,0,0,0]" data-marginleft="[0,50,0,0]" data-textAlign="['left','left','center','center']" data-paddingtop="[0,0,0,0]" data-paddingright="[0,0,50,0]" data-paddingbottom="[0,0,0,0]" data-paddingleft="[0,0,50,0]">
|
|
|
|
<div class="tp-caption " id="slide-02-layer-02" data-x="['left','left','center','center']" data-hoffset="['0','0','0','0']" data-y="['bottom','middle','middle','middle']" data-voffset="['0','0','0','0']" data-width="none" data-height="none" data-whitespace="nowrap" data-type="column" data-responsive_offset="on" data-responsive="off" data-frames="[{"delay":"+0","speed":300,"frame":"0","from":"opacity:0;","to":"o:1;","ease":"Power3.easeInOut"},{"delay":"wait","speed":300,"frame":"999","to":"opacity:0;","ease":"Power3.easeInOut"}]" data-columnwidth="100%" data-verticalalign="top" data-margintop="[0,0,0,0]" data-marginright="[0,0,0,0]" data-marginbottom="[0,0,0,0]" data-marginleft="[0,0,0,0]" data-textAlign="['left','left','center','center']" data-paddingtop="[0,0,0,0]" data-paddingright="[0,0,0,0]" data-paddingbottom="[0,0,0,0]" data-paddingleft="[0,0,0,0]">
|
|
|
|
<div class="tp-caption tp-resizeme alt-font" id="slide-02-layer-03" data-frames="[{"delay":2200,"split":"chars","splitdelay":0.1,"speed":1500,"split_direction":"forward","frame":"0","style":"textAlign:inherit","from":"x:50px;opacity:0;fb:20px;","to":"o:1;fb:0;","ease":"Power3.easeInOut"},{"delay":"wait","split":"words","splitdelay":0.02,"speed":300,"split_direction":"backward","frame":"999","to":"auto:auto;fb:0;","ease":"Power3.easeInOut"}]" data-visibility="['on', 'on', 'on', 'on']" data-fontsize="['170','150','160','120']" data-lineheight="['170','160','160','120']" data-fontweight="['500','700', '700','700']" data-color="['#FFF','#FFF','#fff','#fff']" data-textAlign="['left','left','center','center']" data-letterspacing="['-12','-8','-8','-6']" data-x="['left','left','center','center']" data-y="['middle','middle','middle','bottom']" data-hoffset="['0','0','0','0']" data-voffset="['0','0','0','0']" data-width="['500','500','100%','100%']" data-height="['auto','auto','auto','auto']" data-whitespace="['normal', 'normal', 'normal', 'normal']" data-margintop="[0, 0, 0, 0]" data-marginright="[0, 0, 0, 0]" data-marginbottom="[30, 30, 0, 0]" data-marginleft="[0, 0, 0, 0]" data-responsive_offset="off" data-responsive="on">Rustic interior </div>
|
|
|
|
|
|
<a class="tp-caption text-uppercase text-white btn border-0 btn-switch-text left-icon d-table d-lg-inline-block" href="demo-architecture-projects.html" id="slide-02-layer-05" data-x="['left','left','center','center']" data-y="['middle','middle','middle','bottom']" data-hoffset="['0','0','0','0']" data-voffset="['0','0','0','0']" data-color="['#ffffff','#ffffff','#ffffff','#ffffff']" data-fontsize="['14','16','14','16']" data-lineheight="['42','55','50','55']" data-textAlign="['left','left','center','center']" data-width="['auto','auto','100%','100%']" data-height="['auto']" data-whitespace="['nowrap','nowrap','nowrap','nowrap']" data-fontweight="['500','700','700','700']" data-letterspacing="['1','1','1','1']" data-type="button" data-margintop="[0,0,50,40]" data-marginright="[0,0,0,0]" data-marginbottom="[0,0,0,0]" data-marginleft="[0,0,0,0]" data-responsive_offset="off" data-responsive="on" data-frames="[{"delay":"4000","speed":3000,"frame":"0","from":"x:50px;rY:0deg;opacity:0;fbr:200%;","to":"o:1;fbr:100;","ease":"Power4.easeOut"},{"delay":"wait","speed":300,"frame":"999","to":"opacity:0;fbr:100;","ease":"Power3.easeInOut"}]"><span>
|
|
<span class="border-radius-50 w-50px h-50px md-w-45px md-h-45px border border-2 border-color-white-color d-flex align-items-center justify-content-center me-10px"><i class="fa-solid fa-arrow-right me-0 top-0"></i></span>
|
|
<span class="btn-double-text" data-text="Explore project">Explore project</span>
|
|
</span>
|
|
</a>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<div class="tp-caption tp-resizeme alt-font text-outline text-outline-width-2px text-outline-color-base-color architecture-number" id="slide-02-layer-06" data-whiteboard="{"hand_function":"draw","jitter_repeat":"0","jitter_distance":"0","jitter_offset":"0","jitter_distance_horizontal":"0","jitter_offset_horizontal":"0","hand_angle":"0","goto_next_layer":"on","hand_direction":"top_to_bottom"}" data-frames="[{"from":"x:[100%];","mask":"x:[-100%];y:0%;s:inherit;e:inherit;","speed":2500,"to":"o:1;","delay":1500,"ease":"Power2.easeInOut"},{"delay":"wait","speed":1000,"to":"opacity:0;","ease":"Power2.easeInOut"}]" data-visibility="['on','off','off','off']" data-fontsize="['200','150','200','120']" data-lineheight="['220','360','300','200']" data-fontweight="['700','700', '700','700']" data-color="['#FFF','#FFF', '#000', '#000']" data-textAlign="['left','center','center','center']" data-letterspacing="['0','-5','-10','-8']" data-x="['left','left','left','left']" data-y="['middle','middle','bottom','bottom']" data-hoffset="['-20','-15','0','0']" data-voffset="['45','220','0','0']" data-width="['500px', 'auto', 'auto', 'auto']" data-height="['auto', 'auto', 'auto', 'auto']" data-whitespace="['normal', 'nowrap', 'normal', 'normal']" data-responsive_offset="off" data-responsive="on" data-basealign="slide">02</div>
|
|
|
|
|
|
<div class="tp-caption rev-btn d-flex justify-content-center align-items-center text-derk-gray btn btn-large bg-white btn-slide-right" id="slide-02-layer-07" data-x="['right','right','center','center']" data-hoffset="['0','0','40','40']" data-y="['middle','middle','bottom','bottom']" data-voffset="['60','60','0','0']" data-width="['120','80','80','80']" data-height="['120','80','80','80']" data-whitespace="nowrap" data-fontsize="['28','18','22','15']" data-lineheight="['44','60','50','55']" data-type="button" data-actions="[{"event":"click","action":"jumptoslide","slide":"next","delay":""}]" data-responsive_offset="off" data-responsive="off" data-frames="[{"delay":4200,"speed":1000,"sfxcolor":"#ffffff","sfx_effect":"blockfromright","frame":"0","from":"z:0;","to":"o:1;","ease":"Power3.easeInOut"},{"delay":"wait","speed":500,"sfxcolor":"#ffffff","sfx_effect":"blocktoleft","frame":"999","to":"z:0;","ease":"Power2.easeInOut"},{"frame":"hover","speed":"500","ease":"Power1.easeInOut","to":"o:1;rX:0;rY:0;rZ:0;z:0;","style":"c:rgb(255,255,255);bc:rgba(255,255,255,0);"}]" data-textAlign="['center','center','center','center']" data-basealign="slide" style="border: none;"><i class="bi bi-arrow-right ms-0"></i>
|
|
<span class="bg-black"></span>
|
|
</div>
|
|
|
|
|
|
<div class="tp-caption rev-btn alt-font bg-base-color text-black d-flex justify-content-center align-items-center text-derk-gray" id="slide-02-layer-08" data-x="['right','right','center','center']" data-hoffset="['120','80','-40','-40']" data-y="['middle','middle','bottom','bottom']" data-voffset="['60','60','0','00']" data-width="['120','80','80','80']" data-height="['120','80','80','80']" data-whitespace="nowrap" data-fontsize="['40','18','16','15']" data-fontweight="['700','700','700','700']" data-letterspacing="['-3','0','0','0']" data-lineheight="['44','60','50','55']" data-type="button" data-actions="[{"event":"click","action":"jumptoslide","slide":"next","delay":""}]" data-responsive_offset="off" data-responsive="off" data-frames="[{"delay":4400,"style":"c:rgb(239,255,2);bc:rgb(239,255,2);","speed":1000,"sfxcolor":"#efff02","sfx_effect":"blockfromright","frame":"0","ease":"Power3.easeInOut"},{"delay":"wait","speed":500,"sfxcolor":"#ffffff","sfx_effect":"blocktoleft","frame":"999","to":"z:0;","ease":"Power2.easeInOut"},{"frame":"hover","speed":"500","ease":"Power1.easeInOut","to":"o:1;rX:0;rY:0;rZ:0;z:0;","style":"c:rgb(0,0,0);bc:rgb(0,0,0);"}]" data-textAlign="['center','center','center','center']" data-basealign="slide">03
|
|
</div>
|
|
|
|
</li>
|
|
|
|
<li data-index="rs-architecture-03" data-transition="fadethroughdark" data-slotamount="default" data-hideafterloop="0" data-hideslideonmobile="off" data-easein="default" data-easeout="default" data-masterspeed="default" data-thumb="http://works.themepunch.com/revolution_5_3/wp-content/" data-rotate="0" data-saveperformance="off" data-title data-param1 data-param2 data-param3 data-param4 data-param5 data-param6 data-param7 data-param8 data-param9 data-param10 data-description>
|
|
|
|
<img src="images/demo-architecture-rev-slider-03.jpg" alt="slider-image" data-bgposition="center center" data-kenburns="on" data-duration="2500" data-ease="Power3.easeInOut" data-scalestart="100" data-scaleend="100" data-rotatestart="0" data-rotateend="0" data-blurstart="10" data-blurend="0" data-offsetstart="100 100" data-offsetend="0 0" data-bgparallax="3" class="rev-slidebg" data-no-retina>
|
|
|
|
<div id="rrzm_640" class="rev_row_zone rev_row_zone_middle">
|
|
|
|
<div class="tp-caption architecture-slider-text-row" id="slide-03-layer-01" data-x="['left','left','center','center']" data-hoffset="['0','0','0','0']" data-y="['bottom','middle','middle','middle']" data-voffset="['0','0','0','0']" data-width="none" data-height="none" data-whitespace="nowrap" data-type="row" data-columnbreak="2" data-responsive_offset="on" data-responsive="off" data-frames="[{"delay":10,"speed":300,"frame":"0","from":"opacity:0;","to":"o:1;","ease":"Power3.easeInOut"},{"delay":"wait","speed":300,"frame":"999","to":"opacity:0;","ease":"Power3.easeInOut"}]" data-margintop="[370,200,200,0]" data-marginright="[0,0,0,0]" data-marginbottom="[150,0,0,0]" data-marginleft="[0,50,0,0]" data-textAlign="['left','left','center','center']" data-paddingtop="[0,0,0,0]" data-paddingright="[0,0,50,0]" data-paddingbottom="[0,0,0,0]" data-paddingleft="[0,0,50,0]">
|
|
|
|
<div class="tp-caption " id="slide-03-layer-02" data-x="['left','left','center','center']" data-hoffset="['0','0','0','0']" data-y="['bottom','middle','middle','middle']" data-voffset="['0','0','0','0']" data-width="none" data-height="none" data-whitespace="nowrap" data-type="column" data-responsive_offset="on" data-responsive="off" data-frames="[{"delay":"+0","speed":300,"frame":"0","from":"opacity:0;","to":"o:1;","ease":"Power3.easeInOut"},{"delay":"wait","speed":300,"frame":"999","to":"opacity:0;","ease":"Power3.easeInOut"}]" data-columnwidth="100%" data-verticalalign="top" data-margintop="[0,0,0,0]" data-marginright="[0,0,0,0]" data-marginbottom="[0,0,0,0]" data-marginleft="[0,0,0,0]" data-textAlign="['left','left','center','center']" data-paddingtop="[0,0,0,0]" data-paddingright="[0,0,0,0]" data-paddingbottom="[0,0,0,0]" data-paddingleft="[0,0,0,0]">
|
|
|
|
<div class="tp-caption tp-resizeme alt-font" id="slide-03-layer-03" data-frames="[{"delay":2200,"split":"chars","splitdelay":0.1,"speed":1500,"split_direction":"forward","frame":"0","style":"textAlign:inherit","from":"x:50px;opacity:0;fb:20px;","to":"o:1;fb:0;","ease":"Power3.easeInOut"},{"delay":"wait","split":"words","splitdelay":0.02,"speed":300,"split_direction":"backward","frame":"999","to":"auto:auto;fb:0;","ease":"Power3.easeInOut"}]" data-visibility="['on', 'on', 'on', 'on']" data-fontsize="['170','150','160','120']" data-lineheight="['170','160','160','120']" data-fontweight="['500','700', '700','700']" data-color="['#FFF','#FFF','#fff','#fff']" data-textAlign="['left','left','center','center']" data-letterspacing="['-12','-8','-8','-6']" data-x="['left','left','center','center']" data-y="['middle','middle','middle','bottom']" data-hoffset="['0','0','0','0']" data-voffset="['0','0','0','0']" data-width="['500','500','100%','100%']" data-height="['auto','auto','auto','auto']" data-whitespace="['normal', 'normal', 'normal', 'normal']" data-margintop="[0, 0, 0, 0]" data-marginright="[0, 0, 0, 0]" data-marginbottom="[30, 30, 0, 0]" data-marginleft="[0, 0, 0, 0]" data-responsive_offset="off" data-responsive="on">Monzo office</div>
|
|
|
|
|
|
<a class="tp-caption text-uppercase text-white btn border-0 btn-switch-text left-icon d-table d-lg-inline-block" href="demo-architecture-projects.html" id="slide-03-layer-05" data-x="['left','left','center','center']" data-y="['middle','middle','middle','bottom']" data-hoffset="['0','0','0','0']" data-voffset="['0','0','0','0']" data-color="['#ffffff','#ffffff','#ffffff','#ffffff']" data-fontsize="['14','16','14','16']" data-lineheight="['42','55','50','55']" data-textAlign="['left','left','center','center']" data-width="['auto','auto','100%','100%']" data-height="['auto']" data-whitespace="['nowrap','nowrap','nowrap','nowrap']" data-fontweight="['500','700','700','700']" data-letterspacing="['1','1','1','1']" data-type="button" data-margintop="[0,0,50,40]" data-marginright="[0,0,0,0]" data-marginbottom="[0,0,0,0]" data-marginleft="[0,0,0,0]" data-responsive_offset="off" data-responsive="on" data-frames="[{"delay":"4000","speed":3000,"frame":"0","from":"x:50px;rY:0deg;opacity:0;fbr:200%;","to":"o:1;fbr:100;","ease":"Power4.easeOut"},{"delay":"wait","speed":300,"frame":"999","to":"opacity:0;fbr:100;","ease":"Power3.easeInOut"}]"><span>
|
|
<span class="border-radius-50 w-50px h-50px md-w-45px md-h-45px border border-2 border-color-white-color d-flex align-items-center justify-content-center me-10px"><i class="fa-solid fa-arrow-right me-0 top-0"></i></span>
|
|
<span class="btn-double-text" data-text="Explore project">Explore project</span>
|
|
</span>
|
|
</a>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<div class="tp-caption tp-resizeme alt-font text-outline text-outline-width-2px text-outline-color-base-color architecture-number" id="slide-03-layer-06" data-whiteboard="{"hand_function":"draw","jitter_repeat":"0","jitter_distance":"0","jitter_offset":"0","jitter_distance_horizontal":"0","jitter_offset_horizontal":"0","hand_angle":"0","goto_next_layer":"on","hand_direction":"top_to_bottom"}" data-frames="[{"from":"x:[100%];","mask":"x:[-100%];y:0%;s:inherit;e:inherit;","speed":2500,"to":"o:1;","delay":1500,"ease":"Power2.easeInOut"},{"delay":"wait","speed":1000,"to":"opacity:0;","ease":"Power2.easeInOut"}]" data-visibility="['on','off','off','off']" data-fontsize="['200','150','200','120']" data-lineheight="['220','360','300','200']" data-fontweight="['700','700', '700','700']" data-color="['#FFF','#FFF', '#000', '#000']" data-textAlign="['left','center','center','center']" data-letterspacing="['0','-5','-10','-8']" data-x="['left','left','left','left']" data-y="['middle','middle','bottom','bottom']" data-hoffset="['-20','-15','0','0']" data-voffset="['45','220','0','0']" data-width="['500px', 'auto', 'auto', 'auto']" data-height="['auto', 'auto', 'auto', 'auto']" data-whitespace="['normal', 'nowrap', 'normal', 'normal']" data-responsive_offset="off" data-responsive="on" data-basealign="slide">03</div>
|
|
|
|
|
|
<div class="tp-caption rev-btn d-flex justify-content-center align-items-center text-derk-gray btn btn-large bg-white btn-slide-right" id="slide-03-layer-07" data-x="['right','right','center','center']" data-hoffset="['0','0','40','40']" data-y="['middle','middle','bottom','bottom']" data-voffset="['60','60','0','0']" data-width="['120','80','80','80']" data-height="['120','80','80','80']" data-whitespace="nowrap" data-fontsize="['28','18','22','15']" data-lineheight="['44','60','50','55']" data-type="button" data-actions="[{"event":"click","action":"jumptoslide","slide":"next","delay":""}]" data-responsive_offset="off" data-responsive="off" data-frames="[{"delay":4200,"speed":1000,"sfxcolor":"#ffffff","sfx_effect":"blockfromright","frame":"0","from":"z:0;","to":"o:1;","ease":"Power3.easeInOut"},{"delay":"wait","speed":500,"sfxcolor":"#ffffff","sfx_effect":"blocktoleft","frame":"999","to":"z:0;","ease":"Power2.easeInOut"},{"frame":"hover","speed":"500","ease":"Power1.easeInOut","to":"o:1;rX:0;rY:0;rZ:0;z:0;","style":"c:rgb(255,255,255);bc:rgba(255,255,255,0);"}]" data-textAlign="['center','center','center','center']" data-basealign="slide" style="border: none;"><i class="bi bi-arrow-right ms-0"></i>
|
|
<span class="bg-black"></span>
|
|
</div>
|
|
|
|
|
|
<div class="tp-caption rev-btn alt-font bg-base-color text-black d-flex justify-content-center align-items-center text-derk-gray" id="slide-03-layer-08" data-x="['right','right','center','center']" data-hoffset="['120','80','-40','-40']" data-y="['middle','middle','bottom','bottom']" data-voffset="['60','60','0','00']" data-width="['120','80','80','80']" data-height="['120','80','80','80']" data-whitespace="nowrap" data-fontsize="['40','18','16','15']" data-fontweight="['700','700','700','700']" data-letterspacing="['-3','0','0','0']" data-lineheight="['44','60','50','55']" data-type="button" data-actions="[{"event":"click","action":"jumptoslide","slide":"next","delay":""}]" data-responsive_offset="off" data-responsive="off" data-frames="[{"delay":4400,"style":"c:rgb(239,255,2);bc:rgb(239,255,2);","speed":1000,"sfxcolor":"#efff02","sfx_effect":"blockfromright","frame":"0","ease":"Power3.easeInOut"},{"delay":"wait","speed":500,"sfxcolor":"#ffffff","sfx_effect":"blocktoleft","frame":"999","to":"z:0;","ease":"Power2.easeInOut"},{"frame":"hover","speed":"500","ease":"Power1.easeInOut","to":"o:1;rX:0;rY:0;rZ:0;z:0;","style":"c:rgb(0,0,0);bc:rgb(0,0,0);"}]" data-textAlign="['center','center','center','center']" data-basealign="slide">01
|
|
</div>
|
|
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</section>
|
|
|
|
|
|
<section class="bg-dark-gray background-position-center-top overflow-hidden" style="background-image: url('images/demo-architecture-dotted-pattern.svg')">
|
|
<div class="container">
|
|
<div class="row align-items-center mb-5 sm-mb-30px">
|
|
<div class="col-lg-6 md-mb-50px sm-mb-40px text-center text-sm-start" data-anime="{ "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 300, "easing": "easeOutQuad" }">
|
|
<img src="images/demo-architecture-signechar.png" alt>
|
|
<h4 class="text-white fw-600 mt-20px mb-0 w-90 lg-w-100">Delivering awesome quality, effective and inspiring built gorgeous space.</h4>
|
|
</div>
|
|
<div class="col-lg-6 last-paragraph-no-margin">
|
|
<div class="row align-items-center">
|
|
<div class="col-xl-6 col-lg-5 col-sm-4 position-relative atropos transform-3d xs-mb-15px text-center text-sm-start text-lg-center" data-anime="{ "translateY": [-15, 0], "scale": [0.8, 1], "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 300, "easing": "easeOutQuad" }">
|
|
<div class="atropos d-inline-block" data-atropos data-atropos-perspective="500">
|
|
<div class="atropos-scale">
|
|
<div class="atropos-rotate">
|
|
<div class="atropos-inner text-center">
|
|
<div data-atropos-offset="-5" class="position-relative left-0px right-0px top-50px lg-top-30px md-top-40px">
|
|
<span class="fs-180 lg-fs-130 md-fs-150 text-dark-gray alt-font fw-700 position-absolute left-0px w-100 ls-minus-3px">16</span>
|
|
</div>
|
|
<span class="w-210px h-210px lg-w-150px lg-h-150px md-w-170px md-h-170px sm-w-150px sm-h-150px rounded-circle d-inline-block bg-base-color"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xl-6 col-lg-7 col-sm-8 text-center text-sm-start" data-anime="{ "translateX": [0, 0], "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 300, "easing": "easeOutQuad" }">
|
|
<span class="fs-14 text-uppercase ls-1px text-white fw-600 d-block mb-5px">Established for 16 years.</span>
|
|
<p class="w-90 lg-w-100">We are dedicated to providing outstanding architectural and design services that meet the functional and aesthetic.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row row-cols-1 row-cols-lg-3 justify-content-center" data-anime="{ "el": "childs", "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 300, "easing": "easeOutQuad" }">
|
|
|
|
<div class="col icon-with-text-style-01 pe-5 md-mb-30px">
|
|
<div class="separator-line-1px bg-charcoal-grey w-100 mb-25px d-none d-lg-block"></div>
|
|
<div class="feature-box feature-box-left-icon last-paragraph-no-margin">
|
|
<div class="feature-box-content">
|
|
<span class="text-medium-gray fs-18 lh-30 w-80 sm-w-90 d-block"><span class="text-white fw-600">350+</span> very satisfied clients around the worldwide.</span>
|
|
</div>
|
|
<div class="feature-box-icon me-0">
|
|
<span class="fs-18 mb-0 fw-500 text-base-color">01</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="col icon-with-text-style-01 pe-5 md-mb-30px">
|
|
<div class="separator-line-1px bg-charcoal-grey w-100 mb-25px"></div>
|
|
<div class="feature-box feature-box-left-icon last-paragraph-no-margin">
|
|
<div class="feature-box-content">
|
|
<span class="text-medium-gray fs-18 lh-30 w-80 sm-w-90 d-block"><span class="text-white fw-600">200+</span> good award winning architecture agency.</span>
|
|
</div>
|
|
<div class="feature-box-icon me-0">
|
|
<span class="fs-18 mb-0 fw-500 text-base-color">02</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="col icon-with-text-style-01 pe-5">
|
|
<div class="separator-line-1px bg-charcoal-grey w-100 mb-25px"></div>
|
|
<div class="feature-box feature-box-left-icon last-paragraph-no-margin">
|
|
<div class="feature-box-content">
|
|
<span class="text-medium-gray fs-18 lh-30 w-80 sm-w-90 d-block"><span class="text-white fw-600">500+</span> building has been constructed with us.</span>
|
|
</div>
|
|
<div class="feature-box-icon me-0">
|
|
<span class="fs-18 mb-0 fw-500 text-base-color">03</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<section class="p-0 bg-dark-gray background-position-center-top overflow-hidden" style="background-image: url('images/demo-architecture-dotted-pattern.svg')">
|
|
<div class="container-fluid p-0">
|
|
<div class="row g-0 align-items-center h-500px md-h-450px sm-h-auto" data-bottom-top="transform: translate3d(-30px, 0px, 0px);" data-top-bottom="transform: translate3d(-110px, 0px, 0px);">
|
|
<div class="col-md-6 cover-background h-100 sm-h-400px xs-h-350px" style="background-image: url('images/demo-architecture-home-02.jpg');">
|
|
</div>
|
|
<div class="col-lg-4 col-md-6 position-relative bg-nero-grey h-100 sm-h-350px sm-pb-8 overflow-hidden">
|
|
<div class="h-100 d-flex flex-column align-items-center justify-content-center">
|
|
<a href="https://www.youtube.com/watch?v=cfXHhfNy7tU" class="position-relative border border-2 border-color-base-color d-inline-block text-center rounded-circle video-icon-box video-icon-large popup-youtube mb-10px">
|
|
<span>
|
|
<span class="video-icon">
|
|
<i class="fa-solid fa-play text-base-color"></i>
|
|
</span>
|
|
</span>
|
|
</a>
|
|
<h2 class="fs-60 alt-font fw-500 text-center w-50 xl-w-80 ls-minus-2px">we create <span class="text-white">modernity</span></h2>
|
|
<div class="position-absolute bottom-minus-20px left-0px right-0px text-center w-100 fs-140 sm-fs-160 xs-fs-110 ls-minus-3px opacity-1 word-break-normal text-outline text-outline-color-white alt-font" data-bottom-top="transform:scale(1.6, 1.6)" data-top-bottom="transform:scale(1, 1)">architecture</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<section class="bg-dark-gray background-position-center-top overflow-hidden" style="background-image: url('images/demo-architecture-dotted-pattern.svg')">
|
|
<div class="container">
|
|
<div class="row align-items-end mb-6">
|
|
<div class="col-md-6 sm-mb-20px" data-anime="{ "el": "childs", "translateX": [50, 0], "opacity": [0,1], "duration": 1200, "delay": 100, "staggervalue": 150, "easing": "easeOutQuad" }">
|
|
<span class="text-base-color fs-12 fw-600 ls-3px text-uppercase mb-5px d-block">Architecture services</span>
|
|
<h4 class="text-white fw-600 mb-0">Create functional and stylish modern buildings for you.</h4>
|
|
</div>
|
|
<div class="col-md-5 offset-md-1 last-paragraph-no-margin" data-anime="{ "translateX": [-50, 0], "opacity": [0,1], "duration": 1200, "delay": 100, "staggervalue": 150, "easing": "easeOutQuad" }">
|
|
<p class="w-80 xl-w-85 lg-w-100">Our buildings combine minimalism and elegance of lines and shapes. We want them to be an integral part of the surrounding landscape.</p>
|
|
</div>
|
|
</div>
|
|
<div class="row align-items-center mb-9">
|
|
<div class="col-md-12 position-relative" data-anime="{ "translateX": [150, 0], "opacity": [0,1], "duration": 1200, "delay": 100, "staggervalue": 150, "easing": "easeOutQuad" }">
|
|
<div class="outside-box-right-30 sm-outside-box-right-0">
|
|
<div class="swiper slider-three-slide magic-cursor drag-cursor" data-slider-options="{ "slidesPerView": 1, "spaceBetween": 35, "loop": true, "autoplay": { "delay": 4000, "disableOnInteraction": false }, "pagination": { "el": ".slider-four-slide-pagination-1", "clickable": true, "dynamicBullets": false }, "keyboard": { "enabled": true, "onlyInViewport": true }, "breakpoints": { "1200": { "slidesPerView": 4 }, "992": { "slidesPerView": 3 }, "768": { "slidesPerView": 3 }, "320": { "slidesPerView": 1 } }, "effect": "slide" }">
|
|
<div class="swiper-wrapper">
|
|
|
|
<div class="swiper-slide">
|
|
<div class="interactive-banner-style-06">
|
|
<div class="interactive-banners-image">
|
|
<img src="images/demo-architecture-home-04.jpg" alt />
|
|
<div class="overlay-bg bg-gradient-dark-transparent opacity-light"></div>
|
|
<a href="demo-architecture-services.html" class="banners-icon text-white icon-hover-base-color position-absolute top-60px left-60px lg-top-30px lg-left-30px">
|
|
<i class="line-icon-Structure icon-large"></i>
|
|
</a>
|
|
</div>
|
|
<div class="interactive-banners-content p-60px lg-p-30px">
|
|
<div class="h-100 w-100 last-paragraph-no-margin">
|
|
<a href="demo-architecture-services.html" class="fs-22 d-block text-white mb-10px fw-500">Architecture</a>
|
|
<p class="interactive-banners-content-text w-95 lg-w-100">Lorem ipsum consectetur elit do eiusmod tempor incididunt.</p>
|
|
</div>
|
|
</div>
|
|
<div class="box-overlay bg-gradient-dark-transparent"></div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="swiper-slide">
|
|
<div class="interactive-banner-style-06">
|
|
<div class="interactive-banners-image">
|
|
<img src="images/demo-architecture-home-05.jpg" alt />
|
|
<div class="overlay-bg bg-gradient-dark-transparent opacity-light"></div>
|
|
<a href="demo-architecture-services.html" class="banners-icon text-white icon-hover-base-color position-absolute top-60px left-60px lg-top-30px lg-left-30px">
|
|
<i class="line-icon-Cursor-Select icon-large"></i>
|
|
</a>
|
|
</div>
|
|
<div class="interactive-banners-content p-60px lg-p-30px">
|
|
<div class="h-100 w-100 last-paragraph-no-margin">
|
|
<a href="demo-architecture-services.html" class="fs-22 d-block text-white mb-10px fw-500">Residential space</a>
|
|
<p class="interactive-banners-content-text w-95 lg-w-100">Lorem ipsum consectetur elit do eiusmod tempor incididunt.</p>
|
|
</div>
|
|
</div>
|
|
<div class="box-overlay bg-gradient-dark-transparent"></div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="swiper-slide">
|
|
<div class="interactive-banner-style-06">
|
|
<div class="interactive-banners-image">
|
|
<img src="images/demo-architecture-home-06.jpg" alt />
|
|
<div class="overlay-bg bg-gradient-dark-transparent opacity-light"></div>
|
|
<a href="demo-architecture-services.html" class="banners-icon icon-hover-base-color text-white position-absolute top-60px left-60px lg-top-30px lg-left-30px">
|
|
<i class="line-icon-Full-View icon-large"></i>
|
|
</a>
|
|
</div>
|
|
<div class="interactive-banners-content p-60px lg-p-30px">
|
|
<div class="h-100 w-100 last-paragraph-no-margin">
|
|
<a href="demo-architecture-services.html" class="fs-22 d-block text-white mb-10px fw-500">Interior design</a>
|
|
<p class="interactive-banners-content-text w-95 lg-w-100">Lorem ipsum consectetur elit do eiusmod tempor incididunt.</p>
|
|
</div>
|
|
</div>
|
|
<div class="box-overlay bg-gradient-dark-transparent"></div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="swiper-slide">
|
|
<div class="interactive-banner-style-06">
|
|
<div class="interactive-banners-image">
|
|
<img src="images/demo-architecture-home-07.jpg" alt />
|
|
<div class="overlay-bg bg-gradient-dark-transparent opacity-light"></div>
|
|
<a href="demo-architecture-services.html" class="banners-icon icon-hover-base-color text-white position-absolute top-60px left-60px lg-top-30px lg-left-30px">
|
|
<i class="line-icon-Duplicate-Layer icon-large"></i>
|
|
</a>
|
|
</div>
|
|
<div class="interactive-banners-content p-60px lg-p-30px">
|
|
<div class="h-100 w-100 last-paragraph-no-margin">
|
|
<a href="demo-architecture-services.html" class="fs-22 d-block text-white mb-10px fw-500">Exterior planning</a>
|
|
<p class="interactive-banners-content-text w-95 lg-w-100">Lorem ipsum consectetur elit do eiusmod tempor incididunt.</p>
|
|
</div>
|
|
</div>
|
|
<div class="box-overlay bg-gradient-dark-transparent"></div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="swiper-slide">
|
|
<div class="interactive-banner-style-06">
|
|
<div class="interactive-banners-image">
|
|
<img src="images/demo-architecture-home-04.jpg" alt />
|
|
<div class="overlay-bg bg-gradient-dark-transparent opacity-light"></div>
|
|
<a href="demo-architecture-services.html" class="banners-icon text-white icon-hover-base-color position-absolute top-60px left-60px lg-top-30px lg-left-30px">
|
|
<i class="line-icon-Structure icon-large"></i>
|
|
</a>
|
|
</div>
|
|
<div class="interactive-banners-content p-60px lg-p-30px">
|
|
<div class="h-100 w-100 last-paragraph-no-margin">
|
|
<a href="demo-architecture-services.html" class="fs-22 d-block text-white mb-10px fw-500">Architecture</a>
|
|
<p class="interactive-banners-content-text w-95 lg-w-100">Lorem ipsum consectetur elit do eiusmod tempor incididunt.</p>
|
|
</div>
|
|
</div>
|
|
<div class="box-overlay bg-gradient-dark-transparent"></div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="swiper-slide">
|
|
<div class="interactive-banner-style-06">
|
|
<div class="interactive-banners-image">
|
|
<img src="images/demo-architecture-home-05.jpg" alt />
|
|
<div class="overlay-bg bg-gradient-dark-transparent opacity-light"></div>
|
|
<a href="demo-architecture-services.html" class="banners-icon text-white icon-hover-base-color position-absolute top-60px left-60px lg-top-30px lg-left-30px">
|
|
<i class="line-icon-Cursor-Select icon-large"></i>
|
|
</a>
|
|
</div>
|
|
<div class="interactive-banners-content p-60px lg-p-30px">
|
|
<div class="h-100 w-100 last-paragraph-no-margin">
|
|
<a href="demo-architecture-services.html" class="fs-22 d-block text-white mb-10px fw-500">Residential space</a>
|
|
<p class="interactive-banners-content-text w-95 lg-w-100">Lorem ipsum consectetur elit do eiusmod tempor incididunt.</p>
|
|
</div>
|
|
</div>
|
|
<div class="box-overlay bg-gradient-dark-transparent"></div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="swiper-slide">
|
|
<div class="interactive-banner-style-06">
|
|
<div class="interactive-banners-image">
|
|
<img src="images/demo-architecture-home-06.jpg" alt />
|
|
<div class="overlay-bg bg-gradient-dark-transparent opacity-light"></div>
|
|
<a href="demo-architecture-services.html" class="banners-icon icon-hover-base-color text-white position-absolute top-60px left-60px lg-top-30px lg-left-30px">
|
|
<i class="line-icon-Full-View icon-large"></i>
|
|
</a>
|
|
</div>
|
|
<div class="interactive-banners-content p-60px lg-p-30px">
|
|
<div class="h-100 w-100 last-paragraph-no-margin">
|
|
<a href="demo-architecture-services.html" class="fs-22 d-block text-white mb-10px fw-500">Interior design</a>
|
|
<p class="interactive-banners-content-text w-95 lg-w-100">Lorem ipsum consectetur elit do eiusmod tempor incididunt.</p>
|
|
</div>
|
|
</div>
|
|
<div class="box-overlay bg-gradient-dark-transparent"></div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="swiper-slide">
|
|
<div class="interactive-banner-style-06">
|
|
<div class="interactive-banners-image">
|
|
<img src="images/demo-architecture-home-07.jpg" alt />
|
|
<div class="overlay-bg bg-gradient-dark-transparent opacity-light"></div>
|
|
<a href="demo-architecture-services.html" class="banners-icon icon-hover-base-color text-white position-absolute top-60px left-60px lg-top-30px lg-left-30px">
|
|
<i class="line-icon-Duplicate-Layer icon-large"></i>
|
|
</a>
|
|
</div>
|
|
<div class="interactive-banners-content p-60px lg-p-30px">
|
|
<div class="h-100 w-100 last-paragraph-no-margin">
|
|
<a href="demo-architecture-services.html" class="fs-22 d-block text-white mb-10px fw-500">Exterior planning</a>
|
|
<p class="interactive-banners-content-text w-95 lg-w-100">Lorem ipsum consectetur elit do eiusmod tempor incididunt.</p>
|
|
</div>
|
|
</div>
|
|
<div class="box-overlay bg-gradient-dark-transparent"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
<div class="row row-cols-1 row-cols-lg-4 row-cols-sm-2 clients-style-06">
|
|
|
|
<div class="col client-box text-center md-mb-30px">
|
|
<a href="demo-architecture.html#"><img src="images/clients-38.png" data-bottom-top="transform: translateY(-20px)" data-top-bottom="transform: translateY(20px)" alt /></a>
|
|
</div>
|
|
|
|
|
|
<div class="col client-box text-center md-mb-30px">
|
|
<a href="demo-architecture.html#"><img src="images/clients-39.png" data-bottom-top="transform: translateY(20px)" data-top-bottom="transform: translateY(-20px)" alt /></a>
|
|
</div>
|
|
|
|
|
|
<div class="col client-box text-center xs-mb-30px">
|
|
<a href="demo-architecture.html#"><img src="images/clients-40.png" data-bottom-top="transform: translateY(-20px)" data-top-bottom="transform: translateY(20px)" alt /></a>
|
|
</div>
|
|
|
|
|
|
<div class="col client-box text-center">
|
|
<a href="demo-architecture.html#"><img src="images/clients-41.png" data-bottom-top="transform: translateY(20px)" data-top-bottom="transform: translateY(-20px)" alt /></a>
|
|
</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 overlap-gap-section">
|
|
<div class="row">
|
|
<div class="col-lg-4">
|
|
<div class="position-relative" data-anime="{ "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 300, "easing": "easeOutQuad" }">
|
|
<span class="text-base-color fs-12 fw-600 ls-3px text-uppercase mb-5px d-block">International awards</span>
|
|
<h4 class="text-white fw-600 mb-20px">These awards reflect the hard work.</h4>
|
|
<p>Our buildings combine minimalism & elegance of lines and shapes. We want them to be an integral part of the surrounding landscape.</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-7 offset-lg-1 last-paragraph-no-margin" data-anime="{ "el": "childs", "translateY": [30, 0], "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 300, "easing": "easeOutQuad" }">
|
|
<div class="row align-items-center pt-25px pb-25px border-bottom border-color-charcoal-grey g-0 position-relative sm-pe-40px">
|
|
<div class="col-md-2">
|
|
<span class="fw-600 text-base-color">2005</span>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<span class="text-white fw-500 fs-17">Architecture project of the year</span>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<span class="fw-500">Architecture</span>
|
|
</div>
|
|
<div class="col-auto col-md-1 sm-position-absolute right-0px">
|
|
<a href="demo-architecture.html#"><i class="bi bi-arrow-right text-white"></i></a>
|
|
</div>
|
|
</div>
|
|
<div class="row align-items-center pt-25px pb-25px border-bottom border-color-charcoal-grey g-0 position-relative sm-pe-40px">
|
|
<div class="col-md-2">
|
|
<span class="fw-600 text-base-color">2010</span>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<span class="text-white fw-500 fs-17">Best Interior of the day</span>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<span class="fw-500">Interior</span>
|
|
</div>
|
|
<div class="col-auto col-md-1 sm-position-absolute right-0px">
|
|
<a href="demo-architecture.html#"><i class="bi bi-arrow-right text-white"></i></a>
|
|
</div>
|
|
</div>
|
|
<div class="row align-items-center pt-25px pb-25px border-bottom border-color-charcoal-grey g-0 position-relative sm-pe-40px">
|
|
<div class="col-md-2">
|
|
<span class="fw-600 text-base-color">2018</span>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<span class="text-white fw-500 fs-17">Best project of the year</span>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<span class="fw-500">Landscape</span>
|
|
</div>
|
|
<div class="col-auto col-md-1 sm-position-absolute right-0px">
|
|
<a href="demo-architecture.html#"><i class="bi bi-arrow-right text-white"></i></a>
|
|
</div>
|
|
</div>
|
|
<div class="row align-items-center pt-25px pb-25px g-0 position-relative sm-pe-40px sm-pb-0">
|
|
<div class="col-md-2">
|
|
<span class="fw-600 text-base-color">2021</span>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<span class="text-white fw-500 fs-17">Best project of the month</span>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<span class="fw-500">Architecture</span>
|
|
</div>
|
|
<div class="col-auto col-md-1 sm-position-absolute right-0px">
|
|
<a href="demo-architecture.html#"><i class="bi bi-arrow-right text-white"></i></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<section class="bg-dark-gray background-position-center-top pb-0" style="background-image: url('images/demo-architecture-dotted-pattern.svg')">
|
|
<div class="container">
|
|
<div class="row mb-8 xs-mb-10 overlap-section">
|
|
<div class="col-12 position-relative">
|
|
<div class="vertical-title-center align-items-center position-absolute top-0px left-15px bg-base-color p-10px xs-p-5px h-270px sm-h-190px z-index-9 w-50px xs-w-40px">
|
|
<div class="title fs-14 ls-2px text-dark-gray fw-700 text-uppercase">Recent projects</div>
|
|
</div>
|
|
<div class="swiper position-relative text-slider-style-04 magic-cursor drag-cursor" data-slider-options="{ "autoHeight": true, "loop": true, "allowTouchMove": true, "autoplay": { "delay": 4000, "disableOnInteraction": false }, "navigation": { "nextEl": ".slider-one-slide-next-1", "prevEl": ".slider-one-slide-prev-1" }, "effect": "fade" }">
|
|
<div class="swiper-wrapper">
|
|
|
|
<div class="swiper-slide">
|
|
<img src="images/demo-architecture-home-08.jpg" alt />
|
|
<div class="container position-absolute sm-position-relative bottom-0 right-0px z-index-1 swiper-slide-content">
|
|
<div class="row justify-content-end align-items-end h-100">
|
|
<div class="col-lg-5 col-md-7 p-0">
|
|
<div class="bg-white p-16 lg-p-12">
|
|
<span class="text-dark-gray fs-15 text-uppercase ls-1px fw-700">Architecture</span>
|
|
<h2 class="alt-font text-dark-gray fw-600 mb-20px ls-minus-2px">Leana cagnotto</h2>
|
|
<p class="w-90 mb-10px">Lorem ipsum is simply dummy text printing and lorem ipsum been.</p>
|
|
<a href="demo-architecture-single-project-gallery.html" class="btn btn-link btn-hover-animation-switch btn-large text-dark-gray fw-800">
|
|
<span>
|
|
<span class="btn-text">Explore project</span>
|
|
<span class="btn-icon"><i class="fa-solid fa-arrow-right fs-14"></i></span>
|
|
<span class="btn-icon"><i class="fa-solid fa-arrow-right fs-14"></i></span>
|
|
</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="swiper-slide">
|
|
<img src="images/demo-architecture-home-09.jpg" alt />
|
|
<div class="container position-absolute sm-position-relative bottom-0 right-0px z-index-1 swiper-slide-content">
|
|
<div class="row justify-content-end align-items-end h-100">
|
|
<div class="col-lg-5 col-md-7 p-0">
|
|
<div class="bg-white p-16 lg-p-12">
|
|
<span class="text-dark-gray fs-15 text-uppercase ls-1px fw-700">Landscape</span>
|
|
<h2 class="alt-font text-dark-gray fw-600 mb-20px ls-minus-2px">Morroco house</h2>
|
|
<p class="w-90 mb-10px">Lorem dummy text ipsum is simply printing and lorem ipsum been.</p>
|
|
<a href="demo-architecture-single-project-gallery.html" class="btn btn-link btn-hover-animation-switch btn-large text-dark-gray fw-800">
|
|
<span>
|
|
<span class="btn-text">Explore project</span>
|
|
<span class="btn-icon"><i class="fa-solid fa-arrow-right fs-14"></i></span>
|
|
<span class="btn-icon"><i class="fa-solid fa-arrow-right fs-14"></i></span>
|
|
</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="swiper-slide">
|
|
<img src="images/demo-architecture-home-10.jpg" alt />
|
|
<div class="container position-absolute sm-position-relative bottom-0 right-0px z-index-1 swiper-slide-content">
|
|
<div class="row justify-content-end align-items-end h-100">
|
|
<div class="col-lg-5 col-md-7 p-0">
|
|
<div class="bg-white p-16 lg-p-12">
|
|
<span class="text-dark-gray fs-15 text-uppercase ls-1px fw-700">Interior</span>
|
|
<h2 class="alt-font text-dark-gray fw-600 mb-20px ls-minus-2px">Melana house</h2>
|
|
<p class="w-90 mb-10px">Lorem ipsum is simply dummy text printing and lorem ipsum been.</p>
|
|
<a href="demo-architecture-single-project-gallery.html" class="btn btn-link btn-hover-animation-switch btn-large text-dark-gray fw-800">
|
|
<span>
|
|
<span class="btn-text">Explore project</span>
|
|
<span class="btn-icon"><i class="fa-solid fa-arrow-right fs-14"></i></span>
|
|
<span class="btn-icon"><i class="fa-solid fa-arrow-right fs-14"></i></span>
|
|
</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="slider-one-slide-prev-1 icon-small swiper-button-prev slider-navigation-style-07 bg-dark-gray text-white box-shadow-small"><i class="bi bi-arrow-down-left"></i></div>
|
|
<div class="slider-one-slide-next-1 icon-small swiper-button-next slider-navigation-style-07 bg-dark-gray text-white box-shadow-small"><i class="bi bi-arrow-up-right"></i></div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row row-cols-2 row-cols-md-4 counter-style-04">
|
|
|
|
<div class="col last-paragraph-no-margin sm-mb-30px text-center">
|
|
<h1 class="vertical-counter d-inline-flex alt-font text-white fw-300 mb-0" data-text="+" data-to="255"></h1>
|
|
<span class="fs-13 text-base-color fw-600 d-block ls-2px text-uppercase">Projects</span>
|
|
</div>
|
|
|
|
|
|
<div class="col last-paragraph-no-margin sm-mb-30px text-center">
|
|
<h1 class="vertical-counter d-inline-flex alt-font text-white fw-300 mb-0" data-text="+" data-to="189"></h1>
|
|
<span class="fs-13 text-base-color fw-600 d-block ls-2px text-uppercase">Clients</span>
|
|
</div>
|
|
|
|
|
|
<div class="col last-paragraph-no-margin text-center">
|
|
<h1 class="vertical-counter d-inline-flex alt-font text-white fw-300 mb-0" data-text="+" data-to="738"></h1>
|
|
<span class="fs-13 text-base-color fw-600 d-block ls-2px text-uppercase">Capture</span>
|
|
</div>
|
|
|
|
|
|
<div class="col last-paragraph-no-margin text-center">
|
|
<h1 class="vertical-counter d-inline-flex alt-font text-white fw-300 mb-0" data-text="+" data-to="626"></h1>
|
|
<span class="fs-13 text-base-color fw-600 d-block ls-2px text-uppercase">Coffee</span>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="row justify-content-center">
|
|
<div class="col-xl-9 col-lg-10 testimonials-style-10 position-relative ps-4 pe-4 swiper-number-pagination-progress" data-anime="{ "translateY": [0, 0], "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 300, "easing": "easeOutQuad" }">
|
|
<div class="swiper magic-cursor pt-9 pb-6" data-slider-options="{"slidesPerView": 1, "loop": true, "keyboard": { "enabled": true, "onlyInViewport": true }, "autoplay": { "delay": 4000, "disableOnInteraction": false }, "pagination": { "el": ".swiper-number-line-pagination", "clickable": true }, "navigation": { "nextEl": ".swiper-button-next-nav", "prevEl": ".swiper-button-previous-nav", "effect": "fade" } }" data-swiper-number-pagination-progress="true">
|
|
<div class="swiper-wrapper">
|
|
|
|
<div class="swiper-slide">
|
|
<div class="d-flex flex-column">
|
|
<div class="align-self-center text-center w-90 last-paragraph-no-margin">
|
|
<h5 class="fw-100 lh-48 alt-font mb-0">Crafto began as a collaborative architectural and landscape workshop, and has remained true to its trans disciplinary way of thinking since its inception <span class="text-base-color">- Herman miller</span></h5>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="swiper-slide">
|
|
<div class="d-flex flex-column">
|
|
<div class="align-self-center text-center w-90 last-paragraph-no-margin">
|
|
<h5 class="fw-100 lh-48 alt-font mb-0">Absolutely amazing theme, flexible and awesome design with possibilities. It's so very easy to use and to customize. Simply the great designs and best theme <span class="text-base-color">- Jonsan donner</span></h5>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="swiper-slide">
|
|
<div class="d-flex flex-column">
|
|
<div class="align-self-center text-center w-90 last-paragraph-no-margin">
|
|
<h5 class="fw-100 lh-48 alt-font mb-0">There are design companies and then there are user experience, design, consulting, interface design. Simply the great designs and best theme for fast loading <span class="text-base-color">- Mackangy rose</span></h5>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="swiper-pagination-wrapper d-flex align-items-center justify-content-center">
|
|
<div class="number-prev fs-15 fw-600"></div>
|
|
<div class="swiper-pagination-progress bg-medium-gray">
|
|
<span class="swiper-progress"></span>
|
|
</div>
|
|
<div class="number-next fs-15 fw-600"></div>
|
|
</div>
|
|
|
|
|
|
<div class="swiper-button-previous-nav swiper-button-prev icon-extra-medium left-0px"><i class="bi bi-arrow-left icon-extra-medium text-white"></i></div>
|
|
<div class="swiper-button-next-nav swiper-button-next icon-extra-medium right-0px"><i class="bi bi-arrow-right icon-extra-medium text-white"></i></div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<section class="half-section bg-dark-gray background-position-center-top overflow-hidden position-relative" style="background-image: url('images/demo-architecture-dotted-pattern.svg')">
|
|
|
|
<div class="fw-600 alt-font fs-180 md-fs-150 sm-fs-130 xs-fs-100 text-charcoal ls-minus-7px md-ls-minus-5px xs-ls-minus-2px text-nowrap text-center mb-20px" data-bottom-top="transform: translate3d(100px, 0px, 0px) scale(1.5, 1.5);" data-top-bottom="transform: translate3d(-200px, 0px, 0px) scale(.7, .7);">
|
|
<span class="text-outline text-outline-color-white opacity-1">we love</span> architecture <span class="text-outline text-outline-color-white opacity-1">and</span> interior design
|
|
</div>
|
|
|
|
<div class="position-absolute right-18 md-right-0 top-minus-50px sm-top-minus-20px sm-w-220px xs-w-190px z-index-9" data-anime="{ "translateY": [0, 0], "scale": [0.8, 1], "opacity": [0,1], "duration": 800, "delay": 200, "staggervalue": 300, "easing": "easeOutQuad" }">
|
|
<img src="images/demo-architecture-home-11.png" class="animation-rotation" alt>
|
|
<div class="absolute-middle-center w-100 z-index-minus-1"><img src="images/demo-architecture-home-12.png" alt></div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<section class="bg-dark-gray background-position-center-top position-relative pt-0" style="background-image: url('images/demo-architecture-dotted-pattern.svg')">
|
|
<div class="container">
|
|
<div class="row align-items-center justify-content-center text-center mb-2 sm-mb-5">
|
|
<div class="col-md-6" 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">Architecture news</span>
|
|
<h4 class="text-white fw-600">Latest articles</h4>
|
|
</div>
|
|
</div>
|
|
<div class="row blog-metro mb-6">
|
|
<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>
|
|
<div class="position-absolute bottom-minus-50px lg-bottom-minus-40px md-bottom-minus-25px sm-bottom-minus-20px xs-bottom-minus-10px left-0px right-0px text-center w-100 fs-200 lg-fs-160 md-fs-140 sm-fs-120 xs-fs-90 fw-600 text-nero-grey ls-minus-4px">architecture</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#157d7079797a5576677473617a3b767a78" class="text-base-color fs-26 fw-500 d-inline-block align-middle"><span class="__cf_email__" data-cfemail="345c5158585b7457465552405b1a575b59">[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#bad3d4dcd5faded5d7dbd3d494d9d5d7" class="text-white fw-500 text-decoration-line-bottom"><span class="__cf_email__" data-cfemail="a0c9cec6cfe0c4cfcdc1c9ce8ec3cfcd">[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.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="revolution/js/jquery.themepunch.tools.min.js"></script>
|
|
<script type="text/javascript" src="revolution/js/jquery.themepunch.revolution.min.js"></script>
|
|
|
|
|
|
|
|
<script type="text/javascript">
|
|
/* https://learn.jquery.com/using-jquery-core/document-ready/ */
|
|
jQuery(document).ready(function () {
|
|
/* initialize the slider based on the Slider's ID attribute from the wrapper above */
|
|
jQuery('#architecture-slider').show().revolution({
|
|
sliderType: "standard",
|
|
/* options are 'auto', 'fullwidth' or 'fullscreen' */
|
|
sliderLayout: 'fullscreen',
|
|
/* sets the Slider's default timeline */
|
|
delay: 9000,
|
|
/* options that disable autoplay */
|
|
stopLoop: "off",
|
|
stopAfterLoops: 0,
|
|
stopAtSlide: 1,
|
|
navigation: {
|
|
keyboardNavigation: "on",
|
|
keyboard_direction: "horizontal",
|
|
mouseScrollNavigation: "off",
|
|
mouseScrollReverse: "default",
|
|
onHoverStop: "off",
|
|
touch: {
|
|
touchenabled: "on",
|
|
touchOnDesktop: "on",
|
|
swipe_threshold: 75,
|
|
swipe_min_touches: 1,
|
|
swipe_direction: "horizontal",
|
|
drag_block_vertical: true
|
|
},
|
|
arrows: {
|
|
|
|
enable: false,
|
|
style: 'ares',
|
|
tmp: '<div class="tp-title-wrap"><span class="tp-arr-titleholder">{{title}}</span></div>',
|
|
rtl: false,
|
|
hide_onleave: false,
|
|
hide_onmobile: true,
|
|
hide_under: 0,
|
|
hide_over: 9999,
|
|
hide_delay: 200,
|
|
hide_delay_mobile: 1200,
|
|
left: {
|
|
container: 'slider',
|
|
h_align: 'left',
|
|
v_align: 'center',
|
|
h_offset: 0,
|
|
v_offset: 0
|
|
},
|
|
right: {
|
|
container: 'slider',
|
|
h_align: 'right',
|
|
v_align: 'center',
|
|
h_offset: 0,
|
|
v_offset: 0
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
responsiveLevels: [1240, 1024, 778, 480],
|
|
/* [DESKTOP, LAPTOP, TABLET, SMARTPHONE] */
|
|
gridwidth: [1190, 1024, 778, 480],
|
|
/* [DESKTOP, LAPTOP, TABLET, SMARTPHONE] */
|
|
gridheight: [900, 920, 700, 650],
|
|
/* Lazy Load options are "all", "smart", "single" and "none" */
|
|
lazyType: "smart",
|
|
spinner: "spinner0",
|
|
parallax: {
|
|
type: "mouse+scroll",
|
|
origo: "enterpoint",
|
|
speed: 400,
|
|
speedbg: 1500,
|
|
speedls: 1000,
|
|
levels: [5, 10, 15, 20, 25, 30, 35, 40, 60, 46, -10, -15, -20, -25, -30, 55],
|
|
}
|
|
,
|
|
shadow: 0,
|
|
shuffle: "off",
|
|
autoHeight: "off",
|
|
fullScreenAutoWidth: "off",
|
|
fullScreenAlignForce: "off",
|
|
fullScreenOffsetContainer: "",
|
|
fullScreenOffset: "",
|
|
disableProgressBar: "on",
|
|
hideThumbsOnMobile: "on",
|
|
hideSliderAtLimit: 0,
|
|
hideCaptionAtLimit: 0,
|
|
hideAllCaptionAtLilmit: 0,
|
|
debugMode: false,
|
|
fallbacks: {
|
|
simplifyAll: "off",
|
|
nextSlideOnWindowFocus: "off",
|
|
disableFocusListener: false,
|
|
}
|
|
}
|
|
);
|
|
});
|
|
|
|
</script>
|
|
<script type="text/javascript" src="js/main.js"></script>
|
|
</body>
|
|
</html> |