Features

Component #1

Whatever work you do, use our design

After brainstorming about insights, get the power to create something real. Bring your ideas to life and share your vision with concrete elements. Make collaboration and communication easier with your team or your client.

Use our tools to explore your ideas and make your vision come true. Then share your work easily.

Start Now 
<!-- Features Section -->
<div class="container space-2">
  <div class="row justify-content-lg-between align-items-lg-center">
    <div class="col-lg-5 mb-9 mb-lg-0">
      <div class="mb-3">
        <h2 class="h1">Whatever work you do, use our design</h2>
      </div>

      <p>After brainstorming about insights, get the power to create something real. Bring your ideas to life and share your vision with concrete elements. Make collaboration and communication easier with your team or your client.</p>

      <p>Use our tools to explore your ideas and make your vision come true. Then share your work easily.</p>

      <div class="mt-4">
        <a class="btn btn-primary btn-wide transition-3d-hover" href="#">Start Now</a>
      </div>
    </div>

    <div class="col-lg-6 col-xl-5">
      <!-- SVG Element -->
      <div class="position-relative min-h-500rem mx-auto" style="max-width: 28rem;">
        <figure class="position-absolute top-0 right-0 z-index-2 mr-11">
          <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 450 450" width="165" height="165">
            <g>
              <defs>
                <path id="circleImgID2" d="M225,448.7L225,448.7C101.4,448.7,1.3,348.5,1.3,225l0,0C1.2,101.4,101.4,1.3,225,1.3l0,0
                  c123.6,0,223.7,100.2,223.7,223.7l0,0C448.7,348.6,348.5,448.7,225,448.7z"/>
              </defs>
              <clipPath id="circleImgID1">
                <use xlink:href="#circleImgID2"/>
              </clipPath>
              <g clip-path="url(#circleImgID1)">
                <image width="450" height="450" xlink:href="../../assets/img/450x450/img1.jpg" ></image>
              </g>
            </g>
          </svg>
        </figure>

        <figure class="position-absolute top-0 left-0">
          <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 335.2 335.2" width="120" height="120">
            <circle fill="none" stroke="#377DFF" stroke-width="75" cx="167.6" cy="167.6" r="130.1"/>
          </svg>
        </figure>

        <figure class="d-none d-sm-block position-absolute top-0 left-0 mt-11">
          <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 515 515" width="200" height="200">
            <g>
              <defs>
                <path id="circleImgID4" d="M260,515h-5C114.2,515,0,400.8,0,260v-5C0,114.2,114.2,0,255,0h5c140.8,0,255,114.2,255,255v5
                  C515,400.9,400.8,515,260,515z"/>
              </defs>
              <clipPath id="circleImgID3">
                <use xlink:href="#circleImgID4"/>
              </clipPath>
              <g clip-path="url(#circleImgID3)">
                <image width="515" height="515" xlink:href="../../assets/img/515x515/img1.jpg" transform="matrix(1 0 0 1 1.639390e-02 2.880859e-02)"></image>
              </g>
            </g>
          </svg>
        </figure>

        <figure class="position-absolute top-0 right-0" style="margin-top: 11rem; margin-right: 13rem;">
          <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 67 67" width="25" height="25">
            <circle fill="#00C9A7" cx="33.5" cy="33.5" r="33.5"/>
          </svg>
        </figure>

        <figure class="position-absolute top-0 right-0 mr-3" style="margin-top: 8rem;">
          <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 141 141" width="50" height="50">
            <circle fill="#FFC107" cx="70.5" cy="70.5" r="70.5"/>
          </svg>
        </figure>

        <figure class="position-absolute bottom-0 right-0">
          <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 770.4 770.4" width="280" height="280">
            <g>
              <defs>
                <path id="circleImgID6" d="M385.2,770.4L385.2,770.4c212.7,0,385.2-172.5,385.2-385.2l0,0C770.4,172.5,597.9,0,385.2,0l0,0
                  C172.5,0,0,172.5,0,385.2l0,0C0,597.9,172.4,770.4,385.2,770.4z"/>
              </defs>
              <clipPath id="circleImgID5">
                <use xlink:href="#circleImgID6"/>
              </clipPath>
              <g clip-path="url(#circleImgID5)">
                <image width="900" height="900" xlink:href="../../assets/img/900x900/img2.jpg" transform="matrix(1 0 0 1 -64.8123 -64.8055)"></image>
              </g>
            </g>
          </svg>
        </figure>
      </div>
      <!-- End SVG Element -->
    </div>
  </div>
</div>
<!-- End Features Section -->
Copy

Component #2

Build tools and full documention

Components, plugins, and build tools are all thoroughly documented with live examples and markup for easier use and customization.

> $ npm install Everything installed!
> $ gulp scss watching LiveReload started Opening localhost:3000
> $ that's it?! Yup, that's it.

Not comfortable diving that deep? No worries, you just use the compiled CSS and examples pages! Learn more

