CINXE.COM

HabitatSeven | Data driven Web Applications for a Sustainable Planet

<!DOCTYPE html> <html lang="en-US" class="is-locked"> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> <link rel="profile" href="https://gmpg.org/xfn/11"> <link rel="pingback" href="xmlrpc.php"> <title> HabitatSeven | Data driven Web Applications for a Sustainable Planet </title> <link rel="apple-touch-icon" sizes="180x180" href="/resources/favicon/apple-touch-icon.png"> <link rel="icon" type="image/png" sizes="32x32" href="/resources/favicon/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/resources/favicon/favicon-16x16.png"> <link rel="manifest" href="/resources/favicon/site.webmanifest.txt"> <link rel="mask-icon" href="/resources/favicon/safari-pinned-tab.svg" color="#5bbad5"> <meta name="msapplication-TileColor" content="#ffffff"> <meta name="theme-color" content="#ffffff"> <!-- Google Tag Manager --> <script>(function (w, d, s, l, i) { w[l] = w[l] || []; w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' }); var f = d.getElementsByTagName(s)[0], j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f); })(window, document, 'script', 'dataLayer', 'GTM-56TQSRF');</script> <!-- End Google Tag Manager --> <meta name="description" content="HabitatSeven helps organizations develop web-based data applications for a more secure, sustainable future."/> <link rel="canonical" href=""/> <meta property="og:locale" content="en_US"/> <meta property="og:type" content="website"/> <meta property="og:title" content="HabitatSeven | Data driven Web Applications for a Sustainable Planet."/> <meta property="og:description" content="HabitatSeven helps organizations develop web-based data applications for a more secure, sustainable future."/> <meta property="og:url" content=""/> <meta property="og:site_name" content="HabitatSeven"/> <meta property="og:image" content="/resources/images/share-1024x538.png"/> <meta property="og:image:secure_url" content="/resources/images/share-1024x538.png"/> <meta property="og:image:width" content="1024"/> <meta property="og:image:height" content="538"/> <meta name="twitter:card" content="summary_large_image"/> <meta name="twitter:description" content="HabitatSeven helps organizations develop web-based data applications for a more secure, sustainable future."/> <meta name="twitter:title" content="HabitatSeven | Data driven Web Applications for a Sustainable Planet"/> <meta name="twitter:site" content="@HabitatSeven_"/> <meta name="twitter:image" content="/resources/images/share-1024x538.png"/> <meta name="twitter:creator" content="@HabitatSeven_"/> <link rel='dns-prefetch' href='https://www.google.com'/> <link rel='dns-prefetch' href='https://s.w.org'/> <link rel="stylesheet" href="/resources/css/screen.css" media="all"/> <link rel='https://api.w.org/' href='wp-json/index.json'/> <link rel="EditURI" type="application/rsd+xml" title="RSD" href="xmlrpc.php-rsd.xml"/> <link rel="wlwmanifest" type="application/wlwmanifest+xml" href="wp-includes/wlwmanifest.xml"/> <link rel='shortlink' href=''/> </head> <body data-rsssl=1 class="home page-template page-template-page-templates page-template-home page-template-page-templateshome-php page page-id-2 is-desktop"> <!-- Google Tag Manager (noscript) --> <noscript> <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-56TQSRF" height="0" width="0" style="display:none;visibility:hidden"></iframe> </noscript> <!-- End Google Tag Manager (noscript) --> <!-- <script> const apiUrl = 'wp-json/api/v1'; </script> --> <div class="c-main-loader js-main-loader" style="background-color: #f0f4f3;"> <div class="c-main-loader__logo js-main-loader-logo"> <span class="js-main-loader-logo"> <img src="/resources/images/h7-logo-dark.svg" alt="HabitatSeven"> </span> </div> <div class="c-main-loader__container js-main-loader-container"> <i class="c-main-loader__image js-main-loader-image" style="background-image: url('resources/images/theprocess-01.jpg');"></i> <i class="c-main-loader__image js-main-loader-image" style="background-image: url('resources/images/theprocess-02.jpg');"></i> <i class="c-main-loader__image js-main-loader-image" style="background-image: url('resources/images/theprocess-03.jpg');"></i> <i class="c-main-loader__image js-main-loader-image" style="background-image: url('resources/images/theprocess-04.jpg');"></i> <i class="c-main-loader__image js-main-loader-image" style="background-image: url('resources/images/theprocess-05.jpg');"></i> <i class="c-main-loader__image js-main-loader-image" style="background-image: url('resources/images/theprocess-06.jpg');"></i> <i class="c-main-loader__image js-main-loader-image" style="background-image: url('resources/images/thetechnology-01.jpg');"></i> <i class="c-main-loader__image js-main-loader-image" style="background-image: url('resources/images/thetechnology-02.jpg');"></i> </div> <i class="c-main-loader__curtain js-main-loader-curtain"></i> </div> <div class="c-page-transitions js-page-transitions"></div> <div class="c-work-transitions js-work-transition-layer"></div> <div class="c-navigation js-navigation"> <div class="c-navigation__menu js-menu"> <div class="c-navigation__logo js-navigation-logo"> <a href="/index.php" class="js-navigation-link" data-item="2"> <img src="/resources/images/h7-logo-dark.svg" alt="HabitatSeven"> </a> </div> <div class="c-navigation__menu-left"> <div class="navigation-links-wrapper"> <div class="navigation-links-wrapper__inner"> <ul class="navigation-links navigation-links--top"> <li class="navigation-links__item js-navigation-item"> <a data-item="homepage" href="/index.php" class="c-button c-button--text c-button--large js-navigation-link "> <span> Home </span> </a> </li> <li class="navigation-links__item js-navigation-item"> <a data-item="theprocess" href="/theprocess/" class="c-button c-button--text c-button--large js-navigation-link"> <span> Our Process </span> </a> </li> <li class="navigation-links__item js-navigation-item"> <a data-item="thework" href="/thework/" class="c-button c-button--text c-button--large js-navigation-link"> <span> Our Work </span> </a> </li> <li class="navigation-links__item js-navigation-item"> <a data-item="thetechnology" href="/thetechnology/" class="c-button c-button--text c-button--large js-navigation-link"> <span> Emerging Technology </span> </a> </li> </ul> <!-- <ul class="navigation-links navigation-links--bottom"> <li class="navigation-links__item js-navigation-item"> <a data-item="28" href="contact/" class="c-button c-button--text js-navigation-link js-start-a-project c-button--icon"> <span> <svg class="icon icon-mail"> <use xlink:href="/resources/images/symbol-defs.svg?#icon-mail"></use> </svg> </span> </a> </li> </ul>--> </div> </div> <ul class="c-contact-info c-contact-info--small"> <!-- <li class="c-contact-info__item js-navigation-contact-info"> <span class="u-b6"> t: </span> <a class="c-button c-button--text c-button--small" href="tel:+1 613 796 3554"> <span> +1 613 796 3554 </span> </a> </li> --> <li class="c-contact-info__item js-navigation-contact-info"> <span class="u-b6"> m: </span> <a class="c-button c-button--text c-button--bordered c-button--small" href="mailto:hello@HabitatSeven.com"> <span>hello@HabitatSeven.com</span> </a> </li> </ul> </div> <i class="c-menu-bg__cover js-menu-bg-cover"></i> </div> </div> <div id="barba-wrapper"> <div class="barba-container js-init-color" data-menu-item="homepage" data-init-color="#0d0d0d" data-namespace="homepage"> <div class="c-clip-element c-clip-element--logo js-clip-element "> <div class="c-logo c-logo--navigation js-menu-stage"> <a href="#" class="js-home js-exit-enter-el" data-item="2"> <i class="habitatseven habitatseven--dark"> <img src="/resources/images/h7-sign-dark.svg" alt=""> </i> <i class="habitatseven habitatseven--light"> <img src="/resources/images/h7-sign-light.svg" alt=""> </i> </a> </div> </div> <div class="c-clip-element c-clip-element--menu-trigger js-clip-element"> <div class="c-menu-trigger js-menu-trigger js-exit-enter-el"> <i class="c-menu-trigger__bar c-menu-trigger__bar--top"></i> <i class="c-menu-trigger__bar c-menu-trigger__bar--middle"></i> <i class="c-menu-trigger__bar c-menu-trigger__bar--bottom"></i> </div> </div> <div class="c-clip-element c-clip-element--email js-clip-element"> <div class="c-navigation-email js-menu-stage"> <a class="u-b6 js-exit-enter-el" href="mailto:hello@HabitatSeven.com">hello@HabitatSeven.com</a> </div> </div> <div class="c-secondary-navigation js-clip-element"> <div class="c-secondary-navigation__left js-exit-enter-el"> </div> <div class="c-secondary-navigation__right js-exit-enter-el"> <div class="careers_button"> <a href="/careers">Careers</a> </div> <a href="contact/" class="c-button c-button--primary js-secondary-nav-cta"> <span> <!-- Start a project --> <svg class="icon icon-mail"> <use xlink:href="/resources/images/symbol-defs.svg?#icon-mail"></use> </svg> </span> </a> </div> </div> <div class="o-page-wrapper o-page-wrapper--homepage js-page-wrapper" id="page-wrapper"> <header class="c-header c-header--home u-clearfix" data-navigation-color="is-black"> <div class="o-container"> <div class="c-header__heading"> <h1 class="u-a7 u-a7--fluid js-animation-stage-title"> Data-driven applications for a safe, sustainable planet. </h1> </div> <div class="c-header__intro c-header__intro--home"> <div class="c-header__intro-column"> <p class="u-b2 js-animation-stage-element"> HabitatSeven helps organizations develop web-based data applications for a more secure, sustainable future. </p> </div> </div> <div class="c-header-buttons js-animation-stage-element"> <a href="/theprocess/" class="c-button c-button--primary"> <span> Our Process </span> </a> <a href="/thework/" class="c-button c-button--primary"> <span> Our Work </span> </a> <a href="/thetechnology/" class="c-button c-button--primary"> <span> Emerging Technology</span> </a> </div> </div> <span class="c-header__home-arrow js-animation-stage-element" data-scroll-to="on" data-scroll-to-target=".js-home-arrow-target"> <svg class="icon icon-arrow-right"> <use xlink:href="/resources/images/symbol-defs.svg?#icon-arrow-right"></use> </svg> </span> </header> <section class="o-section o-section--strategic-sessions o-section--strategic-sessions-home u-clearfix js-home-arrow-target" data-navigation-color="is-black"> <div class="o-container"> <div class="strategic-sessions"> <div class="strategic-sessions__left"> <article class="c-article"> <h4 class="u-a4" data-animation-set='{"opacity":"0", "y":"50%", "skewY":"-1.5deg"}' data-animation='{"opacity":"1", "y":"0%", "skewY":"0deg", "ease":"Expo.easeOut"}' data-animation-duration="1.2" data-animation-trigger="0.85"> We build applications to make change. </h4> <p class="u-b2" data-animation-set='{"opacity":"0", "y":"50%", "skewY":"-2.5deg"}' data-animation='{"opacity":"1", "y":"0%", "skewY":"0deg", "ease":"Expo.easeOut"}' data-animation-duration="1.2" data-animation-trigger="0.85"> We are facing some of the world鈥檚 most challenging issues. We support mission driven organizations to face these challenges through the application of emerging technologies. </p> <a href="theprocess/" class="c-button c-button--text c-button--bordered"> <span> Work with us.</span> </a> <div data-animation-set='{"opacity":"0", "y":"50%", "skewY":"-2.5deg"}' data-animation='{"opacity":"1", "y":"0%", "skewY":"0deg", "ease":"Expo.easeOut"}' data-animation-duration="1.2" data-animation-trigger="0.85"> </div> </article> </div> <div class="strategic-sessions__right"> <figure class="o-media-wrapper o-media-wrapper--1-2" data-parallax data-parallax-speed="1"> <i class="o-media-wrapper__mask" data-animation-set='{"x":"0"}' data-animation='{"x":"100%", "ease":"Expo.easeInOut"}' data-animation-duration="0.8" data-animation-trigger="0.5" data-animation-reverse="true"></i> <picture> <img class="lazyload" src="/resources/images/client-logos.png" alt="Clients make us swoon"> </picture> </figure> </div> </div> </div> </section> <section class="o-section o-section--featured-work u-clearfix" data-navigation-color="is-black"> <div class="o-container no-left-padding"> <div class="c-featured-work u-clearfix"> <ul class="c-featured-work__list js-featured-work-list"> <li class="c-featured-work__list-item js-featured-work-item js-featured-work-stage-out"> <div class="c-featured-work__content js-featured-work-stage-out"> <!--<h2 class="u-a6" data-animation-set='{"opacity":"0", "y":"50%", "skewY":"-2.5deg"}' data-animation='{"opacity":"1", "y":"0%", "skewY":"0deg", "ease":"Expo.easeOut"}' data-animation-duration="1.2" data-animation-trigger="0.85"> Our work </h2> <a href="work/digital-assets-power-play/" class=" js-featured-work-link" data-work-color="#3d75f6" data-animation-set='{"opacity":"0", "y":"50%", "skewY":"-2.5deg"}' data-animation='{"opacity":"1", "y":"0%", "skewY":"0deg", "ease":"Expo.easeOut"}' data-animation-duration="1.2" data-animation-trigger="0.85"> --> <a href="/thework/climatedata/" class=" js-featured-work-link" data-work-color="#3d75f6" data-animation-set='{"opacity":"0", "y":"50%", "skewY":"-2.5deg"}' data-animation='{"opacity":"1", "y":"0%", "skewY":"0deg", "ease":"Expo.easeOut"}' data-animation-duration="1.2" data-animation-trigger="0.85"> <span class="u-b6">01</span><br> <img class="lazyload client-logo" src="/resources/images/Environment_and_Climate_Change_Canada_logo.svg" alt="Environment and Climate Change Canada"> <h4 style="color: #3d75f6" class="u-a1 client-name">/ ClimateData.ca </h4> <h3 class="u-a4"> Resilience relies on data. In high resolution. </h3> <p class="u-b4"> <strong>Applied Emerging Technology</strong> <br> Geospatial | Big Data </p> <p class="u-b4"> <strong>Project<br> Partners</strong> <br> Environment and Climate Change Canada </p> <p class="u-b4 goals"> <strong>Applicable Sustainable Development Goals</strong> <br> Climate Action </p> <span class="c-button c-button--text">View case study</span> </a> <!-- RESPONSIVE IMAGE --> <div class="mobile-preview" data-animation-set='{"opacity":"0", "y":"50%", "skewY":"-2.5deg"}' data-animation='{"opacity":"1", "y":"0%", "skewY":"0deg", "ease":"Expo.easeOut"}' data-animation-duration="1.2" data-animation-trigger="0.85" data-navigation-color="is-white"> <img src="resources/images/featured/climatedata-preview.jpg"> </div> <!-- END IMAGE --> </div> </li> <li class="c-featured-work__list-item js-featured-work-item js-featured-work-stage-out"> <div class="c-featured-work__content js-featured-work-stage-out"> <a href="/thework/bbc/" class=" js-featured-work-link" data-work-color="#ee3033" data-animation-set='{"opacity":"0", "y":"50%", "skewY":"-2.5deg"}' data-animation='{"opacity":"1", "y":"0%", "skewY":"0deg", "ease":"Expo.easeOut"}' data-animation-duration="1.2" data-animation-trigger="0.85"> <span class="u-b6">02</span><br> <img class="lazyload client-logo" src="/resources/images/BBC_logo.svg" alt="BBC"> <h4 style="color: #ee3033" class="u-a1 client-name">/ BBC Action Media </h4> <h3 class="u-a4"> Media makes change. Critical insights depend on it. </h3> <p class="u-b4"> <strong>Applied Emerging Technology</strong> <br> Qualitative Data Visualizations </p> <p class="u-b4"> <strong>Project<br> Partners</strong> <br> British Broadcasting Corporation </p> <p class="u-b4 goals"> <strong>Applicable Sustainable Development Goals</strong> <br> Climate Action | Clean Water & Sanitation</p> <span class="c-button c-button--text">View case study</span> <!-- RESPONSIVE IMAGE --> <div class="mobile-preview" data-animation-set='{"opacity":"0", "y":"50%", "skewY":"-2.5deg"}' data-animation='{"opacity":"1", "y":"0%", "skewY":"0deg", "ease":"Expo.easeOut"}' data-animation-duration="1.2" data-animation-trigger="0.85" data-navigation-color="is-white"> <img src="resources/images/featured/bbc-preview.jpg"> </div> <!-- END IMAGE --> </a> </div> </li> <li class="c-featured-work__list-item js-featured-work-item js-featured-work-stage-out"> <div class="c-featured-work__content js-featured-work-stage-out"> <a href="/thework/newclimateeconomy/" class=" js-featured-work-link" data-work-color="#41454d" data-animation-set='{"opacity":"0", "y":"50%", "skewY":"-2.5deg"}' data-animation='{"opacity":"1", "y":"0%", "skewY":"0deg", "ease":"Expo.easeOut"}' data-animation-duration="1.2" data-animation-trigger="0.85"> <span class="u-b6">03</span><br> <img class="lazyload client-logo" src="/resources/images/WRI_logo.svg" alt="BBC"> <h4 style="color: #41454d" class="u-a1 client-name">/ New Climate Economy </h4> <h3 class="u-a4"> Global opportunity meets sustainable future. </h3> <p class="u-b4"> <strong>Applied Emerging Technology</strong> <br> Integrated Social Media </p> <p class="u-b4"> <strong>Project<br> Partners</strong> <br> World Resources Institute </p> <p class="u-b4 goals"> <strong>Applicable Sustainable Development Goals</strong> <br> Climate Action | Life on Land</p> <span class="c-button c-button--text">View case study</span> <!-- RESPONSIVE IMAGE --> <div class="mobile-preview" data-animation-set='{"opacity":"0", "y":"50%", "skewY":"-2.5deg"}' data-animation='{"opacity":"1", "y":"0%", "skewY":"0deg", "ease":"Expo.easeOut"}' data-animation-duration="1.2" data-animation-trigger="0.85" data-navigation-color="is-white"> <img src="resources/images/featured/newclimateeconomy-preview.jpg"> </div> <!-- END IMAGE --> </a> </div> </li> <li class="c-featured-work__list-item js-featured-work-item js-featured-work-stage-out"> <div class="c-featured-work__content js-featured-work-stage-out"> <a href="/thework/ulsafetyindex/" class=" js-featured-work-link" data-work-color="#87001a" data-animation-set='{"opacity":"0", "y":"50%", "skewY":"-2.5deg"}' data-animation='{"opacity":"1", "y":"0%", "skewY":"0deg", "ease":"Expo.easeOut"}' data-animation-duration="1.2" data-animation-trigger="0.85"> <span class="u-b6">04</span><br> <img class="lazyload client-logo" src="/resources/images/ul_logo.svg" alt="UL"> <h4 style="color: #87001a" class="u-a1 client-name">/ UL Safety Index </h4> <h3 class="u-a4"> Big data? Meet big action. </h3> <p class="u-b4"> <strong>Applied Emerging Technology</strong> <br> Geospatial </p> <p class="u-b4"> <strong>Project<br> Partners</strong> <br> Underwriters Laboratories </p> <p class="u-b4 goals"> <strong>Applicable Sustainable Development Goals</strong> <br> Reduced Inequalities</p> <span class="c-button c-button--text">View case study</span> <!-- RESPONSIVE IMAGE --> <div class="mobile-preview" data-animation-set='{"opacity":"0", "y":"50%", "skewY":"-2.5deg"}' data-animation='{"opacity":"1", "y":"0%", "skewY":"0deg", "ease":"Expo.easeOut"}' data-animation-duration="1.2" data-animation-trigger="0.85" data-navigation-color="is-white"> <img src="resources/images/featured/ulsafetyindex-preview.jpg"> </div> <!-- END IMAGE --> </a> </div> </li> <li class="c-featured-work__list-item js-featured-work-item js-featured-work-stage-out"> <div class="c-featured-work__content js-featured-work-stage-out"> <a href="/thework/riskybusiness/" class=" js-featured-work-link" data-work-color="#2ea9ac" data-animation-set='{"opacity":"0", "y":"50%", "skewY":"-2.5deg"}' data-animation='{"opacity":"1", "y":"0%", "skewY":"0deg", "ease":"Expo.easeOut"}' data-animation-duration="1.2" data-animation-trigger="0.85"> <span class="u-b6">05</span><br> <img class="lazyload client-logo" src="/resources/images/bloomberg_logo.svg" alt="Bloomberg"> <h4 style="color: #2ea9ac" class="u-a1 client-name">/ Risky Business </h4> <h3 class="u-a4"> Climate risk is economic risk. And opportunity. </h3> <p class="u-b4"> <strong>Applied Emerging Technology</strong> <br> Integrated Social Media </p> <p class="u-b4"> <strong>Project<br> Partners</strong> <br> Bloomberg's Risky Business </p> <p class="u-b4 goals"> <strong>Applicable Sustainable Development Goals</strong> <br> Climate Action | Sustainable Cities and Communities </p> <span class="c-button c-button--text">View case study</span> <!-- RESPONSIVE IMAGE --> <div class="mobile-preview" data-animation-set='{"opacity":"0", "y":"50%", "skewY":"-2.5deg"}' data-animation='{"opacity":"1", "y":"0%", "skewY":"0deg", "ease":"Expo.easeOut"}' data-animation-duration="1.2" data-animation-trigger="0.85" data-navigation-color="is-white"> <img src="resources/images/featured/riskybusiness-preview.jpg"> </div> <!-- END IMAGE --> </a> </div> </li> </ul> <div class="c-featured-work__preview js-featured-work-preview"> <i class="c-featured-work__preview-mask" data-animation-set='{"x":"0"}' data-animation='{"x":"100%", "ease":"Expo.easeInOut"}' data-animation-duration="0.8" data-animation-trigger="0.5" data-animation-reverse="true"></i> <div class="c-featured-work__preview-inner js-featured-work-preview-list"> <i class="c-featured-work__preview-bg js-featured-work-preview-bg" style="background-color: #3d75f6;"></i> <ul class="c-featured-work__preview-list js-preview-list" data-animation-set='{"opacity":"0"}' data-animation='{"opacity":"1", "ease":"Expo.easeInOut"}' data-animation-duration="0.4" data-animation-trigger="0.2" data-animation-reverse="true"> <li class="c-featured-work__preview-list-item js-featured-work-preview-item" data-next-bg-color="#ee3033"> <div class="c-featured-work__preview-image" style="background-image: url('resources/images/featured/climatedata-slider-top.png');"></div> </li> <li class="c-featured-work__preview-list-item js-featured-work-preview-item" data-next-bg-color="#41454d"> <div class="c-featured-work__preview-image" style="background-image: url('resources/images/featured/bbc-slider-top.png');"></div> </li> <li class="c-featured-work__preview-list-item js-featured-work-preview-item" data-next-bg-color="#87001a"> <div class="c-featured-work__preview-image" style="background-image: url('resources/images/featured/newclimateeconomy-slider-top.png');"></div> </li> <li class="c-featured-work__preview-list-item js-featured-work-preview-item" data-next-bg-color="#2ea9ac"> <div class="c-featured-work__preview-image" style="background-image: url('resources/images/featured/ulsafetyindex-slider-top.png');"></div> </li> <li class="c-featured-work__preview-list-item js-featured-work-preview-item" data-next-bg-color="#2ea9ac"> <div class="c-featured-work__preview-image" style="background-image: url('resources/images/featured/riskybusiness-slider-top.png');"></div> </li> </ul> <ul class="c-featured-work__preview-list c-featured-work__preview-list--alt js-preview-list" data-animation-set='{"opacity":"0"}' data-animation='{"opacity":"1", "delay":"0.1", "ease":"Expo.easeInOut"}' data-animation-duration="0.4" data-animation-trigger="0.2" data-animation-reverse="true"> <li class="c-featured-work__preview-list-item"> <div class="c-featured-work__preview-image c-featured-work__preview-image--alt" style="background-image: url('resources/images/featured/blank-slider-top.png');"></div> </li> <li class="c-featured-work__preview-list-item"> <div class="c-featured-work__preview-image c-featured-work__preview-image--alt" style="background-image: url('resources/images/featured/blank-slider-top.png');"></div> </li> <li class="c-featured-work__preview-list-item"> <div class="c-featured-work__preview-image c-featured-work__preview-image--alt" style="background-image: url('resources/images/featured/newclimateeconomy-slider-bottom.png');"></div> </li> <li class="c-featured-work__preview-list-item"> <div class="c-featured-work__preview-image c-featured-work__preview-image--alt" style="background-image: url('resources/images/featured/ulsafetyindex-slider-bottom.png');"></div> </li> <li class="c-featured-work__preview-list-item"> <div class="c-featured-work__preview-image c-featured-work__preview-image--alt" style="background-image: url('resources/images/featured/riskybusiness-slider-bottom.png');"></div> </li> </ul> </div> </div> </div> </div> </section> <!-- <section class="o-section o-section--home-intro u-clearfix"> <div class="o-container"> <div class="home-intro-heading"> <span class="u-b6" data-animation-set='{"opacity":"0", "y":"50%", "skewY":"-2.5deg"}' data-animation='{"opacity":"1", "y":"0%", "skewY":"0deg", "ease":"Expo.easeOut"}' data-animation-duration="1.2" data-animation-trigger="0.85"> What we do </span> <p class="u-a4" data-animation-set='{"opacity":"0", "y":"50%", "skewY":"-1.5deg"}' data-animation='{"opacity":"1", "y":"0%", "skewY":"0deg", "ease":"Expo.easeOut"}' data-animation-duration="1.2" data-animation-trigger="0.85"> We鈥檙e technologists and entrepreneurs, so we understand both the technical and business challenges of creating digital products. </p> </div> <div class="home-intro "> <div class="home-intro__left"> <div class="c-what-we-do"> <ul class="c-what-we-do__list"> <li class="c-what-we-do__item"> <span class="c-what-we-do__item-number u-b6" data-animation-set='{"opacity":"0"}' data-animation='{"opacity":"1", "delay":"0.2", "ease":"Expo.easeOut"}' data-animation-duration="1.2" data-animation-trigger="0.85"> 01 </span> <h3 class="c-what-we-do__item-title u-a6" data-animation-set='{"opacity":"0", "y":"50%", "skewY":"-1.5deg"}' data-animation='{"opacity":"1", "y":"0%", "skewY":"0deg", "ease":"Expo.easeOut"}' data-animation-duration="1.2" data-animation-trigger="0.85"> Strategy </h3> </li> <li class="c-what-we-do__item"> <span class="c-what-we-do__item-number u-b6" data-animation-set='{"opacity":"0"}' data-animation='{"opacity":"1", "delay":"0.2", "ease":"Expo.easeOut"}' data-animation-duration="1.2" data-animation-trigger="0.85"> 02 </span> <h3 class="c-what-we-do__item-title u-a6" data-animation-set='{"opacity":"0", "y":"50%", "skewY":"-1.5deg"}' data-animation='{"opacity":"1", "y":"0%", "skewY":"0deg", "ease":"Expo.easeOut"}' data-animation-duration="1.2" data-animation-trigger="0.85"> Design </h3> </li> <li class="c-what-we-do__item"> <span class="c-what-we-do__item-number u-b6" data-animation-set='{"opacity":"0"}' data-animation='{"opacity":"1", "delay":"0.2", "ease":"Expo.easeOut"}' data-animation-duration="1.2" data-animation-trigger="0.85"> 03 </span> <h3 class="c-what-we-do__item-title u-a6" data-animation-set='{"opacity":"0", "y":"50%", "skewY":"-1.5deg"}' data-animation='{"opacity":"1", "y":"0%", "skewY":"0deg", "ease":"Expo.easeOut"}' data-animation-duration="1.2" data-animation-trigger="0.85"> Development </h3> </li> </ul> <p class="u-b2" data-animation-set='{"opacity":"0", "y":"50%", "skewY":"-2.5deg"}' data-animation='{"opacity":"1", "y":"0%", "skewY":"0deg", "ease":"Expo.easeOut"}' data-animation-duration="1.2" data-animation-trigger="0.85"> Whatever the challenge, we always deliver a solution. </p> <div data-animation-set='{"opacity":"0", "y":"50%", "skewY":"-2.5deg"}' data-animation='{"opacity":"1", "y":"0%", "skewY":"0deg", "ease":"Expo.easeOut"}' data-animation-duration="1.2" data-animation-trigger="0.85"> <a href="services/" class="c-button c-button--text c-button--bordered"> <span> See what we do </span> </a> </div> </div> </div> <div class="home-intro__right"> <figure class="o-media-wrapper o-media-wrapper--1-2" data-parallax data-parallax-speed="1"> <i class="o-media-wrapper__mask" data-animation-set='{"x":"0"}' data-animation='{"x":"100%", "ease":"Expo.easeInOut"}' data-animation-duration="0.8" data-animation-trigger="0.5" data-animation-reverse="true"></i> <video class="c-video" muted autoplay loop playsinline poster="wp-content/themes/bf/static/video/HabitatSeven-video-poster-LG.jpg" src="wp-content/themes/bf/static/video/HabitatSeven-video-LG.mp4" type="video/mp4"> </video> </figure> </div> </div> </div> </section> --> <section class="o-section o-section--related-content u-clearfix"> <div class="o-container"> <div class="c-related-content"> <div class="c-related-content__top"> <h3 class="u-a6" data-animation-set='{"opacity":"0", "y":"50%", "skewY":"-1.5deg"}' data-animation='{"opacity":"1", "y":"0%", "skewY":"0deg", "ease":"Expo.easeOut"}' data-animation-duration="1.2" data-animation-trigger="0.85"> Featured </h3> <div class="c-related-content__link-wrapper" data-animation-set='{"opacity":"0", "y":"50%", "skewY":"-2.5deg"}' data-animation='{"opacity":"1", "y":"0%", "skewY":"0deg", "delay":"0.1", "ease":"Expo.easeOut"}' data-animation-duration="1.2" data-animation-trigger="0.85"> <!-- <a href="blog/" class="c-button c-button--text c-button--bordered"> <span> Read more posts </span> </a> --> </div> </div> <div class="c-related-content__bottom"> <div class="c-article-list c-article-list--2"> <a href="http://education.ul.org" target="_blank" class="c-article js-post-item"> <div class="c-article__image"> <figure class="o-media-wrapper o-media-wrapper--4-3 js-image-wrapper" data-animation-delay="0"> <i class="o-media-wrapper__mask js-image-mask"></i> <picture class=""> <img class="js-image" src="/resources/images/featured/uleducation-preview.jpg" alt=""> </picture> </figure> </div> <div class="c-article__caption"> <div class="caption"> <div class="caption__header u-b6"> <span class="caption__category">Brand & Development</span> <span class="caption__date">March 29, 2019</span> </div> <div class="caption__content"> <h4 class="u-a1"> UL Education launches content portal. </h4> </div> </div> </div> </a> <a href="/thework/climatedata/" class="c-article js-post-item"> <div class="c-article__image"> <figure class="o-media-wrapper o-media-wrapper--4-3 js-image-wrapper" data-animation-delay="0.2"> <i class="o-media-wrapper__mask js-image-mask"></i> <picture class=""> <img class="js-image" src="/resources/images/featured/climatedata-preview.jpg" alt=""> </picture> </figure> </div> <div class="c-article__caption"> <div class="caption"> <div class="caption__header u-b6"> <span class="caption__category">Data and Mapping</span> <span class="caption__date">Aug 15, 2019</span> </div> <div class="caption__content"> <h4 class="u-a1"> Official ClimateData.ca launch in Montreal, Canada </h4> </div> </div> </div> </a> </div> </div> </div> </div> </section> <section class="o-section o-section--cta u-clearfix"> <div class="o-container"> <div class="c-cta"> <div class="c-cta__left"> <div class="c-cta__images-container js-cta-image-container" data-parallax data-parallax-speed="1"> <i class="c-cta__images-container-mask" data-animation-set='{"x":"0"}' data-animation='{"x":"100%", "ease":"Expo.easeInOut"}' data-animation-duration="0.8" data-animation-trigger="0.75" data-animation-reverse="true"></i> <figure class="o-media-wrapper o-media-wrapper--1-1"> <img src="../resources/images/h7-contact-02.jpg" alt=""> </figure> <figure class="o-media-wrapper o-media-wrapper--1-1 js-cta-image"> <img src="../resources/images/h7-contact-03.jpg" alt=""> </figure> <figure class="o-media-wrapper o-media-wrapper--1-1 js-cta-image"> <img src="../resources/images/h7-contact-04.jpg" alt=""> </figure> <figure class="o-media-wrapper o-media-wrapper--1-1 js-cta-image"> <img src="../resources/images/h7-contact-05.jpg" alt=""> </figure> <figure class="o-media-wrapper o-media-wrapper--1-1 js-cta-image"> <img src="../resources/images/h7-contact-01.jpg" alt=""> </figure> </div> </div> <div class="c-cta__right"> <h3 class="u-a6" data-animation-set='{"opacity":"0", "y":"50%", "skewY":"-1.5deg"}' data-animation='{"opacity":"1", "y":"0%", "skewY":"0deg", "ease":"Expo.easeOut"}' data-animation-duration="1.2" data-animation-trigger="0.85"> Interested <span>in digging</span> deeper? </h3> <div data-animation-set='{"opacity":"0", "y":"50%", "skewY":"-2.5deg"}' data-animation='{"opacity":"1", "y":"0%", "skewY":"0deg", "ease":"Expo.easeOut"}' data-animation-duration="1.2" data-animation-trigger="0.85"> <a href="../contact/" class="c-button c-button--text c-button--bordered js-cta-trigger"> <span> Discuss your project with us </span> </a> </div> </div> </div> </div> </section> <div class="c-footer-wrapper js-footer" data-navigation-color="is-white"> <footer class="c-footer c-footer--bottom u-clearfix"> <div class="o-container"> <div class="c-footer__bottom"> <div class="footer-column footer-column--left"> <ul class="c-footer-links u-clearfix" data-animation-set='{"opacity":"0", "y":"50%", "skewY":"-2.5deg"}' data-animation='{"opacity":"1", "y":"0%", "skewY":"0deg", "ease":"Expo.easeOut"}' data-animation-duration="1.2" data-animation-trigger="0.85"> <li class="c-footer-links__item"> <a href="/index.php" class="c-button c-button--text c-button--small c-button--bordered"> <span> Home </span> </a> </li> <li class="c-footer-links__item"> <a href="/theprocess/" class="c-button c-button--text c-button--small c-button--bordered"> <span> Our Process </span> </a> </li> <li class="c-footer-links__item"> <a href="/thework/" class="c-button c-button--text c-button--small c-button--bordered"> <span> Our Work </span> </a> </li> <li class="c-footer-links__item"> <a href="/thetechnology/" class="c-button c-button--text c-button--small c-button--bordered"> <span> Emerging Technology </span> </a> </li> <li class="c-footer-links__item"> <a href="/careers/" class="c-button c-button--text c-button--small c-button--bordered"> <span> Careers</span> </a> </li> <li class="c-footer-links__item"> <a href="/contact/" class="c-button c-button--text c-button--small c-button--bordered"> <span> Contact</span> </a> </li> </ul> </div> <div class="footer-column footer-column--right"> <article class="c-footer__article"> <div class="c-main-loader__logo js-main-loader-logo"> <span class="js-main-loader-logo"> <img src="/resources/images/h7-logo-dark.svg" alt="HabitatSeven"> </span> </div> <ul class="c-contact-info"> <!-- <li class="c-contact-info__item"> <span class="u-b6"> t: </span> <a class="c-button c-button--small" href="tel: +1 613 796 3554"> <span> +16137963554 </span> </a> </li> --> <li class="c-contact-info__item"> <!-- <span class="u-b6"> m: </span> --> <a class="c-button c-button--text c-button--bordered c-button--small" href="mailto:hello@HabitatSeven.com"> <span><span class="green">hello</span>@HabitatSeven.com</span> </a> </li> </ul> </article> </div> </div> <div class="c-footer__bar"> <div class="footer-column footer-column--left"", "y":"50%", "skewY":"-2.5deg"}' data-animation='{"opacity":"1", "y":"0%", "skewY":"0deg", "ease":"Expo.easeOut"}' data-animation-duration="1.2" data-animation-trigger="1"> <p class="u-b4">漏 HabitatSeven. All rights reserved 2024</p> </div> <div class="footer-column"> <a href="/privacy-policy/" class="c-button c-button--text c-button--small c-button--bordered"> <span>Privacy Policy</span> </a> </div> </div> </div> </footer> </div> </div> </div> </div> <script src="/resources/js/kitchensink.js"></script> <script src="/resources/js/functionsahoy.js"></script> <script src="/resources/js/jqueryrules.js"></script> </body> </html>

Pages: 1 2 3 4 5 6 7 8 9 10