Features

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

Overview

Some contents/blocks are not properly rendered in the Docs page due to smaller content. However, the design will be properly adjusted in the full-sized container.

Browser #1

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.

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

                <div class="u-browser-v1 mx-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" style="enable-background:new 0 0 1109.8 797.1;" xml:space="preserve">
                      <path class="u-fill-primary" opacity=".1" d="M105.1,267.1C35.5,331.5-3.5,423,0.3,517.7c5.8,145.3,110.7,314.2,588,273.1c753-64.7,481.3-358.3,440.4-398.3
                        c-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>

                  <figure class="u-browser-v1__svg">
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                         viewBox="0 0 857 670" style="enable-background:new 0 0 857 670;" xml:space="preserve">
                      <g>
                        <defs>
                          <path id="browserV1_1" d="M833,665H25c-10.5,0-19-8.5-19-19V24.9c0-10.5,8.5-19,19-19h808c10.5,0,19,8.5,19,19V646C852,656.5,843.5,665,833,665z"/>
                        </defs>
                        <clipPath id="browserV1_2">
                          <use xlink:href="#browserV1_1" style="overflow:visible;"/>
                        </clipPath>
                        <!-- Apply your (855px width to 655px height) image here -->
                        <image style="overflow:visible;clip-path:url(#browserV1_2);" width="855" height="655" xlink:href="../assets/img/855x665/img1.jpg" transform="matrix(1 0 0 1.0075 0 0)"></image>
                        <use xlink:href="#browserV1_1" class="u-fill-none u-stroke-white" stroke-width="10" stroke-miterlimit="10" style="overflow:visible;"/>
                      </g>
                      <g>
                        <path class="u-fill-white" d="M856.8,40.2H0.8V19c0-10.5,8.5-19,19-19h818c10.5,0,19,8.5,19,19V40.2z"/>
                      </g>
                      <g>
                        <ellipse class="u-fill-danger" cx="28.5" cy="20.1" rx="6" ry="6"/>
                        <ellipse class="u-fill-warning" cx="48.4" cy="20.1" rx="6" ry="6"/>
                        <ellipse class="u-fill-success" cx="68.4" cy="20.1" rx="6" ry="6"/>
                      </g>
                    </svg>
                  </figure>
                </div>

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

Half SVG half text #1

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.

SVG Illustration
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
              
                <div class="u-space-3">
                  <div class="row align-items-lg-center">
                    <div class="col-lg-5 mb-7 mb-lg-0">
                      <div class="pr-lg-4">
                        <span class="u-icon u-icon-primary--air rounded-circle mb-3">
                          <span class="small font-weight-bold u-icon__inner">01.</span>
                        </span>
                        <h2 class="h4 text-primary"><strong>Smart evaluation model</strong></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>
                    </div>

                    <div class="col-lg-7 mb-7 mb-lg-0">
                      <img src="../assets/svg/flat-icons/marketing-strategy-flat-concept-illustration.svg" alt="SVG Illustration">
                    </div>
                  </div>
                </div>

                <div class="u-space-1">
                  <div class="row align-items-lg-center">
                    <div class="col-lg-5 order-lg-2 mb-7 mb-lg-0">
                      <div class="pl-lg-4">
                        <span class="u-icon u-icon-primary--air rounded-circle mb-3">
                          <span class="small font-weight-bold u-icon__inner">02.</span>
                        </span>
                        <h2 class="h4 text-primary"><strong>Safe. Stable. Secure.</strong></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>
                    </div>

                    <div class="col-lg-7 order-lg-1 mb-7 mb-lg-0">
                      <img src="../assets/svg/flat-icons/app-development-flat-concept-illustration.svg" alt="SVG Illustration">
                    </div>
                  </div>
                </div>

                <div class="u-space-3">
                  <div class="row align-items-lg-center">
                    <div class="col-lg-5 mb-7 mb-lg-0">
                      <div class="pr-lg-4">
                        <span class="u-icon u-icon-primary--air rounded-circle mb-3">
                          <span class="small font-weight-bold u-icon__inner">03.</span>
                        </span>
                        <h2 class="h4 text-primary"><strong>Now, zero fees for everyone</strong></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>
                    </div>

                    <div class="col-lg-7 mb-7 mb-lg-0">
                      <img src="../assets/svg/flat-icons/business-analysis-flat-concept-illustration.svg" alt="SVG Illustration">
                    </div>
                  </div>
                </div>
              
            

Half SVG half text #2

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
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
              
                <div class="row justify-content-lg-between align-items-center u-space-3">
                  <div class="col-md-6 col-lg-5 mb-7 mb-md-0">
                    <div class="pr-md-4">
                      <div class="media mb-7">
                        <div class="d-flex mr-3">
                          <span class="u-icon u-icon-primary--air u-icon--sm rounded-circle">
                            <span class="u-icon__inner font-weight-bold">A.</span>
                          </span>
                        </div>
                        <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>

                      <div class="media mb-7">
                        <div class="d-flex mr-3">
                          <span class="u-icon u-icon-primary--air u-icon--sm rounded-circle">
                            <span class="u-icon__inner font-weight-bold">B.</span>
                          </span>
                        </div>
                        <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>

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

                  <div class="col-md-6">
                    <figure>
                      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                           viewBox="0 0 614.8 747.7" style="enable-background:new 0 0 614.8 747.7;" xml:space="preserve">
                        <path class="u-fill-primary" opacity=".05" d="M186.9,138.9C125.8,144.5,69.7,176,34.4,226c-54.3,76.8-67.1,204.7,193.8,371.7c411.5,263.5,387.9,6,382.7-30.6
                          c-0.5-3.6-0.9-7.2-1.3-10.7l-22.1-241.9C576.8,198.3,474,112.7,357.7,123.3L186.9,138.9z"/>
                        <g>
                          <defs>
                            <path id="mockupExample1_1" d="M168.6,729.7L168.6,729.7c135.8,53,290.2-14.8,343.2-150.6l85-217.9C649.8,225.4,582,71,446.2,18l0,0
                              C310.4-34.9,156,32.8,103,168.6L18,386.5C-34.9,522.3,32.8,676.7,168.6,729.7z"/>
                          </defs>
                          <clipPath id="mockupExample1_2">
                            <use xlink:href="#mockupExample1_1"  style="overflow:visible;"/>
                          </clipPath>
                          <g style="clip-path:url(#mockupExample1_2);">
                            <!-- Apply your (615px width to 750px height) image here -->
                            <image style="overflow:visible;" width="615" height="750" xlink:href="../assets/img/615x750/img1.jpg"  transform="matrix(1 0 0 1 -0.1366 -0.9532)"></image>
                          </g>
                        </g>
                        <circle class="u-fill-danger" cx="126.3" cy="693.8" r="16.3"/>
                        <circle class="u-fill-success" cx="132.9" cy="632.6" r="10.6"/>
                        <circle class="u-fill-primary" cx="77" cy="655.9" r="21.6"/>
                        <circle class="u-fill-warning" cx="38.8" cy="708.1" r="3.9"/>
                      </svg>
                    </figure>
                  </div>
                </div>

                <div class="row justify-content-lg-between align-items-center u-space-3">
                  <div class="col-md-6 col-lg-5 order-md-2 mb-7 mb-md-0">
                    <div class="pl-md-4">
                      <div class="media mb-7">
                        <div class="d-flex mr-3">
                          <span class="u-icon u-icon-success--air u-icon--sm rounded-circle">
                            <span class="u-icon__inner font-weight-bold">C.</span>
                          </span>
                        </div>
                        <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>

                      <div class="media mb-7">
                        <div class="d-flex mr-3">
                          <span class="u-icon u-icon-success--air u-icon--sm rounded-circle">
                            <span class="u-icon__inner font-weight-bold">D.</span>
                          </span>
                        </div>
                        <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>

                      <a class="btn btn-success u-btn-success u-btn-wide u-btn-pill transition-3d-hover" href="#">Purchase Now <span class="fa fa-angle-right ml-2"></span></a>
                    </div>
                  </div>

                  <div class="col-md-6 order-md-1">
                    <figure>
                      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                           viewBox="0 0 614.8 747.7" style="enable-background:new 0 0 614.8 747.7;" xml:space="preserve">
                        <path class="u-fill-success" opacity=".05" d="M428.5,138.9C489.6,144.5,545.6,176,581,226c54.3,76.8,67.1,204.7-193.8,371.7c-411.5,263.5-387.9,6-382.7-30.6
                          c0.5-3.6,0.9-7.2,1.3-10.7l22.1-241.9c10.6-116.2,113.5-201.8,229.8-191.1L428.5,138.9z"/>
                        <g>
                          <defs>
                            <path id="mockupExample3_1" d="M446.2,729.7L446.2,729.7C310.4,782.7,156,714.9,103,579.1L18,361.2C-34.9,225.4,32.8,71,168.6,18l0,0
                              c135.8-53,290.2,14.8,343.2,150.6l85,217.9C649.8,522.3,582,676.7,446.2,729.7z"/>
                          </defs>
                          <clipPath id="mockupExample3_2">
                            <use xlink:href="#mockupExample3_1"  style="overflow:visible;"/>
                          </clipPath>
                          <g style="clip-path:url(#mockupExample3_2);">
                            <!-- Apply your (615px width to 750px height) image here -->
                            <image style="overflow:visible;" width="615" height="750" xlink:href="../assets/img/615x750/img2.jpg"  transform="matrix(1 0 0 1 -3.177470e-02 -0.9532)"></image>
                          </g>
                        </g>
                        <g>
                          <circle class="u-fill-danger" cx="488.6" cy="693.8" r="16.3"/>
                          <circle class="u-fill-success" cx="482" cy="632.6" r="10.6"/>
                          <circle class="u-fill-primary" cx="537.8" cy="655.9" r="21.6"/>
                          <circle class="u-fill-warning" cx="576" cy="708.1" r="3.9"/>
                        </g>
                      </svg>
                    </figure>
                  </div>
                </div>
              
            

