SVG Blocks

Decorate your website with SVG graphics and other features with support for interactivity and animation.

SVG blocks #1

It is fast and easy. Create your first and ongoing website with Front.

Image Description
Image Description

We are launching soon. Join the priority list for information and early access.

              
                <!-- Title -->
                <div class="w-md-60 w-lg-50 text-center mx-auto mb-7">
                  <h4 class="h5">
                    It is fast and easy. <span class="font-weight-normal">Create your first and ongoing website with Front.</span>
                  </h4>
                </div>
                <!-- End Title -->

                <!-- Mockup Browser -->
                <div class="u-browser-v1 mx-auto mb-4">
                  <!-- SVG Background Shape -->
                  <figure id="SVGbgShapeID1" class="svg-preloader ie-soft-triangle-shape">
                    <img class="js-svg-injector" src="../../assets/svg/components/soft-triangle-shape.svg" alt="Image Description"
                         data-parent="#SVGbgShapeID1">
                  </figure>
                  <!-- End SVG Background Shape -->

                  <!-- Mockup Browser -->
                  <figure id="SVGBrowserShape" class="svg-preloader ie-browser u-browser-v1__svg">
                    <img class="js-svg-injector" src="../../assets/svg/illustrations/browser.svg" alt="Image Description"
                         data-img-paths='[
                           {"targetId": "#SVGBrowserShapeImg1", "newPath": "../../assets/img/855x665/img1.jpg"}
                         ]'
                         data-parent="#SVGBrowserShape">
                  </figure>
                  <!-- End Mockup Browser -->
                </div>
                <!-- End Mockup Browser -->

                <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>
              
            
              
                <!-- 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>
              
            

SVG blocks #2

01.

Smart evaluation model

Sophisticated model providing analysis for the entire blockchain asset ecosystem. Strategic insights based on research, trends,and 50+ unique indicators to properly evaluate investment potential and risk.

Image Description
02.

Safe. Stable. Secure.

Advanced distributed system architecture built to protect against DDoS and other potential threats. More than 98% of digital assets stored in multi-signature,cold wallets. Security protocols are fully aligned and compliant with industry best practices.

SVG Illustration
03.

Now, zero fees for everyone

Empowering millions of users, across 130+ countries. Over $1 Billion in assets. 24/7/365 customer access and support. A trusted world-class operation designed specifically for knowledgeable crypto-investors.

SVG Illustration
              
                <!-- Mockup Block -->
                <div class="container space-bottom-2 space-bottom-md-3">
                  <div class="row align-items-lg-center">
                    <div class="col-lg-5 mb-7 mb-lg-0">
                      <!-- Title -->
                      <div class="pr-lg-4">
                        <span class="btn btn-icon btn-soft-primary rounded-circle mb-3">
                          <span class="small font-weight-semi-bold btn-icon__inner">01.</span>
                        </span>
                        <h2 class="h4 font-weight-semi-bold text-primary">Smart evaluation model</h2>
                        <p class="mb-0">Sophisticated model providing analysis for the entire blockchain asset ecosystem. Strategic insights based on research, trends,and 50+ unique indicators to properly evaluate investment potential and risk.</p>
                      </div>
                      <!-- End Title -->
                    </div>

                    <div id="SVGmarketingStrategy" class="col-lg-7 svg-preloader">
                      <!-- SVG Icon -->
                      <figure class="ie-marketing-strategy">
                        <img class="js-svg-injector" src="../../assets/svg/illustrations/marketing-strategy.svg" alt="Image Description"
                             data-parent="#SVGmarketingStrategy">
                      </figure>
                      <!-- End SVG Icon -->
                    </div>
                  </div>
                </div>
                <!-- End Mockup Block -->

                <!-- Mockup Block -->
                <div class="container space-1">
                  <div class="row align-items-lg-center">
                    <div class="col-lg-5 order-lg-2 mb-7 mb-lg-0">
                      <!-- Title -->
                      <div class="pl-lg-4">
                        <span class="btn btn-icon btn-soft-primary rounded-circle mb-3">
                          <span class="small font-weight-semi-bold btn-icon__inner">02.</span>
                        </span>
                        <h2 class="h4 font-weight-semi-bold text-primary">Safe. Stable. Secure.</h2>
                        <p class="mb-0">Advanced distributed system architecture built to protect against DDoS and other potential threats. More than 98% of digital assets stored in multi-signature,cold wallets. Security protocols are fully aligned and compliant with industry best practices.</p>
                      </div>
                      <!-- End Title -->
                    </div>

                    <div id="SVGappDevelopment" class="col-lg-7 order-lg-1 svg-preloader">
                      <!-- SVG Icon -->
                      <figure class="ie-app-development">
                        <img class="js-svg-injector" src="../../assets/svg/illustrations/app-development.svg" alt="SVG Illustration"
                             data-parent="#SVGappDevelopment">
                      </figure>
                      <!-- End SVG Icon -->
                    </div>
                  </div>
                </div>
                <!-- End Mockup Block -->

                <!-- Mockup Block -->
                <div class="container space-top-2 space-top-md-3">
                  <div class="row align-items-lg-center">
                    <div class="col-lg-5 mb-7 mb-lg-0">
                      <!-- Title -->
                      <div class="pr-lg-4">
                        <span class="btn btn-icon btn-soft-primary rounded-circle mb-3">
                          <span class="small font-weight-semi-bold btn-icon__inner">03.</span>
                        </span>
                        <h2 class="h4 font-weight-semi-bold text-primary">Now, zero fees for everyone</h2>
                        <p class="mb-0">Empowering millions of users, across 130+ countries. Over $1 Billion in assets. 24/7/365 customer access and support. A trusted world-class operation designed specifically for knowledgeable crypto-investors.</p>
                      </div>
                      <!-- End Title -->
                    </div>

                    <div id="SVGbusinessAnalysis" class="col-lg-7 svg-preloader">
                      <!-- SVG Icon -->
                      <figure class="ie-business-analysis">
                        <img class="js-svg-injector" src="../../assets/svg/illustrations/business-analysis.svg" alt="SVG Illustration"
                             data-parent="#SVGbusinessAnalysis">
                      </figure>
                      <!-- End SVG Icon -->
                    </div>
                  </div>
                </div>
                <!-- End Mockup Block -->
              
            
              
                <!-- 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>
              
            

SVG blocks #3

A.

Easy & fast designing

You can work with your existing website or create new pages on Front.

B.

Powerful features

Easily draft, change, customize and launch new course pages with an easy-to-use template.

