SPOD Website Home Page Responsive Design Using Tailwind CSS

 

SPOD Website Home Page Responsive Design Using Tailwind CSS

Responsive web design using Tailwind CSS. Tailwind CSS, with its powerful utility classes, allows us to efficiently style our website and make it seamlessly responsive across various devices.




📌 What I have used to create this project:


- HTML

- Tailwind CSS

- Owl Carousel

- Few Line JavaScript

Source Code


index.html

 <!doctype html>

<html>

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Print-on-Demand & Dropshipping | SPOD</title>

  <!-- Google Fonts -->

  <link rel="preconnect" href="https://fonts.googleapis.com">

  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

  <link href="https://fonts.googleapis.com/css2?family=Archivo:wght@600&display=swap"     rel="stylesheet"> <link href="/dist/output.css" rel="stylesheet">

  <link href="https://fonts.googleapis.com/css2?family=Archivo:wght@500&display=swap"     rel="stylesheet">

    <!-- Owl Carousel CSS -->

  <link rel="stylesheet" href="styles/owl.carousel.min.css">

  <link href="/dist/output.css" rel="stylesheet">

</head>

<body>

    <!-- Header Area Start -->

    <header class="sticky top-0 z-30 bg-white">

        <div class="header-area max-w-screen-xl mx-auto">

            <div class="flex py-5 px-4 lg:py-3">

                 <nav class="flex justify-between w-full">

                     <div class="flex items-center">

                         <!-- Nevbar Part One Start -->

                         <a class="pr-6" href="#">

                             <img class="h-10 lg:h-12 mb-2" src="https://images.spod.com/image/upload//spod-logo-01.svg" alt="spod-log">

                         </a>

     

                         <div class="items-center space-x-2 hidden lg:flex">

                                         

                                 <a href="#" class="hover:bg-gray-100 font-semibold text-sm uppercase px-4 py-3 rounded text-center leading-none border border-transparent">

                                 Products

                                 </a>

                                 

                                 <a href="#" class=" hover:bg-gray-100 font-semibold text-sm uppercase px-4 py-3 rounded text-center leading-none border border-transparent">

                                 Integrations

                                 </a>

                                 

                                 <a href="#" class=" hover:bg-gray-100 font-semibold text-sm uppercase px-4 py-3 rounded text-center leading-none border border-transparent">

                                 How it works

                                 </a>

                                 

                                 <a href="https://linktr.ee/subrotobasak" class=" hover:bg-gray-100 font-semibold text-sm uppercase px-4 py-3 rounded text-center leading-none border border-transparent">

                                 About Us

                                 </a>

                                 

                                 <a href="https://linktr.ee/subrotobasak" class=" hover:bg-gray-100 font-semibold text-sm uppercase px-4 py-3 rounded text-center leading-none border border-transparent" target="_blank">

                                 Help

                                 </a>

                                 

                                 <a href="https://subrotobasak.blogspot.com/" class=" hover:bg-gray-100 font-semibold text-sm uppercase px-4 py-3 rounded text-center leading-none border border-transparent">

                                 Blog

                                 </a>

                         </div>

                     </div>

                     

                     <!-- Navbar Part One End -->

     

                     <!-- Navbar Part Two Start -->

                         <div class="flex pl-6 items-center">

                             <a href="https://subrotobasak.blogspot.com/" type="button" class="hidden font-Archivo lg:flex  mr-5   rounded-md border-solid  border border-slate-300 hover:bg-violet-50 uppercase font-medium focus:ring-2 focus:outline-none focus:ring-violet-950 focus:ring-offset-2 text-center px-7 py-3 items-center

                             ">LOGIN</a>  

                             

                             <a href="https://subrotobasak.blogspot.com/" type="button" class="btn font-Archivo px-4 py-1.5 cursor-pointer"

                             >REGISTER</a>

     

                             <button id="mobile_icon" data-collapse-toggle="navbar-cta" type="button" 

                             class="inline-flex  items-center ml-4 p-2 w-10 h-10 justify-center text-sm text-gray-500  rounded-lg lg:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200  dark:text-gray-400 dark:hover:bg-gray-700  dark:focus:ring-gray-600">

                                 <span class="sr-only">Open main menu</span>

                                 <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">

                                     <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h15M1 7h15M1 13h15"/>

                                 </svg>

                             </button>

                         </div>

                     <!-- Navbar Part Two End -->

                 </nav>

            </div>

        </div>

    </header>


    <!-- Navbar for Mobile Start -->

    <div id="main_menu" class="hidden lg:hidden z-40 top-0 inset-x-0 p-2 transition transform origin-top-right fixed bg-white shadow-md">

        <div class="bg-white bg-transparent rounded-lg h-full  py-6 px-6 shadow-md font-Archivo border overflow-hidden">

            <div class="max-w-screen-xl mx-auto">

                <div class="px-5 pt-4">

                    <div class="flex items-center justify-between">

                        <div class="">

                            <a href="#">

                                <img class="h-10 w-auto" src="/assets/spod-logo.png" alt="#" srcset="">

                            </a>

                        </div>

                        <div class="flex justify-end">

                            <div class="ml-3 mr-4">

                                <button id="menu_close" type="button" class="inline-flex items-center justify-center p-2 rounded-md  hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out">

                                    <svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>

                                </button>

                            </div>

                        </div>

                    </div>

                </div>

                <div class="px-4 pt-6 pb-3">

                    <div class="flex flex-col">

                        <a class="btn-mobile" href="">Products</a>

                        <a class="btn-mobile" href="">Integrations</a>

                        <a class="btn-mobile" href="">How it works</a>

                        <a class="btn-mobile" href="">About Us</a>

                        <a class="btn-mobile" href="https://linktr.ee/subrotobasak">Help</a>

                        <a class="btn-mobile" href="https://subrotobasak.blogspot.com/">Blog</a>

                    </div>

                    <div class="mb-4">

                        <a class="text-black border-solid border  border-slate-300 justify-center bg-white hover:bg-violet-50  flex items-center focus:ring-2 focus:outline-none focus:ring-violet-950 focus:ring-offset-2 font-medium rounded-md text-center uppercase py-3 px-9" href="">Login</a>

                    </div>

                    <div class="mb-4">

                        <a class="btn py-3 px-9 justify-center" href="">Register</a>

                    </div>

                </div>

            </div>

        </div>

    </div>

    <!-- Navbar for Mobile End  -->


    

    <!-- Header Area End -->


    <!-- Main Area Start -->

    <main>

        <!-- Hero Area Start -->

        <div class="bg-white border-b border-solid border-gray-200">

            <div class="max-w-screen-xl mx-auto pb-8 px-4 lg:pb-24">

                <div class="lg:flex lg:flex-row lg:justify-between lg:items-center">

                    <div class="lg:w-5/12">

                        <h1 class=" font-Archivo text-3xl font-semibold leading-9 mb-4 lg:text-5xl lg:leading-13 lg:mb-4">

                            Transform ideas into high-quality,<br>printed products

                        </h1>

                        <h2 class="font-medium text-lg leading-6 mb-6 lg:text-2xl lg:leading-8  lg:mb-10">

                            Create, sell and spread your print-on-demand products. You’re backed by SPOD.

                        </h2>

                        <div class="flex items-center">

                            <a href="https://subrotobasak.blogspot.com/" class="btn font-Archivo px-4 py-2.5 ">

                                BEGIN NOW

                            </a>

                            <p class="font-medium text-lg text-gray-500 ml-4">

                                Free forever

                            </p>

                        </div>

                    </div>

                    <div class="lg:w-6/12">

                       <img src="./images/home-page-hero-image.png" alt="" srcset="">

                    </div>

                </div>

            </div>

        </div>

        <!-- Hero Area End -->


        <!-- Video Area Start -->

        <div class=" relative bg-gray-50">

            <div class="absolute bg-white left-0 bottom-0 w-full h-24 border-t border-gray-200"></div>

        

            <div class="max-w-screen-xl mx-auto pt-12 pb-12 px-4 lg:pt-32">

                <div class="mb-12 lg:text-center lg:w-6/12 lg:mx-auto lg:mb-24">

                    <h2 class="text-3xl font-medium leading-9 mb-4 lg:text-4xl">

                        You Sell It, We Print It.

                    </h2>

                    <p class="font-medium mb-4 lg:text-xl lg:mb-8 font-Archivo">

                        An efficient dropshipping print-on-demand service, SPOD equips you with all of the features needed to create, build and expand your print-on-demand offerings.

                    </p>

                    <p class="font-medium mb-4 lg:text-xl lg:mb-8 font-Archivo ">

                        Breathe life into your brand while SPOD takes care of the rest.

                    </p>

                </div>

        

                <ul class="mb-10 space-y-10 md:space-y-0 md:grid md:grid-cols-2 md:gap-x-8 md:gap-y-10">

                    <li class="flex flex-row items-start">

                        <div class="iconBg">

                            <img class="h-6 lg:h-10" src="images/time-speed.svg" alt="" srcset="">

                        </div>

        

                        <div class="ml-4">

                            <div class="font-semibold text-lg lg:text-xl">

                                Under 48-Hour Production

                            </div>

                            <div class="lg:text-xl">

                                We produce 95% of orders under 48 hours - meaning less time to your customers.

                            </div>

                        </div>

                    </li>

                    <li class="flex flex-row items-start">

                        <div class="iconBg">

                            <img class="h-6 lg:h-10" src="images/wallet.svg" alt="" srcset="">

                        </div>

                        <div class="ml-4">

                            <div class="font-semibold text-lg lg:text-xl">

                                Fair Prices, Quality Products

                            </div>

                            <div class="lg:text-xl">

                                Your brand is in our hands, so we’ll never sacrifice quality for price.

                            </div>

                        </div>

                    </li>

                    <li class="flex flex-row items-start">

                        <div class="iconBg">

                            <img class="h-6 lg:h-10" src="images/globe-filled.svg" alt="" srcset="">

                        </div>

                        <div class="ml-4">

                            <div class="font-semibold text-lg lg:text-xl">

                                Global Reach With a Local Feel

                            </div>

                            <div class="lg:text-xl">

                                With our US and EU facilities, you can sell to the world.

                            </div>

                        </div>

                    </li>

                    <li class="flex flex-row items-start">

                        <div class="iconBg">

                            <img class="h-6 lg:h-10" src="images/spreadgroup-icon.svg" alt="" srcset="">

                        </div>

                        <div class="ml-4">

                            <div class="font-semibold text-lg lg:text-xl">

                                Powered by <a href="#" target="_blank" class="underline">Spreadshirt</a>

                            </div>

                            <div class="lg:text-xl">

                                With 20 years' industry experience, we live printing and fulfillment.

                            </div>

                        </div>

                    </li>

                </ul>

        

        

                <div class="w-full rounded-xl overflow-hidden drop-shadow shadow-xl lg:w-6/12 lg:mt-16 lg:mx-auto">

                    <div class="cursor-pointer">

                        <div class="">

                            <div class="play-button">

                                <img class="absolute inset-2/4  -translate-x-2/4 -translate-y-2/4  z-10" src="./images/video-play-symbol.svg" alt="" srcset="">

                            </div>

                        <img src="https://img.youtube.com/vi/dquiDlvSgAg/maxresdefault.jpg" class="embed-responsive-item"></div>

                    </div>

                </div>

        

            </div>

        </div>

        <!-- Video Area End -->


        <!-- Integration Area Start -->

        <div class="relative bg-white">

            <div class="max-w-screen-xl mx-auto pt-12 pb-8 px-4 lg:pt-56 lg:pb-0">

                <div class="lg:flex lg:justify-between lg:items-center">

                    <!-- Integration Image -->

                    <div class="pb-8 lg:w-6/12">

                        <img src="./images/integrations-image.png" alt="" srcset="">

                    </div>

                    <!-- Integration Text -->

                    <div class="text-center lg:w-5/12 lg:text-left">

                        <h3 class="font-semibold uppercase mb-2">INTEGRATIONS</h3>

                        <h2 class="text-3xl font-medium font-Archivo leading-9 mb-4 lg:text-4xl">Plug In to Your Chosen <br>Shop System</h2>

                        <p class="font-medium mb-4 lg:text-xl font-Archivo">SPOD makes connecting products to multiple points of sale seamless and effortless.</p>

                        <a class="btn-white" href="#">SEE ALL INTEGRATIONS</a>

                    </div>

                </div>

            </div>

        </div>

        <!-- Integration Area End -->


        <!-- Integration Slider Start -->

        <div class=" bg-white relative integration-area">

            <div class="pt-10 pb-32 px-0 ">

                <div class="all-sliders owl-carousel ">

                    <div class="h-[250px] mx-2 rounded-xl border border-gray-300 shadow bg-gray-50 lg:mx-4">

                        <div class="px-4 py-6 flex flex-row space-x-4 lg:py-8 lg:px-8">

                        <div class="flex-shrink-0">

                            <img class="mx-auto h-14 lg:h-20" src="./images/woo-logo.svg" alt="" srcset="">

                        </div>


                        <div class="">

                            <h2 class="text-lg font-semibold leading-8 lg:text-2xl lg:mb-2">

                                Woo<wbr>Commerce

                            </h2>

                            <p class="mb-3 leading-5 lg:text-lg lg:leading-tight">

                                Add print-on-demand products to your store with ease

                            </p>


                            <div class="font-semibold text-sm">

                                GO TO DETAILS →

                            </div>

                        </div>

                    </div>

                    </div>

                    

                    <div class="h-[250px] mx-2 rounded-xl border border-gray-300 shadow bg-gray-50 lg:mx-4">

                        <div class="px-4 py-6 flex flex-row space-x-4 lg:py-8 lg:px-8">

                        <div class="flex-shrink-0">

                                <img class="relative mx-auto h-14 lg:h-20" src="./images/orderdesk-logo.svg" alt="orderdesk-logo">

                        </div>


                        <div class="">

                            <h2 class="text-lg font-semibold leading-8 lg:text-2xl lg:mb-2">

                                Order Desk

                            </h2>

                            <p class="mb-3 leading-5 lg:text-lg lg:leading-tight">

                                 Sell on Amazon, eBay, Etsy and more

                            </p>


                            <div class="font-semibold text-sm">

                                GO TO DETAILS →

                            </div>

                        </div>

                    </div>

                    </div>


                    <div class="h-[250px] mx-2 rounded-xl border border-gray-300 shadow bg-gray-50 lg:mx-4">

                        <div class="px-4 py-6 flex flex-row space-x-4 lg:py-8 lg:px-8">

                        <div class="flex-shrink-0">

                                <img class="relative mx-auto h-14 lg:h-20" src="./images/magento-logo.svg" alt="magento-logo">

    

                        </div>

                        <div class="">

                            <h2 class="text-lg font-semibold leading-8 lg:text-2xl lg:mb-2">

                                Magento

                            </h2>

                            <p class="mb-3 leading-5 lg:text-lg lg:leading-tight">

                                 Build a powerful POD store and sync with SPOD

                            </p>


                            <div class="font-semibold text-sm">

                                GO TO DETAILS →

                            </div>

                        </div>

                    </div>

                    </div>


                    <div class="h-[250px] mx-2 rounded-xl border border-gray-300 shadow bg-gray-50 lg:mx-4">

                        <div class="px-4 py-6 flex flex-row space-x-4 lg:py-8 lg:px-8">

                        <div class="flex-shrink-0">

                                <img class="relative mx-auto h-14 lg:h-20" src="./images/api-logo.svg" alt="api-logo">

                        </div>

                        <div class="">

                            <h2 class="text-lg font-semibold leading-8 lg:text-2xl lg:mb-2">

                                Our API

                            </h2>

                            <p class="mb-3 leading-5 lg:text-lg lg:leading-tight">

                                Use SPOD’s POD features your own way

                            </p>

                            <div class="font-semibold text-sm">

                                GO TO DETAILS →

                            </div>

                        </div>

                    </div>

                    </div>


                    <div class="h-[250px] mx-2 rounded-xl border border-gray-300 shadow bg-gray-50 lg:mx-4">

                        <div class="px-4 py-6 flex flex-row space-x-4 lg:py-8 lg:px-8">

                        <div class="flex-shrink-0">

                                <img class="relative mx-auto h-14 lg:h-20" src="./images/squarespace-logo.svg" alt="squarespace-logo">

                        </div>

                        <div class="">

                            <h2 class="text-lg font-semibold leading-8 lg:text-2xl lg:mb-2">

                                Squarespace

                            </h2>

                            <p class="mb-3 leading-5 lg:text-lg lg:leading-tight">

                                Sell your products in a stylish online store

                            </p>


                            <div class="font-semibold text-sm">

                                GO TO DETAILS →

                            </div>

                        </div>

                    </div>

                    </div>


                    <div class="h-[250px] mx-2 rounded-xl border border-gray-300 shadow bg-gray-50 lg:mx-4">

                        <div class="px-4 py-6 flex flex-row space-x-4 lg:py-8 lg:px-8">

                        <div class="flex-shrink-0">

                                <img class="relative mx-auto h-14 lg:h-20" src="./images/shopify-logo.svg" alt="shopify-logo">

                        </div>


                        <div class="">

                            <h2 class="text-lg font-semibold leading-8 lg:text-2xl lg:mb-2">

                                Shopify

                            </h2>

                            <p class="mb-3 leading-5 lg:text-lg lg:leading-tight">

                                Quick and easy way to start an online store

                            </p>


                            <div class="font-semibold text-sm">

                                GO TO DETAILS →

                            </div>

                        </div>

                    </div>

                    </div>

                </div>

            </div>

        </div>

        <!-- Integration Slider End -->


        <!-- Testimonial Area Start -->

        <div class="relative bg-white">

            

            <div class="absolute bg-gray-100 left-0 bottom-0 w-full h-1/2 border-t border-gray-200">

            </div>


            <div class="max-w-screen-xl mx-auto pt-8 pb-6 px-4 lg:pb-16 lg:pt-28">

                <div class="w-full relative rounded-lg bg-violet-950 pb-8 pt-8 text-white lg:w-10/12 lg:mx-auto lg:py-16">

                    <div class="w-10/12 m-auto lg:flex">

                        <div class="font-semibold mr-12 mb-4 opacity-60">

                            <svg xmlns="http://www.w3.org/2000/svg" class="h-8 lg:h-20 text-white opacity-50" fill="currentColor" viewBox="0 0 60 60"><polygon points="1.8 50.9 1.8 30.2 11.7 5.8 23.3 5.8 14.7 30.2 23.3 30.2 23.3 50.9 "></polygon><polygon points="33.9 50.9 33.9 30.2 44.2 5.8 54.9 5.8 46.6 30.2 54.9 30.2 54.9 50.9 "></polygon></svg>

                        </div>

                        <div>

                            <h3 class="font-Archivo font-medium opacity-90 text-lg mb-6 leading-snug lg:text-2xl">

                                Great and affordable products - super easy-to-use functions. I really enjoy creating new products with SPOD. Please keep adding new products for us to print on. Love your work.

                            </h3>

                            <p class="font-Archivo text-lg opacity-80 lg:text-2xl">Rock Reflections</p>

                            <div class="font-Archivo flex items-center text-lg">

                                <img class="h-4 mr-2" src="./images/shopify-logo.png" alt="" srcset="">

                                Shopify Shop

                            </div>

                        </div>

                    </div>

                </div>

            </div>

        </div> 

        <!-- Testimonial Area End -->


        <!-- Product Area Start -->

        <div class="relative bg-gray-100">

            <div>

                <div class="text-center">

                    <h3 class="font-semibold uppercase mb-2 font-Archivo">OUR PRODUCTS</h3>

                    <h2 class="text-3xl font-medium font-Archivo mb-4">Build Your Brand <br>One Product at a Time</h2>

                    <p class="text-xl font-medium mb-9 font-Archivo">Inspire yourself with 100s of items. Turn your vision into a real collection.</p>

                    <a class="btn-white bg-white" href="#">SEE ALL PRODUCTS</a>

                </div>

                <div class="pt-16 pb-32 px-0 products-area integration-area">

                    <div class="all-products owl-carousel ">

                        <div class="w-full inline-block">

                            <div class="px-5 lg:px-4 flex flex-col items-center">

                               <img src="./products_images/product-1.png" alt="" srcset="">

                               <h3 class="font-semibold text-lg my-1 lg:text-xl">Men’s Premium Hoodie</h3>

                                    <p class="my-1 text-gray-600 lg:text-xl">Spreadshirt 20</p>

                                    <p class="font-medium text-lg my-1 lg:text-2xl">$ 27.37</p>

                            </div>

                        </div>


                        <div class="w-full inline-block">

                            <div class="px-5 lg:px-4 flex flex-col items-center">

                               <img src="./products_images/product-2.png" alt="" srcset="">

                               <h3 class="font-semibold text-lg my-1 lg:text-xl">Women's T-Shirt</h3>

                                    <p class="my-1 text-gray-600 lg:text-xl">Fruit of the Loom L39VR</p>

                                    <p class="font-medium text-lg my-1 lg:text-2xl">$ 11.14</p>

                            </div>

                        </div>


                        <div class="w-full inline-block">

                            <div class="px-5 lg:px-4 flex flex-col items-center">

                               <img src="./products_images/product-3.png" alt="" srcset="">

                               <h3 class="font-semibold text-lg my-1 lg:text-xl">Women's Flowy Tank Top by ...</h3>

                                    <p class="my-1 text-gray-600 lg:text-xl">Bella B8800</p>

                                    <p class="font-medium text-lg my-1 lg:text-2xl">$ 16.70</p>

                            </div> 

                        </div>


                        <div class="w-full inline-block">

                            <div class="px-5 lg:px-4 flex flex-col items-center">

                               <img src="./products_images/product-4.png" alt="" srcset="">

                               <h3 class="font-semibold text-lg my-1 lg:text-xl">Men’s Premium T-Shirt</h3>

                                    <p class="my-1 text-gray-600 lg:text-xl">Spreadshirt 812</p>

                                    <p class="font-medium text-lg my-1 lg:text-2xl">$14.87</p>

                            </div> 

                        </div>


                        <div class="w-full inline-block">

                            <div class="px-5 lg:px-4 flex flex-col items-center">

                               <img src="./products_images/product-5.png" alt="" srcset="">

                               <h3 class="font-semibold text-lg my-1 lg:text-xl">Men's Premium Long Sleeve ...</h3>

                                    <p class="my-1 text-gray-600 lg:text-xl">Spreadshirt 875</p>

                                    <p class="font-medium text-lg my-1 lg:text-2xl">$ 15.70</p>

                            </div> 

                        </div>


                        <div class="w-full inline-block">

                            <div class="px-5 lg:px-4 flex flex-col items-center">

                               <img src="./products_images/product-6.png" alt="" srcset="">

                               <h3 class="font-semibold text-lg my-1 lg:text-xl">Men's Premium Long Sleeve ...</h3>

                                    <p class="my-1 text-gray-600 lg:text-xl">Contrast Coffee Mug</p>

                                    <p class="font-medium text-lg my-1 lg:text-2xl">$ 8.71</p>

                            </div> 

                        </div>

                    </div>

                </div>

            </div>

        </div>

        <!-- Product Area End -->


        <!-- Brand Area Start -->

        <div class="bg-gray-100 border-b border-gray-200">

            <div class="max-w-screen-xl mx-auto pt-12 pb-6 px-4 lg:pt-32 lg:pb-40">

                <h2 class="text-2xl text-center font-Archivo font-medium lg:text-4xl mb-4 lg:mb-24">Brands</h2>

                <div class="mt-4 mb-6 lg:w-10/12 lg:mx-auto">

                    <div class="grid grid-cols-6 gap-x-6 gap-y-4 justify-items-center

                    items-center lg:grid-cols-8 lg:gap-24">

                        <div class="order-1 col-span-2 lg:order-1">

                            <img class="max-h-8 mx-auto lg:max-h-16" src="./images/american-apparel.png" alt="" srcset="">

                        </div>

                        <div class="order-2 col-span-2 lg:order-2">

                            <img class="max-h-5 mx-auto lg:max-h-16" src="./images/anvil.png" alt="" srcset="">

                        </div>

                        <div class="order-3 col-span-2 lg:order-3 lg:col-start-auto">

                            <img class="max-h-8 mx-auto" src="./images/bella-canvas.png" alt="" srcset="">

                        </div>

                        <div class="order-7 col-span-2 lg:order-4 lg:col-start-auto">

                            <img src="./images/gildan.png" alt="" srcset="">

                        </div>

                        <div class="order-4 col-span-2 lg:order-5 col-start-2">

                            <img class="max-h-12 mx-auto lg:max-h-24" src="./images/hanes.png" alt="" srcset="">

                        </div>

                        <div class="order-5 col-span-2 lg:order-6 lg:col-start-auto">

                            <img class="max-h-12 mx-auto lg:max-h-24" src="./images/fruit-of-the-loom.png" alt="" srcset="">

                        </div>

                        <div class="order-6 col-span-2 col-start-2 lg:order-7 lg:col-start-auto">

                            <img class="max-h-12 mx-auto lg:max-h-24" src="./images/rabbit-skins.png" alt="" srcset="">

                        </div>

                    </div>

                </div>

            </div>

        </div>

        <!-- Brand Area End -->


        <!-- Sustainability Area Start -->

        <div class="bg-gray-50 border-b border-gray-200">

            <div class="max-w-screen-xl mx-auto pt-12 pb-8 px-4 lg:pt-16 lg:pb-28">

                <div class="lg:flex lg:justify-between items-center">

                    <div class="text-center lg:text-left lg:w-6/12">

                        <h3 class="uppercase font-semibold mb-2">SPOD &amp; Sustainability</h3>

                        <h2 class="text-3xl lg:text-4xl font-medium leading-9 mb-4 font-Archivo">Committed to a Greener Future with Print on Demand</h2>

                        <p class="font-medium mb-4 lg:text-xl font-Archivo">Print on demand is a more sustainable alternative to the fashion industry standard. Producing items on-demand means no overproduction and no wasteful overstock. Our core business model keeps our footprint smaller for a greener future.</p>

                    </div>

    

                    <div class="pb-8 lg:pb-0 lg:w-6/12">

                        <img src="./images/organic-section-image.png" alt="" srcset="">

                    </div>

                </div>


                <div class="lg:flex">

                    <ul class="space-y-12 pt-2 lg:grid lg:grid-cols-3 lg:gap-x-8 lg:gap-y-6 lg:space-y-0 lg:pt-16">

                        <li class="mb-10 flex">

                            <span class="p-2 rounded-lg mr-6 bg-violet-950 h-14 text-white">

                                <svg class="fill-current" xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 -3 38 40" alt="Sustainable">

                                     <path d="M17.5,25.55 C15.760303,25.55 14.35,26.960303 14.35,28.7 C14.35,30.439697 15.760303,31.85 17.5,31.85 C19.239697,31.85 20.65,30.439697 20.65,28.7 C20.638077,26.9652657 19.2347343,25.561923 17.5,25.55 L17.5,25.55 Z" id="Path" fill-rule="evenodd" fill="none"></path>

                                     <circle id="Oval" cx="6.60625" cy="28.7" r="3.15" fill="none"></circle>

                                     <path d="M28.4375,25.55 C26.697803,25.55 25.2875,26.960303 25.2875,28.7 C25.2875,30.439697 26.697803,31.85 28.4375,31.85 C30.177197,31.85 31.5875,30.439697 31.5875,28.7 C31.5875,27.8645681 31.255626,27.0633532 30.6648864,26.4726136 C30.0741468,25.881874 29.2729319,25.55 28.4375,25.55 L28.4375,25.55 Z" id="Path" fill="none"></path>

                                     <path d="M30.31875,23.690625 L4.68125,23.690625 C3.43970531,23.690625 2.24901105,24.1838267 1.37110638,25.0617314 C0.493201709,25.9396361 0,27.1303303 0,28.371875 L0,29.028125 C0,31.613508 2.09586701,33.709375 4.68125,33.709375 L30.31875,33.709375 C32.904133,33.709375 35,31.613508 35,29.028125 L35,28.371875 C35,27.1303303 34.5067983,25.9396361 33.6288936,25.0617314 C32.7509889,24.1838267 31.5602947,23.690625 30.31875,23.690625 Z M6.5625,31.85 C5.28649067,31.8588614 4.13118976,31.0970324 3.63672973,29.9206874 C3.14226969,28.7443424 3.40634402,27.385899 4.30549128,26.480464 C5.20463854,25.575029 6.5612087,25.3014947 7.74097082,25.7877453 C8.92073295,26.2739959 9.690625,27.4239599 9.690625,28.7 C9.690625,30.4311899 8.29364818,31.8379778 6.5625,31.85 Z M17.5,31.85 C15.760303,31.85 14.35,30.439697 14.35,28.7 C14.35,26.960303 15.760303,25.55 17.5,25.55 C19.239697,25.55 20.65,26.960303 20.65,28.7 C20.638077,30.4347343 19.2347343,31.838077 17.5,31.85 L17.5,31.85 Z M28.4375,31.85 C26.697803,31.85 25.2875,30.439697 25.2875,28.7 C25.2875,26.960303 26.697803,25.55 28.4375,25.55 C30.177197,25.55 31.5875,26.960303 31.5875,28.7 C31.5875,29.5354319 31.255626,30.3366468 30.6648864,30.9273864 C30.0741468,31.518126 29.2729319,31.85 28.4375,31.85 L28.4375,31.85 Z" id="Shape"></path>

                                     <path d="M7.48125,21.634395 L27.825,21.634395 C29.0331229,21.634395 30.0125,20.6549979 30.0125,19.446875 L30.0125,18.528125 C30.854101,17.9208017 31.5926767,17.182226 32.2,16.340625 C34.8054622,12.1789179 35.43803,7.07834021 33.928125,2.40625 C33.8192429,2.12729533 33.549442,1.94452701 33.25,1.946875 L33.03125,1.946875 C32.703125,2.1 32.15625,2.296875 31.478125,2.559375 L30.165625,3.0625 L30.165625,2.1875 C30.165625,0.97937711 29.1862479,0 27.978125,0 L17.36875,0 L17.36875,8.859375 L13.453125,7.021875 L9.75625,8.903125 L9.75625,0.153125 L7.48125,0.153125 C6.27312711,0.153125 5.29375,1.13250211 5.29375,2.340625 L5.29375,19.6 C5.37430036,20.7479463 6.33048458,21.6371976 7.48125,21.634395 Z M21.6125,9.209375 C23.58125,6.321875 30.821875,4.06875 32.55,3.303125 C32.6196193,3.27411695 32.6979106,3.27395316 32.7676507,3.30266967 C32.8373908,3.33138617 32.8928669,3.38663067 32.921875,3.45625 C34.2441761,7.59496611 33.6591011,12.1072572 31.325,15.771875 C29.6480891,18.1308248 27.0474768,19.6657428 24.171875,19.99375 C23.4116775,20.0940436 22.6400109,19.9319936 21.984375,19.534375 C21.984375,19.534375 21.984375,19.38125 21.984375,19.3375 C23.157709,18.4940206 24.2489868,17.541899 25.24375,16.49375 C27.2899047,14.3471539 28.9809012,11.8881939 30.253125,9.209375 L30.253125,9.209375 C28.7127221,11.6364475 26.8510474,13.8439669 24.71875,15.771875 C23.734375,16.625 22.53125,17.5875 21.240625,18.528125 C21.240625,18.528125 21.109375,18.528125 21.0875,18.528125 C20.7782689,18.1615988 20.5608073,17.7266756 20.453125,17.259375 C19.6979097,14.5319129 20.1183147,11.6128745 21.6125,9.209375 L21.6125,9.209375 Z" id="Shape"></path>

                                     <polygon points="13.4710737 5.075 15.7241987 6.475 15.7241987 6.29695726e-14 11.3929487 6.29695726e-14 11.2179487 6.29695726e-14 11.2179487 6.475"></polygon>

                                 </svg>

                             </span>

                             <div>

                                <h3 class="font-semibold text-xl mb-2 font-Archivo">Sustainable Production</h3>

                                <p class="text-black mb-4 lg:text-xl font-Archivo">Our most popular printing technique is water-saving and uses OEKO-TEX-certified vegan ink. Paperless production. Shipping in plastic-free packaging in 2022.</p>

                             </div>

                        </li>

                        <li class="mb-10 flex">

                            <span class="p-2 rounded-lg mr-6 bg-violet-950 h-14 text-white">

                                <svg class="fill-current" xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40" alt="Organic">

                                    <path d="M3.62451801,8 C9.28256445,8.66459593 15.2100417,13.837667 17.4732603,18.3820662 C19.1000947,22.0287866 19.1000947,26.1951351 17.4732603,29.8418555 C17.1623967,30.5824648 16.6678308,31.2315825 16.0362961,31.727871 C16.0362961,25.2615322 12.4438856,18.1305974 8.49223416,13.4784259 C8.33057569,13.3886157 8.33057569,13.51435 8.33057569,13.6041603 C10.6853063,17.2066042 12.3707968,21.2043199 13.3060641,25.4052286 C13.6832672,27.4888266 13.934736,30.0574001 14.1502806,32.5900495 C13.3965688,32.7871214 12.6048497,32.7871214 11.8511379,32.5900495 C7.96605679,31.5930237 4.69564254,28.9766923 2.87011182,25.4052286 C0.714665552,20.9686017 3.21139081,10.424877 3.46285954,8.19758257 C3.46125325,8.10107728 3.52960563,8.01753548 3.62451801,8 Z M37.0878213,15.6518342 C37.9679618,20.375854 35.2377299,26.3392553 32.1482569,29.1772595 C29.5866521,31.3621796 26.216839,32.3548378 22.879838,31.9074915 C22.237738,31.839862 21.621502,31.618017 21.0836327,31.2608576 C24.3706883,27.2912441 27.5499715,23.3036685 32.2021431,20.6273227 L32.2021431,20.6273227 L32.2021431,20.4836263 C29.06331,21.8898377 26.1800308,23.8079772 23.6701683,26.1596348 C22.276243,27.3390573 21.0655223,28.7192788 20.0777578,30.2549827 C19.6876533,29.6481098 19.4703092,28.9463989 19.449086,28.2252708 C19.2748939,24.8501845 20.5877116,21.5681402 23.0414964,19.2442447 C26.1489315,16.5140127 35.5071607,16.0290373 37.0878213,15.6518342 Z" id="Combined-Shape"></path>

                                </svg>

                             </span>

                             <div>

                                <h3 class="font-semibold text-xl mb-2 font-Archivo">Organic Collection</h3>

                                <p class="text-black mb-4 lg:text-xl font-Archivo">Spread Group’s growing organic collection keeps environmental impact low by using organic cotton grown in Turkey.</p>

                             </div>

                        </li>

                        <li class="mb-10 flex">

                            <span class="p-2 rounded-lg mr-6 bg-violet-950 h-14 text-white">

                                <svg class="fill-current" xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 -2 37 40" alt="Circularity"><path fill-rule="nonzero" d="M18.26.594C8.175.594 0 8.769 0 18.854s8.175 18.26 18.26 18.26 18.26-8.175 18.26-18.26A18.237 18.237 0 0 0 18.26.594ZM9.154 27.866c-.244.188-.54.295-.848.306a1.435 1.435 0 0 1-1.082-.517A14.119 14.119 0 0 1 4.871 14.57h-.235a1.388 1.388 0 0 1-1.318-.964 1.365 1.365 0 0 1 .823-1.671l2.66-.824h.188c.472-.08.952.09 1.27.447v.189a.87.87 0 0 1 .165.282l.8 2.659a1.365 1.365 0 0 1-.706 1.812h-.4a1.294 1.294 0 0 1-.87-.33c-.843 3.4-.061 7 2.117 9.742a1.388 1.388 0 0 1-.211 1.953Zm0-17.907a1.341 1.341 0 0 1 .164-1.93 14.236 14.236 0 0 1 13.319-2.611 1.388 1.388 0 0 1 .941-1.506 1.365 1.365 0 0 1 1.694.918l.824 2.659a.8.8 0 0 1 0 .235.588.588 0 0 1 0 .282v.212c.01.102.01.204 0 .306l-.165.188a.73.73 0 0 1-.165.212c-.089.056-.183.104-.282.141l-.188.118-2.66.823h-.4c-.69.16-1.39-.225-1.623-.894a1.365 1.365 0 0 1 .282-1.27 11.412 11.412 0 0 0-10.024 2.353 1.318 1.318 0 0 1-.87.306 1.388 1.388 0 0 1-.942-.542h.095Zm18.024 19.907a13.86 13.86 0 0 1-13.107 2.354 1.388 1.388 0 0 1-.94 1.53h-.4a1.365 1.365 0 0 1-1.39-.777l-.823-2.66a.87.87 0 0 1 0-.258.518.518 0 0 1 0-.26.682.682 0 0 1 0-.234 1.247 1.247 0 0 1 0-.283l.165-.188s0-.165.165-.212c.105-.102.224-.19.353-.259a.612.612 0 0 1 .211-.117l2.66-.8a1.365 1.365 0 0 1 1.717.894c.135.447.018.933-.306 1.27 3.448.869 7.104.076 9.883-2.14a1.341 1.341 0 0 1 1.906.21 1.388 1.388 0 0 1-.188 1.93h.094Zm5.2-4.094-2.658.824h-.4a1.295 1.295 0 0 1-.824-.283l-.259-.259v-.14l-.118-.236-.823-2.659a1.388 1.388 0 0 1 .918-1.718c.444-.127.922-.02 1.27.283a11.412 11.412 0 0 0-2.353-10.001 1.365 1.365 0 0 1 .165-1.93 1.388 1.388 0 0 1 1.93.189 14.26 14.26 0 0 1 2.588 13.295 1.348 1.348 0 1 1 .565 2.635Z"></path></svg>

                             </span>

                             <div>

                                <h3 class="font-semibold text-xl mb-2 font-Archivo">Circularity</h3>

                                <p class="text-black mb-4 lg:text-xl font-Archivo">Nothing wasted: any returned items are donated to charity or upcycled into fabric insulation.</p>

                             </div>

                        </li>

                    </ul>

                </div>

                <div class=" flex justify-center items-center">

                    <a class="btn-white bg-white m-0" href="#">

                        <div class="flex items-center text-lg">

                            <span class="text-emerald-600 mr-2">

                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 40 40" fill="currentColor">

                                    <path d="M3.62451801,8 C9.28256445,8.66459593 15.2100417,13.837667 17.4732603,18.3820662 C19.1000947,22.0287866 19.1000947,26.1951351 17.4732603,29.8418555 C17.1623967,30.5824648 16.6678308,31.2315825 16.0362961,31.727871 C16.0362961,25.2615322 12.4438856,18.1305974 8.49223416,13.4784259 C8.33057569,13.3886157 8.33057569,13.51435 8.33057569,13.6041603 C10.6853063,17.2066042 12.3707968,21.2043199 13.3060641,25.4052286 C13.6832672,27.4888266 13.934736,30.0574001 14.1502806,32.5900495 C13.3965688,32.7871214 12.6048497,32.7871214 11.8511379,32.5900495 C7.96605679,31.5930237 4.69564254,28.9766923 2.87011182,25.4052286 C0.714665552,20.9686017 3.21139081,10.424877 3.46285954,8.19758257 C3.46125325,8.10107728 3.52960563,8.01753548 3.62451801,8 Z M37.0878213,15.6518342 C37.9679618,20.375854 35.2377299,26.3392553 32.1482569,29.1772595 C29.5866521,31.3621796 26.216839,32.3548378 22.879838,31.9074915 C22.237738,31.839862 21.621502,31.618017 21.0836327,31.2608576 C24.3706883,27.2912441 27.5499715,23.3036685 32.2021431,20.6273227 L32.2021431,20.6273227 L32.2021431,20.4836263 C29.06331,21.8898377 26.1800308,23.8079772 23.6701683,26.1596348 C22.276243,27.3390573 21.0655223,28.7192788 20.0777578,30.2549827 C19.6876533,29.6481098 19.4703092,28.9463989 19.449086,28.2252708 C19.2748939,24.8501845 20.5877116,21.5681402 23.0414964,19.2442447 C26.1489315,16.5140127 35.5071607,16.0290373 37.0878213,15.6518342 Z" id="Combined-Shape"></path>

                                </svg>

                            </span>

                            EXPLORE THE COLLECTION

                        </div>

                    </a>

                </div>

            </div>

        </div>

        <!-- Sustainability Area End -->


        <!-- Facilitis Area Start -->

        <div class="bg-white">

            <div class="max-w-screen-xl mx-auto pt-24 pb-6 lg:pt-40">

                <div class="lg:flex lg:flex-row lg:items-center lg:justify-around">

                    <div class="lg:pb-8 lg:w-7/12">

                        <img src="./images/world2.png" alt="map image" srcset="">

                    </div>

                    <div class="text-center lg:text-left px-4 pt-24 font-Archivo lg:w-4/12">

                        <h3 class="uppercase font-semibold mb-2">Our FACILITIES</h3>

                        <h2 class="text-3xl font-medium leading-9 mb-4 lg:text-4xl">SPOD in the World</h2>

                        <p class="font-medium mb-4 lg:text-xl">With our production and delivery centres on both sides of the Atlantic, you can sell anywhere.</p>

                    </div>

                </div>

            </div>

        </div>

        <!-- Facilitis Area End -->


        <!-- Testimonial-2 Area Start -->

        <div class="bg-white relative">

            <div class="absolute bg-gray-50 left-0 bottom-0 w-full h-1/2 border-t border-gray-200"></div>

            <div class="max-w-screen-xl mx-auto pt-8 pb-6 px-4 lg:py-16 lg:pt-36">

                <div class="w-full relative rounded-lg bg-violet-950 pb-8 pt-8 text-white lg:w-10/12 lg:mx-auto lg:py-16">

                    <div class="w-10/12 m-auto lg:flex">

                        <div class="font-semibold mr-12 mb-4 opacity-60">

                            <svg xmlns="http://www.w3.org/2000/svg" class="h-8 lg:h-20 text-white" fill="currentColor" viewBox="0 0 60 60"><polygon points="1.8 50.9 1.8 30.2 11.7 5.8 23.3 5.8 14.7 30.2 23.3 30.2 23.3 50.9 "></polygon><polygon points="33.9 50.9 33.9 30.2 44.2 5.8 54.9 5.8 46.6 30.2 54.9 30.2 54.9 50.9 "></polygon></svg>

                        </div>

                        <div class="font-Archivo">

                            <p class="font-medium text-lg mb-6 leading-snug opacity-90 lg:text-2xl">

                                Easy to use &amp; works without any issues. No complaints at all. I would highly recommend other users to install the app. Fast production and fast shipping!!!

                            </p>

                            <p class="text-lg font-medium opacity-80 lg:text-2xl">

                                Jamgochi

                            </p>

                            <div class="flex items-center text-lg">

                                <img class="h-4 mr-2" src="./images/shopify-logo.png" alt="shopify logo">

                                Shopify Shop

                            </div>

                        </div>

                    </div>

                </div>

            </div>

        </div>

        <!-- Testimonial-2 Area End -->


        <!-- Help Center Area Start -->

        <div class="bg-gray-50 border-b border-gray-200">

            <div class="max-w-screen-xl mx-auto pt-12 pb-6 px-4">

                <div class="font-Archivo">

                    <h3 class="font-semibold uppercase mb-2">HELP Center</h3>

                    <h2 class="text-3xl font-medium leading-9 mb-2 lg:text-4xl">Discover Resources</h2>

                    <p class="font-medium mb-4 lg:text-xl lg:mb-6">Dive into tailor-made information and get more out of SPOD.</p>

                </div>

                <div class="lg:flex lg:flex-row lg:justify-between">

                    <ul class="space-y-12 pt-2 mb-12 lg:w-8/12 lg:grid lg:grid-cols-2 lg:gap-x-12 lg:gap-y-6 lg:space-y-0">

                        <li class="mb-10">

                            <img class="p-2 rounded-lg mb-3 bg-violet-950 h-14" src="./images/product-print-area.svg" alt="" srcset="">

                            <div class="font-Archivo">

                                <h2 class="font-semibold text-lg mb-2">Design, Product Creation <span class="font-sans">&amp;</span> Printing</h2>

                                <p class="text-gray-600 mb-4 lg:text-lg">Wondering how to choose the best printing<br>techniques or what design files to upload?</p>

                                <a class="font-semibold text-sm" href="">LEARN MORE →</a>

                            </div>

                        </li>

                        <li class="mb-10">

                            <img class="p-2 rounded-lg mb-3 bg-violet-950 h-14" src="./images/cart.svg" alt="" srcset="">

                            <div class="font-Archivo">

                                <h2 class="font-semibold text-lg mb-2">Ordering, Production Payment <span class="font-sans">&amp;</span> Printing</h2>

                                <p class="text-gray-600 mb-4 lg:text-lg">Find out about managing orders, our production<br>and how you get paid.</p>

                                <a class="font-semibold text-sm" href="">LEARN MORE →</a>

                            </div>

                        </li>

                        <li class="mb-10">

                            <img class="p-2 rounded-lg mb-3 bg-violet-950 h-14" src="./images/coins.svg" alt="" srcset="">

                            <div class="font-Archivo">

                                <h2 class="font-semibold text-lg mb-2">Taxes</h2>

                                <p class="text-gray-600 mb-4 lg:text-lg">Learn how taxes work and how that will<br>affect your business.</p>

                                <a class="font-semibold text-sm" href="">LEARN MORE →</a>

                            </div>

                        </li>

                        <li class="mb-10">

                            <img class="p-2 rounded-lg mb-3 bg-violet-900 h-14" src="./images/question-mark.svg" alt="" srcset="">

                            <div class="font-Archivo">

                                <h2 class="font-semibold text-lg mb-2">All Topics

                                </h2>

                                <p class="text-gray-600 mb-4 lg:text-lg">Browse all topics<br>for answers and advice.</p>

                                <a class="font-semibold text-sm" href="">GO TO HELP SECTION →</a>

                            </div>

                        </li>

                    </ul>

                    <!-- Contact Area Start -->

                    <div class="bg-white shadow rounded-lg h-full w-full py-6 px-6 lg:ml-12 lg:w-4/12 lg:pl-10 font-Archivo">

                        <div class="pb-10 lg:pb-20">

                            <h2 class="font-semibold text-lg lg:mb-4">Contact</h2>

                            <p class="text-gray-600 lg:text-lg">Still have questions? Our experts are here to help.</p>

                        </div>

                        <div class="pb-10">

                            <h2 class="font-semibold text-gray-600 text-sm uppercase">FOR UNITED STATES</h2>

                            <a class="font-semibold" href="mailto:support@spod.com">

                                support@spod.com

                            </a>

                        </div>

                        <div class="pb-10 lg:pb-20">

                            <h2 class="font-semibold text-gray-600 text-sm uppercase">FOR EUROPE</h2>

                            <a class="font-semibold" href="mailto:support@spod.com">

                                service-eu@spod.com

                            </a>

                        </div>

                        <div class="lg:pb-10">

                            <a class="font-semibold uppercase text-sm font-Archivo" href="#">Write to us →</a>

                        </div>

                    </div>

                    <!-- Contact Area End -->

                </div>

            </div>

        </div>

        <!-- Help Center Area End -->


        <!-- Blog Area Start -->

        <div class="bg-gray-100">

            <div class="max-w-screen-xl mx-auto pt-16 px-4 lg:pt-20">

                <div class="mb-16 lg:flex lg:justify-between lg:items-end">

                    <div class="font-Archivo">

                        <h3 class="font-semibold uppercase mb-2">BLOG</h3>

                        <h2 class="text-3xl font-medium leading-9 mb-2 lg:text-4xl">Read, Learn and Grow</h2>

                        <p class="font-medium mb-4 lg:text-xl lg:mb-0">Print-on-demand is changing. Stay ahead of the curve with trends, tips and advice.</p>

                    </div>

                    <div>

                        <a class="btn-white bg-white" href="btn-white">SEE ALL BLOG POSTS</a>

                    </div>

                </div>

                <!-- Post Gallery Start -->

                <div class="overflow-hidden">

                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-12">

                        <a href="#">

                            <div class="h-full bg-white shadow rounded-lg overflow-hidden">

                                <img class="max-w-full" src="images/holiday-image.jpg" alt="" srcset="">

                                <div class="p-4 flex flex-col font-Archivo">

                                    <h6 class="mb-1 text-blue-600 text-sm font-semibold">News</h6>

                                    <h5 class="mb-2 font-semibold text-ink">Start the Holiday Season with Bestsellers</h5>

                                    <p class="mb-2 text-gray-600"> Get the fairy lights out of the basement and turn your Shop into Holiday HQ. Of course, this is diff...</p>

                                    <p class="font-medium text-gray-500 text-sm mt-4">3 min read</p>

                                </div>

                            </div>

                        </a>

                        <a href="#">

                            <div class="h-full bg-white shadow rounded-lg">

                                <img class="max-w-full" src="images/girls-fashion.jpg" alt="" srcset="">

                                <div class="p-4 flex flex-col font-Archivo">

                                    <h6 class="mb-1 text-blue-600 text-sm font-semibold">News</h6>

                                    <h5 class="mb-2 font-semibold text-ink">How To Build A Fan Base</h5>

                                    <p class="mb-2 text-gray-600">Your fans are worth a million follows each. Fans show up, support you, buy your merch, and sing your...</p>

                                    <p class="font-medium text-gray-500 text-sm mt-4">3 min read</p>

                                </div>

                            </div>

                        </a>

                        <a href="#">

                            <div class="h-full bg-white shadow rounded-lg overflow-hidden">

                                <img class="max-w-full" src="images/spood-image.png" alt="" srcset="">

                                <div class="p-4 flex flex-col font-Archivo">

                                    <h6 class="mb-1 text-blue-600 text-sm font-semibold">News</h6>

                                    <h5 class="mb-2 font-semibold text-ink">Sell More On Shopify With SPOD</h5>

                                    <p class="mb-2 text-gray-600">If you’re already a Shopify user and want to add some sales capability and avenues, look no further...</p>

                                    <p class="font-medium text-gray-500 text-sm mt-4">4 min read</p>

                                </div>

                            </div>

                        </a>

                    </div>

                </div>

                <!-- Post Gallery End -->

            </div>

        </div>

        <!-- Blog Area End -->


        <!-- Register Area Start -->

        <div class="bg-gray-100">

            <div class="max-w-screen-xl mx-auto pb-12 px-4 lg:pt-10 lg:pb-20">

                <div class="bg-register-banner w-full bg-bottom rounded-lg py-16 text-white lg:py-20 font-Archivo">

                    <div class="w-10/12 m-auto">

                        <h5 class="text-2xl mb-6 font-semibold leading-9 lg:text-3xl">Get started<br>with SPOD today</h5>

                        <a class="btn-white lg:px-4 bg-white text-black" href="">SIGN UP FOR FREE</a>

                    </div>

                </div>

            </div>

        </div>

        <!-- Register Area End -->

    </main>

    <!-- Main Area End -->


    <!-- Footer Area Start -->

    <footer>

        <div class="bg-white border-t border-solid border-gray-200">

            <div class="max-w-screen-xl mx-auto pt-6 px-4 lg:pt-16">

                <div class="grid grid-cols-2 gap-y-12 lg:grid-cols-6 lg:gap-x-6">

                    <div class="col-start-1 col-end-3">

                        <div class="mb-14 lg:mb-16">

                            <img class="h-10 lg:h-12 mb-2" src="/assets/spod-logo-01.svg" alt="" srcset="">

                            <p class="font-medium text-gray-600">Print-On-Demand Made Simple</p>

                        </div>

                    <div class="flex flex-col space-y-2">

                        <div class="flex items-center space-x-2">

                            <svg class="h-8 text-blue-600 fill-current" fill="" viewBox="0 0 24 24">

                                <path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" clip-rule="evenodd"></path>

                            </svg>

                            <a class="text-gray-600" href="#">SPOD Facebook Page</a>

                        </div>

                    </div>

                </div>

                    <div class="lg:ml-4 font-Archivo">

                        <h4 class="font-semibold text-sm uppercase mb-6 font">OUR PRODUCTS</h4>

                        <ul>

                            <li class="mb-5">

                                <a class="text-gray-600" href="#">Men</a>

                            </li>

                            <li class="mb-5">

                                <a class="text-gray-600" href="#">Women</a>

                            </li>

                            <li class="mb-5">

                                <a class="text-gray-600" href="#">Kids <span class="font-sans">&amp;</span> Babies</a>

                            </li>

                            <li class="mb-5">

                                <a class="text-gray-600" href="#">Explore</a>

                            </li>

                        </ul>

                    </div>

                    <div class="lg:ml-4 font-Archivo">

                        <h4 class="font-semibold text-sm uppercase mb-6 font">EXPLORE</h4>

                        <ul>

                            <li class="mb-5">

                                <a class="text-gray-600" href="#">Integrations</a>

                            </li>

                            <li class="mb-5">

                                <a class="text-gray-600" href="#">How It works</a>

                            </li>

                            <li class="mb-5">

                                <a class="text-gray-600" href="#">About Us</a>

                            </li>

                            <li class="mb-5">

                                <a class="text-gray-600" href="#">Explore</a>

                            </li>

                        </ul>

                    </div>

                    <div class="lg:ml-4 font-Archivo">

                        <h4 class="font-semibold text-sm uppercase mb-6 font">RESOURCES</h4>

                        <ul>

                            <li class="mb-5">

                                <a class="text-gray-600" href="#">Help Center</a>

                            </li>

                            <li class="mb-5">

                                <a class="text-gray-600" href="#">Blog</a>

                            </li>

                            <li class="mb-5">

                                <a class="text-gray-600" href="#">Shipping Calculator</a>

                            </li>

                            <li class="mb-5">

                                <a class="text-gray-600" href="#">Terms <span class="font-sans">&</span> Conditions</a>

                            </li>

                            <li class="mb-5">

                                <a class="text-gray-600" href="#">Privacy Policy</a>

                            </li>

                            <li class="mb-5">

                                <a class="text-gray-600" href="#">Legal Information</a>

                            </li>

                            <li class="mb-5">

                                <a class="text-gray-600" href="#">DMCA Policy</a>

                            </li>

                        </ul>

                    </div>

                    <div class="font-Archivo">

                        <h4 class="font-semibold text-sm uppercase mb-6">CONTACT</h4>

                        <a class="text-gray-600" href="">Write To Us →</a>

                        <div class="border-t border-gray-300 mt-4 pt-4">

                            <h4 class="font-semibold text-gray-600 text-sm uppercase mb-2">United States</h4>

                            <div>

                                <a class="text-gray-600 hover:text-gray-400 mb-2" href="#">support@spod.com</a>

                            </div>

                            <div><a class="text-gray-600 hover:text-gray-400 mb-2" href="#"> +1-724-832-6290

                            </a></div>

                        </div>

                        <div class="border-t border-gray-300 mt-4 pt-4">

                            <h4 class="font-semibold text-gray-600 text-sm uppercase mb-2">EUROPE</h4>

                            <div>

                                <a class="text-gray-600 hover:text-gray-400 mb-2" href="#">service-eu@spod.com</a>

                            </div>

                            <div><a class="text-gray-600 hover:text-gray-400 mb-2" href="#"> +800-10 200 300

                            </a></div>

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </footer>

    <!-- Footer Area End -->


    <!-- Footer2 Area Start -->

    <footer>

        <div class="bg-white">

            <div class="max-w-screen-xl mx-auto px-4">

                <div class="border-t border-gray-300 py-3 text-gray-500 text-center leading-9 lg:py-8">

                    <span class="">© 2022 SPOD, powered by</span>

                    <span>

                        <a href="#">

                            <img class="h-4 inline" src="images/spreadgroup-logo.svg" alt="">

                        </a>

                    </span><br class="lg:hidden"><span>All rights reserved.</span>

                </div>

            </div>

        </div>

    </footer>

    <!-- Footer2 Area End -->



    <!-- JQuery JS -->

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"

        integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>


    <!-- Owl Carousel JS -->

    <script src="./scripts/owl.carousel.min.js"></script>


    <!-- Owl Carousel Script -->

    <script>$(document).ready(function () {

        $('.all-sliders').owlCarousel({

            loop: true,

            margin: 1,

            responsiveClass: true,

            nav: true,

            dots: false,

            responsive: {

                0: {

                    items: 1,

                    nav: false,


                },

                600: {

                    items: 3,

                    nav: false,

                },

                1000: {

                    items: 4,

                    nav: true,


                }

            }

        });


        $('.all-products').owlCarousel({

            loop: true,

            margin: 1,

            responsiveClass: true,

            nav: true,

            dots: false,

            responsive: {

                0: {

                    items: 1,

                    nav: false,


                },

                600: {

                    items: 3,

                    nav: false,

                },

                1000: {

                    items: 4,

                    nav: true,


                }

            }

        })


    });</script>