Half SVG half text #3

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
              
                <div class="position-relative">
                  <div class="container u-space-3--lg">
                    <div class="row justify-content-lg-end mb-7 mb-lg-0">
                      <div class="col-lg-5 mb-7 mb-lg-0">
                        <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 u-btn-primary--air u-btn-wide transition-3d-hover" href="#">Learn More</a>
                      </div>
                    </div>
                  </div>

                  <div class="col-lg-6 u-content-centered-y--lg">
                    <figure class="w-100">
                      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                           viewBox="0 0 855 665" style="enable-background:new 0 0 855 665;" xml:space="preserve">
                        <!-- Apply your (855px width to 665px height) image here -->
                        <image style="overflow:visible;" width="855" height="665" xlink:href="../assets/img/855x665/img2.jpg"></image>
                        <radialGradient id="gradientMockupID1" cx="427.5" cy="332.5" r="382.9572" gradientUnits="userSpaceOnUse">
                          <stop class="u-stop-color-white" offset="1.953869e-07" stop-opacity="0"/>
                          <stop class="u-stop-color-white" offset="4.778082e-02" stop-opacity="4.778063e-02"/>
                          <stop class="u-stop-color-white" offset="1"/>
                        </radialGradient>
                        <rect fill="url(#gradientMockupID1)" width="855" height="665"/>
                      </svg>
                    </figure>

                    <figure class="u-devices-v3">
                      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                           viewBox="0 0 317.5 665" style="enable-background:new 0 0 317.5 665;" xml:space="preserve">
                        <path class="u-fill-white" d="M263,666H54c-29.7,0-54-24.3-54-54V55C0,25.3,24.3,1,54,1h209c29.7,0,54,24.3,54,54v557
                          C317,641.7,292.7,666,263,666z"/>
                        <circle class="u-fill-gray-75" cx="159.5" cy="619.5" r="25.5"/>
                        <path class="u-fill-gray-75" fill-rule="evenodd" clip-rule="evenodd" d="M180,52h-42c-2.2,0-4-1.8-4-4v0c0-2.2,1.8-4,4-4h42c2.2,0,4,1.8,4,4v0C184,50.2,182.2,52,180,52z"/>
                        <g>
                          <defs>
                            <rect id="phoneFrameID1" x="19.4" y="81.3" width="280" height="500"/>
                          </defs>
                          <clipPath id="phoneFrameID2">
                            <use xlink:href="#phoneFrameID1"  style="overflow:visible;"/>
                          </clipPath>
                          <g style="clip-path:url(#phoneFrameID2);">
                            <!-- Apply your (282px width to 500px height) image here -->
                            <image style="overflow:visible;" width="282" height="500" xlink:href="../assets/img/282x500/img5.jpg" transform="matrix(1 0 0 1 18 81)"></image>
                          </g>
                          <use class="u-fill-none u-stroke-light-blue-125" xlink:href="#phoneFrameID1" stroke-miterlimit="10" style="overflow: visible;"/>
                        </g>
                      </svg>
                    </figure>
                  </div>
                </div>
              
            

Half SVG half text #4

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
              
                <div class="u-gradient-half-primary-v3">
                  <div class="container position-relative u-space-3-top z-index-2">
                    <div class="row align-items-start">
                      <div class="col-lg-5 mb-7 mb-lg-0">
                        <div class="pr-md-4 mb-4">
                          <span class="u-label u-label--sm u-label--success mb-2">Join Front</span>
                          <h2 class="text-primary">Let's get you <span class="font-weight-bold">started</span></h2>
                          <p>Start knowing what your attendees value, and win more business with Front template.</p>
                        </div>

                        <a class="btn btn-primary u-btn-primary u-btn-wide u-btn-pill transition-3d-hover mr-1 mb-2" href="#">Buy Now</a>
                        <a class="btn u-btn-primary--air u-btn-wide u-btn-pill transition-3d-hover ml-1 mb-2" href="#">Get Started</a>
                      </div>

                      <div class="col-lg-7 mt-auto">
                        <img src="../assets/svg/flat-icons/app-development-flat-concept-illustration.svg" alt="SVG Illustration">
                      </div>
                    </div>
                  </div>
                </div>

                <figure class="position-absolute-bottom-0">
                  <svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="140px" viewBox="20 -20 300 100">
                    <path class="u-fill-white" opacity="0.4" d="M30.913,43.944c0,0,42.911-34.464,87.51-14.191c77.31,35.14,113.304-1.952,146.638-4.729
                c48.654-4.056,69.94,16.218,69.94,16.218v54.396H30.913V43.944z" />
                    <path class="u-fill-white" opacity="0.4" d="M-35.667,44.628c0,0,42.91-34.463,87.51-14.191c77.31,35.141,113.304-1.952,146.639-4.729
                c48.653-4.055,69.939,16.218,69.939,16.218v54.396H-35.667V44.628z" />
                    <path class="u-fill-white" opacity="0" d="M43.415,98.342c0,0,48.283-68.927,109.133-68.927c65.886,0,97.983,67.914,97.983,67.914v3.716
                H42.401L43.415,98.342z" />
                    <path class="u-fill-white" d="M-34.667,62.998c0,0,56-45.667,120.316-27.839C167.484,57.842,197,41.332,232.286,30.428
                c53.07-16.399,104.047,36.903,104.047,36.903l1.333,36.667l-372-2.954L-34.667,62.998z" />
                  </svg>
                </figure>
              
            

Half SVG half text #5

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
SVG Illustration

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
SVG Illustration
              
                <div class="row align-items-lg-center u-space-2">
                  <div class="col-lg-5 order-lg-2 mb-7 mb-lg-0">
                    <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>

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

                  <div class="col-lg-7 order-lg-1 mb-7 mb-lg-0">
                    <img src="../assets/svg/flat-icons/sitting-woman-flat-concept-illustration.svg" alt="SVG Illustration">
                  </div>
                </div>

                <div class="row align-items-lg-center u-space-2">
                  <div class="col-lg-5 mb-7 mb-lg-0">
                    <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>

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

                  <div class="col-lg-7 mb-7 mb-lg-0">
                    <img src="../assets/svg/flat-icons/walking-man-flat-concept-illustration.svg" alt="SVG Illustration">
                  </div>
                </div>
              
            

Half SVG half text #6

We create the best solution for you.

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

SVG Illustration
              
                <div class="position-relative u-gradient-half-primary-v3">
                  <div class="container u-space-4-top u-space-5-top--md u-space-4-top--lg u-space-2-bottom">
                    <div class="row align-items-lg-center">
                      <div class="col-lg-5 mb-7 mb-lg-0">
                        <h1 class="mb-4">We create the best <span class="text-primary font-weight-bold">solution</span> for you.</h1>
                        <p>Font is an easy-to-use template that is loaded with all the features you will ever need.</p>
                      </div>

                      <div class="col-lg-7">
                        <img src="../assets/svg/flat-icons/we-have-an-idea-flat-concept-illustration.svg" alt="SVG Illustration">
                      </div>
                    </div>
                  </div>

                  <figure class="position-absolute-bottom-0">
                    <svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                         width="100%" height="140px" viewBox="20 -20 300 100" style="margin-bottom: -8px;" xml:space="preserve">
                      <path class="u-fill-white" opacity="0.4" d="M30.913,43.944c0,0,42.911-34.464,87.51-14.191c77.31,35.14,113.304-1.952,146.638-4.729
                  c48.654-4.056,69.94,16.218,69.94,16.218v54.396H30.913V43.944z" />
                      <path class="u-fill-white" opacity="0.4" d="M-35.667,44.628c0,0,42.91-34.463,87.51-14.191c77.31,35.141,113.304-1.952,146.639-4.729
                  c48.653-4.055,69.939,16.218,69.939,16.218v54.396H-35.667V44.628z" />
                      <path class="u-fill-white" opacity="0" d="M43.415,98.342c0,0,48.283-68.927,109.133-68.927c65.886,0,97.983,67.914,97.983,67.914v3.716
                  H42.401L43.415,98.342z" />
                      <path class="u-fill-white" d="M-34.667,62.998c0,0,56-45.667,120.316-27.839C167.484,57.842,197,41.332,232.286,30.428
                  c53.07-16.399,104.047,36.903,104.047,36.903l1.333,36.667l-372-2.954L-34.667,62.998z" />
                    </svg>
                  </figure>
                </div>
              
            

Half SVG half text #7

SVG Illustration

We're coming soon.

Our website is under construction. We'll be here soon with our new awesome site, subscribe to be notified.

Days
Hours
Mins
Secs