Get a License for $59 
<!-- Tools Section -->
<div class="position-relative gradient-y-gray">
  <div class="container space-2 space-bottom-sm-3">
    <!-- Title -->
    <div class="w-md-80 w-lg-50 text-center mx-md-auto mb-5 mb-md-9">
      <h2>Build tools and full documention</h2>
      <p>Components, plugins, and build tools are all thoroughly documented with live examples and markup for easier use and customization.</p>
    </div>
    <!-- End Title -->

    <div class="w-md-80 w-lg-50 mx-md-auto mb-5 mb-md-9">
      <!-- Code Sample -->
      <div class="card bg-navy mb-5">
        <div class="card-body text-monospace font-size-1 p-6">
          <div class="mb-6">
            <span class="d-block text-white-70">> $ npm install</span>
            <span class="d-block h4 text-success font-weight-normal">Everything installed!</span>
          </div>
          <div class="mb-6">
            <span class="d-block text-white-70">> $ gulp</span>
            <span class="d-block h4 text-success font-weight-normal">scss watching</span>
            <span class="d-block h4 text-success font-weight-normal">LiveReload started</span>
            <span class="d-block h4 text-success font-weight-normal">Opening localhost:3000</span>
          </div>
          <div class="mb-0">
            <span class="d-block text-white-70">> $ that's it?!</span>
            <span class="d-block h4 text-success font-weight-normal">Yup, that's it.</span>
          </div>
        </div>
      </div>
      <!-- End Code Sample -->

      <!-- Info -->
      <div class="text-center mb-7">
        <p>Not comfortable diving that deep? No worries, you just use the compiled CSS and examples pages! <a class="font-weight-bold" href="#">Learn more <span class="fas fa-angle-right ml-1"></span></a></p>
      </div>
      <!-- End Info -->

      <!-- Clients -->
      <div class="row justify-content-center">
        <div class="col-4 col-sm-3 my-2">
          <!-- Logo -->
          <figure>
            <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 226.3 88">
              <path fill="#bdc5d1" d="M70.1,76.7c0,6.3,5.1,11.4,11.4,11.4H147c6.3,0,11.4-5.1,11.4-11.4V11.2c0-6.3-5.1-11.4-11.4-11.4H81.4
                c-6.3,0-11.4,5.1-11.4,11.4V76.7L70.1,76.7z"/>
              <path fill="#fff" d="M106.7,38.9V26.4h11c1,0,2.1,0.1,3,0.3c1,0.2,1.8,0.5,2.6,0.9c0.7,0.4,1.3,1.1,1.8,1.9c0.4,0.8,0.7,1.8,0.7,3.1
                c0,2.2-0.7,3.9-2,4.9c-1.3,1-3.1,1.5-5.2,1.5L106.7,38.9L106.7,38.9z M94.9,17.2v53.4h25.9c2.4,0,4.7-0.3,7-0.9s4.3-1.5,6.1-2.8
                c1.8-1.2,3.2-2.9,4.2-4.8c1-2,1.6-4.3,1.6-7c0-3.3-0.8-6.2-2.4-8.6c-1.6-2.4-4.1-4-7.4-5c2.4-1.1,4.2-2.6,5.4-4.4
                c1.2-1.8,1.8-4,1.8-6.7c0-2.5-0.4-4.6-1.2-6.3c-0.8-1.7-2-3.1-3.5-4.1c-1.5-1-3.3-1.8-5.4-2.2c-2.1-0.4-4.4-0.7-7-0.7H94.9
                L94.9,17.2z M106.7,61.5V46.9h12.8c2.5,0,4.6,0.6,6.1,1.8c1.5,1.2,2.3,3.1,2.3,5.9c0,1.4-0.2,2.5-0.7,3.4s-1.1,1.6-1.9,2.1
                c-0.8,0.5-1.7,0.9-2.8,1.1c-1,0.2-2.1,0.3-3.3,0.3H106.7L106.7,61.5z"/>
            </svg>
          </figure>
          <!-- End Logo -->
        </div>

        <div class="col-4 col-sm-3 my-2">
          <!-- Logo -->
          <figure>
            <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 226.3 88">
              <path fill="#bdc5d1" d="M155.1,50.7c-4.1,0-7.6,1-10.6,2.4c-1.1-2.2-2.2-4.1-2.4-5.5C142,46,141.7,45,142,43c0.3-2,1.4-4.7,1.4-5
                c0-0.2-0.3-1.2-2.6-1.2c-2.3,0-4.4,0.4-4.6,1.1c-0.2,0.6-0.7,2-1,3.5c-0.4,2.1-4.7,9.7-7.1,13.7c-0.8-1.6-1.5-2.9-1.6-4
                c-0.2-1.6-0.5-2.6-0.2-4.6c0.3-2,1.4-4.7,1.4-5c0-0.2-0.3-1.2-2.6-1.2c-2.3,0-4.4,0.4-4.6,1.1c-0.2,0.6-0.5,2.1-1,3.5
                c-0.5,1.4-6.2,14.1-7.7,17.4c-0.8,1.7-1.4,3-1.9,3.9c0,0,0,0.1-0.1,0.2c-0.4,0.8-0.6,1.2-0.6,1.2s0,0,0,0c-0.3,0.6-0.7,1.1-0.8,1.1
                c-0.1,0-0.4-1.5,0-3.6c0.9-4.4,2.9-11.3,2.9-11.5c0-0.1,0.4-1.3-1.3-1.9c-1.7-0.6-2.3,0.4-2.4,0.4c-0.1,0-0.3,0.4-0.3,0.4
                s1.9-7.7-3.5-7.7c-3.4,0-8,3.7-10.3,7c-1.4,0.8-4.5,2.5-7.8,4.3c-1.3,0.7-2.6,1.4-3.8,2.1c-0.1-0.1-0.2-0.2-0.3-0.3
                C75,50.8,63,45.8,63.5,36.5c0.2-3.4,1.4-12.3,23.1-23.2c17.9-8.8,32.2-6.4,34.7-1c3.5,7.8-7.6,22.1-26.2,24.2
                c-7.1,0.8-10.8-1.9-11.7-3c-1-1.1-1.1-1.1-1.5-0.9c-0.6,0.3-0.2,1.3,0,1.8c0.6,1.4,2.8,4,6.7,5.3c3.4,1.1,11.7,1.7,21.7-2.2
                c11.2-4.3,20-16.4,17.4-26.5C125.2,0.8,108.1-2.5,92,3.2C82.4,6.6,72,12,64.6,18.9c-8.9,8.3-10.3,15.5-9.7,18.5
                c2.1,10.7,16.9,17.7,22.8,22.9c-0.3,0.2-0.6,0.3-0.8,0.4c-3,1.5-14.2,7.4-17.1,13.6c-3.2,7.1,0.5,12.1,3,12.8
                c7.6,2.1,15.4-1.7,19.6-7.9c4.2-6.3,3.7-14.4,1.7-18.1c0,0,0-0.1-0.1-0.1c0.8-0.4,1.6-0.9,2.3-1.4c1.5-0.9,3-1.7,4.3-2.4
                c-0.7,2-1.3,4.3-1.5,7.8c-0.3,4,1.3,9.2,3.5,11.2c1,0.9,2.1,0.9,2.8,0.9c2.5,0,3.6-2.1,4.9-4.6c1.5-3,2.9-6.5,2.9-6.5
                s-1.7,9.5,3,9.5c1.7,0,3.4-2.2,4.2-3.3c0,0,0,0,0,0s0-0.1,0.1-0.2c0.2-0.3,0.3-0.4,0.3-0.4s0,0,0,0c0.7-1.2,2.2-3.9,4.5-8.4
                c2.9-5.8,5.8-13,5.8-13s0.3,1.8,1.1,4.7c0.5,1.7,1.6,3.6,2.4,5.5c-0.7,1-1.1,1.5-1.1,1.5s0,0,0,0c-0.6,0.7-1.1,1.5-1.8,2.3
                c-2.3,2.8-5.1,5.9-5.5,6.9c-0.4,1.1-0.3,1.9,0.5,2.5c0.6,0.5,1.7,0.5,2.9,0.5c2.1-0.1,3.6-0.7,4.3-1c1.1-0.4,2.4-1,3.7-1.9
                c2.3-1.7,3.7-4.1,3.5-7.3c-0.1-1.7-0.6-3.5-1.3-5.1c0.2-0.3,0.4-0.6,0.6-0.9c3.6-5.3,6.4-11,6.4-11s0.3,1.8,1.1,4.7
                c0.4,1.5,1.3,3.1,2.1,4.7c-3.4,2.7-5.5,5.9-6.2,8c-1.3,3.9-0.3,5.6,1.7,6c0.9,0.2,2.2-0.2,3.1-0.6c1.2-0.4,2.6-1,3.9-2
                c2.3-1.7,4.5-4,4.3-7.2c-0.1-1.4-0.4-2.9-1-4.3c2.9-1.2,6.6-1.9,11.3-1.3c10.1,1.2,12.1,7.5,11.8,10.2c-0.4,2.7-2.5,4.1-3.2,4.6
                c-0.7,0.4-0.9,0.6-0.9,0.9c0.1,0.5,0.4,0.4,1,0.4c0.8-0.1,5.3-2.2,5.5-7C171.6,57.4,165.7,50.6,155.1,50.7z M76.9,77
                c-3.4,3.7-8,5-10.1,3.9c-2.2-1.3-1.3-6.7,2.8-10.5c2.5-2.4,5.7-4.6,7.9-5.9c0.5-0.3,1.2-0.7,2.1-1.3c0.1-0.1,0.2-0.1,0.2-0.1
                c0.2-0.1,0.3-0.2,0.5-0.3C81.9,68.3,80.5,73.2,76.9,77z M101.4,60.4c-1.2,2.9-3.6,10.2-5.1,9.8c-1.3-0.3-2.1-5.9-0.3-11.3
                c0.9-2.7,2.9-6,4-7.3c1.8-2,3.9-2.7,4.3-1.9C105,50.7,102.1,58.6,101.4,60.4z M121.6,70c-0.5,0.3-1,0.4-1.2,0.3
                c-0.1-0.1,0.2-0.4,0.2-0.4s2.5-2.7,3.5-4c0.6-0.7,1.3-1.6,2-2.5c0,0.1,0,0.2,0,0.3C126.2,66.9,123,69.1,121.6,70z M137.2,66.5
                c-0.4-0.3-0.3-1.1,0.9-3.8c0.5-1,1.6-2.8,3.5-4.5c0.2,0.7,0.4,1.3,0.3,2C141.9,64.3,139,65.8,137.2,66.5z"/>
            </svg>
          </figure>
          <!-- End Logo -->
        </div>

        <div class="col-4 col-sm-3 my-2">
          <!-- Logo -->
          <figure>
            <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 226.3 88">
              <path fill="#bdc5d1" d="M78.6,45.8c-0.1,0.2-0.3,0.6-0.6,1.4c-0.3,0.8-0.6,1.8-1,3c-0.4,1.2-0.8,2.5-1.2,4c-0.4,1.5-0.9,3-1.4,4.5
                c-0.5,1.5-0.9,3.1-1.3,4.5c-0.4,1.5-0.8,2.8-1.2,4c-0.3,1.2-0.6,2.2-0.9,3c-0.2,0.8-0.4,1.3-0.4,1.4c-0.1,0.5-0.3,1-0.6,1.6
                c-0.3,0.6-0.6,1.1-1,1.7c-0.4,0.5-0.8,1-1.3,1.3s-0.9,0.5-1.4,0.5c-0.8,0-1.4-0.3-1.8-0.8c-0.4-0.5-0.6-1.5-0.6-3v-0.6
                c0-0.2,0-0.4,0-0.7c0-0.5,0.2-1.4,0.6-2.7c0.4-1.3,0.8-2.8,1.3-4.5c0.5-1.7,1-3.4,1.6-5.2c0.6-1.8,1.1-3.4,1.5-4.8
                c-1.3,1.5-2.8,3-4.4,4.5c-1.6,1.5-3.2,2.8-4.8,4c-1.6,1.2-3.3,2.2-5,2.9c-1.7,0.7-3.3,1.1-4.8,1.1c-1.8,0-3.3-0.4-4.6-1.2
                c-1.3-0.8-2.3-1.8-3.2-3.1s-1.5-2.7-1.9-4.3C40.2,57,40,55.4,40,53.8v-0.6c0-0.2,0-0.4,0-0.5c0.2-2.9,0.6-5.8,1.2-8.9
                c0.7-3,1.5-6,2.6-9c1.1-3,2.3-5.9,3.8-8.8c1.4-2.9,3-5.6,4.7-8.1c1.7-2.5,3.5-4.9,5.4-7c1.9-2.1,3.8-4,5.8-5.5c2-1.5,4-2.7,6-3.6
                c2-0.9,4.1-1.3,6-1.3c2.3,0,4.5,0.6,6.7,1.9c2.1,1.3,4.2,3.3,6,6.1c0.4,0.6,0.7,1.3,0.8,1.9s0.2,1.3,0.2,1.8c0,1.3-0.3,2.4-1,3.2
                c-0.6,0.8-1.4,1.2-2.3,1.2c-0.8,0-1.6-0.4-2.3-1.3c-0.7-0.9-1.5-2.1-2.3-3.7c-0.8-1.4-1.7-2.5-2.7-3.1c-1-0.6-2-1-3.2-1
                c-1.8,0-3.7,0.7-5.7,2.2s-4,3.4-6,5.8c-2,2.4-3.9,5.2-5.7,8.3c-1.8,3.1-3.4,6.3-4.8,9.5c-1.4,3.2-2.5,6.5-3.3,9.6
                c-0.8,3.2-1.2,6-1.2,8.5c0,0.8,0.1,1.7,0.2,2.6s0.3,1.7,0.6,2.4c0.3,0.7,0.7,1.3,1.3,1.8c0.5,0.5,1.2,0.7,2.1,0.7
                c0.9,0,2-0.3,3.2-0.9c1.2-0.6,2.4-1.5,3.7-2.5c1.3-1,2.6-2.2,3.9-3.5c1.3-1.3,2.5-2.6,3.6-3.9c1.1-1.3,2.1-2.6,3-3.8
                c0.9-1.2,1.5-2.3,1.9-3.2l3.5-10.6c0.4-1.1,1-1.9,1.7-2.4c0.7-0.5,1.4-0.7,2.1-0.7c0.4,0,0.7,0.1,1.1,0.2c0.4,0.1,0.7,0.3,0.9,0.6
                c0.3,0.3,0.5,0.6,0.7,1s0.2,0.9,0.2,1.4c0,1.4-0.1,2.8-0.4,4c-0.3,1.3-0.6,2.5-1,3.7c-0.4,1.2-0.8,2.4-1.3,3.6
                C79.5,43.2,79.1,44.4,78.6,45.8L78.6,45.8z M126.5,54.6c-1.1,1.5-2.4,3-3.9,4.4c-1.5,1.4-3,2.7-4.6,3.8s-3.1,2-4.6,2.7
                c-1.5,0.7-2.9,1-4.1,1s-2.2-0.4-3-1.2c-0.8-0.8-1.1-2.2-1.1-4.1c0-1.4,0.2-3,0.6-4.8c-0.7,1.2-1.5,2.4-2.5,3.5
                c-1,1.2-2.1,2.3-3.4,3.3c-1.3,1-2.7,1.8-4.2,2.4c-1.6,0.6-3.3,0.9-5.1,0.9c-0.8,0-1.6-0.1-2.4-0.3c-0.8-0.2-1.4-0.6-2-1.1
                s-1-1.2-1.4-2c-0.4-0.9-0.5-1.9-0.5-3.2c0,0,0.1-0.5,0.2-1.4c0.1-0.9,0.4-2.3,1-4.2c0.5-1.9,1.4-4.4,2.5-7.4c1.1-3,2.7-6.7,4.8-11
                c0.5-1.1,1.1-2,1.8-2.4c0.7-0.5,1.4-0.7,2.3-0.7c0.4,0,0.7,0.1,1.1,0.2c0.4,0.1,0.7,0.3,1.1,0.5c0.3,0.2,0.6,0.5,0.8,0.9
                c0.2,0.3,0.3,0.7,0.3,1.2c0,0.3,0,0.6-0.1,0.9c-0.1,0.5-0.4,1.2-0.8,2C98.7,39,98.2,40,97.6,41c-0.6,1.1-1.1,2.2-1.8,3.4
                c-0.6,1.2-1.2,2.5-1.7,3.8c-0.5,1.3-1,2.7-1.4,4c-0.4,1.4-0.6,2.7-0.6,4c0,0.5,0.1,1,0.4,1.5c0.3,0.4,0.7,0.7,1.3,0.7
                c1.6,0,3.2-0.5,4.7-1.6c1.5-1.1,2.9-2.4,4.1-4c1.3-1.6,2.4-3.3,3.4-5.2c1-1.8,1.9-3.5,2.6-5.1c0.5-1,0.9-2.1,1.3-3.3
                s0.8-2.2,1.2-3.2c0.4-1,0.9-1.8,1.5-2.5c0.6-0.7,1.3-1,2.1-1c0.9,0,1.6,0.3,2.2,1s0.8,1.5,0.8,2.5c0,0.5-0.2,1.3-0.5,2.2
                s-0.8,2-1.3,3.2c-0.5,1.2-1.1,2.5-1.7,3.9c-0.6,1.4-1.2,2.8-1.7,4.2c-0.5,1.4-0.9,2.8-1.3,4.2c-0.3,1.4-0.5,2.6-0.5,3.8
                c0,1.1,0.6,1.6,1.7,1.6c0.8,0,1.8-0.3,2.9-0.8c1.2-0.5,2.4-1.3,3.7-2.3c1.3-1,2.6-2.1,3.8-3.4c1.3-1.3,2.4-2.7,3.4-4.3L126.5,54.6
                L126.5,54.6z"/>
              <path fill="#bdc5d1" d="M127.6,52.3c-0.3,0.7-0.6,1.5-0.8,2.4c-0.3,0.9-0.4,1.7-0.4,2.4c0,0.4,0.1,0.8,0.2,1.1s0.4,0.4,0.9,0.4
                c0.5,0,1.2-0.2,2-0.6c0.8-0.4,1.7-0.9,2.6-1.5c0.9-0.6,1.9-1.3,2.9-2.1c1-0.8,2-1.6,3-2.5c1-0.9,1.9-1.7,2.8-2.6
                c0.9-0.9,1.7-1.6,2.4-2.4c0.2-0.2,0.4-0.4,0.7-0.4c0.3-0.1,0.5-0.1,0.7-0.1c0.5,0,0.9,0.2,1.3,0.6c0.3,0.4,0.5,1,0.5,1.7
                c0,0.6-0.2,1.3-0.5,2.1c-0.4,0.8-1,1.5-1.9,2.3c-1.6,1.8-3.2,3.4-4.9,5c-1.6,1.6-3.3,3-4.9,4.2c-1.6,1.2-3.2,2.2-4.9,2.9
                c-1.6,0.7-3.2,1.1-4.7,1.1c-1,0-1.9-0.2-2.6-0.5c-0.7-0.3-1.3-0.8-1.7-1.3c-0.4-0.6-0.7-1.2-0.9-2c-0.2-0.8-0.3-1.6-0.3-2.5
                c0-1.5,0.2-3,0.6-4.5c0.4-1.5,0.8-3,1.3-4.2c0.9-2.3,1.8-4.7,2.7-7c0.9-2.3,1.7-4.4,2.5-6.3l11.5-29c0.5-1.2,1.1-2,1.8-2.5
                c0.8-0.5,1.5-0.7,2.3-0.7s1.5,0.3,2.1,0.8c0.6,0.5,1,1.3,1,2.5c0,0.5-0.1,1.1-0.3,1.7c-0.2,0.6-0.5,1.2-0.8,1.9
                c-0.6,1.4-1.4,3.1-2.3,5.2c-0.9,2-1.8,4.3-2.8,6.6s-2,4.9-3.1,7.5c-1,2.6-2.1,5.1-3.1,7.6c-1,2.5-1.9,4.8-2.8,7
                C129,48.8,128.3,50.7,127.6,52.3L127.6,52.3z"/>
              <path fill="#bdc5d1" d="M181.4,44.2c0.4-0.2,0.7-0.4,1-0.6c0.3-0.2,0.6-0.2,0.9-0.2c0.6,0,1,0.2,1.3,0.7c0.3,0.5,0.4,1.1,0.4,1.8
                c0,0.8-0.2,1.6-0.5,2.4c-0.3,0.8-0.9,1.5-1.5,2c-2.7,2.4-5.1,4.6-7.2,6.6c-2.1,2-4.1,3.7-6,5.1c-1.9,1.4-3.7,2.5-5.5,3.3
                c-1.8,0.8-3.7,1.2-5.8,1.2c-1.9,0-3.4-0.4-4.5-1.3c-1-0.8-1.6-2-1.6-3.5v-0.3c0-0.1,0-0.2,0-0.4c0.1-0.9,0.5-1.9,1.2-3.1
                c0.7-1.2,1.5-2.4,2.5-3.6s2-2.5,3.1-3.8c1.1-1.3,2.1-2.5,3-3.7c0.9-1.2,1.7-2.2,2.3-3.2c0.6-1,0.9-1.7,0.9-2.3
                c0-0.4-0.1-0.6-0.4-0.9c-0.3-0.2-0.7-0.3-1.3-0.3c-1,0-2.1,0.3-3.1,0.8s-2.1,1.2-3.2,2.1c-1,0.9-2.1,1.9-3.1,3s-1.9,2.3-2.8,3.5
                c-0.9,1.2-1.7,2.5-2.4,3.7c-0.7,1.2-1.3,2.4-1.8,3.4c-0.2,0.3-0.4,0.8-0.6,1.4c-0.3,0.6-0.6,1.3-0.9,2c-0.3,0.7-0.7,1.5-1,2.3
                c-0.4,0.8-0.7,1.5-1,2.2c-0.3,0.7-0.6,1.3-0.8,1.9c-0.2,0.6-0.4,0.9-0.5,1.1c-0.1,0.3-0.3,0.8-0.6,1.5s-0.6,1.6-1,2.6
                c-0.4,1-0.8,2.1-1.2,3.2c-0.4,1.1-0.8,2.2-1.2,3.1c-0.4,1-0.7,1.9-1,2.6c-0.3,0.7-0.5,1.3-0.5,1.5c-0.3,0.8-0.6,1.5-0.9,2.2
                c-0.3,0.7-0.7,1.3-1.2,1.8c-0.4,0.5-0.9,0.9-1.5,1.3c-0.6,0.3-1.2,0.5-1.9,0.5c-0.9,0-1.7-0.2-2.3-0.6c-0.6-0.4-0.9-1.3-0.9-2.5
                c0-0.6,0.1-1.2,0.2-1.8c0.2-0.6,0.3-1.3,0.6-1.9c0.2-0.6,0.5-1.2,0.7-1.8c0.2-0.6,0.5-1.1,0.7-1.7c1.4-3,2.8-6,4.2-9
                c1.4-3,2.8-6,4.1-8.9c1.3-2.9,2.5-5.8,3.6-8.7c1.1-2.8,2-5.6,2.8-8.2c0.2-0.5,0.5-1.3,0.8-2.3c0.4-1,0.8-2,1.2-2.9
                c0.5-1,1-1.8,1.5-2.5c0.6-0.7,1.2-1.1,1.8-1.1c1,0,1.7,0.2,2.2,0.7c0.5,0.5,0.7,1.1,0.7,2c0,0.2,0,0.5-0.1,0.9S153,38.6,153,39
                c-0.1,0.4-0.2,0.8-0.2,1.2c-0.1,0.4-0.2,0.7-0.2,0.9c0.9-1,1.9-2,3-3c1.1-1,2.2-1.9,3.4-2.7c1.2-0.8,2.3-1.5,3.6-2
                c1.2-0.5,2.4-0.8,3.6-0.8c0.8,0,1.7,0.1,2.5,0.4c0.8,0.2,1.6,0.6,2.2,1.1c0.6,0.5,1.2,1,1.6,1.8c0.4,0.7,0.6,1.5,0.6,2.4
                c0,1.2-0.3,2.5-0.9,3.9c-0.6,1.4-1.4,2.8-2.3,4.2c-0.9,1.4-1.9,2.8-3,4.1c-1.1,1.3-2.1,2.5-3.1,3.6c-0.9,1.1-1.7,2-2.4,2.8
                c-0.6,0.8-1,1.3-1,1.5c0,0.4,0.1,0.6,0.3,0.9c0.2,0.2,0.6,0.3,1.1,0.3c0.4,0,1.1-0.2,1.9-0.7c0.8-0.5,2-1.3,3.5-2.5s3.4-2.8,5.7-4.8
                C175.1,49.7,178,47.2,181.4,44.2L181.4,44.2z"/>
            </svg>
          </figure>
          <!-- End Logo -->
        </div>

        <div class="col-4 col-sm-3 my-2">
          <!-- Logo -->
          <figure>
            <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 226.3 88">
              <path fill="#bdc5d1" d="M16.3,6.3h193.6v64.5h-96.8v10.7H70.2V70.9H16.3V6.3z M27.1,60.1h21.5V27.9h10.7v32.3h10.7V17.1H27.1V60.1z
                 M80.9,17.1v53.8h21.5V60.1h21.5v-43H80.9z M102.4,27.9h10.7v21.5h-10.7V27.9z M134.7,17.1v43h21.5V27.9h10.7v32.3h10.7V27.9h10.7
                v32.3h10.7V17.1H134.7z"/>
              <polygon fill="none" points="31.8,59.2 52.1,59.2 52.1,28.8 62.3,28.8 62.3,59.2 72.5,59.2 72.5,18.5 31.8,18.5 "/>
              <path fill="none" d="M82.7,18.5v50.8H103V59.2h20.3V18.5H82.7z M113.1,49.1H103V28.8h10.1V49.1z"/>
              <polygon fill="none" points="133.5,18.5 133.5,59.2 153.8,59.2 153.8,28.8 164,28.8 164,59.2 174.1,59.2 174.1,28.8 184.3,28.8184.3,59.2 194.4,59.2 194.4,18.5 "/>
            </svg>
          </figure>
          <!-- End Logo -->
        </div>
      </div>
      <!-- End Clients -->
    </div>

    <div class="text-center">
      <a class="btn btn-primary transition-3d-hover px-lg-7" href="https://themes.getbootstrap.com/product/front-multipurpose-responsive-template/" target="_blank">Get a License for $59</a>
    </div>
  </div>

  <!-- SVG Bottom Shape -->
  <figure class="position-absolute bottom-0 right-0 left-0">
    <svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 1920 100.1">
      <path fill="#fff" d="M0,0c0,0,934.4,93.4,1920,0v100.1H0L0,0z"/>
    </svg>
  </figure>
  <!-- End SVG Bottom Shape -->