Get Started
Image Description
C.

Advanced HTML/CSS editing

With Front, you or your team can modify any aspect of your website or pages with HTML/CSS.

D.

Fully optimized for Web & Mobile

Your website is fully responsive so visitors can view your content from their choice of device.

Purchase Now
Image Description
              
                <!-- Mockup Block Section -->
                <div class="container space-bottom-3">
                  <div class="row justify-content-lg-between align-items-center">
                    <div class="col-md-6 col-lg-5 mb-7 mb-md-0">
                      <div class="pr-md-4">
                        <!-- Info -->
                        <div class="media mb-7">
                          <span class="btn btn-sm btn-icon btn-soft-primary rounded-circle mr-3">
                            <span class="btn-icon__inner">A.</span>
                          </span>
                          <div class="media-body">
                            <h3 class="h5 text-primary">Easy & fast designing</h3>
                            <p>You can work with your existing website or create new pages on Front.</p>
                          </div>
                        </div>
                        <!-- End Info -->

                        <!-- Info -->
                        <div class="media mb-7">
                          <span class="btn btn-sm btn-icon btn-soft-primary rounded-circle mr-3">
                            <span class="btn-icon__inner">B.</span>
                          </span>
                          <div class="media-body">
                            <h3 class="h5 text-primary">Powerful features</h3>
                            <p>Easily draft, change, customize and launch new course pages with an easy-to-use template.</p>
                          </div>
                        </div>
                        <!-- End Info -->

                        <a class="btn btn-primary btn-wide btn-pill transition-3d-hover" href="index.html">Get Started <span class="fas fa-angle-right ml-2"></span></a>
                      </div>
                    </div>

                    <div id="SVGellipseMockup" class="col-md-6 svg-preloader">
                      <!-- SVG Mockup -->
                      <figure class="ie-ellipse-mockup">
                        <img class="js-svg-injector" src="../../assets/svg/illustrations/ellipse-mockup.svg" alt="Image Description"
                             data-img-paths='[
                               {"targetId": "#SVGellipseMockupImg1", "newPath": "../../assets/img/615x750/img1.jpg"}
                             ]'
                             data-parent="#SVGellipseMockup">
                      </figure>
                      <!-- End SVG Mockup -->
                    </div>
                  </div>
                </div>
                <!-- End Mockup Block Section -->

                <!-- Mockup Block Section -->
                <div class="container">
                  <div class="row justify-content-lg-between align-items-center">
                    <div class="col-md-6 col-lg-5 order-md-2 mb-7 mb-md-0">
                      <div class="pl-md-4">
                        <!-- Info -->
                        <div class="media mb-7">
                          <span class="btn btn-sm btn-icon btn-soft-success rounded-circle mr-3">
                            <span class="btn-icon__inner">C.</span>
                          </span>
                          <div class="media-body">
                            <h3 class="h5 text-success">Advanced HTML/CSS editing</h3>
                            <p>With Front, you or your team can modify any aspect of your website or pages with HTML/CSS.</p>
                          </div>
                        </div>
                        <!-- End Info -->

                        <!-- Info -->
                        <div class="media mb-7">
                          <span class="btn btn-sm btn-icon btn-soft-success rounded-circle mr-3">
                            <span class="btn-icon__inner">D.</span>
                          </span>
                          <div class="media-body">
                            <h3 class="h5 text-success">Fully optimized for Web & Mobile</h3>
                            <p>Your website is fully responsive so visitors can view your content from their choice of device.</p>
                          </div>
                        </div>
                        <!-- End Info -->

                        <a class="btn btn-success btn-wide btn-pill transition-3d-hover" href="https://themes.getbootstrap.com/product/front-multipurpose-responsive-template/" target="_blank">Purchase Now <span class="fas fa-angle-right ml-2"></span></a>
                      </div>
                    </div>

                    <div id="SVGellipseMockupReverse" class="col-md-6 order-md-1 svg-preloader">
                      <!-- SVG Mockup -->
                      <figure class="ie-ellipse-mockup">
                        <img class="js-svg-injector" src="../../assets/svg/illustrations/ellipse-mockup-reverse.svg" alt="Image Description"
                             data-img-paths='[
                               {"targetId": "#SVGellipseMockupReverseImg1", "newPath": "../../assets/img/615x750/img2.jpg"}
                             ]'
                             data-parent="#SVGellipseMockupReverse">
                      </figure>
                      <!-- End SVG Mockup -->
                    </div>
                  </div>
                </div>
                <!-- End Mockup Block 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>
              
            

SVG blocks #4

Grab your
Ready-to-use solutions

Easy and fast adjustments of elements are possible with Front template. Find out more about our all-in-one programmatic template.

Learn More
Image Description
Image Description
              
                <!-- Mockup Blocks Section -->
                <div class="position-relative space-2 space-md-3">
                  <div class="container">
                    <div class="row justify-content-lg-end mb-7 mb-lg-0">
                      <div class="col-lg-5 mb-7 mb-lg-0">
                        <!-- Info -->
                        <div class="mb-7">
                          <span class="fab fa-gripfire text-primary display-4 mb-3"></span>
                          <h2 class="h4">Grab your<br>Ready-to-use solutions</h2>
                          <p>Easy and fast adjustments of elements are possible with Front template. Find out more about our all-in-one programmatic template.</p>
                        </div>
                        <a class="btn btn-soft-primary btn-wide transition-3d-hover" href="#">Learn More</a>
                        <!-- End Info -->
                      </div>
                    </div>
                  </div>

                  <!-- SVG Image Gradient -->
                  <div id="SVGcolorGradient" class="col-lg-6 svg-preloader content-centered-y--lg">
                    <figure class="ie-color-gradient">
                      <img class="js-svg-injector" src="../../assets/svg/components/color-gradient.svg" alt="Image Description"
                           data-img-paths='[
                             {"targetId": "#SVGcolorGradientImg1", "newPath": "../../assets/img/855x665/img2.jpg"}
                           ]'
                           data-parent="#SVGcolorGradient">
                    </figure>
                    <!-- End SVG Image Gradient -->

                    <!-- SVG Phone Mockup -->
                    <figure class="u-devices-v3 ie-devices-v3-iphone">
                      <img class="js-svg-injector" src="../../assets/svg/components/iphone.svg" alt="Image Description"
                           data-img-paths='[
                             {"targetId": "#SVGiphoneImg1", "newPath": "../../assets/img/282x500/img5.jpg"}
                           ]'
                           data-parent="#SVGcolorGradient">
                    </figure>
                    <!-- End SVG Phone Mockup -->
                  </div>
                </div>
                <!-- End Mockup 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>
              
            

