<div class="template-landing">
    <header class="site-header sticky top-0 z-50 bg-white shadow">
        <div class="container mx-auto mx-auto py-4 flex justify-between items-center">
            <div class="site-header__logo">
                <h1 class="text-xl">ETR Component Library</h1>
            </div>
            <div class="site-header__nav hidden lg:block">
                <ul class="flex">
                    <li class=""><a class="px-4 py-2 text-sm hover:text-primary transition" href="">Who We Are</a></li>
                    <li class="ml-2"><a class="px-4 py-2 text-sm hover:text-primary transition" href="">What We Do</a></li>
                    <li class="ml-2"><a class="px-4 py-2 text-sm hover:text-primary transition" href="">Resources</a></li>
                    <li class="ml-2"><a class="px-4 py-2 text-sm hover:text-primary transition" href="">Get in Touch</a></li>
                </ul>
            </div>
            <div class="site-header__utility hidden lg:block">
                <ul class="flex">
                    <li class=""><a class="px-4 py-2 uppercase text-xs tracking-wider hover:text-primary transition" href="">Sign In</a></li>
                    <li class="ml-2"><a class="px-4 py-2 uppercase text-xs tracking-wider hover:text-primary transition" href="">Search</a></li>
                </ul>
            </div>
            <ul class="block lg:hidden">
                <li class=""><a class="px-4 py-2 uppercase text-xs tracking-wider hover:text-primary transition" href="">Menu</a></li>
            </ul>
        </div>
    </header>

    <div class="hero">
        <div class="relative flex items-center justify-center bg-black">
            <div class="hero__background opacity-50" style="background-image:url(https://images.unsplash.com/photo-1483736762161-1d107f3c78e1?ixlib&#x3D;rb-1.2.1&amp;ixid&#x3D;eyJhcHBfaWQiOjEyMDd9&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;w&#x3D;1567&amp;q&#x3D;80);filter: grayscale(100%);"></div>
            <div class="hero__content text-center px-6 md:px-8 lg:px-0 py-16 sm:py-24 md:py-48 z-20">
                <div class="pt-8 sm:pt-10 md:pt-12">
                    <h1 class="text-2xl md:text-4xl lg:text-5xl text-white font-bold">Behold! The ETR Component Library</h1>

                    <h2 class="text-lg md:text-2xl font-bold text-white mt-2">A foundation and reference point for designing and building content and marketing websites.</h2>

                    <p class="text-center mt-3 text-base md:text-lg text-white">Void where prohibited. Some assembly required.</p>

                    <div class="hero__cta mt-6">
                        <a href="http://www.google.com" class="button button--outline button--white rounded-full">
                  Learn More
                </a>

                    </div>
                </div>
            </div>
            <div class="bg-gradient opacity-75 w-full h-full absolute top-0"></div>
        </div>
        <div class="hero__caption mt-1 container mx-auto">
            <figcaption class="media-caption text-gray-darkest leading-tight text-sm mt-2">
                <span class="text-gray-dark text-2xs md:text-xs tracking-wide md:tracking-normal leading-none">Photographer Name</span>
                <span class="text-gray-dark text-2xs md:text-xs tracking-wide md:tracking-normal leading-none">/ Stock Image Company</span>
            </figcaption>
        </div>
    </div>

    <section class="container mx-auto template-landing__section">
        <div class="image-text py-20 border-solid border-b border-gray-light" data-aos="fade-up">
            <div class="image-text__inner mx-auto relative md:-mx-8 md:flex md:items-stretch md:space-between">
                <div class="image-text__image md:w-1/2 md:px-8 h-auto md:flex md:items-center">
                    <img src="https://images.unsplash.com/photo-1483736762161-1d107f3c78e1?ixlib&#x3D;rb-1.2.1&amp;ixid&#x3D;eyJhcHBfaWQiOjEyMDd9&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;w&#x3D;1567&amp;q&#x3D;80" alt="image caption" class="w-full">
                </div>
                <div class="image-text__text md:w-1/2 md:px-8 md:flex md:items-center">
                    <div class="image-text__text__inner py-4 md:py-0 md:pt-0 md:pb-0">
                        <h2 class="font-bold text-gray-darkest text-2xl sm:text-3xl md:text-4xl leading-tight">
                            <a href="#" class="hover:text-primary-light transition">
                    The World’s Most Beautiful Libraries
                    </a>
                        </h2>
                        <p class="mt-4 text-gray-darkest text-sm md:text-base leading-normal">The Stadtbibliothek Stuttgart is the public library of the city of Stuttgart. It is organized as a department of the city&#x27;s cultural office and comprises the central library, 17 city district libraries, and two bookmobiles.
                            In 2013, it received the national award as Library of the Year.</p>
                        <a href="#" class="inline-block mt-6 text-primary hover:text-primary-light transition text-sm md:text-base font-bold leading-tight tracking-wider uppercase">
                  Learn More
                </a>
                    </div>
                </div>
            </div>
        </div>

        <div class="image-text py-20 border-solid border-b border-gray-light" data-aos="fade-up">
            <div class="image-text__inner mx-auto relative md:-mx-8 md:flex md:items-stretch md:space-between">
                <div class="image-text__image md:w-1/2 md:px-8 h-auto md:flex md:items-center">
                    <img src="https://images.unsplash.com/photo-1483736762161-1d107f3c78e1?ixlib&#x3D;rb-1.2.1&amp;ixid&#x3D;eyJhcHBfaWQiOjEyMDd9&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;w&#x3D;1567&amp;q&#x3D;80" alt="image caption" class="w-full">
                </div>
                <div class="image-text__text md:w-1/2 md:px-8 md:flex md:items-center">
                    <div class="image-text__text__inner py-4 md:py-0 md:pt-0 md:pb-0">
                        <h2 class="font-bold text-gray-darkest text-2xl sm:text-3xl md:text-4xl leading-tight">
                            <a href="#" class="hover:text-primary-light transition">
                    The World’s Most Beautiful Libraries
                    </a>
                        </h2>
                        <p class="mt-4 text-gray-darkest text-sm md:text-base leading-normal">The Stadtbibliothek Stuttgart is the public library of the city of Stuttgart. It is organized as a department of the city&#x27;s cultural office and comprises the central library, 17 city district libraries, and two bookmobiles.
                            In 2013, it received the national award as Library of the Year.</p>
                        <a href="#" class="inline-block mt-6 text-primary hover:text-primary-light transition text-sm md:text-base font-bold leading-tight tracking-wider uppercase">
                  Learn More
                </a>
                    </div>
                </div>
            </div>
        </div>

        <div class="image-text py-20 border-solid border-b border-gray-light" data-aos="fade-up">
            <div class="image-text__inner mx-auto relative md:-mx-8 md:flex md:items-stretch md:space-between">
                <div class="image-text__image md:w-1/2 md:px-8 h-auto md:flex md:items-center">
                    <img src="https://images.unsplash.com/photo-1483736762161-1d107f3c78e1?ixlib&#x3D;rb-1.2.1&amp;ixid&#x3D;eyJhcHBfaWQiOjEyMDd9&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;w&#x3D;1567&amp;q&#x3D;80" alt="image caption" class="w-full">
                </div>
                <div class="image-text__text md:w-1/2 md:px-8 md:flex md:items-center">
                    <div class="image-text__text__inner py-4 md:py-0 md:pt-0 md:pb-0">
                        <h2 class="font-bold text-gray-darkest text-2xl sm:text-3xl md:text-4xl leading-tight">
                            <a href="#" class="hover:text-primary-light transition">
                    The World’s Most Beautiful Libraries
                    </a>
                        </h2>
                        <p class="mt-4 text-gray-darkest text-sm md:text-base leading-normal">The Stadtbibliothek Stuttgart is the public library of the city of Stuttgart. It is organized as a department of the city&#x27;s cultural office and comprises the central library, 17 city district libraries, and two bookmobiles.
                            In 2013, it received the national award as Library of the Year.</p>
                        <a href="#" class="inline-block mt-6 text-primary hover:text-primary-light transition text-sm md:text-base font-bold leading-tight tracking-wider uppercase">
                  Learn More
                </a>
                    </div>
                </div>
            </div>
        </div>

    </section>
    <section class="container mx-auto pt-20 pb-6 template-landing__section">
        <div class="card-group">
            <h2 class="heading text-black font-bold text-2xl md:text-3xl text-center">Latest News</h2>
            <p class="max-w-screen-lg mx-auto mt-2 text-black font-normal text-lg md:text-xl font-sans text-center">Your source for all the latest updates from around the art world</p>
            <div class="card-group__body lg:flex lg:flex-row lg:-ml-16 mt-8">
                <div class="lg:w-1/3 lg:pl-16">
                    <div class="card mb-16 md:mb-12 w-full">
                        <div class="card__image">
                            <a href="#" class="block hover:opacity-75 transition">
                                <figure class="m-0 w-full">
                                    <img class="w-full" src="https://images.unsplash.com/photo-1483736762161-1d107f3c78e1?ixlib&#x3D;rb-1.2.1&amp;ixid&#x3D;eyJhcHBfaWQiOjEyMDd9&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;w&#x3D;1567&amp;q&#x3D;80" alt="">
                                </figure>
                            </a>
                        </div>
                        <div class="card__content mt-6 pr-4">
                            <div class="card-content">
                                <div class="label font-bold text-2xs md:text-xs text-gray-darker uppercase leading-tight tracking-wider">Healthcare</div>
                                <a href="#" class="card-content__heading-link">
                                    <h2 class="heading font-bold text-xl md:text-2xl text-black leading-tight mt-3">These Artifacts Were Stolen. Why Is It So Hard to Get Them Back?</h2>
                                </a>
                                <p class="description text-gray-darkest text-sm md:text-base leading-normal mt-3">The Benin Bronzes, some of Africa’s greatest treasures, were looted over 120 years ago. After a chance encounter, two men made it their mission to return them.</p>
                                <div class="mt-4">
                                    <ul class="comma-separated-list list-reset">
                                        <li class="author inline text-gray-dark text-xs md:text-sm tracking-wide md:tracking-normal">Emily Dickinson</li>
                                        <li class="author inline text-gray-dark text-xs md:text-sm tracking-wide md:tracking-normal">Walt Wiltman</li>
                                        <li class="author inline text-gray-dark text-xs md:text-sm tracking-wide md:tracking-normal">Virginia Woolf</li>
                                    </ul>
                                </div>
                                <time class="date text-gray-dark text-base mt-4 block tracking-wide md:tracking-normal">  March 7, 2020</time>

                            </div>

                        </div>
                    </div>
                </div>
                <div class="lg:w-1/3 lg:pl-16">
                    <div class="card mb-16 md:mb-12 w-full">
                        <div class="card__image">
                            <a href="#" class="block hover:opacity-75 transition">
                                <figure class="m-0 w-full">
                                    <img class="w-full" src="https://images.unsplash.com/photo-1483736762161-1d107f3c78e1?ixlib&#x3D;rb-1.2.1&amp;ixid&#x3D;eyJhcHBfaWQiOjEyMDd9&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;w&#x3D;1567&amp;q&#x3D;80" alt="">
                                </figure>
                            </a>
                        </div>
                        <div class="card__content mt-6 pr-4">
                            <div class="card-content">
                                <div class="label font-bold text-2xs md:text-xs text-gray-darker uppercase leading-tight tracking-wider">Wellness</div>
                                <a href="#" class="card-content__heading-link">
                                    <h2 class="heading font-bold text-xl md:text-2xl text-black leading-tight mt-3">Obama Portraits to Tour the Nation</h2>
                                </a>
                                <p class="description text-gray-darkest text-sm md:text-base leading-normal mt-3">The works by Kehinde Wiley and Amy Sherald will make their way to five cities from June 2021 through May 2022, including a stop at the Brooklyn Museum.</p>
                                <div class="mt-4">
                                    <ul class="comma-separated-list list-reset">
                                        <li class="author inline text-gray-dark text-xs md:text-sm tracking-wide md:tracking-normal">Emily Dickinson</li>
                                        <li class="author inline text-gray-dark text-xs md:text-sm tracking-wide md:tracking-normal">Walt Wiltman</li>
                                        <li class="author inline text-gray-dark text-xs md:text-sm tracking-wide md:tracking-normal">Virginia Woolf</li>
                                    </ul>
                                </div>
                                <time class="date text-gray-dark text-base mt-4 block tracking-wide md:tracking-normal">  March 7, 2020</time>

                            </div>

                        </div>
                    </div>
                </div>
                <div class="lg:w-1/3 lg:pl-16">
                    <div class="card mb-16 md:mb-12 w-full">
                        <div class="card__image">
                            <a href="#" class="block hover:opacity-75 transition">
                                <figure class="m-0 w-full">
                                    <img class="w-full" src="https://images.unsplash.com/photo-1483736762161-1d107f3c78e1?ixlib&#x3D;rb-1.2.1&amp;ixid&#x3D;eyJhcHBfaWQiOjEyMDd9&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;w&#x3D;1567&amp;q&#x3D;80" alt="">
                                </figure>
                            </a>
                        </div>
                        <div class="card__content mt-6 pr-4">
                            <div class="card-content">
                                <div class="label font-bold text-2xs md:text-xs text-gray-darker uppercase leading-tight tracking-wider">Fitness</div>
                                <a href="#" class="card-content__heading-link">
                                    <h2 class="heading font-bold text-xl md:text-2xl text-black leading-tight mt-3">Museum C.E.O. Apologizes for Mistakes in Dealing With Former Manager</h2>
                                </a>
                                <p class="description text-gray-darkest text-sm md:text-base leading-normal mt-3">The apology to the staff from the Philadelphia Museum of Art executive involved a manager who had been the subject of employee complaints.</p>
                                <div class="mt-4">
                                    <ul class="comma-separated-list list-reset">
                                        <li class="author inline text-gray-dark text-xs md:text-sm tracking-wide md:tracking-normal">Emily Dickinson</li>
                                        <li class="author inline text-gray-dark text-xs md:text-sm tracking-wide md:tracking-normal">Walt Wiltman</li>
                                        <li class="author inline text-gray-dark text-xs md:text-sm tracking-wide md:tracking-normal">Virginia Woolf</li>
                                    </ul>
                                </div>
                                <time class="date text-gray-dark text-base mt-4 block tracking-wide md:tracking-normal">  March 7, 2020</time>

                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
