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 Space -->
<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/slick-carousel/slick/slick.js"></script>
<!-- JS Space -->
<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 card-frame 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 card-frame 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 card-frame 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 card-frame 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 card-frame 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 card-frame" 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 Space -->
<script src="../../assets/js/components/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 Space -->
<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 Space -->
<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 -->
Features #15
Build the best
We aim high at being focused on building relationships with our clients and community.
Learn moreHTML:
<!-- Mockup Section -->
<div class="bg-purple bg-img-hero" style="background-image: url(../assets/img/bg/bg2.png);">
<div class="container space-2 space-2-bottom-0--md">
<div class="position-relative w-lg-75 mx-lg-auto">
<!-- SVG Mockup -->
<div class="w-lg-90 w-xl-80 ml-lg-auto">
<object type="image/svg+xml" data="../assets/svg/mockups/laptop-mockup-4.svg" class="d-none d-md-inline-block mb-offset-9"></object>
</div>
<!-- End SVG Mockup -->
<!-- Info -->
<div class="position-absolute-bottom-left-0--md w-md-40 w-xl-35 mb-offset-14">
<div class="bg-white border shadow-sm rounded p-6">
<img class="max-width-10 mb-3" src="../assets/svg/components/develop-purple-icon.svg" alt="Image Description">
<h3 class="h5">Build the best</h3>
<p>We aim high at being focused on building relationships with our clients and community.</p>
<a href="#">
Learn more
<span class="fa fa-angle-right align-middle ml-2"></span>
</a>
</div>
</div>
<!-- End Info -->
</div>
</div>
</div>
<!-- End Mockup Section -->
Features #16
Front-end design & product decisions.
Each Starter and Documentation pages include all the source and compiled files, making deep customization possible. Each page features new components built to match the highest level of quality and re-usability.
HTML:
<!-- Features Section -->
<div class="container">
<div class="row align-items-md-center">
<div class="col-md-5 mb-9 mb-md-0">
<div class="pr-lg-4">
<!-- Title -->
<div class="mb-4">
<h2 class="h3">Front-end design & product decisions.</h2>
<p>Each Starter and Documentation pages include all the source and compiled files, making deep customization possible. Each page features new components built to match the highest level of quality and re-usability.</p>
</div>
<!-- End Title -->
<a href="index.html">
Sign up for a 14-day trial
<span class="fa fa-angle-right ml-2"></span>
</a>
</div>
</div>
<div class="col-md-7">
<object type="image/svg+xml" data="../assets/svg/mockups/laptop-mockup-5.svg"></object>
</div>
</div>
</div>
<!-- End Features Section -->
Features #17
Responsive
Ultimate experience on all devices
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. Enhance your brand with easy to use powerful customization features.
Maria Muszynska
"I love Space! I love the ease of use, I love the fact that I have total creative freedom. The template is really nice and offers quite a large set of options. It's beautiful and the coding is done quickly and seamlessly."
HTML:
<!-- Features Section -->
<div class="bg-gray-100">
<div class="container space-2 space-3--lg">
<div class="row justify-content-lg-between align-items-md-center">
<div class="col-md-6 col-lg-5 order-md-1 mb-9 mb-md-0">
<object type="image/svg+xml" data="../assets/svg/mockups/phone-mockup-3.svg"></object>
</div>
<div class="col-md-6 order-md-2">
<!-- Title -->
<div class="mb-4">
<span class="u-label u-label--sm u-label--purple mb-3">Responsive</span>
<h2 class="h3">Ultimate experience on all devices</h2>
<p>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. Enhance your brand with easy to use powerful customization features.</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 -->
<!-- Divider -->
<div class="max-width-10">
<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">"I love Space! I love the ease of use, I love the fact that I have total creative freedom. The template is really nice and offers quite a large set of options. It's beautiful and the coding is done quickly and seamlessly."</p>
</div>
</div>
<!-- End Review -->
</div>
</div>
</div>
</div>
<!-- End Features Section -->
Features #18
HTML:
<!-- Mockup Section -->
<div class="container">
<div class="w-lg-75 mx-lg-auto">
<object type="image/svg+xml" data="../assets/svg/mockups/browser-mockup-1.svg"></object>
</div>
</div>
<!-- End Mockup Section -->
Features #19
Create your digital account today
This is where we really begin to visualize your napkin sketches and make them into beautiful pixels.
Manage your portfolio
Now that we've aligned the details, it's time to get things mapped out and organized.
Protection your brand
Whether through commerce or just an experience to tell your brand's story.
Mobile apps
Now that your brand is all dressed up and ready to party.
HTML:
<!-- Features Section -->
<div class="container">
<div class="row justify-content-lg-between align-items-md-center">
<div class="col-md-6 col-lg-5 mb-7 mb-md-0">
<!-- Title -->
<div class="mb-7">
<h2>Create your digital account today</h2>
<p>This is where we really begin to visualize your napkin sketches and make them into beautiful pixels.</p>
</div>
<!-- End Title -->
<!-- Icon Block -->
<div class="media mb-3">
<img class="max-width-9" src="../assets/svg/components/portfolio-primary-icon.svg" alt="Image Description">
<div class="media-body pl-4">
<h4 class="h5 mb-1">Manage your portfolio</h4>
<p>Now that we've aligned the details, it's time to get things mapped out and organized.</p>
</div>
</div>
<!-- End Icon Block -->
<!-- Icon Block -->
<div class="media mb-3">
<img class="max-width-9" src="../assets/svg/components/safe-information-blue-icon.svg" alt="Image Description">
<div class="media-body pl-4">
<h4 class="h5 mb-1">Protection your brand</h4>
<p>Whether through commerce or just an experience to tell your brand's story.</p>
</div>
</div>
<!-- End Icon Block -->
<!-- Icon Block -->
<div class="media">
<img class="max-width-9" src="../assets/svg/components/responsive-purple-icon.svg" alt="Image Description">
<div class="media-body pl-4">
<h4 class="h5 mb-1">Mobile apps</h4>
<p>Now that your brand is all dressed up and ready to party.</p>
</div>
</div>
<!-- End Icon Block -->
</div>
<div class="col-md-6 mb-9 mb-md-0">
<object type="image/svg+xml" data="../assets/svg/mockups/phone-mockup-4.svg"></object>
</div>
</div>
</div>
<!-- End Features Section -->
Icon blocks #20
<!-- Icon Blocks Section -->
<div class="container">
<div class="row justify-content-md-between align-items-md-center">
<div class="col-md-6 order-md-2 mb-9 mb-md-0">
<div class="px-lg-5">
<object type="image/svg+xml" data="../assets/svg/mockups/phone-mockup-3.svg"></object>
</div>
</div>
<div class="col-md order-md-1">
<!-- Icon Block -->
<div class="mb-7">
<img class="max-width-9 mb-2" src="../assets/svg/components/plan-primary-icon.svg" alt="Image Description">
<h4 class="h5 text-dark mb-1">Plan</h4>
<p>Now that we've aligned the details, it's time to get things organized.</p>
<a href="#">Learn More <span class="fa fa-angle-right ml-2"></span></a>
</div>
<!-- End Icon Block -->
<!-- Icon Block -->
<div class="mb-7 mb-md-0">
<img class="max-width-9 mb-2" src="../assets/svg/components/create-blue-icon.svg" alt="Image Description">
<h4 class="h5 text-dark mb-1">Create</h4>
<p>The time has come to bring those ideas and plans to life.</p>
<a href="#">Learn More <span class="fa fa-angle-right ml-2"></span></a>
</div>
<!-- End Icon Block -->
</div>
<div class="col-md order-md-3">
<!-- Icon Block -->
<div class="mb-7">
<img class="max-width-9 mb-2" src="../assets/svg/components/develop-purple-icon.svg" alt="Image Description">
<h4 class="h5 text-dark mb-1">Develop</h4>
<p>Whether through commerce or just an experience to tell your brand's story.</p>
<a href="#">Learn More <span class="fa fa-angle-right ml-2"></span></a>
</div>
<!-- End Icon Block -->
<!-- Icon Block -->
<div>
<img class="max-width-9 mb-2" src="../assets/svg/components/rocket-red-icon.svg" alt="Image Description">
<h4 class="h5 text-dark mb-1">Release</h4>
<p>Now that your brand is all dressed up and ready to party.</p>
<a href="#">Learn More <span class="fa fa-angle-right ml-2"></span></a>
</div>
<!-- End Icon Block -->
</div>
</div>
</div>
<!-- End Icon Blocks Section -->
Icon blocks #21
Intuitive search
Now that your brand is all dressed up and ready to party, it's time to release it to the world.
Genius insights
This is where we really begin to visualize your napkin sketches and make them into beautiful pixels.
Predictive analytics
Whether through commerce or just an experience to tell your brand's story.
Watch the video
Or learn how the whole process works here
HTML:
<!-- Features Section -->
<div class="container">
<div class="row justify-content-lg-between">
<div class="col-sm-6 col-lg-4 offset-sm-3 offset-lg-0 mb-4 mb-lg-0">
<!-- Icon Block -->
<div class="text-center px-lg-4">
<img class="max-width-10 mb-2" src="../assets/svg/components/search-browser-primary-icon.svg" alt="Image Description">
<h3 class="h5 mb-1">Intuitive search</h3>
<p>Now that your brand is all dressed up and ready to party, it's time to release it to the world.</p>
</div>
<!-- End Icon Block -->
</div>
<div class="col-sm-6 col-lg-4 mb-4 mb-lg-0">
<!-- Icon Block -->
<div class="text-center px-lg-4">
<img class="max-width-10 mb-2" src="../assets/svg/components/genious-purple-icon.svg" alt="Image Description">
<h4 class="h5 mb-1">Genius insights</h4>
<p>This is where we really begin to visualize your napkin sketches and make them into beautiful pixels.</p>
</div>
<!-- End Icon Block -->
</div>
<div class="col-sm-6 col-lg-4">
<!-- Icon Block -->
<div class="text-center px-lg-4">
<img class="max-width-10 mb-2" src="../assets/svg/components/analytics-blue-icon.svg" alt="Image Description">
<h4 class="h5 mb-1">Predictive analytics</h4>
<p>Whether through commerce or just an experience to tell your brand's story.</p>
</div>
<!-- End Icon Block -->
</div>
</div>
<!-- Divider -->
<div class="w-lg-60 mx-lg-auto">
<hr class="my-9">
</div>
<!-- End Divider -->
<!-- CTA -->
<div class="row justify-content-lg-center align-items-md-center text-center text-md-left">
<div class="col-md-5 text-md-right mb-5 mb-md-0">
<!-- 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>
<div class="col-md-7">
<h3 class="h4 mb-0">Watch the video</h3>
<p class="mb-0">Or learn how <a href="#">the whole process</a> works here</p>
</div>
</div>
<!-- End CTA -->
</div>
<!-- End Features 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 Space -->
<script src="../../assets/js/components/hs.fancybox.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of fancybox
$.HSCore.components.HSFancyBox.init('.js-fancybox');
});
</script>
Icon blocks #22
Key features
Find Out More
Optimize your website experience
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.
Professional design
Achieve virtually any look and layout from within the one template.
Super-light
Find what you need in one template and combine features at will.
Unlimited power
Manage document assembly with sophisticated yet super-light templates.
Qualitative data analysis
Every component and plugin is well documented with live examples.
<!-- Features Section -->
<div class="container">
<div class="row justify-content-lg-between align-items-lg-center">
<div class="col-lg-5 order-lg-1 mb-9 mb-lg-0">
<div class="mb-9">
<!-- Title -->
<div class="mb-4">
<span class="u-label u-label--sm u-label--purple mb-3">Key features</span>
<h2 class="h3">Optimize your website experience</h2>
<p>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>
<!-- End Title -->
<a class="btn btn-sm btn-primary" href="https://themes.getbootstrap.com/product/space-multipurpose-responsive-template/">Find Out More</a>
</div>
<object type="image/svg+xml" data="../assets/svg/mockups/tablet-mockup-3.svg"></object>
</div>
<div class="col-lg-6 order-lg-2">
<div class="card-mb card-sm-columns card-sm-2-count">
<!-- Card -->
<a class="card card-frame card-purple-frame mt-md-5 mb-3" href="#">
<div class="card-body p-5">
<img class="max-width-9 mb-2" src="../assets/svg/components/trophy-purple-icon.svg" alt="Image Description">
<h4 class="h5 text-dark">Professional design</h4>
<p class="mb-0">Achieve virtually any look and layout from within the one template.</p>
</div>
</a>
<!-- End Card -->
<!-- Card -->
<a class="card card-frame card-primary-frame mb-3 mb-sm-0" href="#">
<div class="card-body p-5">
<img class="max-width-9 mb-2" src="../assets/svg/components/idea-primary-icon.svg" alt="Image Description">
<h4 class="h5 text-dark">Super-light</h4>
<p class="mb-0">Find what you need in one template and combine features at will.</p>
</div>
</a>
<!-- End Card -->
<!-- Card -->
<a class="card card-frame card-danger-frame mb-3" href="#">
<div class="card-body p-5">
<img class="max-width-9 mb-2" src="../assets/svg/components/rocket-red-icon.svg" alt="Image Description">
<h4 class="h5 text-dark">Unlimited power</h4>
<p class="mb-0">Manage document assembly with sophisticated yet super-light templates.</p>
</div>
</a>
<!-- End Card -->
<!-- Card -->
<a class="card card-frame card-blue-frame" href="#">
<div class="card-body p-5">
<img class="max-width-9 mb-2" src="../assets/svg/components/data-analysis-blue-icon.svg" alt="Image Description">
<h4 class="h5 text-dark">Qualitative data analysis</h4>
<p class="mb-0">Every component and plugin is well documented with live examples.</p>
</div>
</a>
<!-- End Card -->
</div>
</div>
</div>
</div>
<!-- End Features Section -->
Icon blocks #23
<div class="row justify-content-lg-between">
<div class="col-md-7">
<!-- Gallery -->
<div class="row mx-gutters-2 mb-9 mb-md-0">
<div class="col-6 mb-3">
<img class="img-fluid" src="../../assets/img/700x700/img5.jpg" alt="Image Description">
</div>
<div class="col-4 align-self-end mb-3">
<img class="img-fluid" src="../../assets/img/500x450/img4.jpg" alt="Image Description">
</div>
<div class="w-100"></div>
<div class="col-10 offset-2">
<img class="img-fluid" src="../../assets/img/900x450/img11.jpg" alt="Image Description">
</div>
</div>
<!-- End Gallery -->
</div>
<div class="col-md-5 col-lg-4">
<h3 class="h5">Self-service</h3>
<!-- Icon Blocks -->
<a class="media align-items-center mb-4" href="#">
<span class="u-icon u-icon--md u-icon--shadow rounded-circle p-2 mr-3">
<img class="u-icon__inner" src="../../assets/svg/components/location-dark-icon.svg" alt="Image Description">
</span>
<div class="media-body">
Track & trace
</div>
</a>
<!-- End Icon Blocks -->
<!-- Icon Blocks -->
<a class="media align-items-center mb-4" href="#">
<span class="u-icon u-icon--md u-icon--shadow rounded-circle p-2 mr-3">
<img class="u-icon__inner" src="../../assets/svg/components/request-quote-dark-icon.svg" alt="Image Description">
</span>
<div class="media-body">
Get a quote
</div>
</a>
<!-- End Icon Blocks -->
<!-- Icon Blocks -->
<a class="media align-items-center mb-4" href="#">
<span class="u-icon u-icon--md u-icon--shadow rounded-circle p-2 mr-3">
<img class="u-icon__inner" src="../../assets/svg/components/file-dark-icon.svg" alt="Image Description">
</span>
<div class="media-body">
Purchase order management
</div>
</a>
<!-- End Icon Blocks -->
<!-- Icon Blocks -->
<a class="media align-items-center mb-4" href="#">
<span class="u-icon u-icon--md u-icon--shadow rounded-circle p-2 mr-3">
<img class="u-icon__inner" src="../../assets/svg/components/mouse-dark-icon.svg" alt="Image Description">
</span>
<div class="media-body">
Online booking
</div>
</a>
<!-- End Icon Blocks -->
<!-- Icon Blocks -->
<a class="media align-items-center" href="#">
<span class="u-icon u-icon--md u-icon--shadow rounded-circle p-2 mr-3">
<img class="u-icon__inner" src="../../assets/svg/components/box-dark-icon.svg" alt="Image Description">
</span>
<div class="media-body">
Warehouse management
</div>
</a>
<!-- End Icon Blocks -->
</div>
</div>
Icon blocks #24
We give every parcel its own parcel number. You can use this number to track your parcel in the Parcel Navigator or in our app, and if necessary change the delivery to a different day or place.
As a rule domestic parcels are delivered within two days from the start of the order. With international parcels the delivery time depends on the country of destination. You will find all the information about your parcel in the Parcel Navigator and the DPD App.
As the consignee you decide when or where we deliver the parcel. You can choose from four redirection options in order to have your parcel delivered the way it suits you best.
As an online shipper you will find the parcel number in the order archive and in the confirmation of order in your mailbox. If you have purchased the parcel label at a Pickup parcelshop, you will find the parcel number on the receipt which is issued. As the consignee, for each shipment you will normally receive an email with the parcel number. If we failed to locate you at home when the delivery was made, you will also find the parcel number on the parcel notification card we leave in your letterbox.
Our Pickup parcelshop finder will enable you to find the Pickup parcelshops in your area. Choose your preferences from 6,000 Pickup parcelshops in Germany and 28,000 throughout Europe.
<!-- FAQ Section -->
<div class="container space-2 space-3--md">
<div class="row justify-content-lg-between">
<div class="col-md-6 col-lg-5 mb-7 mb-md-0">
<!-- Title -->
<div class="mb-9">
<span class="u-label u-label--sm u-label--purple mb-3">FAQ</span>
<h2>Have a question about your next move?</h2>
</div>
<!-- End Title -->
<!-- Contact Info -->
<div class="media align-items-center mb-5">
<img class="max-width-7 mr-3" src="../../assets/svg/components/contacts-dark-icon.svg" alt="Image Description">
<div class="media-body">
<span class="d-block text-secondary small text-uppercase">Phone</span>
<a class="text-dark" href="mailto:support@htmlstream.com">+1 122 899 00 00</a>
</div>
</div>
<!-- End Contact Info -->
<!-- Contact Info -->
<div class="media align-items-center">
<img class="max-width-7 mr-3" src="../../assets/svg/components/email-dark-icon.svg" alt="Image Description">
<div class="media-body">
<span class="d-block text-secondary small text-uppercase">Email</span>
<a class="text-dark" href="mailto:support@htmlstream.com">support@htmlstream.com</a>
</div>
</div>
<!-- End Contact Info -->
</div>
<div class="col-md-6">
<!-- Accordion -->
<div id="basicsAccordion">
<div class="card border-0 mb-3">
<div class="card-header card-collapse__header" id="basicsHeadingOne">
<h5 class="mb-0">
<button class="btn btn-link btn-block font-weight-medium d-flex justify-content-between card-collapse__btn"
data-toggle="collapse"
data-target="#basicsCollapseOne"
aria-expanded="true"
aria-controls="basicsCollapseOne">
Where is my parcel?
<span class="card-collapse__btn-arrow">
<span class="fa fa-arrow-down small"></span>
</span>
</button>
</h5>
</div>
<div id="basicsCollapseOne" class="collapse show"
aria-labelledby="basicsHeadingOne"
data-parent="#basicsAccordion">
<div class="card-body card-collapse__body px-0">
We give every parcel its own parcel number. You can use this number to track your parcel in the Parcel Navigator or in our app, and if necessary change the delivery to a different day or place.
</div>
</div>
</div>
<div class="card border-0 mb-3">
<div class="card-header card-collapse__header" id="basicsHeadingTwo">
<h5 class="mb-0">
<button class="btn btn-link btn-block font-weight-medium d-flex justify-content-between card-collapse__btn collapsed"
data-toggle="collapse"
data-target="#basicsCollapseTwo"
aria-expanded="false"
aria-controls="basicsCollapseTwo">
When will my parcel be delivered?
<span class="card-collapse__btn-arrow">
<span class="fa fa-arrow-down small"></span>
</span>
</button>
</h5>
</div>
<div id="basicsCollapseTwo" class="collapse"
aria-labelledby="basicsHeadingTwo"
data-parent="#basicsAccordion">
<div class="card-body card-collapse__body px-0">
As a rule domestic parcels are delivered within two days from the start of the order. With international parcels the delivery time depends on the country of destination. You will find all the information about your parcel in the Parcel Navigator and the DPD App.
</div>
</div>
</div>
<div class="card border-0 mb-3">
<div class="card-header card-collapse__header" id="basicsHeadingThree">
<h5 class="mb-0">
<button class="btn btn-link btn-block font-weight-medium d-flex justify-content-between card-collapse__btn collapsed"
data-toggle="collapse"
data-target="#basicsCollapseThree"
aria-expanded="false"
aria-controls="basicsCollapseThree">
How can I change the place or day of delivery?
<span class="card-collapse__btn-arrow">
<span class="fa fa-arrow-down small"></span>
</span>
</button>
</h5>
</div>
<div id="basicsCollapseThree" class="collapse"
aria-labelledby="basicsHeadingThree"
data-parent="#basicsAccordion">
<div class="card-body card-collapse__body px-0">
As the consignee you decide when or where we deliver the parcel. You can choose from four redirection options in order to have your parcel delivered the way it suits you best.
</div>
</div>
</div>
<div class="card border-0 mb-3">
<div class="card-header card-collapse__header" id="basicsHeadingFour">
<h5 class="mb-0">
<button class="btn btn-link btn-block font-weight-medium d-flex justify-content-between card-collapse__btn collapsed"
data-toggle="collapse"
data-target="#basicsCollapseFour"
aria-expanded="false"
aria-controls="basicsCollapseFour">
Where do I find the parcel number?
<span class="card-collapse__btn-arrow">
<span class="fa fa-arrow-down small"></span>
</span>
</button>
</h5>
</div>
<div id="basicsCollapseFour" class="collapse"
aria-labelledby="basicsHeadingFour"
data-parent="#basicsAccordion">
<div class="card-body card-collapse__body px-0">
As an online shipper you will find the parcel number in the order archive and in the confirmation of order in your mailbox. If you have purchased the parcel label at a Pickup parcelshop, you will find the parcel number on the receipt which is issued. As the consignee, for each shipment you will normally receive an email with the parcel number. If we failed to locate you at home when the delivery was made, you will also find the parcel number on the parcel notification card we leave in your letterbox.
</div>
</div>
</div>
<div class="card border-0 mb-3">
<div class="card-header card-collapse__header" id="basicsHeadingFive">
<h5 class="mb-0">
<button class="btn btn-link btn-block font-weight-medium d-flex justify-content-between card-collapse__btn collapsed"
data-toggle="collapse"
data-target="#basicsCollapseFive"
aria-expanded="false"
aria-controls="basicsCollapseFive">
Where is the nearest Pickup parcelshop to me?
<span class="card-collapse__btn-arrow">
<span class="fa fa-arrow-down small"></span>
</span>
</button>
</h5>
</div>
<div id="basicsCollapseFive" class="collapse"
aria-labelledby="basicsHeadingFive"
data-parent="#basicsAccordion">
<div class="card-body card-collapse__body px-0">
Our <a href="#">Pickup parcelshop finder</a> will enable you to find the Pickup parcelshops in your area. Choose your preferences from 6,000 Pickup parcelshops in Germany and 28,000 throughout Europe.
</div>
</div>
</div>
</div>
<!-- End Accordion -->
</div>
</div>
</div>
<!-- End FAQ Section -->