SVG blocks #5

Image Description
Join Front

Let's get you started

Start knowing what your attendees value, and win more business with Front template.

Buy Now Get Started
SVG Illustration
              
                <!-- Features Section -->
                <div id="SVGelements" class="svg-preloader">
                  <!-- SVG Background -->
                  <figure class="position-absolute right-0 bottom-0 left-0">
                    <img class="js-svg-injector" src="../../assets/svg/components/wave-1-bottom-sm.svg" alt="Image Description"
                         data-parent="#SVGelements">
                  </figure>
                  <!-- End SVG Background -->

                  <div class="gradient-half-primary-v3">
                    <div class="container space-top-2 space-top-md-3">
                      <div class="row align-items-start">
                        <div class="col-lg-5 mb-7 mb-lg-0">
                          <!-- Title -->
                          <div class="pr-md-4 mb-4">
                            <span class="btn btn-xs btn-soft-success btn-pill mb-2">Join Front</span>
                            <h2 class="text-primary">Let's get you <span class="font-weight-semi-bold">started</span></h2>
                            <p>Start knowing what your attendees value, and win more business with Front template.</p>
                          </div>
                          <!-- End Title -->

                          <a class="btn btn-primary btn-wide btn-pill transition-3d-hover mr-1 mb-2" href="https://themes.getbootstrap.com/product/front-multipurpose-responsive-template/" target="_blank">Buy Now</a>
                          <a class="btn btn-soft-primary btn-wide btn-pill transition-3d-hover ml-1 mb-2" href="../pages/login-simple.html">Get Started</a>
                        </div>

                        <div class="col-lg-7 mt-auto">
                          <!-- SVG Icon -->
                          <figure class="ie-app-development">
                            <img class="js-svg-injector" src="../../assets/svg/illustrations/app-development.svg" alt="SVG Illustration"
                                 data-parent="#SVGelements">
                          </figure>
                          <!-- End SVG Icon -->
                        </div>
                      </div>
                    </div>
                  </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>
              
            

SVG blocks #6

Professional design

Easy and fast adjustments of elements are possible with Front template. Find our more about our all-in-one programmatic template.

Image Description
Get Started with Front
Image Description

Front process

Once you are invited to Front Agency, you company will be set within days. We help to take of all the paperwork.

Image Description
Get Started with Front
Image Description
              
                <!-- Front for -->
                <div class="container space-bottom-2">
                  <div class="row align-items-lg-center">
                    <div class="col-lg-5 order-lg-2 mb-7 mb-lg-0">
                      <!-- Info -->
                      <div class="pl-lg-7">
                        <div class="mb-4">
                          <h3 class="h5">Professional design</h3>
                          <p>Easy and fast adjustments of elements are possible with Front template. Find our more about our all-in-one programmatic template.</p>
                        </div>

                        <!-- Link -->
                        <a class="card border-0 shadow-sm" href="#">
                          <div class="card-body p-4">
                            <div class="media align-items-center">
                              <div class="u-avatar mr-3">
                                <img class="img-fluid rounded-circle" src="../../assets/img/icons/img2.png" alt="Image Description">
                              </div>
                              <span class="media-body">
                                <span class="d-flex justify-content-between align-items-center font-weight-semi-bold">
                                  Get Started with Front <span class="fas fa-angle-right"></span>
                                </span>
                              </span>
                            </div>
                          </div>
                        </a>
                        <!-- End Link -->
                      </div>
                      <!-- End Info -->
                    </div>

                    <div id="SVGchattingGirl" class="col-lg-7 order-lg-1 svg-preloader">
                      <!-- SVG Icon -->
                      <figure class="ie-chatting-girl">
                        <img class="js-svg-injector" src="../../assets/svg/illustrations/chatting-girl.svg" alt="Image Description"
                             data-parent="#SVGchattingGirl">
                      </figure>
                      <!-- End SVG Icon -->
                    </div>
                  </div>
                </div>
                <!-- End Front for -->

                <!-- About Section -->
                <div class="container space-top-2">
                  <div class="row align-items-lg-center">
                    <div class="col-lg-5 mb-7 mb-lg-0">
                      <!-- Info -->
                      <div class="pr-lg-7">
                        <div class="mb-4">
                          <h3 class="h5">Front process</h3>
                          <p>Once you are invited to Front Agency, you company will be set within days. We help to take of all the paperwork.</p>
                        </div>

                        <!-- Link -->
                        <a class="card border-0 shadow-sm" href="#">
                          <div class="card-body p-4">
                            <div class="media align-items-center">
                              <div class="u-avatar mr-3">
                                <img class="img-fluid rounded-circle" src="../../assets/img/icons/img1.png" alt="Image Description">
                              </div>
                              <span class="media-body">
                                <span class="d-flex justify-content-between align-items-center font-weight-semi-bold">
                                  Get Started with Front <span class="fas fa-angle-right"></span>
                                </span>
                              </span>
                            </div>
                          </div>
                        </a>
                        <!-- End Link -->
                      </div>
                      <!-- End Info -->
                    </div>

                    <div id="SVGchattingBoy" class="col-lg-7 svg-preloader">
                      <!-- SVG Icon -->
                      <figure class="ie-chatting-boy">
                        <img class="js-svg-injector" src="../../assets/svg/illustrations/chatting-boy.svg" alt="Image Description"
                             data-parent="#SVGchattingBoy">
                      </figure>
                      <!-- End SVG Icon -->
                    </div>
                  </div>
                </div>
                <!-- End About 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>
              
            

SVG blocks #7

We create the best solution for you.

Front is an easy-to-use template that is loaded with all the features you will ever need.

Image Description
Image Description
              
                <!-- Hero Section -->
                <div id="SVGheroSectionBg" class="svg-preloader position-relative gradient-half-primary-v3">
                  <div class="container space-2">
                    <div class="row align-items-lg-center">
                      <div class="col-lg-5 mb-7 mb-lg-0">
                        <!-- Info -->
                        <h1 class="mb-4">We create the best <span class="text-primary font-weight-semi-bold">solution</span> for you.</h1>
                        <p>Front is an easy-to-use template that is loaded with all the features you will ever need.</p>
                        <!-- End Info -->
                      </div>

                      <div class="col-lg-7">
                        <!-- SVG Icon -->
                        <figure class="ie-we-have-an-idea">
                          <img class="js-svg-injector" src="../../assets/svg/illustrations/we-have-an-idea.svg" alt="Image Description"
                               data-parent="#SVGheroSectionBg">
                        </figure>
                        <!-- End SVG Icon -->
                      </div>
                    </div>
                  </div>

                  <!-- SVG Background -->
                  <figure class="position-absolute right-0 bottom-0 left-0">
                    <img class="js-svg-injector" src="../../assets/svg/components/wave-1-bottom-sm.svg" alt="Image Description"
                         data-parent="#SVGheroSectionBg">
                  </figure>
                  <!-- End SVG Background Section -->
                </div>
                <!-- End Hero Section -->
              
            