</div>

</section>
<footer class="global-footer mt-20 py-16 bg-gray-darker">
    <div class="container md:flex md:justify-between md:items-center mx-auto mx-auto">
        <div class="text-center md:text-left text-xl md:text-2xl font-light text-white">ETR Component Library</div>
        <ul class="md:flex list-reset mt-12 md:mt-0 text-center md:text-left">
            <li class="md:mr-4"><a class="text-white" href="">Link</a></li>
            <li class="mt-6 md:mt-0 md:mr-4"><a class="text-white" href="">Link</a></li>
            <li class="mt-6 md:mt-0 md:mr-4"><a class="text-white" href="">Link</a></li>
        </ul>
        <div class="mt-12 mx-auto md:mt-0 md:mx-0">
            <div class="social-media flex flex-wrap justify-center">
                <div class="icon-bg flex justify-center items-center rounded-full bg-gray-dark w-12 h-12">

                    <?xml version="1.0" encoding="UTF-8"?>
                    <svg class="fill-current" version="1.1" viewBox="0 0 13 24" xmlns="http://www.w3.org/2000/svg">
<title>facebook-logo</title>
<path d="m8.0876 24v-10.93h3.6865l0.54965-4.2794h-4.2362v-2.7247c0-1.2367 0.34549-2.0808 2.1161-2.0808h2.2457v-3.8161c-1.0928-0.11568-2.1911-0.17203-3.29-0.16882-3.2586 0-5.4965 1.9905-5.4965 5.6417v3.1408h-3.663v4.2794h3.6708v10.938h4.4168z"  fill-rule="nonzero"/>
</svg>

                </div>

                <div class="icon-bg flex justify-center items-center rounded-full bg-gray-dark w-12 h-12">
                    <?xml version="1.0" encoding="UTF-8"?>
                    <svg class="fill-current" version="1.1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>instagram-logo</title>
