Icon Blocks
Start building your website with dozens of ready-to-use icon blocks.
Icon blocks #1
Professional Design
Achieve virtually any design and layout from within the one template.
Front Strategy
We strive to figure out ways to help your business grow through all platforms.
Unlimited Power
Find what you need in one template and combine features at will.
<!-- Icon Blocks Section -->
<div class="container space-top-2">
<div class="row">
<div class="col-md-4 mb-7">
<div class="text-center px-lg-3">
<span class="btn btn-icon btn-lg btn-soft-danger rounded-circle mb-5">
<span class="fab fa-yelp btn-icon__inner fa-2x btn-icon__inner-bottom-minus"></span>
</span>
<h3 class="h5">Professional Design</h3>
<p class="mb-md-0">Achieve virtually any design and layout from within the one template.</p>
</div>
</div>
<div class="col-md-4 mb-7">
<div class="text-center px-lg-3">
<span class="btn btn-icon btn-lg btn-soft-primary rounded-circle mb-5">
<span class="fas fa-fire btn-icon__inner fa-2x btn-icon__inner-bottom-minus"></span>
</span>
<h3 class="h5">Front Strategy</h3>
<p class="mb-md-0">We strive to figure out ways to help your business grow through all platforms.</p>
</div>
</div>
<div class="col-md-4 mb-7">
<div class="text-center px-lg-3">
<span class="btn btn-icon btn-lg btn-soft-success rounded-circle mb-5">
<span class="fab fa-whmcs btn-icon__inner fa-2x btn-icon__inner-bottom-minus"></span>
</span>
<h3 class="h5">Unlimited Power</h3>
<p class="mb-md-0">Find what you need in one template and combine features at will.</p>
</div>
</div>
</div>
</div>
<!-- End Icon Blocks Section -->
Icon blocks #2
Professional Design
Achieve virtually any design and layout from within the one template.
Front Strategy
We strive to figure out ways to help your business grow through all platforms.
Unlimited Power
Find what you need in one template and combine features at will.
<!-- Process Section -->
<div class="container space-2">
<div class="row">
<div class="col-md-4 mb-7 mb-md-0">
<!-- Process -->
<div class="text-center">
<div class="position-relative">
<div id="SVGcircleProcess1" class="svg-preloader u-indicator-dots min-height-155 mb-2">
<!-- Icon -->
<span class="text-success btn btn-lg btn-icon mt-7">
<span class="fab fa-yelp font-size-5 btn-icon__inner btn-icon__inner-bottom-minus"></span>
</span>
<!-- End Icon -->
<!-- SVG Shape -->
<figure class="w-100 position-absolute top-0 right-0 left-0 z-index-n1">
<img class="js-svg-injector" src="../../assets/svg/components/circle-process-1.svg" alt="Image Description"
data-parent="#SVGcircleProcess1">
</figure>
<!-- End SVG Shape -->
</div>
</div>
<h3 class="h5">Professional Design</h3>
<p class="mb-md-0">Achieve virtually any design and layout from within the one template.</p>
</div>
<!-- End Process -->
</div>
<div class="col-md-4 mb-7 mb-md-0">
<!-- Process -->
<div class="text-center">
<div class="position-relative">
<div id="SVGcircleProcess2" class="svg-preloader u-indicator-dots min-height-155 mb-2">
<!-- Icon -->
<span class="text-primary btn btn-lg btn-icon mt-7">
<span class="fas fa-fire font-size-5 btn-icon__inner btn-icon__inner-bottom-minus"></span>
</span>
<!-- End Icon -->
<!-- SVG Shape -->
<figure class="w-100 position-absolute top-0 right-0 left-0 z-index-n1">
<img class="js-svg-injector" src="../../assets/svg/components/circle-process-2.svg" alt="Image Description"
data-parent="#SVGcircleProcess2">
</figure>
<!-- End SVG Shape -->
</div>
</div>
<h3 class="h5">Front Strategy</h3>
<p class="mb-md-0">We strive to figure out ways to help your business grow through all platforms.</p>
<!-- End Process -->
</div>
</div>
<div class="col-md-4">
<!-- Process -->
<div class="text-center">
<div id="SVGcircleProcess3" class="svg-preloader min-height-155 mb-2">
<!-- Icon -->
<span class="text-danger btn btn-lg btn-icon mt-7">
<span class="fab fa-whmcs font-size-5 btn-icon__inner btn-icon__inner-bottom-minus"></span>
</span>
<!-- End Icon -->
<!-- SVG Shape -->
<figure class="w-100 position-absolute top-0 right-0 left-0 z-index-n1">
<img class="js-svg-injector" src="../../assets/svg/components/circle-process-3.svg" alt="Image Description"
data-parent="#SVGcircleProcess3">
</figure>
<!-- End SVG Shape -->
</div>
<h3 class="h5">Unlimited Power</h3>
<p class="mb-md-0">Find what you need in one template and combine features at will.</p>
<!-- End Process -->
</div>
</div>
</div>
</div>
<!-- End Process Section -->
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>
<!-- JS Front -->
<script src="../../assets/js/components/hs.svg-injector.js"></script>
<!-- JS Plugins Init. -->
<script>
$(window).on('load', function () {
// initialization of svg injector module
$.HSCore.components.HSSVGIngector.init('.js-svg-injector');
});
</script>
Icon blocks #3
Can't find your answer?
We want to answer all of your queries. Get in touch and we'll get back to you as soon as we can.
Email us
Technical questions
Have some technical questions? Hit us on community page or just say hello.
Open ticket
<!-- Contacts Section -->
<div class="container">
<div class="row space-2">
<div class="col-lg-6 u-ver-divider u-ver-divider--none-lg mb-7 mb-lg-0">
<!-- Contacts Info -->
<div class="media pr-lg-9">
<figure id="icon15" class="svg-preloader ie-height-56 w-100 max-width-8 mr-4">
<img class="js-svg-injector" src="../../assets/svg/icons/icon-15.svg" alt="SVG"
data-parent="#icon15">
</figure>
<div class="media-body">
<h3 class="h5">Can't find your answer?</h3>
<p class="mb-1">We want to answer all of your queries. Get in touch and we'll get back to you as soon as we can.</p>
<a class="font-size-1" href="#">Email us <span class="fas fa-angle-right align-middle ml-2"></span></a>
</div>
</div>
<!-- End Contacts Info -->
</div>
<div class="col-lg-6">
<!-- Contacts Info -->
<div class="media pl-lg-9">
<figure id="icon4" class="svg-preloader ie-height-56 w-100 max-width-8 mr-4">
<img class="js-svg-injector" src="../../assets/svg/icons/icon-4.svg" alt="SVG"
data-parent="#icon4">
</figure>
<div class="media-body">
<h3 class="h5">Technical questions</h3>
<p class="mb-1">Have some technical questions? Hit us on community page or just say hello.</p>
<a class="font-size-1" href="#">Open ticket <span class="fas fa-angle-right align-middle ml-2"></span></a>
</div>
</div>
<!-- End Contacts Info -->
</div>
</div>
</div>
<!-- End Contacts Section -->
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>
<!-- JS Front -->
<script src="../../assets/js/components/hs.svg-injector.js"></script>
<!-- JS Plugins Init. -->
<script>
$(window).on('load', function () {
// initialization of svg injector module
$.HSCore.components.HSSVGIngector.init('.js-svg-injector');
});
</script>
Icon blocks #4
<!-- Icon Blocks Section -->
<div class="container space-2">
<div class="row justify-content-md-between">
<div class="col-sm-6 offset-sm-3 col-lg-4 offset-lg-0 mb-9 mb-lg-0">
<!-- Icon Block -->
<div class="text-center px-lg-5">
<figure id="icon12" class="svg-preloader ie-height-72 max-width-10 mx-auto mb-3">
<img class="js-svg-injector" src="../../assets/svg/icons/icon-12.svg" alt="SVG"
data-parent="#icon12">
</figure>
<h3 class="h5">Property guides</h3>
<p>A must-have read for anyone buying or selling property.</p>
<a class="btn btn-sm btn-soft-primary transition-3d-hover" href="#">
Learn More
<span class="fas fa-angle-right ml-2"></span>
</a>
</div>
<!-- End Icon Block -->
</div>
<div class="col-sm-6 col-lg-4 mb-9 mb-lg-0">
<!-- Icon Block -->
<div class="text-center px-lg-5">
<figure id="icon10" class="svg-preloader ie-height-72 max-width-10 mx-auto mb-3">
<img class="js-svg-injector" src="../../assets/svg/icons/icon-10.svg" alt="SVG"
data-parent="#icon10">
</figure>
<h3 class="h5">Affordability calculator</h3>
<p>Find out how much you could borrow.</p>
<a class="btn btn-sm btn-soft-primary transition-3d-hover" href="#">
Check Now
<span class="fas fa-angle-right ml-2"></span>
</a>
</div>
<!-- End Icon Block -->
</div>
<div class="col-sm-6 col-lg-4">
<!-- Icon Block -->
<div class="text-center px-lg-5">
<figure id="icon11" class="svg-preloader ie-height-72 max-width-10 mx-auto mb-3">
<img class="js-svg-injector" src="../../assets/svg/icons/icon-11.svg" alt="SVG"
data-parent="#icon11">
</figure>
<h3 class="h5">Mortgage calculator</h3>
<p>Calculate monthly mortgage payments.</p>
<a class="btn btn-sm btn-soft-primary transition-3d-hover" href="#">
Check Now
<span class="fas fa-angle-right ml-2"></span>
</a>
</div>
<!-- End Icon Block -->
</div>
</div>
</div>
<!-- End Icon Blocks Section -->
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>
<!-- JS Front -->
<script src="../../assets/js/components/hs.svg-injector.js"></script>
<!-- JS Plugins Init. -->
<script>
$(window).on('load', function () {
// initialization of svg injector module
$.HSCore.components.HSSVGIngector.init('.js-svg-injector');
});
</script>
Icon blocks #5
Address
153 Williamson Plaza, 09514
support@htmlstream.com
Phone Number
+1 (062) 109-9222
Fax
+1 (062) 109-9223
<!-- Contacts Info Section -->
<div class="clearfix space-2">
<div class="row no-gutters">
<div class="col-sm-6 col-lg-3 u-ver-divider u-ver-divider--none-lg">
<!-- Contacts Info -->
<div class="text-center py-5">
<figure id="icon8" class="svg-preloader ie-height-56 max-width-8 mx-auto mb-3">
<img class="js-svg-injector" src="../../assets/svg/icons/icon-8.svg" alt="SVG"
data-parent="#icon8">
</figure>
<h2 class="h6 mb-0">Address</h2>
<p class="mb-0">153 Williamson Plaza, 09514</p>
</div>
<!-- End Contacts Info -->
</div>
<div class="col-sm-6 col-lg-3 u-ver-divider u-ver-divider--none-lg">
<!-- Contacts Info -->
<div class="text-center py-5">
<figure id="icon15" class="svg-preloader ie-height-56 max-width-8 mx-auto mb-3">
<img class="js-svg-injector" src="../../assets/svg/icons/icon-15.svg" alt="SVG"
data-parent="#icon15">
</figure>
<h3 class="h6 mb-0">Email</h3>
<p class="mb-0">support@htmlstream.com</p>
</div>
<!-- End Contacts Info -->
</div>
<div class="col-sm-6 col-lg-3 u-ver-divider u-ver-divider--none-lg">
<!-- Contacts Info -->
<div class="text-center py-5">
<figure id="icon16" class="svg-preloader ie-height-56 max-width-8 mx-auto mb-3">
<img class="js-svg-injector" src="../../assets/svg/icons/icon-16.svg" alt="SVG"
data-parent="#icon16">
</figure>
<h3 class="h6 mb-0">Phone Number</h3>
<p class="mb-0">+1 (062) 109-9222</p>
</div>
<!-- End Contacts Info -->
</div>
<div class="col-sm-6 col-lg-3">
<!-- Contacts Info -->
<div class="text-center py-5">
<figure id="icon17" class="svg-preloader ie-height-56 max-width-8 mx-auto mb-3">
<img class="js-svg-injector" src="../../assets/svg/icons/icon-17.svg" alt="SVG"
data-parent="#icon17">
</figure>
<h3 class="h6 mb-0">Fax</h3>
<p class="mb-0">+1 (062) 109-9223</p>
</div>
<!-- End Contacts Info -->
</div>
</div>
</div>
<!-- End Contacts Info Section -->
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>
<!-- JS Front -->
<script src="../../assets/js/components/hs.svg-injector.js"></script>
<!-- JS Plugins Init. -->
<script>
$(window).on('load', function () {
// initialization of svg injector module
$.HSCore.components.HSSVGIngector.init('.js-svg-injector');
});
</script>
Icon blocks #6
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 a key point.
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
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.
Learn More
We get it, you're busy and it is important that someone keep up with marketing and driving people to your brand. We've got you covered.
Learn More
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.
Learn More
We strive to embrace and drive change in our industry which allows us to keep our clients relevant and ready to adapt.
Learn More
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.
Learn More
<!-- Features Section -->
<div class="container space-2">
<div class="row">
<div class="col-sm-6 col-lg-4 mb-7 mb-sm-9">
<!-- Icon Block -->
<div class="pr-lg-4">
<figure id="icon2" class="svg-preloader ie-height-56 max-width-8 mb-3">
<img class="js-svg-injector" src="../../assets/svg/icons/icon-2.svg" alt="SVG"
data-parent="#icon2">
</figure>
<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 a key point.</p>
<a href="#">Learn More</a>
</div>
<!-- End Icon Block -->
</div>
<div class="col-sm-6 col-lg-4 mb-7 mb-sm-9">
<!-- Icon Block -->
<div class="pr-lg-4">
<figure id="icon1" class="svg-preloader ie-height-56 max-width-8 mb-3">
<img class="js-svg-injector" src="../../assets/svg/icons/icon-1.svg" alt="SVG"
data-parent="#icon1">
</figure>
<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</a>
</div>
<!-- End Icon Block -->
</div>
<div class="col-sm-6 col-lg-4 mb-7 mb-sm-9">
<!-- Icon Block -->
<div class="pr-lg-4">
<figure id="icon3" class="svg-preloader ie-height-56 max-width-8 mb-3">
<img class="js-svg-injector" src="../../assets/svg/icons/icon-3.svg" alt="SVG"
data-parent="#icon3">
</figure>
<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</a>
</div>
<!-- End Icon Block -->
</div>
<div class="col-sm-6 col-lg-4 mb-7 mb-sm-9">
<!-- Icon Block -->
<div class="pr-lg-4">
<figure id="icon4" class="svg-preloader ie-height-56 max-width-8 mb-3">
<img class="js-svg-injector" src="../../assets/svg/icons/icon-4.svg" alt="SVG"
data-parent="#icon4">
</figure>
<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</a>
</div>
<!-- End Icon Block -->
</div>
<div class="col-sm-6 col-lg-4 mb-7 mb-sm-9">
<!-- Icon Block -->
<div class="pr-lg-4">
<figure id="icon5" class="svg-preloader ie-height-56 max-width-8 mb-3">
<img class="js-svg-injector" src="../../assets/svg/icons/icon-5.svg" alt="SVG"
data-parent="#icon5">
</figure>
<p>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="#">Learn More</a>
</div>
<!-- End Icon Block -->
</div>
<div class="col-sm-6 col-lg-4 mb-7 mb-sm-9">
<!-- Icon Block -->
<div class="pr-lg-4">
<figure id="icon6" class="svg-preloader ie-height-56 max-width-8 mb-3">
<img class="js-svg-injector" src="../../assets/svg/icons/icon-6.svg" alt="SVG"
data-parent="#icon6">
</figure>
<p>We get it, you're busy and it is important that someone keep up with marketing and driving people to your brand. We've got you covered.</p>
<a href="#">Learn More</a>
</div>
<!-- End Icon Block -->
</div>
<div class="col-sm-6 col-lg-4 mb-7 mb-sm-9">
<!-- Icon Block -->
<div class="pr-lg-4">
<figure id="icon7" class="svg-preloader ie-height-56 max-width-8 mb-3">
<img class="js-svg-injector" src="../../assets/svg/icons/icon-7.svg" alt="SVG"
data-parent="#icon7">
</figure>
<p>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.</p>
<a href="#">Learn More</a>
</div>
<!-- End Icon Block -->
</div>
<div class="col-sm-6 col-lg-4 mb-7 mb-sm-9">
<!-- Icon Block -->
<div class="pr-lg-4">
<figure id="icon8" class="svg-preloader ie-height-56 max-width-8 mb-3">
<img class="js-svg-injector" src="../../assets/svg/icons/icon-8.svg" alt="SVG"
data-parent="#icon8">
</figure>
<p>We strive to embrace and drive change in our industry which allows us to keep our clients relevant and ready to adapt.</p>
<a href="#">Learn More</a>
</div>
<!-- End Icon Block -->
</div>
<div class="col-sm-6 col-lg-4 mb-7 mb-sm-9 mb-lg-0">
<!-- Icon Block -->
<div class="pr-lg-4">
<figure id="icon9" class="svg-preloader ie-height-56 max-width-8 mb-3">
<img class="js-svg-injector" src="../../assets/svg/icons/icon-9.svg" alt="SVG"
data-parent="#icon9">
</figure>
<p>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.</p>
<a href="#">Learn More</a>
</div>
<!-- End Icon Block -->
</div>
</div>
<!-- Divider -->
<div class="w-65 w-lg-50 mx-auto">
<hr class="mt-0 mb-9">
</div>
<!-- End Divider -->
<div class="text-center">
<a href="#" class="btn btn-primary transition-3d-hover">See all Features</a>
</div>
</div>
<!-- End Features Section -->
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>
<!-- JS Front -->
<script src="../../assets/js/components/hs.svg-injector.js"></script>
<!-- JS Plugins Init. -->
<script>
$(window).on('load', function () {
// initialization of svg injector module
$.HSCore.components.HSSVGIngector.init('.js-svg-injector');
});
</script>
Icon blocks #7
Call us
+1 (062) 109-9222Email us
support@htmlstream.comAddress
153 Williamson Plaza, Maggieberg
<!-- Icon Blocks -->
<div class="container space-2">
<div class="row">
<div class="col-md-4 mb-7 mb-md-0">
<!-- Contacts -->
<div class="media">
<span class="btn btn-icon btn-soft-primary rounded-circle mr-3">
<span class="fas fa-phone btn-icon__inner"></span>
</span>
<div class="media-body">
<h4 class="h6 text-secondary font-weight-normal mb-0">Call us</h4>
<span class="d-block font-size-1">+1 (062) 109-9222</span>
</div>
</div>
<!-- End Contacts -->
</div>
<div class="col-md-4 mb-7 mb-md-0">
<!-- Contacts -->
<div class="media">
<span class="btn btn-icon btn-soft-primary rounded-circle mr-3">
<span class="fas fa-envelope btn-icon__inner"></span>
</span>
<div class="media-body">
<h4 class="h6 text-secondary font-weight-normal mb-0">Email us</h4>
<span class="d-block font-size-1">support@htmlstream.com</span>
</div>
</div>
<!-- End Contacts -->
</div>
<div class="col-md-4">
<!-- Contacts -->
<div class="media">
<span class="btn btn-icon btn-soft-primary rounded-circle mr-3">
<span class="fas fa-map-marker-alt btn-icon__inner"></span>
</span>
<div class="media-body">
<h4 class="h6 text-secondary font-weight-normal mb-0">Address</h4>
<span class="d-block font-size-1">153 Williamson Plaza, Maggieberg</span>
</div>
</div>
<!-- End Contacts -->
</div>
</div>
</div>
<!-- End Icon Blocks -->
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>
<!-- JS Front -->
<script src="../../assets/js/components/hs.svg-injector.js"></script>
<!-- JS Plugins Init. -->
<script>
$(window).on('load', function () {
// initialization of svg injector module
$.HSCore.components.HSSVGIngector.init('.js-svg-injector');
});
</script>
Icon blocks #8
-
Email: natalie.curtis@gmail.com
-
Web page: www.htmlstream.com/natalie
-
Location: London, England
-
Birthday: May 3, 1986
-
Organization: Pixeel Ltd.
-
Phone number: +44 (0161) 347 8854
-
Language: English, French
-
<!-- Icon Blocks -->
<div class="container space-2">
<div class="row">
<div class="col-md-6 col-lg-4">
<!-- List Group -->
<ul class="list-group list-group-transparent list-group-flush list-group-borderless mb-0">
<li class="list-group-item pt-0 pb-4">
<div class="media">
<span class="fas fa-envelope list-group-icon mr-3"></span>
<div class="media-body text-lh-sm">
<span class="d-block mb-1">Email:</span>
<a href="#">natalie.curtis@gmail.com</a>
</div>
</div>
</li>
<li class="list-group-item pt-0 pb-4">
<div class="media">
<span class="fas fa-link list-group-icon mr-3"></span>
<div class="media-body text-lh-sm">
<span class="d-block mb-1">Web page:</span>
<a href="#">www.htmlstream.com/natalie</a>
</div>
</div>
</li>
<li class="list-group-item pt-0 pb-4">
<div class="media">
<span class="fas fa-map-marker-alt list-group-icon mr-3"></span>
<div class="media-body text-lh-sm">
<span class="d-block mb-1">Location:</span>
<a href="#">London, England</a>
</div>
</div>
</li>
</ul>
<!-- End List Group -->
</div>
<div class="col-md-6 col-lg-4">
<!-- List Group -->
<ul class="list-group list-group-transparent list-group-flush list-group-borderless mb-0">
<li class="list-group-item pt-0 pb-4">
<div class="media">
<span class="fas fa-birthday-cake list-group-icon mr-3"></span>
<div class="media-body text-lh-sm">
<span class="d-block mb-1">Birthday:</span>
<span class="d-block text-muted">May 3, 1986</span>
</div>
</div>
</li>
<li class="list-group-item pt-0 pb-4">
<div class="media">
<span class="fas fa-building list-group-icon mr-3"></span>
<div class="media-body text-lh-sm">
<span class="d-block mb-1">Organization:</span>
<a href="#">Pixeel Ltd.</a>
</div>
</div>
</li>
<li class="list-group-item pt-0 pb-4">
<div class="media">
<span class="fas fa-mobile-alt list-group-icon mr-3"></span>
<div class="media-body text-lh-sm">
<span class="d-block mb-1">Phone number:</span>
<a href="#">+44 (0161) 347 8854</a>
</div>
</div>
</li>
</ul>
<!-- End List Group -->
</div>
<div class="col-md-6 col-lg-4">
<!-- List Group -->
<ul class="list-group list-group-transparent list-group-flush list-group-borderless mb-0">
<li class="list-group-item pt-0 pb-4">
<div class="media">
<span class="fas fa-globe list-group-icon mr-3"></span>
<div class="media-body text-lh-sm">
<span class="d-block mb-1">Language:</span>
<span class="d-block text-muted">English, French</span>
</div>
</div>
</li>
<li class="list-group-item pt-0 pb-4">
<div class="media">
<span class="fas fa-tags list-group-icon mr-3"></span>
<div class="media-body text-lh-sm">
<span class="d-block mb-1">Skills:</span>
<a href="#">HTML5,</a>
<a href="#">CSS3,</a>
<a href="#">JavaScript,</a>
<a href="#">jQuery</a>
</div>
</div>
</li>
</ul>
<!-- End List Group -->
</div>
</div>
</div>
<!-- End Icon Blocks -->
Icon blocks #9
<!-- Social Profiles -->
<div class="card mb-4">
<div class="card-header pt-4 pb-3 px-0 mx-4">
<h3 class="h6 mb-0">Social Profiles</h3>
</div>
<div class="card-body pt-3 pb-4 px-4">
<!-- Social Profiles -->
<a class="media mb-4" href="#">
<div class="u-sm-avatar mr-3">
<img class="img-fluid" src="../../assets/img/160x160/img18.png" alt="Image Description">
</div>
<div class="media-body">
<span class="d-block text-dark">Behance</span>
<small class="d-block text-secondary">1.2k followers</small>
</div>
</a>
<!-- End Social Profiles -->
<!-- Social Profiles -->
<a class="media mb-4" href="#">
<div class="u-sm-avatar mr-3">
<img class="img-fluid" src="../../assets/img/160x160/img21.png" alt="Image Description">
</div>
<div class="media-body">
<span class="d-block text-dark">Dribbble</span>
<small class="d-block text-secondary">4.5k followers</small>
</div>
</a>
<!-- End Social Profiles -->
<!-- Social Profiles -->
<a class="media mb-4" href="#">
<div class="u-sm-avatar mr-3">
<img class="img-fluid" src="../../assets/img/160x160/img19.png" alt="Image Description">
</div>
<div class="media-body">
<span class="d-block text-dark">Twitter</span>
<small class="d-block text-secondary">2.7k followers</small>
</div>
</a>
<!-- End Social Profiles -->
<!-- Social Profiles -->
<a class="media" href="#">
<div class="u-sm-avatar mr-3">
<img class="img-fluid" src="../../assets/img/160x160/img20.png" alt="Image Description">
</div>
<div class="media-body">
<span class="d-block text-dark">Facebook</span>
<small class="d-block text-secondary">3k followers</small>
</div>
</a>
<!-- End Social Profiles -->
</div>
</div>
<!-- End Social Profiles -->
Icon blocks #10
Responsive
Front is an incredibly beautiful, fully responsive, and mobile-first projects on the web.
Explore now
Customizable
Front template can be easily customized with its cutting-edge components and features.
Explore now
Premium
Front is not only for developers but also for designers, and includes a Sketch file.
Explore now
<!-- Icon Blocks Section -->
<div class="container space-2">
<div class="row justify-content-lg-center">
<div class="col-md-6 col-lg-5 mb-7">
<!-- Icon Blocks -->
<div class="media pr-lg-5">
<figure id="icon9" class="svg-preloader ie-height-56 w-100 max-width-8 mr-4">
<img class="js-svg-injector" src="../../assets/svg/icons/icon-9.svg" alt="SVG"
data-parent="#icon9">
</figure>
<div class="media-body">
<h3 class="h5">Responsive</h3>
<p class="mb-1">Front is an incredibly beautiful, fully responsive, and mobile-first projects on the web.</p>
<a class="font-size-1" href="#">Explore now <span class="fas fa-angle-right align-middle ml-2"></span></a>
</div>
</div>
<!-- End Icon Blocks -->
</div>
<div class="col-md-6 col-lg-5 mb-7">
<!-- Icon Blocks -->
<div class="media pl-lg-5">
<figure id="icon3" class="svg-preloader ie-height-56 w-100 max-width-8 mr-4">
<img class="js-svg-injector" src="../../assets/svg/icons/icon-3.svg" alt="SVG"
data-parent="#icon3">
</figure>
<div class="media-body">
<h3 class="h5">Customizable</h3>
<p class="mb-1">Front template can be easily customized with its cutting-edge components and features.</p>
<a class="font-size-1" href="#">Explore now <span class="fas fa-angle-right align-middle ml-2"></span></a>
</div>
</div>
<!-- End Icon Blocks -->
</div>
<div class="w-100"></div>
<div class="col-md-6 col-lg-5 mb-7 mb-lg-0">
<!-- Icon Blocks -->
<div class="media pr-lg-5">
<figure id="icon5" class="svg-preloader ie-height-56 w-100 max-width-8 mr-4">
<img class="js-svg-injector" src="../../assets/svg/icons/icon-5.svg" alt="SVG"
data-parent="#icon5">
</figure>
<div class="media-body">
<h3 class="h5">Premium</h3>
<p class="mb-1">Front is not only for developers but also for designers, and includes a Sketch file.</p>
<a class="font-size-1" href="#">Explore now <span class="fas fa-angle-right align-middle ml-2"></span></a>
</div>
</div>
<!-- End Icon Blocks -->
</div>
<div class="col-md-6 col-lg-5">
<!-- Icon Blocks -->
<div class="media pl-lg-5">
<figure id="icon2" class="svg-preloader ie-height-56 w-100 max-width-8 mr-4">
<img class="js-svg-injector" src="../../assets/svg/icons/icon-2.svg" alt="SVG"
data-parent="#icon2">
</figure>
<div class="media-body">
<h3 class="h5">Documentation <span class="badge badge-success font-weight-medium badge-pill ml-1">v2.0</span></h3>
<p class="mb-1">Every component and plugin is well documented with live examples.</p>
<a class="font-size-1" href="#">Explore now <span class="fas fa-angle-right align-middle ml-2"></span></a>
</div>
</div>
<!-- End Icon Blocks -->
</div>
</div>
</div>
<!-- End Icon Blocks Section -->
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>
<!-- JS Front -->
<script src="../../assets/js/components/hs.svg-injector.js"></script>
<!-- JS Plugins Init. -->
<script>
$(window).on('load', function () {
// initialization of svg injector module
$.HSCore.components.HSSVGIngector.init('.js-svg-injector');
});
</script>
Icon blocks #11
What we do?
More control and greater overview from simple, powerful features
This is where we really begin to visualize your napkin sketches and make them into beautiful pixels.
Marketing
Front is an incredibly beautiful, fully responsive, and mobile-first projects on the web.
Clean design
Front template can be easily customized with its cutting-edge components and features.
Social services beta
Front is not only for developers but also for designers, and includes a Sketch file.
Creative ideas
Every component and plugin is well documented with live examples.
<!-- What We Do Section -->
<div class="container space-2">
<div class="row justify-content-lg-between">
<div class="col-lg-4 mb-7 mb-lg-0">
<!-- Title -->
<small class="text-secondary text-uppercase font-weight-medium mb-2">What we do?</small>
<h3 class="font-weight-medium">More control and greater overview from simple, powerful features</h3>
<p>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-7">
<div class="row">
<div class="col-sm-6 mb-3">
<!-- Icon Blocks -->
<figure id="icon26" class="svg-preloader ie-height-56 w-100 max-width-8 mb-3">
<img class="js-svg-injector" src="../../assets/svg/icons/icon-26.svg" alt="SVG"
data-parent="#icon26">
</figure>
<h4 class="h5">Marketing</h4>
<p class="font-size-1">Front is an incredibly beautiful, fully responsive, and mobile-first projects on the web.</p>
<!-- End Icon Blocks -->
</div>
<div class="col-sm-6 mb-3">
<!-- Icon Blocks -->
<figure id="icon27" class="svg-preloader ie-height-56 w-100 max-width-8 mb-3">
<img class="js-svg-injector" src="../../assets/svg/icons/icon-27.svg" alt="SVG"
data-parent="#icon27">
</figure>
<h4 class="h5">Clean design</h4>
<p class="font-size-1">Front template can be easily customized with its cutting-edge components and features.</p>
<!-- End Icon Blocks -->
</div>
<div class="w-100"></div>
<div class="col-sm-6 mb-3 mb-sm-0">
<!-- Icon Blocks -->
<figure id="icon25" class="svg-preloader ie-height-56 w-100 max-width-8 mb-3">
<img class="js-svg-injector" src="../../assets/svg/icons/icon-25.svg" alt="SVG"
data-parent="#icon25">
</figure>
<h4 class="h5">Social services <span class="badge badge-success font-weight-medium badge-pill ml-1">beta</span></h4>
<p class="font-size-1">Front is not only for developers but also for designers, and includes a Sketch file.</p>
<!-- End Icon Blocks -->
</div>
<div class="col-sm-6">
<!-- Icon Blocks -->
<figure id="icon28" class="svg-preloader ie-height-56 w-100 max-width-8 mb-3">
<img class="js-svg-injector" src="../../assets/svg/icons/icon-28.svg" alt="SVG"
data-parent="#icon28">
</figure>
<h4 class="h5">Creative ideas</h4>
<p class="font-size-1">Every component and plugin is well documented with live examples.</p>
<!-- End Icon Blocks -->
</div>
</div>
</div>
</div>
</div>
<!-- End What We Do Section -->
Icon blocks #12
Job Summary
www.slack.com
Website
London, UK
Location
Full time
Job type
1 to 3 months
Project length
Salary
$28k - $32k
Entry level
We are looking for freelancers with the lowest rates.
<!-- Sidebar Info -->
<div class="card border-0 shadow-sm mb-3">
<!-- Header -->
<header id="SVGwave1BottomShapeID1" class="svg-preloader card-header border-bottom-0 bg-primary text-white p-0">
<div class="pt-5 px-5">
<h3 class="h5">Job Summary</h3>
</div>
<figure class="ie-wave-1-bottom mt-n5">
<img class="js-svg-injector" src="../../assets/svg/components/wave-1-bottom.svg" alt="Image Description"
data-parent="#SVGwave1BottomShapeID1">
</figure>
</header>
<!-- End Header -->
<!-- Content -->
<div class="card-body pt-1 px-5 pb-5">
<!-- Icon Block -->
<div class="media mb-3">
<div class="min-width-4 text-center text-primary mt-1 mr-3">
<span class="fas fa-globe"></span>
</div>
<div class="media-body">
<a class="font-weight-medium" href="#">www.slack.com</a>
<small class="d-block text-secondary">Website</small>
</div>
</div>
<!-- End Icon Block -->
<!-- Icon Block -->
<div class="media mb-3">
<div class="min-width-4 text-center text-primary mt-1 mr-3">
<span class="fas fa-map-marked-alt"></span>
</div>
<div class="media-body">
<span class="d-block font-weight-medium">London, UK</span>
<small class="d-block text-secondary">Location</small>
</div>
</div>
<!-- End Icon Block -->
<!-- Icon Block -->
<div class="media mb-3">
<div class="min-width-4 text-center text-primary mt-1 mr-3">
<span class="fas fa-clock"></span>
</div>
<div class="media-body">
<span class="d-block font-weight-medium">Full time</span>
<small class="d-block text-secondary">Job type</small>
</div>
</div>
<!-- End Icon Block -->
<!-- Icon Block -->
<div class="media mb-3">
<div class="min-width-4 text-center text-primary mt-1 mr-3">
<span class="fas fa-business-time"></span>
</div>
<div class="media-body">
<span class="d-block font-weight-medium">1 to 3 months</span>
<small class="d-block text-secondary">Project length</small>
</div>
</div>
<!-- End Icon Block -->
<!-- Icon Block -->
<div class="media mb-3">
<div class="min-width-4 text-center text-primary mt-1 mr-3">
<span class="fas fa-money-bill-alt"></span>
</div>
<div class="media-body">
<span class="d-block font-weight-medium">Salary</span>
<small class="d-block text-secondary">$28k - $32k</small>
</div>
</div>
<!-- End Icon Block -->
<!-- Icon Block -->
<div class="media mb-3">
<div class="min-width-4 text-center text-primary mt-1 mr-3">
<span class="fas fa-briefcase"></span>
</div>
<div class="media-body">
<span class="d-block font-weight-medium">Entry level</span>
<small class="d-block text-secondary">We are looking for freelancers with the lowest rates.</small>
</div>
</div>
<!-- End Icon Block -->
</div>
<!-- End Content -->
</div>
<!-- End Sidebar Info -->
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>
<!-- JS Front -->
<script src="../../assets/js/components/hs.svg-injector.js"></script>
<!-- JS Plugins Init. -->
<script>
$(window).on('load', function () {
// initialization of svg injector module
$.HSCore.components.HSSVGIngector.init('.js-svg-injector');
});
</script>
Icon blocks #13
Veteran Hiring Commitment
Committed to helping America's military veterans find work.
Social Responsibility Pledge
Formal programs or foundation to give back to communities.
Diversity Commitment
Has programs that support a diverse and inclusive workforce.
Pledge to Thrive
Taking steps to prioritize employee well-being.
<div class="row">
<div class="col-sm-6 mb-5">
<!-- Icon Block -->
<div class="media">
<figure id="iconExample21" class="svg-preloader ie-height-56 w-100 max-width-8 mr-4">
<img class="js-svg-injector" src="../../assets/svg/illustrations/medal.svg" alt="SVG"
data-parent="#iconExample21">
</figure>
<div class="media-body">
<h3 class="h6 mb-1">Veteran Hiring Commitment</h3>
<p>Committed to helping America's military veterans find work.</p>
</div>
</div>
<!-- End Icon Block -->
</div>
<div class="col-sm-6 mb-5">
<!-- Icon Block -->
<div class="media">
<figure id="iconExample25" class="svg-preloader ie-height-56 w-100 max-width-8 mr-4">
<img class="js-svg-injector" src="../../assets/svg/illustrations/social-responsibility.svg" alt="SVG"
data-parent="#iconExample25">
</figure>
<div class="media-body">
<h4 class="h6 mb-1">Social Responsibility Pledge</h4>
<p>Formal programs or foundation to give back to communities.</p>
</div>
</div>
<!-- End Icon Block -->
</div>
<div class="w-100"></div>
<div class="col-sm-6 mb-5 mb-sm-0">
<!-- Icon Block -->
<div class="media">
<figure id="iconExample7" class="svg-preloader ie-height-56 w-100 max-width-8 mr-4">
<img class="js-svg-injector" src="../../assets/svg/illustrations/diversity.svg" alt="SVG"
data-parent="#iconExample7">
</figure>
<div class="media-body">
<h4 class="h6 mb-1">Diversity Commitment</h4>
<p>Has programs that support a diverse and inclusive workforce.</p>
</div>
</div>
<!-- End Icon Block -->
</div>
<div class="col-sm-6">
<!-- Icon Block -->
<div class="media">
<figure id="iconExample29" class="svg-preloader ie-height-56 w-100 max-width-8 mr-4">
<img class="js-svg-injector" src="../../assets/svg/illustrations/growth.svg" alt="SVG"
data-parent="#iconExample29">
</figure>
<div class="media-body">
<h4 class="h6 mb-1">Pledge to Thrive</h4>
<p>Taking steps to prioritize employee well-being.</p>
</div>
</div>
<!-- End Icon Block -->
</div>
</div>
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>
<!-- JS Front -->
<script src="../../assets/js/components/hs.svg-injector.js"></script>
<!-- JS Plugins Init. -->
<script>
$(window).on('load', function () {
// initialization of svg injector module
$.HSCore.components.HSSVGIngector.init('.js-svg-injector');
});
</script>
Icon blocks #14
Go Front with ease.
Whether you’re a seasoned agile expert, or just getting started, Jira Software unlocks the power of agile.
Flexible planning
Front Software's rich planning features enable your team to flexibly plan.
Accurate estimations
Use story points, hours, t-shirt sizes, or your own estimation technique.
Value-driven prioritization
Order user stories, issues, and bugs in your product backlog with simple dragging.
Transparent execution
Front Software brings a new level of transparency to your team's work.
Actionable results
Extensive reporting functionality gives your team critical insight into their agile process.
Scalable evolution Coming soon
Front Software is agile project management designed for any teams.
Start free trial. * No credit card required.
<!-- Icons Section -->
<div class="position-relative gradient-overlay-half-primary-v3 overflow-hidden">
<div class="container space-top-2 space-top-lg-3">
<!-- Title -->
<div class="w-md-80 w-lg-50 text-center mx-md-auto mb-9">
<h2 class="text-white font-weight-medium">Go Front with ease.</h2>
<p class="text-white-70">Whether you’re a seasoned agile expert, or just getting started, Jira Software unlocks the power of agile.</p>
</div>
<!-- End Title -->
<!-- Icon Blocks -->
<div class="w-lg-80 mx-lg-auto mb-11">
<div class="row mb-9">
<div class="col-6 col-md-4 mb-7">
<!-- Icon Block -->
<span class="d-block text-white font-size-2 mb-3">
<span class="fas fa-align-center"></span>
</span>
<h4 class="h6 text-white font-weight-semi-bold mb-3">Flexible planning</h4>
<p class="text-white-70">Front Software's rich planning features enable your team to flexibly plan.</p>
<!-- End Icon Block -->
</div>
<div class="col-6 col-md-4 mb-7">
<!-- Icon Block -->
<span class="d-block text-white font-size-2 mb-3">
<span class="fas fa-code-branch"></span>
</span>
<h4 class="h6 text-white font-weight-semi-bold mb-3">Accurate estimations</h4>
<p class="text-white-70">Use story points, hours, t-shirt sizes, or your own estimation technique.</p>
<!-- End Icon Block -->
</div>
<div class="col-6 col-md-4 mb-7 mb-md-0">
<!-- Icon Block -->
<span class="d-block text-white font-size-2 mb-3">
<span class="fas fa-shapes"></span>
</span>
<h4 class="h6 text-white font-weight-semi-bold mb-3">Value-driven prioritization</h4>
<p class="text-white-70">Order user stories, issues, and bugs in your product backlog with simple dragging.</p>
<!-- End Icon Block -->
</div>
<div class="col-6 col-md-4 mb-7 mb-md-0">
<!-- Icon Block -->
<span class="d-block text-white font-size-2 mb-3">
<span class="fas fa-clone"></span>
</span>
<h4 class="h6 text-white font-weight-semi-bold mb-3">Transparent execution</h4>
<p class="text-white-70">Front Software brings a new level of transparency to your team's work.</p>
<!-- End Icon Block -->
</div>
<div class="col-6 col-md-4">
<!-- Icon Block -->
<span class="d-block text-white font-size-2 mb-3">
<span class="fas fa-check-circle"></span>
</span>
<h4 class="h6 text-white font-weight-semi-bold mb-3">Actionable results</h4>
<p class="text-white-70">Extensive reporting functionality gives your team critical insight into their agile process.</p>
<!-- End Icon Block -->
</div>
<div class="col-6 col-md-4">
<!-- Icon Block -->
<span class="d-block text-white font-size-2 mb-3">
<span class="fas fa-compress"></span>
</span>
<h4 class="h6 text-white font-weight-semi-bold mb-3">Scalable evolution <span class="badge badge-warning font-weight-medium badge-pill ml-1">Coming soon</span></h4>
<p class="text-white-70">Front Software is agile project management designed for any teams.</p>
<!-- End Icon Block -->
</div>
</div>
<!-- Buttons -->
<div class="text-center">
<div class="mb-3">
<a class="btn btn-sm btn-white btn-wide text-primary transition-3d-hover" href="#">Sign up and Start Building</a>
<small class="d-block d-sm-inline-block text-white-70 my-3 my-sm-0 mx-sm-3">or</small>
<a class="btn btn-sm btn-indigo btn-wide transition-3d-hover" href="#">Talk to our Experts</a>
</div>
<p class="small text-white-70">Start free trial. * No credit card required.</p>
</div>
<!-- End Buttons -->
</div>
<!-- End Icon Blocks -->
<div class="w-85 w-md-75 w-lg-65 text-center mx-auto">
<img class="img-fluid" src="../../assets/svg/illustrations/ai-creation.svg" alt="Image Description">
</div>
</div>
<!-- SVG Background Shape -->
<figure class="w-35 position-absolute top-0 right-0 z-index-n1">
<div class="mt-n11 mr-n11">
<img class="js-svg-injector" src="../../assets/svg/components/half-circle-3.svg" alt="Image Description"
data-parent="#SVGHero">
</div>
</figure>
<figure class="w-25 position-absolute bottom-0 left-0 z-index-n1">
<div class="mb-n11 ml-n11">
<img class="js-svg-injector" src="../../assets/svg/components/half-circle-2.svg" alt="Image Description"
data-parent="#SVGHero">
</div>
</figure>
<!-- End SVG Background Shape -->
</div>
<!-- End Icons Section -->
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>
<!-- JS Front -->
<script src="../../assets/js/components/hs.svg-injector.js"></script>
<!-- JS Plugins Init. -->
<script>
$(window).on('load', function () {
// initialization of svg injector module
$.HSCore.components.HSSVGIngector.init('.js-svg-injector');
});
</script>