</div>
<!-- End Tools Section -->
Copy

Component #3

How we work

Bring your ideas to life and share your vision with concrete elements

Easy & fast designing
Powerful features
Advanced HTML/CSS editing
React-Native Development
User Experience Design
all our services
SVG

We tackle the challenges start-ups face

Besides working with start-up enterprises as a partner for digitalization, we have built enterprise products for common pain points that we have encountered in various products and projects.

Image Description 
<!-- Features Section -->
<div class="overflow-hidden">
  <div class="container space-2 space-lg-3">
    <!-- Title -->
    <div class="w-md-80 w-lg-50 text-center mx-md-auto mb-5 mb-md-9">
      <span class="d-block small font-weight-bold text-cap mb-2">How we work</span>
      <h2>Bring your ideas to life and share your vision with concrete elements</h2>
    </div>
    <!-- End Title -->

    <div class="w-md-80 mx-md-auto">
      <div class="row justify-content-lg-center align-items-md-center">
        <div class="col-md-5 mb-7 mb-md-0">
          <!-- Features -->
          <div class="media mb-4">
            <span class="icon icon-xs icon-soft-primary icon-circle mr-3">
              <i class="fas fa-check"></i>
            </span>
            <div class="media-body text-dark">
              Easy & fast designing
            </div>
          </div>
          <div class="media mb-4">
            <span class="icon icon-xs icon-soft-primary icon-circle mr-3">
              <i class="fas fa-check"></i>
            </span>
            <div class="media-body text-dark">
              Powerful features
            </div>
          </div>
          <div class="media mb-4">
            <span class="icon icon-xs icon-soft-primary icon-circle mr-3">
              <i class="fas fa-check"></i>
            </span>
            <div class="media-body text-dark">
              Advanced HTML/CSS editing
            </div>
          </div>
          <div class="media mb-4">
            <span class="icon icon-xs icon-soft-primary icon-circle mr-3">
              <i class="fas fa-check"></i>
            </span>
            <div class="media-body text-dark">
              React-Native Development
            </div>
          </div>
          <div class="media mb-4">
            <span class="icon icon-xs icon-soft-primary icon-circle mr-3">
              <i class="fas fa-check"></i>
            </span>
            <div class="media-body text-dark">
              User Experience Design
            </div>
          </div>
          <a class="media" href="#">
            <span class="icon icon-xs icon-soft-primary icon-circle mr-3">
              <i class="fas fa-ellipsis-h"></i>
            </span>
            <div class="media-body">
              all our services
            </div>
          </a>
          <!-- End Features -->
        </div>

        <div class="col-md-7 col-lg-5">
          <div class="position-relative">
            <!-- Card -->
            <div class="card">
              <div class="card-body">
                <figure class="w-100 max-w-6rem mb-4">
                  <img class="img-fluid" src="../../assets/svg/icons/icon-2.svg" alt="SVG">
                </figure>
                <h3>We tackle the challenges start-ups face</h3>
                <p>Besides working with start-up enterprises as a partner for digitalization, we have built enterprise products for common pain points that we have encountered in various products and projects.</p>
              </div>
            </div>
            <!-- End Card -->

            <!-- SVG Elements -->
            <figure class="max-w-19rem w-100 position-absolute bottom-0 right-0 z-index-n1">
              <div class="mb-n7 mr-n7">
                <img class="img-fluid" src="../../assets/svg/components/dots-2.svg" alt="Image Description">
              </div>
            </figure>
            <!-- End SVG Elements -->
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- End Features Section -->
Copy