Icon blocks #8

Image Description

Product Design

  • Illustration
  • Graphic
  • Web Design
  • UX/UI Design
Image Description

Web Development

  • jQuery
  • WordPress
  • HTML5
  • PHP
              
                <!-- Features Section -->
                <div class="container space-2">
                  <div class="row">
                    <div class="col-lg-6 mb-7 mb-lg-0">
                      <div class="media d-block d-sm-flex pr-md-4">
                        <!-- SVG Icon -->
                        <figure id="SVGproject" class="svg-preloader w-40 mr-4 mb-4 mb-sm-0">
                          <img class="js-svg-injector" src="../../assets/svg/flat-icons/project.svg" alt="Image Description"
                               data-parent="#SVGproject">
                        </figure>
                        <!-- End SVG Icon -->

                        <div class="media-body">
                          <h3 class="h5">Product Design</h3>

                          <div class="d-flex">
                            <!-- List -->
                            <ul class="list-unstyled text-secondary font-size-1 mr-md-4">
                              <li class="py-1">
                                <span class="h6 text-primary mr-1">•</span>
                                Illustration
                              </li>
                              <li class="py-1">
                                <span class="h6 text-primary mr-1">•</span>
                                Graphic
                              </li>
                            </ul>
                            <!-- End List -->

                            <!-- List -->
                            <ul class="list-unstyled text-secondary font-size-1">
                              <li class="py-1">
                                <span class="h6 text-primary mr-1">•</span>
                                Web Design
                              </li>
                              <li class="py-1">
                                <span class="h6 text-primary mr-1">•</span>
                                UX/UI Design
                              </li>
                            </ul>
                            <!-- End List -->
                          </div>
                        </div>
                      </div>
                    </div>

                    <div class="col-lg-6">
                      <div class="media d-block d-sm-flex pr-md-4">
                        <!-- SVG Icon -->
                        <figure id="SVGwebDesign" class="svg-preloader w-40 mr-4 mb-4 mb-sm-0">
                          <img class="js-svg-injector" src="../../assets/svg/flat-icons/web-design.svg" alt="Image Description"
                               data-parent="#SVGwebDesign">
                        </figure>
                        <!-- End SVG Icon -->

                        <div class="media-body">
                          <h3 class="h5">Web Development</h3>

                          <div class="d-flex">
                            <!-- List -->
                            <ul class="list-unstyled text-secondary font-size-1 mr-md-4">
                              <li class="py-1">
                                <span class="h6 text-primary mr-1">•</span>
                                jQuery
                              </li>
                              <li class="py-1">
                                <span class="h6 text-primary mr-1">•</span>
                                WordPress
                              </li>
                            </ul>
                            <!-- End List -->

                            <!-- List -->
                            <ul class="list-unstyled text-secondary font-size-1">
                              <li class="py-1">
                                <span class="h6 text-primary mr-1">•</span>
                                HTML5
                              </li>
                              <li class="py-1">
                                <span class="h6 text-primary mr-1">•</span>
                                PHP
                              </li>
                            </ul>
                            <!-- End List -->
                          </div>
                        </div>
                      </div>
                    </div>
                  </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 #9

Image Description

Front Strategy

We strive to figure out ways to help your audience grow.

Read More
Image Description

Unlimited Power

Find what you need in one template.

Read More
              
                <!-- Icon Blocks Section -->
                <div class="container space-2">
                  <div class="row">
                    <div class="col-lg-6 mb-7 mb-lg-0">
                      <div class="media d-block d-sm-flex pr-md-4">
                        <!-- SVG Icon -->
                        <figure id="SVGinnovation" class="svg-preloader w-40 mr-4 mb-4 mb-sm-0">
                          <img class="js-svg-injector" src="../../assets/svg/flat-icons/innovation.svg" alt="Image Description"
                               data-parent="#SVGinnovation">
                        </figure>
                        <!-- End SVG Icon -->

                        <div class="media-body">
                          <h3 class="h5">Front Strategy</h3>
                          <p class="mb-1">We strive to figure out ways to help your audience grow.</p>
                          <a class="font-size-1" href="#">Read More <span class="fas fa-angle-right align-middle ml-2"></span></a>
                        </div>
                      </div>
                    </div>

                    <div class="col-lg-6">
                      <div class="media d-block d-sm-flex pr-md-4">
                        <!-- SVG Icon -->
                        <figure id="SVGpowerTools" class="svg-preloader w-40 mr-4 mb-4 mb-sm-0">
                          <img class="js-svg-injector" src="../../assets/svg/flat-icons/power-tools.svg" alt="Image Description"
                               data-parent="#SVGpowerTools">
                        </figure>
                        <!-- End SVG Icon -->

                        <div class="media-body">
                          <h3 class="h5">Unlimited Power</h3>
                          <p class="mb-1">Find what you need in one template.</p>
                          <a class="font-size-1" href="#">Read More <span class="fas fa-angle-right align-middle ml-2"></span></a>
                        </div>
                      </div>
                    </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>
              
            

SVG blocks #10

Front Terms & conditions

Hello, and welcome to Front. Please read our Terms and Conditions of Use ("Terms") and Privacy Policy carefully because they affect your legal rights, including an agreement to resolve any disputes that may arise between us by arbitration on an individual basis instead of by class actions or jury trials. We hope you're sitting comfortably and listening to some great music.

Here we go…

Image Description
              
                <!-- Terms Title Section -->
                <div class="position-relative">
                  <div class="container space-2">
                    <div class="w-md-80 w-lg-60">
                      <h1 class="text-primary"><span class="font-weight-semi-bold">Front</span> Terms & conditions</h1>
                      <p>Hello, and welcome to Front. Please read our Terms and Conditions of Use ("Terms") and Privacy Policy carefully because they affect your legal rights, including an agreement to resolve any disputes that may arise between us by arbitration on an individual basis instead of by class actions or jury trials. We hope you're sitting comfortably and listening to some great music.</p>
                      <p>Here we go…</p>
                    </div>
                  </div>

                  <!-- SVG Background Shapes -->
                  <div id="SVGbgElements2" class="svg-preloader d-none d-lg-block w-lg-40 content-centered-y right-0 z-index-n1 ml-9">
                    <figure class="ie-bg-elements-2">
                      <img class="js-svg-injector" src="../../assets/svg/components/bg-elements-2.svg" alt="Image Description"
                           data-parent="#SVGbgElements2">
                    </figure>
                  </div>
                  <!-- End SVG Background Shapes -->
                </div>
                <!-- End Terms Title 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>
              
            