<defs>
<polygon id="a" points="0 0.0075714 23.992 0.0075714 23.992 23.997 0 23.997"/>
</defs>
<path d="m11.996 0.0075714c-3.258 0-3.6665 0.01381-4.946 0.07219-1.2769 0.058238-2.1489 0.26105-2.912 0.55762-0.78886 0.30652-1.4579 0.71671-2.1248 1.3836-0.6669 0.66695-1.0771 1.336-1.3836 2.1248-0.29657 0.76305-0.49938 1.6351-0.55762 2.912-0.058381 1.2795-0.07219 1.688-0.07219 4.946 0 3.258 0.01381 3.6665 0.07219 4.946 0.058238 1.2769 0.26105 2.1489 0.55762 2.912 0.30652 0.78886 0.71671 1.4579 1.3836 2.1248 0.66695 0.6669 1.336 1.0771 2.1248 1.3837 0.76305 0.29652 1.6351 0.49933 2.912 0.55757 1.2795 0.058381 1.688 0.07219 4.946 0.07219 3.258 0 3.6665-0.01381 4.946-0.07219 1.2769-0.058238 2.1489-0.26105 2.912-0.55757 0.78886-0.30657 1.4579-0.71676 2.1248-1.3837 0.6669-0.66695 1.0771-1.336 1.3837-2.1248 0.29652-0.76305 0.49933-1.6351 0.55757-2.912 0.058381-1.2795 0.07219-1.688 0.07219-4.946 0-3.258-0.01381-3.6665-0.07219-4.946-0.058238-1.2769-0.26105-2.1489-0.55757-2.912-0.30657-0.78886-0.71676-1.4579-1.3837-2.1248-0.66695-0.6669-1.336-1.0771-2.1248-1.3836-0.76305-0.29657-1.6351-0.49938-2.912-0.55762-1.2795-0.058381-1.688-0.07219-4.946-0.07219zm0 2.1615c3.2031 0 3.5825 0.012238 4.8475 0.069952 1.1696 0.053333 1.8048 0.24876 2.2275 0.41305 0.55995 0.21762 0.95957 0.47757 1.3793 0.89738 0.41981 0.41976 0.67976 0.81938 0.89738 1.3793 0.16429 0.42271 0.35971 1.0579 0.41305 2.2275 0.057714 1.265 0.069952 1.6444 0.069952 4.8475 0 3.2031-0.012238 3.5825-0.069952 4.8475-0.053333 1.1696-0.24876 1.8048-0.41305 2.2275-0.21762 0.55995-0.47757 0.95957-0.89738 1.3793-0.41976 0.41981-0.81938 0.67976-1.3793 0.89738-0.42271 0.16429-1.0579 0.35971-2.2275 0.41305-1.2648 0.057714-1.6441 0.069952-4.8475 0.069952-3.2034 0-3.5827-0.012238-4.8475-0.069952-1.1696-0.053333-1.8048-0.24876-2.2275-0.41305-0.55995-0.21762-0.95957-0.47757-1.3793-0.89738-0.41976-0.41976-0.67976-0.81938-0.89738-1.3793-0.16429-0.42271-0.35971-1.0579-0.41305-2.2275-0.057714-1.265-0.069952-1.6444-0.069952-4.8475 0-3.2031 0.012238-3.5826 0.069952-4.8475 0.053333-1.1696 0.24876-1.8048 0.41305-2.2275 0.21762-0.55995 0.47757-0.95957 0.89738-1.3793 0.41976-0.41981 0.81938-0.67976 1.3793-0.89738 0.42271-0.16429 1.0579-0.35971 2.2275-0.41305 1.265-0.057714 1.6444-0.069952 4.8475-0.069952z"  mask="url(#b)"/>
<path d="m12 15.968c-2.1916 0-3.9682-1.7766-3.9682-3.9682 0-2.1916 1.7766-3.9682 3.9682-3.9682 2.1916 0 3.9682 1.7766 3.9682 3.9682 0 2.1916-1.7766 3.9682-3.9682 3.9682zm0-10.081c-3.3763 0-6.1132 2.737-6.1132 6.1132 0 3.3762 2.737 6.1132 6.1132 6.1132 3.3762 0 6.1132-2.737 6.1132-6.1132 0-3.3763-2.737-6.1132-6.1132-6.1132z" />
<path d="m19.925 5.6604c0 0.87533-0.7096 1.5849-1.5849 1.5849-0.87527 0-1.5849-0.70955-1.5849-1.5849s0.7096-1.5849 1.5849-1.5849c0.87533 0 1.5849 0.7096 1.5849 1.5849"/>
</svg>

                </div>

                <div class="icon-bg flex justify-center items-center rounded-full bg-gray-dark w-12 h-12">
                    <?xml version="1.0" encoding="UTF-8"?>
                    <svg class="fill-current" version="1.1" viewBox="0 0 24 23" xmlns="http://www.w3.org/2000/svg">