Component #4

All-in-one

Logo Logo Logo

Front is a place where conversations happen, decisions are made, and information is always at your fingertips.

Style your workflow how you want to fit your brand

Front is a collaboration hub for work, no matter what work you do. It's a place where conversations happen, decisions are made, and information is always at your fingertips. With Front, your team is better connected.

<!-- Features Section -->
<div class="container space-2">
  <div class="row">
    <div class="col-lg-4 mb-7 mb-lg-0">
      <div class="mb-4">
        <h2 class="h1">All-in-one</h2>

        <img class="img-fluid mr-3" src="../../assets/svg/clients-logo/slack-logo-original.svg" alt="Logo" width="24" height="24">
        <img class="img-fluid mr-3" src="../../assets/svg/clients-logo/jira-logo-original.svg" alt="Logo" width="24" height="24">
        <img class="img-fluid mr-3" src="../../assets/svg/clients-logo/gitlab-logo-original.svg" alt="Logo" width="24" height="24">
      </div>

      <p>Front is a place where conversations happen, decisions are made, and information is always at your fingertips.</p>
    </div>
  </div>

  <div class="mt-lg-n11 mb-7 mb-lg-0">
    <!-- SVG Illustration -->
    <figure class="ie-device-and-mobile">
      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 2058.5 1182.2" xml:space="preserve">
        <path fill="none" stroke="#bdc5d1" stroke-width="5.4276" stroke-miterlimit="10" stroke-dasharray="8.5629" d="M212.3,502.7c0.9-1.6,1.8-3.2,2.7-4.7"/>
        <path fill="none" stroke="#bdc5d1" stroke-width="5.4276" stroke-miterlimit="10" stroke-dasharray="8.5629" d="M220.8,488.8c1.9-2.8,3.8-5.5,5.7-8.3c13-18.3,27.7-35,43.4-49.8c22.5-21.3,47.4-38.9,73.8-52.2
          c33.5-16.8,69.3-26.4,105.4-29.2c46.6-3.6,93.4,4.1,138.3,19c44.5,14.8,84.6,43.6,128.8,59C767,445,821,448.1,872.8,434.9
          c6.4-1.6,12.8-3.5,19.1-5.6"/>
        <path fill="none" stroke="#bdc5d1" stroke-width="5.4276" stroke-miterlimit="10" stroke-dasharray="8.5629" d="M897.1,427.4c1.7-0.6,3.4-1.2,5.1-1.9"/>
        <polyline fill="none" stroke="#bdc5d1" stroke-width="4.5" stroke-miterlimit="10" stroke-dasharray="7" points="885.9,410.4 918.5,419.1 896.8,440.8 "/>
        <g>
          <path fill="#fff" d="M1916.1,696.8H992.9c-17.4,0-31.7-14.3-31.7-31.7V31.7c0-17.4,14.3-31.7,31.7-31.7h923.3
            c17.4,0,31.7,14.3,31.7,31.7v633.6C1947.8,682.6,1933.5,696.8,1916.1,696.8z"/>
          <circle fill="#F7F7F7" cx="1452.8" cy="28.2" r="3.6"/>
          <path fill="#fff" d="M2055.1,677.7H854.4c-1.8,0-3.4-1.6-3.4-3.4l0,0c0-1.8,1.6-3.4,3.4-3.4h1200.7c1.8,0,3.4,1.6,3.4,3.4l0,0
            C2058.5,676.2,2057.1,677.7,2055.1,677.7z"/>
          <path fill="#EFEFEF" d="M1454.8,679.9l-603.9-2.2c0,0,29.1,13.7,142.4,19.1h459.5h3.7h459.6c113.3-5.4,142.4-19.1,142.4-19.1
            L1454.8,679.9z"/>

            <linearGradient id="devices1ID_1" gradientUnits="userSpaceOnUse" x1="1339.1" y1="546.1826" x2="1570.1" y2="546.1826" gradientTransform="matrix(1 0 0 1 0 129.1174)">
            <stop  offset="5.908129e-07" style="stop-color:#F0F1F2"/>
            <stop  offset="5.235744e-02" style="stop-color:#F6F7F8"/>
            <stop  offset="0.1708" style="stop-color:#FDFDFD"/>
            <stop  offset="0.5" style="stop-color:#FFFFFF"/>
            <stop  offset="0.8292" style="stop-color:#FDFDFD"/>
            <stop  offset="0.9476" style="stop-color:#F6F7F8"/>
            <stop  offset="1" style="stop-color:#F0F1F2"/>
          </linearGradient>
          <path fill="url(#devices1ID_1)" d="M1565.7,679.5h-222.4c-2.3,0-4.2-1.9-4.2-4.2v-4.2h231v4.2C1570.1,677.6,1568.1,679.5,1565.7,679.5z"/>
          <g>
            <defs>
              <rect id="devices1ID_2" x="998" y="45.3" width="909.6" height="567.7"/>
            </defs>
            <clipPath id="devices1ID_3">
              <use xlink:href="#devices1ID_2"/>
            </clipPath>
            <g clip-path="url(#devices1ID_3)">
              <image id="SVGDevices1LaptopImg" width="1618" height="1010" xlink:href="../../assets/img/1618x1010/img1.jpg"  transform="matrix(0.5622 0 0 0.5622 998.0432 45.2877)"></image>
            </g>
            <g>
              <rect id="laptopID2" x="998" y="45.3" fill="none" stroke="#e7eaf3" stroke-width="1.2" stroke-miterlimit="10" width="909.6" height="567.7"/>
            </g>
          </g>
        </g>
        <path fill="#e7eaf3" d="M303.1,849.1c-4,2.2-38.9,60.2-36.8,107.7c5.4-1.5,18.3-8.3,18.3-8.3l5.9-3.5l3.7-20.3l4.8-23l9-28.8l10.8-21
          l8.4-12l-7.8,2.4L303.1,849.1z"/>
        <path fill="#e7eaf3" d="M402.5,938.6c0,0.3,0,0.7,0,1.3c0.4,13.4,4.4,92.4-50.4,124.7c24.6,27.6,64.8,3,64.8,3l5.4-6v-94.2l-1.2-2.4
          l-6.6-24l-8.4,0.6L402.5,938.6z"/>
        <path fill="#377dff" d="M373.2,1150.2l-44.1-61c0,0-28.8-26.1-40.5-34.9c-0.1,9,0.5,73.5,3.2,95.9H373.2z"/>
        <path fill="#377dff" d="M414.1,1140.4h8.2V1060c-20.7,6.6-120.8,7.2-133.6-5.8c0,1,19.2,53.2,53.8,93.5h71.6V1140.4z"/>
        <path fill="none" stroke="#1e2022" opacity=".1" d="M414.1,1140.4h8.2V1060c-20.7,6.6-120.8,7.2-133.6-5.8c0,1,19.2,53.2,53.8,93.5h71.6V1140.4z"/>
        <path fill="none" stroke="#1e2022" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" d="M266.1,898.1c-2.2,2.4-2.2,7-2.2,7c-2.7-8.1-61.6-154.6-61.6-154.6s-12.2,5.2,1.9,32.9
          c-4.5,2.7-17.2,12.8-12,29.1c3.9,12.3,12.6,16.5,18,16.5c-0.9,9.2,18.7,103,21.3,107.5c6,10.6,17.6,22.2,24.4,22.5
          c7.8,0.4,23.7-6.8,34.6-13.7"/>
        <path fill="none" stroke="#1e2022" stroke-width="1.5" stroke-linecap="round" stroke-miterlimit="10" d="M326.7,840c-29.6,5.5-67.2,40.4-66.3,47.9c0.9,7.1,19.4,27.6,33.4,37.3"/>
        <path fill="none" stroke="#1e2022" stroke-width="1.5" stroke-linecap="round" stroke-miterlimit="10" d="M345.3,823.5c-63.6,35.9-64.8,219.5-56.6,230.8c8,11,103.1,13.9,133.6,6.3"/>
        <path fill="none" stroke="#1e2022" stroke-width="1.5" stroke-linecap="round" stroke-miterlimit="10" d="M419.9,845.3c-8.7-12.7-20.2-21.9-35.1-25.8"/>
        <path fill="none" stroke="#1e2022" stroke-width="1.5" stroke-linecap="round" stroke-miterlimit="10" d="M414.7,940.7c1.6,6.9,4.9,19.8,8.2,32"/>
        <path fill="none" stroke="#1e2022" stroke-width="1.5" stroke-linecap="round" stroke-miterlimit="10" d="M395.6,925.2c3.1,8.9,6.5,15.1,8.9,15.9c3,1,9.8,0,17.8-2.1"/>
        <path fill="none" stroke="#1e2022" stroke-width="1.5" stroke-linecap="round" stroke-miterlimit="10" d="M422.3,846.9c-5.3-3.9-10.6-5.8-15.6-4.6"/>
        <path fill="none" stroke="#1e2022" stroke-width="1.5" stroke-linecap="round" stroke-miterlimit="10" d="M345.3,823.5v-10.3"/>
        <path fill="none" stroke="#1e2022" stroke-width="1.5" stroke-linecap="round" stroke-miterlimit="10" d="M384.8,794.3v42.8c0,3.5-9.3,5.6-18.9,5.9"/>
        <path fill="none" stroke="#1e2022" stroke-width="1.5" stroke-linecap="round" stroke-miterlimit="10" d="M384.7,794.3c3.6,2,9-0.1,12.5-5c3.7-5.1,3.7-11.3,0.2-13.9c-0.9-0.7-2-1-3.2-1.1"/>
        <path fill="none" stroke="#1e2022" stroke-width="1.5" stroke-linecap="round" stroke-miterlimit="10" d="M327.8,750.7c-0.6,1.3-1.2,2.6-1.7,3.9c-9.7,24.5-2.8,50.1,15.4,57.3c1.2,0.5,2.5,0.9,3.7,1.2"/>
        <path fill="none" stroke="#1e2022" stroke-width="1.5" stroke-linecap="round" stroke-miterlimit="10" d="M407.3,779.8c7.4-2.2,16.6-7.5,16.6-18c0-6.6-6.2-13.9-7.3-22.2c-0.6-4.2,0.7-21.7-4.2-27.6
          c-10.2-12.3-16.2-9.7-24-12.6c-13.6-5-18.8-13.2-30-13.2c-12.7,0-17.9,6.6-27,6.6c-10.4,0-19-4.8-33.6-4.8c-7.8,0-18,10.2-18,19.2
          c0,21.3,19.8,18.2,19.8,23.4c0,3.6-1.2,6.5-1.2,11.4c0,2.6,1.4,4.8,3.4,6.5"/>
        <path fill="#e7eaf3" d="M187.1,682.6H217c8.9,0,16.1,7.2,16.1,16.1v29.9c0,8.9-7.2,16.1-16.1,16.1h-29.9c-8.9,0-16.1-7.2-16.1-16.1
          v-29.9C171.1,689.8,178.3,682.6,187.1,682.6z"/>
        <circle fill="#377dff" cx="225.7" cy="687.6" r="12.7"/>
        <path fill="#fff" stroke="#1e2022" stroke-width="1.5" stroke-miterlimit="10" d="M389.4,544.2H187.9c-27.1,0-49.1,22-49.1,49.1v515.2c0,27.1,22,49.1,49.1,49.1l0,0h201.5
          c27.1,0,49.1-22,49.1-49.1V593.3C438.5,566.2,416.5,544.2,389.4,544.2z M422.3,848.9v256.5c0,18.7-15.2,33.9-33.9,33.9H188.9
          c-18.7,0-33.9-15.2-33.9-33.9l0,0v-509c0-18.7,15.2-33.9,33.9-33.9h33V573c0,5.2,4.2,9.4,9.4,9.4h114.4c5.2,0,9.4-4.2,9.4-9.4v-10.5
          h33c18.7,0,33.9,15.2,33.9,33.9l0,0L422.3,848.9z"/>
        <path fill="#00c9a7" d="M493.4,620.4h-72.8c-13.1,0-23.8,10.7-23.8,23.8c0,6.9,2.9,13.1,7.7,17.5v15.9l10.3-10.3
          c1.9,0.5,3.8,0.7,5.8,0.7h72.8c13.1,0,23.8-10.7,23.8-23.8S506.5,620.4,493.4,620.4z"/>
        <circle fill="#fff" cx="432.4" cy="645" r="6"/>
        <circle fill="#fff" cx="457" cy="645" r="6"/>
        <circle fill="#fff" cx="481.5" cy="645" r="6"/>
        <path fill="none" stroke="#1e2022" stroke-width="5" stroke-linecap="round" stroke-miterlimit="10" d="M109.2,1090.2c1.2-3.4,1.9-7.7,1.9-13c0-80.1-94.8-58.5-94.8-125"/>
        <path fill="#1e2022" d="M33,951.7c5.1,6.7-12.1,14.4-14.5,11.1S27.5,944.6,33,951.7z"/>
        <path fill="#1e2022" d="M116.9,834c6.3,8.1-12.2,15.6-15.2,11.7C98.7,841.8,110.2,825.3,116.9,834z"/>
        <path fill="#1e2022" d="M111.9,867.7c5,9-19.2,16.2-21.6,11.9C87.9,875.3,106.6,858.1,111.9,867.7z"/>
        <path fill="#1e2022" d="M113.4,893.3c6.5,7.9-15.9,19.4-19.1,15.6S106.4,884.8,113.4,893.3z"/>
        <path fill="#1e2022" d="M121,922.1c6.5,7.9-15.9,19.4-19.1,15.6C98.8,934,114,913.6,121,922.1z"/>
        <path fill="#1e2022" d="M127.7,948.9c5.9,7.2-13.7,17-16.5,13.6C108.3,959,121.4,941.2,127.7,948.9z"/>
        <path fill="#1e2022" d="M136.7,978.2c5.9,7.2-13.7,17-16.5,13.6C117.3,988.3,130.4,970.5,136.7,978.2z"/>
        <path fill="#1e2022" d="M0.3,946.4c2.1-8.2,18.8,0.7,17.7,4.7S-2,955.2,0.3,946.4z"/>
        <path fill="#1e2022" d="M0,975.2c-1-8.4,17.7-6.3,18.2-2.3S1.2,984.2,0,975.2z"/>
        <path fill="#1e2022" d="M16.6,1001.3c-5.5-6.4,11.3-15,14-11.9C33.2,992.4,22.4,1008.1,16.6,1001.3z"/>
        <path fill="#1e2022" d="M37.4,1015.3c-3.3-7.8,15.3-10.9,16.9-7.2C55.8,1011.9,40.9,1023.6,37.4,1015.3z"/>
        <path fill="#1e2022" d="M65.3,1030c-3.3-7.8,15.3-10.9,16.9-7.2S68.8,1038.3,65.3,1030z"/>
        <path fill="#1e2022" d="M86.2,1051.2c-0.7-8.4,17.9-5.6,18.3-1.6S87,1060.2,86.2,1051.2z"/>
        <path fill="#1e2022" d="M42,969.7c6.6,5.3-8.3,16.8-11.4,14.3C27.4,981.5,35,964.1,42,969.7z"/>
        <path fill="#1e2022" d="M57,984.8c7.3,4.3-5.8,17.8-9.3,15.8S49.2,980.2,57,984.8z"/>
        <path fill="#1e2022" d="M84.4,999.5c6.8,4.9-7.5,17.2-10.8,14.8S77.1,994.2,84.4,999.5z"/>
        <path fill="none" stroke="#1e2022" stroke-width="5" stroke-linecap="round" stroke-miterlimit="10" d="M107.4,1090c8.3-13.7,18.5-34.5,18.5-57.9c0-64.7-36.1-97.1-36.1-143.2c0-8.7,0.8-36.2,14.7-47.4"/>
        <path fill="#fff" stroke="#1e2022" stroke-width="1.5" stroke-linecap="round" stroke-miterlimit="10" d="M136.3,1181.5h-53c-2.5,0-4.7-1.6-5.4-3.9l-26.4-80c-1-3,0.7-6.3,3.7-7.2c0.6-0.2,1.2-0.3,1.8-0.3h106
          c3.2,0,5.7,2.6,5.7,5.7c0,0.6-0.1,1.2-0.3,1.8l-26.6,80C141,1179.9,138.8,1181.5,136.3,1181.5z"/>
        <path fill="#e7eaf3" d="M132,1090.2c1.5,2.2,12.7,65.1-44.8,91.3c15.8-0.5,19.9,0.3,19.9,0.3h30l4.8-3l11.4-34.2l8.1-25.2l7.5-23.4
          l-1.8-4.3l-3.6-2.3L132,1090.2z"/>
        <path fill="#1e2022" d="M145.3,1011.8c3.1,8.8-18.7,11.3-20.2,7.1C123.6,1014.7,141.9,1002.4,145.3,1011.8z"/>
        <path fill="#1e2022" d="M109.6,1024.9c6.9-6.3,17.7,12.9,14.3,15.9S102.2,1031.6,109.6,1024.9z"/>
        <path fill="#1e2022" d="M104,1001c4.6-8.1,20.8,6.6,18.6,10.5S99.1,1009.7,104,1001z"/>
        <path fill="#1e2022" d="M98.8,972.6c4.6-8.1,20.8,6.6,18.6,10.5S93.9,981.3,98.8,972.6z"/>
        <path fill="#1e2022" d="M89.5,950.1c3-8.8,21.7,2.6,20.3,6.8C108.4,961.2,86.3,959.6,89.5,950.1z"/>
        <path fill="#1e2022" d="M76.3,919.1c4.4-8.3,21,6.1,18.9,10S71.7,927.9,76.3,919.1z"/>
        <path fill="#1e2022" d="M70.1,884.5c5.1-7.8,20.4,8,17.9,11.7S64.7,892.9,70.1,884.5z"/>
        <path fill="#1e2022" d="M73.2,854.8c5.1-7.8,20.4,8,17.9,11.7C88.7,870.3,67.7,863.2,73.2,854.8z"/>
        <path fill="#1e2022" d="M145.3,1042.5c3.1,8.8-18.7,11.3-20.2,7.1C123.6,1045.4,141.9,1033.1,145.3,1042.5z"/>
        <path fill="none" stroke="#1e2022" stroke-width="1.5" stroke-linecap="round" stroke-miterlimit="10" d="M338.6,757.7c0,3-0.6,12.6-4.2,15"/>
        <path fill="none" stroke="#1e2022" stroke-width="1.5" stroke-linecap="round" stroke-miterlimit="10" d="M336.5,788.6c6,0,11.4-3.6,11.4-6"/>
        <ellipse fill="none" stroke="#1e2022" cx="351.8" cy="759.2" rx="2.1" ry="3.6"/>
        <path fill="none" stroke="#1e2022" stroke-width="1.5" stroke-linecap="round" stroke-miterlimit="10" d="M136.3,1181.5h-53c-2.5,0-4.7-1.6-5.4-3.9l-26.4-80c-1-3,0.7-6.3,3.7-7.2c0.6-0.2,1.2-0.3,1.8-0.3h106
          c3.2,0,5.7,2.6,5.7,5.7c0,0.6-0.1,1.2-0.3,1.8l-26.6,80C141,1179.9,138.8,1181.5,136.3,1181.5z"/>
      </svg>
    </figure>
    <!-- End SVG Illustration -->
  </div>

  <div class="row justify-content-lg-end">
    <div class="col-lg-7 mt-lg-n11">
      <h2 class="h1 mb-4">Style your workflow how you want to fit your brand</h2>
      <p>Front is a collaboration hub for work, no matter what work you do. It's a place where conversations happen, decisions are made, and information is always at your fingertips. With Front, your team is better connected.</p>
    </div>
  </div>