SVG blocks #11

Millions of Jobs.
Find the one that suits you.

Search all the open positions on the web. Get your own personalized salary estimate. Read reviews on over 600,000 companies worldwide.

  • Verified, up-to-date Cards
  • Seamless job search
  • Job seekers and employers connect
Image Description
              
                <!-- 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">
                      <!-- Description -->
                      <h2 class="font-weight-medium">Millions of Jobs.<br>Find the one that suits you.</h2>
                      <p>Search all the open positions on the web. Get your own personalized salary estimate. Read reviews on over 600,000 companies worldwide.</p>
                      <!-- End Description -->

                      <!-- List -->
                      <ul class="list-unstyled text-secondary">
                        <li class="media my-3">
                          <div class="d-flex mt-1 mr-2">
                            <span class="fas fa-check text-success"></span>
                          </div>
                          <div class="media-body">
                            Verified, up-to-date Cards
                          </div>
                        </li>
                        <li class="media my-3">
                          <div class="d-flex mt-1 mr-2">
                            <span class="fas fa-check text-success"></span>
                          </div>
                          <div class="media-body">
                            Seamless job search
                          </div>
                        </li>
                        <li class="media my-3">
                          <div class="d-flex mt-1 mr-2">
                            <span class="fas fa-check text-success"></span>
                          </div>
                          <div class="media-body">
                            Job seekers and employers connect
                          </div>
                        </li>
                      </ul>
                      <!-- End List -->
                    </div>

                    <div class="col-lg-7 order-lg-1">
                      <!-- SVG Shape -->
                      <figure id="SVGgetAnswered" class="svg-preloader ie-get-answered">
                        <img class="js-svg-injector" src="../../assets/svg/illustrations/get-answered.svg" alt="Image Description"
                             data-parent="#SVGgetAnswered">
                      </figure>
                      <!-- End SVG Shape -->
                    </div>
                  </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>
              
            

SVG blocks #12

Image Description

Global housing service through App

A platform connecting you to the best housing service providers and facilitating effortless new build and resale homes.

              
                <!-- Features Section -->
                <div class="position-relative space-2">
                  <!-- SVG Mockups -->
                  <div id="SVGlaptopAndIphone" class="col-lg-6 svg-preloader position-lg-absolute top-lg-0 left-lg-0 content-centered-y--lg mb-9 mb-lg-0">
                    <figure class="ie-laptop-and-iphone">
                      <img class="js-svg-injector" src="../../assets/svg/components/laptop-and-iphone.svg" alt="Image Description"
                           data-img-paths='[
                             {"targetId": "#SVGlaptopAndIphoneImg1", "newPath": "../../assets/img/1618x1010/img2.jpg"},
                             {"targetId": "#SVGlaptopAndIphoneImg2", "newPath": "../../assets/img/282x500/img8.jpg"}
                           ]'
                           data-parent="#SVGlaptopAndIphone">
                    </figure>
                  </div>
                  <!-- End SVG Mockups -->

                  <div class="container">
                    <div class="row justify-content-lg-end">
                      <div class="col-lg-5">
                        <!-- Title -->
                        <div class="pl-lg-4">
                          <div class="mb-5">
                            <h2 class="font-weight-medium">Global housing service through App</h2>
                            <p>A platform connecting you to the best housing service providers and facilitating effortless new build and resale homes.</p>
                          </div>

                          <!-- Button -->
                          <button type="button" class="btn btn-xs btn-primary btn-wide transition-3d-hover text-left mb-2 mr-sm-1">
                            <span class="media align-items-center">
                              <span class="fab fa-apple font-size-2 mr-3"></span>
                              <span class="media-body">
                                <span class="d-block">Download on the</span>
                                <strong class="font-size-1">App Store</strong>
                              </span>
                            </span>
                          </button>
                          <!-- End Button -->

                          <!-- Button -->
                          <button type="button" class="btn btn-xs btn-dark btn-wide transition-3d-hover text-left mb-2">
                            <span class="media align-items-center">
                              <span class="fab fa-google-play font-size-2 mr-3"></span>
                              <span class="media-body">
                                <span class="d-block">Get it on</span>
                                <strong class="font-size-1">Google Play</strong>
                              </span>
                            </span>
                          </button>
                          <!-- End Button -->
                        </div>
                        <!-- End Title -->
                      </div>
                    </div>
                  </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>
              
            

SVG blocks #13

  • 1.

    Describe your home online and get appraisal in 3 minutes

  • 2.

    We match you with the best agent to refine the appraisal and discuss your project

  • 3.

    If you decide you are ready to sell, we'll make you an offer

Image Description
              
                <!-- How It Works Section -->
                <div class="container">
                  <div class="row align-items-lg-center">
                    <div class="col-lg-6 order-lg-2 mb-7 mb-lg-0">
                      <ul class="list-unstyled">
                        <!-- Info Block -->
                        <li class="u-indicator-steps py-3">
                          <div class="media align-items-center border rounded p-5">
                            <div class="d-flex u-indicator-steps__inner mr-3">
                              <span class="display-4 text-primary font-weight-medium">1.</span>
                            </div>
                            <div class="media-body">
                              <p class="mb-0">Describe your home online and get appraisal in 3 minutes</p>
                            </div>
                          </div>
                        </li>
                        <!-- End Info Block -->

                        <!-- Info Block -->
                        <li class="u-indicator-steps py-3">
                          <div class="media align-items-center border rounded p-5">
                            <div class="d-flex u-indicator-steps__inner mr-3">
                              <span class="display-4 text-primary font-weight-medium">2.</span>
                            </div>
                            <div class="media-body">
                              <p class="mb-0">We match you with the best agent to refine the appraisal and discuss your project</p>
                            </div>
                          </div>
                        </li>
                        <!-- End Info Block -->

                        <!-- Info Block -->
                        <li class="u-indicator-steps py-3">
                          <div class="media align-items-center border rounded p-5">
                            <div class="d-flex u-indicator-steps__inner mr-3">
                              <span class="display-4 text-primary font-weight-medium">3.</span>
                            </div>
                            <div class="media-body">
                              <p class="mb-0">If you decide you are ready to sell, we'll make you an offer</p>
                            </div>
                          </div>
                        </li>
                        <!-- End Info Block -->
                      </ul>
                    </div>

                    <div id="SVGhouseAgency" class="col-lg-6 order-lg-1 svg-preloader">
                      <div class="pr-lg-7">
                        <!-- SVG Icon -->
                        <figure class="ie-house-agency">
                          <img class="js-svg-injector" src="../../assets/svg/illustrations/house-agency.svg" alt="Image Description"
                               data-parent="#SVGhouseAgency">
                        </figure>
                        <!-- End SVG Icon -->
                      </div>
                    </div>
                  </div>
                </div>
                <!-- End How It Works 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>
              
            