<title>linkedin-logo</title>
<path d="m24 14.097v8.8982h-5.1422v-8.3012c0-2.0871-0.74531-3.5066-2.6062-3.5066-1.4203 0-2.2688 0.95892-2.6391 1.8849-0.13594 0.33374-0.16875 0.7944-0.16875 1.2598v8.6679h-5.1516s0.070312-14.059 0-15.517h5.1469v2.1999c-0.009375 0.014102-0.023438 0.032904-0.032812 0.051707h0.032812v-0.051707c0.68438-1.0576 1.9031-2.5618 4.6359-2.5618 3.3891-0.0047006 5.925 2.2093 5.925 6.9757zm-21.089-14.097c-1.7578 0-2.9109 1.1563-2.9109 2.6793 0 1.4901 1.1203 2.684 2.8453 2.684h0.032812c1.7953 0 2.9109-1.194 2.9109-2.684-0.032812-1.523-1.1156-2.6793-2.8781-2.6793zm-2.6062 22.995h5.1422v-15.517h-5.1422v15.517z"  fill-rule="nonzero"/>
</svg>

                </div>

                <div class="icon-bg flex justify-center items-center rounded-full bg-gray-dark w-12 h-12">
                    <?xml version="1.0" encoding="UTF-8"?>
                    <svg class="fill-current" version="1.1" viewBox="0 0 24 19" xmlns="http://www.w3.org/2000/svg">