</div>
<!-- End Features Section -->
Copy

Component #5

Payment made easy in stores with speed and security using.

When paying in stores, Front Pay doesn't share your actual card number, so your information stays secure. Plus, you can check out faster and easier.

See how to send money with Front Pay.

Image Description Image Description
Image Description 
<!-- Features Section -->
<div class="container space-2">
  <div class="row justify-content-lg-between align-items-lg-center">
    <div class="col-lg-5 mb-9 mb-lg-0">
      <div class="mb-5">
        <h2>Payment made easy in stores with speed and security using.</h2>
        <p>When paying in stores, Front Pay doesn't share your actual card number, so your information stays secure. Plus, you can check out faster and easier.</p>
      </div>

      <div class="w-md-50 w-lg-80 mb-2">
        <!-- Fancybox -->
        <div class="bg-img-hero text-center rounded py-11 px-5" style="background-image: url(../../assets/img/480x320/img18.jpg);">
          <a class="js-fancybox video-player video-player-btn d-flex justify-content-center align-items-center" href="javascript:;"
             data-hs-fancybox-options='{
               "src": "//vimeo.com/167434033",
               "caption": "Front - Responsive Website Template",
               "speed": 700,
               "buttons": ["fullScreen", "close"],
               "vimeo": {
                 "autoplay": 1
               }
             }'>
            <span class="video-player-icon">
              <i class="fas fa-play"></i>
            </span>
          </a>
        </div>
        <!-- End Fancybox -->
      </div>

      <p class="small">See how to send money with Front Pay.</p>
    </div>

    <div class="col-lg-6">
      <div class="position-relative max-w-50rem mx-auto">
        <!-- Device Mockup -->
        <div class="device device-iphone-x w-75 mx-auto">
          <img class="device-iphone-x-frame" src="../../assets/svg/components/iphone-x.svg" alt="Image Description">
          <img class="device-iphone-x-screen" src="../../assets/img/407x867/img8.jpg" alt="Image Description">
        </div>
        <!-- End Device Mockup -->

        <!-- SVG Component -->
        <div class="position-absolute bottom-0 right-0 max-w-50rem w-100 z-index-n1 mx-auto">
          <img class="img-fluid" src="../../assets/svg/components/abstract-shapes-2.svg" alt="Image Description">
        </div>
        <!-- End SVG Component -->
      </div>
    </div>
  </div>
