Icon Blocks
Start building your website with dozens of ready-to-use icon blocks.
Icon blocks #1
Professional Design
Achieve virtually any look and layout from within the one template.
Super-Light
Manage document assembly with sophisticated yet super-light templates.
Unlimited Power
Find what you need in one template and combine features at will.
<!-- Icon Blocks Section -->
<div class="container space-2 space-3--lg">
<div class="row">
<div class="col-md-4 mb-7 mb-md-0">
<!-- Icon Blocks -->
<div class="text-center px-lg-3">
<img class="max-width-14 mb-2" src="../assets/svg/components/trophy-purple-icon.svg" alt="Image Description">
<h3 class="h4">Professional Design</h3>
<p class="mb-0">Achieve virtually any look and layout from within the one template.</p>
</div>
<!-- End Icon Blocks -->
</div>
<div class="col-md-4 mb-7 mb-md-0">
<!-- Icon Blocks -->
<div class="text-center px-lg-3">
<img class="max-width-14 mb-2" src="../assets/svg/components/idea-primary-icon.svg" alt="Image Description">
<h3 class="h4">Super-Light</h3>
<p class="mb-0">Manage document assembly with sophisticated yet super-light templates.</p>
</div>
<!-- End Icon Blocks -->
</div>
<div class="col-md-4">
<!-- Icon Blocks -->
<div class="text-center px-lg-3">
<img class="max-width-14 mb-2" src="../assets/svg/components/rocket-red-icon.svg" alt="Image Description">
<h3 class="h4">Unlimited Power</h3>
<p class="mb-0">Find what you need in one template and combine features at will.</p>
</div>
<!-- End Icon Blocks -->
</div>
</div>
</div>
<!-- End Icon Blocks Section -->
Icon blocks #2
<!-- Icon Blocks Section -->
<div class="bg-gray-100">
<div class="container space-2 space-3--lg">
<div class="row justify-content-center">
<div class="col-6 col-sm-4 col-lg mb-5 mb-lg-0">
<!-- Icon Block -->
<a class="d-block card-frame bg-white text-center rounded py-7 px-5" href="#">
<img class="d-block max-width-12 mx-auto mb-4" src="../assets/svg/components/plan-brown-icon.svg" alt="SVG">
<h3 class="h6 text-dark mb-0">Marketing</h3>
</a>
<!-- End Icon Block -->
</div>
<div class="col-6 col-sm-4 col-lg mb-5 mb-sm-0">
<!-- Icon Block -->
<a class="d-block card-frame bg-white text-center rounded py-7 px-5" href="#">
<img class="d-block max-width-12 mx-auto mb-4" src="../assets/svg/components/cog-primary-icon.svg" alt="SVG">
<h3 class="h6 text-dark mb-0">Operations</h3>
</a>
<!-- End Icon Block -->
</div>
<div class="col-6 col-sm-4 col-lg mb-5 mb-sm-0">
<!-- Icon Block -->
<a class="d-block card-frame bg-white text-center rounded py-7 px-5" href="#">
<img class="d-block max-width-12 mx-auto mb-4" src="../assets/svg/components/arrow-red-icon.svg" alt="SVG">
<h3 class="h6 text-dark mb-0">HR</h3>
</a>
<!-- End Icon Block -->
</div>
<div class="col-6 col-sm-4 col-lg mb-5 mb-sm-0">
<!-- Icon Block -->
<a class="d-block card-frame bg-white text-center rounded py-7 px-5" href="#">
<img class="d-block max-width-12 mx-auto mb-4" src="../assets/svg/components/legal-purple-icon.svg" alt="SVG">
<h3 class="h6 text-dark mb-0">Legal</h3>
</a>
<!-- End Icon Block -->
</div>
<div class="col-6 col-sm-4 col-lg">
<!-- Icon Block -->
<a class="d-block card-frame bg-white text-center rounded py-7 px-5" href="#">
<img class="d-block max-width-12 mx-auto mb-4" src="../assets/svg/components/finance-blue-icon.svg" alt="SVG">
<h3 class="h6 text-dark mb-0">Finance</h3>
</a>
<!-- End Icon Block -->
</div>
</div>
</div>
</div>
<!-- End Icon Blocks Section -->
Icon blocks #3
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.
Learn More
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.
Learn More
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.
Learn More
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.
Learn More
<div class="row">
<div class="col-sm-6 mb-7 mb-sm-9">
<!-- Icon Block -->
<div class="pr-lg-4">
<img class="max-width-9 mb-2" src="../assets/svg/components/consult-primary-icon.svg" alt="Image Description">
<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>
<a href="#">
Learn More
<span class="fa fa-angle-right align-middle ml-2"></span>
</a>
</div>
<!-- End Icon Block -->
</div>
<div class="col-sm-6 mb-7 mb-sm-9">
<!-- Icon Block -->
<div class="pr-lg-4">
<img class="max-width-9 mb-2" src="../assets/svg/components/plan-brown-icon.svg" alt="Image Description">
<p>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>
<a href="#">
Learn More
<span class="fa fa-angle-right align-middle ml-2"></span>
</a>
</div>
<!-- End Icon Block -->
</div>
<div class="col-sm-6 mb-7 mb-sm-0">
<!-- Icon Block -->
<div class="pr-lg-4">
<img class="max-width-9 mb-2" src="../assets/svg/components/create-blue-icon.svg" alt="Image Description">
<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>
<a href="#">
Learn More
<span class="fa fa-angle-right align-middle ml-2"></span>
</a>
</div>
<!-- End Icon Block -->
</div>
<div class="col-sm-6">
<!-- Icon Block -->
<div class="pr-lg-4">
<img class="max-width-9 mb-2" src="../assets/svg/components/develop-purple-icon.svg" alt="Image Description">
<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>
<a href="#">
Learn More
<span class="fa fa-angle-right align-middle ml-2"></span>
</a>
</div>
<!-- End Icon Block -->
</div>
</div>
Icon blocks #4
<div class="card-deck d-block d-lg-flex card-lg-gutters-2">
<div class="card card-frame mb-3">
<!-- Listing -->
<a class="card-body p-4" href="#">
<div class="media">
<img class="max-width-9 mb-2" src="../assets/svg/components/consult-cyan-icon.svg" alt="Image Description">
<div class="media-body px-4">
<h4 class="h6 text-dark mb-1">Consult</h4>
<p class="mb-0">This is where we sit down, grab a cup of coffee and dial in the details.</p>
</div>
</div>
</a>
<!-- End Listing -->
</div>
<div class="card card-frame mb-3">
<!-- Listing -->
<a class="card-body p-4" href="#">
<div class="media">
<img class="max-width-9 mb-2" src="../assets/svg/components/plan-brown-icon.svg" alt="Image Description">
<div class="media-body px-4">
<h4 class="h6 text-dark mb-1">Plan</h4>
<p>Now that we've aligned the details, it's time to get things mapped out and organized.</p>
</div>
</div>
</a>
<!-- End Listing -->
</div>
<div class="card card-frame mb-3">
<!-- Listing -->
<a class="card-body p-4" href="#">
<div class="media">
<img class="max-width-9 mb-2" src="../assets/svg/components/create-blue-icon.svg" alt="Image Description">
<div class="media-body px-4">
<h4 class="h6 text-dark mb-1">Create</h4>
<p>The time has come to bring those ideas and plans to life.</p>
</div>
</div>
</a>
<!-- End Listing -->
</div>
</div>
<div class="card-deck d-block d-lg-flex card-lg-gutters-2">
<div class="card card-frame mb-3">
<!-- Listing -->
<a class="card-body p-4" href="#">
<div class="media">
<img class="max-width-9 mb-2" src="../assets/svg/components/develop-purple-icon.svg" alt="Image Description">
<div class="media-body px-4">
<h4 class="h6 text-dark mb-1">Develop</h4>
<p>Whether through commerce or just an experience to tell your brand's story.</p>
</div>
</div>
</a>
<!-- End Listing -->
</div>
<div class="card card-frame mb-3">
<!-- Listing -->
<a class="card-body p-4" href="#">
<div class="media">
<img class="max-width-9 mb-2" src="../assets/svg/components/rocket-red-icon.svg" alt="Image Description">
<div class="media-body px-4">
<h4 class="h6 text-dark mb-1">Release</h4>
<p>Now that your brand is all dressed up and ready to party.</p>
</div>
</div>
</a>
<!-- End Listing -->
</div>
<div class="card card-frame mb-3">
<!-- Listing -->
<a class="card-body p-4" href="#">
<div class="media">
<img class="max-width-9 mb-2" src="../assets/svg/components/data-analysis-dark-icon.svg" alt="Image Description">
<div class="media-body px-4">
<h4 class="h6 text-dark mb-1">Maintain</h4>
<p>We get it, you're busy and it's important that someone keeps up with marketing.</p>
</div>
</div>
</a>
<!-- End Listing -->
</div>
</div>
Icon blocks #5
Consult
This is where we sit down, grab a cup of coffee and dial in the details.
Plan
Now that we've aligned the details, it's time to get things mapped out and organized.
Create
The time has come to bring those ideas and plans to life.
Develop
Whether through commerce or just an experience to tell your brand's story.
Release
Now that your brand is all dressed up and ready to party.
Maintain
We get it, you're busy and it's important that someone keeps up with marketing.
<!-- Features Section -->
<div class="container position-relative z-index-2">
<div class="bg-gray-100 shadow-lg rounded mt-n9">
<div class="card-deck d-block d-lg-flex card-lg-gutters-1">
<div class="card border-0 mb-2">
<!-- Listing -->
<div class="card-body p-4">
<div class="media">
<img class="max-width-9 mb-2" src="../assets/svg/components/consult-cyan-icon.svg" alt="Image Description">
<div class="media-body px-4">
<h2 class="h6 text-dark mb-1">Consult</h2>
<p class="mb-0">This is where we sit down, grab a cup of coffee and dial in the details.</p>
</div>
</div>
</div>
<!-- End Listing -->
</div>
<div class="card border-0 mb-2">
<!-- Listing -->
<div class="card-body p-4">
<div class="media">
<img class="max-width-9 mb-2" src="../assets/svg/components/plan-brown-icon.svg" alt="Image Description">
<div class="media-body px-4">
<h3 class="h6 text-dark mb-1">Plan</h3>
<p class="mb-0">Now that we've aligned the details, it's time to get things mapped out and organized.</p>
</div>
</div>
</div>
<!-- End Listing -->
</div>
<div class="card border-0 mb-2">
<!-- Listing -->
<div class="card-body p-4">
<div class="media">
<img class="max-width-9 mb-2" src="../assets/svg/components/create-blue-icon.svg" alt="Image Description">
<div class="media-body px-4">
<h4 class="h6 text-dark mb-1">Create</h4>
<p class="mb-0">The time has come to bring those ideas and plans to life.</p>
</div>
</div>
</div>
<!-- End Listing -->
</div>
</div>
<div class="card-deck d-block d-lg-flex card-lg-gutters-1">
<div class="card border-0 mb-2 mb-lg-0">
<!-- Listing -->
<div class="card-body p-4">
<div class="media">
<img class="max-width-9 mb-2" src="../assets/svg/components/develop-purple-icon.svg" alt="Image Description">
<div class="media-body px-4">
<h4 class="h6 text-dark mb-1">Develop</h4>
<p class="mb-0">Whether through commerce or just an experience to tell your brand's story.</p>
</div>
</div>
</div>
<!-- End Listing -->
</div>
<div class="card border-0 mb-2 mb-lg-0">
<!-- Listing -->
<div class="card-body p-4">
<div class="media">
<img class="max-width-9 mb-2" src="../assets/svg/components/rocket-red-icon.svg" alt="Image Description">
<div class="media-body px-4">
<h4 class="h6 text-dark mb-1">Release</h4>
<p class="mb-0">Now that your brand is all dressed up and ready to party.</p>
</div>
</div>
</div>
<!-- End Listing -->
</div>
<div class="card border-0 mb-0">
<!-- Listing -->
<div class="card-body p-4">
<div class="media">
<img class="max-width-9 mb-2" src="../assets/svg/components/data-analysis-dark-icon.svg" alt="Image Description">
<div class="media-body px-4">
<h4 class="h6 text-dark mb-1">Maintain</h4>
<p class="mb-0">We get it, you're busy and it's important that someone keeps up with marketing.</p>
</div>
</div>
</div>
<!-- End Listing -->
</div>
</div>
</div>
</div>
<!-- End Features Section -->
Icon blocks #6
Documentation
Read the developer's guide to the Space to get started on your integration.
Learn More
<!-- Features Section -->
<div class="container text-center space-2 space-3--lg">
<div class="row">
<div class="col-sm-6 col-lg-4 offset-sm-3 offset-lg-0 order-lg-2 mb-7 mb-sm-0">
<!-- Icon Block -->
<div class="bg-primary text-center rounded py-9 p-5">
<img class="max-width-10 mb-2" src="../assets/svg/components/branding-white-icon.svg" alt="Image Description">
<h2 class="h4 text-white">Branding</h2>
<p class="text-white">Using our creative works drives this branding foundation.</p>
<a class="text-white" href="#">
Learn More
<span class="fa fa-angle-right align-middle ml-2"></span>
</a>
</div>
<!-- End Icon Block -->
</div>
<div class="col-sm-6 col-lg-4 order-lg-1">
<!-- Icon Block -->
<div class="text-center py-sm-9 p-5">
<img class="max-width-10 mb-2" src="../assets/svg/components/documentation-primary-icon.svg" alt="Image Description">
<h2 class="h4 text-dark">Documentation</h2>
<p>Read the developer's guide to the Space to get started on your integration.</p>
<a href="#">
Learn More
<span class="fa fa-angle-right align-middle ml-2"></span>
</a>
</div>
<!-- End Icon Block -->
</div>
<div class="col-sm-6 col-lg-4 order-lg-3">
<!-- Icon Block -->
<div class="text-center py-sm-9 p-5">
<img class="max-width-10 mb-2" src="../assets/svg/components/news-primary-icon.svg" alt="Image Description">
<h2 class="h4 text-dark">News</h2>
<p>See the latest updates to our features, designs and many more.</p>
<a href="#">
Learn More
<span class="fa fa-angle-right align-middle ml-2"></span>
</a>
</div>
<!-- End Icon Block -->
</div>
</div>
</div>
<!-- End Features Section -->
Icon blocks #7
<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>
Icon blocks #8
Why do you need it?
All the information you need at your fingertips
Choose what information is displayed on your Summary page. Create templates that work for you and your practice. You can even customize and update them on the fly! Edit and manage Case.one to truly fit your needs as your practice grows.
<!-- Features Section -->
<div class="container">
<div class="row justify-content-lg-between align-items-md-center">
<div class="col-md-6 order-md-2 mb-9 mb-md-0">
<div class="mb-4">
<span class="u-label u-label--sm u-label--purple mb-3">Why do you need it?</span>
<h2 class="h3">All the information you need at your fingertips</h2>
<p>Choose what information is displayed on your Summary page. Create templates that work for you and your practice. You can even customize and update them on the fly! Edit and manage Case.one to truly fit your needs as your practice grows.</p>
</div>
</div>
<div class="col-md-5 order-md-1">
<img class="w-100" src="../assets/svg/components/information-icon.svg" alt="Image Description">
</div>
</div>
</div>
<!-- End Features Section -->
Icon blocks #9
<!-- Features Section -->
<div class="container space-2 space-3--lg">
<div class="card-deck d-block d-md-flex card-md-gutters-2">
<!-- Features -->
<a class="card card-frame mb-3" href="#">
<div class="card-body p-5">
<div class="media">
<img class="max-width-10 mr-3" src="../assets/svg/components/plan-brown-icon.svg" alt="Image Description">
<div class="media-body">
<h3 class="h6 text-dark">Feedback management</h3>
<span class="d-block">
Learn More
<span class="fa fa-angle-right ml-2"></span>
</span>
</div>
</div>
</div>
</a>
<!-- End Features -->
<!-- Features -->
<a class="card card-frame mb-3" href="#">
<div class="card-body p-5">
<div class="media">
<img class="max-width-10 mr-3" src="../assets/svg/components/user-research-purple-icon.svg" alt="Image Description">
<div class="media-body">
<h3 class="h6 text-dark">User research repository</h3>
<span class="d-block">
Learn More
<span class="fa fa-angle-right ml-2"></span>
</span>
</div>
</div>
</div>
</a>
<!-- End Features -->
</div>
<div class="card-deck d-block d-md-flex card-md-gutters-2">
<!-- Features -->
<a class="card card-frame" href="#">
<div class="card-body p-5">
<div class="media">
<img class="max-width-10 mr-3" src="../assets/svg/components/collaborative-user-research-blue-icon.svg" alt="Image Description">
<div class="media-body">
<h3 class="h6 text-dark">Collaborative user research</h3>
<span class="d-block">
Learn More
<span class="fa fa-angle-right ml-2"></span>
</span>
</div>
</div>
</div>
</a>
<!-- End Features -->
<!-- Features -->
<a class="card card-frame mb-3 mb-md-0" href="#">
<div class="card-body p-5">
<div class="media">
<img class="max-width-10 mr-3" src="../assets/svg/components/data-analysis-red-icon.svg" alt="Image Description">
<div class="media-body">
<h3 class="h6 text-dark">Qualitative data analysis</h3>
<span class="d-block">
Learn More
<span class="fa fa-angle-right ml-2"></span>
</span>
</div>
</div>
</div>
</a>
<!-- End Features -->
</div>
</div>
<!-- End Features Section -->
Icon blocks #10
Professional design
Achieve virtually any look and layout from within the one template.
Unlimited power
Find what you need in one template and combine features at will.
Super-light
Manage document assembly with sophisticated yet super-light templates.
Fully documented
Every component and plugin is well documented with live examples.
Premium images
Premium stock images are included with your purchase in the download package.
Social services
We strive to figure out ways to help your audience grow through all social platforms.
<!-- Features Section -->
<div class="container space-2 space-3--lg">
<div class="row">
<div class="col-md-6 mb-9">
<!-- Features -->
<div class="media pr-lg-4">
<img class="max-width-10 mr-3" src="../assets/svg/components/trophy-purple-icon.svg" alt="Image Description">
<div class="media-body">
<h3 class="h6">Professional design</h3>
<p class="mb-0">Achieve virtually any look and layout from within the one template.</p>
</div>
</div>
<!-- End Features -->
</div>
<div class="col-md-6 mb-9">
<!-- Features -->
<div class="media pl-lg-4">
<img class="max-width-10 mr-3" src="../assets/svg/components/rocket-cyan-icon.svg" alt="Image Description">
<div class="media-body">
<h3 class="h6">Unlimited power</h3>
<p class="mb-0">Find what you need in one template and combine features at will.</p>
</div>
</div>
<!-- End Features -->
</div>
<div class="w-100"></div>
<div class="col-md-6 mb-9">
<!-- Features -->
<div class="media pr-lg-4">
<img class="max-width-10 mr-3" src="../assets/svg/components/idea-primary-icon.svg" alt="Image Description">
<div class="media-body">
<h3 class="h6">Super-light</h3>
<p class="mb-0">Manage document assembly with sophisticated yet super-light templates.</p>
</div>
</div>
<!-- End Features -->
</div>
<div class="col-md-6 mb-9">
<!-- Features -->
<div class="media pl-lg-4">
<img class="max-width-10 mr-3" src="../assets/svg/components/documentation-red-icon.svg" alt="Image Description">
<div class="media-body">
<h3 class="h6">Fully documented</h3>
<p class="mb-0">Every component and plugin is well documented with live examples.</p>
</div>
</div>
<!-- End Features -->
</div>
<div class="w-100"></div>
<div class="col-md-6 mb-9 mb-md-0">
<!-- Features -->
<div class="media pr-lg-4">
<img class="max-width-10 mr-3" src="../assets/svg/components/secure-payment-brown-icon.svg" alt="Image Description">
<div class="media-body">
<h3 class="h6">Premium images</h3>
<p class="mb-0">Premium stock images are included with your purchase in the download package.</p>
</div>
</div>
<!-- End Features -->
</div>
<div class="col-md-6">
<!-- Features -->
<div class="media pl-lg-4">
<img class="max-width-10 mr-3" src="../assets/svg/components/social-services-dark-icon.svg" alt="Image Description">
<div class="media-body">
<h3 class="h6">Social services</h3>
<p class="mb-0">We strive to figure out ways to help your audience grow through all social platforms.</p>
</div>
</div>
<!-- End Features -->
</div>
</div>
</div>
<!-- End Features Section -->
Icon blocks #11
Space strategy
We strive to figure out ways to help your audience grow through all platforms.
Get Started
<div class="container space-2 space-3--lg">
<div class="row">
<div class="col-lg-6 mb-7 mb-lg-0">
<!-- Features -->
<div class="media align-items-center">
<img class="max-width-18 mr-3" src="../assets/svg/components/trophy-primary-icon.svg" alt="Image Description">
<div class="media-body">
<h3 class="h5">Professional design</h3>
<p>Achieve virtually any look and layout from within the one template.</p>
<a href="#">Learn More</a>
</div>
</div>
<!-- End Features -->
</div>
<div class="col-lg-6 mb-7 mb-lg-0">
<!-- Features -->
<div class="media align-items-center">
<img class="max-width-18 mr-3" src="../assets/svg/components/services-primary-icon.svg" alt="Image Description">
<div class="media-body">
<h3 class="h5">Space strategy</h3>
<p>We strive to figure out ways to help your audience grow through all platforms.</p>
<a href="#">Get Started</a>
</div>
</div>
<!-- End Features -->
</div>
</div>
</div>
Icon blocks #12
About Us
We always welcome keen to learn folks to our team
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.
<!-- About 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-9 mb-lg-0">
<!-- Title -->
<span class="u-label u-label--sm u-label--purple mb-3">About Us</span>
<h2 class="h3">We always welcome keen to learn folks to our team</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>
<!-- End Title -->
</div>
<div class="col-lg-6">
<div class="row">
<div class="col-6 col-sm-4 mb-7">
<!-- Icon Block -->
<div class="text-center">
<h3 class="h5">
<a class="d-block" href="#">
<img class="d-block max-width-12 mx-auto mb-1" src="../assets/svg/components/plan-brown-icon.svg" alt="SVG">
Marketing
</a>
</h3>
</div>
<!-- End Icon Block -->
</div>
<div class="col-6 col-sm-4 mb-7">
<!-- Icon Block -->
<div class="text-center">
<h3 class="h5">
<a class="d-block" href="#">
<img class="d-block max-width-12 mx-auto mb-1" src="../assets/svg/components/cog-primary-icon.svg" alt="SVG">
Operations
</a>
</h3>
</div>
<!-- End Icon Block -->
</div>
<div class="col-6 col-sm-4 mb-7">
<!-- Icon Block -->
<div class="text-center">
<h3 class="h5">
<a class="d-block" href="#">
<img class="d-block max-width-12 mx-auto mb-1" src="../assets/svg/components/arrow-red-icon.svg" alt="SVG">
HR
</a>
</h3>
</div>
<!-- End Icon Block -->
</div>
<div class="col-6 col-sm-4 mb-7 mb-sm-0">
<!-- Icon Block -->
<div class="text-center">
<h3 class="h5">
<a class="d-block" href="#">
<img class="d-block max-width-12 mx-auto mb-1" src="../assets/svg/components/legal-purple-icon.svg" alt="SVG">
Legal
</a>
</h3>
</div>
<!-- End Icon Block -->
</div>
<div class="col-6 col-sm-4">
<!-- Icon Block -->
<div class="text-center">
<h3 class="h5">
<a class="d-block" href="#">
<img class="d-block max-width-12 mx-auto mb-1" src="../assets/svg/components/finance-blue-icon.svg" alt="SVG">
Finance
</a>
</h3>
</div>
<!-- End Icon Block -->
</div>
<div class="col-6 col-sm-4">
<!-- Icon Block -->
<div class="text-center">
<h3 class="h5">
<a class="d-block" href="#">
<img class="d-block max-width-12 mx-auto mb-1" src="../assets/svg/components/portfolio-dark-icon.svg" alt="SVG">
Custom work
</a>
</h3>
</div>
<!-- End Icon Block -->
</div>
</div>
</div>
</div>
</div>
<!-- End About Section -->
Icon blocks #13
Key benefits
The benefits of working at Space
Our team strives to help new members reach their unlimited potential every day.
At Space, we don't just accept difference—we celebrate it, we support it, and we thrive on it for the benefit of our employees, our products, and our community.
Competitive salary
We believe that skill and hard work deserve generous compensation.
Gear
We'll provide everything you need to do what you do.
Skilled colleagues
You'll have the opportunity to work with talented, intelligent and driven colleagues.
Team-building
Whether it's movie nights, Friday beers, or a company trip to Thailand, we love bonding with our team.
<!-- Icon Blocks -->
<div class="container position-relative space-2 space-3--lg">
<div class="row ">
<div class="col-lg-5 mb-9 mb-lg-0">
<div class="pr-lg-4">
<!-- Title -->
<span class="u-label u-label--sm u-label--purple mb-3">Key benefits</span>
<h2 class="h3">The benefits of working at Space</h2>
<p>Our team strives to help new members reach their unlimited potential every day.</p>
<p>At Space, we don't just accept difference—we celebrate it, we support it, and we thrive on it for the benefit of our employees, our products, and our community.</p>
<!-- End Title -->
</div>
</div>
<div class="col-lg-7">
<div class="row">
<div class="col-md-6 mb-7">
<!-- Icon Blocks -->
<img class="max-width-10 mb-2" src="../assets/svg/components/money-purple-icon.svg" alt="Image Description">
<h3 class="h5">Competitive salary</h3>
<p class="mb-0">We believe that skill and hard work deserve generous compensation.</p>
<!-- End Icon Blocks -->
</div>
<div class="col-md-6 mb-7">
<!-- Icon Blocks -->
<img class="max-width-10 mb-2" src="../assets/svg/components/cog-primary-icon.svg" alt="Image Description">
<h3 class="h5">Gear</h3>
<p class="mb-0">We'll provide everything you need to do what you do.</p>
<!-- End Icon Blocks -->
</div>
<div class="col-md-6 mb-7 mb-md-0">
<!-- Icon Blocks -->
<img class="max-width-10 mb-2" src="../assets/svg/components/team-red-icon.svg" alt="Image Description">
<h3 class="h5">Skilled colleagues</h3>
<p class="mb-0">You'll have the opportunity to work with talented, intelligent and driven colleagues.</p>
<!-- End Icon Blocks -->
</div>
<div class="col-md-6">
<!-- Icon Blocks -->
<img class="max-width-10 mb-2" src="../assets/svg/components/plan-brown-icon.svg" alt="Image Description">
<h3 class="h5">Team-building</h3>
<p class="mb-0">Whether it's movie nights, Friday beers, or a company trip to Thailand, we love bonding with our team.</p>
<!-- End Icon Blocks -->
</div>
</div>
</div>
</div>
<img class="d-none d-lg-block w-lg-50 position-absolute-bottom-left-0 z-index-minus-1" src="../assets/img/bg/bg3.png" alt="Image Description">
</div>
<!-- End Icon Blocks -->
Icon blocks #14
Call us
+1 (062) 109-9222
Email us
support@htmlstream.com
Address
153 Williamson Plaza, Maggieberg
<!-- Contact Us -->
<div class="container">
<div class="row space-2">
<div class="col-md-4 mb-7 mb-md-0">
<!-- Coins Name -->
<div class="media">
<img class="max-width-9 mr-2" src="../assets/svg/components/contacts-primary-icon.svg" alt="Image Description">
<div class="media-body">
<h4 class="text-secondary font-size-14 mb-0">Call us</h4>
<span class="d-block font-size-14">+1 (062) 109-9222</span>
</div>
</div>
<!-- End Coins Name -->
</div>
<div class="col-md-4 mb-7 mb-md-0">
<!-- Coins Name -->
<div class="media">
<img class="max-width-9 mr-2" src="../assets/svg/components/email-primary-icon.svg" alt="Image Description">
<div class="media-body">
<h4 class="text-secondary font-size-14 mb-0">Email us</h4>
<span class="d-block font-size-14">support@htmlstream.com</span>
</div>
</div>
<!-- End Coins Name -->
</div>
<div class="col-md-4 mb-7 mb-md-0">
<!-- Coins Name -->
<div class="media">
<img class="max-width-9 mr-2" src="../assets/svg/components/location-primary-icon.svg" alt="Image Description">
<div class="media-body">
<h4 class="text-secondary font-size-14 mb-0">Address</h4>
<span class="d-block font-size-14">153 Williamson Plaza, Maggieberg</span>
</div>
</div>
<!-- End Coins Name -->
</div>
</div>
</div>
<!-- End Contact Us -->
Icon blocks #15
-
Employee type:
Full-time -
Location:
San Francisco -
Job type:
Product Management -
Experience:
Not specified -
Salary:
$50-$75k -
Date posted:
June 11, 2018
<!-- Contacts List -->
<ul class="list-unstyled">
<li class="media align-items-center pb-2">
<img class="max-width-6 mr-3" src="../assets/svg/components/user-type-dark-icon.svg" alt="Image Description">
<div class="media-body">
<h3 class="h6 mb-0">Employee type:</h3>
<small class="text-secondary">Full-time</small>
</div>
</li>
<li class="dropdown-divider"></li>
<li class="media align-items-center pb-2">
<img class="max-width-6 mr-3" src="../assets/svg/components/location-dark-icon.svg" alt="Image Description">
<div class="media-body">
<h3 class="h6 mb-0">Location:</h3>
<a class="small text-secondary" href="#">San Francisco</a>
</div>
</li>
<li class="dropdown-divider"></li>
<li class="media align-items-center pb-2">
<img class="max-width-6 mr-3" src="../assets/svg/components/services-dark-icon.svg" alt="Image Description">
<div class="media-body">
<h3 class="h6 mb-0">Job type:</h3>
<small class="text-secondary">Product Management</small>
</div>
</li>
<li class="dropdown-divider"></li>
<li class="media align-items-center pb-2">
<img class="max-width-6 mr-3" src="../assets/svg/components/portfolio-dark-icon.svg" alt="Image Description">
<div class="media-body">
<h3 class="h6 mb-0">Experience:</h3>
<small class="text-secondary">Not specified</small>
</div>
</li>
<li class="dropdown-divider"></li>
<li class="media align-items-center pb-2">
<img class="max-width-6 mr-3" src="../assets/svg/components/bag-with-money-dark-icon.svg" alt="Image Description">
<div class="media-body">
<h3 class="h6 mb-0">Salary:</h3>
<small class="text-secondary">$50-$75k</small>
</div>
</li>
<li class="dropdown-divider"></li>
<li class="media align-items-center pb-2">
<img class="max-width-6 mr-3" src="../assets/svg/components/calendar-dark-icon.svg" alt="Image Description">
<div class="media-body">
<h3 class="h6 mb-0">Date posted:</h3>
<small class="text-secondary">June 11, 2018</small>
</div>
</li>
</ul>
<!-- End Contacts List -->
Icon blocks #16
London, England
Office-
153 Williamson Plaza, Maggieberg, MT 09514
-
Mon-Fri: 9 AM to 6 PM -
(0161) 347 8854
Los Angeles, US
Office-
728 Dooley Branch, Beckershire, LA 63598-2909
-
Mon-Fri: 9 AM to 6 PM
-
(364) 106-7572
Paris, France
Office-
14, Avenue Pénélope Delaunay, 45952 Berthelot-sur-Lacombe
-
Mon-Fri: 9 AM to 6 PM
-
(011) 268 3610
<!-- Contacts Section -->
<div class="container space-2 space-3--lg">
<div class="row">
<div class="col-sm-6 col-md-4 mb-7 mb-md-0">
<h2 class="h4">London, England</h2>
<span class="d-block text-secondary">Office</span>
<hr class="my-5">
<address>
<!-- Contacts List -->
<ul class="list-unstyled text-secondary">
<li class="media align-items-center pb-2">
<img class="max-width-5 mr-2" src="../assets/svg/components/location-dark-icon.svg" alt="Image Description">
<div class="media-body">
153 Williamson Plaza, Maggieberg, MT 09514
</div>
</li>
<li class="media align-items-center py-2">
<img class="max-width-5 mr-2" src="../assets/svg/components/clock-dark-icon.svg" alt="Image Description">
<div class="media-body">
Mon-Fri: 9 AM to 6 PM
</div>
</li>
<li class="media align-items-center py-2">
<img class="max-width-5 mr-2" src="../assets/svg/components/contacts-dark-icon.svg" alt="Image Description">
<div class="media-body">
(0161) 347 8854
</div>
</li>
</ul>
<!-- End Contacts List -->
</address>
</div>
<div class="col-sm-6 col-md-4 mb-7 mb-sm-0">
<h3 class="h4">Los Angeles, US</h3>
<span class="d-block text-secondary">Office</span>
<hr class="my-5">
<address>
<!-- Contacts List -->
<ul class="list-unstyled text-secondary">
<li class="media align-items-center pb-2">
<img class="max-width-5 mr-2" src="../assets/svg/components/location-dark-icon.svg" alt="Image Description">
<div class="media-body">
728 Dooley Branch, Beckershire, LA 63598-2909
</div>
</li>
<li class="media align-items-center py-2">
<img class="max-width-5 mr-2" src="../assets/svg/components/clock-dark-icon.svg" alt="Image Description">
<div class="media-body">
Mon-Fri: 9 AM to 6 PM
</div>
</li>
<li class="media align-items-center py-2">
<img class="max-width-5 mr-2" src="../assets/svg/components/contacts-dark-icon.svg" alt="Image Description">
<div class="media-body">
(364) 106-7572
</div>
</li>
</ul>
<!-- End Contacts List -->
</address>
</div>
<div class="col-sm-6 col-md-4">
<h3 class="h4">Paris, France</h3>
<span class="d-block text-secondary">Office</span>
<hr class="my-5">
<address>
<!-- Contacts List -->
<ul class="list-unstyled text-secondary">
<li class="media align-items-center pb-2">
<img class="max-width-5 mr-2" src="../assets/svg/components/location-dark-icon.svg" alt="Image Description">
<div class="media-body">
14, Avenue Pénélope Delaunay, 45952 Berthelot-sur-Lacombe
</div>
</li>
<li class="media align-items-center py-2">
<img class="max-width-5 mr-2" src="../assets/svg/components/clock-dark-icon.svg" alt="Image Description">
<div class="media-body">
Mon-Fri: 9 AM to 6 PM
</div>
</li>
<li class="media align-items-center py-2">
<img class="max-width-5 mr-2" src="../assets/svg/components/contacts-dark-icon.svg" alt="Image Description">
<div class="media-body">
(011) 268 3610
</div>
</li>
</ul>
<!-- End Contacts List -->
</address>
</div>
</div>
</div>
<!-- End Contacts Section -->
Icon blocks #17
<div class="card-deck d-block d-lg-flex card-lg-gutters-2">
<div class="card card-frame mb-4 mb-lg-0">
<!-- Icon Block -->
<a class="card-body p-4" href="#">
<span class="d-block text-muted text-right font-weight-medium mb-3">01</span>
<img class="max-width-9 mb-2" src="../assets/svg/components/creative-primary-icon.svg" alt="Image Description">
<h4 class="h6 text-dark mb-1">Creative</h4>
<p class="mb-0">This is where we sit down, grab a cup of coffee and dial in the details.</p>
</a>
<!-- End Icon Block -->
</div>
<div class="card card-frame mb-4 mb-lg-0">
<!-- Icon Block -->
<a class="card-body p-4" href="#">
<span class="d-block text-muted text-right font-weight-medium mb-3">02</span>
<img class="max-width-9 mb-2" src="../assets/svg/components/services-primary-icon.svg" alt="Image Description">
<h4 class="h6 text-dark mb-1">Features</h4>
<p>Now that we've aligned the details, it's time to get things mapped out and organized.</p>
</a>
<!-- End Icon Block -->
</div>
<div class="card card-frame mb-4 mb-lg-0">
<!-- Icon Block -->
<a class="card-body p-4" href="#">
<span class="d-block text-muted text-right font-weight-medium mb-3">03</span>
<img class="max-width-9 mb-2" src="../assets/svg/components/responsive-primary-icon.svg" alt="Image Description">
<h4 class="h6 text-dark mb-1">Responsive</h4>
<p>The time has come to bring those ideas and plans to life.</p>
</a>
<!-- End Icon Block -->
</div>
<div class="card card-frame">
<!-- Icon Block -->
<a class="card-body p-4" href="#">
<span class="d-block text-muted text-right font-weight-medium mb-3">04</span>
<img class="max-width-9 mb-2" src="../assets/svg/components/develop-primary-icon.svg" alt="Image Description">
<h4 class="h6 text-dark mb-1">Develop</h4>
<p>Whether through commerce or just an experience to tell your brand's story.</p>
</a>
<!-- End Icon Block -->
</div>
</div>
Icon blocks #18
Get exclusive offers
Get special offers and discounts on the latest sales from Space.
Gift cards
Give someone close to you the gift of choice with a Space gift card.
Free returns
You can return merchandise for a full refund, which will be credited on your original tender.
Delivery on time
We will deliver your product, including free shippings at the expected time.
Your information is safe
We will not sell your personal contact information for any marketing purposes or whatsoever.
Secure checkout
All information is encrypted and transmitted without risk using a Secure Sockets Layer protocol.
<div class="row">
<div class="col-sm-6 mb-5">
<!-- Icon Block -->
<img class="max-width-10 mb-1" src="../assets/svg/components/email-dark-icon.svg" alt="Image Description">
<h3 class="h6 mb-1">Get exclusive offers</h3>
<p class="font-size-14 text-muted">Get special offers and discounts on the latest sales from Space.</p>
<!-- End Icon Block -->
</div>
<div class="col-sm-6 mb-5">
<!-- Icon Block -->
<img class="max-width-10 mb-1" src="../assets/svg/components/box-and-lamp-dark-icon.svg" alt="Image Description">
<h3 class="h6 mb-1">Gift cards</h3>
<p class="font-size-14 text-muted">Give someone close to you the gift of choice with a Space gift card.</p>
<!-- End Icon Block -->
</div>
</div>
<div class="row">
<div class="col-sm-6 mb-5">
<!-- Icon Block -->
<img class="max-width-10 mb-1" src="../assets/svg/components/return-dark-icon.svg" alt="Image Description">
<h3 class="h6 mb-1">Free returns</h3>
<p class="font-size-14 text-muted">You can return merchandise for a full refund, which will be credited on your original tender.</p>
<!-- End Icon Block -->
</div>
<div class="col-sm-6 mb-5">
<!-- Icon Block -->
<img class="max-width-10 mb-1" src="../assets/svg/components/rocket-dark-icon.svg" alt="Image Description">
<h3 class="h6 mb-1">Delivery on time</h3>
<p class="font-size-14 text-muted">We will deliver your product, including free shippings at the expected time.</p>
<!-- End Icon Block -->
</div>
</div>
<div class="row">
<div class="col-sm-6 mb-5 mb-sm-0">
<!-- Icon Block -->
<img class="max-width-10 mb-1" src="../assets/svg/components/safe-information-dark-icon.svg" alt="Image Description">
<h3 class="h6 mb-1">Your information is safe</h3>
<p class="font-size-14 text-muted">We will not sell your personal contact information for any marketing purposes or whatsoever.</p>
<!-- End Icon Block -->
</div>
<div class="col-sm-6">
<!-- Icon Block -->
<img class="max-width-10 mb-1" src="../assets/svg/components/secure-checkout.svg" alt="Image Description">
<h3 class="h6 mb-1">Secure checkout</h3>
<p class="font-size-14 text-muted">All information is encrypted and transmitted without risk using a <span class="font-weight-medium">Secure Sockets Layer</span> protocol.</p>
<!-- End Icon Block -->
</div>
</div>
Icon blocks #19
Resolve complex tasks with Space
This is where we sit down, grab a cup of coffee and dial in the details.
Learn More
Keeping the project in line to completion
Now that we've aligned the details, it's time to get things organized.
Learn More
Easily develop realtime features
Whether through commerce or just an experience to tell your brand's story.
Learn More
<!-- Card Deck -->
<div class="container">
<div class="card-deck d-block d-lg-flex">
<!-- Card -->
<div class="card card-frame card-primary-frame mb-5 mb-lg-0">
<div class="card-body p-5">
<div class="media align-items-center mb-3">
<img class="max-width-9 mr-3" src="../assets/svg/components/plan-primary-icon.svg" alt="Image Description">
<div class="media-body">
<h2 class="h5 mb-0">Resolve complex tasks with Space</h2>
</div>
</div>
<p>This is where we sit down, grab a cup of coffee and dial in the details.</p>
<a href="#">
Learn More
<span class="fa fa-angle-right align-middle ml-2"></span>
</a>
</div>
</div>
<!-- End Card -->
<!-- Card -->
<div class="card bg-purple rounded mb-5 mb-lg-0">
<div class="card-body p-5">
<div class="media align-items-center mb-3">
<img class="max-width-9 mr-3" src="../assets/svg/components/moving-up-white-icon.svg" alt="Image Description">
<div class="media-body">
<h3 class="h5 text-white mb-0">Keeping the project in line to completion</h3>
</div>
</div>
<p class="text-light">Now that we've aligned the details, it's time to get things organized.</p>
<a class="text-light" href="#">
Learn More
<span class="fa fa-angle-right align-middle ml-2"></span>
</a>
</div>
</div>
<!-- End Card -->
<!-- Card -->
<div class="card card-frame card-primary-frame mb-5 mb-lg-0">
<div class="card-body p-5">
<div class="media align-items-center mb-3">
<img class="max-width-9 mr-3" src="../assets/svg/components/develop-primary-icon.svg" alt="Image Description">
<div class="media-body">
<h3 class="h5 mb-0">Easily develop realtime features</h3>
</div>
</div>
<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 align-middle ml-2"></span>
</a>
</div>
</div>
<!-- End Card -->
</div>
</div>
<!-- End Card Deck -->
Icon blocks #20
The powerful project manager to get things organized
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.
Read more
Visualize your napkin sketches into beautiful pixels
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.
Read more
Creative gifts that drive Space foundation
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.
Read more
<!-- Features -->
<div class="row justify-content-lg-center align-items-sm-center mb-3 mb-sm-9">
<div class="col-sm-4 col-md-3 col-lg-2 mb-2 mb-sm-0">
<img class="img-fluid w-50 w-sm-100" src="../assets/svg/components/puzzle-primary-icon.svg" alt="Image Description">
</div>
<div class="col-sm-8 col-md-9 col-lg-7 mb-5 mb-md-0">
<div class="pl-md-4">
<h3 class="h4">The powerful project manager to get things organized</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. 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>
<a href="#">
Read more
<span class="fa fa-angle-right align-middle ml-1"></span>
</a>
</div>
</div>
</div>
<!-- End Features -->
<!-- Features -->
<div class="row justify-content-lg-center align-items-sm-center mb-3 mb-sm-9">
<div class="col-sm-4 col-md-3 col-lg-2 mb-2 mb-sm-0">
<img class="img-fluid w-50 w-sm-100" src="../assets/svg/components/responsive-purple-icon.svg" alt="Image Description">
</div>
<div class="col-sm-8 col-md-9 col-lg-7 mb-5 mb-md-0">
<div class="pl-md-4">
<h3 class="h4">Visualize your napkin sketches into beautiful pixels</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. 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>
<a href="#">
Read more
<span class="fa fa-angle-right align-middle ml-1"></span>
</a>
</div>
</div>
</div>
<!-- End Features -->
<!-- Features -->
<div class="row justify-content-lg-center align-items-sm-center">
<div class="col-sm-4 col-md-3 col-lg-2 mb-2 mb-sm-0">
<img class="img-fluid w-50 w-sm-100" src="../assets/svg/components/idea-red-icon.svg" alt="Image Description">
</div>
<div class="col-sm-8 col-md-9 col-lg-7 mb-5 mb-md-0">
<div class="pl-md-4">
<h3 class="h4">Creative gifts that drive Space foundation</h3>
<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>
<a href="#">
Read more
<span class="fa fa-angle-right align-middle ml-1"></span>
</a>
</div>
</div>
</div>
<!-- End Features -->
Icon blocks #21
Understanding the task at hand and ironing out the wrinkles is key.
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.
The time has come to bring those ideas and plans to life.
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 organized.
<div class="row">
<div class="col-sm-6 col-lg-4 mb-7">
<!-- Icon Block -->
<div class="media align-items-center pr-lg-4">
<img class="max-width-9 mr-3" src="../assets/svg/components/consult-cyan-icon.svg" alt="Image Description">
<div class="media-body">
<p class="font-size-14 mb-0">Understanding the task at hand and ironing out the wrinkles is key.</p>
</div>
</div>
<!-- End Icon Block -->
</div>
<div class="col-sm-6 col-lg-4 mb-7">
<!-- Icon Block -->
<div class="media align-items-center pr-lg-4">
<img class="max-width-9 mr-3" src="../assets/svg/components/plan-primary-icon.svg" alt="Image Description">
<div class="media-body">
<p class="font-size-14 mb-0">Understanding the task at hand and ironing out the wrinkles is key.</p>
</div>
</div>
<!-- End Icon Block -->
</div>
<div class="col-sm-6 col-lg-4 mb-7">
<!-- Icon Block -->
<div class="media align-items-center pr-lg-4">
<img class="max-width-9 mr-3" src="../assets/svg/components/create-blue-icon.svg" alt="Image Description">
<div class="media-body">
<p class="font-size-14 mb-0">Now that we've aligned the details, it's time to get things mapped out and organized.</p>
</div>
</div>
<!-- End Icon Block -->
</div>
<div class="col-sm-6 col-lg-4 mb-7 mb-lg-0">
<!-- Icon Block -->
<div class="media align-items-center pr-lg-4">
<img class="max-width-9 mr-3" src="../assets/svg/components/develop-purple-icon.svg" alt="Image Description">
<div class="media-body">
<p class="font-size-14 mb-0">The time has come to bring those ideas and plans to life.</p>
</div>
</div>
<!-- End Icon Block -->
</div>
<div class="col-sm-6 col-lg-4 mb-7 mb-md-0">
<!-- Icon Block -->
<div class="media align-items-center pr-lg-4">
<img class="max-width-9 mr-3" src="../assets/svg/components/rocket-red-icon.svg" alt="Image Description">
<div class="media-body">
<p class="font-size-14 mb-0">Understanding the task at hand and ironing out the wrinkles is key.</p>
</div>
</div>
<!-- End Icon Block -->
</div>
<div class="col-sm-6 col-lg-4">
<!-- Icon Block -->
<div class="media align-items-center pr-lg-4">
<img class="max-width-9 mr-3" src="../assets/svg/components/data-analysis-dark-icon.svg" alt="Image Description">
<div class="media-body">
<p class="font-size-14 mb-0">Now that we've aligned the details, it's time to get things organized.</p>
</div>
</div>
<!-- End Icon Block -->
</div>
</div>
Icon blocks #22
Intuitive search
Achieve virtually any look and layout from within the one template.
Genius insights
Find what you need in one template and combine features at will.
Predictive analytics
Manage document assembly with sophisticated yet super-light templates.
Fully documented
Every component and plugin is well documented with live examples.
<!-- Features Section -->
<div class="container">
<div class="row">
<div class="col-lg-8">
<div class="row">
<div class="col-sm-6 mb-7">
<!-- Icon Blocks -->
<div class="media pr-lg-2">
<img class="max-width-7 mr-3" src="../assets/svg/components/search-browser-primary-icon.svg" alt="Image Description">
<div class="media-body">
<h3 class="h6">Intuitive search</h3>
<p class="mb-0">Achieve virtually any look and layout from within the one template.</p>
</div>
</div>
<!-- End Icon Blocks -->
</div>
<div class="col-sm-6 mb-7 mb-sm-0">
<!-- Icon Blocks -->
<div class="media pr-lg-2">
<img class="max-width-7 mr-3" src="../assets/svg/components/genious-purple-icon.svg" alt="Image Description">
<div class="media-body">
<h3 class="h6">Genius insights</h3>
<p class="mb-0">Find what you need in one template and combine features at will.</p>
</div>
</div>
<!-- End Icon Blocks -->
</div>
<div class="col-sm-6 mb-7 mb-sm-0">
<!-- Icon Blocks -->
<div class="media pr-lg-2">
<img class="max-width-7 mr-3" src="../assets/svg/components/analytics-blue-icon.svg" alt="Image Description">
<div class="media-body">
<h3 class="h6">Predictive analytics</h3>
<p class="mb-0">Manage document assembly with sophisticated yet super-light templates.</p>
</div>
</div>
<!-- End Icon Blocks -->
</div>
<div class="col-sm-6">
<!-- Icon Blocks -->
<div class="media pr-lg-2">
<img class="max-width-7 mr-3" src="../assets/svg/components/documentation-red-icon.svg" alt="Image Description">
<div class="media-body">
<h3 class="h6">Fully documented</h3>
<p class="mb-0">Every component and plugin is well documented with live examples.</p>
</div>
</div>
<!-- End Icon Blocks -->
</div>
</div>
</div>
<div class="col-lg-4 d-none d-lg-block">
<img class="img-fluid" src="../assets/svg/components/startup-life-illustration.svg" alt="Image Description">
</div>
</div>
</div>
<!-- End Features Section -->
Icon blocks #23
Features that discover you
Experience a level of our quality in both design & customization works.
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.
<!-- Features Section -->
<div class="container">
<div class="card w-lg-90 shadow mx-lg-auto">
<div class="card-body p-7">
<!-- Title -->
<div class="w-md-80 w-lg-60 text-center mx-md-auto mb-9">
<h2 class="h3">Features that discover you</h2>
<p>Experience a level of our quality in both design & customization works.</p>
</div>
<!-- End Title -->
<div class="row justify-content-lg-between text-center text-lg-left">
<div class="col-sm-6 col-lg-4 offset-sm-3 offset-lg-0 mb-4 mb-lg-0">
<!-- Icon Block -->
<div class="pr-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="pr-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="pr-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>
</div>
<!-- Card Footer -->
<div class="card-footer bg-gray-100 text-center py-4 px-7">
<a class="text-secondary" href="#">
Learn more about Space features
<span class="fa fa-arrow-right font-size-13 ml-2"></span>
</a>
</div>
<!-- End Card Footer -->
</div>
</div>
<!-- End Features Section -->
Icon blocks #24
Learn from the best
Manage document assembly with sophisticated yet super-light templates.
Conquer
Achieve virtually any look and layout from within the one template.
Get rewarded
Find what you need in one template and combine features at will.
<!-- Icon Blocks Section -->
<div class="bg-purple">
<div class="container space-2 space-3--lg">
<div class="row">
<div class="col-md-4 mb-7 mb-md-0">
<!-- Icon Blocks -->
<div class="text-center px-lg-3">
<img class="max-width-14 mb-2" src="../assets/svg/components/teaching-white-icon.svg" alt="Image Description">
<h3 class="h4 text-white">Learn from the best</h3>
<p class="text-light mb-0">Manage document assembly with sophisticated yet super-light templates.</p>
</div>
<!-- End Icon Blocks -->
</div>
<div class="col-md-4 mb-7 mb-md-0">
<!-- Icon Blocks -->
<div class="text-center px-lg-3">
<img class="max-width-14 mb-2" src="../assets/svg/components/mountains-white-icon.svg" alt="Image Description">
<h3 class="h4 text-white">Conquer</h3>
<p class="text-light mb-0">Achieve virtually any look and layout from within the one template.</p>
</div>
<!-- End Icon Blocks -->
</div>
<div class="col-md-4">
<!-- Icon Blocks -->
<div class="text-center px-lg-3">
<img class="max-width-14 mb-2" src="../assets/svg/components/get-rewarded-white-icon.svg" alt="Image Description">
<h3 class="h4 text-white">Get rewarded</h3>
<p class="text-light mb-0">Find what you need in one template and combine features at will.</p>
</div>
<!-- End Icon Blocks -->
</div>
</div>
</div>
</div>
<!-- End Icon Blocks Section -->
Icon blocks #25
Professional design
Achieve virtually any look and layout from within the one template.
Unlimited power
Find what you need in one template and combine features at will.
Super-light
Manage document assembly with sophisticated yet super-light templates.
Fully documented
Every component and plugin is well documented with live examples.
Premium images
Premium stock images are included with your purchase in the download package.
Social services
We strive to figure out ways to help your audience grow through all social platforms.
<!-- Features Section -->
<div class="container">
<div class="row">
<div class="col-md-6 mb-9">
<!-- Features -->
<div class="media pr-lg-4">
<span class="u-icon u-icon--md u-icon--shadow rounded-circle p-2 mr-3">
<img class="img-fluid" src="../assets/svg/components/trophy-purple-icon.svg" alt="Image Description">
</span>
<div class="media-body">
<h3 class="h6">Professional design</h3>
<p class="mb-0">Achieve virtually any look and layout from within the one template.</p>
</div>
</div>
<!-- End Features -->
</div>
<div class="col-md-6 mb-9">
<!-- Features -->
<div class="media pl-lg-4">
<span class="u-icon u-icon--md u-icon--shadow rounded-circle p-2 mr-3">
<img class="img-fluid" src="../assets/svg/components/rocket-cyan-icon.svg" alt="Image Description">
</span>
<div class="media-body">
<h3 class="h6">Unlimited power</h3>
<p class="mb-0">Find what you need in one template and combine features at will.</p>
</div>
</div>
<!-- End Features -->
</div>
<div class="w-100"></div>
<div class="col-md-6 mb-9">
<!-- Features -->
<div class="media pr-lg-4">
<span class="u-icon u-icon--md u-icon--shadow rounded-circle p-2 mr-3">
<img class="img-fluid" src="../assets/svg/components/idea-primary-icon.svg" alt="Image Description">
</span>
<div class="media-body">
<h3 class="h6">Super-light</h3>
<p class="mb-0">Manage document assembly with sophisticated yet super-light templates.</p>
</div>
</div>
<!-- End Features -->
</div>
<div class="col-md-6 mb-9">
<!-- Features -->
<div class="media pl-lg-4">
<span class="u-icon u-icon--md u-icon--shadow rounded-circle p-2 mr-3">
<img class="img-fluid" src="../assets/svg/components/documentation-red-icon.svg" alt="Image Description">
</span>
<div class="media-body">
<h3 class="h6">Fully documented</h3>
<p class="mb-0">Every component and plugin is well documented with live examples.</p>
</div>
</div>
<!-- End Features -->
</div>
<div class="w-100"></div>
<div class="col-md-6 mb-9 mb-md-0">
<!-- Features -->
<div class="media pr-lg-4">
<span class="u-icon u-icon--md u-icon--shadow rounded-circle p-2 mr-3">
<img class="img-fluid" src="../assets/svg/components/secure-payment-brown-icon.svg" alt="Image Description">
</span>
<div class="media-body">
<h3 class="h6">Premium images</h3>
<p class="mb-0">Premium stock images are included with your purchase in the download package.</p>
</div>
</div>
<!-- End Features -->
</div>
<div class="col-md-6">
<!-- Features -->
<div class="media pl-lg-4">
<span class="u-icon u-icon--md u-icon--shadow rounded-circle p-2 mr-3">
<img class="img-fluid" src="../assets/svg/components/social-services-dark-icon.svg" alt="Image Description">
</span>
<div class="media-body">
<h3 class="h6">Social services</h3>
<p class="mb-0">We strive to figure out ways to help your audience grow through all social platforms.</p>
</div>
</div>
<!-- End Features -->
</div>
</div>
</div>
<!-- End Features Section -->
Icon blocks #26
<!-- Icon Blocks Section -->
<div class="container">
<div class="card-deck card-sm-gutters-2 d-block d-sm-flex w-lg-60 mx-lg-auto">
<div class="card card-frame card-purple-frame mb-3 mb-sm-0">
<!-- Icon Blocks -->
<div class="card-body p-6">
<span class="u-icon u-icon--md u-icon--shadow rounded-circle p-2 mb-3">
<img class="img-fluid" src="../assets/svg/components/trophy-purple-icon.svg" alt="Image Description">
</span>
<h3 class="h5 text-purple">Professional Design</h3>
<p>Achieve virtually any look and layout from within the one template.</p>
<a class="text-purple" href="#">Learn more <span class="fa fa-angle-right font-size-14 ml-2"></span></a>
</div>
<!-- End Icon Blocks -->
</div>
<div class="card card-frame card-danger-frame">
<!-- Icon Blocks -->
<div class="card-body p-6">
<span class="u-icon u-icon--md u-icon--shadow rounded-circle p-2 mb-3">
<img class="img-fluid" src="../assets/svg/components/rocket-red-icon.svg" alt="Image Description">
</span>
<h3 class="h5 text-danger">Unlimited Power</h3>
<p>Find what you need in one template and combine features at will.</p>
<a class="text-danger" href="#">Learn more <span class="fa fa-angle-right font-size-14 ml-2"></span></a>
</div>
<!-- End Icon Blocks -->
</div>
</div>
</div>
<!-- End Icon Blocks Section -->
Icon blocks #27
We are a family, not a workforce.
Space International
Global services using any means of transport, with regular lines or customized projects, customs management and logistics.
Reliable
Track your item online in your account and using the handy notification system.
Fast & convenient
Find out the final price online and place an order in less than a minute.
$3000
value of freight booked daily
525
number of quotes generated weekly
4750
number of vendors monthly
<!-- Service 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">We are a family, not a workforce.</span>
<h2>Space International</h2>
<p>Global services using any means of transport, with regular lines or customized projects, customs management and logistics.</p>
</div>
<!-- End Title -->
<!-- Icon Blocks -->
<div class="media mb-6">
<img class="max-width-8 mr-3" src="../assets/svg/components/return-dark-icon.svg" alt="Image Description">
<div class="media-body">
<h2 class="h5 font-weight-medium">Reliable</h2>
<p>Track your item online in your account and using the handy notification system.</p>
</div>
</div>
<!-- End Icon Blocks -->
<!-- Icon Blocks -->
<div class="media mb-6">
<img class="max-width-8 mr-3" src="../assets/svg/components/rocket-dark-icon.svg" alt="Image Description">
<div class="media-body">
<h3 class="h5 font-weight-medium">Fast & convenient</h3>
<p>Find out the final price online and place an order in less than a minute.</p>
</div>
</div>
<!-- End Icon Blocks -->
</div>
<div class="col-md-6 col-lg-5">
<!-- Card -->
<div class="card bg-img-hero py-7 px-5 mb-4" style="background-image: url(../assets/svg/shapes/shape4.svg);">
<div class="media align-items-center">
<img class="max-width-10 mr-3" src="../assets/svg/components/bag-with-money-yellow-icon.svg" alt="Image Description">
<div class="media-body">
<h4 class="h3 text-warning mb-0"><strong>$3000</strong></h4>
<p class="mb-0">value of freight booked daily</p>
</div>
</div>
</div>
<!-- End Card -->
<!-- Card -->
<div class="card bg-img-hero py-7 px-5 mb-4" style="background-image: url(../assets/svg/shapes/shape5.svg);">
<div class="media align-items-center">
<img class="max-width-10 mr-3" src="../assets/svg/components/request-quote-blue-icon.svg" alt="Image Description">
<div class="media-body">
<h4 class="h3 text-blue mb-0"><strong>525</strong></h4>
<p class="mb-0">number of quotes generated weekly</p>
</div>
</div>
</div>
<!-- End Card -->
<!-- Card -->
<div class="card bg-img-hero py-7 px-5" style="background-image: url(../assets/svg/shapes/shape6.svg);">
<div class="media align-items-center">
<img class="max-width-10 mr-3" src="../assets/svg/components/team-red-icon.svg" alt="Image Description">
<div class="media-body">
<h4 class="h3 text-danger mb-0"><strong>4750</strong></h4>
<p class="mb-0">number of vendors monthly</p>
</div>
</div>
</div>
<!-- End Card -->
</div>
</div>
</div>
<!-- End Service Section -->
Icon blocks #28
Yogyakarta, IDN
Jl. Gajah Mada No.67, Purwokinanti, Pakualaman, Kota Yogyakarta, Daerah Istimewa Yogyakarta 55166
+62 274 585655
London, UK
140 Gloucester Rd, South Kensington, London SW7 4QH
+44 20 7373 6000
Bangkok, THA
9 ซอย ศูนย์วิจัย 4 Khwaeng Bang Kapi, Khet Huai Khwang, Krung Thep Maha Nakhon 10320
+66 2 718 1030
Seattle, USA
2125 Terry Ave, Seattle, WA 98121
+1 206-264-8111
Tokyo, JPN
7 Chome-13-15 Ginza, 中央区 Chuo City, Tokyo 104-0061
+81 3-6226-1078
<div class="row">
<!-- Location Item -->
<div class="col-md-6 col-lg-4 mb-5">
<address class="address-pin h-100 mb-0">
<i class="svg-icon svg-icon-xs text-primary address-pin__pin">
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect x="0" y="0" width="24" height="24"></rect>
<path d="M5,10.5 C5,6 8,3 12.5,3 C17,3 20,6.75 20,10.5 C20,12.8325623 17.8236613,16.03566 13.470984,20.1092932 C12.9154018,20.6292577 12.0585054,20.6508331 11.4774555,20.1594925 C7.15915182,16.5078313 5,13.2880005 5,10.5 Z M12.5,12 C13.8807119,12 15,10.8807119 15,9.5 C15,8.11928813 13.8807119,7 12.5,7 C11.1192881,7 10,8.11928813 10,9.5 C10,10.8807119 11.1192881,12 12.5,12 Z" fill="#000000" fill-rule="nonzero"></path>
</g>
</svg>
</i>
<h5 class="locality">Yogyakarta, IDN</h5>
<p class="adr">Jl. Gajah Mada No.67, Purwokinanti, Pakualaman, Kota Yogyakarta, Daerah Istimewa Yogyakarta 55166</p>
<p class="tel">+62 274 585655</p>
</address>
</div>
<!-- End Location Item -->
<!-- Location Item -->
<div class="col-md-6 col-lg-4 mb-5">
<address class="address-pin h-100 mb-0">
<i class="svg-icon svg-icon-xs text-primary address-pin__pin">
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect x="0" y="0" width="24" height="24"></rect>
<path d="M5,10.5 C5,6 8,3 12.5,3 C17,3 20,6.75 20,10.5 C20,12.8325623 17.8236613,16.03566 13.470984,20.1092932 C12.9154018,20.6292577 12.0585054,20.6508331 11.4774555,20.1594925 C7.15915182,16.5078313 5,13.2880005 5,10.5 Z M12.5,12 C13.8807119,12 15,10.8807119 15,9.5 C15,8.11928813 13.8807119,7 12.5,7 C11.1192881,7 10,8.11928813 10,9.5 C10,10.8807119 11.1192881,12 12.5,12 Z" fill="#000000" fill-rule="nonzero"></path>
</g>
</svg>
</i>
<h5 class="locality">London, UK</h5>
<p class="adr">140 Gloucester Rd, South Kensington, London SW7 4QH</p>
<p class="tel">+44 20 7373 6000</p>
</address>
</div>
<!-- End Location Item -->
<!-- Location Item -->
<div class="col-md-6 col-lg-4 mb-5">
<address class="address-pin h-100 mb-0">
<i class="svg-icon svg-icon-xs text-primary address-pin__pin">
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect x="0" y="0" width="24" height="24"></rect>
<path d="M5,10.5 C5,6 8,3 12.5,3 C17,3 20,6.75 20,10.5 C20,12.8325623 17.8236613,16.03566 13.470984,20.1092932 C12.9154018,20.6292577 12.0585054,20.6508331 11.4774555,20.1594925 C7.15915182,16.5078313 5,13.2880005 5,10.5 Z M12.5,12 C13.8807119,12 15,10.8807119 15,9.5 C15,8.11928813 13.8807119,7 12.5,7 C11.1192881,7 10,8.11928813 10,9.5 C10,10.8807119 11.1192881,12 12.5,12 Z" fill="#000000" fill-rule="nonzero"></path>
</g>
</svg>
</i>
<h5 class="locality">Bangkok, THA</h5>
<p class="adr">9 ซอย ศูนย์วิจัย 4 Khwaeng Bang Kapi, Khet Huai Khwang, Krung Thep Maha Nakhon 10320</p>
<p class="tel">+66 2 718 1030</p>
</address>
</div>
<!-- End Location Item -->
<!-- Location Item -->
<div class="col-md-6 col-lg-4 mb-5">
<address class="address-pin h-100 mb-0">
<i class="svg-icon svg-icon-xs text-primary address-pin__pin">
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect x="0" y="0" width="24" height="24"></rect>
<path d="M5,10.5 C5,6 8,3 12.5,3 C17,3 20,6.75 20,10.5 C20,12.8325623 17.8236613,16.03566 13.470984,20.1092932 C12.9154018,20.6292577 12.0585054,20.6508331 11.4774555,20.1594925 C7.15915182,16.5078313 5,13.2880005 5,10.5 Z M12.5,12 C13.8807119,12 15,10.8807119 15,9.5 C15,8.11928813 13.8807119,7 12.5,7 C11.1192881,7 10,8.11928813 10,9.5 C10,10.8807119 11.1192881,12 12.5,12 Z" fill="#000000" fill-rule="nonzero"></path>
</g>
</svg>
</i>
<h5 class="locality">Seattle, USA</h5>
<p class="adr">2125 Terry Ave, Seattle, WA 98121</p>
<p class="tel">+1 206-264-8111</p>
</address>
</div>
<!-- End Location Item -->
<!-- Location Item -->
<div class="col-md-6 col-lg-4 mb-5">
<address class="address-pin h-100 mb-0">
<i class="svg-icon svg-icon-xs text-primary address-pin__pin">
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect x="0" y="0" width="24" height="24"></rect>
<path d="M5,10.5 C5,6 8,3 12.5,3 C17,3 20,6.75 20,10.5 C20,12.8325623 17.8236613,16.03566 13.470984,20.1092932 C12.9154018,20.6292577 12.0585054,20.6508331 11.4774555,20.1594925 C7.15915182,16.5078313 5,13.2880005 5,10.5 Z M12.5,12 C13.8807119,12 15,10.8807119 15,9.5 C15,8.11928813 13.8807119,7 12.5,7 C11.1192881,7 10,8.11928813 10,9.5 C10,10.8807119 11.1192881,12 12.5,12 Z" fill="#000000" fill-rule="nonzero"></path>
</g>
</svg>
</i>
<h5 class="locality">Tokyo, JPN</h5>
<p class="adr">7 Chome-13-15 Ginza, 中央区 Chuo City, Tokyo 104-0061</p>
<p class="tel">+81 3-6226-1078</p>
</address>
</div>
<!-- End Location Item -->
</div>
Icon blocks #29
Verified Hotel
Feels like Home
5 Stars Hotel
Tropical Atmosphere
120+ Rooms
<div class="row text-sm-center">
<!-- Feature Item -->
<div class="col-6 col-sm mb-5 mb-sm-0">
<i class="svg-icon svg-icon-sm text-primary mb-3">
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Stockholm-icons-/-General-/-Shield-check" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect id="bound" x="0" y="0" width="24" height="24"></rect>
<path d="M4,4 L11.6314229,2.5691082 C11.8750185,2.52343403 12.1249815,2.52343403 12.3685771,2.5691082 L20,4 L20,13.2830094 C20,16.2173861 18.4883464,18.9447835 16,20.5 L12.5299989,22.6687507 C12.2057287,22.8714196 11.7942713,22.8714196 11.4700011,22.6687507 L8,20.5 C5.51165358,18.9447835 4,16.2173861 4,13.2830094 L4,4 Z" id="Path-50" fill="#000000" opacity="0.3"></path>
<path d="M11.1750002,14.75 C10.9354169,14.75 10.6958335,14.6541667 10.5041669,14.4625 L8.58750019,12.5458333 C8.20416686,12.1625 8.20416686,11.5875 8.58750019,11.2041667 C8.97083352,10.8208333 9.59375019,10.8208333 9.92916686,11.2041667 L11.1750002,12.45 L14.3375002,9.2875 C14.7208335,8.90416667 15.2958335,8.90416667 15.6791669,9.2875 C16.0625002,9.67083333 16.0625002,10.2458333 15.6791669,10.6291667 L11.8458335,14.4625 C11.6541669,14.6541667 11.4145835,14.75 11.1750002,14.75 Z" id="check-path" fill="#000000"></path>
</g>
</svg>
</i>
<h6 class="font-weight-medium text-gray-700">Verified Hotel</h6>
</div>
<!-- End Feature Item -->
<!-- Feature Item -->
<div class="col-6 col-sm mb-5 mb-sm-0">
<i class="svg-icon svg-icon-sm text-primary mb-3">
<svg width="24px" height="40px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect x="0" y="0" width="24" height="40"></rect>
<path d="M3.95709826,8.41510662 L11.47855,3.81866389 C11.7986624,3.62303967 12.2013376,3.62303967 12.52145,3.81866389 L20.0429,8.41510557 C20.6374094,8.77841684 21,9.42493654 21,10.1216692 L21,19.0000642 C21,20.1046337 20.1045695,21.0000642 19,21.0000642 L4.99998155,21.0000673 C3.89541205,21.0000673 2.99998155,20.1046368 2.99998155,19.0000673 C2.99998155,19.0000663 2.99998155,19.0000652 2.99998155,19.0000642 L2.99999828,10.1216672 C2.99999935,9.42493561 3.36258984,8.77841732 3.95709826,8.41510662 Z" fill="#000000" opacity="0.3"></path>
<path d="M13.8,12 C13.1562,12 12.4033,12.7298529 12,13.2 C11.5967,12.7298529 10.8438,12 10.2,12 C9.0604,12 8.4,12.8888719 8.4,14.0201635 C8.4,15.2733878 9.6,16.6 12,18 C14.4,16.6 15.6,15.3 15.6,14.1 C15.6,12.9687084 14.9396,12 13.8,12 Z" fill="#000000" opacity="1"></path>
</g>
</svg>
</i>
<h6 class="font-weight-medium text-gray-700">Feels like Home</h6>
</div>
<!-- End Feature Item -->
<!-- Feature Item -->
<div class="col-6 col-sm mb-5 mb-sm-0">
<i class="svg-icon svg-icon-sm text-primary mb-3">
<svg width="24px" height="40px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<polygon points="0 0 24 0 24 24 0 24"></polygon>
<path d="M12,18 L7.91561963,20.1472858 C7.42677504,20.4042866 6.82214789,20.2163401 6.56514708,19.7274955 C6.46280801,19.5328351 6.42749334,19.309867 6.46467018,19.0931094 L7.24471742,14.545085 L3.94038429,11.3241562 C3.54490071,10.938655 3.5368084,10.3055417 3.92230962,9.91005817 C4.07581822,9.75257453 4.27696063,9.65008735 4.49459766,9.61846284 L9.06107374,8.95491503 L11.1032639,4.81698575 C11.3476862,4.32173209 11.9473121,4.11839309 12.4425657,4.36281539 C12.6397783,4.46014562 12.7994058,4.61977315 12.8967361,4.81698575 L14.9389263,8.95491503 L19.5054023,9.61846284 C20.0519472,9.69788046 20.4306287,10.2053233 20.351211,10.7518682 C20.3195865,10.9695052 20.2170993,11.1706476 20.0596157,11.3241562 L16.7552826,14.545085 L17.5353298,19.0931094 C17.6286908,19.6374458 17.263103,20.1544017 16.7187666,20.2477627 C16.5020089,20.2849396 16.2790408,20.2496249 16.0843804,20.1472858 L12,18 Z" fill="#000000"></path>
</g>
</svg>
</i>
<h6 class="font-weight-medium text-gray-700">5 Stars Hotel</h6>
</div>
<!-- End Feature Item -->
<!-- Feature Item -->
<div class="col-6 col-sm mb-5 mb-sm-0">
<i class="svg-icon svg-icon-sm text-primary mb-3">
<svg width="24px" height="40px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect x="0" y="0" width="24" height="40"></rect>
<polygon fill="#000000" opacity="0.3" points="12 2 4 19 20 19"></polygon>
<rect fill="#000000" x="11" y="11" width="2" height="11" rx="1"></rect>
</g>
</svg>
</i>
<h6 class="font-weight-medium text-gray-700">Tropical Atmosphere</h6>
</div>
<!-- End Feature Item -->
<!-- Feature Item -->
<div class="col-6 col-sm">
<i class="svg-icon svg-icon-sm text-primary mb-3">
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect opacity="0.300000012" x="0" y="0" width="24" height="24"></rect>
<polygon fill="#000000" fill-rule="nonzero" opacity="0.3" points="7 4.89473684 7 21 5 21 5 3 11 3 11 4.89473684"></polygon>
<path d="M10.1782982,2.24743315 L18.1782982,3.6970464 C18.6540619,3.78325557 19,4.19751166 19,4.68102291 L19,19.3190064 C19,19.8025177 18.6540619,20.2167738 18.1782982,20.3029829 L10.1782982,21.7525962 C9.63486295,21.8510675 9.11449486,21.4903531 9.0160235,20.9469179 C9.00536265,20.8880837 9,20.8284119 9,20.7686197 L9,3.23140966 C9,2.67912491 9.44771525,2.23140966 10,2.23140966 C10.0597922,2.23140966 10.119464,2.2367723 10.1782982,2.24743315 Z M11.9166667,12.9060229 C12.6070226,12.9060229 13.1666667,12.2975724 13.1666667,11.5470105 C13.1666667,10.7964487 12.6070226,10.1879981 11.9166667,10.1879981 C11.2263107,10.1879981 10.6666667,10.7964487 10.6666667,11.5470105 C10.6666667,12.2975724 11.2263107,12.9060229 11.9166667,12.9060229 Z" fill="#000000"></path>
</g>
</svg>
</i>
<h6 class="font-weight-medium text-gray-700">120+ Rooms</h6>
</div>
<!-- End Feature Item -->
</div>