HTML:

              
                <div class="container u-space-4-top u-space-2-bottom u-space-0--lg">
                  <div class="row align-items-lg-center min-height-100vh">
                    <div class="col-lg-6">
                      <img src="../assets/svg/flat-icons/coming-soon-flat-concept-illustration.svg" alt="SVG Illustration">
                    </div>

                    <div class="col-lg-6">
                      <div class="pl-lg-4">
                        <div class="mb-4">
                          <h1 class="text-primary font-weight-normal">We're coming <span class="font-weight-bold">soon</span>.</h1>
                          <p>Our website is under construction. We'll be here soon with our new awesome site, subscribe to be notified.</p>
                        </div>

                        <div class="js-countdown row mb-5"
                             data-end-date="2020/11/30"
                             data-month-format="%m"
                             data-days-format="%D"
                             data-hours-format="%H"
                             data-minutes-format="%M"
                             data-seconds-format="%S">
                          <div class="col-3">
                            <strong class="js-cd-days h3 text-primary font-weight-bold mb-0"></strong>
                            <span class="h5 font-weight-normal mb-0">Days</span>
                          </div>
                          <div class="col-3">
                            <strong class="js-cd-hours h3 text-primary font-weight-bold mb-0"></strong>
                            <span class="h5 font-weight-normal mb-0">Hours</span>
                          </div>
                          <div class="col-3">
                            <strong class="js-cd-minutes h3 text-primary font-weight-bold mb-0"></strong>
                            <span class="h5 font-weight-normal mb-0">Mins</span>
                          </div>
                          <div class="col-3">
                            <strong class="js-cd-seconds h3 text-primary font-weight-bold mb-0"></strong>
                            <span class="h5 font-weight-normal mb-0">Secs</span>
                          </div>
                        </div>

                        <form class="js-validate js-form-message">
                          <div class="js-focus-state input-group u-form">
                            <input type="email" class="form-control u-form__input" name="email" required
                                   placeholder="Enter your email address"
                                   aria-label="Enter your email address"
                                   data-msg="Please enter a valid email address."
                                   data-error-class="u-has-error"
                                   data-success-class="u-has-success">
                            <div class="input-group-append u-form__append">
                              <button type="submit" class="btn btn-primary u-btn-wide--sm">Submit</button>
                            </div>
                          </div>
                        </form>
                      </div>
                    </div>
                  </div>
                </div>
              
            

JS library and initialization:

            
              <!-- JS Implementing Plugins -->
              <script src="../assets/vendor/jquery.countdown.min.js"></script>

              <!-- JS Implementing Plugins -->
              <script src="../assets/js/components/hs.countdown.js"></script>

              <!-- JS Plugins Init. -->
              <script>
                $(document).on('ready', function () {
                  // initialization of countdowns
                  var countdowns = $.HSCore.components.HSCountdown.init('.js-countdown', {
                    yearsElSelector: '.js-cd-years',
                    monthElSelector: '.js-cd-month',
                    daysElSelector: '.js-cd-days',
                    hoursElSelector: '.js-cd-hours',
                    minutesElSelector: '.js-cd-minutes',
                    secondsElSelector: '.js-cd-seconds'
                  });
                });
              </script>
            
          

Half SVG half text #8

Responsive design

Responsive design has grown from a preference to a necessity.

Hosting

We know that business never stops, and neither should your website.

Search engine optimization

Improve your website's ranking in search results with our comprehensive SEO packages and services.

HTML:

              
                <div class="row justify-content-md-between align-items-center">
                  <div class="col-md-6 col-lg-5 mb-7 mb-md-0">
                    <div class="pr-md-4">
                      <div class="media u-indicator-ver-dashed mb-3">
                        <div class="d-flex mt-1 mr-3">
                          <span class="u-icon u-icon-primary u-icon--xs rounded-circle">
                            <span class="fa fa-check u-icon__inner"></span>
                          </span>
                        </div>
                        <div class="media-body">
                          <h3 class="h5 text-primary">Responsive design</h3>
                          <p>Responsive design has grown from a preference to a necessity.</p>
                        </div>
                      </div>

                      <div class="media u-indicator-ver-dashed mb-3">
                        <div class="d-flex mt-1 mr-3">
                          <span class="u-icon u-icon-primary u-icon--xs rounded-circle">
                            <span class="fa fa-check u-icon__inner"></span>
                          </span>
                        </div>
                        <div class="media-body">
                          <h3 class="h5 text-primary">Hosting</h3>
                          <p>We know that business never stops, and neither should your website.</p>
                        </div>
                      </div>

                      <div class="media">
                        <div class="d-flex mt-1 mr-3">
                          <span class="u-icon u-icon-primary u-icon--xs rounded-circle">
                            <span class="fa fa-check u-icon__inner"></span>
                          </span>
                        </div>
                        <div class="media-body">
                          <h3 class="h5 text-primary">Search engine optimization</h3>
                          <p>Improve your website's ranking in search results with our comprehensive SEO packages and services.</p>
                        </div>
                      </div>
                    </div>
                  </div>

                  <div class="col-md-6">
                    <a class="js-fancybox u-media-player u-media-player--centered" href="javascript:;"
                       data-src="//vimeo.com/167434033"
                       data-speed="700"
                       data-animate-in="zoomIn"
                       data-animate-out="zoomOut"
                       data-caption="Front - Responsive Website Template">
                     <span class="u-media-player__icon u-media-player__icon--xl text-primary">
                      <span class="fa fa-play u-media-player__icon-inner"></span>
                     </span>
                    </a>

                    <figure>
                      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                           viewBox="0 0 614.8 747.7" style="enable-background:new 0 0 614.8 747.7;" xml:space="preserve">
                        <path class="u-fill-primary" opacity=".05" d="M186.9,138.9C125.8,144.5,69.7,176,34.4,226c-54.3,76.8-67.1,204.7,193.8,371.7c411.5,263.5,387.9,6,382.7-30.6
                          c-0.5-3.6-0.9-7.2-1.3-10.7l-22.1-241.9C576.8,198.3,474,112.7,357.7,123.3L186.9,138.9z"/>
                        <g>
                          <defs>
                            <path id="mockupExample2_1" d="M168.6,729.7L168.6,729.7c135.8,53,290.2-14.8,343.2-150.6l85-217.9C649.8,225.4,582,71,446.2,18l0,0
                              C310.4-34.9,156,32.8,103,168.6L18,386.5C-34.9,522.3,32.8,676.7,168.6,729.7z"/>
                          </defs>
                          <clipPath id="mockupExample2_2">
                            <use xlink:href="#mockupExample2_1"  style="overflow:visible;"/>
                          </clipPath>
                          <g style="clip-path:url(#mockupExample2_2);">
                            <!-- Apply your (615px width to 750px height) image here -->
                            <image style="overflow:visible;" width="615" height="750" xlink:href="../assets/img/615x750/img3.jpg"  transform="matrix(1 0 0 1 -0.1366 -0.9532)"></image>
                          </g>
                        </g>
                        <circle class="u-fill-danger" cx="126.3" cy="693.8" r="16.3"/>
                        <circle class="u-fill-success" cx="132.9" cy="632.6" r="10.6"/>
                        <circle class="u-fill-primary" cx="77" cy="655.9" r="21.6"/>
                        <circle class="u-fill-warning" cx="38.8" cy="708.1" r="3.9"/>
                      </svg>
                    </figure>
                  </div>
                </div>
              
            

CSS library:

            
              <link rel="stylesheet" href="assets/vendor/fancybox/jquery.fancybox.css">
            
          

JS library and initialization:

            
              <!-- JS Implementing Plugins -->
              <script src="assets/vendor/fancybox/jquery.fancybox.min.js"></script>

              <!-- JS Implementing Plugins -->
              <script src="assets/js/components/hs.fancybox.js"></script>

              <!-- JS Plugins Init. -->
              <script>
                $(document).on('ready', function () {
                  // initialization of popups
                  $.HSCore.components.HSPopup.init('.js-fancybox');
                });
              </script>
            
          

Half SVG half text #9

Opportunity

Our core values

At Front, we don't just accept difference—we celebrate it, we support it, and we thrive on it for the benefit of our employees, our products, and our community.

  • Empathy
  • Courtesy
  • Thriving
  • Craftsmanship
  • Playfulness
  • Solidarity