</div>
<!-- End Features Section -->
Copy
<link rel="stylesheet" href="../../assets/vendor/fancybox/dist/jquery.fancybox.min.css">
Copy
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/fancybox/dist/jquery.fancybox.min.js"></script>

<!-- JS Front -->
<script src="../../assets/js/hs.fancybox.js"></script>

<!-- JS Plugins Init. -->
<script>
  $(document).on('ready', function () {
    // initialization of fancybox
    $('.js-fancybox').each(function () {
      var fancybox = $.HSCore.components.HSFancyBox.init($(this));
    });
  });
</script>
Copy

Component #6

The easiest way to pay within apps.

Use Front Pay to make purchases in all kinds of apps. Pay for a ride, a pizza delivery, or a new pair of sneakers — with just a touch. Checking out is fast, simple, and secure.

Get our mobile app

Image Description Image Description
Image Description 
<!-- Features Section -->
<div class="container space-2">
  <div class="row justify-content-lg-between align-items-lg-center">
    <div class="col-lg-5 order-lg-2 mb-9 mb-lg-0">
      <div class="mb-5">
        <h2>The easiest way to pay within apps.</h2>
        <p>Use Front Pay to make purchases in all kinds of apps. Pay for a ride, a pizza delivery, or a new pair of sneakers — with just a touch. Checking out is fast, simple, and secure.</p>
      </div>

      <h4 class="mb-3">Get our mobile app</h4>
      <a class="btn btn-icon btn-indigo rounded-circle mr-2" href="#">
        <i class="fab fa-apple"></i>
      </a>
      <a class="btn btn-icon btn-indigo rounded-circle" href="#">
        <i class="fab fa-google-play"></i>
      </a>
    </div>

    <div class="col-lg-6 order-lg-1">
      <div class="position-relative max-w-50rem mx-auto">
        <!-- Device Mockup -->
        <div class="device device-iphone-x w-75 mx-auto">
          <img class="device-iphone-x-frame" src="../../assets/svg/components/iphone-x.svg" alt="Image Description">
          <img class="device-iphone-x-screen" src="../../assets/img/407x867/img9.jpg" alt="Image Description">
        </div>
        <!-- End Device Mockup -->

        <!-- SVG Component -->
        <div class="position-absolute bottom-0 right-0 max-w-50rem w-100 z-index-n1 mx-auto">
          <img class="img-fluid" src="../../assets/svg/components/abstract-shapes-3.svg" alt="Image Description">
        </div>
        <!-- End SVG Component -->
      </div>
    </div>
  </div>
</div>
<!-- End Features Section -->
Copy

Component #7

Get paid and use the cash. All with Front Pay.

When you receive money it's added to your Front Pay Cash card that lives in the Wallet app.

When you pay with a debit or credit card, Front Pay doesn't keep transaction information that can be tied back to you.

When you use Front Pay Cash, information is stored only for troubleshooting.

You can also add your student ID card to Front Wallet to access places like your dorm and the library.