SVG blocks #14

Have a project?

Hire us. Our top professionals are ready to help with your business.

Hire Us
SVG Illustration

Get in touch

If you would like to find out more about how we can help you, please give us a call or drop us an email.

Contact Us
SVG Illustration
              
                <!-- Contact Section -->
                <div id="SVGcontactsSection" class="svg-preloader position-relative gradient-half-warning-v1">
                  <div class="container position-relative z-index-2">
                    <div class="row">
                      <div class="col-lg-6">
                        <!-- Hire Us -->
                        <div class="d-flex align-items-center space-2 min-height-380 pr-lg-7">
                          <div class="d-block">
                            <h2 class="text-white">Have a project?</h2>
                            <p class="text-white-70 mb-4">Hire us. Our top professionals are ready to help with your business.</p>
                            <a class="btn text-primary btn-white btn-wide transition-3d-hover" href="../pages/hire-us.html">Hire Us</a>
                          </div>
                        </div>

                        <figure class="w-50 position-absolute right-0 bottom-0 mr-7">
                          <img class="js-svg-injector" src="../assets/svg/illustrations/building-site.svg" alt="SVG Illustration"
                               data-parent="#SVGcontactsSection">
                        </figure>
                        <!-- End Hire Us -->
                      </div>

                      <div class="col-lg-6">
                        <!-- Contact Us -->
                        <div class="d-flex align-items-center space-2 min-height-380 pl-lg-7">
                          <div class="d-block">
                            <h2 class="text-white">Get in touch</h2>
                            <p class="text-white-70 mb-4">If you would like to find out more about how we can help you, please give us a call or drop us an email.</p>
                            <a class="btn text-warning btn-white btn-wide transition-3d-hover" href="../pages/contacts-agency.html">Contact Us</a>
                          </div>
                        </div>

                        <figure class="w-50 position-absolute right-0 bottom-0">
                          <img class="js-svg-injector" src="../assets/svg/illustrations/pushing-boundaries.svg" alt="SVG Illustration"
                               data-parent="#SVGcontactsSection">
                        </figure>
                        <!-- End Contact Us -->
                      </div>
                    </div>
                  </div>

                  <div class="col-lg-6 gradient-half-primary-v1 position-absolute top-0 left-0 min-height-380"></div>
                </div>
                <!-- End Contact 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>
              
            

SVG blocks #15

Image Description

Using Front

Find the answer to any question, from the basics all the way to advanced tips and tricks!

Browse all article
Image Description

Workspace administration

Want to learn more about setting up and managing your team? Look no further!

Browse all article
              
                <!-- Basic Articles Section -->
                <div class="container">
                  <div class="row">
                    <div class="col-lg-6 u-ver-divider u-ver-divider--none-lg mb-9 mb-md-0">
                      <!-- Basic Articles -->
                      <article class="text-center p-md-8">
                        <!-- SVG Icon -->
                        <figure id="SVGpushingBoundaries" class="svg-preloader w-lg-60 mx-auto mb-4">
                          <img class="js-svg-injector" src="../../assets/svg/illustrations/pushing-boundaries.svg" alt="Image Description"
                               data-parent="#SVGpushingBoundaries">
                        </figure>
                        <!-- End SVG Icon -->

                        <div class="mb-4">
                          <h2 class="h4">Using Front</h2>
                          <p>Find the answer to any question, from the basics all the way to advanced tips and tricks!</p>
                        </div>
                        <a class="btn btn-soft-primary btn-wide transition-3d-hover" href="#">Browse all article</a>
                      </article>
                      <!-- End Basic Articles -->
                    </div>

                    <div class="col-lg-6">
                      <!-- Basic Articles -->
                      <article class="text-center p-md-8">
                        <!-- SVG Icon -->
                        <figure id="SVGbuildingSite" class="svg-preloader w-lg-60 mx-auto mb-4">
                          <img class="js-svg-injector" src="../../assets/svg/illustrations/building-site.svg" alt="Image Description"
                               data-parent="#SVGbuildingSite">
                        </figure>
                        <!-- End SVG Icon -->

                        <div class="mb-4">
                          <h2 class="h4">Workspace administration</h2>
                          <p>Want to learn more about setting up and managing your team? Look no further!</p>
                        </div>
                        <a class="btn btn-soft-primary btn-wide transition-3d-hover" href="#">Browse all article</a>
                      </article>
                      <!-- End Basic Articles -->
                    </div>
                  </div>
                </div>
                <!-- End Basic Articles 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>
              
            

SVG blocks #16

Image Description

We're just tuning up a few things.

We apologize for the inconvenience but Front is currently undergoing planned maintenance.

Check for Updates
              
                <!-- Hero Section -->
                <div class="d-lg-flex">
                  <div class="container d-lg-flex align-items-lg-center min-height-lg-100vh space-top-4 space-bottom-2 space-lg-0">
                    <div class="w-100 mx-auto">
                      <!-- SVG Icon -->
                      <figure id="SVGmaintenanceMode" class="svg-preloader mb-5 ie-maintenance-mode">
                        <img class="js-svg-injector" src="../../assets/svg/illustrations/maintenance-mode.svg" alt="Image Description"
                             data-parent="#SVGmaintenanceMode">
                      </figure>
                      <!-- End SVG Icon -->

                      <div class="w-md-80 w-lg-50 text-center mx-md-auto">
                        <!-- Title -->
                        <div class="mb-5">
                          <h1 class="h2 font-weight-normal">We're just tuning up a few things.</h1>
                          <p>We apologize for the inconvenience but Front is currently undergoing planned maintenance.</p>
                        </div>
                        <!-- End Title -->

                        <a class="btn btn-primary transition-3d-hover" href="#">Check for Updates</a>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- End Hero 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>
              
            