HTML:

              
                <div class="position-relative">
                  <div class="container u-space-3">
                    <div class="row align-items-center">
                      <div class="col-lg-5 mb-9 mb-lg-0">
                        <div class="pr-lg-4 mb-7">
                          <span class="u-label u-label--sm u-label--success mb-2">Opportunity</span>
                          <h2 class="text-primary">Our core
                            <span class="font-weight-bold">values</span>
                          </h2>
                          <p>At Front, we don't just accept difference—we celebrate it, we support it, and we thrive on it for the benefit of our employees, our products, and our community.</p>
                        </div>

                        <div class="row">
                          <div class="col-sm-6">
                            <ul class="list-unstyled mb-0">
                              <li class="py-2">
                                <div class="media">
                                  <div class="d-flex mr-3">
                                  <span class="u-icon u-icon-danger--air u-icon--sm rounded-circle">
                                    <span class="fa fa-heart u-icon__inner"></span>
                                  </span>
                                  </div>
                                  <div class="media-body">
                                    Empathy
                                  </div>
                                </div>
                              </li>
                              <li class="py-2">
                                <div class="media">
                                  <div class="d-flex mr-3">
                                  <span class="u-icon u-icon-primary--air u-icon--sm rounded-circle">
                                    <span class="fa fa-smile u-icon__inner"></span>
                                  </span>
                                  </div>
                                  <div class="media-body">
                                    Courtesy
                                  </div>
                                </div>
                              </li>
                              <li class="py-2">
                                <div class="media">
                                  <div class="d-flex mr-3">
                                  <span class="u-icon u-icon-success--air u-icon--sm rounded-circle">
                                    <span class="fab fa-studiovinari u-icon__inner"></span>
                                  </span>
                                  </div>
                                  <div class="media-body">
                                    Thriving
                                  </div>
                                </div>
                              </li>
                            </ul>
                          </div>

                          <div class="col-sm-6">
                            <ul class="list-unstyled mb-0">
                              <li class="py-2">
                                <div class="media">
                                  <div class="d-flex mr-3">
                                  <span class="u-icon u-icon-danger--air u-icon--sm rounded-circle">
                                    <span class="fab fa-steam-symbol u-icon__inner"></span>
                                  </span>
                                  </div>
                                  <div class="media-body">
                                    Craftsmanship
                                  </div>
                                </div>
                              </li>
                              <li class="py-2">
                                <div class="media">
                                  <div class="d-flex mr-3">
                                  <span class="u-icon u-icon-primary--air u-icon--sm rounded-circle">
                                    <span class="fa fa-table-tennis u-icon__inner"></span>
                                  </span>
                                  </div>
                                  <div class="media-body">
                                    Playfulness
                                  </div>
                                </div>
                              </li>
                              <li class="py-2">
                                <div class="media">
                                  <div class="d-flex mr-3">
                                  <span class="u-icon u-icon-success--air u-icon--sm rounded-circle">
                                    <span class="fab fa-slideshare u-icon__inner"></span>
                                  </span>
                                  </div>
                                  <div class="media-body">
                                    Solidarity
                                  </div>
                                </div>
                              </li>
                            </ul>
                          </div>
                        </div>
                      </div>

                      <div class="col-lg-7 position-relative">
                        <div id="video" class="u-video-player">
                          <img class="img-fluid u-video-player__preview" src="../assets/img/900x450/img5.jpg" alt="Image">

                          <a class="js-classes-toggle u-video-player__btn u-video-player__centered" href="javascript:;"
                             data-target="#video"
                             data-classes="u-video-player__played">
                            <span class="u-video-player__icon u-video-player__icon--lg text-primary">
                              <span class="fa fa-play u-video-player__icon-inner"></span>
                            </span>
                          </a>

                          <div class="embed-responsive embed-responsive-16by9">
                            <iframe id="youTubeVideo" class="embed-responsive-item"
                                    data-src="//www.youtube.com/embed/0qisGSwZym4?autoplay=1&showinfo=0&rel=0">
                            </iframe>
                          </div>
                        </div>

                        <figure class="w-100 u-content-centered">
                          <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" style="enable-background:new 0 0 1109.8 797.1;" xml:space="preserve">
                          <path class="u-fill-primary" opacity=".1" d="M105.1,267.1C35.5,331.5-3.5,423,0.3,517.7c5.8,145.3,110.7,314.2,588,273.1c753-64.7,481.3-358.3,440.4-398.3
                            c-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>
                    </div>
                  </div>
                </div>
              
            

JS library and initialization:

            
              <!-- JS Implementing Plugins -->
              <script src="../assets/js/components/hs.video-player.js"></script>

              <!-- JS Plugins Init. -->
              <script>
                $(function () {
                  // initialization of slick carousels
                  $.HSCore.components.HSVideoPlayer.init('.js-classes-toggle', {
                    oneClick: function () {
                      $('#youTubeVideo').attr('src', $('#youTubeVideo').data('src'));
                    }
                  });
                });
              </script>
            
          

Half SVG half text #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…

              
                <div class="position-relative">
                  <div class="container u-space-4-top u-space-5-top--md u-space-3-bottom">
                    <div class="w-md-80 w-lg-60">
                      <h1 class="text-primary"><span class="font-weight-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>

                  <figure class="d-none d-lg-block w-lg-40 u-content-centered-y right-0 z-index-minus-1 ml-9">
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                         viewBox="0 0 849.4 419.7" style="enable-background:new 0 0 849.4 419.7;" xml:space="preserve">
                      <g>
                        <linearGradient id="hireUsBgShape1" gradientUnits="userSpaceOnUse" x1="0.644" y1="109.4822" x2="84.356" y2="109.4822">
                          <stop class="u-stop-color-warning" offset="7.500810e-08"/>
                          <stop class="u-stop-color-danger" offset="1"/>
                        </linearGradient>
                        <path fill="url(#hireUsBgShape1)" d="M77.6,157.5L77.6,157.5c-7.3,5.4-17.7,3.7-23.1-3.6L3.8,84.5c-5.4-7.3-3.7-17.7,3.6-23.1l0,0
                          c7.3-5.4,17.7-3.7,23.1,3.6l50.7,69.4C86.5,141.8,84.9,152.2,77.6,157.5z"/>
                      </g>
                      <g>
                        <linearGradient id="hireUsBgShape2" gradientUnits="userSpaceOnUse" x1="366.1731" y1="39.5945" x2="430.9116" y2="39.5945">
                          <stop class="u-stop-color-primary" offset="7.500810e-08"/>
                          <stop class="u-stop-color-info" offset="1"/>
                        </linearGradient>
                        <path fill="url(#hireUsBgShape2)" d="M425.7,76.7L425.7,76.7c-5.7,4.1-13.7,2.9-17.8-2.8l-39.2-53.7c-4.1-5.7-2.9-13.7,2.8-17.8l0,0
                          c5.7-4.1,13.7-2.9,17.8,2.8l39.2,53.7C432.6,64.6,431.4,72.6,425.7,76.7z"/>
                      </g>
                      <linearGradient id="hireUsBgShape3" gradientUnits="userSpaceOnUse" x1="716" y1="109.4822" x2="739" y2="109.4822">
                        <stop class="u-stop-color-primary" offset="7.500810e-08"/>
                        <stop class="u-stop-color-info" offset="1"/>
                      </linearGradient>
                      <circle fill="url(#hireUsBgShape3)" cx="727.5" cy="109.5" r="11.5"/>
                      <linearGradient id="hireUsBgShape4" gradientUnits="userSpaceOnUse" x1="0" y1="317.4822" x2="29" y2="317.4822">
                        <stop class="u-stop-color-warning" offset="7.500810e-08"/>
                        <stop class="u-stop-color-danger" offset="1"/>
                      </linearGradient>
                      <circle fill="url(#hireUsBgShape4)" cx="14.5" cy="317.5" r="14.5"/>
                      <g>
                        <linearGradient id="hireUsBgShape5" gradientUnits="userSpaceOnUse" x1="139.1731" y1="371.5945" x2="203.9116" y2="371.5945">
                          <stop class="u-stop-color-primary" offset="7.500810e-08"/>
                          <stop class="u-stop-color-info" offset="1"/>
                        </linearGradient>
                        <path fill="url(#hireUsBgShape5)" d="M198.7,408.7L198.7,408.7c-5.7,4.1-13.7,2.9-17.8-2.8l-39.2-53.7c-4.1-5.7-2.9-13.7,2.8-17.8l0,0
                          c5.7-4.1,13.7-2.9,17.8,2.8l39.2,53.7C205.6,396.6,204.4,404.6,198.7,408.7z"/>
                      </g>
                      <g>
                        <linearGradient id="hireUsBgShape6" gradientUnits="userSpaceOnUse" x1="765.644" y1="368.4822" x2="849.356" y2="368.4822">
                          <stop class="u-stop-color-warning" offset="7.500810e-08"/>
                          <stop class="u-stop-color-danger" offset="1"/>
                        </linearGradient>
                        <path fill="url(#hireUsBgShape6)" d="M842.6,416.5L842.6,416.5c-7.3,5.4-17.7,3.7-23.1-3.6l-50.7-69.4c-5.4-7.3-3.7-17.7,3.6-23.1v0
                          c7.3-5.4,17.7-3.7,23.1,3.6l50.7,69.4C851.5,400.8,849.9,411.2,842.6,416.5z"/>
                      </g>
                    </svg>
                  </figure>
                </div>
              
            