Image Description Image Description
Image Description 
<!-- Features Section -->
<div class="container space-2">
  <div class="row justify-content-lg-between align-items-lg-center">
    <div class="col-lg-5 mb-9 mb-lg-0">
      <div class="mb-4">
        <h2>Get paid and use the cash. All with Front Pay.</h2>
        <p>When you receive money it's added to your Front Pay Cash card that lives in the Wallet app.</p>
      </div>

      <div class="media">
        <span class="icon icon-xs icon-indigo icon-circle mt-1 mr-3">
          <i class="fas fa-check fa-xs"></i>
        </span>
        <div class="media-body">
          <p>When you pay with a debit or credit card, Front Pay doesn't keep transaction information that can be tied back to you.</p>
        </div>
      </div>
      <div class="media">
        <span class="icon icon-xs icon-indigo icon-circle mt-1 mr-3">
          <i class="fas fa-check fa-xs"></i>
        </span>
        <div class="media-body">
          <p>When you use Front Pay Cash, information is stored only for troubleshooting.</p>
        </div>
      </div>
      <div class="media">
        <span class="icon icon-xs icon-indigo icon-circle mt-1 mr-3">
          <i class="fas fa-check fa-xs"></i>
        </span>
        <div class="media-body">
          <p>You can also add your student ID card to Front Wallet to access places like your dorm and the library.</p>
        </div>
      </div>
    </div>

    <div class="col-lg-6">
      <div class="position-relative max-w-50rem mx-auto">
        <!-- Device Mockup -->
        <div class="device device-iphone-x w-75 mx-auto">
          <img class="device-iphone-x-frame" src="../../assets/svg/components/iphone-x.svg" alt="Image Description">
          <img class="device-iphone-x-screen" src="../../assets/img/407x867/img1.jpg" alt="Image Description">
        </div>
        <!-- End Device Mockup -->

        <!-- SVG Component -->
        <div class="position-absolute bottom-0 right-0 max-w-50rem w-100 z-index-n1 mx-auto">
          <img class="img-fluid" src="../../assets/svg/components/abstract-shapes-4.svg" alt="Image Description">
        </div>
        <!-- End SVG Component -->
      </div>
    </div>
  </div>
</div>
<!-- End Features Section -->
Copy

Component #8

Simple and affordable.
Pay as you go.

From boarding passes to movie tickets, there's pretty much nothing you can't store with Front Pay. Plus, you can take your money further with exclusive offers, discounts, and even reminders to use your loyalty card when you enter the store.

See how your info is protected
SVG

Create an account

SVG

Link your bank account

SVG

Your account is validated

Image Description 
<!-- How To Section -->
<div class="container space-2">
  <!-- Title -->
  <div class="w-lg-50 text-center mx-lg-auto mb-5">
    <h2>Simple and affordable.<br>Pay as you go.</h2>
    <p>From boarding passes to movie tickets, there's pretty much nothing you can't store with Front Pay. Plus, you can take your money further with exclusive offers, discounts, and even reminders to use your loyalty card when you enter the store.</p>
  </div>
  <!-- End Title -->

  <!-- Fancybox -->
  <div class="text-center mx-auto mb-11">
    <a class="js-fancybox" href="javascript:;"
       data-hs-fancybox-options='{
         "src": "//youtube.com/j8uxIKcxArA",
         "caption": "Front - Responsive Website Template",
         "speed": 700,
         "buttons": ["fullScreen", "close"],
         "youtube": {
           "autoplay": 1
         }
       }'>
      <i class="fas fa-play-circle align-middle text-primary font-size-3 mr-2"></i>
      See how your info is protected
    </a>
  </div>
  <!-- End Fancybox -->

  <!-- Icon Blocks Section -->
  <div class="row justify-content-md-center mb-11">
    <div class="col-md-4 col-lg-3 mb-9 mb-lg-0">
      <!-- Icon Block -->
      <div class="step-dots text-center px-lg-4">
        <figure class="max-w-10rem mx-auto mb-3">
          <img class="img-fluid" src="../../assets/svg/icons/icon-48.svg" alt="SVG">
        </figure>
        <h4>Create an account</h4>
      </div>
      <!-- End Icon Block -->
    </div>

    <div class="col-md-4 col-lg-3 mb-9 mb-lg-0">
      <!-- Icon Block -->
      <div class="step-dots text-center px-lg-4">
        <figure class="max-w-10rem mx-auto mb-3">
          <img class="img-fluid" src="../../assets/svg/icons/icon-39.svg" alt="SVG">
        </figure>
        <h4>Link your bank account</h4>
      </div>
      <!-- End Icon Block -->
    </div>

    <div class="col-md-4 col-lg-3">
      <!-- Icon Block -->
      <div class="text-center px-lg-4">
        <figure class="max-w-10rem mx-auto mb-3">
          <img class="img-fluid" src="../../assets/svg/icons/icon-20.svg" alt="SVG">
        </figure>
        <h4>Your account is validated</h4>
      </div>
      <!-- End Icon Block -->
    </div>
  </div>
  <!-- End Icon Blocks Section -->

  <div class="max-w-50rem mx-auto">
    <img class="img-fluid" src="../../assets/svg/illustrations/visa-card.svg" alt="Image Description">
  </div>
</div>
<!-- End How To Section -->
Copy
<link rel="stylesheet" href="../../assets/vendor/fancybox/dist/jquery.fancybox.min.css">
Copy
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/fancybox/dist/jquery.fancybox.min.js"></script>

<!-- JS Front -->
<script src="../../assets/js/hs.fancybox.js"></script>

<!-- JS Plugins Init. -->
<script>
  $(document).on('ready', function () {
    // initialization of fancybox
    $('.js-fancybox').each(function () {
      var fancybox = $.HSCore.components.HSFancyBox.init($(this));
    });
  });
</script>
Copy

Component #9

What we do?

A flexible theme for modern SaaS businesses

SVG

Industry-leading designs

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

SVG

Learn from the docs

Whether you're a startup or a global enterprise, learn how to integrate with Front.

SVG

Accelerate your business

We help power millions of businesses to built and run smoothly.

SVG Arrow

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

Image Description Image Description

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

<!-- Icon Blocks Section -->
<div class="container space-2">
  <!-- Title -->
  <div class="w-lg-65 text-center mx-auto mb-5 mb-sm-9">
    <h2 class="h1">What we do?</h2>
    <p>A flexible theme for modern SaaS businesses</p>
  </div>
  <!-- End Title -->

  <div class="row">
    <div class="col-md-4 mb-7">
      <!-- Icon Blocks -->
      <div class="text-center px-lg-3">
        <figure class="max-w-8rem mx-auto mb-4">
          <img class="img-fluid" src="../../assets/svg/icons/icon-45.svg" alt="SVG">
        </figure>
        <h3>Industry-leading designs</h3>
        <p>Achieve virtually any design and layout from within the one template.</p>
      </div>
      <!-- End Icon Blocks -->
    </div>

    <div class="col-md-4 mb-7">
      <!-- Icon Blocks -->
      <div class="text-center px-lg-3">
        <figure class="max-w-8rem mx-auto mb-4">
          <img class="img-fluid" src="../../assets/svg/icons/icon-14.svg" alt="SVG">
        </figure>
        <h3>Learn from the docs</h3>
        <p>Whether you're a startup or a global enterprise, learn how to integrate with Front.</p>
      </div>
      <!-- End Icon Blocks -->
    </div>

    <div class="col-md-4 mb-7">
      <!-- Icon Blocks -->
      <div class="text-center px-lg-3">
        <figure class="max-w-8rem mx-auto mb-4">
          <img class="img-fluid" src="../../assets/svg/icons/icon-23.svg" alt="SVG">
        </figure>
        <h3>Accelerate your business</h3>
        <p>We help power millions of businesses to built and run smoothly.</p>
      </div>
      <!-- End Icon Blocks -->
    </div>
  </div>

  <img class="img-fluid d-none d-md-block w-75 mx-auto mb-7" src="../../assets/svg/components/three-pointers.svg" alt="SVG Arrow">

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

  <!-- Browser Mockup -->
  <div class="position-relative w-lg-75 mx-lg-auto mb-4">
    <figure>
      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1109.8 797.1">
        <path fill="#f9fbff" d="M105.1,267.1C35.5,331.5-3.5,423,0.3,517.7C6.1,663,111,831.9,588.3,790.8c753-64.7,481.3-358.3,440.4-398.3c-4-3.9-7.9-7.9-11.7-12L761.9,104.8C639.4-27.6,432.5-35.6,299.9,87L105.1,267.1z"/>
      </svg>
    </figure>

    <div class="device device-browser">
      <img class="img-fluid" src="../../assets/svg/components/browser.svg" alt="Image Description">
      <img class="device-browser-screen" src="../../assets/img/855x665/img1.jpg" alt="Image Description">
    </div>
  </div>
  <!-- End Browser Mockup -->

  <div class="w-50 w-md-40 w-lg-30 text-center mx-auto">
    <p class="small">We are launching soon. Join the priority list for information and early access.</p>
  </div>
</div>
<!-- End Icon Blocks Section -->
Copy

Component #10

Company values

The Front culture

—

Hit heavy, stay small

Tight-knit, dynamic teams work with more agility, communication, and freedom than large-scale companies.

—

Ambition by the boatload

We love people who aim for greatness. They inspire and excite their teammates, raising the bar for all of us.

—

Open communication

We're big fans of transparency for many reasons, but the abridged version is: it makes easier.

—

Autonomy and attitude

We're a team of self-starters who take serious pride in our work – and it shows.

—

Support and win