SVG blocks #17

Page not found

Oops! Looks like you followed a bad link.

If you think this is a problem with us, please tell us.

Go Back
              
                <!-- Hero Section -->
                <div class="d-lg-flex bg-img-hero" style="background-image: url(../../assets/svg/illustrations/error-404.svg);">
                  <div class="container d-lg-flex align-items-lg-center min-height-lg-100vh space-4">
                    <div class="w-lg-60 w-xl-50">
                      <!-- Title -->
                      <div class="mb-5">
                        <h1 class="text-primary font-weight-normal">Page not <span class="font-weight-semi-bold">found</span></h1>
                        <p class="mb-0">Oops! Looks like you followed a bad link.</p>
                        <p>If you think this is a problem with us, please <a href="#">tell us</a>.</p>
                      </div>
                      <!-- End Title -->

                      <a class="btn btn-primary btn-wide transition-3d-hover" href="../home/index.html">Go Back</a>
                    </div>
                  </div>
                </div>
                <!-- End Hero 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>
              
            

SVG blocks #18

              
                <!-- Hero Carousel -->
                <div class="js-slick-carousel space-1"
                     data-fade="true"
                     data-pagi-classes="text-center u-slick__pagination mt-7 mb-0">
                  <div class="js-slide px-4">
                    <div id="SVGvault" class="svg-preloader">
                      <!-- Title -->
                      <div class="text-center mb-7">
                        <span class="btn btn-icon btn-soft-primary rounded-circle mb-4">
                          <span class="small font-weight-semi-bold btn-icon__inner">01.</span>
                        </span>
                        <h2 class="h4 text-primary">Learn about Bitcoin</h2>
                        <p>Bitcoin is changing the way people think about money. Educate yourself about this ground-breaking payment system.</p>
                      </div>
                      <!-- End Title -->

                      <!-- SVG Icon -->
                      <figure class="ie-vault">
                        <img class="js-svg-injector" src="../../assets/svg/flat-icons/vault.svg" alt="Image Description"
                             data-parent="#SVGvault">
                      </figure>
                      <!-- End SVG Icon -->
                    </div>
                  </div>

                  <div class="js-slide px-4">
                    <div id="SVGresponsive" class="svg-preloader">
                      <!-- Title -->
                      <div class="text-center mb-7">
                        <span class="btn btn-icon btn-soft-primary rounded-circle mb-4">
                          <span class="small font-weight-semi-bold btn-icon__inner">02.</span>
                        </span>
                        <h2 class="h4 text-primary">Download a Wallet</h2>
                        <p>Bitcoin is received, stored, and sent using software known as a 'Bitcoin Wallet'. Download the official Bitcoin.com Wallet for free.</p>
                      </div>
                      <!-- End Title -->

                      <!-- SVG Icon -->
                      <figure class="ie-responsive">
                        <img class="js-svg-injector" src="../../assets/svg/flat-icons/responsive.svg" alt="Image Description"
                             data-parent="#SVGresponsive">
                      </figure>
                      <!-- End SVG Icon -->
                    </div>
                  </div>

                  <div class="js-slide px-4">
                    <div id="SVGeasyPayment" class="svg-preloader">
                      <!-- Title -->
                      <div class="text-center mb-7">
                        <span class="btn btn-icon btn-soft-primary rounded-circle mb-4">
                          <span class="small font-weight-semi-bold btn-icon__inner">03.</span>
                        </span>
                        <h2 class="h4 text-primary">Use Bitcoin</h2>
                        <p>Bitcoin makes it easy to send real money quickly to anywhere in the world! Bitcoin can also be used to make purchases from a variety of online retailers.</p>
                      </div>
                      <!-- End Title -->

                      <!-- SVG Icon -->
                      <figure class="ie-easy-payment">
                        <img class="js-svg-injector" src="../../assets/svg/flat-icons/easy-payment.svg" alt="Image Description"
                             data-parent="#SVGeasyPayment">
                      </figure>
                      <!-- End SVG Icon -->
                    </div>
                  </div>
                </div>
                <!-- End Hero Carousel -->
              
            
              
                <link rel="stylesheet" href="../../assets/vendor/slick-carousel/slick/slick.css">
              
            
              
                <!-- JS Implementing Plugins -->
                <script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>
                <script src="../../assets/vendor/slick-carousel/slick/slick.js"></script>

                <!-- JS Front -->
                <script src="../../assets/js/components/hs.svg-injector.js"></script>
                <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');

                    // initialization of slick carousel
                    $.HSCore.components.HSSlickCarousel.init('.js-slick-carousel');
                  });
                </script>
              
            

SVG blocks #19

Image Description

Professional Design

Achieve virtually any design and layout from within the one template.

Get Front
Image Description

Unlimited Power

Find what you need in one template and combine features at will.

Front Power
Image Description

Goal Driven

The time has come to bring those ideas and plans to life.

Hire Front
              
                <!-- Icon Blocks Section -->
                <div class="container space-2">
                  <div class="row justify-content-center mx-gutters-2">
                    <div class="col-sm-6 col-lg-4 mb-7 mb-lg-0">
                      <!-- Icon Blocks -->
                      <div class="text-center px-5">
                        <!-- SVG Icon -->
                        <figure id="SVGmobile-marketing" class="svg-preloader w-75 mx-auto mb-4">
                          <img class="js-svg-injector" src="../../assets/svg/flat-icons/mobile-marketing.svg" alt="Image Description"
                               data-parent="#SVGmobile-marketing">
                        </figure>
                        <!-- End SVG Icon -->

                        <!-- Info -->
                        <div class="mb-4">
                          <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 Info -->

                        <a class="btn btn-sm btn-soft-primary btn-pill transition-3d-hover" href="https://themes.getbootstrap.com/product/front-multipurpose-responsive-template/" target="_blank">
                          Get Front
                          <span class="fas fa-angle-right ml-2"></span>
                        </a>
                      </div>
                      <!-- End Icon Blocks -->
                    </div>

                    <div class="col-sm-6 col-lg-4 mb-7 mb-lg-0">
                      <!-- Icon Blocks -->
                      <div class="text-center px-5">
                        <!-- SVG Icon -->
                        <figure id="SVGservices" class="svg-preloader w-75 mx-auto mb-4">
                          <img class="js-svg-injector" src="../../assets/svg/flat-icons/services.svg" alt="Image Description"
                               data-parent="#SVGservices">
                        </figure>
                        <!-- End SVG Icon -->

                        <!-- Info -->
                        <div class="mb-4">
                          <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>
                        <!-- End Info -->

                        <a class="btn btn-sm btn-soft-primary btn-pill transition-3d-hover" href="../../starter/index.html">
                          Front Power
                          <span class="fas fa-angle-right ml-2"></span>
                        </a>
                      </div>
                      <!-- End Icon Blocks -->
                    </div>

                    <div class="col-sm-6 col-lg-4">
                      <!-- Icon Blocks -->
                      <div class="text-center px-5">
                        <!-- SVG Icon -->
                        <figure id="SVGgraphicDesign" class="svg-preloader w-75 mx-auto mb-4">
                          <img class="js-svg-injector" src="../../assets/svg/flat-icons/graphic-design.svg" alt="Image Description"
                               data-parent="#SVGgraphicDesign">
                        </figure>
                        <!-- End SVG Icon -->

                        <!-- Info -->
                        <div class="mb-4">
                          <h3 class="h5">Goal Driven</h3>
                          <p class="mb-md-0">The time has come to bring those ideas and plans to life.</p>
                        </div>
                        <!-- End Info -->

                        <a class="btn btn-sm btn-soft-primary btn-pill transition-3d-hover" href="../pages/hire-us.html">
                          Hire Front
                          <span class="fas fa-angle-right ml-2"></span>
                        </a>
                      </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>
              
            