<title>medium-logo</title>
<path d="m2.8459 3.7661c0.029818-0.28546-0.082531-0.56761-0.30252-0.75973l-2.2409-2.6157v-0.39072h6.958l5.3782 11.429 4.7283-11.429h6.6331v0.39072l-1.916 1.7799c-0.16518 0.122-0.24711 0.32251-0.21289 0.52096v13.078c-0.034229 0.19845 0.047708 0.39896 0.21289 0.52096l1.8711 1.7799v0.39072h-9.4118v-0.39072l1.9384-1.8234c0.19048-0.18451 0.19048-0.23877 0.19048-0.52096v-10.571l-5.3894 13.263h-0.72829l-6.2745-13.263v8.8889c-0.052315 0.37371 0.075782 0.74996 0.34734 1.0202l2.521 2.963v0.39072h-7.1485v-0.39072l2.521-2.963c0.26958-0.2707 0.39021-0.64944 0.32493-1.0202v-10.278z"  fill-rule="nonzero"/>
</g>
</svg>

                </div>

                <div class="icon-bg flex justify-center items-center rounded-full bg-gray-dark w-12 h-12">
                    <?xml version="1.0" encoding="UTF-8"?>
                    <svg class="fill-current" version="1.1" viewBox="0 0 20 24" xmlns="http://www.w3.org/2000/svg">
<title>pinterest-logo</title>

<path d="m10.112-6.9565e-5c-6.721 0-10.112 4.6616-10.112 8.5506 0 0.72296 0.087478 1.4132 0.26296 2.0543 0.39983 1.4569 1.2598 2.6344 2.635 3.1769 0.32296 0.1313 0.61322 0.0053913 0.70643-0.33965 0.065565-0.24104 0.21913-0.84904 0.29026-1.101 0.093217-0.34487 0.060348-0.46557-0.20278-0.76139-0.34487-0.39443-0.608-0.85443-0.77217-1.4184-0.10417-0.3727-0.16452-0.78887-0.16452-1.2656 0-3.4619 2.6788-6.5621 6.9675-6.5621 3.796 0 5.8883 2.2459 5.8883 5.2475 0 0.88191-0.09287 1.7363-0.26261 2.5308-0.59183 2.7442-2.1417 4.7489-4.2233 4.7489-1.4791 0-2.591-1.1833-2.235-2.6346 0.20261-0.82713 0.49861-1.6871 0.74504-2.4923 0.27913-0.8873 0.50383-1.7146 0.50383-2.3664 0-1.1228-0.61896-2.0539-1.9061-2.0539-1.5172 0-2.7334 1.5117-2.7334 3.5384 0 0.38348 0.044 0.72852 0.098783 1.0243 0.1313 0.71217 0.35583 1.1447 0.35583 1.1447s-1.5499 6.3485-1.8183 7.4605c-0.54243 2.2183-0.082435 4.9301-0.043826 5.2037 0.021913 0.1647 0.2407 0.20261 0.33948 0.076696 0.1367-0.17513 1.9388-2.328 2.5527-4.4751 0.17496-0.61357 0.99148-3.7685 0.99148-3.7685 0.49287 0.90922 1.9334 1.709 3.4562 1.709 3.7082 0 6.4414-2.6623 7.3289-6.5513 0.20261-0.8873 0.30661-1.835 0.30661-2.8318 0-4.0645-3.5548-7.844-8.9557-7.844"/>

</svg>

                </div>

                <div class="icon-bg flex justify-center items-center rounded-full bg-gray-dark w-12 h-12">
                    <?xml version="1.0" encoding="UTF-8"?>
                    <svg version="1.1" viewBox="0 0 24 23" xmlns="http://www.w3.org/2000/svg">