Half SVG half text #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 job listings
  • Seamless job search
  • Job seekers and employers connect
              
                <!-- Features Section -->
                <div class="container">
                  <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="fa fa-check text-success"></span>
                          </div>
                          <div class="media-body">
                            Verified, up-to-date job listings
                          </div>
                        </li>
                        <li class="media my-3">
                          <div class="d-flex mt-1 mr-2">
                            <span class="fa 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="fa 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 class="w-100">
                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                             viewBox="0 0 204 124.5" style="enable-background:new 0 0 204 124.5;" xml:space="preserve">
                          <g id="XMLID_304_">
                            <g id="XMLID_61_">
                              <linearGradient id="landingJobID1" gradientUnits="userSpaceOnUse" x1="52.7334" y1="62.3719" x2="22.1468" y2="9.3944" gradientTransform="matrix(1.1458 -1.312510e-03 0.3345 1.1635 -10.8117 5.519748e-02)">
                                <stop class="u-stop-color-white" stop-opacity="0" offset="3.907739e-07"/>
                                <stop class="u-stop-color-primary-darker" offset="1"/>
                              </linearGradient>
                              <polygon fill="url(#landingJobID1)" opacity=".35" points="83.1,54.9 27.5,4.1 5,28.6 60.7,79.5"/>
                              <path id="XMLID_83_" class="u-fill-white u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M10.9,1.9c5.1-2,11-1.3,15.6,2.3c6,4.7,7.8,12.8,4.7,19.4l5.7,8.8c0.1,0.2-0.1,0.5-0.3,0.4
                                l-9.9-3.5c-5.6,4.5-13.8,4.7-19.8,0.1C0.3,24.2-1.2,14.8,3.4,7.9"/>
                              <path id="XMLID_77_" class="u-fill-primary" d="M5.6,16.7c0,6.2,5,11.3,11.3,11.3c6.2,0,11.3-5,11.3-11.3S23,5.5,16.8,5.5
                                C10.6,5.5,5.6,10.5,5.6,16.7z"/>
                              <g id="XMLID_107_">
                                <g>
                                  <path id="XMLID_30_" class="u-fill-white" d="M18.4,19.1h-2.7v-1.3c0-0.5,0.1-0.9,0.2-1.1c0.1-0.2,0.4-0.6,0.8-1l1.2-1.2
                                    c0.2-0.2,0.3-0.5,0.3-0.8c0-0.3-0.1-0.6-0.3-0.8c-0.2-0.2-0.4-0.3-0.7-0.3c-0.3,0-0.6,0.1-0.8,0.4c-0.2,0.3-0.3,0.6-0.4,1.1
                                    h-2.8c0.1-1.2,0.6-2.1,1.3-2.8c0.7-0.7,1.7-1,2.8-1c1.1,0,2,0.3,2.7,0.9c0.7,0.6,1,1.4,1,2.5c0,0.5-0.1,0.8-0.2,1.1
                                    c-0.1,0.2-0.2,0.4-0.2,0.5s-0.2,0.3-0.3,0.5c-0.2,0.2-0.3,0.3-0.3,0.4c-0.3,0.3-0.6,0.6-0.8,0.8c-0.3,0.2-0.4,0.5-0.5,0.6
                                    c-0.1,0.2-0.1,0.4-0.1,0.7V19.1z M16,22.5c-0.3-0.3-0.5-0.7-0.5-1.1c0-0.4,0.2-0.8,0.5-1.1c0.3-0.3,0.7-0.5,1.1-0.5
                                    c0.4,0,0.8,0.2,1.1,0.5c0.3,0.3,0.5,0.7,0.5,1.1c0,0.4-0.2,0.8-0.5,1.1c-0.3,0.3-0.7,0.5-1.1,0.5C16.7,22.9,16.3,22.8,16,22.5z"
                                    />
                                </g>
                              </g>
                            </g>
                            <path id="XMLID_2_" class="u-fill-primary" opacity=".3" d="M122.7,96.8V31.4h-3.5c-0.7,0-1.4,0.7-1.4,1.6v66.7h0.2h0.2h4.2C122.6,99.7,122.7,98.4,122.7,96.8z"/>
                            <linearGradient id="landingJobID2" gradientUnits="userSpaceOnUse" x1="152.9279" y1="114.3364" x2="153.1333" y2="52.6696" gradientTransform="matrix(0.8901 -0.4146 0.5277 1.1328 -19.471 47.0093)">
                              <stop class="u-stop-color-white" stop-opacity="0" offset="3.907739e-07"/>
                              <stop class="u-stop-color-primary-darker" offset="1"/>
                            </linearGradient>
                            <polygon fill="url(#landingJobID2)" opacity=".35" points="152.4,124.5 201.7,101.5 169.2,31.9 120,54.8"/>
                            <g id="XMLID_139_">
                              <g>
                                <path id="XMLID_233_" class="u-fill-white" d="M167.6,99.5h-47.7V33.2c0-1,0.8-1.8,1.8-1.8h45.9c1,0,1.8,0.8,1.8,1.8v64.5C169.4,98.7,168.6,99.5,167.6,99.5z"/>
                                <path id="XMLID_232_" class="u-fill-primary" d="M169.4,48.4h-49.5V33.2c0-1,0.8-1.8,1.8-1.8h46.7c0.5,0,1,0.4,1,1V48.4z"/>
                                <path id="XMLID_231_" class="u-fill-warning" d="M131.7,39.8c0,1.6-1.3,2.9-2.9,2.9c-1.6,0-2.9-1.3-2.9-2.9c0-1.6,1.3-2.9,2.9-2.9C130.4,36.9,131.7,38.2,131.7,39.8z"/>
                                <g id="XMLID_221_">
                                  <path id="XMLID_222_" class="u-fill-warning" d="M128.6,95.3h-0.4v-2.7h0.4V95.3z M128.6,90h-0.4v-2.7h0.4V90z M128.6,84.7h-0.4V82h0.4
                                    V84.7z M128.6,79.3h-0.4v-2.7h0.4V79.3z M128.6,74h-0.4v-2.7h0.4V74z M128.6,68.7h-0.4V66h0.4V68.7z M128.6,63.4h-0.4v-2.7h0.4
                                    V63.4z M128.6,58h-0.4v-2.7h0.4V58z"/>
                                </g>
                                <path id="XMLID_220_" class="u-fill-warning" d="M130,88.5c0,0.9-0.7,1.6-1.6,1.6c-0.9,0-1.6-0.7-1.6-1.6c0-0.9,0.7-1.6,1.6-1.6C129.3,86.8,130,87.6,130,88.5z"/>
                                <line id="XMLID_218_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="119.9" y1="48.4" x2="169.4" y2="48.4"/>
                                <path id="XMLID_217_" class="u-fill-warning" d="M130,72.6c0,0.9-0.7,1.6-1.6,1.6c-0.9,0-1.6-0.7-1.6-1.6c0-0.9,0.7-1.6,1.6-1.6C129.3,70.9,130,71.7,130,72.6z"/>
                                <path id="XMLID_216_" class="u-fill-warning" d="M130,56.7c0,0.9-0.7,1.6-1.6,1.6c-0.9,0-1.6-0.7-1.6-1.6c0-0.9,0.7-1.6,1.6-1.6C129.3,55,130,55.8,130,56.7z"/>
                                <line id="XMLID_215_" class="u-fill-none u-stroke-danger" stroke-width="1.5" stroke-miterlimit="10" x1="133.2" y1="56.7" x2="164" y2="56.7"/>
                                <line id="XMLID_214_" class="u-fill-none u-stroke-danger" stroke-width="1.5" stroke-miterlimit="10" x1="133.2" y1="71.4" x2="164" y2="71.4"/>
                                <line id="XMLID_213_" class="u-fill-none u-stroke-danger" stroke-width="1.5" stroke-miterlimit="10" x1="133.2" y1="74.2" x2="164" y2="74.2"/>
                                <line id="XMLID_212_" class="u-fill-none u-stroke-danger" stroke-width="1.5" stroke-miterlimit="10" x1="133.2" y1="77.1" x2="164" y2="77.1"/>
                                <line id="XMLID_211_" class="u-fill-none u-stroke-danger" stroke-width="1.5" stroke-miterlimit="10" x1="133.2" y1="86.8" x2="164.1" y2="86.8"/>
                                <line id="XMLID_210_" class="u-fill-none u-stroke-danger" stroke-width="1.5" stroke-miterlimit="10" x1="133.2" y1="89.5" x2="164" y2="89.5"/>
                                <line id="XMLID_209_" class="u-fill-none u-stroke-danger" stroke-width="1.5" stroke-miterlimit="10" x1="133.1" y1="92.2" x2="154.4" y2="92.2"/>
                                <line id="XMLID_208_" class="u-fill-none u-stroke-danger" stroke-width="1.5" stroke-miterlimit="10" x1="133.2" y1="79.9" x2="144.6" y2="79.9"/>
                                <line id="XMLID_207_" class="u-fill-none u-stroke-danger" stroke-width="1.5" stroke-miterlimit="10" x1="133.2" y1="59.6" x2="164" y2="59.6"/>
                                <line id="XMLID_206_" class="u-fill-none u-stroke-danger" stroke-width="1.5" stroke-miterlimit="10" x1="133.2" y1="62.5" x2="164" y2="62.5"/>
                                <line id="XMLID_205_" class="u-fill-none u-stroke-danger" stroke-width="1.5" stroke-miterlimit="10" x1="133.2" y1="65.4" x2="144.6" y2="65.4"/>
                              </g>
                            </g>
                            <path id="XMLID_295_" class="u-fill-primary" opacity=".3" d="M144.6,46.8c-0.9-0.7-2-1.1-3.2-1.1H114v78.2h5.1h1.1V123h-4.7v-12.5H139v-0.8h4.5
                              c1.2,0,2.2-1,2.2-2.2v-7.9v-2V71.4h0.8V50.8c0-1.2-0.4-2.3-1.1-3.2C145.2,47.3,144.9,47,144.6,46.8z"/>
                            <g id="XMLID_18_">
                              <linearGradient id="landingJobID3" gradientUnits="userSpaceOnUse" x1="98.8467" y1="46.4828" x2="98.8467" y2="99.5843">
                                <stop class="u-stop-color-midnightblue" offset="0"/>
                                <stop class="u-stop-color-primary-darker" offset="1"/>
                              </linearGradient>
                              <path id="XMLID_701_" fill="url(#landingJobID3)" d="M143.5,99.6H54.2V48.7c0-1.2,1-2.2,2.2-2.2h84.9c1.2,0,2.2,1,2.2,2.2V99.6z"/>
                              <rect id="XMLID_697_" x="59.1" y="51.7" class="u-fill-white" width="79.7" height="41.9"/>
                              <rect id="XMLID_684_" x="85.4" y="107.6" class="u-fill-white" opacity=".5" width="26.9" height="15.9"/>
                              <rect id="XMLID_683_" x="85.4" y="107.6" class="u-fill-primary-lighter" opacity=".5" width="26.9" height="8"/>
                              <rect id="XMLID_682_" x="85.4" y="107.6" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" width="26.9" height="15.9"/>
                              <path id="XMLID_681_" class="u-fill-white" d="M143.5,97.6H54.2v9.8c0,1.2,1,2.2,2.2,2.2h84.8c1.2,0,2.2-1,2.2-2.2V97.6z"/>
                              <g>
                                <rect id="XMLID_47_" x="62.4" y="54.8" class="u-fill-success" width="36.5" height="35.4"/>
                                <line id="XMLID_159_" class="u-fill-none u-stroke-white" stroke-width="1.5" stroke-miterlimit="10" x1="65.1" y1="59.6" x2="79.4" y2="59.6"/>
                                <line id="XMLID_44_" class="u-fill-none u-stroke-white" stroke-width="1.5" stroke-miterlimit="10" x1="65.1" y1="65.9" x2="96.7" y2="65.9"/>
                                <line id="XMLID_3_" class="u-fill-none u-stroke-white" stroke-width="1.5" stroke-miterlimit="10" x1="65.1" y1="69.2" x2="96.7" y2="69.2"/>
                                <line id="XMLID_42_" class="u-fill-none u-stroke-white" stroke-width="1.5" stroke-miterlimit="10" x1="65.1" y1="72.4" x2="92.3" y2="72.4"/>
                                <line id="XMLID_41_" class="u-fill-none u-stroke-white" stroke-width="1.5" stroke-miterlimit="10" x1="65.1" y1="75.7" x2="92.3" y2="75.7"/>
                                <line id="XMLID_1_" class="u-fill-none u-stroke-white" stroke-width="1.5" stroke-miterlimit="10" x1="65.1" y1="78.9" x2="92.3" y2="78.9"/>
                                <line id="XMLID_167_" class="u-fill-none u-stroke-white" stroke-width="1.5" stroke-miterlimit="10" x1="65.1" y1="82.2" x2="84.3" y2="82.2"/>
                              </g>
                            </g>
                            <path id="XMLID_301_" class="u-fill-primary" opacity=".3" d="M60.8,81.6h-9v18.5v1.7v7.1c0,1.1,0.9,2,2,2h9.5v0.8h1.2V85.3C64.5,83.3,62.8,81.6,60.8,81.6z"/>
                            <g id="XMLID_19_">
                              <path id="XMLID_35_" class="u-fill-white" d="M28,124.3h33.7v-39c0-1.2-1-2.2-2.2-2.2H30.2c-1.2,0-2.2,1-2.2,2.2V124.3z"/>
                              <path id="XMLID_34_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M35.2,83.1h-4.2c-1.6,0-2.9,1.3-2.9,2.9v33.8"/>
                              <line id="XMLID_33_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="42.9" y1="83.1" x2="38" y2="83.1"/>
                              <path id="XMLID_340_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M61.7,119.8V86c0-1.6-1.3-2.9-2.9-2.9H44.1"/>
                              <rect id="XMLID_339_" x="30.8" y="89.2" class="u-fill-primary" width="28.1" height="35"/>
                              <line id="XMLID_32_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="41.3" y1="86.7" x2="48.4" y2="86.7"/>
                              <path id="XMLID_27_" class="u-fill-white" d="M63.6,124.3v-1.1c0-1.1-0.9-2-2-2l-3,0c-0.4-1.6-1-3.1-1.8-4.4l2.2-2.2c0.8-0.8,0.8-2,0-2.8
                                l-1.6-1.6c-0.8-0.8-2-0.8-2.8,0l-2.2,2.2c-1.3-0.8-2.8-1.5-4.4-1.8v-3c0-1.1-0.9-2-2-2h-2.3c-1.1,0-2,0.9-2,2v3
                                c-1.6,0.4-3,1-4.3,1.8l-2.1-2.2c-0.8-0.8-2-0.8-2.8,0l-1.6,1.6c-0.8,0.8-0.8,2,0,2.8l2.1,2.2c-0.8,1.3-1.5,2.8-1.8,4.4l-3,0
                                c-1.1,0-2,0.9-2,2l0,1.2h12.5c0-3.5,2.8-6.2,6.3-6.2c3.5,0,6.3,2.8,6.3,6.2H63.6z"/>
                              <path id="XMLID_20_" class="u-fill-none u-stroke-warning" stroke-width="1.5" stroke-miterlimit="10" d="M63.6,124.3v-1.1c0-1.1-0.9-2-2-2l-3,0c-0.4-1.6-1-3.1-1.8-4.4l2.2-2.2c0.8-0.8,0.8-2,0-2.8
                                l-1.6-1.6c-0.8-0.8-2-0.8-2.8,0l-2.2,2.2c-1.3-0.8-2.8-1.5-4.4-1.8v-3c0-1.1-0.9-2-2-2h-2.3c-1.1,0-2,0.9-2,2v3
                                c-1.6,0.4-3,1-4.3,1.8l-2.1-2.2c-0.8-0.8-2-0.8-2.8,0l-1.6,1.6c-0.8,0.8-0.8,2,0,2.8l2.1,2.2c-0.8,1.3-1.5,2.8-1.8,4.4l-3,0
                                c-1.1,0-2,0.9-2,2l0,1.2 M38.6,124.3c0-3.5,2.8-6.2,6.3-6.2c3.5,0,6.3,2.8,6.3,6.2"/>
                            </g>
                            <g id="XMLID_37_">
                              <line id="XMLID_767_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="130.7" y1="103.4" x2="130.7" y2="108.6"/>
                              <path id="XMLID_764_" class="u-fill-white" d="M130.7,79c-6.9,0-12.5,5.6-12.5,12.5c0,6.9,5.6,12.5,12.5,12.5c6.9,0,12.5-5.6,12.5-12.5
                                C143.2,84.6,137.6,79,130.7,79z M130.7,101c-5.2,0-9.5-4.3-9.5-9.5c0-5.2,4.3-9.5,9.5-9.5c5.2,0,9.5,4.3,9.5,9.5
                                C140.2,96.8,135.9,101,130.7,101z"/>
                              <path id="XMLID_114_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M137.7,81.2c-2-1.4-4.4-2.2-7-2.2c-6.9,0-12.5,5.6-12.5,12.5c0,6.9,5.6,12.5,12.5,12.5c6.9,0,12.5-5.6,12.5-12.5"/>
                              <path id="XMLID_113_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M142.9,88.7c-0.5-2.2-1.6-4.2-3.1-5.8"/>
                              <path id="XMLID_762_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M129.5,83.6c4.7,0,8.6,3.8,8.6,8.6"/>
                              <path id="XMLID_761_" class="u-fill-white" d="M128.2,107l0,15.1c0,0.8,0.6,1.4,1.4,1.4l2,0c0.8,0,1.4-0.6,1.4-1.4V107L128.2,107z"/>
                              <path id="XMLID_40_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M128.2,107l0,15.1c0,0.8,0.6,1.4,1.4,1.4l2,0c0.8,0,1.4-0.6,1.4-1.4V107L128.2,107z"/>
                              <line id="XMLID_758_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="128.1" y1="110.6" x2="133.3" y2="110.6"/>
                              <line id="XMLID_39_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="128.1" y1="113.2" x2="133.3" y2="113.2"/>
                            </g>
                          </g>
                        </svg>
                      </figure>
                      <!-- End SVG Shape -->
                    </div>
                  </div>
                </div>
                <!-- End Features Section -->
              
            

