{% extends 'layouts/base.html' %}
{% load static %}

{% block content %}
    <main>

        {% include 'includes/pre-loader.html' %}

        <!-- Hero -->
        <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="{% static '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>
        <!-- End of Hero section -->
        <!-- Section -->
        <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="{% static '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>
        <!-- Section -->
        <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="{% static '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="{% static '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="{% static '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="{% static '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="{% static '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="{% static '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">
                        <!-- Visit Box -->
                        <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>
                        <!-- End of Visit Box -->
                    </div>
                    <div class="col-12 col-sm-4 text-center">
                        <!-- Call Box -->
                        <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>
                        <!-- End of Call Box -->
                    </div>
                    <div class="col-12 col-sm-4 text-center">
                        <!-- Email Box -->
                        <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>
                        <!-- End of Email Box -->
                    </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="#">
                            <!-- Form -->
                            <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>
                            <!-- End of Form -->
                            <!-- Form -->
                            <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>
                            <!-- End of Form -->
                            <div class="mb-4">
                                <label for="message">Your Message</label>
                                <textarea placeholder="Your message" class="form-control" id="message" rows="4" required></textarea>
                            </div>
                            <!-- End of Form -->
                            <div class="d-grid">
                                <button type="submit" class="btn rounded btn-secondary">Send message</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </main>

    {% endblock content %}