<title>social-snapchat-logo</title>
<desc>Created with Sketch.</desc>
<g fill-rule="evenodd">
<path d="m12.148 22.244c-0.060374 0-0.11962-0.0017248-0.17893-0.0045773h-1.329e-4c-0.037792 0.0029189-0.07731 0.0045773-0.11683 0.0045773-1.3871 0-2.2775-0.62862-3.1384-1.2366-0.5945-0.41952-1.1555-0.81563-1.8165-0.92555-0.32252-0.053336-0.64352-0.080402-0.95376-0.080402-0.5589 0-0.99985 0.086173-1.3218 0.14906-0.1956 0.038211-0.36437 0.071048-0.49262 0.071048-0.13396 0-0.27915-0.028923-0.34225-0.24426-0.054861-0.18654-0.094512-0.36725-0.13264-0.54205-0.098364-0.44984-0.16817-0.72654-0.35693-0.75546-2.2-0.33939-2.8297-0.80223-2.9701-1.1306-0.019859-0.046967-0.03115-0.094001-0.033873-0.14057-0.0071067-0.12618 0.082358-0.23756 0.20716-0.25792 3.382-0.55625 4.8986-4.0087 4.9616-4.1554 0.0017269-0.0040466 0.0035201-0.0079605 0.0053798-0.012007 0.20702-0.41899 0.24754-0.78266 0.12088-1.0808-0.23206-0.54629-0.98902-0.78644-1.4901-0.94519-0.12261-0.038742-0.23884-0.07536-0.33049-0.11151-0.99985-0.39484-1.0831-0.80004-1.0438-1.0066 0.067015-0.35192 0.53785-0.59718 0.91869-0.59718 0.10441 0 0.19633 0.018508 0.27364 0.05453 0.44978 0.21049 0.85519 0.3171 1.2049 0.3171 0.48325 0 0.6942-0.20286 0.71997-0.22946-0.012287-0.2286-0.027497-0.46735-0.043039-0.71373-0.10076-1.597-0.22555-3.5815 0.28028-4.7142 1.5161-3.3954 4.7313-3.6591 5.6805-3.6591 0.024309 0 0.41617-0.0041793 0.41617-0.0041793l0.056189-1.9901e-4c0.95143 0 4.1736 0.26422 5.6905 3.6615 0.50597 1.1333 0.38084 3.1194 0.27995 4.7152l-0.0041843 0.06939c-0.013948 0.22223-0.027497 0.43823-0.038788 0.64501 0.024176 0.024611 0.21818 0.21122 0.65634 0.22794h4.649e-4c0.33295-0.012737 0.71565-0.11875 1.1356-0.31524 0.12307-0.057382 0.25976-0.069456 0.35281-0.069456 0.14213 0 0.28619 0.027464 0.40581 0.077284l0.0072395 0.0029852c0.33973 0.1202 0.56223 0.35803 0.56701 0.60653 0.0043836 0.23397-0.17441 0.58577-1.0517 0.93192-0.090926 0.03569-0.20716 0.072574-0.33023 0.11151-0.50159 0.15901-1.2583 0.39889-1.4903 0.94512-0.12672 0.29792-0.086144 0.66139 0.12075 1.0806 0.0018597 0.0040466 0.003985 0.0079606 0.0055791 0.012272 0.062897 0.14647 1.5782 3.598 4.9617 4.1549 0.12493 0.020565 0.21413 0.13181 0.20729 0.25812-0.0028559 0.047299-0.014346 0.094996-0.034604 0.1413-0.13954 0.32605-0.76872 0.7883-2.9695 1.1279-0.17979 0.027597-0.24946 0.26157-0.3568 0.75227-0.038987 0.17858-0.078506 0.35398-0.1329 0.53847-0.046824 0.16007-0.14672 0.23497-0.31475 0.23497h-0.027364c-0.11663 0-0.28241-0.02083-0.49249-0.062026-0.3726-0.072773-0.79037-0.13984-1.3218-0.13984-0.31037 0-0.63157 0.027066-0.95429 0.080402-0.66026 0.10992-1.2209 0.50523-1.8143 0.92422-0.86263 0.60932-1.7528 1.2379-3.1404 1.2379" fill="#FFFFFE"/>
<path d="m12.232 0h-1e-3c-0.020667 0-0.040133 0-0.0586 3.9963e-4 0 0-0.38473 0.0037965-0.41527 0.0037965-0.99007 0-4.3454 0.27554-5.9285 3.8215-0.5324 1.1929-0.4048 3.219-0.3024 4.847 0.012067 0.19196 0.024867 0.39124 0.035867 0.58386-0.081933 0.045291-0.23147 0.10164-0.46687 0.10164-0.31427 0-0.68567-0.099042-1.1037-0.29486-0.111-0.051952-0.239-0.077928-0.3804-0.077928-0.48967 0-1.0754 0.32184-1.1665 0.80159-0.0658 0.34541 0.088933 0.84941 1.2005 1.288 0.10027 0.03963 0.22087 0.077795 0.34827 0.11802 0.4592 0.14573 1.1533 0.36579 1.3417 0.80905 0.0976 0.22965 0.058667 0.52525-0.1154 0.87825-0.0038 0.0079926-0.0076667 0.015852-0.011133 0.024111-0.061067 0.142-1.5301 3.4879-4.7918 4.0243-0.2508 0.041362-0.43 0.26489-0.41613 0.51839 0.0043333 0.075464 0.0222 0.15053 0.053133 0.22339 0.24473 0.57174 1.2775 0.99068 3.1577 1.2822 0.0628 0.084921 0.12813 0.38484 0.16813 0.56761 0.039333 0.1803 0.079867 0.36626 0.1376 0.56241 0.056667 0.19289 0.20387 0.42341 0.58227 0.42341 0.15287 0 0.33327-0.035234 0.542-0.076196 0.31327-0.061143 0.7422-0.14487 1.2792-0.14487 0.29773 0 0.6064 0.025843 0.9172 0.077328 0.60667 0.10104 1.1222 0.46504 1.719 0.88658 0.85493 0.60391 1.823 1.2875 3.2945 1.2875 0.0404 0 0.081067-0.0011989 0.12127-0.0041961 0.047733 0.0020647 0.10973 0.0041961 0.17573 0.0041961 1.4719 0 2.4399-0.68377 3.2942-1.2873 0.59813-0.42208 1.1133-0.786 1.72-0.88678 0.31027-0.051486 0.619-0.077328 0.91687-0.077328 0.51227 0 0.9176 0.06514 1.2791 0.13567 0.22653 0.044292 0.4088 0.066805 0.542 0.066805l0.013933 1.998e-4h0.013533c0.27947 0 0.47673-0.14753 0.55493-0.41535 0.056667-0.19209 0.097333-0.37325 0.13747-0.55662 0.0398-0.1823 0.10493-0.48082 0.16753-0.56528 1.8807-0.29166 2.9132-0.70994 3.1575-1.2793 0.0314-0.072866 0.0494-0.14853 0.053667-0.22459 0.0142-0.25363-0.1652-0.47689-0.41587-0.51812-3.2631-0.53737-4.731-3.8825-4.7919-4.0244-0.0034667-0.0081259-0.0071334-0.016252-0.0112-0.024111-0.1742-0.35294-0.21273-0.64833-0.11533-0.87799 0.18827-0.44326 0.88213-0.66332 1.3413-0.80878 0.12847-0.040762 0.2492-0.079127 0.34853-0.11829 0.81347-0.32097 1.2216-0.71514 1.213-1.1716-0.0070666-0.35847-0.2866-0.6783-0.73073-0.83682l-0.0014-5.3284e-4c-0.1494-0.061876-0.3268-0.095711-0.50047-0.095711-0.11873 0-0.29493 0.016118-0.45947 0.093047-0.38693 0.18117-0.73467 0.27961-1.0345 0.293-0.1988-0.0091915-0.32887-0.059278-0.40307-0.10017 0.0094-0.16511 0.02-0.33522 0.0312-0.51292l0.0042-0.069069c0.10287-1.6292 0.2306-3.657-0.30233-4.8508-1.5836-3.5474-4.9461-3.8234-5.939-3.8234zm0 0.49707c0.904 1.3321e-4 4.0175 0.24244 5.4847 3.5289 0.483 1.0819 0.35947 3.0423 0.26007 4.6173-0.0158 0.2497-0.031067 0.49181-0.043533 0.72333l-0.0054 0.099308 0.0666 0.073932c0.026667 0.029906 0.27793 0.29206 0.83633 0.31371l0.0093333 2.6642e-4 0.0091333-2.6642e-4c0.3692-0.01392 0.78533-0.12821 1.2373-0.33989 0.066267-0.031171 0.15487-0.04629 0.24847-0.04629 0.10693 0 0.22027 0.020048 0.31387 0.059412l0.014 0.005728c0.2368 0.08279 0.40433 0.23931 0.40713 0.38065 0.0014 0.080326-0.058733 0.36819-0.89833 0.69949-0.082067 0.032503-0.1902 0.066738-0.31533 0.10623-0.54633 0.17351-1.3718 0.43493-1.6497 1.0887-0.1566 0.36892-0.114 0.80366 0.12707 1.2923 0.099333 0.23125 1.6585 3.7415 5.1685 4.3193-1e-3 0.016252-0.0049333 0.034701-0.0144 0.056081-0.0596 0.14007-0.4378 0.62336-2.7903 0.98615-0.36833 0.056747-0.4586 0.46883-0.56333 0.94825-0.037333 0.17144-0.076133 0.34435-0.12893 0.52358-0.015933 0.05415-0.019 0.057347-0.077267 0.057347h-0.027467c-0.10433 0-0.263-0.021713-0.44667-0.057613-0.33347-0.06514-0.79073-0.145-1.3745-0.145-0.32587 0-0.66173 0.028307-0.9984 0.084056-0.71993 0.11976-1.3057 0.53364-1.926 0.97143-0.8326 0.58826-1.6933 1.1961-3.0067 1.1961-0.057 0-0.1132-0.0018649-0.16933-0.0045291l-0.0148-7.993e-4 -0.014933 0.0013987c-0.032267 0.0026642-0.064667 0.0039297-0.097933 0.0039297-1.3131 0-2.1741-0.60784-3.0067-1.1959-0.62007-0.43799-1.2059-0.85188-1.9257-0.97163-0.33673-0.055748-0.67253-0.084056-0.99833-0.084056-0.58367 0-1.0409 0.088851-1.3747 0.15412-0.18353 0.036033-0.3424 0.066805-0.44653 0.066805-0.085067 0-0.0868-0.0049288-0.1048-0.066339-0.052733-0.1793-0.0914-0.35687-0.12887-0.52811-0.1048-0.47949-0.19547-0.89397-0.56333-0.95065-2.3528-0.363-2.7307-0.84748-2.7905-0.98715-0.0094667-0.021713-0.0134-0.040629-0.014267-0.057147 3.5097-0.57766 5.069-4.0875 5.1683-4.3193 0.24107-0.48895 0.28393-0.92341 0.12727-1.2921-0.27767-0.65393-1.1032-0.91562-1.6497-1.0891-0.12513-0.03943-0.23333-0.073732-0.31533-0.10623-0.70947-0.27987-0.92733-0.56181-0.89473-0.73272 0.0376-0.19708 0.3794-0.39743 0.67767-0.39743 0.067133 0 0.12573 0.010723 0.16927 0.031171 0.4846 0.22659 0.9272 0.34188 1.3149 0.34188 0.61007 0 0.88173-0.28367 0.91053-0.31584l0.066133-0.073798-0.0054-0.098975c-0.0124-0.23112-0.0276-0.47309-0.043467-0.72266-0.099267-1.575-0.22273-3.5341 0.26027-4.6162 1.4616-3.2744 4.5598-3.5267 5.4745-3.5267 0.022533 0 0.42007-0.0039297 0.42007-0.0039297 0.017133-2.6642e-4 0.034933-3.9963e-4 0.054067-3.9963e-4z" fill="#0B0C0A"/>
</g>
</svg>

                </div>

                <div class="icon-bg flex justify-center items-center rounded-full bg-gray-dark w-12 h-12">
                    <?xml version="1.0" encoding="UTF-8"?>
                    <svg class="fill-current" version="1.1" viewBox="0 0 15 24" xmlns="http://www.w3.org/2000/svg">
