Features
Component #1
Whatever work you do, use our design
After brainstorming about insights, get the power to create something real. Bring your ideas to life and share your vision with concrete elements. Make collaboration and communication easier with your team or your client.
Use our tools to explore your ideas and make your vision come true. Then share your work easily.
<!-- Features Section -->
<div class="container space-2">
<div class="row justify-content-lg-between align-items-lg-center">
<div class="col-lg-5 mb-9 mb-lg-0">
<div class="mb-3">
<h2 class="h1">Whatever work you do, use our design</h2>
</div>
<p>After brainstorming about insights, get the power to create something real. Bring your ideas to life and share your vision with concrete elements. Make collaboration and communication easier with your team or your client.</p>
<p>Use our tools to explore your ideas and make your vision come true. Then share your work easily.</p>
<div class="mt-4">
<a class="btn btn-primary btn-wide transition-3d-hover" href="#">Start Now</a>
</div>
</div>
<div class="col-lg-6 col-xl-5">
<!-- SVG Element -->
<div class="position-relative min-h-500rem mx-auto" style="max-width: 28rem;">
<figure class="position-absolute top-0 right-0 z-index-2 mr-11">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 450 450" width="165" height="165">
<g>
<defs>
<path id="circleImgID2" d="M225,448.7L225,448.7C101.4,448.7,1.3,348.5,1.3,225l0,0C1.2,101.4,101.4,1.3,225,1.3l0,0
c123.6,0,223.7,100.2,223.7,223.7l0,0C448.7,348.6,348.5,448.7,225,448.7z"/>
</defs>
<clipPath id="circleImgID1">
<use xlink:href="#circleImgID2"/>
</clipPath>
<g clip-path="url(#circleImgID1)">
<image width="450" height="450" xlink:href="../../assets/img/450x450/img1.jpg" ></image>
</g>
</g>
</svg>
</figure>
<figure class="position-absolute top-0 left-0">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 335.2 335.2" width="120" height="120">
<circle fill="none" stroke="#377DFF" stroke-width="75" cx="167.6" cy="167.6" r="130.1"/>
</svg>
</figure>
<figure class="d-none d-sm-block position-absolute top-0 left-0 mt-11">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 515 515" width="200" height="200">
<g>
<defs>
<path id="circleImgID4" d="M260,515h-5C114.2,515,0,400.8,0,260v-5C0,114.2,114.2,0,255,0h5c140.8,0,255,114.2,255,255v5
C515,400.9,400.8,515,260,515z"/>
</defs>
<clipPath id="circleImgID3">
<use xlink:href="#circleImgID4"/>
</clipPath>
<g clip-path="url(#circleImgID3)">
<image width="515" height="515" xlink:href="../../assets/img/515x515/img1.jpg" transform="matrix(1 0 0 1 1.639390e-02 2.880859e-02)"></image>
</g>
</g>
</svg>
</figure>
<figure class="position-absolute top-0 right-0" style="margin-top: 11rem; margin-right: 13rem;">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 67 67" width="25" height="25">
<circle fill="#00C9A7" cx="33.5" cy="33.5" r="33.5"/>
</svg>
</figure>
<figure class="position-absolute top-0 right-0 mr-3" style="margin-top: 8rem;">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 141 141" width="50" height="50">
<circle fill="#FFC107" cx="70.5" cy="70.5" r="70.5"/>
</svg>
</figure>
<figure class="position-absolute bottom-0 right-0">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 770.4 770.4" width="280" height="280">
<g>
<defs>
<path id="circleImgID6" d="M385.2,770.4L385.2,770.4c212.7,0,385.2-172.5,385.2-385.2l0,0C770.4,172.5,597.9,0,385.2,0l0,0
C172.5,0,0,172.5,0,385.2l0,0C0,597.9,172.4,770.4,385.2,770.4z"/>
</defs>
<clipPath id="circleImgID5">
<use xlink:href="#circleImgID6"/>
</clipPath>
<g clip-path="url(#circleImgID5)">
<image width="900" height="900" xlink:href="../../assets/img/900x900/img2.jpg" transform="matrix(1 0 0 1 -64.8123 -64.8055)"></image>
</g>
</g>
</svg>
</figure>
</div>
<!-- End SVG Element -->
</div>
</div>
</div>
<!-- End Features Section -->
Component #2
Build tools and full documention
Components, plugins, and build tools are all thoroughly documented with live examples and markup for easier use and customization.
> $ npm install
Everything installed!
> $ gulp
scss watching
LiveReload started
Opening localhost:3000
> $ that's it?!
Yup, that's it.
Not comfortable diving that deep? No worries, you just use the compiled CSS and examples pages! Learn more
<!-- Tools Section -->
<div class="position-relative gradient-y-gray">
<div class="container space-2 space-bottom-sm-3">
<!-- Title -->
<div class="w-md-80 w-lg-50 text-center mx-md-auto mb-5 mb-md-9">
<h2>Build tools and full documention</h2>
<p>Components, plugins, and build tools are all thoroughly documented with live examples and markup for easier use and customization.</p>
</div>
<!-- End Title -->
<div class="w-md-80 w-lg-50 mx-md-auto mb-5 mb-md-9">
<!-- Code Sample -->
<div class="card bg-navy mb-5">
<div class="card-body text-monospace font-size-1 p-6">
<div class="mb-6">
<span class="d-block text-white-70">> $ npm install</span>
<span class="d-block h4 text-success font-weight-normal">Everything installed!</span>
</div>
<div class="mb-6">
<span class="d-block text-white-70">> $ gulp</span>
<span class="d-block h4 text-success font-weight-normal">scss watching</span>
<span class="d-block h4 text-success font-weight-normal">LiveReload started</span>
<span class="d-block h4 text-success font-weight-normal">Opening localhost:3000</span>
</div>
<div class="mb-0">
<span class="d-block text-white-70">> $ that's it?!</span>
<span class="d-block h4 text-success font-weight-normal">Yup, that's it.</span>
</div>
</div>
</div>
<!-- End Code Sample -->
<!-- Info -->
<div class="text-center mb-7">
<p>Not comfortable diving that deep? No worries, you just use the compiled CSS and examples pages! <a class="font-weight-bold" href="#">Learn more <span class="fas fa-angle-right ml-1"></span></a></p>
</div>
<!-- End Info -->
<!-- Clients -->
<div class="row justify-content-center">
<div class="col-4 col-sm-3 my-2">
<!-- Logo -->
<figure>
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 226.3 88">
<path fill="#bdc5d1" d="M70.1,76.7c0,6.3,5.1,11.4,11.4,11.4H147c6.3,0,11.4-5.1,11.4-11.4V11.2c0-6.3-5.1-11.4-11.4-11.4H81.4
c-6.3,0-11.4,5.1-11.4,11.4V76.7L70.1,76.7z"/>
<path fill="#fff" d="M106.7,38.9V26.4h11c1,0,2.1,0.1,3,0.3c1,0.2,1.8,0.5,2.6,0.9c0.7,0.4,1.3,1.1,1.8,1.9c0.4,0.8,0.7,1.8,0.7,3.1
c0,2.2-0.7,3.9-2,4.9c-1.3,1-3.1,1.5-5.2,1.5L106.7,38.9L106.7,38.9z M94.9,17.2v53.4h25.9c2.4,0,4.7-0.3,7-0.9s4.3-1.5,6.1-2.8
c1.8-1.2,3.2-2.9,4.2-4.8c1-2,1.6-4.3,1.6-7c0-3.3-0.8-6.2-2.4-8.6c-1.6-2.4-4.1-4-7.4-5c2.4-1.1,4.2-2.6,5.4-4.4
c1.2-1.8,1.8-4,1.8-6.7c0-2.5-0.4-4.6-1.2-6.3c-0.8-1.7-2-3.1-3.5-4.1c-1.5-1-3.3-1.8-5.4-2.2c-2.1-0.4-4.4-0.7-7-0.7H94.9
L94.9,17.2z M106.7,61.5V46.9h12.8c2.5,0,4.6,0.6,6.1,1.8c1.5,1.2,2.3,3.1,2.3,5.9c0,1.4-0.2,2.5-0.7,3.4s-1.1,1.6-1.9,2.1
c-0.8,0.5-1.7,0.9-2.8,1.1c-1,0.2-2.1,0.3-3.3,0.3H106.7L106.7,61.5z"/>
</svg>
</figure>
<!-- End Logo -->
</div>
<div class="col-4 col-sm-3 my-2">
<!-- Logo -->
<figure>
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 226.3 88">
<path fill="#bdc5d1" d="M155.1,50.7c-4.1,0-7.6,1-10.6,2.4c-1.1-2.2-2.2-4.1-2.4-5.5C142,46,141.7,45,142,43c0.3-2,1.4-4.7,1.4-5
c0-0.2-0.3-1.2-2.6-1.2c-2.3,0-4.4,0.4-4.6,1.1c-0.2,0.6-0.7,2-1,3.5c-0.4,2.1-4.7,9.7-7.1,13.7c-0.8-1.6-1.5-2.9-1.6-4
c-0.2-1.6-0.5-2.6-0.2-4.6c0.3-2,1.4-4.7,1.4-5c0-0.2-0.3-1.2-2.6-1.2c-2.3,0-4.4,0.4-4.6,1.1c-0.2,0.6-0.5,2.1-1,3.5
c-0.5,1.4-6.2,14.1-7.7,17.4c-0.8,1.7-1.4,3-1.9,3.9c0,0,0,0.1-0.1,0.2c-0.4,0.8-0.6,1.2-0.6,1.2s0,0,0,0c-0.3,0.6-0.7,1.1-0.8,1.1
c-0.1,0-0.4-1.5,0-3.6c0.9-4.4,2.9-11.3,2.9-11.5c0-0.1,0.4-1.3-1.3-1.9c-1.7-0.6-2.3,0.4-2.4,0.4c-0.1,0-0.3,0.4-0.3,0.4
s1.9-7.7-3.5-7.7c-3.4,0-8,3.7-10.3,7c-1.4,0.8-4.5,2.5-7.8,4.3c-1.3,0.7-2.6,1.4-3.8,2.1c-0.1-0.1-0.2-0.2-0.3-0.3
C75,50.8,63,45.8,63.5,36.5c0.2-3.4,1.4-12.3,23.1-23.2c17.9-8.8,32.2-6.4,34.7-1c3.5,7.8-7.6,22.1-26.2,24.2
c-7.1,0.8-10.8-1.9-11.7-3c-1-1.1-1.1-1.1-1.5-0.9c-0.6,0.3-0.2,1.3,0,1.8c0.6,1.4,2.8,4,6.7,5.3c3.4,1.1,11.7,1.7,21.7-2.2
c11.2-4.3,20-16.4,17.4-26.5C125.2,0.8,108.1-2.5,92,3.2C82.4,6.6,72,12,64.6,18.9c-8.9,8.3-10.3,15.5-9.7,18.5
c2.1,10.7,16.9,17.7,22.8,22.9c-0.3,0.2-0.6,0.3-0.8,0.4c-3,1.5-14.2,7.4-17.1,13.6c-3.2,7.1,0.5,12.1,3,12.8
c7.6,2.1,15.4-1.7,19.6-7.9c4.2-6.3,3.7-14.4,1.7-18.1c0,0,0-0.1-0.1-0.1c0.8-0.4,1.6-0.9,2.3-1.4c1.5-0.9,3-1.7,4.3-2.4
c-0.7,2-1.3,4.3-1.5,7.8c-0.3,4,1.3,9.2,3.5,11.2c1,0.9,2.1,0.9,2.8,0.9c2.5,0,3.6-2.1,4.9-4.6c1.5-3,2.9-6.5,2.9-6.5
s-1.7,9.5,3,9.5c1.7,0,3.4-2.2,4.2-3.3c0,0,0,0,0,0s0-0.1,0.1-0.2c0.2-0.3,0.3-0.4,0.3-0.4s0,0,0,0c0.7-1.2,2.2-3.9,4.5-8.4
c2.9-5.8,5.8-13,5.8-13s0.3,1.8,1.1,4.7c0.5,1.7,1.6,3.6,2.4,5.5c-0.7,1-1.1,1.5-1.1,1.5s0,0,0,0c-0.6,0.7-1.1,1.5-1.8,2.3
c-2.3,2.8-5.1,5.9-5.5,6.9c-0.4,1.1-0.3,1.9,0.5,2.5c0.6,0.5,1.7,0.5,2.9,0.5c2.1-0.1,3.6-0.7,4.3-1c1.1-0.4,2.4-1,3.7-1.9
c2.3-1.7,3.7-4.1,3.5-7.3c-0.1-1.7-0.6-3.5-1.3-5.1c0.2-0.3,0.4-0.6,0.6-0.9c3.6-5.3,6.4-11,6.4-11s0.3,1.8,1.1,4.7
c0.4,1.5,1.3,3.1,2.1,4.7c-3.4,2.7-5.5,5.9-6.2,8c-1.3,3.9-0.3,5.6,1.7,6c0.9,0.2,2.2-0.2,3.1-0.6c1.2-0.4,2.6-1,3.9-2
c2.3-1.7,4.5-4,4.3-7.2c-0.1-1.4-0.4-2.9-1-4.3c2.9-1.2,6.6-1.9,11.3-1.3c10.1,1.2,12.1,7.5,11.8,10.2c-0.4,2.7-2.5,4.1-3.2,4.6
c-0.7,0.4-0.9,0.6-0.9,0.9c0.1,0.5,0.4,0.4,1,0.4c0.8-0.1,5.3-2.2,5.5-7C171.6,57.4,165.7,50.6,155.1,50.7z M76.9,77
c-3.4,3.7-8,5-10.1,3.9c-2.2-1.3-1.3-6.7,2.8-10.5c2.5-2.4,5.7-4.6,7.9-5.9c0.5-0.3,1.2-0.7,2.1-1.3c0.1-0.1,0.2-0.1,0.2-0.1
c0.2-0.1,0.3-0.2,0.5-0.3C81.9,68.3,80.5,73.2,76.9,77z M101.4,60.4c-1.2,2.9-3.6,10.2-5.1,9.8c-1.3-0.3-2.1-5.9-0.3-11.3
c0.9-2.7,2.9-6,4-7.3c1.8-2,3.9-2.7,4.3-1.9C105,50.7,102.1,58.6,101.4,60.4z M121.6,70c-0.5,0.3-1,0.4-1.2,0.3
c-0.1-0.1,0.2-0.4,0.2-0.4s2.5-2.7,3.5-4c0.6-0.7,1.3-1.6,2-2.5c0,0.1,0,0.2,0,0.3C126.2,66.9,123,69.1,121.6,70z M137.2,66.5
c-0.4-0.3-0.3-1.1,0.9-3.8c0.5-1,1.6-2.8,3.5-4.5c0.2,0.7,0.4,1.3,0.3,2C141.9,64.3,139,65.8,137.2,66.5z"/>
</svg>
</figure>
<!-- End Logo -->
</div>
<div class="col-4 col-sm-3 my-2">
<!-- Logo -->
<figure>
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 226.3 88">
<path fill="#bdc5d1" d="M78.6,45.8c-0.1,0.2-0.3,0.6-0.6,1.4c-0.3,0.8-0.6,1.8-1,3c-0.4,1.2-0.8,2.5-1.2,4c-0.4,1.5-0.9,3-1.4,4.5
c-0.5,1.5-0.9,3.1-1.3,4.5c-0.4,1.5-0.8,2.8-1.2,4c-0.3,1.2-0.6,2.2-0.9,3c-0.2,0.8-0.4,1.3-0.4,1.4c-0.1,0.5-0.3,1-0.6,1.6
c-0.3,0.6-0.6,1.1-1,1.7c-0.4,0.5-0.8,1-1.3,1.3s-0.9,0.5-1.4,0.5c-0.8,0-1.4-0.3-1.8-0.8c-0.4-0.5-0.6-1.5-0.6-3v-0.6
c0-0.2,0-0.4,0-0.7c0-0.5,0.2-1.4,0.6-2.7c0.4-1.3,0.8-2.8,1.3-4.5c0.5-1.7,1-3.4,1.6-5.2c0.6-1.8,1.1-3.4,1.5-4.8
c-1.3,1.5-2.8,3-4.4,4.5c-1.6,1.5-3.2,2.8-4.8,4c-1.6,1.2-3.3,2.2-5,2.9c-1.7,0.7-3.3,1.1-4.8,1.1c-1.8,0-3.3-0.4-4.6-1.2
c-1.3-0.8-2.3-1.8-3.2-3.1s-1.5-2.7-1.9-4.3C40.2,57,40,55.4,40,53.8v-0.6c0-0.2,0-0.4,0-0.5c0.2-2.9,0.6-5.8,1.2-8.9
c0.7-3,1.5-6,2.6-9c1.1-3,2.3-5.9,3.8-8.8c1.4-2.9,3-5.6,4.7-8.1c1.7-2.5,3.5-4.9,5.4-7c1.9-2.1,3.8-4,5.8-5.5c2-1.5,4-2.7,6-3.6
c2-0.9,4.1-1.3,6-1.3c2.3,0,4.5,0.6,6.7,1.9c2.1,1.3,4.2,3.3,6,6.1c0.4,0.6,0.7,1.3,0.8,1.9s0.2,1.3,0.2,1.8c0,1.3-0.3,2.4-1,3.2
c-0.6,0.8-1.4,1.2-2.3,1.2c-0.8,0-1.6-0.4-2.3-1.3c-0.7-0.9-1.5-2.1-2.3-3.7c-0.8-1.4-1.7-2.5-2.7-3.1c-1-0.6-2-1-3.2-1
c-1.8,0-3.7,0.7-5.7,2.2s-4,3.4-6,5.8c-2,2.4-3.9,5.2-5.7,8.3c-1.8,3.1-3.4,6.3-4.8,9.5c-1.4,3.2-2.5,6.5-3.3,9.6
c-0.8,3.2-1.2,6-1.2,8.5c0,0.8,0.1,1.7,0.2,2.6s0.3,1.7,0.6,2.4c0.3,0.7,0.7,1.3,1.3,1.8c0.5,0.5,1.2,0.7,2.1,0.7
c0.9,0,2-0.3,3.2-0.9c1.2-0.6,2.4-1.5,3.7-2.5c1.3-1,2.6-2.2,3.9-3.5c1.3-1.3,2.5-2.6,3.6-3.9c1.1-1.3,2.1-2.6,3-3.8
c0.9-1.2,1.5-2.3,1.9-3.2l3.5-10.6c0.4-1.1,1-1.9,1.7-2.4c0.7-0.5,1.4-0.7,2.1-0.7c0.4,0,0.7,0.1,1.1,0.2c0.4,0.1,0.7,0.3,0.9,0.6
c0.3,0.3,0.5,0.6,0.7,1s0.2,0.9,0.2,1.4c0,1.4-0.1,2.8-0.4,4c-0.3,1.3-0.6,2.5-1,3.7c-0.4,1.2-0.8,2.4-1.3,3.6
C79.5,43.2,79.1,44.4,78.6,45.8L78.6,45.8z M126.5,54.6c-1.1,1.5-2.4,3-3.9,4.4c-1.5,1.4-3,2.7-4.6,3.8s-3.1,2-4.6,2.7
c-1.5,0.7-2.9,1-4.1,1s-2.2-0.4-3-1.2c-0.8-0.8-1.1-2.2-1.1-4.1c0-1.4,0.2-3,0.6-4.8c-0.7,1.2-1.5,2.4-2.5,3.5
c-1,1.2-2.1,2.3-3.4,3.3c-1.3,1-2.7,1.8-4.2,2.4c-1.6,0.6-3.3,0.9-5.1,0.9c-0.8,0-1.6-0.1-2.4-0.3c-0.8-0.2-1.4-0.6-2-1.1
s-1-1.2-1.4-2c-0.4-0.9-0.5-1.9-0.5-3.2c0,0,0.1-0.5,0.2-1.4c0.1-0.9,0.4-2.3,1-4.2c0.5-1.9,1.4-4.4,2.5-7.4c1.1-3,2.7-6.7,4.8-11
c0.5-1.1,1.1-2,1.8-2.4c0.7-0.5,1.4-0.7,2.3-0.7c0.4,0,0.7,0.1,1.1,0.2c0.4,0.1,0.7,0.3,1.1,0.5c0.3,0.2,0.6,0.5,0.8,0.9
c0.2,0.3,0.3,0.7,0.3,1.2c0,0.3,0,0.6-0.1,0.9c-0.1,0.5-0.4,1.2-0.8,2C98.7,39,98.2,40,97.6,41c-0.6,1.1-1.1,2.2-1.8,3.4
c-0.6,1.2-1.2,2.5-1.7,3.8c-0.5,1.3-1,2.7-1.4,4c-0.4,1.4-0.6,2.7-0.6,4c0,0.5,0.1,1,0.4,1.5c0.3,0.4,0.7,0.7,1.3,0.7
c1.6,0,3.2-0.5,4.7-1.6c1.5-1.1,2.9-2.4,4.1-4c1.3-1.6,2.4-3.3,3.4-5.2c1-1.8,1.9-3.5,2.6-5.1c0.5-1,0.9-2.1,1.3-3.3
s0.8-2.2,1.2-3.2c0.4-1,0.9-1.8,1.5-2.5c0.6-0.7,1.3-1,2.1-1c0.9,0,1.6,0.3,2.2,1s0.8,1.5,0.8,2.5c0,0.5-0.2,1.3-0.5,2.2
s-0.8,2-1.3,3.2c-0.5,1.2-1.1,2.5-1.7,3.9c-0.6,1.4-1.2,2.8-1.7,4.2c-0.5,1.4-0.9,2.8-1.3,4.2c-0.3,1.4-0.5,2.6-0.5,3.8
c0,1.1,0.6,1.6,1.7,1.6c0.8,0,1.8-0.3,2.9-0.8c1.2-0.5,2.4-1.3,3.7-2.3c1.3-1,2.6-2.1,3.8-3.4c1.3-1.3,2.4-2.7,3.4-4.3L126.5,54.6
L126.5,54.6z"/>
<path fill="#bdc5d1" d="M127.6,52.3c-0.3,0.7-0.6,1.5-0.8,2.4c-0.3,0.9-0.4,1.7-0.4,2.4c0,0.4,0.1,0.8,0.2,1.1s0.4,0.4,0.9,0.4
c0.5,0,1.2-0.2,2-0.6c0.8-0.4,1.7-0.9,2.6-1.5c0.9-0.6,1.9-1.3,2.9-2.1c1-0.8,2-1.6,3-2.5c1-0.9,1.9-1.7,2.8-2.6
c0.9-0.9,1.7-1.6,2.4-2.4c0.2-0.2,0.4-0.4,0.7-0.4c0.3-0.1,0.5-0.1,0.7-0.1c0.5,0,0.9,0.2,1.3,0.6c0.3,0.4,0.5,1,0.5,1.7
c0,0.6-0.2,1.3-0.5,2.1c-0.4,0.8-1,1.5-1.9,2.3c-1.6,1.8-3.2,3.4-4.9,5c-1.6,1.6-3.3,3-4.9,4.2c-1.6,1.2-3.2,2.2-4.9,2.9
c-1.6,0.7-3.2,1.1-4.7,1.1c-1,0-1.9-0.2-2.6-0.5c-0.7-0.3-1.3-0.8-1.7-1.3c-0.4-0.6-0.7-1.2-0.9-2c-0.2-0.8-0.3-1.6-0.3-2.5
c0-1.5,0.2-3,0.6-4.5c0.4-1.5,0.8-3,1.3-4.2c0.9-2.3,1.8-4.7,2.7-7c0.9-2.3,1.7-4.4,2.5-6.3l11.5-29c0.5-1.2,1.1-2,1.8-2.5
c0.8-0.5,1.5-0.7,2.3-0.7s1.5,0.3,2.1,0.8c0.6,0.5,1,1.3,1,2.5c0,0.5-0.1,1.1-0.3,1.7c-0.2,0.6-0.5,1.2-0.8,1.9
c-0.6,1.4-1.4,3.1-2.3,5.2c-0.9,2-1.8,4.3-2.8,6.6s-2,4.9-3.1,7.5c-1,2.6-2.1,5.1-3.1,7.6c-1,2.5-1.9,4.8-2.8,7
C129,48.8,128.3,50.7,127.6,52.3L127.6,52.3z"/>
<path fill="#bdc5d1" d="M181.4,44.2c0.4-0.2,0.7-0.4,1-0.6c0.3-0.2,0.6-0.2,0.9-0.2c0.6,0,1,0.2,1.3,0.7c0.3,0.5,0.4,1.1,0.4,1.8
c0,0.8-0.2,1.6-0.5,2.4c-0.3,0.8-0.9,1.5-1.5,2c-2.7,2.4-5.1,4.6-7.2,6.6c-2.1,2-4.1,3.7-6,5.1c-1.9,1.4-3.7,2.5-5.5,3.3
c-1.8,0.8-3.7,1.2-5.8,1.2c-1.9,0-3.4-0.4-4.5-1.3c-1-0.8-1.6-2-1.6-3.5v-0.3c0-0.1,0-0.2,0-0.4c0.1-0.9,0.5-1.9,1.2-3.1
c0.7-1.2,1.5-2.4,2.5-3.6s2-2.5,3.1-3.8c1.1-1.3,2.1-2.5,3-3.7c0.9-1.2,1.7-2.2,2.3-3.2c0.6-1,0.9-1.7,0.9-2.3
c0-0.4-0.1-0.6-0.4-0.9c-0.3-0.2-0.7-0.3-1.3-0.3c-1,0-2.1,0.3-3.1,0.8s-2.1,1.2-3.2,2.1c-1,0.9-2.1,1.9-3.1,3s-1.9,2.3-2.8,3.5
c-0.9,1.2-1.7,2.5-2.4,3.7c-0.7,1.2-1.3,2.4-1.8,3.4c-0.2,0.3-0.4,0.8-0.6,1.4c-0.3,0.6-0.6,1.3-0.9,2c-0.3,0.7-0.7,1.5-1,2.3
c-0.4,0.8-0.7,1.5-1,2.2c-0.3,0.7-0.6,1.3-0.8,1.9c-0.2,0.6-0.4,0.9-0.5,1.1c-0.1,0.3-0.3,0.8-0.6,1.5s-0.6,1.6-1,2.6
c-0.4,1-0.8,2.1-1.2,3.2c-0.4,1.1-0.8,2.2-1.2,3.1c-0.4,1-0.7,1.9-1,2.6c-0.3,0.7-0.5,1.3-0.5,1.5c-0.3,0.8-0.6,1.5-0.9,2.2
c-0.3,0.7-0.7,1.3-1.2,1.8c-0.4,0.5-0.9,0.9-1.5,1.3c-0.6,0.3-1.2,0.5-1.9,0.5c-0.9,0-1.7-0.2-2.3-0.6c-0.6-0.4-0.9-1.3-0.9-2.5
c0-0.6,0.1-1.2,0.2-1.8c0.2-0.6,0.3-1.3,0.6-1.9c0.2-0.6,0.5-1.2,0.7-1.8c0.2-0.6,0.5-1.1,0.7-1.7c1.4-3,2.8-6,4.2-9
c1.4-3,2.8-6,4.1-8.9c1.3-2.9,2.5-5.8,3.6-8.7c1.1-2.8,2-5.6,2.8-8.2c0.2-0.5,0.5-1.3,0.8-2.3c0.4-1,0.8-2,1.2-2.9
c0.5-1,1-1.8,1.5-2.5c0.6-0.7,1.2-1.1,1.8-1.1c1,0,1.7,0.2,2.2,0.7c0.5,0.5,0.7,1.1,0.7,2c0,0.2,0,0.5-0.1,0.9S153,38.6,153,39
c-0.1,0.4-0.2,0.8-0.2,1.2c-0.1,0.4-0.2,0.7-0.2,0.9c0.9-1,1.9-2,3-3c1.1-1,2.2-1.9,3.4-2.7c1.2-0.8,2.3-1.5,3.6-2
c1.2-0.5,2.4-0.8,3.6-0.8c0.8,0,1.7,0.1,2.5,0.4c0.8,0.2,1.6,0.6,2.2,1.1c0.6,0.5,1.2,1,1.6,1.8c0.4,0.7,0.6,1.5,0.6,2.4
c0,1.2-0.3,2.5-0.9,3.9c-0.6,1.4-1.4,2.8-2.3,4.2c-0.9,1.4-1.9,2.8-3,4.1c-1.1,1.3-2.1,2.5-3.1,3.6c-0.9,1.1-1.7,2-2.4,2.8
c-0.6,0.8-1,1.3-1,1.5c0,0.4,0.1,0.6,0.3,0.9c0.2,0.2,0.6,0.3,1.1,0.3c0.4,0,1.1-0.2,1.9-0.7c0.8-0.5,2-1.3,3.5-2.5s3.4-2.8,5.7-4.8
C175.1,49.7,178,47.2,181.4,44.2L181.4,44.2z"/>
</svg>
</figure>
<!-- End Logo -->
</div>
<div class="col-4 col-sm-3 my-2">
<!-- Logo -->
<figure>
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 226.3 88">
<path fill="#bdc5d1" d="M16.3,6.3h193.6v64.5h-96.8v10.7H70.2V70.9H16.3V6.3z M27.1,60.1h21.5V27.9h10.7v32.3h10.7V17.1H27.1V60.1z
M80.9,17.1v53.8h21.5V60.1h21.5v-43H80.9z M102.4,27.9h10.7v21.5h-10.7V27.9z M134.7,17.1v43h21.5V27.9h10.7v32.3h10.7V27.9h10.7
v32.3h10.7V17.1H134.7z"/>
<polygon fill="none" points="31.8,59.2 52.1,59.2 52.1,28.8 62.3,28.8 62.3,59.2 72.5,59.2 72.5,18.5 31.8,18.5 "/>
<path fill="none" d="M82.7,18.5v50.8H103V59.2h20.3V18.5H82.7z M113.1,49.1H103V28.8h10.1V49.1z"/>
<polygon fill="none" points="133.5,18.5 133.5,59.2 153.8,59.2 153.8,28.8 164,28.8 164,59.2 174.1,59.2 174.1,28.8 184.3,28.8184.3,59.2 194.4,59.2 194.4,18.5 "/>
</svg>
</figure>
<!-- End Logo -->
</div>
</div>
<!-- End Clients -->
</div>
<div class="text-center">
<a class="btn btn-primary transition-3d-hover px-lg-7" href="https://themes.getbootstrap.com/product/front-multipurpose-responsive-template/" target="_blank">Get a License for $59</a>
</div>
</div>
<!-- SVG Bottom Shape -->
<figure class="position-absolute bottom-0 right-0 left-0">
<svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 1920 100.1">
<path fill="#fff" d="M0,0c0,0,934.4,93.4,1920,0v100.1H0L0,0z"/>
</svg>
</figure>
<!-- End SVG Bottom Shape -->
</div>
<!-- End Tools Section -->
Component #3
How we work
Bring your ideas to life and share your vision with concrete elements
Easy & fast designing
Powerful features
Advanced HTML/CSS editing
React-Native Development
User Experience Design
all our services
We tackle the challenges start-ups face
Besides working with start-up enterprises as a partner for digitalization, we have built enterprise products for common pain points that we have encountered in various products and projects.
<!-- Features Section -->
<div class="overflow-hidden">
<div class="container space-2 space-lg-3">
<!-- Title -->
<div class="w-md-80 w-lg-50 text-center mx-md-auto mb-5 mb-md-9">
<span class="d-block small font-weight-bold text-cap mb-2">How we work</span>
<h2>Bring your ideas to life and share your vision with concrete elements</h2>
</div>
<!-- End Title -->
<div class="w-md-80 mx-md-auto">
<div class="row justify-content-lg-center align-items-md-center">
<div class="col-md-5 mb-7 mb-md-0">
<!-- Features -->
<div class="media mb-4">
<span class="icon icon-xs icon-soft-primary icon-circle mr-3">
<i class="fas fa-check"></i>
</span>
<div class="media-body text-dark">
Easy & fast designing
</div>
</div>
<div class="media mb-4">
<span class="icon icon-xs icon-soft-primary icon-circle mr-3">
<i class="fas fa-check"></i>
</span>
<div class="media-body text-dark">
Powerful features
</div>
</div>
<div class="media mb-4">
<span class="icon icon-xs icon-soft-primary icon-circle mr-3">
<i class="fas fa-check"></i>
</span>
<div class="media-body text-dark">
Advanced HTML/CSS editing
</div>
</div>
<div class="media mb-4">
<span class="icon icon-xs icon-soft-primary icon-circle mr-3">
<i class="fas fa-check"></i>
</span>
<div class="media-body text-dark">
React-Native Development
</div>
</div>
<div class="media mb-4">
<span class="icon icon-xs icon-soft-primary icon-circle mr-3">
<i class="fas fa-check"></i>
</span>
<div class="media-body text-dark">
User Experience Design
</div>
</div>
<a class="media" href="#">
<span class="icon icon-xs icon-soft-primary icon-circle mr-3">
<i class="fas fa-ellipsis-h"></i>
</span>
<div class="media-body">
all our services
</div>
</a>
<!-- End Features -->
</div>
<div class="col-md-7 col-lg-5">
<div class="position-relative">
<!-- Card -->
<div class="card">
<div class="card-body">
<figure class="w-100 max-w-6rem mb-4">
<img class="img-fluid" src="../../assets/svg/icons/icon-2.svg" alt="SVG">
</figure>
<h3>We tackle the challenges start-ups face</h3>
<p>Besides working with start-up enterprises as a partner for digitalization, we have built enterprise products for common pain points that we have encountered in various products and projects.</p>
</div>
</div>
<!-- End Card -->
<!-- SVG Elements -->
<figure class="max-w-19rem w-100 position-absolute bottom-0 right-0 z-index-n1">
<div class="mb-n7 mr-n7">
<img class="img-fluid" src="../../assets/svg/components/dots-2.svg" alt="Image Description">
</div>
</figure>
<!-- End SVG Elements -->
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End Features Section -->
Component #4
All-in-one
Front is a place where conversations happen, decisions are made, and information is always at your fingertips.
Style your workflow how you want to fit your brand
Front is a collaboration hub for work, no matter what work you do. It's a place where conversations happen, decisions are made, and information is always at your fingertips. With Front, your team is better connected.
<!-- Features Section -->
<div class="container space-2">
<div class="row">
<div class="col-lg-4 mb-7 mb-lg-0">
<div class="mb-4">
<h2 class="h1">All-in-one</h2>
<img class="img-fluid mr-3" src="../../assets/svg/clients-logo/slack-logo-original.svg" alt="Logo" width="24" height="24">
<img class="img-fluid mr-3" src="../../assets/svg/clients-logo/jira-logo-original.svg" alt="Logo" width="24" height="24">
<img class="img-fluid mr-3" src="../../assets/svg/clients-logo/gitlab-logo-original.svg" alt="Logo" width="24" height="24">
</div>
<p>Front is a place where conversations happen, decisions are made, and information is always at your fingertips.</p>
</div>
</div>
<div class="mt-lg-n11 mb-7 mb-lg-0">
<!-- SVG Illustration -->
<figure class="ie-device-and-mobile">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 2058.5 1182.2" xml:space="preserve">
<path fill="none" stroke="#bdc5d1" stroke-width="5.4276" stroke-miterlimit="10" stroke-dasharray="8.5629" d="M212.3,502.7c0.9-1.6,1.8-3.2,2.7-4.7"/>
<path fill="none" stroke="#bdc5d1" stroke-width="5.4276" stroke-miterlimit="10" stroke-dasharray="8.5629" d="M220.8,488.8c1.9-2.8,3.8-5.5,5.7-8.3c13-18.3,27.7-35,43.4-49.8c22.5-21.3,47.4-38.9,73.8-52.2
c33.5-16.8,69.3-26.4,105.4-29.2c46.6-3.6,93.4,4.1,138.3,19c44.5,14.8,84.6,43.6,128.8,59C767,445,821,448.1,872.8,434.9
c6.4-1.6,12.8-3.5,19.1-5.6"/>
<path fill="none" stroke="#bdc5d1" stroke-width="5.4276" stroke-miterlimit="10" stroke-dasharray="8.5629" d="M897.1,427.4c1.7-0.6,3.4-1.2,5.1-1.9"/>
<polyline fill="none" stroke="#bdc5d1" stroke-width="4.5" stroke-miterlimit="10" stroke-dasharray="7" points="885.9,410.4 918.5,419.1 896.8,440.8 "/>
<g>
<path fill="#fff" d="M1916.1,696.8H992.9c-17.4,0-31.7-14.3-31.7-31.7V31.7c0-17.4,14.3-31.7,31.7-31.7h923.3
c17.4,0,31.7,14.3,31.7,31.7v633.6C1947.8,682.6,1933.5,696.8,1916.1,696.8z"/>
<circle fill="#F7F7F7" cx="1452.8" cy="28.2" r="3.6"/>
<path fill="#fff" d="M2055.1,677.7H854.4c-1.8,0-3.4-1.6-3.4-3.4l0,0c0-1.8,1.6-3.4,3.4-3.4h1200.7c1.8,0,3.4,1.6,3.4,3.4l0,0
C2058.5,676.2,2057.1,677.7,2055.1,677.7z"/>
<path fill="#EFEFEF" d="M1454.8,679.9l-603.9-2.2c0,0,29.1,13.7,142.4,19.1h459.5h3.7h459.6c113.3-5.4,142.4-19.1,142.4-19.1
L1454.8,679.9z"/>
<linearGradient id="devices1ID_1" gradientUnits="userSpaceOnUse" x1="1339.1" y1="546.1826" x2="1570.1" y2="546.1826" gradientTransform="matrix(1 0 0 1 0 129.1174)">
<stop offset="5.908129e-07" style="stop-color:#F0F1F2"/>
<stop offset="5.235744e-02" style="stop-color:#F6F7F8"/>
<stop offset="0.1708" style="stop-color:#FDFDFD"/>
<stop offset="0.5" style="stop-color:#FFFFFF"/>
<stop offset="0.8292" style="stop-color:#FDFDFD"/>
<stop offset="0.9476" style="stop-color:#F6F7F8"/>
<stop offset="1" style="stop-color:#F0F1F2"/>
</linearGradient>
<path fill="url(#devices1ID_1)" d="M1565.7,679.5h-222.4c-2.3,0-4.2-1.9-4.2-4.2v-4.2h231v4.2C1570.1,677.6,1568.1,679.5,1565.7,679.5z"/>
<g>
<defs>
<rect id="devices1ID_2" x="998" y="45.3" width="909.6" height="567.7"/>
</defs>
<clipPath id="devices1ID_3">
<use xlink:href="#devices1ID_2"/>
</clipPath>
<g clip-path="url(#devices1ID_3)">
<image id="SVGDevices1LaptopImg" width="1618" height="1010" xlink:href="../../assets/img/1618x1010/img1.jpg" transform="matrix(0.5622 0 0 0.5622 998.0432 45.2877)"></image>
</g>
<g>
<rect id="laptopID2" x="998" y="45.3" fill="none" stroke="#e7eaf3" stroke-width="1.2" stroke-miterlimit="10" width="909.6" height="567.7"/>
</g>
</g>
</g>
<path fill="#e7eaf3" d="M303.1,849.1c-4,2.2-38.9,60.2-36.8,107.7c5.4-1.5,18.3-8.3,18.3-8.3l5.9-3.5l3.7-20.3l4.8-23l9-28.8l10.8-21
l8.4-12l-7.8,2.4L303.1,849.1z"/>
<path fill="#e7eaf3" d="M402.5,938.6c0,0.3,0,0.7,0,1.3c0.4,13.4,4.4,92.4-50.4,124.7c24.6,27.6,64.8,3,64.8,3l5.4-6v-94.2l-1.2-2.4
l-6.6-24l-8.4,0.6L402.5,938.6z"/>
<path fill="#377dff" d="M373.2,1150.2l-44.1-61c0,0-28.8-26.1-40.5-34.9c-0.1,9,0.5,73.5,3.2,95.9H373.2z"/>
<path fill="#377dff" d="M414.1,1140.4h8.2V1060c-20.7,6.6-120.8,7.2-133.6-5.8c0,1,19.2,53.2,53.8,93.5h71.6V1140.4z"/>
<path fill="none" stroke="#1e2022" opacity=".1" d="M414.1,1140.4h8.2V1060c-20.7,6.6-120.8,7.2-133.6-5.8c0,1,19.2,53.2,53.8,93.5h71.6V1140.4z"/>
<path fill="none" stroke="#1e2022" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" d="M266.1,898.1c-2.2,2.4-2.2,7-2.2,7c-2.7-8.1-61.6-154.6-61.6-154.6s-12.2,5.2,1.9,32.9
c-4.5,2.7-17.2,12.8-12,29.1c3.9,12.3,12.6,16.5,18,16.5c-0.9,9.2,18.7,103,21.3,107.5c6,10.6,17.6,22.2,24.4,22.5
c7.8,0.4,23.7-6.8,34.6-13.7"/>
<path fill="none" stroke="#1e2022" stroke-width="1.5" stroke-linecap="round" stroke-miterlimit="10" d="M326.7,840c-29.6,5.5-67.2,40.4-66.3,47.9c0.9,7.1,19.4,27.6,33.4,37.3"/>
<path fill="none" stroke="#1e2022" stroke-width="1.5" stroke-linecap="round" stroke-miterlimit="10" d="M345.3,823.5c-63.6,35.9-64.8,219.5-56.6,230.8c8,11,103.1,13.9,133.6,6.3"/>
<path fill="none" stroke="#1e2022" stroke-width="1.5" stroke-linecap="round" stroke-miterlimit="10" d="M419.9,845.3c-8.7-12.7-20.2-21.9-35.1-25.8"/>
<path fill="none" stroke="#1e2022" stroke-width="1.5" stroke-linecap="round" stroke-miterlimit="10" d="M414.7,940.7c1.6,6.9,4.9,19.8,8.2,32"/>
<path fill="none" stroke="#1e2022" stroke-width="1.5" stroke-linecap="round" stroke-miterlimit="10" d="M395.6,925.2c3.1,8.9,6.5,15.1,8.9,15.9c3,1,9.8,0,17.8-2.1"/>
<path fill="none" stroke="#1e2022" stroke-width="1.5" stroke-linecap="round" stroke-miterlimit="10" d="M422.3,846.9c-5.3-3.9-10.6-5.8-15.6-4.6"/>
<path fill="none" stroke="#1e2022" stroke-width="1.5" stroke-linecap="round" stroke-miterlimit="10" d="M345.3,823.5v-10.3"/>
<path fill="none" stroke="#1e2022" stroke-width="1.5" stroke-linecap="round" stroke-miterlimit="10" d="M384.8,794.3v42.8c0,3.5-9.3,5.6-18.9,5.9"/>
<path fill="none" stroke="#1e2022" stroke-width="1.5" stroke-linecap="round" stroke-miterlimit="10" d="M384.7,794.3c3.6,2,9-0.1,12.5-5c3.7-5.1,3.7-11.3,0.2-13.9c-0.9-0.7-2-1-3.2-1.1"/>
<path fill="none" stroke="#1e2022" stroke-width="1.5" stroke-linecap="round" stroke-miterlimit="10" d="M327.8,750.7c-0.6,1.3-1.2,2.6-1.7,3.9c-9.7,24.5-2.8,50.1,15.4,57.3c1.2,0.5,2.5,0.9,3.7,1.2"/>
<path fill="none" stroke="#1e2022" stroke-width="1.5" stroke-linecap="round" stroke-miterlimit="10" d="M407.3,779.8c7.4-2.2,16.6-7.5,16.6-18c0-6.6-6.2-13.9-7.3-22.2c-0.6-4.2,0.7-21.7-4.2-27.6
c-10.2-12.3-16.2-9.7-24-12.6c-13.6-5-18.8-13.2-30-13.2c-12.7,0-17.9,6.6-27,6.6c-10.4,0-19-4.8-33.6-4.8c-7.8,0-18,10.2-18,19.2
c0,21.3,19.8,18.2,19.8,23.4c0,3.6-1.2,6.5-1.2,11.4c0,2.6,1.4,4.8,3.4,6.5"/>
<path fill="#e7eaf3" d="M187.1,682.6H217c8.9,0,16.1,7.2,16.1,16.1v29.9c0,8.9-7.2,16.1-16.1,16.1h-29.9c-8.9,0-16.1-7.2-16.1-16.1
v-29.9C171.1,689.8,178.3,682.6,187.1,682.6z"/>
<circle fill="#377dff" cx="225.7" cy="687.6" r="12.7"/>
<path fill="#fff" stroke="#1e2022" stroke-width="1.5" stroke-miterlimit="10" d="M389.4,544.2H187.9c-27.1,0-49.1,22-49.1,49.1v515.2c0,27.1,22,49.1,49.1,49.1l0,0h201.5
c27.1,0,49.1-22,49.1-49.1V593.3C438.5,566.2,416.5,544.2,389.4,544.2z M422.3,848.9v256.5c0,18.7-15.2,33.9-33.9,33.9H188.9
c-18.7,0-33.9-15.2-33.9-33.9l0,0v-509c0-18.7,15.2-33.9,33.9-33.9h33V573c0,5.2,4.2,9.4,9.4,9.4h114.4c5.2,0,9.4-4.2,9.4-9.4v-10.5
h33c18.7,0,33.9,15.2,33.9,33.9l0,0L422.3,848.9z"/>
<path fill="#00c9a7" d="M493.4,620.4h-72.8c-13.1,0-23.8,10.7-23.8,23.8c0,6.9,2.9,13.1,7.7,17.5v15.9l10.3-10.3
c1.9,0.5,3.8,0.7,5.8,0.7h72.8c13.1,0,23.8-10.7,23.8-23.8S506.5,620.4,493.4,620.4z"/>
<circle fill="#fff" cx="432.4" cy="645" r="6"/>
<circle fill="#fff" cx="457" cy="645" r="6"/>
<circle fill="#fff" cx="481.5" cy="645" r="6"/>
<path fill="none" stroke="#1e2022" stroke-width="5" stroke-linecap="round" stroke-miterlimit="10" d="M109.2,1090.2c1.2-3.4,1.9-7.7,1.9-13c0-80.1-94.8-58.5-94.8-125"/>
<path fill="#1e2022" d="M33,951.7c5.1,6.7-12.1,14.4-14.5,11.1S27.5,944.6,33,951.7z"/>
<path fill="#1e2022" d="M116.9,834c6.3,8.1-12.2,15.6-15.2,11.7C98.7,841.8,110.2,825.3,116.9,834z"/>
<path fill="#1e2022" d="M111.9,867.7c5,9-19.2,16.2-21.6,11.9C87.9,875.3,106.6,858.1,111.9,867.7z"/>
<path fill="#1e2022" d="M113.4,893.3c6.5,7.9-15.9,19.4-19.1,15.6S106.4,884.8,113.4,893.3z"/>
<path fill="#1e2022" d="M121,922.1c6.5,7.9-15.9,19.4-19.1,15.6C98.8,934,114,913.6,121,922.1z"/>
<path fill="#1e2022" d="M127.7,948.9c5.9,7.2-13.7,17-16.5,13.6C108.3,959,121.4,941.2,127.7,948.9z"/>
<path fill="#1e2022" d="M136.7,978.2c5.9,7.2-13.7,17-16.5,13.6C117.3,988.3,130.4,970.5,136.7,978.2z"/>
<path fill="#1e2022" d="M0.3,946.4c2.1-8.2,18.8,0.7,17.7,4.7S-2,955.2,0.3,946.4z"/>
<path fill="#1e2022" d="M0,975.2c-1-8.4,17.7-6.3,18.2-2.3S1.2,984.2,0,975.2z"/>
<path fill="#1e2022" d="M16.6,1001.3c-5.5-6.4,11.3-15,14-11.9C33.2,992.4,22.4,1008.1,16.6,1001.3z"/>
<path fill="#1e2022" d="M37.4,1015.3c-3.3-7.8,15.3-10.9,16.9-7.2C55.8,1011.9,40.9,1023.6,37.4,1015.3z"/>
<path fill="#1e2022" d="M65.3,1030c-3.3-7.8,15.3-10.9,16.9-7.2S68.8,1038.3,65.3,1030z"/>
<path fill="#1e2022" d="M86.2,1051.2c-0.7-8.4,17.9-5.6,18.3-1.6S87,1060.2,86.2,1051.2z"/>
<path fill="#1e2022" d="M42,969.7c6.6,5.3-8.3,16.8-11.4,14.3C27.4,981.5,35,964.1,42,969.7z"/>
<path fill="#1e2022" d="M57,984.8c7.3,4.3-5.8,17.8-9.3,15.8S49.2,980.2,57,984.8z"/>
<path fill="#1e2022" d="M84.4,999.5c6.8,4.9-7.5,17.2-10.8,14.8S77.1,994.2,84.4,999.5z"/>
<path fill="none" stroke="#1e2022" stroke-width="5" stroke-linecap="round" stroke-miterlimit="10" d="M107.4,1090c8.3-13.7,18.5-34.5,18.5-57.9c0-64.7-36.1-97.1-36.1-143.2c0-8.7,0.8-36.2,14.7-47.4"/>
<path fill="#fff" stroke="#1e2022" stroke-width="1.5" stroke-linecap="round" stroke-miterlimit="10" d="M136.3,1181.5h-53c-2.5,0-4.7-1.6-5.4-3.9l-26.4-80c-1-3,0.7-6.3,3.7-7.2c0.6-0.2,1.2-0.3,1.8-0.3h106
c3.2,0,5.7,2.6,5.7,5.7c0,0.6-0.1,1.2-0.3,1.8l-26.6,80C141,1179.9,138.8,1181.5,136.3,1181.5z"/>
<path fill="#e7eaf3" d="M132,1090.2c1.5,2.2,12.7,65.1-44.8,91.3c15.8-0.5,19.9,0.3,19.9,0.3h30l4.8-3l11.4-34.2l8.1-25.2l7.5-23.4
l-1.8-4.3l-3.6-2.3L132,1090.2z"/>
<path fill="#1e2022" d="M145.3,1011.8c3.1,8.8-18.7,11.3-20.2,7.1C123.6,1014.7,141.9,1002.4,145.3,1011.8z"/>
<path fill="#1e2022" d="M109.6,1024.9c6.9-6.3,17.7,12.9,14.3,15.9S102.2,1031.6,109.6,1024.9z"/>
<path fill="#1e2022" d="M104,1001c4.6-8.1,20.8,6.6,18.6,10.5S99.1,1009.7,104,1001z"/>
<path fill="#1e2022" d="M98.8,972.6c4.6-8.1,20.8,6.6,18.6,10.5S93.9,981.3,98.8,972.6z"/>
<path fill="#1e2022" d="M89.5,950.1c3-8.8,21.7,2.6,20.3,6.8C108.4,961.2,86.3,959.6,89.5,950.1z"/>
<path fill="#1e2022" d="M76.3,919.1c4.4-8.3,21,6.1,18.9,10S71.7,927.9,76.3,919.1z"/>
<path fill="#1e2022" d="M70.1,884.5c5.1-7.8,20.4,8,17.9,11.7S64.7,892.9,70.1,884.5z"/>
<path fill="#1e2022" d="M73.2,854.8c5.1-7.8,20.4,8,17.9,11.7C88.7,870.3,67.7,863.2,73.2,854.8z"/>
<path fill="#1e2022" d="M145.3,1042.5c3.1,8.8-18.7,11.3-20.2,7.1C123.6,1045.4,141.9,1033.1,145.3,1042.5z"/>
<path fill="none" stroke="#1e2022" stroke-width="1.5" stroke-linecap="round" stroke-miterlimit="10" d="M338.6,757.7c0,3-0.6,12.6-4.2,15"/>
<path fill="none" stroke="#1e2022" stroke-width="1.5" stroke-linecap="round" stroke-miterlimit="10" d="M336.5,788.6c6,0,11.4-3.6,11.4-6"/>
<ellipse fill="none" stroke="#1e2022" cx="351.8" cy="759.2" rx="2.1" ry="3.6"/>
<path fill="none" stroke="#1e2022" stroke-width="1.5" stroke-linecap="round" stroke-miterlimit="10" d="M136.3,1181.5h-53c-2.5,0-4.7-1.6-5.4-3.9l-26.4-80c-1-3,0.7-6.3,3.7-7.2c0.6-0.2,1.2-0.3,1.8-0.3h106
c3.2,0,5.7,2.6,5.7,5.7c0,0.6-0.1,1.2-0.3,1.8l-26.6,80C141,1179.9,138.8,1181.5,136.3,1181.5z"/>
</svg>
</figure>
<!-- End SVG Illustration -->
</div>
<div class="row justify-content-lg-end">
<div class="col-lg-7 mt-lg-n11">
<h2 class="h1 mb-4">Style your workflow how you want to fit your brand</h2>
<p>Front is a collaboration hub for work, no matter what work you do. It's a place where conversations happen, decisions are made, and information is always at your fingertips. With Front, your team is better connected.</p>
</div>
</div>
</div>
<!-- End Features Section -->
Component #5
<!-- Features Section -->
<div class="container space-2">
<div class="row justify-content-lg-between align-items-lg-center">
<div class="col-lg-5 mb-9 mb-lg-0">
<div class="mb-5">
<h2>Payment made easy in stores with speed and security using.</h2>
<p>When paying in stores, Front Pay doesn't share your actual card number, so your information stays secure. Plus, you can check out faster and easier.</p>
</div>
<div class="w-md-50 w-lg-80 mb-2">
<!-- Fancybox -->
<div class="bg-img-hero text-center rounded py-11 px-5" style="background-image: url(../../assets/img/480x320/img18.jpg);">
<a class="js-fancybox video-player video-player-btn d-flex justify-content-center align-items-center" href="javascript:;"
data-hs-fancybox-options='{
"src": "//vimeo.com/167434033",
"caption": "Front - Responsive Website Template",
"speed": 700,
"buttons": ["fullScreen", "close"],
"vimeo": {
"autoplay": 1
}
}'>
<span class="video-player-icon">
<i class="fas fa-play"></i>
</span>
</a>
</div>
<!-- End Fancybox -->
</div>
<p class="small">See how to send money with Front Pay.</p>
</div>
<div class="col-lg-6">
<div class="position-relative max-w-50rem mx-auto">
<!-- Device Mockup -->
<div class="device device-iphone-x w-75 mx-auto">
<img class="device-iphone-x-frame" src="../../assets/svg/components/iphone-x.svg" alt="Image Description">
<img class="device-iphone-x-screen" src="../../assets/img/407x867/img8.jpg" alt="Image Description">
</div>
<!-- End Device Mockup -->
<!-- SVG Component -->
<div class="position-absolute bottom-0 right-0 max-w-50rem w-100 z-index-n1 mx-auto">
<img class="img-fluid" src="../../assets/svg/components/abstract-shapes-2.svg" alt="Image Description">
</div>
<!-- End SVG Component -->
</div>
</div>
</div>
</div>
<!-- End Features Section -->
<link rel="stylesheet" href="../../assets/vendor/fancybox/dist/jquery.fancybox.min.css">
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/fancybox/dist/jquery.fancybox.min.js"></script>
<!-- JS Front -->
<script src="../../assets/js/hs.fancybox.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of fancybox
$('.js-fancybox').each(function () {
var fancybox = $.HSCore.components.HSFancyBox.init($(this));
});
});
</script>
Component #6
<!-- Features Section -->
<div class="container space-2">
<div class="row justify-content-lg-between align-items-lg-center">
<div class="col-lg-5 order-lg-2 mb-9 mb-lg-0">
<div class="mb-5">
<h2>The easiest way to pay within apps.</h2>
<p>Use Front Pay to make purchases in all kinds of apps. Pay for a ride, a pizza delivery, or a new pair of sneakers — with just a touch. Checking out is fast, simple, and secure.</p>
</div>
<h4 class="mb-3">Get our mobile app</h4>
<a class="btn btn-icon btn-indigo rounded-circle mr-2" href="#">
<i class="fab fa-apple"></i>
</a>
<a class="btn btn-icon btn-indigo rounded-circle" href="#">
<i class="fab fa-google-play"></i>
</a>
</div>
<div class="col-lg-6 order-lg-1">
<div class="position-relative max-w-50rem mx-auto">
<!-- Device Mockup -->
<div class="device device-iphone-x w-75 mx-auto">
<img class="device-iphone-x-frame" src="../../assets/svg/components/iphone-x.svg" alt="Image Description">
<img class="device-iphone-x-screen" src="../../assets/img/407x867/img9.jpg" alt="Image Description">
</div>
<!-- End Device Mockup -->
<!-- SVG Component -->
<div class="position-absolute bottom-0 right-0 max-w-50rem w-100 z-index-n1 mx-auto">
<img class="img-fluid" src="../../assets/svg/components/abstract-shapes-3.svg" alt="Image Description">
</div>
<!-- End SVG Component -->
</div>
</div>
</div>
</div>
<!-- End Features Section -->
Component #7
Get paid and use the cash. All with Front Pay.
When you receive money it's added to your Front Pay Cash card that lives in the Wallet app.
When you pay with a debit or credit card, Front Pay doesn't keep transaction information that can be tied back to you.
When you use Front Pay Cash, information is stored only for troubleshooting.
You can also add your student ID card to Front Wallet to access places like your dorm and the library.
<!-- Features Section -->
<div class="container space-2">
<div class="row justify-content-lg-between align-items-lg-center">
<div class="col-lg-5 mb-9 mb-lg-0">
<div class="mb-4">
<h2>Get paid and use the cash. All with Front Pay.</h2>
<p>When you receive money it's added to your Front Pay Cash card that lives in the Wallet app.</p>
</div>
<div class="media">
<span class="icon icon-xs icon-indigo icon-circle mt-1 mr-3">
<i class="fas fa-check fa-xs"></i>
</span>
<div class="media-body">
<p>When you pay with a debit or credit card, Front Pay doesn't keep transaction information that can be tied back to you.</p>
</div>
</div>
<div class="media">
<span class="icon icon-xs icon-indigo icon-circle mt-1 mr-3">
<i class="fas fa-check fa-xs"></i>
</span>
<div class="media-body">
<p>When you use Front Pay Cash, information is stored only for troubleshooting.</p>
</div>
</div>
<div class="media">
<span class="icon icon-xs icon-indigo icon-circle mt-1 mr-3">
<i class="fas fa-check fa-xs"></i>
</span>
<div class="media-body">
<p>You can also add your student ID card to Front Wallet to access places like your dorm and the library.</p>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="position-relative max-w-50rem mx-auto">
<!-- Device Mockup -->
<div class="device device-iphone-x w-75 mx-auto">
<img class="device-iphone-x-frame" src="../../assets/svg/components/iphone-x.svg" alt="Image Description">
<img class="device-iphone-x-screen" src="../../assets/img/407x867/img1.jpg" alt="Image Description">
</div>
<!-- End Device Mockup -->
<!-- SVG Component -->
<div class="position-absolute bottom-0 right-0 max-w-50rem w-100 z-index-n1 mx-auto">
<img class="img-fluid" src="../../assets/svg/components/abstract-shapes-4.svg" alt="Image Description">
</div>
<!-- End SVG Component -->
</div>
</div>
</div>
</div>
<!-- End Features Section -->
Component #8
Simple and affordable.
Pay as you go.
From boarding passes to movie tickets, there's pretty much nothing you can't store with Front Pay. Plus, you can take your money further with exclusive offers, discounts, and even reminders to use your loyalty card when you enter the store.
Create an account
Link your bank account
Your account is validated
<!-- How To Section -->
<div class="container space-2">
<!-- Title -->
<div class="w-lg-50 text-center mx-lg-auto mb-5">
<h2>Simple and affordable.<br>Pay as you go.</h2>
<p>From boarding passes to movie tickets, there's pretty much nothing you can't store with Front Pay. Plus, you can take your money further with exclusive offers, discounts, and even reminders to use your loyalty card when you enter the store.</p>
</div>
<!-- End Title -->
<!-- Fancybox -->
<div class="text-center mx-auto mb-11">
<a class="js-fancybox" href="javascript:;"
data-hs-fancybox-options='{
"src": "//youtube.com/j8uxIKcxArA",
"caption": "Front - Responsive Website Template",
"speed": 700,
"buttons": ["fullScreen", "close"],
"youtube": {
"autoplay": 1
}
}'>
<i class="fas fa-play-circle align-middle text-primary font-size-3 mr-2"></i>
See how your info is protected
</a>
</div>
<!-- End Fancybox -->
<!-- Icon Blocks Section -->
<div class="row justify-content-md-center mb-11">
<div class="col-md-4 col-lg-3 mb-9 mb-lg-0">
<!-- Icon Block -->
<div class="step-dots text-center px-lg-4">
<figure class="max-w-10rem mx-auto mb-3">
<img class="img-fluid" src="../../assets/svg/icons/icon-48.svg" alt="SVG">
</figure>
<h4>Create an account</h4>
</div>
<!-- End Icon Block -->
</div>
<div class="col-md-4 col-lg-3 mb-9 mb-lg-0">
<!-- Icon Block -->
<div class="step-dots text-center px-lg-4">
<figure class="max-w-10rem mx-auto mb-3">
<img class="img-fluid" src="../../assets/svg/icons/icon-39.svg" alt="SVG">
</figure>
<h4>Link your bank account</h4>
</div>
<!-- End Icon Block -->
</div>
<div class="col-md-4 col-lg-3">
<!-- Icon Block -->
<div class="text-center px-lg-4">
<figure class="max-w-10rem mx-auto mb-3">
<img class="img-fluid" src="../../assets/svg/icons/icon-20.svg" alt="SVG">
</figure>
<h4>Your account is validated</h4>
</div>
<!-- End Icon Block -->
</div>
</div>
<!-- End Icon Blocks Section -->
<div class="max-w-50rem mx-auto">
<img class="img-fluid" src="../../assets/svg/illustrations/visa-card.svg" alt="Image Description">
</div>
</div>
<!-- End How To Section -->
<link rel="stylesheet" href="../../assets/vendor/fancybox/dist/jquery.fancybox.min.css">
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/fancybox/dist/jquery.fancybox.min.js"></script>
<!-- JS Front -->
<script src="../../assets/js/hs.fancybox.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of fancybox
$('.js-fancybox').each(function () {
var fancybox = $.HSCore.components.HSFancyBox.init($(this));
});
});
</script>
Component #9
What we do?
A flexible theme for modern SaaS businesses
Industry-leading designs
Achieve virtually any design and layout from within the one template.
Learn from the docs
Whether you're a startup or a global enterprise, learn how to integrate with Front.
Accelerate your business
We help power millions of businesses to built and run smoothly.
It is fast and easy. Create your first and ongoing website with Front.
We are launching soon. Join the priority list for information and early access.
<!-- Icon Blocks Section -->
<div class="container space-2">
<!-- Title -->
<div class="w-lg-65 text-center mx-auto mb-5 mb-sm-9">
<h2 class="h1">What we do?</h2>
<p>A flexible theme for modern SaaS businesses</p>
</div>
<!-- End Title -->
<div class="row">
<div class="col-md-4 mb-7">
<!-- Icon Blocks -->
<div class="text-center px-lg-3">
<figure class="max-w-8rem mx-auto mb-4">
<img class="img-fluid" src="../../assets/svg/icons/icon-45.svg" alt="SVG">
</figure>
<h3>Industry-leading designs</h3>
<p>Achieve virtually any design and layout from within the one template.</p>
</div>
<!-- End Icon Blocks -->
</div>
<div class="col-md-4 mb-7">
<!-- Icon Blocks -->
<div class="text-center px-lg-3">
<figure class="max-w-8rem mx-auto mb-4">
<img class="img-fluid" src="../../assets/svg/icons/icon-14.svg" alt="SVG">
</figure>
<h3>Learn from the docs</h3>
<p>Whether you're a startup or a global enterprise, learn how to integrate with Front.</p>
</div>
<!-- End Icon Blocks -->
</div>
<div class="col-md-4 mb-7">
<!-- Icon Blocks -->
<div class="text-center px-lg-3">
<figure class="max-w-8rem mx-auto mb-4">
<img class="img-fluid" src="../../assets/svg/icons/icon-23.svg" alt="SVG">
</figure>
<h3>Accelerate your business</h3>
<p>We help power millions of businesses to built and run smoothly.</p>
</div>
<!-- End Icon Blocks -->
</div>
</div>
<img class="img-fluid d-none d-md-block w-75 mx-auto mb-7" src="../../assets/svg/components/three-pointers.svg" alt="SVG Arrow">
<!-- Title -->
<div class="w-md-60 w-lg-50 text-center mx-auto mb-7">
<p class="text-dark"><span class="font-weight-bold">It is fast and easy.</span> Create your first and ongoing website with Front.</p>
</div>
<!-- End Title -->
<!-- Browser Mockup -->
<div class="position-relative w-lg-75 mx-lg-auto mb-4">
<figure>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1109.8 797.1">
<path fill="#f9fbff" d="M105.1,267.1C35.5,331.5-3.5,423,0.3,517.7C6.1,663,111,831.9,588.3,790.8c753-64.7,481.3-358.3,440.4-398.3c-4-3.9-7.9-7.9-11.7-12L761.9,104.8C639.4-27.6,432.5-35.6,299.9,87L105.1,267.1z"/>
</svg>
</figure>
<div class="device device-browser">
<img class="img-fluid" src="../../assets/svg/components/browser.svg" alt="Image Description">
<img class="device-browser-screen" src="../../assets/img/855x665/img1.jpg" alt="Image Description">
</div>
</div>
<!-- End Browser Mockup -->
<div class="w-50 w-md-40 w-lg-30 text-center mx-auto">
<p class="small">We are launching soon. Join the priority list for information and early access.</p>
</div>
</div>
<!-- End Icon Blocks Section -->
Component #10
Company values
The Front culture
—
Hit heavy, stay small
Tight-knit, dynamic teams work with more agility, communication, and freedom than large-scale companies.
—
Ambition by the boatload
We love people who aim for greatness. They inspire and excite their teammates, raising the bar for all of us.
—
Open communication
We're big fans of transparency for many reasons, but the abridged version is: it makes easier.
—
Autonomy and attitude
We're a team of self-starters who take serious pride in our work – and it shows.
—
Support and win
When we empower others to succeed, we all win. (And we're not talking about participation trophies.)
—
Teamwork makes the dream work
We work together to bring our passions and expertise to make Teachable the best it can be.
<!-- Features Section -->
<div class="container space-2">
<!-- Title -->
<div class="w-md-80 w-lg-50 text-center mx-md-auto mb-5 mb-md-9">
<span class="d-block small font-weight-bold text-cap mb-2">Company values</span>
<h2>The Front culture</h2>
</div>
<!-- End Title -->
<div class="row">
<div class="col-sm-6 col-md-4 mb-3 mb-sm-7">
<!-- Icon Blocks -->
<div class="media">
<span class="mr-3">—</span>
<div class="media-body">
<h2 class="h4">Hit heavy, stay small</h2>
<p>Tight-knit, dynamic teams work with more agility, communication, and freedom than large-scale companies.</p>
</div>
</div>
<!-- End Icon Blocks -->
</div>
<div class="col-sm-6 col-md-4 mb-3 mb-sm-7">
<!-- Icon Blocks -->
<div class="media">
<span class="mr-3">—</span>
<div class="media-body">
<h3 class="h4">Ambition by the boatload</h3>
<p>We love people who aim for greatness. They inspire and excite their teammates, raising the bar for all of us.</p>
</div>
</div>
<!-- End Icon Blocks -->
</div>
<div class="col-sm-6 col-md-4 mb-3 mb-sm-7">
<!-- Icon Blocks -->
<div class="media">
<span class="mr-3">—</span>
<div class="media-body">
<h4>Open communication</h4>
<p>We're big fans of transparency for many reasons, but the abridged version is: it makes easier.</p>
</div>
</div>
<!-- End Icon Blocks -->
</div>
<div class="col-sm-6 col-md-4 mb-3 mb-sm-0">
<!-- Icon Blocks -->
<div class="media">
<span class="mr-3">—</span>
<div class="media-body">
<h4>Autonomy and attitude</h4>
<p>We're a team of self-starters who take serious pride in our work – and it shows.</p>
</div>
</div>
<!-- End Icon Blocks -->
</div>
<div class="col-sm-6 col-md-4 mb-3 mb-sm-0">
<!-- Icon Blocks -->
<div class="media">
<span class="mr-3">—</span>
<div class="media-body">
<h4>Support and win</h4>
<p>When we empower others to succeed, we all win. (And we're not talking about participation trophies.)</p>
</div>
</div>
<!-- End Icon Blocks -->
</div>
<div class="col-sm-6 col-md-4">
<!-- Icon Blocks -->
<div class="media">
<span class="mr-3">—</span>
<div class="media-body">
<h4>Teamwork makes the dream work</h4>
<p>We work together to bring our passions and expertise to make Teachable the best it can be.</p>
</div>
</div>
<!-- End Icon Blocks -->
</div>
</div>
</div>
<!-- End Features Section -->
Component #11
Learn to use Python professionally, learning both Python 2 and Python 3!
Create games with Python, like Tic Tac Toe and Blackjack!
Learn advanced Python features, like the collections module and how to work with timestamps!
Learn to use Object Oriented Programming with classes!
Understand complex topics, like decorators.
Understand how to use both the Jupyter Notebook and create .py files
Get an understanding of how to create GUIs in the Jupyter Notebook system!
Build a complete understanding of Python from the ground up!
<div class="container space-2">
<div class="row">
<div class="col-lg-6">
<!-- Icon Block -->
<div class="media text-body font-size-1 mb-3">
<i class="fas fa-check-circle text-success mt-1 mr-2"></i>
<div class="media-body">
Learn to use Python professionally, learning both Python 2 and Python 3!
</div>
</div>
<!-- End Icon Block -->
</div>
<div class="col-lg-6">
<!-- Icon Block -->
<div class="media text-body font-size-1 mb-3">
<i class="fas fa-check-circle text-success mt-1 mr-2"></i>
<div class="media-body">
Create games with Python, like Tic Tac Toe and Blackjack!
</div>
</div>
<!-- End Icon Block -->
</div>
</div>
<div class="row">
<div class="col-lg-6">
<!-- Icon Block -->
<div class="media text-body font-size-1 mb-3">
<i class="fas fa-check-circle text-success mt-1 mr-2"></i>
<div class="media-body">
Learn advanced Python features, like the collections module and how to work with timestamps!
</div>
</div>
<!-- End Icon Block -->
</div>
<div class="col-lg-6">
<!-- Icon Block -->
<div class="media text-body font-size-1 mb-3">
<i class="fas fa-check-circle text-success mt-1 mr-2"></i>
<div class="media-body">
Learn to use Object Oriented Programming with classes!
</div>
</div>
<!-- End Icon Block -->
</div>
</div>
<div class="row">
<div class="col-lg-6">
<!-- Icon Block -->
<div class="media text-body font-size-1 mb-3">
<i class="fas fa-check-circle text-success mt-1 mr-2"></i>
<div class="media-body">
Understand complex topics, like decorators.
</div>
</div>
<!-- End Icon Block -->
</div>
<div class="col-lg-6">
<!-- Icon Block -->
<div class="media text-body font-size-1 mb-3">
<i class="fas fa-check-circle text-success mt-1 mr-2"></i>
<div class="media-body">
Understand how to use both the Jupyter Notebook and create .py files
</div>
</div>
<!-- End Icon Block -->
</div>
</div>
<div class="row">
<div class="col-lg-6">
<!-- Icon Block -->
<div class="media text-body font-size-1 mb-3">
<i class="fas fa-check-circle text-success mt-1 mr-2"></i>
<div class="media-body">
Get an understanding of how to create GUIs in the Jupyter Notebook system!
</div>
</div>
<!-- End Icon Block -->
</div>
<div class="col-lg-6">
<!-- Icon Block -->
<div class="media text-body font-size-1 mb-3">
<i class="fas fa-check-circle text-success mt-1 mr-2"></i>
<div class="media-body">
Build a complete understanding of Python from the ground up!
</div>
</div>
<!-- End Icon Block -->
</div>
</div>
</div>
Component #12
Lightning-fast development with pre-built solutions
Every team has a unique process for shipping software. Use an out-of-the-box workflow, or create one to match the way your team works.
Extensive API documentation
Customizable & open source
Continiously improved
Choose a workflow, or make your own with Front Software
The best software teams ship early and often.
Front Software is built for every member of your software team to plan, track, and release great software.
Knowledge management
Development workflow
Continuous integration
Integrate with the tools and workflow you already use
<!-- Features Section -->
<div class="container space-2">
<div class="row align-items-lg-center">
<div class="col-lg-5 order-lg-2 mb-7 mb-lg-0">
<div class="mb-5">
<h2 class="mb-3">Lightning-fast development with pre-built solutions</h2>
<p>Every team has a unique process for shipping software. Use an out-of-the-box workflow, or create one to match the way your team works.</p>
</div>
<!-- Info -->
<div class="media pb-3">
<span class="icon icon-xs icon-soft-indigo icon-circle mr-3">
<i class="fas fa-check"></i>
</span>
<div class="media-body">
<p class="text-dark mb-0">Extensive API documentation</p>
</div>
</div>
<div class="media py-3">
<span class="icon icon-xs icon-soft-indigo icon-circle mr-3">
<i class="fas fa-check"></i>
</span>
<div class="media-body">
<p class="text-dark mb-0">Customizable & open source</p>
</div>
</div>
<div class="media pt-3">
<span class="icon icon-xs icon-soft-indigo icon-circle mr-3">
<i class="fas fa-check"></i>
</span>
<div class="media-body">
<p class="text-dark mb-0">Continiously improved</p>
</div>
</div>
<!-- End Info -->
</div>
<div class="col-lg-7 order-lg-1">
<!-- Card Block -->
<div class="pr-lg-4">
<div class="card shadow-none bg-soft-primary text-indigo text-center w-lg-75 overflow-hidden pt-9 px-5 mx-lg-auto">
<div class="px-5 mb-5">
<h3>Choose a workflow, or make your own with Front Software</h3>
</div>
<!-- Device Mockup -->
<div class="device device-half-iphone-x w-85 mx-auto">
<img class="device-half-iphone-x-frame" src="../../assets/svg/components/half-iphone-x.svg" alt="Image Description">
<img class="device-half-iphone-x-screen" src="../../assets/img/407x472/img7.jpg" alt="Image Description">
</div>
<!-- End Device Mockup -->
</div>
</div>
<!-- End Card Block -->
</div>
</div>
</div>
<!-- End Features Section -->
<!-- Features Section -->
<div class="container space-2">
<div class="row align-items-lg-center">
<div class="col-lg-5 mb-7 mb-lg-0">
<div class="mb-5">
<h2 class="mb-3">The best software teams ship early and often.</h2>
<p>Front Software is built for every member of your software team to plan, track, and release great software.</p>
</div>
<!-- Info -->
<div class="media pb-3">
<span class="icon icon-xs icon-soft-indigo icon-circle mr-3">
<i class="fas fa-check"></i>
</span>
<div class="media-body">
<p class="text-dark mb-0">Knowledge management</p>
</div>
</div>
<div class="media py-3">
<span class="icon icon-xs icon-soft-indigo icon-circle mr-3">
<i class="fas fa-check"></i>
</span>
<div class="media-body">
<p class="text-dark mb-0">Development workflow</p>
</div>
</div>
<div class="media pt-3">
<span class="icon icon-xs icon-soft-indigo icon-circle mr-3">
<i class="fas fa-check"></i>
</span>
<div class="media-body">
<p class="text-dark mb-0">Continuous integration</p>
</div>
</div>
<!-- End Info -->
</div>
<div class="col-lg-7">
<!-- Card Block -->
<div class="pl-lg-4">
<div class="card shadow-none bg-soft-info text-indigo text-center w-lg-75 overflow-hidden pt-9 px-5 mx-lg-auto">
<div class="px-5 mb-5">
<h3>Integrate with the tools and workflow you already use</h3>
</div>
<!-- Device Mockup -->
<div class="device device-half-iphone-x w-85 mx-auto">
<img class="device-half-iphone-x-frame" src="../../assets/svg/components/half-iphone-x.svg" alt="Image Description">
<img class="device-half-iphone-x-screen" src="../../assets/img/407x472/img8.jpg" alt="Image Description">
</div>
<!-- End Device Mockup -->
</div>
</div>
<!-- End Card Block -->
</div>
</div>
</div>
<!-- End Features Section -->