Half SVG half text #12

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 u-space-2">
                  <!-- SVG Mockups -->
                  <figure class="col-lg-6 position-absolute-top-left-0--lg u-content-centered-y--lg mb-9 mb-lg-0">
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                         viewBox="0 0 999.1 577.5" style="enable-background:new 0 0 999.1 577.5;" xml:space="preserve">
                      <!-- Laptop Frame -->
                      <path class="u-fill-white u-stroke-light-blue-125" stroke-miterlimit="10" d="M881.3,577H117.5c-14.4,0-26.2-11.8-26.2-26.2V26.7c0-14.4,11.8-26.2,26.2-26.2h763.9
                        c14.4,0,26.2,11.8,26.2,26.2v524.2C907.5,565.2,895.7,577,881.3,577z"/>
                      <circle fill="#f7f7f7" cx="498" cy="23.8" r="3"/>
                      <path class="u-fill-white" d="M996.3,561.2H2.9c-1.5,0-2.8-1.3-2.8-2.8l0,0c0-1.5,1.3-2.8,2.8-2.8h993.4c1.5,0,2.8,1.3,2.8,2.8l0,0
                        C999.1,559.9,997.9,561.2,996.3,561.2z"/>
                      <path fill="#efefef" d="M499.6,563L0,561.2c0,0,24.1,11.3,117.8,15.8H498h3.1h380.2c93.7-4.5,117.8-15.8,117.8-15.8L499.6,563z"/>
                      <linearGradient id="halfSvgHalfText1_12Laptop" gradientUnits="userSpaceOnUse" x1="403.8206" y1="559.1469" x2="594.97" y2="559.1469">
                        <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(#halfSvgHalfText1_12Laptop)" d="M591.4,562.7H407.4c-1.9,0-3.5-1.6-3.5-3.5v-3.5H595v3.5C595,561.1,593.4,562.7,591.4,562.7z"/>
                      <g>
                        <defs>
                          <rect id="halfSvgHalfText2_12Laptop" x="121.7" y="38" width="752.5" height="469.7"/>
                        </defs>
                        <clipPath id="halfSvgHalfText3_12Laptop">
                          <use xlink:href="#halfSvgHalfText2_12Laptop" style="overflow:visible;"/>
                        </clipPath>
                        <g style="clip-path:url(#halfSvgHalfText3_12Laptop);">
                          <!-- Apply your (1618px width to 1010px height) image here -->
                          <image style="overflow:visible;" width="1618" height="1010" xlink:href="../assets/img/1618x1010/img2.jpg" transform="matrix(0.4651 0 0 0.4651 121.7472 37.9679)"></image>
                        </g>
                        <use xlink:href="#halfSvgHalfText2_12Laptop" style="overflow:visible;fill:none;stroke:#E7EAF3;stroke-miterlimit:10;"/>
                      </g>
                      <!-- End Laptop Frame -->

                      <!-- Phone Frame -->
                      <path class="u-fill-white u-stroke-light-blue-125" stroke-miterlimit="10" d="M944,577H823.1c-29.7,0-54-24.3-54-54V150.9c0-29.7,24.3-54,54-54H944c29.7,0,54,24.3,54,54V523
                        C998,552.7,973.7,577,944,577z"/>
                      <circle fill="#f7f7f7" cx="884.3" cy="543.4" r="18.4"/>
                      <path class="u-fill-gray-75" fill-rule="evenodd" clip-rule="evenodd" d="M899.1,133.7h-30.3c-1.6,0-2.9-1.3-2.9-2.9l0,0c0-1.6,1.3-2.9,2.9-2.9h30.3c1.6,0,2.9,1.3,2.9,2.9l0,0
                        C902,132.4,900.7,133.7,899.1,133.7z"/>
                      <g>
                        <defs>
                          <rect id="halfSvgHalfText1_12Phone" x="783.1" y="154.8" width="202.2" height="361"/>
                        </defs>
                        <clipPath id="halfSvgHalfText2_12Phone">
                          <use xlink:href="#halfSvgHalfText1_12Phone" style="overflow:visible;"/>
                        </clipPath>
                        <g style="clip-path:url(#halfSvgHalfText2_12Phone);">
                          <!-- Apply your (282px width to 500px height) image here -->
                          <image style="overflow:visible;" width="282" height="500" xlink:href="../assets/img/282x500/img8.jpg" transform="matrix(0.722 0 0 0.722 782.1237 155.3553)"></image>
                        </g>
                        <use xlink:href="#halfSvgHalfText1_12Phone" style="overflow:visible;fill:none;stroke:#E7EAF3;stroke-miterlimit:10;"/>
                      </g>
                      <!-- End Phone Frame -->
                    </svg>
                  </figure>
                  <!-- 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 u-btn-primary u-btn-wide transition-3d-hover text-left mb-2 mr-sm-1">
                            <span class="media align-items-center">
                              <span class="d-flex mr-3">
                                <span class="fab fa-apple font-size-26"></span>
                              </span>
                              <span class="media-body">
                                <span class="d-block">Download on the</span>
                                <strong class="font-size-14">App Store</strong>
                              </span>
                            </span>
                          </button>
                          <!-- End Button -->

                          <!-- Button -->
                          <button type="button" class="btn btn-xs btn-dark u-btn-dark u-btn-wide transition-3d-hover text-left mb-2">
                            <span class="media align-items-center">
                              <span class="d-flex mr-3">
                                <span class="fab fa-google-play font-size-26"></span>
                              </span>
                              <span class="media-body">
                                <span class="d-block">Get it on</span>
                                <strong class="font-size-14">Google Play</strong>
                              </span>
                            </span>
                          </button>
                          <!-- End Button -->
                        </div>
                        <!-- End Title -->
                      </div>
                    </div>
                  </div>
                </div>
                <!-- End Features Section -->
              
            

Half SVG half text #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

SVG Illustration
              
                <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 class="col-lg-6 order-lg-1">
                    <div class="pr-lg-7">
                      <!-- SVG Icon -->
                      <img src="../assets/svg/flat-icons/house-agency-flat-concept-illustration.svg" alt="SVG Illustration">
                      <!-- End SVG Icon -->
                    </div>
                  </div>
                </div>
              
            

Half image half text #1

About

Front in frames

Enhance your brand with easy to use powerful customization features.

The time has come to bring those ideas and plans to life. This is where we really begin to visualize your napkin sketches and make them into beautiful pixels.

Find out More

HTML:

              
                <div class="row justify-content-between align-items-center">
                  <div class="col-lg-5 mb-7 mb-lg-0">
                    <div class="pr-md-4">
                      <div class="mb-7">
                        <span class="u-label u-label--sm u-label--success mb-2">About</span>
                        <h2 class="text-primary">Front in <span class="font-weight-bold">frames</span></h2>
                        <p>Enhance your brand with easy to use powerful customization features.</p>
                        <p>The time has come to bring those ideas and plans to life. This is where we really begin to visualize your napkin sketches and make them into beautiful pixels.</p>
                      </div>

                      <a class="btn btn-sm btn-primary u-btn-primary u-btn-wide transition-3d-hover" href="#">Find out More <span class="fa fa-angle-right ml-2"></span></a>
                    </div>
                  </div>

                  <div class="col-lg-6 position-relative">
                    <div class="row mx-gutters-2">
                      <div class="col-5 align-self-end px-2 mb-3">
                        <a class="js-fancybox u-media-viewer" href="javascript:;"
                           data-src="../assets/img/1920x1080/img2.jpg"
                           data-fancybox="lightbox-gallery-hidden"
                           data-caption="Front in frames - image #01"
                           data-speed="700">
                          <img class="img-fluid rounded" src="../assets/img/320x320/img1.jpg" alt="Image Description">

                          <span class="u-media-viewer__container">
                            <span class="u-media-viewer__icon">
                              <span class="fa fa-plus u-media-viewer__icon-inner"></span>
                            </span>
                          </span>
                        </a>
                      </div>

                      <div class="col-7 px-2 mb-3">
                        <a class="js-fancybox u-media-viewer" href="javascript:;"
                           data-src="../assets/img/1920x1080/img4.jpg"
                           data-fancybox="lightbox-gallery-hidden"
                           data-caption="Front in frames - image #02"
                           data-speed="700">
                          <img class="img-fluid rounded" src="../assets/img/450x450/img1.jpg" alt="Image Description">

                          <span class="u-media-viewer__container">
                            <span class="u-media-viewer__icon">
                              <span class="fa fa-plus u-media-viewer__icon-inner"></span>
                            </span>
                          </span>
                        </a>
                      </div>

                      <div class="col-5 offset-1 px-2 mb-3">
                        <a class="js-fancybox u-media-viewer" href="javascript:;"
                           data-src="../assets/img/1920x1920/img1.jpg"
                           data-fancybox="lightbox-gallery-hidden"
                           data-caption="Front in frames - image #03"
                           data-speed="700">
                          <img class="img-fluid rounded" src="../assets/img/280x310/img1.jpg" alt="Image Description">

                          <span class="u-media-viewer__container">
                            <span class="u-media-viewer__icon">
                              <span class="fa fa-plus u-media-viewer__icon-inner"></span>
                            </span>
                          </span>
                        </a>
                      </div>

                      <div class="col-5 px-2 mb-3">
                        <a class="js-fancybox u-media-viewer" href="javascript:;"
                           data-src="../assets/img/1920x1080/img3.jpg"
                           data-fancybox="lightbox-gallery-hidden"
                           data-caption="Front in frames - image #04"
                           data-speed="700">
                          <img class="img-fluid rounded" src="../assets/img/300x180/img1.jpg" alt="Image Description">

                          <span class="u-media-viewer__container">
                            <span class="u-media-viewer__icon">
                              <span class="fa fa-plus u-media-viewer__icon-inner"></span>
                            </span>
                          </span>
                        </a>
                      </div>
                    </div>

                    <figure class="w-100 u-content-centered-y z-index-minus-1">
                      <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" style="enable-background:new 0 0 1109.8 797.1;" xml:space="preserve">
                        <path class="u-fill-primary" opacity=".05" d="M105.1,267.1C35.5,331.5-3.5,423,0.3,517.7c5.8,145.3,110.7,314.2,588,273.1c753-64.7,481.3-358.3,440.4-398.3
                          c-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>
                </div>
              
            

CSS library:

            
              <link rel="stylesheet" href="assets/vendor/fancybox/jquery.fancybox.css">
            
          

JS library and initialization:

            
              <!-- JS Implementing Plugins -->
              <script src="assets/vendor/fancybox/jquery.fancybox.min.js"></script>

              <!-- JS Implementing Plugins -->
              <script src="assets/js/components/hs.fancybox.js"></script>

              <!-- JS Plugins Init. -->
              <script>
                $(document).on('ready', function () {
                  // initialization of popups
                  $.HSCore.components.HSPopup.init('.js-fancybox');
                });
              </script>
            
          

SVG icon banner #1

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
              
                <div class="position-relative u-gradient-half-warning-v1">
                  <div class="container position-relative z-index-2">
                    <div class="row">
                      <div class="col-lg-6">
                        <div class="d-flex align-items-center u-space-2 min-height-380 pr-lg-7">
                          <div class="d-block">
                            <h2 class="text-white">Have a project?</h2>
                            <p class="u-text-light mb-4">Hire us. Our top professionals are ready to help with your business.</p>
                            <a class="btn text-primary u-btn-white u-btn-wide transition-3d-hover" href="#">Hire Us</a>
                          </div>
                        </div>

                        <div class="w-50 position-absolute-bottom-right-0 mr-7">
                          <img src="../assets/svg/flat-icons/hire-us-flat-concept-illustration.svg" alt="SVG Illustration">
                        </div>
                      </div>

                      <div class="col-lg-6">
                        <div class="d-flex align-items-center u-space-2 min-height-380 pl-lg-7">
                          <div class="d-block">
                            <h2 class="text-white">Get in touch</h2>
                            <p class="u-text-light 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 u-btn-white u-btn-wide transition-3d-hover" href="#">Contact Us</a>
                          </div>
                        </div>

                        <div class="w-50 position-absolute-bottom-right-0">
                          <img src="../assets/svg/flat-icons/pushing-boundries-flat-concept-illustration.svg" alt="SVG Illustration">
                        </div>
                      </div>
                    </div>
                  </div>

                  <div class="col-lg-6 u-gradient-half-primary-v1 position-absolute-top-left-0 min-height-380"></div>
                </div>
              
            

SVG icon banner #2

SVG Illustration
            
              <div class="position-relative">
                <div class="u-gradient-half-primary-v3">
                  <div class="container u-space-2-bottom">
                    <div class="w-60 mx-auto">
                      <img src="../assets/svg/flat-icons/app-development-flat-concept-illustration.svg" alt="SVG Illustration">
                    </div>
                  </div>
                </div>

                <figure class="position-absolute-bottom-0">
                  <svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                       width="100%" height="140px" viewBox="20 -20 300 100" style="margin-bottom: -8px;" xml:space="preserve">
                    <path class="u-fill-white" opacity="0.4" d="M30.913,43.944c0,0,42.911-34.464,87.51-14.191c77.31,35.14,113.304-1.952,146.638-4.729
                c48.654-4.056,69.94,16.218,69.94,16.218v54.396H30.913V43.944z" />
                    <path class="u-fill-white" opacity="0.4" d="M-35.667,44.628c0,0,42.91-34.463,87.51-14.191c77.31,35.141,113.304-1.952,146.639-4.729
                c48.653-4.055,69.939,16.218,69.939,16.218v54.396H-35.667V44.628z" />
                    <path class="u-fill-white" opacity="0" d="M43.415,98.342c0,0,48.283-68.927,109.133-68.927c65.886,0,97.983,67.914,97.983,67.914v3.716
                H42.401L43.415,98.342z" />
                    <path class="u-fill-white" d="M-34.667,62.998c0,0,56-45.667,120.316-27.839C167.484,57.842,197,41.332,232.286,30.428
                c53.07-16.399,104.047,36.903,104.047,36.903l1.333,36.667l-372-2.954L-34.667,62.998z" />
                  </svg>
                </figure>
              </div>
            
          

SVG icon banner #3

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
            
              <div class="d-flex align-items-center u-bg-img-hero u-space-4 min-height-100vh--lg" style="background-image: url(../assets/svg/flat-icons/error-404-flat-concept-illustration.svg);">
                <div class="container">
                  <div class="w-lg-60 w-xl-50">
                    <div class="mb-5">
                      <h1 class="text-primary font-weight-normal">Page not <span class="font-weight-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>

                    <a class="btn btn-primary u-btn-primary u-btn-wide transition-3d-hover" href="#">Go Back</a>
                  </div>
                </div>
              </div>
            
          

SVG icon article #1

SVG Illustration

Using Front

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

Browse all article
SVG Illustration

Workspace administration

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

Browse all article
            
              <div class="row">
                <div class="col-lg-6 u-ver-divider u-ver-divider--none-lg mb-7 mb-lg-0">
                  <article class="text-center p-8">
                    <div class="w-lg-60 mx-auto mb-4">
                      <img src="../assets/svg/flat-icons/pushing-boundries-smaller-size-flat-concept-illustration.svg" alt="SVG Illustration">
                    </div>

                    <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 u-btn-primary--air u-btn-wide transition-3d-hover" href="#">Browse all article</a>
                  </article>
                </div>

                <div class="col-lg-6 mb-7 mb-lg-0">
                  <article class="text-center p-8">
                    <div class="w-lg-60 mx-auto mb-4">
                      <img src="../assets/svg/flat-icons/hire-us-flat-concept-illustration.svg" alt="SVG Illustration">
                    </div>

                    <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 u-btn-primary--air u-btn-wide transition-3d-hover" href="#">Browse all article</a>
                  </article>
                </div>
              </div>
            
          

SVG icon article #2

SVG Illustration

We're just tuning up a few things.

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

Check for Updates
              
                <div class="d-lg-flex align-items-lg-center u-space-4-top u-space-2-bottom u-space-0--lg min-height-100vh--lg mt-5">
                  <div class="container">
                    <div class="w-100 mx-auto mb-5">
                      <img src="../assets/svg/flat-icons/maintenance-flat-concept-illustration.svg" alt="SVG Illustration">
                    </div>

                    <div class="w-md-80 w-lg-50 text-center mx-auto">
                      <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>

                      <a class="btn btn-primary u-btn-primary transition-3d-hover" href="#">Check for Updates</a>
                    </div>
                  </div>

                  <figure class="w-100 u-content-centered z-index-minus-1">
                    <svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                         x="0px" y="0px" viewBox="0 0 1506.3 578.7" style="enable-background:new 0 0 1506.3 578.7;" xml:space="preserve">
                      <path class="u-fill-warning" d="M45,91.6L45,91.6c-1.2-1.2-1.2-3.1,0-4.3l9.1-9.1c1.2-1.2,3.1-1.2,4.3,0h0c1.2,1.2,1.2,3.1,0,4.3l-9.1,9.1
                        C48.2,92.8,46.2,92.8,45,91.6z"/>
                      <path class="u-fill-warning" d="M58.4,91.6L58.4,91.6c-1.2,1.2-3.1,1.2-4.3,0L45,82.5c-1.2-1.2-1.2-3.1,0-4.3h0c1.2-1.2,3.1-1.2,4.3,0l9.1,9.1
                        C59.6,88.5,59.6,90.4,58.4,91.6z"/>
                      <path class="u-fill-info" d="M1041.3,403.1l5.1,19.1c0.7,2.6,4,3.5,5.9,1.6l14-14c1.9-1.9,1-5.2-1.6-5.9l-19.1-5.1
                        C1043,398,1040.5,400.4,1041.3,403.1z"/>
                      <path class="u-fill-success" d="M380.6,577.8l-12.2-12.2c-1.2-1.2-1.2-3.1,0-4.3l12.2-12.2c1.2-1.2,3.1-1.2,4.3,0l12.2,12.2
                        c1.2,1.2,1.2,3.1,0,4.3l-12.2,12.2C383.8,579,381.8,579,380.6,577.8z"/>
                      <circle class="u-fill-danger" cx="1494.3" cy="353.5" r="12"/>
                      <path class="u-fill-success" d="M992,21.5h-15.9c-1.5,0-2.8-1.3-2.8-2.8V2.8c0-1.5,1.3-2.8,2.8-2.8H992c1.5,0,2.8,1.3,2.8,2.8v15.9
                        C994.8,20.2,993.5,21.5,992,21.5z"/>
                      <path class="u-fill-primary" d="M19.3,310.2l-17,4.6c-2.3,0.6-3.1,3.6-1.4,5.3l12.4,12.4c1.7,1.7,4.7,0.9,5.3-1.4l4.6-17
                        C23.8,311.7,21.7,309.6,19.3,310.2z"/>
                      <circle class="u-fill-none u-stroke-danger" stroke-width="3" stroke-miterlimit="10" cx="1236.8" cy="120" r="8.5"/>
                    </svg>
                  </figure>
                </div>
              
            

Profile info #1

Image Description

Natalie Curtis Pro

Position: Project Manager at Pixeel
Nationality: British

I am a project manager from England. This is where I sit down, grab a cup of coffee and dial in the details. Understanding the task at hand and ironing out the wrinkles is key. The time has come to bring those ideas and plans to life. This is where we really begin to visualize your napkin sketches and make them into beautiful pixels.

125
Reviews
Image Description
+3 Referrals
Image Description
Verified
              
                <!-- User Details -->
                <div class="media mb-3">
                  <div class="mr-3">
                    <img class="u-lg-avatar rounded-circle" src="../assets/img/160x160/img2.jpg" alt="Image Description">
                  </div>
                  <div class="media-body">
                    <h2 class="h4">Natalie Curtis <span class="badge badge-success ml-1">Pro</span></h2>

                    <!-- User Position Info -->
                    <div class="mb-2">
                      <span class="font-weight-medium">Position:</span>
                      <span class="text-secondary">Project Manager at Pixeel</span>
                    </div>
                    <div class="mb-2">
                      <span class="font-weight-medium">Nationality:</span>
                      <span class="text-secondary">British</span>
                    </div>
                    <!-- End User Position Info -->
                  </div>
                </div>
                <!-- End User Details -->

                <!-- Info -->
                <div class="mb-4">
                  <p>I am a project manager from England. This is where I sit down, grab a cup of coffee and dial in the details. Understanding the task at hand and ironing out the wrinkles is key. The time has come to bring those ideas and plans to life. This is where we really begin to visualize your napkin sketches and make them into beautiful pixels.</p>
                </div>
                <!-- End Info -->

                <!-- Collections -->
                <div class="d-sm-flex">
                  <a class="js-go-to media d-flex align-items-center mb-3 mb-sm-0 mr-5" href="javascript:;"
                     data-target="#reviews"
                     data-type="static">
                    <span class="bg-warning text-white font-weight-medium rounded py-2 px-3 mr-2">125</span>
                    <div class="media-body text-secondary">
                      Reviews
                    </div>
                  </a>
                  <div class="media align-items-center mb-3 mb-sm-0 mr-5">
                    <img class="mr-2" src="../assets/svg/flat-icons/referral-flat-concept-illustration.svg" alt="Image Description" style="width: 40px;">
                    <div class="media-body text-secondary">
                      +3 Referrals
                    </div>
                  </div>
                  <div class="media align-items-center mb-3 mb-sm-0 mr-5">
                    <img class="mr-2" src="../assets/svg/flat-icons/verified-user-flat-concept-illustration.svg" alt="Image Description" style="width: 40px;">
                    <div class="media-body text-secondary">
                      Verified
                    </div>
                  </div>
                </div>
                <!-- End Collections -->