<title>tumblr-logo</title>

<path d="m4.871 0c-0.15612 1.2334-0.43715 2.2482-0.84305 3.06-0.4059 0.79622-0.93676 1.4831-1.6081 2.0608-0.6713 0.56207-1.4831 0.99917-2.4199 1.3115v3.3879h2.6541v8.415c0 1.0929 0.10929 1.9359 0.34349 2.5136 0.21858 0.57764 0.6401 1.1241 1.2334 1.6393 0.59327 0.49961 1.3115 0.90551 2.1545 1.1709 0.84305 0.28103 1.811 0.42152 2.9039 0.42152 0.96796 0 1.8735-0.093661 2.7009-0.29661 0.82747-0.18737 1.7486-0.53081 2.779-1.0148v-3.7781c-1.2022 0.79622-2.4043 1.1865-3.622 1.1865-0.68693 0-1.2958-0.15612-1.8266-0.48398-0.39032-0.2342-0.6713-0.54644-0.81185-0.93676-0.15612-0.4059-0.21858-1.2958-0.21858-2.6853v-6.1512h5.6829v-3.7626h-5.6829v-6.0576h-3.4191-4.913e-5z" fill-rule="nonzero"/>

</svg>

                </div>

                <div class="icon-bg flex justify-center items-center rounded-full bg-gray-dark w-12 h-12">
                    <?xml version="1.0" encoding="UTF-8"?>
                    <svg class="fill-current" version="1.1" viewBox="0 0 24 19" xmlns="http://www.w3.org/2000/svg">