When we empower others to succeed, we all win. (And we're not talking about participation trophies.)

—

Teamwork makes the dream work

We work together to bring our passions and expertise to make Teachable the best it can be.

<!-- Features Section -->
<div class="container space-2">
  <!-- Title -->
  <div class="w-md-80 w-lg-50 text-center mx-md-auto mb-5 mb-md-9">
    <span class="d-block small font-weight-bold text-cap mb-2">Company values</span>
    <h2>The Front culture</h2>
  </div>
  <!-- End Title -->

  <div class="row">
    <div class="col-sm-6 col-md-4 mb-3 mb-sm-7">
      <!-- Icon Blocks -->
      <div class="media">
        <span class="mr-3">—</span>
        <div class="media-body">
          <h2 class="h4">Hit heavy, stay small</h2>
          <p>Tight-knit, dynamic teams work with more agility, communication, and freedom than large-scale companies.</p>
        </div>
      </div>
      <!-- End Icon Blocks -->
    </div>

    <div class="col-sm-6 col-md-4 mb-3 mb-sm-7">
      <!-- Icon Blocks -->
      <div class="media">
        <span class="mr-3">—</span>
        <div class="media-body">
          <h3 class="h4">Ambition by the boatload</h3>
          <p>We love people who aim for greatness. They inspire and excite their teammates, raising the bar for all of us.</p>
        </div>
      </div>
      <!-- End Icon Blocks -->
    </div>

    <div class="col-sm-6 col-md-4 mb-3 mb-sm-7">
      <!-- Icon Blocks -->
      <div class="media">
        <span class="mr-3">—</span>
        <div class="media-body">
          <h4>Open communication</h4>
          <p>We're big fans of transparency for many reasons, but the abridged version is: it makes easier.</p>
        </div>
      </div>
      <!-- End Icon Blocks -->
    </div>

    <div class="col-sm-6 col-md-4 mb-3 mb-sm-0">
      <!-- Icon Blocks -->
      <div class="media">
        <span class="mr-3">—</span>
        <div class="media-body">
          <h4>Autonomy and attitude</h4>
          <p>We're a team of self-starters who take serious pride in our work – and it shows.</p>
        </div>
      </div>
      <!-- End Icon Blocks -->
    </div>

    <div class="col-sm-6 col-md-4 mb-3 mb-sm-0">
      <!-- Icon Blocks -->
      <div class="media">
        <span class="mr-3">—</span>
        <div class="media-body">
          <h4>Support and win</h4>
          <p>When we empower others to succeed, we all win. (And we're not talking about participation trophies.)</p>
        </div>
      </div>
      <!-- End Icon Blocks -->
    </div>

    <div class="col-sm-6 col-md-4">
      <!-- Icon Blocks -->
      <div class="media">
        <span class="mr-3">—</span>
        <div class="media-body">
          <h4>Teamwork makes the dream work</h4>
          <p>We work together to bring our passions and expertise to make Teachable the best it can be.</p>
        </div>
      </div>
      <!-- End Icon Blocks -->
    </div>
  </div>
</div>
<!-- End Features Section -->
Copy

Component #11

Learn to use Python professionally, learning both Python 2 and Python 3!
Create games with Python, like Tic Tac Toe and Blackjack!
Learn advanced Python features, like the collections module and how to work with timestamps!
Learn to use Object Oriented Programming with classes!
Understand complex topics, like decorators.
Understand how to use both the Jupyter Notebook and create .py files
Get an understanding of how to create GUIs in the Jupyter Notebook system!
Build a complete understanding of Python from the ground up! 
<div class="container space-2">
  <div class="row">
    <div class="col-lg-6">
      <!-- Icon Block -->
      <div class="media text-body font-size-1 mb-3">
        <i class="fas fa-check-circle text-success mt-1 mr-2"></i>
        <div class="media-body">
          Learn to use Python professionally, learning both Python 2 and Python 3!
        </div>
      </div>
      <!-- End Icon Block -->
    </div>

    <div class="col-lg-6">
      <!-- Icon Block -->
      <div class="media text-body font-size-1 mb-3">
        <i class="fas fa-check-circle text-success mt-1 mr-2"></i>
        <div class="media-body">
          Create games with Python, like Tic Tac Toe and Blackjack!
        </div>
      </div>
      <!-- End Icon Block -->
    </div>
  </div>

  <div class="row">
    <div class="col-lg-6">
      <!-- Icon Block -->
      <div class="media text-body font-size-1 mb-3">
        <i class="fas fa-check-circle text-success mt-1 mr-2"></i>
        <div class="media-body">
          Learn advanced Python features, like the collections module and how to work with timestamps!
        </div>
      </div>
      <!-- End Icon Block -->
    </div>

    <div class="col-lg-6">
      <!-- Icon Block -->
      <div class="media text-body font-size-1 mb-3">
        <i class="fas fa-check-circle text-success mt-1 mr-2"></i>
        <div class="media-body">
          Learn to use Object Oriented Programming with classes!
        </div>
      </div>
      <!-- End Icon Block -->
    </div>
  </div>

  <div class="row">
    <div class="col-lg-6">
      <!-- Icon Block -->
      <div class="media text-body font-size-1 mb-3">
        <i class="fas fa-check-circle text-success mt-1 mr-2"></i>
        <div class="media-body">
          Understand complex topics, like decorators.
        </div>
      </div>
      <!-- End Icon Block -->
    </div>

    <div class="col-lg-6">
      <!-- Icon Block -->
      <div class="media text-body font-size-1 mb-3">
        <i class="fas fa-check-circle text-success mt-1 mr-2"></i>
        <div class="media-body">
          Understand how to use both the Jupyter Notebook and create .py files
        </div>
      </div>
      <!-- End Icon Block -->
    </div>
  </div>

  <div class="row">
    <div class="col-lg-6">
      <!-- Icon Block -->
      <div class="media text-body font-size-1 mb-3">
        <i class="fas fa-check-circle text-success mt-1 mr-2"></i>
        <div class="media-body">
          Get an understanding of how to create GUIs in the Jupyter Notebook system!
        </div>
      </div>
      <!-- End Icon Block -->
    </div>

    <div class="col-lg-6">
      <!-- Icon Block -->
      <div class="media text-body font-size-1 mb-3">
        <i class="fas fa-check-circle text-success mt-1 mr-2"></i>
        <div class="media-body">
          Build a complete understanding of Python from the ground up!
        </div>
      </div>
      <!-- End Icon Block -->
    </div>
  </div>
</div>
Copy

Component #12

Lightning-fast development with pre-built solutions

Every team has a unique process for shipping software. Use an out-of-the-box workflow, or create one to match the way your team works.

Extensive API documentation

Customizable & open source

Continiously improved

Choose a workflow, or make your own with Front Software

Image Description Image Description

The best software teams ship early and often.

Front Software is built for every member of your software team to plan, track, and release great software.

Knowledge management

Development workflow

Continuous integration

Integrate with the tools and workflow you already use

Image Description Image Description 
<!-- Features Section -->
<div class="container space-2">
  <div class="row align-items-lg-center">
    <div class="col-lg-5 order-lg-2 mb-7 mb-lg-0">
      <div class="mb-5">
        <h2 class="mb-3">Lightning-fast development with pre-built solutions</h2>
        <p>Every team has a unique process for shipping software. Use an out-of-the-box workflow, or create one to match the way your team works.</p>
      </div>

      <!-- Info -->
      <div class="media pb-3">
        <span class="icon icon-xs icon-soft-indigo icon-circle mr-3">
          <i class="fas fa-check"></i>
        </span>
        <div class="media-body">
          <p class="text-dark mb-0">Extensive API documentation</p>
        </div>
      </div>
      <div class="media py-3">
        <span class="icon icon-xs icon-soft-indigo icon-circle mr-3">
          <i class="fas fa-check"></i>
        </span>
        <div class="media-body">
          <p class="text-dark mb-0">Customizable & open source</p>
        </div>
      </div>
      <div class="media pt-3">
        <span class="icon icon-xs icon-soft-indigo icon-circle mr-3">
          <i class="fas fa-check"></i>
        </span>
        <div class="media-body">
          <p class="text-dark mb-0">Continiously improved</p>
        </div>
      </div>
      <!-- End Info -->
    </div>

    <div class="col-lg-7 order-lg-1">
      <!-- Card Block -->
      <div class="pr-lg-4">
        <div class="card shadow-none bg-soft-primary text-indigo text-center w-lg-75 overflow-hidden pt-9 px-5 mx-lg-auto">
          <div class="px-5 mb-5">
            <h3>Choose a workflow, or make your own with Front Software</h3>
          </div>

          <!-- Device Mockup -->
          <div class="device device-half-iphone-x w-85 mx-auto">
            <img class="device-half-iphone-x-frame" src="../../assets/svg/components/half-iphone-x.svg" alt="Image Description">
            <img class="device-half-iphone-x-screen" src="../../assets/img/407x472/img7.jpg" alt="Image Description">
          </div>
          <!-- End Device Mockup -->
        </div>
      </div>
      <!-- End Card Block -->
    </div>
  </div>
</div>
<!-- End Features Section -->

<!-- Features Section -->
<div class="container space-2">
  <div class="row align-items-lg-center">
    <div class="col-lg-5 mb-7 mb-lg-0">
      <div class="mb-5">
        <h2 class="mb-3">The best software teams ship early and often.</h2>
        <p>Front Software is built for every member of your software team to plan, track, and release great software.</p>
      </div>

      <!-- Info -->
      <div class="media pb-3">
        <span class="icon icon-xs icon-soft-indigo icon-circle mr-3">
          <i class="fas fa-check"></i>
        </span>
        <div class="media-body">
          <p class="text-dark mb-0">Knowledge management</p>
        </div>
      </div>
      <div class="media py-3">
        <span class="icon icon-xs icon-soft-indigo icon-circle mr-3">
          <i class="fas fa-check"></i>
        </span>
        <div class="media-body">
          <p class="text-dark mb-0">Development workflow</p>
        </div>
      </div>
      <div class="media pt-3">
        <span class="icon icon-xs icon-soft-indigo icon-circle mr-3">
          <i class="fas fa-check"></i>
        </span>
        <div class="media-body">
          <p class="text-dark mb-0">Continuous integration</p>
        </div>
      </div>
      <!-- End Info -->
    </div>

    <div class="col-lg-7">
      <!-- Card Block -->
      <div class="pl-lg-4">
        <div class="card shadow-none bg-soft-info text-indigo text-center w-lg-75 overflow-hidden pt-9 px-5 mx-lg-auto">
          <div class="px-5 mb-5">
            <h3>Integrate with the tools and workflow you already use</h3>
          </div>

          <!-- Device Mockup -->
          <div class="device device-half-iphone-x w-85 mx-auto">
            <img class="device-half-iphone-x-frame" src="../../assets/svg/components/half-iphone-x.svg" alt="Image Description">
            <img class="device-half-iphone-x-screen" src="../../assets/img/407x472/img8.jpg" alt="Image Description">
          </div>
          <!-- End Device Mockup -->
        </div>
      </div>
      <!-- End Card Block -->
    </div>
  </div>
</div>
<!-- End Features Section -->
Copy