<script type="module" src="/scripts/script.js"></script>

        

    </body>

</html>


input.css

 @tailwind base;

@tailwind components;

@tailwind utilities;



/* Google Fonts */

  @import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;700&display=swap');


  body {

    font-family:'Archivo', sans-serif;

  }



.btn {

    @apply text-white bg-violet-900 hover:bg-violet-950 flex items-center

    focus:ring-2 focus:outline-none focus:ring-violet-950 focus:ring-offset-2

    font-medium rounded-md md:px-7 md:py-3 text-center uppercase

}


.btn-white {

    @apply font-Archivo rounded-md border-solid border border-slate-300 hover:bg-violet-50 uppercase font-medium focus:ring-2 focus:outline-none focus:ring-violet-950 focus:ring-offset-2 text-center px-6 py-4 items-center

}


.iconBg {

    @apply p-2 rounded-lg mb-3 bg-violet-950 flex-shrink-0

}


.btn-mobile {

    @apply mb-5 font-semibold text-sm text-gray-900 hover:text-gray-500 focus:outline-none focus:text-gray-900 transition duration-150 ease-in-out uppercase

}


.integration-area .owl-nav {

    margin-top: 52px;

    text-align: center;

    width: 100%;

    margin-left: auto;

    margin-right: auto;

    display: inline-block;


}