<title>social-twitter-logo</title>
<path d="m7.4177 18.775c8.8435 0 13.679-7.2059 13.679-13.451 0-0.20588 0-0.41176-0.0099701-0.60784 0.93719-0.66667 1.7547-1.5 2.4028-2.451-0.85743 0.37255-1.7846 0.62745-2.7617 0.7451 0.99701-0.58824 1.7547-1.5098 2.1137-2.6176-0.92722 0.53922-1.9541 0.93137-3.0508 1.1471-0.87737-0.92157-2.1236-1.4902-3.5095-1.4902-2.652 0-4.8056 2.1176-4.8056 4.7255 0 0.37255 0.03988 0.73529 0.12961 1.0784-3.998-0.19608-7.5374-2.0784-9.9103-4.9412-0.40877 0.69608-0.64806 1.5098-0.64806 2.3725 0 1.6373 0.84746 3.0882 2.1436 3.9314-0.78764-0.019608-1.5254-0.23529-2.1735-0.58824v0.058824c0 2.2941 1.655 4.1961 3.8584 4.6373-0.3988 0.10784-0.82752 0.16667-1.2662 0.16667-0.30907 0-0.60818-0.029412-0.90728-0.088235 0.60818 1.8824 2.3829 3.2451 4.4865 3.2843-1.6451 1.2647-3.7188 2.0196-5.9721 2.0196-0.38883 0-0.7677-0.019608-1.1466-0.068628 2.1037 1.3529 4.6361 2.1373 7.348 2.1373"  fill-rule="nonzero"/>
</svg>

                </div>

                <div class="icon-bg flex justify-center items-center rounded-full bg-gray-dark w-12 h-12">
                    <?xml version="1.0" encoding="UTF-8"?>
                    <svg class="fill-current" version="1.1" viewBox="0 0 24 17" xmlns="http://www.w3.org/2000/svg">
<title>youtube-logo</title>
<path d="m12 0s-7.5117 3.9066e-5 -9.3897 0.50003c-1.0082 0.28-1.8388 1.1202-2.1156 2.1602-0.49424 1.9-0.49427 5.8398-0.49427 5.8398s3.8616e-5 3.9596 0.49427 5.8398c0.27677 1.04 1.0876 1.8603 2.1156 2.1402 1.8979 0.51999 9.3897 0.51996 9.3897 0.51996s7.5124-3.91e-5 9.3904-0.50003c1.028-0.28 1.8388-1.1003 2.1156-2.1402 0.49424-1.9 0.49427-5.8398 0.49427-5.8398s0.019731-3.9596-0.49427-5.8595c-0.27677-1.04-1.0876-1.8603-2.1156-2.1402-1.8781-0.51999-9.3904-0.51996-9.3904-0.51996v-2.04e-4zm-2.392 4.8603l6.2471 3.6397-6.2471 3.6397v-7.2793z" fill-rule="nonzero"/>
</svg>

                </div>

            </div>

        </div>
    </div>
</footer>

</div>
<div class="template-landing">
{{render '@global-header' }}
{{render '@hero' }}
<section class="container mx-auto template-landing__section">
  {{render '@image-text' }}
  {{render '@image-text' }}
  {{render '@image-text' }}
</section>
<section class="container mx-auto pt-20 pb-6 template-landing__section">
  {{render '@card-group' }}
</section>
{{render '@global-footer' }}
</div>
{
  "isTemplate": true
}
  • Content:
    .template-landing {
      &__section {
        .image-text {
          &:nth-child(even) {
            .image-text__inner {
              @apply flex-row-reverse;
            }
          }
        }
      }
    }
    
  • URL: /components/raw/landing/landing.scss
  • Filesystem Path: components/templates/landing/landing.scss
  • Size: 173 Bytes

There are no notes for this item.