SVG blocks #20

Image Description

Create an account

Create a Front account. Submit applications, save listings and manage jobs.

Create an Account
Image Description

Post your resume

Create an account and upload your resume to be found by the recruiters who search Monster's databases every day.

Post your Resume
Image Description

Employers: Post a job

Your next hire is here. Our career advice, resume services and education partners give you a leg up in the job search.

Post a Job
              
                <!-- Get Started 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 Blocks -->
                      <div class="text-center">
                        <!-- SVG Icon -->
                        <figure id="SVGcreateAccount" class="svg-preloader w-65 mx-auto mb-4">
                          <img class="js-svg-injector" src="../../assets/svg/illustrations/create-account.svg" alt="Image Description"
                               data-parent="#SVGcreateAccount">
                        </figure>
                        <!-- End SVG Icon -->

                        <div class="mb-4">
                          <h1 class="h5">Create an account</h1>
                          <p>Create a Front account. Submit applications, save listings and manage jobs.</p>
                        </div>
                        <a class="btn btn-sm btn-soft-primary btn-wide transition-3d-hover" href="#">
                          Create an Account
                          <span class="fas fa-angle-right ml-2"></span>
                        </a>
                      </div>
                      <!-- End Icon Blocks -->
                    </div>

                    <div class="col-sm-6 col-lg-4 mb-9 mb-sm-0">
                      <!-- Icon Blocks -->
                      <div class="text-center">
                        <!-- SVG Icon -->
                        <figure id="SVGpostResume" class="svg-preloader w-65 mx-auto mb-4">
                          <img class="js-svg-injector" src="../../assets/svg/illustrations/post-resume.svg" alt="Image Description"
                               data-parent="#SVGpostResume">
                        </figure>
                        <!-- End SVG Icon -->

                        <div class="mb-4">
                          <h2 class="h5">Post your resume</h2>
                          <p>Create an account and upload your resume to be found by the recruiters who search Monster's databases every day.</p>
                        </div>
                        <a class="btn btn-sm btn-soft-primary btn-wide transition-3d-hover" href="#">
                          Post your Resume
                          <span class="fas fa-angle-right ml-2"></span>
                        </a>
                      </div>
                      <!-- End Icon Blocks -->
                    </div>

                    <div class="col-sm-6 col-lg-4">
                      <!-- Icon Blocks -->
                      <div class="text-center">
                        <!-- SVG Icon -->
                        <figure id="SVGportfolio" class="svg-preloader w-65 mx-auto mb-4">
                          <img class="js-svg-injector" src="../../assets/svg/illustrations/portfolio.svg" alt="Image Description"
                               data-parent="#SVGportfolio">
                        </figure>
                        <!-- End SVG Icon -->

                        <div class="mb-4">
                          <h3 class="h5">Employers: Post a job</h3>
                          <p>Your next hire is here. Our career advice, resume services and education partners give you a leg up in the job search.</p>
                        </div>
                        <a class="btn btn-sm btn-soft-primary btn-wide transition-3d-hover" href="#">
                          Post a Job
                          <span class="fas fa-angle-right ml-2"></span>
                        </a>
                      </div>
                      <!-- End Icon Blocks -->
                    </div>
                  </div>
                </div>
                <!-- End Get Started 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 #21

Image Description

Refer friends

Send referrals to your friends either here or in your app.

Image Description

Follow along

Follow your friend's progress and send encouraging messages along the way.

Image Description

Get paid

When your friend starts building, you'll get paid after their first task completion.

              
                <!-- Icon Blocks -->
                <div class="container space-2">
                  <div class="row">
                    <div class="col-md-4 mb-9 mb-md-0">
                      <div class="pr-lg-4">
                        <figure id="SVGanalysis" class="svg-preloader mb-3 ie-analysis">
                          <img class="js-svg-injector w-75" src="../../assets/svg/illustrations/analysis.svg" alt="Image Description"
                               data-parent="#SVGanalysis">
                        </figure>
                        <h4 class="h5">Refer friends</h4>
                        <p>Send referrals to your friends either here or in your app.</p>
                      </div>
                    </div>
                    <div class="col-md-4 mb-9 mb-md-0">
                      <div class="pr-lg-4">
                        <figure id="SVGinTheOffice" class="svg-preloader mb-3 ie-in-the-office">
                          <img class="js-svg-injector w-75" src="../../assets/svg/illustrations/in-the-office.svg" alt="Image Description"
                               data-parent="#SVGinTheOffice">
                        </figure>
                        <h4 class="h5">Follow along</h4>
                        <p>Follow your friend's progress and send encouraging messages along the way.</p>
                      </div>
                    </div>
                    <div class="col-md-4">
                      <div class="pr-lg-4">
                        <figure id="SVGmakeItRain" class="svg-preloader mb-3 ie-make-it-rain">
                          <img class="js-svg-injector w-75" src="../../assets/svg/illustrations/make-it-rain.svg" alt="Image Description"
                               data-parent="#SVGmakeItRain">
                        </figure>
                        <h4 class="h5">Get paid</h4>
                        <p>When your friend starts building, you'll get paid after their first task completion.</p>
                      </div>
                    </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>