.integration-area .owl-nav span {

    height: 40px;

    width: 40px;

    font-size: 30px;

    font-weight: 500;

    border: 1px solid #d4d6d5;

    border-radius: 5%;

    color: #646464;

    display: flex;

    background: #ffffff;

    transition: .3s;

    align-items: center;

    justify-content: center;

}


.integration-area .owl-nav span:hover {

    background-color: #8048db;

    color: #ffffff;

}


.integration-area .owl-next span{

    border-top-right-radius: 15%;

    border-bottom-right-radius: 15%;

    border-left: none;

}


.integration-area .owl-prev span{

    border-top-left-radius: 15%;

    border-bottom-left-radius: 15%;

    margin-bottom: 5px;

}


.products-area .owl-nav {

    top: 500px;

}

script.js

let mobile_icon = document.getElementById("mobile_icon");

let main_menu = document.getElementById("main_menu");

let menu_close = document.getElementById("menu_close");


mobile_icon.addEventListener ("click", () =>{

    main_menu.classList.toggle('hidden');

})


menu_close.addEventListener ("click", () => {

    main_menu.classList.toggle('hidden');

})

📌 Important file URL:

🔗 Source Code: https://github.com/subrotobasak/SPOD-Using-Tailwind-CSS.git


If this project helped you:

Post a Comment

0 Comments