Features
Decorate your website with SVG graphics and other features with support for interactivity and animation.
Overview
Some contents/blocks are not properly rendered in the Docs page due to smaller content. However, the design will be properly adjusted in the full-sized container.
Features #1
Manage projects
Monitor details
Measure performance
Manage projects
This is where we sit down, grab a cup of coffee and dial in the details. Understanding the task at hand and ironing out the wrinkles is key. Now that we've aligned the details, it's time to get things mapped out and organized. This part is really crucial in keeping the project in line to completion.
Monitor details
Whether through commerce or just an experience to tell your brand's story, the time has come to start using development languages that fit your projects needs. The time has come to bring those ideas and plans to life. This is where we really begin to visualize your napkin sketches and make them into beautiful pixels.
Measure performance
We aim high at being focused on building relationships with our clients and community. Using our creative gifts drives this foundation. Now that your brand is all dressed up and ready to party, it's time to release it to the world. By the way, let's celebrate already.
<!-- Icon Blocks Section -->
<div class="container space-2 space-3--lg">
<div class="row">
<div class="col-sm-6 col-lg-4 offset-sm-3 offset-lg-0 mb-5 mb-lg-0">
<!-- Icon Block -->
<div class="text-center">
<h3 class="h5">
<a class="js-go-to" href="#"
data-target="#managProjects"
data-compensation="#header"
data-type="static">
<img class="d-block max-width-12 mx-auto mb-3" src="../assets/svg/components/manage-red-icon.svg" alt="SVG">
Manage projects
</a>
</h3>
</div>
<!-- End Icon Block -->
</div>
<div class="col-sm-6 col-lg-4 mb-5 mb-sm-0">
<!-- Icon Block -->
<div class="text-center">
<h3 class="h5">
<a class="js-go-to" href="#"
data-target="#monitorDetails"
data-compensation="#header"
data-type="static">
<img class="d-block max-width-12 mx-auto mb-3" src="../assets/svg/components/file-blue-icon.svg" alt="SVG">
Monitor details
</a>
</h3>
</div>
<!-- End Icon Block -->
</div>
<div class="col-sm-6 col-lg-4">
<!-- Icon Block -->
<div class="text-center">
<h3 class="h5">
<a class="js-go-to" href="#"
data-target="#measurePerformance"
data-compensation="#header"
data-type="static">
<img class="d-block max-width-12 mx-auto mb-3" src="../assets/svg/components/measure-primary-icon.svg" alt="SVG">
Measure performance
</a>
</h3>
</div>
<!-- End Icon Block -->
</div>
</div>
</div>
<!-- End Icon Blocks Section -->
<!-- Features Section -->
<div class="container space-2-bottom">
<!-- Manage Projects -->
<div id="managProjects" class="row justify-content-lg-between align-items-md-center space-2-bottom space-3-bottom--lg">
<div class="col-md-6 order-md-2 mb-5 mb-md-0">
<div class="pl-md-4">
<h2>Manage projects</h2>
<p>This is where we sit down, grab a cup of coffee and dial in the details. Understanding the task at hand and ironing out the wrinkles is key. Now that we've aligned the details, it's time to get things mapped out and organized. This part is really crucial in keeping the project in line to completion.</p>
</div>
</div>
<div class="col-md-6 order-md-1">
<object type="image/svg+xml" data="../assets/svg/mockups/laptop-mockup-1.svg"></object>
</div>
</div>
<!-- End Manage Projects -->
<!-- Monitor Details -->
<div id="monitorDetails" class="row justify-content-lg-between align-items-md-center space-2-bottom space-3-bottom--lg">
<div class="col-md-6 mb-5 mb-md-0">
<div class="pr-md-4">
<h2>Monitor details</h2>
<p>Whether through commerce or just an experience to tell your brand's story, the time has come to start using development languages that fit your projects needs. The time has come to bring those ideas and plans to life. This is where we really begin to visualize your napkin sketches and make them into beautiful pixels.</p>
</div>
</div>
<div class="col-md-6">
<object type="image/svg+xml" data="../assets/svg/mockups/laptop-mockup-2.svg"></object>
</div>
</div>
<!-- End Monitor Details -->
<!-- Measure Performance -->
<div id="measurePerformance" class="row justify-content-lg-between align-items-md-center">
<div class="col-md-6 order-md-2 mb-5 mb-md-0">
<div class="pl-md-4">
<h2>Measure performance</h2>
<p>We aim high at being focused on building relationships with our clients and community. Using our creative gifts drives this foundation. Now that your brand is all dressed up and ready to party, it's time to release it to the world. By the way, let's celebrate already.</p>
</div>
</div>
<div class="col-md-6 order-md-1">
<object type="image/svg+xml" data="../assets/svg/mockups/laptop-and-phone-2.svg"></object>
</div>
</div>
<!-- End Measure Performance -->
</div>
<!-- End Features Section -->
JS library and initialization:
<!-- JS Implementing Plugins -->
<script src="assets/js/helpers/hs.go-to.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of go to
$.HSCore.components.HSGoTo.init('.js-go-to');
});
</script>
Features #2
Space on the go
Space on mobile
Don't miss out because you're on the move. Stay connected and collaborate with your team from anywhere with notifications, comments, and project activity. Download Space for iPhone or Space for Android.
<!-- Responsive Section -->
<div class="container">
<div class="row justify-content-lg-between align-items-lg-start">
<div class="col-lg-6 space-2 space-3--lg">
<!-- Title -->
<div class="mb-7">
<span class="u-label u-label--sm u-label--purple mb-3">Space on the go</span>
<h2>Space on mobile</h2>
<p>Don't miss out because you're on the move. Stay connected and collaborate with your team from anywhere with notifications, comments, and project activity. Download Space for iPhone or Space for Android.</p>
</div>
<!-- End Title -->
<!-- Button -->
<button type="button" class="btn btn-xs btn-dark text-left mb-2 mb-md-0 mr-md-2">
<span class="media align-items-center">
<span class="fab fa-apple fa-3x mr-3"></span>
<span class="d-block">
<span class="d-block">Download on the</span>
<strong class="d-block font-size-14">App Store</strong>
</span>
</span>
</button>
<!-- End Button -->
<!-- Button -->
<button type="button" class="btn btn-xs btn-dark text-left mb-2 mb-md-0">
<span class="media align-items-center">
<span class="fab fa-google-play fa-3x mr-3"></span>
<span class="d-block">
<span class="d-block">Get it on</span>
<strong class="d-block font-size-14">Google Play</strong>
</span>
</span>
</button>
<!-- End Button -->
</div>
<div class="col-lg-4 text-center mt-lg-auto">
<!-- SVG Mockup -->
<object type="image/svg+xml" data="../assets/svg/mockups/phone-mockup-1.svg" class="w-75 w-sm-100 max-width-sm-40"></object>
<!-- End SVG Mockup -->
</div>
</div>
</div>
<!-- End Responsive Section -->
Features #3
<!-- Responsive Section -->
<div class="gradient-overlay-half-primary-v1">
<div class="bg-img-hero" style="background-image: url(../assets/img/bg/bg2.png);">
<div class="container">
<div class="row justify-content-lg-between align-items-lg-start">
<div class="col-lg-6 space-2 space-3--lg">
<!-- Title -->
<div class="mb-7">
<span class="u-label u-label--sm u-label--light mb-2">Space on the go</span>
<h2 class="text-white">Space on mobile</h2>
<p class="text-white">Don't miss out because you're on the move. Stay connected and collaborate with your team from anywhere with notifications, comments, and project activity. Download Space for iPhone or Space for Android.</p>
</div>
<!-- End Title -->
<!-- Button -->
<button type="button" class="btn btn-xs btn-dark text-left mb-2 mb-md-0 mr-md-2">
<span class="media align-items-center">
<span class="fab fa-apple fa-3x mr-3"></span>
<span class="d-block">
<span class="d-block">Download on the</span>
<strong class="d-block font-size-14">App Store</strong>
</span>
</span>
</button>
<!-- End Button -->
<!-- Button -->
<button type="button" class="btn btn-xs btn-dark text-left mb-2 mb-md-0">
<span class="media align-items-center">
<span class="fab fa-google-play fa-3x mr-3"></span>
<span class="d-block">
<span class="d-block">Get it on</span>
<strong class="d-block font-size-14">Google Play</strong>
</span>
</span>
</button>
<!-- End Button -->
</div>
<div class="col-lg-4 text-center mt-lg-auto">
<!-- SVG Mockup -->
<object type="image/svg+xml" data="../assets/svg/mockups/phone-mockup-1.svg" class="w-75 w-sm-100 max-width-sm-40"></object>
<!-- End SVG Mockup -->
</div>
</div>
</div>
</div>
</div>
<!-- End Responsive Section -->
Features #4
Template that bring businesses together
Working together on the daily requires each individual to let the greater good of the team's work surface above their own ego.
- It's important to stay detail oriented with every project we tackle.
- Staying focused allows us to turn every project we complete into something we love.
Mark McManus
"We are incredibly impressed with Space and how well it supports its customers with amazing products and services. One simple subscription gives you access to all our tools, plus so much more."
<!-- About Section -->
<div class="container space-2 space-3--lg">
<div class="row align-items-lg-center">
<div class="col-md-6 order-md-2 mb-5 mb-md-0">
<div class="mb-4">
<!-- Title -->
<h2>Template that bring businesses together</h2>
<p>Working together on the daily requires each individual to let the greater good of the team's work surface above their own ego.</p>
<!-- End Title -->
<!-- Features List -->
<ul class="text-secondary">
<li class="py-1">It's important to stay detail oriented with every project we tackle.</li>
<li class="py-1">Staying focused allows us to turn every project we complete into something we love.</li>
</ul>
<!-- End Features List -->
<hr class="my-5">
<!-- Review -->
<div class="media">
<img class="u-avatar rounded-circle mr-3" src="../assets/img/100x100/img4.jpg" alt="Image Description">
<div class="media-body">
<h4 class="h6 mb-0">Mark McManus</h4>
<p class="mb-0">"We are incredibly impressed with Space and how well it supports its customers with amazing products and services. One simple subscription gives you access to all our tools, plus so much more."</p>
</div>
</div>
<!-- End Review -->
</div>
</div>
<div class="col-md-6 order-md-1">
<div class="pr-lg-4">
<img class="img-fluid" src="../assets/img/700x700/img1.jpg" alt="Image Description">
</div>
</div>
</div>
</div>
<!-- End About Section -->
Features #5
Manage projects with Space
This is where we sit down, grab a cup of coffee and dial in the details. Understanding the task at hand and ironing out the wrinkles is key. Now that we've aligned the details, it's time to get things mapped out and organized. This part is really crucial in keeping the project in line to completion.
<!-- Manage Projects -->
<div class="row justify-content-lg-between align-items-md-center space-2-bottom">
<div class="col-md-6 order-md-2 mb-5 mb-md-0">
<div class="pl-md-4">
<h2 class="h3">Manage projects with Space</h2>
<p>This is where we sit down, grab a cup of coffee and dial in the details. Understanding the task at hand and ironing out the wrinkles is key. Now that we've aligned the details, it's time to get things mapped out and organized. This part is really crucial in keeping the project in line to completion.</p>
</div>
</div>
<div class="col-md-6 order-md-1">
<object type="image/svg+xml" data="../assets/svg/mockups/laptop-mockup-3.svg"></object>
</div>
</div>
<!-- End Manage Projects -->
Features #6
Space service that moves work forward
This is where we sit down, grab a cup of coffee and dial in the details. Understanding the task at hand and ironing out the wrinkles is key.
Maria Muszynska
"The template is really nice and offers quite a large set of options."
Build for everyone and provides enjoyable usage
Whether through commerce or just an experience to tell your brand's story, the time has come to start using development languages that fit your projects needs.
Alex Pottorf
"It's beautiful and the coding is done quickly and seamlessly."
<!-- Features Section -->
<div class="position-relative">
<div class="container">
<div class="row align-self-lg-center space-2 space-3--lg">
<div class="col-lg-5">
<!-- Title -->
<img class="max-width-10 mb-2" src="../assets/svg/components/moving-up-blue-icon.svg" alt="Image Description">
<h3>Space service that moves work forward</h3>
<p>This is where we sit down, grab a cup of coffee and dial in the details. Understanding the task at hand and ironing out the wrinkles is key.</p>
<!-- End Title -->
<!-- Divider -->
<div class="max-width-5">
<hr class="my-5">
</div>
<!-- End Divider -->
<!-- Review -->
<div class="media">
<img class="u-avatar rounded-circle mr-3" src="../assets/img/100x100/img1.jpg" alt="Image Description">
<div class="media-body">
<h4 class="h6 mb-0">Maria Muszynska</h4>
<p class="text-muted">"The template is really nice and offers quite a large set of options."</p>
</div>
</div>
<!-- End Review -->
</div>
</div>
</div>
<div class="d-none d-lg-inline-block col-lg-6 position-absolute-top-right-0--lg bg-img-hero" style="min-height: 100%; background-image: url(../assets/img/700x700/img1.jpg);"></div>
</div>
<!-- End Features Section -->
<hr class="my-0">
<!-- Features Section -->
<div class="position-relative">
<div class="container">
<div class="row justify-content-lg-end align-self-lg-center space-2 space-3--lg">
<div class="col-lg-5">
<!-- Title -->
<img class="max-width-10 mb-2" src="../assets/svg/components/responsive-primary-icon.svg" alt="Image Description">
<h3>Build for everyone and provides enjoyable usage</h3>
<p>Whether through commerce or just an experience to tell your brand's story, the time has come to start using development languages that fit your projects needs.</p>
<!-- End Title -->
<!-- Divider -->
<div class="max-width-5">
<hr class="my-5">
</div>
<!-- End Divider -->
<!-- Review -->
<div class="media">
<img class="u-avatar rounded-circle mr-3" src="../assets/img/100x100/img4.jpg" alt="Image Description">
<div class="media-body">
<h4 class="h6 mb-0">Alex Pottorf</h4>
<p class="text-muted">"It's beautiful and the coding is done quickly and seamlessly."</p>
</div>
</div>
<!-- End Review -->
</div>
</div>
</div>
<div class="d-none d-lg-inline-block col-lg-6 position-absolute-top-left-0--lg bg-img-hero" style="min-height: 100%; background-image: url(../assets/img/700x700/img2.jpg);"></div>
</div>
<!-- End Features Section -->
Features #7
SEO & advertising
Now that we've aligned the details, it's time to get things organized.
- 24/7 support
- 1610+ elements
- 400+ pages
- Unlimited domain or user
Marketing & consulting
This is where we sit down, grab a cup of coffee and dial in the details.
- 24/7 support
- 1610+ elements
- 400+ pages
- Unlimited domain or user
Design & development
Whether through commerce or just an experience to tell your brand's.
- 24/7 support
- 1610+ elements
- 400+ pages
- Unlimited domain or user
<!-- Services Section -->
<div class="bg-gray-100">
<div class="container space-2 space-3--lg">
<div class="row justify-content-md-centered">
<div class="col-md-6 col-lg-4 offset-md-3 offset-lg-0 order-lg-2 mb-3 mb-lg-0">
<!-- Services -->
<div class="bg-primary shadow-sm rounded py-7">
<!-- Header -->
<header class="text-center px-4 mb-5">
<img class="max-width-10 mb-2" src="../assets/svg/components/seo-white-icon.svg" alt="Image Description">
<h2 class="h5 text-white">SEO & advertising</h2>
<p class="text-light-70">Now that we've aligned the details, it's time to get things organized.</p>
</header>
<!-- End Header -->
<!-- List -->
<ul class="list-group list-group-rounded-0 list-group-borderless list-group-transparent list-group-striped">
<li class="list-group-item d-flex align-items-center py-3">
<span class="fa fa-check text-white mr-3"></span>
24/7 support
</li>
<li class="list-group-item d-flex align-items-center py-3">
<span class="fa fa-check text-white mr-3"></span>
1610+ elements
</li>
<li class="list-group-item d-flex align-items-center py-3">
<span class="fa fa-check text-white mr-3"></span>
400+ pages
</li>
<li class="list-group-item d-flex align-items-center py-3">
<span class="fa fa-check text-white mr-3"></span>
Unlimited domain or user
</li>
</ul>
<!-- End List -->
</div>
<!-- End Services -->
</div>
<div class="col-md-6 col-lg-4 order-lg-1 mb-3 mb-md-0">
<!-- Services -->
<div class="bg-white shadow-sm rounded py-7">
<!-- Header -->
<header class="text-center px-4 mb-5">
<img class="max-width-10 mb-2" src="../assets/svg/components/plan-primary-icon.svg" alt="Image Description">
<h2 class="h5">Marketing & consulting</h2>
<p>This is where we sit down, grab a cup of coffee and dial in the details.</p>
</header>
<!-- End Header -->
<!-- List -->
<ul class="list-group list-group-rounded-0 list-group-borderless list-group-striped">
<li class="list-group-item d-flex align-items-center py-3">
<span class="fa fa-check text-primary mr-3"></span>
24/7 support
</li>
<li class="list-group-item d-flex align-items-center py-3">
<span class="fa fa-check text-primary mr-3"></span>
1610+ elements
</li>
<li class="list-group-item d-flex align-items-center py-3">
<span class="fa fa-check text-primary mr-3"></span>
400+ pages
</li>
<li class="list-group-item d-flex align-items-center py-3">
<span class="fa fa-check text-primary mr-3"></span>
Unlimited domain or user
</li>
</ul>
<!-- End List -->
</div>
<!-- End Services -->
</div>
<div class="col-md-6 col-lg-4 order-lg-3">
<!-- Services -->
<div class="bg-white shadow-sm rounded py-7">
<!-- Header -->
<header class="text-center px-4 mb-5">
<img class="max-width-10 mb-2" src="../assets/svg/components/desk-with-mac-primary-icon.svg" alt="Image Description">
<h2 class="h5">Design & development</h2>
<p>Whether through commerce or just an experience to tell your brand's.</p>
</header>
<!-- End Header -->
<!-- List -->
<ul class="list-group list-group-rounded-0 list-group-borderless list-group-striped">
<li class="list-group-item d-flex align-items-center py-3">
<span class="fa fa-check text-primary mr-3"></span>
24/7 support
</li>
<li class="list-group-item d-flex align-items-center py-3">
<span class="fa fa-check text-primary mr-3"></span>
1610+ elements
</li>
<li class="list-group-item d-flex align-items-center py-3">
<span class="fa fa-check text-primary mr-3"></span>
400+ pages
</li>
<li class="list-group-item d-flex align-items-center py-3">
<span class="fa fa-check text-primary mr-3"></span>
Unlimited domain or user
</li>
</ul>
<!-- End List -->
</div>
<!-- End Services -->
</div>
</div>
</div>
</div>
<!-- End Services Section -->
Features #8
A brief history
Armed with a credit card and a dream, two college friends, Mike Cannon-Brookes and Scott Farquhar set out to create Space. In 2002, they didn't know what kind of company Space was going to be, but they knew exactly what it shouldn't be—an environment where they had to conform rather than be who they authentically are.
Now, over 15 years later, our team has grown to over 2,500 Atlassians worldwide with offices around the globe. But it didn't happen overnight. Here's our story.
Work shouldn't be chaos
At Space, we're building a place where everything from the most immediate details to the big picture are organized. With Space, each person knows what they should be doing and why. This clarity, transparency, and focus allows teams to collaborate with less friction and produce great results.
We believe coordination should be as effortless between people as it is between our own brains and bodies, that people should be appreciated, and love what they do.
<!-- History Section -->
<div class="space-2 space-0-bottom--lg">
<div class="position-relative space-1--lg">
<div class="container">
<div class="row align-self-lg-center">
<div class="col-lg-5 order-lg-2">
<h2>A brief history</h2>
<p>Armed with a credit card and a dream, two college friends, Mike Cannon-Brookes and Scott Farquhar set out to create Space. In 2002, they didn't know what kind of company Space was going to be, but they knew exactly what it shouldn't be—an environment where they had to conform rather than be who they authentically are.</p>
<p>Now, over 15 years later, our team has grown to over 2,500 Atlassians worldwide with offices around the globe. But it didn't happen overnight. Here's our story.</p>
</div>
</div>
<div class="d-none d-lg-inline-block col-lg-6 position-absolute-top-right-0--lg bg-img-hero" style="min-height: 100%; background-image: url(../assets/img/900x450/img2.jpg);"></div>
</div>
</div>
</div>
<!-- End History Section -->
<!-- Divider -->
<div class="d-lg-none">
<hr class="my-0">
</div>
<!-- End Divider -->
<!-- About Section -->
<div class="space-2 space-3-top--lg space-0-bottom--lg">
<div class="position-relative space-1--lg">
<div class="container">
<div class="row justify-content-lg-end align-self-lg-center">
<div class="col-lg-5">
<h2>Work shouldn't be chaos</h2>
<p>At Space, we're building a place where everything from the most immediate details to the big picture are organized. With Space, each person knows what they should be doing and why. This clarity, transparency, and focus allows teams to collaborate with less friction and produce great results.</p>
<p>We believe coordination should be as effortless between people as it is between our own brains and bodies, that people should be appreciated, and love what they do.</p>
</div>
</div>
<div class="d-none d-lg-inline-block col-lg-6 position-absolute-top-left-0--lg bg-img-hero" style="min-height: 100%; background-image: url(../assets/img/900x450/img1.jpg);"></div>
</div>
</div>
</div>
<!-- End About Section -->
Features #9
<!-- Features Section -->
<div class="container space-2 space-3--lg">
<div class="row justify-content-lg-between align-items-lg-center">
<div class="col-lg-5 mb-7 mb-lg-0">
<!-- Slick Carousel - Features Main -->
<div id="featuresSlickNavMain" class="js-slick-carousel u-slick u-slick--pagination-simple u-slick--transform-off"
data-infinite="true"
data-autoplay="true"
data-speed="7000"
data-slides-show="3"
data-adaptive-height="true"
data-vertical="true"
data-vertical-swiping="true"
data-focus-on-select="true"
data-nav-for="#featuresSlickNavThumb">
<!-- Slide Item -->
<div class="js-slide u-slick--pagination-simple__item">
<div class="media">
<span class="u-slick--pagination-simple__icon rounded-circle mr-3">
<span class="u-slick--pagination-simple__icon-inner">1</span>
</span>
<div class="media-body">
<h3 class="h6 u-slick--pagination-simple__title">Powerful design</h3>
<p class="u-slick--pagination-simple__text">Achieve virtually any look and layout from within the one template.</p>
</div>
</div>
</div>
<!-- End Slide Item -->
<!-- Slide Item -->
<div class="js-slide u-slick--pagination-simple__item">
<div class="media">
<span class="u-slick--pagination-simple__icon rounded-circle mr-3">
<span class="u-slick--pagination-simple__icon-inner">2</span>
</span>
<div class="media-body">
<h4 class="h6 u-slick--pagination-simple__title">Super-Light</h4>
<p class="u-slick--pagination-simple__text">Manage document assembly with sophisticated yet super-light templates.</p>
</div>
</div>
</div>
<!-- End Slide Item -->
<!-- Slide Item -->
<div class="js-slide u-slick--pagination-simple__item">
<div class="media">
<span class="u-slick--pagination-simple__icon rounded-circle mr-3">
<span class="u-slick--pagination-simple__icon-inner">3</span>
</span>
<div class="media-body">
<h4 class="h6 u-slick--pagination-simple__title">Unlimited Power</h4>
<p class="u-slick--pagination-simple__text">Find what you need in one template and combine features at will.</p>
</div>
</div>
</div>
<!-- End Slide Item -->
</div>
<!-- End Slick Carousel - Features Main -->
</div>
<div class="col-lg-6">
<!-- Slick Carousel - Features Main -->
<div id="featuresSlickNavThumb" class="js-slick-carousel u-slick"
data-infinite="true"
data-autoplay="true"
data-speed="7000"
data-fade="true"
data-is-thumbs="true"
data-nav-for="#featuresSlickNavMain">
<div class="js-slide">
<object type="image/svg+xml" data="../assets/svg/mockups/laptop-mockup-1.svg"></object>
</div>
<div class="js-slide">
<object type="image/svg+xml" data="../assets/svg/mockups/laptop-mockup-2.svg"></object>
</div>
<div class="js-slide">
<object type="image/svg+xml" data="../assets/svg/mockups/laptop-and-phone-2.svg"></object>
</div>
</div>
<!-- End Slick Carousel - Features Main -->
</div>
</div>
</div>
<!-- End Features Section -->
CSS library:
<link rel="stylesheet" href="../assets/vendor/slick-carousel/slick/slick.css">
JS library and initialization:
<!-- JS Implementing Plugins -->
<script src="assets/vendor/jquery.countdown.min.js"></script>
<!-- JS Implementing Plugins -->
<script src="assets/js/helpers/hs.slick-carousel.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of slick carousel
$.HSCore.components.HSSlickCarousel.init('.js-slick-carousel');
});
</script>
Features #10
<!-- Features Section -->
<div class="bg-gray-100">
<div class="container space-2 space-3--lg">
<div class="row">
<div class="col-lg-5 mb-7 mb-lg-0">
<div class="card-deck card-sm-gutters-2">
<!-- Features -->
<a class="card u-info-v1 mb-3" href="../html/pages/about-agency.html">
<div class="card-body p-3">
<div class="media">
<img class="max-width-6 mr-3" src="../assets/svg/components/plan-brown-icon.svg" alt="Image Description">
<div class="media-body">
<h4 class="h6 text-dark mb-0">About</h4>
<p class="small mb-0">Find out more about us</p>
</div>
</div>
</div>
</a>
<!-- End Features -->
<!-- Features -->
<a class="card u-info-v1 mb-3" href="../html/pages/services-agency.html">
<div class="card-body p-3">
<div class="media">
<img class="max-width-6 mr-3" src="../assets/svg/components/services-primary-icon.svg" alt="Image Description">
<div class="media-body">
<h4 class="h6 text-dark mb-0">Services</h4>
<p class="small mb-0">Find out more about services</p>
</div>
</div>
</div>
</a>
<!-- End Features -->
</div>
<div class="card-deck card-sm-gutters-2">
<!-- Features -->
<a class="card u-info-v1 mb-3" href="../html/pages/careers.html">
<div class="card-body p-3">
<div class="media">
<img class="max-width-6 mr-3" src="../assets/svg/components/careers-blue-icon.svg" alt="Image Description">
<div class="media-body">
<h4 class="h6 text-dark mb-0">Careers</h4>
<p class="small mb-0">Start a career at Space</p>
</div>
</div>
</div>
</a>
<!-- End Features -->
<!-- Features -->
<a class="card u-info-v1 mb-3" href="../html/pages/hire-us.html">
<div class="card-body p-3">
<div class="media">
<img class="max-width-6 mr-3" src="../assets/svg/components/hire-us-red-icon.svg" alt="Image Description">
<div class="media-body">
<h4 class="h6 text-dark mb-0">Hire us</h4>
<p class="small mb-0">Hire us to create your brand</p>
</div>
</div>
</div>
</a>
<!-- End Features -->
</div>
<div class="card-deck card-sm-gutters-2">
<!-- Features -->
<a class="card u-info-v1 mb-3 mb-sm-0" href="../html/pages/help.html">
<div class="card-body p-3">
<div class="media">
<img class="max-width-6 mr-3" src="../assets/svg/components/help-cyan-icon.svg" alt="Image Description">
<div class="media-body">
<h4 class="h6 text-dark mb-0">Help</h4>
<p class="small mb-0">See our Help center for FAQ</p>
</div>
</div>
</div>
</a>
<!-- End Features -->
<!-- Features -->
<a class="card u-info-v1" href="../html/pages/contacts-agency.html">
<div class="card-body p-3">
<div class="media">
<img class="max-width-6 mr-3" src="../assets/svg/components/contacts-dark-icon.svg" alt="Image Description">
<div class="media-body">
<h4 class="h6 text-dark mb-0">Contacts</h4>
<p class="small mb-0">Have a question? Contacts us</p>
</div>
</div>
</div>
</a>
<!-- End Features -->
</div>
</div>
<div class="col-lg-7">
<!-- Video Block -->
<div id="youTubeVideoPlayer" class="u-video-player mb-5">
<!-- Cover Image -->
<img class="img-fluid u-video-player__preview" src="../../assets/img/900x450/img1.jpg" alt="Image">
<!-- End Cover Image -->
<!-- Play Button -->
<a class="js-inline-video-player u-video-player__btn u-video-player__centered" href="javascript:;"
data-parent="youTubeVideoPlayer"
data-target="youTubeVideoIframe"
data-classes="u-video-player__played">
<span class="u-video-player__icon">
<span class="fa fa-play u-video-player__icon-inner"></span>
</span>
</a>
<!-- End Play Button -->
<!-- Video Iframe -->
<div class="embed-responsive embed-responsive-16by9">
<iframe id="youTubeVideoIframe" class="embed-responsive-item" src="//www.youtube.com/embed/0qisGSwZym4"></iframe>
</div>
<!-- End Video Iframe -->
</div>
<!-- End Video Block -->
</div>
</div>
</div>
</div>
<!-- End Features Section -->
JS library and initialization:
<!-- JS Implementing Plugins -->
<script src="assets/vendor/player.js/dist/player.min.js"></script>
<!-- JS Implementing Plugins -->
<script src="assets/js/helpers/hs.video-player.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of video player
$.HSCore.components.HSVideoPlayer.init('.js-inline-video-player');
});
</script>
Features #11
<!-- Mockup Section -->
<div class="bg-gray-100">
<div class="container space-2-top space-3-top--lg">
<div class="w-md-80 w-lg-60 text-center mx-md-auto mb-9">
<!-- Fancybox -->
<a class="js-fancybox u-media-player" href="javascript:;"
data-src="//vimeo.com/167434033"
data-speed="700"
data-animate-in="zoomIn"
data-animate-out="zoomOut"
data-caption="Space - Responsive Website Template">
<span class="u-media-player__icon u-media-player__icon--xl u-media-player__icon--box-shadow">
<span class="fa fa-play u-media-player__icon-inner"></span>
</span>
</a>
<!-- End Fancybox -->
</div>
<!-- SVG Mockup -->
<div class="w-lg-80 mx-auto">
<object type="image/svg+xml" data="../assets/svg/mockups/devices-1.svg"></object>
</div>
<!-- End SVG Mockup -->
</div>
</div>
<!-- End Mockup Section -->
CSS library:
<link rel="stylesheet" href="assets/vendor/fancybox/jquery.fancybox.css">
JS library and initialization:
<!-- JS Implementing Plugins -->
<script src="assets/vendor/fancybox/jquery.fancybox.min.js"></script>
<!-- JS Implementing Plugins -->
<script src="assets/js/components/hs.fancybox.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of popups
$.HSCore.components.HSPopup.init('.js-fancybox');
});
</script>
Features #12
Canada
Details:
- 972 Sylvan Street South Angelina, NL S0B2V9
- +(0161) 347 8854
- Email: Space.ca@support.com
- Website: Space.ca
Business hours:
Mon - Sat: 9.30AM - 06.00PM
HTML:
<div class="row">
<div class="col-lg-6 mb-7 mb-lg-0">
<!-- Contacts Info -->
<h1 class="h4 mb-4">Canada</h1>
<div class="row">
<div class="col-sm-6 mb-4 mb-sm-0">
<h2 class="h6">Details:</h2>
<address class="mb-0">
<ul class="list-unstyled font-size-14 text-secondary mb-0">
<li class="py-1">972 Sylvan Street South Angelina, NL S0B2V9</li>
<li class="py-2"></li>
<li class="py-1">+(0161) 347 8854</li>
<li class="py-1">Email: <a href="#">Space.ca@support.com</a></li>
<li class="py-1">Website: <a href="#">Space.ca</a></li>
</ul>
</address>
</div>
<div class="col-sm-6">
<h3 class="h6">Business hours:</h3>
<span class="d-block font-size-14 text-secondary mb-3">Mon - Sat: 9.30AM - 06.00PM</span>
<img class="img-fluid" src="../assets/img/400x180/img1.jpg" alt="Image Description">
</div>
</div>
<!-- End Contacts Info -->
</div>
<div class="col-lg-6">
<!-- Google Map -->
<div id="GMap1" class="js-g-map embed-responsive embed-responsive-21by9 h-100"
data-type="custom"
data-lat="40.674"
data-lng="-73.946"
data-zoom="12"
data-title="Agency"
data-styles='[["", "", [{"saturation":-100},{"lightness":51},{"visibility":"simplified"}]], ["", "labels", [{"visibility":"on"}]], ["water", "", [{"color":"#bac6cb"}]] ]'
data-pin="true"
data-pin-icon="../assets/img/map-markers/map-marker1.png"></div>
<!-- End Google Map -->
</div>
</div>
JS library and initialization:
<!-- JS Implementing Plugins -->
<script src="../assets/vendor/gmaps/gmaps.min.js"></script>
<!-- JS Implementing Plugins -->
<script src="../assets/js/helpers/hs.g-map.js"></script>
<!-- JS Plugins Init. -->
<script>
// initialization of google map
function initMap() {
$.HSCore.components.HSGMap.init('.js-g-map');
}
</script>
<script src="//maps.googleapis.com/maps/api/js?key=AIzaSyAtt1z99GtrHZt_IcnK-wryNsQ30A112J0&callback=initMap" async defer></script>
Features #13
Have a question?
Call us and we'll be happy to help.
+1 (062) 109-9222 Monday - Friday 9AM - 6PM Eastern TimeFrequently asked question
We aim high at being focused on building relationships with our clients and community. Using our creative gifts drives this foundation. Working together on the daily requires each individual to let the greater good of the team's work surface above their own ego.
It's important to stay detail oriented with every project we tackle. Staying focused allows us to turn every project we complete into something we love. We strive to embrace and drive change in our industry which allows us to keep our clients relevant and ready to adapt.
As creatives, it's important that we strive to do work outside of obligation. This lets us stay ahead of the curve for our clients and internal projects. At the end of the day, it's important to not let being busy distract us from having fun. Smiling, laughing, and hanging helps us work together to achieve this.
Understanding who you are and what you want is our strategy for your brand. We are always figuring out ways to capture your vision, so people can get on board.
HTML:
<!-- FAQ Section -->
<div class="container space-2 space-3--lg">
<div class="row justify-content-lg-between">
<div class="col-lg-4 mb-7 mb-lg-0">
<!-- Info -->
<div class="bg-dark shadow-sm rounded p-5 mt-lg-9">
<h3 class="text-white">Have a question?</h3>
<p class="text-light-70">Call us and we'll be happy to help.</p>
<address class="mb-0">
<span class="d-block text-light-70 font-weight-medium py-1">+1 (062) 109-9222</span>
<span class="d-block text-light-70 font-weight-light py-1">Monday - Friday</span>
<span class="d-block text-light-70 font-weight-light py-1">9AM - 6PM Eastern Time</span>
</address>
</div>
<!-- End Info -->
</div>
<div class="col-lg-7">
<!-- Title -->
<div class="mb-4">
<h2 class="h3">Frequently asked question</h2>
</div>
<!-- End Title -->
<!-- Accordion -->
<div class="mb-5" id="basicsAccordion">
<div class="card card-collapse mb-3">
<div class="card-header card-collapse__header" id="basicsHeadingOne">
<h5 class="mb-0">
<button class="btn btn-link btn-block d-flex justify-content-between card-collapse__btn collapsed"
data-toggle="collapse"
data-target="#basicsCollapseOne"
aria-expanded="false"
aria-controls="basicsCollapseOne">
Do you have any built-in caching?
<span class="card-collapse__btn-arrow">
<span class="fa fa-arrow-down card-collapse__btn-arrow-inner"></span>
</span>
</button>
</h5>
</div>
<div id="basicsCollapseOne" class="collapse"
aria-labelledby="basicsHeadingOne"
data-parent="#basicsAccordion">
<div class="card-body card-collapse__body">
We aim high at being focused on building relationships with our clients and community. Using our creative gifts drives this foundation. Working together on the daily requires each individual to let the greater good of the team's work surface above their own ego.
</div>
</div>
</div>
<div class="card card-collapse mb-3">
<div class="card-header card-collapse__header" id="basicsHeadingTwo">
<h5 class="mb-0">
<button class="btn btn-link btn-block d-flex justify-content-between card-collapse__btn collapsed"
data-toggle="collapse"
data-target="#basicsCollapseTwo"
aria-expanded="false"
aria-controls="basicsCollapseTwo">
Can I add/upgrade my plan at any time?
<span class="card-collapse__btn-arrow">
<span class="fa fa-arrow-down card-collapse__btn-arrow-inner"></span>
</span>
</button>
</h5>
</div>
<div id="basicsCollapseTwo" class="collapse"
aria-labelledby="basicsHeadingTwo"
data-parent="#basicsAccordion">
<div class="card-body card-collapse__body">
It's important to stay detail oriented with every project we tackle. Staying focused allows us to turn every project we complete into something we love. We strive to embrace and drive change in our industry which allows us to keep our clients relevant and ready to adapt.
</div>
</div>
</div>
<div class="card card-collapse mb-3">
<div class="card-header card-collapse__header" id="basicsHeadingThree">
<h5 class="mb-0">
<button class="btn btn-link btn-block d-flex justify-content-between card-collapse__btn collapsed"
data-toggle="collapse"
data-target="#basicsCollapseThree"
aria-expanded="false"
aria-controls="basicsCollapseThree">
What access comes with my hosting plan?
<span class="card-collapse__btn-arrow">
<span class="fa fa-arrow-down card-collapse__btn-arrow-inner"></span>
</span>
</button>
</h5>
</div>
<div id="basicsCollapseThree" class="collapse"
aria-labelledby="basicsHeadingThree"
data-parent="#basicsAccordion">
<div class="card-body card-collapse__body">
As creatives, it's important that we strive to do work outside of obligation. This lets us stay ahead of the curve for our clients and internal projects. At the end of the day, it's important to not let being busy distract us from having fun. Smiling, laughing, and hanging helps us work together to achieve this.
</div>
</div>
</div>
<div class="card card-collapse">
<div class="card-header card-collapse__header" id="basicsHeadingFour">
<h5 class="mb-0">
<button class="btn btn-link btn-block d-flex justify-content-between card-collapse__btn collapsed"
data-toggle="collapse"
data-target="#basicsCollapseFour"
aria-expanded="false"
aria-controls="basicsCollapseFour">
How do I change my password?
<span class="card-collapse__btn-arrow">
<span class="fa fa-arrow-down card-collapse__btn-arrow-inner"></span>
</span>
</button>
</h5>
</div>
<div id="basicsCollapseFour" class="collapse"
aria-labelledby="basicsHeadingFour"
data-parent="#basicsAccordion">
<div class="card-body card-collapse__body">
Understanding who you are and what you want is our strategy for your brand. We are always figuring out ways to capture your vision, so people can get on board.
</div>
</div>
</div>
</div>
<!-- End Accordion -->
<a href="../html/pages/help.html">See all FAQs</a>
</div>
</div>
</div>
<!-- End FAQ Section -->
Features #14
The Space shoes
Men's timeless mid-cut shoes in premium navy blue suede. The classic sporty lines and seasonal shade make them the perfect summer slip-ons while a contrast sole keeps the look fresh. The vulcanised rubber sole adds grip and absorbs impact, while a fabric lining means that you stay comfortable even when barefoot.
Quality over quantity
At Space, we're building a place where everything from the most immediate details to the big picture are organized. With Space, each person knows what they should be doing and why. This clarity, transparency, and focus allows teams to collaborate with less friction and produce great results.
HTML:
<!-- History Section -->
<div class="position-relative space-2 space-3--lg">
<div class="container">
<div class="row align-self-md-center">
<div class="col-md-4 order-md-2">
<h2>The Space shoes</h2>
<p class="mb-0">Men's timeless mid-cut shoes in premium navy blue suede. The classic sporty lines and seasonal shade make them the perfect summer slip-ons while a contrast sole keeps the look fresh. The vulcanised rubber sole adds grip and absorbs impact, while a fabric lining means that you stay comfortable even when barefoot.</p>
</div>
</div>
<div class="d-none d-md-inline-block col-md-7 position-absolute-top-right-0--md bg-img-hero" style="min-height: 100%; background-image: url(../assets/img/900x450/img5.jpg);"></div>
</div>
</div>
<!-- End History Section -->
<!-- Divider -->
<div class="d-md-none">
<hr class="my-0">
</div>
<!-- End Divider -->
<!-- About Section -->
<div class="position-relative space-2 space-3--lg">
<div class="container">
<div class="row justify-content-md-end align-self-md-center">
<div class="col-md-4">
<h2>Quality over quantity</h2>
<p class="mb-0">At Space, we're building a place where everything from the most immediate details to the big picture are organized. With Space, each person knows what they should be doing and why. This clarity, transparency, and focus allows teams to collaborate with less friction and produce great results.</p>
</div>
</div>
<div class="d-none d-md-inline-block col-md-7 position-absolute-top-left-0--md bg-img-hero" style="min-height: 100%; background-image: url(../assets/img/900x450/img6.jpg);"></div>
</div>
</div>
<!-- End About Section -->