@themesberg/pixel-lite-bootstrap-ui-kit

<!DOCTYPE html> <html lang="en"> <head> @@include('./_head.html', { "path": "../..", "title": "Pixel Bootstrap 5 - Freelancer" }) </head> <body> @@include('./_navigation.html', { "path": "../..", "classes": "navbar-light" }) <main> @@include('./_preloader.html', { "path": "../.." })  <div class="section-header bg-primary-app pb-0"> <div class="container"> <div class="row justify-content-center text-center"> <div class="col-lg-8"> <img src="../../assets/img/team/profile-picture-freelancer.jpg" class="rounded-circle img-thumbnail image-lg border-gray-300 p-2" alt="Profile image"> <div class="mt-4 mb-5"> <h1 class="display-2 fw-normal my-4">Hello, I’m <span class="text-through fw-bold">Anthony Knowles aka</span> Little Picasso.</h1> <h5 class="fw-normal text-gray">Head of Design at <span class="fw-bold text-dark">Themesberg</span></h5> </div> <ul class="list-inline text-center mb-0"> <li class="list-inline-item"> <a class="icon icon-md icon-twitter me-3" data-toggle="tooltip" data-placement="top" title="twitter"> <span class="fab fa-twitter"></span> </a> </li> <li class="list-inline-item"> <a class="icon icon-md icon-github me-3" data-toggle="tooltip" data-placement="top" title="github"> <span class="fab fa-github"></span> </a> </li> <li class="list-inline-item"> <a class="icon icon-md icon-dribbble me-3" data-toggle="tooltip" data-placement="top" title="dribbble"> <span class="fab fa-dribbble"></span> </a> </li> <li class="list-inline-item"> <a class="icon icon-md icon-slack" data-toggle="tooltip" data-placement="top" title="slack"> <span class="fab fa-slack"></span> </a> </li> </ul> </div> </div> </div> </div>   <section class="section section-lg bg-primary-app pb-0"> <div class="container"> <div class="row justify-content-center mb-0 mb-md-6"> <div class="col-6 col-md-3 text-center mb-5 mb-md-0"> <div class="mb-2 mb-md-3"> <svg class="small-image" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M19.2642 3.21338L3.04597 6.7525L6.71301 23.5569L22.9312 20.0178L19.2642 3.21338Z" fill="white" stroke="#424AA0" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/> <path d="M18.0418 5.52346L5.43853 8.27375L7.63449 18.3368L20.2378 15.5866L18.0418 5.52346Z" fill="white" stroke="#424AA0" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/> <path d="M17.5 0.5H0.5V17.5H17.5V0.5Z" fill="white" stroke="#424AA0" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/> <path d="M5.50001 5V13.3" stroke="#424AA0" stroke-miterlimit="10" stroke-linejoin="round"/> <path d="M12.5 5V13.3" stroke="#424AA0" stroke-miterlimit="10" stroke-linejoin="round"/> <path d="M2.49999 10.5H15.3" stroke="#424AA0" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/> <path d="M15.5 8.5C14 8.5 12.5 6 12.5 6C12.5 6 11.5 8.5 9 8.5C6.5 8.5 5.5 6 5.5 6C5.5 6 4 8.5 2.5 8.5" stroke="#424AA0" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/> <path d="M15.5 2.5H2.49999V13.5H15.5V2.5Z" stroke="#424AA0" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> <h2 class="h4">Product Design</h2> </div> <div class="col-6 col-md-3 text-center mb-5 mb-md-0"> <div class="mb-2 mb-md-3"> <svg class="small-image" viewBox="0 -1 22 23" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M20.5 1.49999H1.49995V19.5H20.5V1.49999Z" fill="white" stroke="#424AA0" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/> <path d="M21.5 18.5H19.5V20.5H21.5V18.5Z" fill="white" stroke="#424AA0" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/> <path d="M2.5 18.5H0.499995V20.5H2.5V18.5Z" fill="white" stroke="#424AA0" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/> <path d="M21.5 0.5H19.5V2.5H21.5V0.5Z" fill="white" stroke="#424AA0" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/> <path d="M2.5 0.5H0.499995V2.5H2.5V0.5Z" fill="white" stroke="#424AA0" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/> <path d="M11 13.5H18" stroke="#424AA0" stroke-miterlimit="10" stroke-linejoin="round"/> <path d="M11 15.5H17" stroke="#424AA0" stroke-miterlimit="10" stroke-linejoin="round"/> <path d="M8.5 12.5H4.50001V16.5H8.5V12.5Z" stroke="#424AA0" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/> <path d="M11 8.5H17" stroke="#424AA0" stroke-miterlimit="10" stroke-linejoin="round"/> <path d="M11 6.5H18" stroke="#424AA0" stroke-miterlimit="10" stroke-linejoin="round"/> <path d="M8.5 8.5H4.5L6.5 5L8.5 8.5Z" stroke="#424AA0" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> <h2 class="h4">Prototyping</h2> </div> <div class="col-6 col-md-3 text-center mb-5 mb-md-0"> <div class="mb-2 mb-md-3"> <svg class="small-image" viewBox="0 -1 36 22" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12.1 3H8.4L15.8 11.8L17 10.2" fill="white"/> <path d="M12.1 3H8.4L15.8 11.8L17 10.2" stroke="#424AA0" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/> <path d="M13 8.5H5.50001" stroke="#424AA0" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/> <path d="M1.59999 5.5H1.00001" stroke="#424AA0" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/> <path d="M10.5 5.5H3.59996" stroke="#424AA0" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/> <path d="M8.69999 3H5.00001" stroke="#424AA0" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/> <path d="M10.3 0.5H20.2L28.9375 11.6H18.2L10.3 0.5Z" fill="white" stroke="#424AA0" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/> <path d="M25 6.49999L29 11.5L31.6 0.799988L25 6.49999Z" fill="white" stroke="#424AA0" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/> <path d="M31.6 0.799988L31 4.49999L35 4.49999L31.6 0.799988Z" fill="white" stroke="#424AA0" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/> <path d="M29 11.5H18.4296L14 19.5L29 11.5Z" fill="white" stroke="#424AA0" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/> <path d="M14 19.5L15.8 11.6L17 10L18 12L14 19.5Z" fill="white" stroke="#424AA0" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> <h2 class="h4">Development</h2> </div> <div class="col-6 col-md-3 text-center mb-5 mb-md-0"> <div class="mb-2 mb-md-3"> <svg class="small-image" viewBox="0 0 23 25" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M19.1 0.799985H2.90003V20.2H19.1V0.799985Z" fill="white" stroke="#424AA0" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/> <path d="M17.2 0.499994H1.49999V20.5H17.2V0.499994Z" fill="white" stroke="#424AA0" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/> <path d="M3.10001 3.99995C3.32093 3.99995 3.50001 3.82087 3.50001 3.59995C3.50001 3.37904 3.32093 3.19996 3.10001 3.19996C2.8791 3.19996 2.70002 3.37904 2.70002 3.59995C2.70002 3.82087 2.8791 3.99995 3.10001 3.99995Z" fill="white" stroke="#424AA0" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/> <path d="M3.1 3.49997L0.499994 2.09998H1.49999" stroke="#424AA0" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/> <path d="M3.10001 7.70003C3.32093 7.70003 3.50001 7.52094 3.50001 7.30002C3.50001 7.07911 3.32093 6.90003 3.10001 6.90003C2.8791 6.90003 2.70002 7.07911 2.70002 7.30002C2.70002 7.52094 2.8791 7.70003 3.10001 7.70003Z" fill="white" stroke="#424AA0" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/> <path d="M3.1 7.10001L0.499994 5.70002H1.49999" stroke="#424AA0" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/> <path d="M3.10001 11.3C3.32093 11.3 3.50001 11.1209 3.50001 10.9C3.50001 10.6791 3.32093 10.5 3.10001 10.5C2.8791 10.5 2.70002 10.6791 2.70002 10.9C2.70002 11.1209 2.8791 11.3 3.10001 11.3Z" fill="white" stroke="#424AA0" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/> <path d="M3.1 10.8L0.499994 9.49999H1.49999" stroke="#424AA0" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/> <path d="M3.10001 15C3.32093 15 3.50001 14.8209 3.50001 14.6C3.50001 14.3791 3.32093 14.2 3.10001 14.2C2.8791 14.2 2.70002 14.3791 2.70002 14.6C2.70002 14.8209 2.8791 15 3.10001 15Z" fill="white" stroke="#424AA0" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/> <path d="M3.1 14.5L0.499994 13.2H1.49999" stroke="#424AA0" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/> <path d="M3.10001 18.7C3.32093 18.7 3.50001 18.5209 3.50001 18.3C3.50001 18.0791 3.32093 17.9 3.10001 17.9C2.8791 17.9 2.70002 18.0791 2.70002 18.3C2.70002 18.5209 2.8791 18.7 3.10001 18.7Z" fill="white" stroke="#424AA0" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/> <path d="M3.1 18.3L0.499994 16.9H1.49999" stroke="#424AA0" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/> <path d="M11.1 19.7L10.7 22.9L11.1 23.125L11.5 23.3L14 21L14.1 20.8" fill="white"/> <path d="M11.1 19.7L10.7 22.9L11.1 23.125L11.5 23.3L14 21L14.1 20.8" stroke="#424AA0" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/> <path d="M22 5.79999L20.9 7.79999L18.4 6.4C18.4 6.4 19.2 4.49999 19.5 4.49999C19.8 4.49999 19.8 4.5 20.6 4.4C21.4 4.3 21.7 4.5 21.7 4.6C22 4.9 22.2 5.39999 22 5.79999Z" fill="white" stroke="#424AA0" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/> <path d="M17.6602 7.38133L20.4755 8.90229L21.2835 7.40662L18.4682 5.88566L17.6602 7.38133Z" fill="white" stroke="#424AA0" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/> <path d="M17.7 7.40002L20.4 8.90002L14 21L11.1 19.7L17.7 7.40002Z" fill="white" stroke="#424AA0" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/> <path d="M10.5 24.3L10.7 23C11 23 11.3 23.1 11.5 23.4L10.5 24.3Z" fill="#C1C7C4" stroke="#424AA0" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/> <path d="M6.20002 5.4C6.80002 5.2 7.40002 4.8 7.70002 4.3C7.60002 5 8.60001 5.50001 9.30001 5.20001C10 4.90001 10.4 4.19999 10.6 3.49999C10.4 3.89999 10.5 4.5 10.9 4.8C11.2 5.1 11.8 5.19999 12.2 4.99999C12.4 4.89999 12.5 4.8 12.7 4.8C12.9 4.8 13 5 13.2 5.1C13.7 5.5 14.6 5.5 15.1 5.1" stroke="#424AA0" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> <h2 class="h4">Team Lead</h2> </div> </div> <div class="row"> <div class="col-md-4 text-left text-md-right"> <p class="lead fw-bold text-dark">I work at the intersection of design, brand, code, strategy and content; helping organisations bring their concepts and products to life… to make people’s lives better.</p> </div> <div class="col-md-4"> <p>With more than a decade of experience I tackle a broad variety of disciplines in the process of creating meaningful products that make a real difference. With carefully selected tools and skills I express my visions ranging from product design to the creation of user experience up to development and delivery.</p> <p class="d-none d-lg-block">My distinctive strategic thinking helps me to pinpoint the holistic scope of a product and evolve it by adding new business ideas, innovations and values that meet user needs as well as business objectives. Besides building user flows, information architecture and wireframes, tailor-made interactive prototypes </p> </div> <div class="col-md-4"> <p>are constantly putting concepts and ideas to the test and emphasize the user-centered approach in my work. I work with the latest techniques in web development and my agile workflow is the result of the precisely combined tools and strategies that include object oriented patterns, build scripts, pre-processors and minification, source code management, testing as well as deployment.</p> <img class="mt-3" src="../../assets/img/signature.svg" alt="signature" width="100"> </div> </div> </div> </section> <div class="section section-lg bg-primary-app"> <div class="container"> <div class="row justify-content-center"> <div class="col-12 col-md-8 text-center mb-5 mb-lg-6"> <h2 class="display-2 fw-bold"> Experience </h2> <p class="lead">And if it’s not listed here, I learn incredibly quickly</p> </div> </div> <div class="row justify-content-center"> <div class="col-12 col-lg-10"> <div class="card bg-white border-gray-300"> <div class="border-bottom px-4 py-5"> <div class="row align-items-center"> <div class="col-12 col-md-3 pb-3 pb-md-0"> <h2 class="h5">Google Inc.</h2> </div> <div class="col-md-5 pb-2 pb-md-0"> <h3 class="h5 mb-3">Senior Architect</h3> <p class="mb-0">Collaborate with creative and development teams on the execution of ideas.</p> </div> <div class="col-md-4 text-md-right"><span class="badge bg-primary">2021 - Present</span></div> </div> </div> <div class="border-bottom px-4 py-5"> <div class="row align-items-center"> <div class="col-12 col-md-3 pb-3 pb-md-0"> <h2 class="h5">Facebook Inc.</h2> </div> <div class="col-md-5 pb-2 pb-md-0"> <h3 class="h5 mb-3">Front-end Developer</h3> <p class="mb-0">Collaborate with creative and development teams on the execution of ideas.</p> </div> <div class="col-md-4 text-md-right"><span class="badge bg-primary">2016 - 2019</span></div> </div> </div> <div class="px-4 py-5"> <div class="row align-items-center"> <div class="col-12 col-md-3 pb-3 pb-md-0"> <h2 class="h5">Themesberg LLC.</h2> </div> <div class="col-md-5 pb-2 pb-md-0"> <h3 class="h5 mb-3">UI/UX Engineer</h3> <p class="mb-0">Collaborate with creative and development teams on the execution of ideas.</p> </div> <div class="col-md-4 text-md-right"><span class="badge bg-primary">2014 - 2016</span></div> </div> </div> </div> </div> </div> </div> </div>  <div class="section section-sm bg-primary-app"> <div class="container"> <div class="row justify-content-center"> <div class="col-12 col-md-8 text-center mb-4 mb-md-6"> <h2 class="display-2 fw-bold"> Skills </h2> <p class="lead">And if it’s not listed here, I learn incredibly quickly</p> </div> </div> <div class="row justify-content-center"> <div class="col-12 col-sm-4 col-md-3 mb-4 mb-md-0"> <ul class="list-unstyled"> <li class="list-item h3 mb-4">Design</li> <li class="list-item h6 fw-normal mb-3 text-muted">Product Design</li> <li class="list-item h6 fw-normal mb-3 text-muted">UX Design</li> <li class="list-item h6 fw-normal mb-3 text-muted">Visual Design (UI)</li> <li class="list-item h6 fw-normal mb-3 text-muted">Wire-framing + Prototyping</li> <li class="list-item h6 fw-normal mb-3 text-muted">Journey-Mapping</li> <li class="list-item h6 fw-normal mb-3 text-muted">UX Research</li> <li class="list-item h6 fw-normal mb-3 text-muted">Logo and Branding</li> <li class="list-item h6 fw-normal text-muted">Creative Direction</li> </ul> </div> <div class="col-12 col-sm-4 col-md-3 mb-4 mb-md-0"> <ul class="list-unstyled"> <li class="list-item h3 mb-4">Development</li> <li class="list-item h6 fw-normal mb-3 text-muted">HTML</li> <li class="list-item h6 fw-normal mb-3 text-muted">SASS + CSS</li> <li class="list-item h6 fw-normal mb-3 text-muted">Javascript + jQuery</li> <li class="list-item h6 fw-normal mb-3 text-muted">ReactJS</li> <li class="list-item h6 fw-normal mb-3 text-muted">API Integrations</li> <li class="list-item h6 fw-normal mb-3 text-muted">Working within SDKs</li> </ul> </div> <div class="col-12 col-sm-4 col-md-3"> <ul class="list-unstyled"> <li class="list-item h3 mb-4">Software</li> <li class="list-item h6 fw-normal mb-3 text-muted">Postman</li> <li class="list-item h6 fw-normal mb-3 text-muted">Sketch</li> <li class="list-item h6 fw-normal mb-3 text-muted">Adobe Illustrator</li> <li class="list-item h6 fw-normal mb-3 text-muted">Adobe Photoshop</li> <li class="list-item h6 fw-normal mb-3 text-muted">Figma</li> <li class="list-item h6 fw-normal mb-3 text-muted">InVision</li> <li class="list-item h6 fw-normal text-muted">Visual Studio Code</li> </ul> </div> </div> </div> </div> <div class="section section-lg bg-primary-app pb-0"> <div class="container"> <div class="row justify-content-center"> <div class="col-12 col-md-8 text-center mb-4 mb-lg-6"> <h2 class="display-2 fw-bold"> Testimonials </h2> <p class="lead">Hear more from companies like yours</p> </div> </div> <div class="row align-items-center"> <div class="col-md-6 col-lg-4 text-center"> <div class="card border-gray-300 mb-4"> <div class="card-body py-5"> <img src="../../assets/img/clients/airbnb.svg" class="img-fluid image-sm" alt="Airbnb logo"> <span class="d-block mt-3"> <span class="star fas fa-star text-warning"></span> <span class="star fas fa-star text-warning"></span> <span class="star fas fa-star text-warning"></span> <span class="star fas fa-star text-warning"></span> <span class="star fas fa-star text-warning"></span> </span> <p class="card-text py-4 mb-0">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="btn btn-primary btn-sm">See story</a> </div> </div> </div> <div class="col-md-6 col-lg-4 text-center"> <div class="card border-gray-300 mb-4"> <div class="card-body py-5"> <img src="../../assets/img/clients/paypal.svg" class="img-fluid image-sm" alt="Paypal logo"> <span class="d-block mt-3"> <span class="star fas fa-star text-warning"></span> <span class="star fas fa-star text-warning"></span> <span class="star fas fa-star text-warning"></span> <span class="star fas fa-star text-warning"></span> <span class="star fas fa-star text-warning"></span> </span> <p class="card-text py-4 mb-0">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="btn btn-primary btn-sm">See story</a> </div> </div> </div> <div class="col-md-6 col-lg-4 text-center"> <div class="card border-gray-300 mb-4"> <div class="card-body py-5"> <img src="../../assets/img/clients/ebay.svg" class="img-fluid image-sm" alt="Ebay logo"> <span class="d-block mt-3"> <span class="star fas fa-star text-warning"></span> <span class="star fas fa-star text-warning"></span> <span class="star fas fa-star text-warning"></span> <span class="star fas fa-star text-warning"></span> <span class="star fas fa-star text-warning"></span> </span> <p class="card-text py-4 mb-0">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="btn btn-primary btn-sm">See story</a> </div> </div> </div> <div class="col-md-6 col-lg-4 text-center"> <div class="card border-gray-300 mb-4"> <div class="card-body py-5"> <img src="../../assets/img/clients/forbes.svg" class="img-fluid image-sm" alt="Forbes logo"> <span class="d-block mt-3"> <span class="star fas fa-star text-warning"></span> <span class="star fas fa-star text-warning"></span> <span class="star fas fa-star text-warning"></span> <span class="star fas fa-star text-warning"></span> <span class="star fas fa-star text-warning"></span> </span> <p class="card-text py-4 mb-0">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="btn btn-primary btn-sm">See story</a> </div> </div> </div> <div class="col-md-6 col-lg-4 text-center"> <div class="card border-gray-300 mb-4"> <div class="card-body py-5"> <img src="../../assets/img/clients/corsair.svg" class="img-fluid image-sm" alt="Corsair Logo"> <span class="d-block mt-3"> <span class="star fas fa-star text-warning"></span> <span class="star fas fa-star text-warning"></span> <span class="star fas fa-star text-warning"></span> <span class="star fas fa-star text-warning"></span> <span class="star fas fa-star text-warning"></span> </span> <p class="card-text py-4 mb-0">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="btn btn-primary btn-sm">See story</a> </div> </div> </div> <div class="col-md-6 col-lg-4 text-center"> <div class="card border-gray-300 mb-4"> <div class="card-body py-5"> <img src="../../assets/img/clients/docker.svg" class="img-fluid image-sm" alt="Docker Logo"> <span class="d-block mt-3"> <span class="star fas fa-star text-warning"></span> <span class="star fas fa-star text-warning"></span> <span class="star fas fa-star text-warning"></span> <span class="star fas fa-star text-warning"></span> <span class="star fas fa-star text-warning"></span> </span> <p class="card-text py-4 mb-0">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="btn btn-primary btn-sm">See story</a> </div> </div> </div> </div> </div> </div> <div class="section section-lg bg-primary-app"> <div class="container"> <div class="row mb-5 mb-lg-6"> <div class="col-12 col-sm-4 text-center">  <div class="icon-box mb-4"> <div class="icon icon-secondary-app mb-4"> <span class="fas fa-map-marker-alt"></span> </div> <h2 class="h5 icon-box-title">Visit me</h2> <span> 27 Silicon Valley <br>USA, California </span> </div>  </div> <div class="col-12 col-sm-4 text-center">  <div class="icon-box mb-4"> <div class="icon icon-secondary-app mb-4"> <span class="fas fa-phone-volume"></span> </div> <h2 class="h5 icon-box-title">Call</h2> <span>+3912345678</span> <div class="text-small text-gray"> Mon - Fri, 8am - 4pm </div> </div>  </div> <div class="col-12 col-sm-4 text-center">  <div class="icon-box mb-4"> <div class="icon icon-secondary-app mb-4"> <span class="far fa-paper-plane"></span> </div> <h2 class="h5 icon-box-title">Email</h2> <a href="#">hello@themesberg.com</a> </div>  </div> </div> <div class="row justify-content-center"> <div class="col-12 col-md-10 text-center mb-4"> <h2>Want to work with me?</h2> <p>Cool! Let’s talk about your project</p> </div> <div class="col-12 col-lg-8"> <form action="#">  <div class="mb-4"> <label for="name">Your Name</label> <div class="input-group"> <span class="input-group-text" id="basic-addon3"><span class="fas fa-user-circle"></span></span> <input type="text" class="form-control" placeholder="e.g. Bonnie Green" id="name" required> </div> </div>   <div class="mb-4"> <label for="email">Your Email</label> <div class="input-group"> <span class="input-group-text" id="basic-addon4"><span class="fas fa-envelope"></span></span> <input type="email" class="form-control" placeholder="example@company.com" id="email" required> </div> </div>  <div class="mb-4"> <label for="message">Your Message</label> <textarea placeholder="Your message" class="form-control" id="message" rows="4" required></textarea> </div>  <div class="d-grid"> <button type="submit" class="btn rounded btn-secondary">Send message</button> </div> </form> </div> </div> </div> </div> </main> @@include('./_footer.html', { "path": "../..", "classes": "bg-dark text-white" }) @@include('./_scripts.html', { "path": "../.." }) </body> </html>