Last active
July 18, 2022 20:53
-
-
Save votkapower/5f5d620d46eca80260be6cd506b0be20 to your computer and use it in GitHub Desktop.
Tiny slider 2 - html driven approach to save time
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="bg"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
| <title>Papazov YT Example</title> | |
| <meta name="description" content=""> | |
| <meta name="keywords" content=""> | |
| <meta name="owner" content="Dimitar Papazov | vtk.pw"> | |
| <link rel="stylesheet" href="./assets/css/style.css"> | |
| <link href="https://fonts.googleapis.com/css?family=Work+Sans:200,400&display=swap" rel="stylesheet"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.4/tiny-slider.css"> | |
| <!--[if (lt IE 9)]><script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.4/min/tiny-slider.helper.ie8.js"></script><![endif]--> | |
| </head> | |
| <body class="bg-white text-gray-600 work-sans leading-normal text-base tracking-normal"> | |
| <!--Nav--> | |
| <nav id="header" class="w-full z-30 top-0 py-1"> | |
| <div class="w-full container mx-auto flex flex-wrap items-center justify-between mt-0 px-6 py-3"> | |
| <label for="menu-toggle" class="cursor-pointer md:hidden block"> | |
| <svg class="fill-current text-gray-900" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"> | |
| <title>menu</title> | |
| <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path> | |
| </svg> | |
| </label> | |
| <input class="hidden" type="checkbox" id="menu-toggle" /> | |
| <div class="hidden md:flex md:items-center md:w-auto w-full order-3 md:order-1" id="menu"> | |
| <nav> | |
| <ul class="md:flex items-center justify-between text-base text-gray-700 pt-4 md:pt-0"> | |
| <li><a class="inline-block no-underline hover:text-black hover:underline py-2 px-4" href="#">Shop</a></li> | |
| <li><a class="inline-block no-underline hover:text-black hover:underline py-2 px-4" href="#">About</a></li> | |
| </ul> | |
| </nav> | |
| </div> | |
| <div class="order-1 md:order-2"> | |
| <a class="flex items-center tracking-wide no-underline hover:no-underline font-bold text-gray-800 text-xl " href="#"> | |
| <svg class="fill-current text-gray-800 mr-2" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"> | |
| <path d="M5,22h14c1.103,0,2-0.897,2-2V9c0-0.553-0.447-1-1-1h-3V7c0-2.757-2.243-5-5-5S7,4.243,7,7v1H4C3.447,8,3,8.447,3,9v11 C3,21.103,3.897,22,5,22z M9,7c0-1.654,1.346-3,3-3s3,1.346,3,3v1H9V7z M5,10h2v2h2v-2h6v2h2v-2h2l0.002,10H5V10z" /> | |
| </svg> | |
| VTK.SHOP | |
| </a> | |
| </div> | |
| <div class="order-2 md:order-3 flex items-center" id="nav-content"> | |
| <a class="inline-block no-underline hover:text-black" href="#"> | |
| <svg class="fill-current hover:text-black" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"> | |
| <circle fill="none" cx="12" cy="7" r="3" /> | |
| <path d="M12 2C9.243 2 7 4.243 7 7s2.243 5 5 5 5-2.243 5-5S14.757 2 12 2zM12 10c-1.654 0-3-1.346-3-3s1.346-3 3-3 3 1.346 3 3S13.654 10 12 10zM21 21v-1c0-3.859-3.141-7-7-7h-4c-3.86 0-7 3.141-7 7v1h2v-1c0-2.757 2.243-5 5-5h4c2.757 0 5 2.243 5 5v1H21z" /> | |
| </svg> | |
| </a> | |
| <a class="pl-3 inline-block no-underline hover:text-black" href="#"> | |
| <svg class="fill-current hover:text-black" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"> | |
| <path d="M21,7H7.462L5.91,3.586C5.748,3.229,5.392,3,5,3H2v2h2.356L9.09,15.414C9.252,15.771,9.608,16,10,16h8 c0.4,0,0.762-0.238,0.919-0.606l3-7c0.133-0.309,0.101-0.663-0.084-0.944C21.649,7.169,21.336,7,21,7z M17.341,14h-6.697L8.371,9 h11.112L17.341,14z" /> | |
| <circle cx="10.5" cy="18.5" r="1.5" /> | |
| <circle cx="17.5" cy="18.5" r="1.5" /> | |
| </svg> | |
| </a> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- radio input carousel 💥 --> | |
| <div class="carousel relative container mx-auto" style="max-width:1600px;"> | |
| <div class="carousel-inner relative overflow-hidden w-full"> | |
| <!--Slide 1--> | |
| <input class="carousel-open" type="radio" id="carousel-1" name="carousel" aria-hidden="true" hidden="" checked="checked"> | |
| <div class="carousel-item absolute opacity-0" style="height:50vh;"> | |
| <div class="block h-full w-full mx-auto flex pt-6 md:pt-0 md:items-center bg-cover bg-right" style="background-image: url('https://images.unsplash.com/photo-1422190441165-ec2956dc9ecc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1600&q=80');"> | |
| <div class="container mx-auto"> | |
| <div class="flex flex-col w-full lg:w-1/2 md:ml-16 items-center md:items-start px-6 tracking-wide"> | |
| <p class="text-black text-2xl my-4">Stripy Zig Zag Jigsaw Pillow and Duvet Set</p> | |
| <a class="text-xl inline-block no-underline border-b border-gray-600 leading-relaxed hover:text-black hover:border-black" href="#">view product</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <label for="carousel-3" class="prev control-1 w-10 h-10 ml-2 md:ml-10 absolute cursor-pointer hidden text-3xl font-bold text-black hover:text-white rounded-full bg-white hover:bg-gray-900 leading-tight text-center z-10 inset-y-0 left-0 my-auto">‹</label> | |
| <label for="carousel-2" class="next control-1 w-10 h-10 mr-2 md:mr-10 absolute cursor-pointer hidden text-3xl font-bold text-black hover:text-white rounded-full bg-white hover:bg-gray-900 leading-tight text-center z-10 inset-y-0 right-0 my-auto">›</label> | |
| <!--Slide 2--> | |
| <input class="carousel-open" type="radio" id="carousel-2" name="carousel" aria-hidden="true" hidden=""> | |
| <div class="carousel-item absolute opacity-0 bg-cover bg-right" style="height:50vh;"> | |
| <div class="block h-full w-full mx-auto flex pt-6 md:pt-0 md:items-center bg-cover bg-right" style="background-image: url('https://images.unsplash.com/photo-1533090161767-e6ffed986c88?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjM0MTM2fQ&auto=format&fit=crop&w=1600&q=80');"> | |
| <div class="container mx-auto"> | |
| <div class="flex flex-col w-full lg:w-1/2 md:ml-16 items-center md:items-start px-6 tracking-wide"> | |
| <p class="text-black text-2xl my-4">Real Bamboo Wall Clock</p> | |
| <a class="text-xl inline-block no-underline border-b border-gray-600 leading-relaxed hover:text-black hover:border-black" href="#">view product</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <label for="carousel-1" class="prev control-2 w-10 h-10 ml-2 md:ml-10 absolute cursor-pointer hidden text-3xl font-bold text-black hover:text-white rounded-full bg-white hover:bg-gray-900 leading-tight text-center z-10 inset-y-0 left-0 my-auto">‹</label> | |
| <label for="carousel-3" class="next control-2 w-10 h-10 mr-2 md:mr-10 absolute cursor-pointer hidden text-3xl font-bold text-black hover:text-white rounded-full bg-white hover:bg-gray-900 leading-tight text-center z-10 inset-y-0 right-0 my-auto">›</label> | |
| <!--Slide 3--> | |
| <input class="carousel-open" type="radio" id="carousel-3" name="carousel" aria-hidden="true" hidden=""> | |
| <div class="carousel-item absolute opacity-0" style="height:50vh;"> | |
| <div class="block h-full w-full mx-auto flex pt-6 md:pt-0 md:items-center bg-cover bg-bottom" style="background-image: url('https://images.unsplash.com/photo-1519327232521-1ea2c736d34d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1600&q=80');"> | |
| <div class="container mx-auto"> | |
| <div class="flex flex-col w-full lg:w-1/2 md:ml-16 items-center md:items-start px-6 tracking-wide"> | |
| <p class="text-black text-2xl my-4">Brown and blue hardbound book</p> | |
| <a class="text-xl inline-block no-underline border-b border-gray-600 leading-relaxed hover:text-black hover:border-black" href="#">view product</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <label for="carousel-2" class="prev control-3 w-10 h-10 ml-2 md:ml-10 absolute cursor-pointer hidden text-3xl font-bold text-black hover:text-white rounded-full bg-white hover:bg-gray-900 leading-tight text-center z-10 inset-y-0 left-0 my-auto">‹</label> | |
| <label for="carousel-1" class="next control-3 w-10 h-10 mr-2 md:mr-10 absolute cursor-pointer hidden text-3xl font-bold text-black hover:text-white rounded-full bg-white hover:bg-gray-900 leading-tight text-center z-10 inset-y-0 right-0 my-auto">›</label> | |
| <!-- Add additional indicators for each slide--> | |
| <ol class="carousel-indicators"> | |
| <li class="inline-block mr-3"> | |
| <label for="carousel-1" class="carousel-bullet cursor-pointer block text-4xl text-gray-400 hover:text-gray-900">•</label> | |
| </li> | |
| <li class="inline-block mr-3"> | |
| <label for="carousel-2" class="carousel-bullet cursor-pointer block text-4xl text-gray-400 hover:text-gray-900">•</label> | |
| </li> | |
| <li class="inline-block mr-3"> | |
| <label for="carousel-3" class="carousel-bullet cursor-pointer block text-4xl text-gray-400 hover:text-gray-900">•</label> | |
| </li> | |
| </ol> | |
| </div> | |
| </div> | |
| <!-- products --> | |
| <section class="bg-white py-8"> | |
| <!-- section products 1 --> | |
| <div class="container mx-auto flex items-center flex-wrap pt-4 pb-12"> | |
| <nav id="store" class="w-full z-30 top-0 px-6 py-1"> | |
| <div class="w-full container mx-auto flex flex-wrap items-center justify-between mt-0 px-2 py-3"> | |
| <a class="uppercase tracking-wide no-underline hover:no-underline font-bold text-gray-800 text-xl " href="#"> | |
| Our recommended products | |
| </a> | |
| <div class="flex items-center" id="store-nav-content"> | |
| <a class="pl-3 inline-block no-underline hover:text-black" href="#"> | |
| <svg class="fill-current hover:text-black" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"> | |
| <path d="M7 11H17V13H7zM4 7H20V9H4zM10 15H14V17H10z" /> | |
| </svg> | |
| </a> | |
| <a class="pl-3 inline-block no-underline hover:text-black" href="#"> | |
| <svg class="fill-current hover:text-black" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"> | |
| <path d="M10,18c1.846,0,3.543-0.635,4.897-1.688l4.396,4.396l1.414-1.414l-4.396-4.396C17.365,13.543,18,11.846,18,10 c0-4.411-3.589-8-8-8s-8,3.589-8,8S5.589,18,10,18z M10,4c3.309,0,6,2.691,6,6s-2.691,6-6,6s-6-2.691-6-6S6.691,4,10,4z" /> | |
| </svg> | |
| </a> | |
| </div> | |
| </div> | |
| </nav> | |
| <div class="max-w-full"> | |
| <div class="slider" data-tns-init="true" data-tns-gutter="20" data-tns-items="4" data-tns-stage-padding="0" data-tns-autoplay="true" data-tns-speed="2000" data-tns-loop="false" data-tns-nav="false" data-tns-controls="false" data-tns-prev-controller=".suggested-products-section .section-title .prev" data-tns-next-controller=".suggested-products-section .section-title .next" data-tns-progressbar=".suggested-products-section .section-title .progressInner"> | |
| <?php foreach (range(1, 8) as $product) : ?> | |
| <div> | |
| <div class="p-6 flex flex-col"> | |
| <a href="#"> | |
| <img class="hover:grow hover:shadow-lg" src="https://images.unsplash.com/photo-1555982105-d25af4182e4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&h=400&q=80"> | |
| <div class="pt-3 flex items-center justify-between"> | |
| <p class="">Product Name</p> | |
| <svg class="h-6 w-6 fill-current text-gray-500 hover:text-black" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> | |
| <path d="M12,4.595c-1.104-1.006-2.512-1.558-3.996-1.558c-1.578,0-3.072,0.623-4.213,1.758c-2.353,2.363-2.352,6.059,0.002,8.412 l7.332,7.332c0.17,0.299,0.498,0.492,0.875,0.492c0.322,0,0.609-0.163,0.792-0.409l7.415-7.415 c2.354-2.354,2.354-6.049-0.002-8.416c-1.137-1.131-2.631-1.754-4.209-1.754C14.513,3.037,13.104,3.589,12,4.595z M18.791,6.205 c1.563,1.571,1.564,4.025,0.002,5.588L12,18.586l-6.793-6.793C3.645,10.23,3.646,7.776,5.205,6.209 c0.76-0.756,1.754-1.172,2.799-1.172s2.035,0.416,2.789,1.17l0.5,0.5c0.391,0.391,1.023,0.391,1.414,0l0.5-0.5 C14.719,4.698,17.281,4.702,18.791,6.205z" /> | |
| </svg> | |
| </div> | |
| <p class="pt-1 text-gray-900">€9.99</p> | |
| </a> | |
| </div> | |
| </div> | |
| <?php endforeach; ?> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- section products 2 --> | |
| <div class="container mx-auto flex items-center flex-wrap pt-4 pb-12"> | |
| <nav id="store2" class="w-full z-30 top-0 px-6 py-1"> | |
| <div class="w-full container mx-auto flex flex-wrap items-center justify-between mt-0 px-2 py-3"> | |
| <a class="uppercase tracking-wide no-underline hover:no-underline font-bold text-gray-800 text-xl " href="#"> | |
| NEW products | |
| </a> | |
| <div class="flex items-center" id="store-nav-content"> | |
| <a class="pl-3 inline-block no-underline hover:text-black" href="#"> | |
| <svg class="fill-current hover:text-black" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"> | |
| <path d="M7 11H17V13H7zM4 7H20V9H4zM10 15H14V17H10z" /> | |
| </svg> | |
| </a> | |
| <a class="pl-3 inline-block no-underline hover:text-black" href="#"> | |
| <svg class="fill-current hover:text-black" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"> | |
| <path d="M10,18c1.846,0,3.543-0.635,4.897-1.688l4.396,4.396l1.414-1.414l-4.396-4.396C17.365,13.543,18,11.846,18,10 c0-4.411-3.589-8-8-8s-8,3.589-8,8S5.589,18,10,18z M10,4c3.309,0,6,2.691,6,6s-2.691,6-6,6s-6-2.691-6-6S6.691,4,10,4z" /> | |
| </svg> | |
| </a> | |
| </div> | |
| </div> | |
| </nav> | |
| <div class="max-w-full"> | |
| <div data-tns-init="true" data-tns-gutter="20" data-tns-items="4" data-tns-stage-padding="0" data-tns-autoplay="true" data-tns-speed="2000" data-tns-loop="false" data-tns-nav="false" data-tns-controls="false" data-tns-prev-controller=".suggested-products-section .section-title .prev" data-tns-next-controller=".suggested-products-section .section-title .next" data-tns-progressbar=".suggested-products-section .section-title .progressInner"> | |
| <?php foreach (range(1, 8) as $product) : ?> | |
| <div> | |
| <div class=" p-6 flex flex-col"> | |
| <a href="#"> | |
| <img class="hover:grow hover:shadow-lg" src="https://images.unsplash.com/photo-1555982105-d25af4182e4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&h=400&q=80"> | |
| <div class="pt-3 flex items-center justify-between"> | |
| <p class="">Product Name</p> | |
| <svg class="h-6 w-6 fill-current text-gray-500 hover:text-black" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> | |
| <path d="M12,4.595c-1.104-1.006-2.512-1.558-3.996-1.558c-1.578,0-3.072,0.623-4.213,1.758c-2.353,2.363-2.352,6.059,0.002,8.412 l7.332,7.332c0.17,0.299,0.498,0.492,0.875,0.492c0.322,0,0.609-0.163,0.792-0.409l7.415-7.415 c2.354-2.354,2.354-6.049-0.002-8.416c-1.137-1.131-2.631-1.754-4.209-1.754C14.513,3.037,13.104,3.589,12,4.595z M18.791,6.205 c1.563,1.571,1.564,4.025,0.002,5.588L12,18.586l-6.793-6.793C3.645,10.23,3.646,7.776,5.205,6.209 c0.76-0.756,1.754-1.172,2.799-1.172s2.035,0.416,2.789,1.17l0.5,0.5c0.391,0.391,1.023,0.391,1.414,0l0.5-0.5 C14.719,4.698,17.281,4.702,18.791,6.205z" /> | |
| </svg> | |
| </div> | |
| <p class="pt-1 text-gray-900">€9.99</p> | |
| </a> | |
| </div> | |
| </div> | |
| <?php endforeach; ?> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- brands --> | |
| <section class="py-16 bg-white"> | |
| <div class="container m-auto px-6 space-y-8 md:px-12 lg:px-56"> | |
| <div class="m-auto text-center lg:w-7/12"> | |
| <h2 class="text-2xl text-gray-700 font-bold md:text-4xl">Your favorite companies are our partners.</h2> | |
| </div> | |
| <div class="max-w-full"> | |
| <div data-tns-init="true" data-tns-gutter="20" data-tns-items="4" data-tns-stage-padding="0" data-tns-autoplay="true" data-tns-speed="2000" data-tns-loop="false" data-tns-nav="false" data-tns-controls="false" data-tns-prev-controller=".suggested-products-section .section-title .prev" data-tns-next-controller=".suggested-products-section .section-title .next" data-tns-progressbar=".suggested-products-section .section-title .progressInner"> | |
| <div class="p-4"> | |
| <img src="https://tailus.io/sources/blocks/company-site/preview/images/clients/airbnb.svg" class="w-32" alt=""> | |
| </div> | |
| <div class="p-4"> | |
| <img src="https://tailus.io/sources/blocks/company-site/preview/images/clients/client-8.png" class="w-32 " alt=""> | |
| </div> | |
| <div class="p-4"> | |
| <img src="https://tailus.io/sources/blocks/company-site/preview/images/clients/client-3.png" class="w-32 " alt=""> | |
| </div> | |
| <div class="p-4"> | |
| <img src="https://tailus.io/sources/blocks/company-site/preview/images/clients/client-1.png" class="w-32 " alt=""> | |
| </div> | |
| <div class="p-4"> | |
| <img src="https://tailus.io/sources/blocks/company-site/preview/images/clients/tailus.svg" class="w-32" alt=""> | |
| </div> | |
| <div class="p-4"> | |
| <img src="https://tailus.io/sources/blocks/company-site/preview/images/clients/microsoft.svg" class="w-32" alt=""> | |
| </div> | |
| <div class="p-4"> | |
| <img src="https://tailus.io/sources/blocks/company-site/preview/images/clients/coty.svg" class="w-20" alt=""> | |
| </div> | |
| <div class="p-4"> | |
| <img src="https://tailus.io/sources/blocks/company-site/preview/images/clients/client-4.png" class="w-24" alt=""> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- houses --> | |
| <section class="bg-white py-8"> | |
| <div id="places-to-stay" class="container mx-auto flex items-center flex-wrap pt-4 pb-12"> | |
| <nav class="w-full z-30 top-0 px-6 py-1"> | |
| <div class="w-full container mx-auto flex flex-wrap items-center justify-between mt-0 px-2 py-3"> | |
| <a class="uppercase tracking-wide no-underline hover:no-underline font-bold text-gray-800 text-xl " href="#"> | |
| You can stay here | |
| </a> | |
| <div class="flex space-x-5"> | |
| <button type="button" class="prevbtn bg-white p-3 text-black rounded-md shadow flex items-center justify-center"> | |
| <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.707 14.707a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l2.293 2.293a1 1 0 010 1.414z" clip-rule="evenodd"></path></svg> | |
| </button> | |
| <button type="button" class="nextbtn bg-white p-3 text-black rounded-md shadow flex items-center justify-center"> | |
| <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- progress --> | |
| <div class="progress bg-gray-100"> | |
| <div class="progressInner bg-blue-400 h-2"></div> | |
| </div> | |
| </nav> | |
| <div class="mx-auto px-8 max-w-full"> | |
| <div | |
| data-tns-init="true" | |
| data-tns-gutter="20" | |
| data-tns-items="4" | |
| data-tns-stage-padding="0" | |
| data-tns-autoplay="true" | |
| data-tns-speed="2000" | |
| data-tns-loop="false" | |
| data-tns-nav="false" | |
| data-tns-controls="false" | |
| data-tns-prev-controller="#places-to-stay .prevbtn" | |
| data-tns-next-controller="#places-to-stay .nextbtn" | |
| data-tns-progressbar="#places-to-stay .progressInner"> | |
| <?php foreach (range(1, 8) as $product) : ?> | |
| <div> | |
| <div class="max-w-sm w-full py-6 px-3"> | |
| <div class="bg-white shadow-xl rounded-lg overflow-hidden"> | |
| <div class="bg-cover bg-center h-56 p-4" style="background-image: url(https://images.unsplash.com/photo-1475855581690-80accde3ae2b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80)"> | |
| <div class="flex justify-end"> | |
| <svg class="h-6 w-6 text-white fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> | |
| <path d="M12.76 3.76a6 6 0 0 1 8.48 8.48l-8.53 8.54a1 1 0 0 1-1.42 0l-8.53-8.54a6 6 0 0 1 8.48-8.48l.76.75.76-.75zm7.07 7.07a4 4 0 1 0-5.66-5.66l-1.46 1.47a1 1 0 0 1-1.42 0L9.83 5.17a4 4 0 1 0-5.66 5.66L12 18.66l7.83-7.83z"> | |
| </path> | |
| </svg> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <p class="uppercase tracking-wide text-sm font-bold text-gray-700">Detached house • 5y old | |
| </p> | |
| <p class="text-3xl text-gray-900">€750,000</p> | |
| <p class="text-gray-700">742 Evergreen Terrace</p> | |
| </div> | |
| <div class="flex p-4 border-t border-gray-300 text-gray-700"> | |
| <div class="flex-1 inline-flex items-center"> | |
| <svg class="h-6 w-6 text-gray-600 fill-current mr-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> | |
| <path d="M0 16L3 5V1a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v4l3 11v5a1 1 0 0 1-1 1v2h-1v-2H2v2H1v-2a1 1 0 0 1-1-1v-5zM19 5h1V1H4v4h1V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1h2V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1zm0 1v2a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1V6h-2v2a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V6H3.76L1.04 16h21.92L20.24 6H19zM1 17v4h22v-4H1zM6 4v4h4V4H6zm8 0v4h4V4h-4z"> | |
| </path> | |
| </svg> | |
| <p><span class="text-gray-900 font-bold">3</span> Bedrooms</p> | |
| </div> | |
| <div class="flex-1 inline-flex items-center"> | |
| <svg class="h-6 w-6 text-gray-600 fill-current mr-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> | |
| <path fill-rule="evenodd" d="M17.03 21H7.97a4 4 0 0 1-1.3-.22l-1.22 2.44-.9-.44 1.22-2.44a4 4 0 0 1-1.38-1.55L.5 11h7.56a4 4 0 0 1 1.78.42l2.32 1.16a4 4 0 0 0 1.78.42h9.56l-2.9 5.79a4 4 0 0 1-1.37 1.55l1.22 2.44-.9.44-1.22-2.44a4 4 0 0 1-1.3.22zM21 11h2.5a.5.5 0 1 1 0 1h-9.06a4.5 4.5 0 0 1-2-.48l-2.32-1.15A3.5 3.5 0 0 0 8.56 10H.5a.5.5 0 0 1 0-1h8.06c.7 0 1.38.16 2 .48l2.32 1.15a3.5 3.5 0 0 0 1.56.37H20V2a1 1 0 0 0-1.74-.67c.64.97.53 2.29-.32 3.14l-.35.36-3.54-3.54.35-.35a2.5 2.5 0 0 1 3.15-.32A2 2 0 0 1 21 2v9zm-5.48-9.65l2 2a1.5 1.5 0 0 0-2-2zm-10.23 17A3 3 0 0 0 7.97 20h9.06a3 3 0 0 0 2.68-1.66L21.88 14h-7.94a5 5 0 0 1-2.23-.53L9.4 12.32A3 3 0 0 0 8.06 12H2.12l3.17 6.34z"> | |
| </path> | |
| </svg> | |
| <p><span class="text-gray-900 font-bold">2</span> Bathrooms</p> | |
| </div> | |
| </div> | |
| <div class="px-4 pt-3 pb-4 border-t border-gray-300 bg-gray-100"> | |
| <div class="text-xs uppercase font-bold text-gray-600 tracking-wide">Realtor</div> | |
| <div class="flex items-center pt-2"> | |
| <div class="bg-cover bg-center w-10 h-10 rounded-full mr-3" style="background-image: url(https://images.unsplash.com/photo-1500522144261-ea64433bbe27?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=751&q=80)"> | |
| </div> | |
| <div> | |
| <p class="font-bold text-gray-900">Tiffany Heffner</p> | |
| <p class="text-sm text-gray-700">(555) 555-4321</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <?php endforeach; ?> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- blog / news --> | |
| <section class="bg-white py-8"> | |
| <div class="px-4 py-16 mx-auto sm:max-w-xl md:max-w-full lg:max-w-screen-xl md:px-24 lg:px-8 lg:py-20"> | |
| <div class="max-w-xl mb-10 md:mx-auto sm:text-center lg:max-w-2xl md:mb-12"> | |
| <div> | |
| <p class="inline-block px-3 py-px mb-4 text-xs font-semibold tracking-wider text-teal-900 uppercase rounded-full bg-teal-accent-400"> | |
| Here is what you missed | |
| </p> | |
| </div> | |
| <h2 class="max-w-lg mb-6 font-sans text-3xl font-bold leading-none tracking-tight text-gray-900 sm:text-4xl md:mx-auto"> | |
| <span class="relative inline-block"> | |
| <svg viewBox="0 0 52 24" fill="currentColor" class="absolute top-0 left-0 z-0 hidden w-32 -mt-8 -ml-20 text-blue-gray-100 lg:w-32 lg:-ml-28 lg:-mt-10 sm:block"> | |
| <defs> | |
| <pattern id="7b568941-9ed0-4f49-85a0-5e21ca6c7ad6" x="0" y="0" width=".135" height=".30"> | |
| <circle cx="1" cy="1" r=".7"></circle> | |
| </pattern> | |
| </defs> | |
| <rect fill="url(#7b568941-9ed0-4f49-85a0-5e21ca6c7ad6)" width="52" height="24"></rect> | |
| </svg> | |
| <span class="relative">The</span> | |
| </span> | |
| quick, brown fox jumps over a lazy dog | |
| </h2> | |
| <p class="text-base text-gray-700 md:text-lg"> | |
| Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque rem aperiam, | |
| eaque ipsa quae. | |
| </p> | |
| </div> | |
| <div class="grid gap-5 row-gap-5 mb-8 lg:grid-cols-4 sm:grid-cols-2"> | |
| <a href="/" aria-label="View Item" class="inline-block overflow-hidden duration-300 transform bg-white rounded shadow-sm hover:-translate-y-2"> | |
| <div class="flex flex-col h-full"> | |
| <img src="https://images.pexels.com/photos/3184291/pexels-photo-3184291.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="object-cover w-full h-48" alt="" /> | |
| <div class="flex-grow border border-t-0 rounded-b"> | |
| <div class="p-5"> | |
| <h6 class="mb-2 font-semibold leading-5">The doctor said</h6> | |
| <p class="text-sm text-gray-900"> | |
| Sportacus andrew weatherall goose Refined gentlemen super mario des lynam alpha | |
| trion zap rowsdower. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </a> | |
| <a href="/" aria-label="View Item" class="inline-block overflow-hidden duration-300 transform bg-white rounded shadow-sm hover:-translate-y-2"> | |
| <div class="flex flex-col h-full"> | |
| <img src="https://images.pexels.com/photos/3182750/pexels-photo-3182750.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="object-cover w-full h-48" alt="" /> | |
| <div class="flex-grow border border-t-0 rounded-b"> | |
| <div class="p-5"> | |
| <h6 class="mb-2 font-semibold leading-5">Skate ipsum dolor</h6> | |
| <p class="text-sm text-gray-900"> | |
| Bulbasaur Lorem ipsum dolor sit amet, consectetur adipiscing elit. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </a> | |
| <a href="/" aria-label="View Item" class="inline-block overflow-hidden duration-300 transform bg-white rounded shadow-sm hover:-translate-y-2"> | |
| <div class="flex flex-col h-full"> | |
| <img src="https://images.pexels.com/photos/3182746/pexels-photo-3182746.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="object-cover w-full h-48" alt="" /> | |
| <div class="flex-grow border border-t-0 rounded-b"> | |
| <div class="p-5"> | |
| <h6 class="mb-2 font-semibold leading-5">They urge you</h6> | |
| <p class="text-sm text-gray-900"> | |
| A flower in my garden, a mystery in my panties. Heart attack never stopped old Big | |
| Bear. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </a> | |
| <a href="/" aria-label="View Item" class="inline-block overflow-hidden duration-300 transform bg-white rounded shadow-sm hover:-translate-y-2"> | |
| <div class="flex flex-col h-full"> | |
| <img src="https://images.pexels.com/photos/3184296/pexels-photo-3184296.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="object-cover w-full h-48" alt="" /> | |
| <div class="flex-grow border border-t-0 rounded-b"> | |
| <div class="p-5"> | |
| <h6 class="mb-2 font-semibold leading-5">Baseball ipsum dolor</h6> | |
| <p class="text-sm text-gray-900"> | |
| Bro ipsum dolor sit amet gaper backside single track, manny Bike epic clipless. | |
| Schraeder drop gondy. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </a> | |
| <a href="/" aria-label="View Item" class="inline-block overflow-hidden duration-300 transform bg-white rounded shadow-sm hover:-translate-y-2"> | |
| <div class="flex flex-col h-full"> | |
| <img src="https://images.pexels.com/photos/3184311/pexels-photo-3184311.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500" class="object-cover w-full h-48" alt="" /> | |
| <div class="flex-grow border border-t-0 rounded-b"> | |
| <div class="p-5"> | |
| <h6 class="mb-2 font-semibold leading-5">The doctor said</h6> | |
| <p class="text-sm text-gray-900"> | |
| Sportacus andrew weatherall goose Refined gentlemen super mario des lynam alpha | |
| trion zap rowsdower. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </a> | |
| <a href="/" aria-label="View Item" class="inline-block overflow-hidden duration-300 transform bg-white rounded shadow-sm hover:-translate-y-2"> | |
| <div class="flex flex-col h-full"> | |
| <img src="https://images.pexels.com/photos/3184338/pexels-photo-3184338.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="object-cover w-full h-48" alt="" /> | |
| <div class="flex-grow border border-t-0 rounded-b"> | |
| <div class="p-5"> | |
| <h6 class="mb-2 font-semibold leading-5">Skate ipsum dolor</h6> | |
| <p class="text-sm text-gray-900"> | |
| Bulbasaur Lorem ipsum dolor sit amet, consectetur adipiscing elit. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </a> | |
| <a href="/" aria-label="View Item" class="inline-block overflow-hidden duration-300 transform bg-white rounded shadow-sm hover:-translate-y-2"> | |
| <div class="flex flex-col h-full"> | |
| <img src="https://images.pexels.com/photos/3184339/pexels-photo-3184339.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="object-cover w-full h-48" alt="" /> | |
| <div class="flex-grow border border-t-0 rounded-b"> | |
| <div class="p-5"> | |
| <h6 class="mb-2 font-semibold leading-5">They urge you</h6> | |
| <p class="text-sm text-gray-900"> | |
| A flower in my garden, a mystery in my panties. Heart attack never stopped old Big | |
| Bear. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </a> | |
| <a href="/" aria-label="View Item" class="inline-block overflow-hidden duration-300 transform bg-white rounded shadow-sm hover:-translate-y-2"> | |
| <div class="flex flex-col h-full"> | |
| <img src="https://images.pexels.com/photos/3184360/pexels-photo-3184360.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="object-cover w-full h-48" alt="" /> | |
| <div class="flex-grow border border-t-0 rounded-b"> | |
| <div class="p-5"> | |
| <h6 class="mb-2 font-semibold leading-5">Baseball ipsum dolor</h6> | |
| <p class="text-sm text-gray-900"> | |
| Bro ipsum dolor sit amet gaper backside single track, manny Bike epic clipless. | |
| Schraeder drop gondy. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </a> | |
| </div> | |
| <div class="text-center"> | |
| <a href="/" class="inline-flex items-center justify-center w-full h-12 px-6 font-medium tracking-wide text-gray-600 transition duration-200 rounded shadow-md md:w-auto bg-deep-purple-accent-400 hover:bg-deep-purple-accent-700 focus:shadow-outline focus:outline-none"> | |
| Learn more | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- about --> | |
| <section class="bg-white py-8"> | |
| <div class="container py-8 px-6 mx-auto"> | |
| <a class="uppercase tracking-wide no-underline hover:no-underline font-bold text-gray-800 text-xl mb-8" href="#"> | |
| About | |
| </a> | |
| <p class="mt-8 mb-8">This template is inspired by the stunning minamalist design and its created by | |
| <a class="text-gray-800 underline hover:text-gray-900" href="https://votkapower.eu/">https://votkapower.eu/</a> | |
| </p> | |
| <p class="mb-8">Lorem ipsum dolor sit amet, consectetur <a href="#">random link</a> adipiscing elit, sed do | |
| eiusmod tempor incididunt ut labore et dolore magna aliqua. Vel risus commodo viverra maecenas accumsan | |
| lacus vel facilisis volutpat. Vitae aliquet nec ullamcorper sit. Nullam eget felis eget nunc lobortis | |
| mattis aliquam. In est ante in nibh mauris. Egestas congue quisque egestas diam in. Facilisi nullam | |
| vehicula ipsum a arcu. Nec nam aliquam sem et tortor consequat. Eget mi proin sed libero enim sed | |
| faucibus turpis in. Hac habitasse platea dictumst quisque. In aliquam sem fringilla ut. Gravida rutrum | |
| quisque non tellus orci ac auctor augue mauris. Accumsan lacus vel facilisis volutpat est velit egestas | |
| dui id. At tempor commodo ullamcorper a. Volutpat commodo sed egestas egestas fringilla. Vitae congue eu | |
| consequat ac.</p> | |
| </div> | |
| </section> | |
| <!-- footer --> | |
| <footer class="container mx-auto bg-white py-8 border-t border-gray-400"> | |
| <div class="container flex px-3 py-8 "> | |
| <div class="w-full mx-auto flex flex-wrap"> | |
| <div class="flex w-full lg:w-1/2 "> | |
| <div class="px-3 md:px-0"> | |
| <h3 class="font-bold text-gray-900">Footer</h3> | |
| <p class="py-4"> | |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vel mi ut felis tempus | |
| commodo nec id erat. Suspendisse consectetur dapibus velit ut lacinia. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="flex w-full lg:w-1/2 lg:justify-end lg:text-right"> | |
| <div class="px-3 md:px-0"> | |
| <h3 class="font-bold text-gray-900">Social</h3> | |
| <ul class="list-reset items-center pt-3"> | |
| <li> | |
| <a class="inline-block no-underline hover:text-black hover:underline py-1" href="#">fb link</a> | |
| <a class="inline-block no-underline hover:text-black hover:underline py-1" href="#">in link</a> | |
| <a class="inline-block no-underline hover:text-black hover:underline py-1" href="https://www.youtube.com/channel/UCA_jssfnz8llZ4ZWFHJKs_g">yt link</a> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.2/min/tiny-slider.js"></script> | |
| <script> | |
| // forEach function from Todd Motto's blog, as mentioned above | |
| var forEach = function(array, callback, scope) { | |
| for (let i = 0; i < array.length; i++) { | |
| callback.call(scope, i, array[i]); // passes back stuff we need | |
| } | |
| }; | |
| // tiny-slider initialisation | |
| let _sliders = []; | |
| let sliders = document.querySelectorAll('[data-tns-init="true"]'); | |
| forEach(sliders, function(index /*, value*/ ) { | |
| // now fetch YOUR-SLUG from html (use value.getAttribute('data-name') for < IE10 support) | |
| let value = sliders[index]; | |
| let sliderLoop = value.dataset.tnsLoop ? !!value.dataset.tnsLoop : false; | |
| let sliderAutoPlay = value.dataset.tnsAutoplay && value.dataset.tnsAutoplay !== 'false' ? true : false; | |
| let sliderSpeed = value.dataset.tnsSpeed ? parseInt(value.dataset.tnsSpeed) : 5000; | |
| let sliderMargin = value.dataset.tnsMargin ? parseInt(value.dataset.tnsMargin) : 10; | |
| let sliderVisibleItems = value.dataset.tnsItems ? parseInt(value.dataset.tnsItems) : 1; | |
| let sliderUseNav = value.dataset.tnsNav && value.dataset.tnsNav !== 'false' ? true : false; | |
| let sliderUseNavText = value.dataset.tnsNavText ? value.dataset.tnsNavText : ['', '']; | |
| let sliderResponsive = value.dataset.tnsResponsive ? JSON.parse(value.dataset.tnsResponsive) : {}; | |
| let navPrevBtnSelector = value.dataset.tnsPrevController ? value.dataset.tnsPrevController : false; | |
| let navNextBtnSelector = value.dataset.tnsNextController ? value.dataset.tnsNextController : false; | |
| let sliderStagePadding = value.dataset.tnsStagePadding ? value.dataset.tnsStagePadding : false; | |
| let sliderCenterElements = value.dataset.tnsCenter ? value.dataset.tnsCenter : false; | |
| let progressBarId = value.dataset.tnsProgressbar && value.dataset.tnsProgressbar.length ? value.dataset.tnsProgressbar : false; | |
| let isVertical = value.dataset.tnsVertical && value.dataset.tnsVertical.length ? value.dataset.tnsVertical : false; | |
| let gutter = value.dataset.tnsGutter && value.dataset.tnsGutter.length ? value.dataset.tnsGutter : false; | |
| let slideBy = value.dataset.tnsSlideBy && value.dataset.tnsSlideBy.length ? value.dataset.tnsSlideBy : 1; | |
| let startIndex = value.dataset.tnsStartIndex && value.dataset.tnsStartIndex.length ? value.dataset.tnsStartIndex : 0; | |
| let fixedWidth = value.dataset.tnsFixedWidth && value.dataset.tnsFixedWidth.length ? parseInt(value.dataset.tnsFixedWidth) : false; | |
| let autoWidth = value.dataset.tnsAutoWidth && value.dataset.tnsAutoWidth.length && !value.dataset.tnsAutoWidth != 'false' ? parseInt(value.dataset.tnsAutoWidth) : false; | |
| let autoHeight = value.dataset.tnsautoHeight && value.dataset.tnsautoHeight.length && !value.dataset.tnsautoHeight != 'false' ? value.dataset.tnsautoHeight : false; | |
| let sliderControlsContainer = value.dataset.tnsControlsContainer && value.dataset.tnsControlsContainer.length && !value.dataset.tnsControlsContainer != 'false' ? value.dataset.tnsControlsContainer : false; | |
| let sliderUseDots = value.dataset.tnsDots && value.dataset.tnsDots !== 'false' ? true : false; | |
| let sliderUseDotsPosition = value.dataset.tnsDotsPosition && value.dataset.tnsDotsPosition.length ? value.dataset.tnsDotsPosition : 'bottom'; | |
| let sliderNavContainer = value.dataset.tnsNavContainer && value.dataset.tnsNavContainer.length ? value.dataset.tnsNavContainer : false; | |
| // let thumbnail = value.dataset.name; | |
| console.log(value.dataset, sliderControlsContainer, navPrevBtnSelector, navNextBtnSelector); | |
| let data = {}; | |
| data.autoplayButtonOutput = false; | |
| data.controls = sliderUseNav; | |
| data.nav = sliderUseDots; | |
| data.gutter = sliderMargin; | |
| data.navPosition = sliderUseDotsPosition; | |
| // data.controlsPosition= 'top'; | |
| data.controlsText = ['', '']; | |
| data.controlsContainer = sliderControlsContainer; | |
| data.autoplay = sliderAutoPlay; | |
| data.mouseDrag = true; | |
| if (sliderNavContainer) data.navContainer = sliderNavContainer; | |
| if (value) data.container = value; | |
| if (gutter) data.gutter = gutter; | |
| if (sliderVisibleItems) data.items = sliderVisibleItems; | |
| if (sliderStagePadding) data.edgePadding = sliderStagePadding; | |
| if (slideBy) data.slideBy = slideBy; | |
| if (sliderCenterElements) data.center = sliderCenterElements; | |
| if (sliderUseNavText) data.navText = sliderUseNavText; | |
| data.loop = sliderLoop; | |
| data.autoplayTimeout = sliderSpeed; | |
| if (startIndex) data.startIndex = startIndex; | |
| if (fixedWidth) data.fixedWidth = fixedWidth; | |
| if (autoWidth) data.autoWidth = autoWidth; | |
| if (autoHeight) data.autoHeight = autoHeight; | |
| data.responsive = sliderResponsive; | |
| if (isVertical) { | |
| data.swipeAngle = false; | |
| data.axis = "vertical"; | |
| } | |
| _sliders[index] = tns(data); | |
| let currentSlider = _sliders[index].getInfo().container; | |
| if (currentSlider) { | |
| if (navPrevBtnSelector) $((sliderControlsContainer ? sliderControlsContainer + ' ' : '') + navPrevBtnSelector).on('click tap', function() { | |
| _sliders[index].goTo('prev'); | |
| if (currentSlider.dataset.tnsCurrentslidefunction && currentSlider.dataset.tnsCurrentslidefunction.length) { | |
| eval(currentSlider.dataset['tnsCurrentslidefunction'])(_sliders[index].getInfo()) | |
| } | |
| }); | |
| if (navNextBtnSelector) $((sliderControlsContainer ? sliderControlsContainer + ' ' : '') + navNextBtnSelector).on('click tap', function() { | |
| _sliders[index].goTo('next'); | |
| if (currentSlider.dataset.tnsCurrentslidefunction && currentSlider.dataset.tnsCurrentslidefunction.length) { | |
| eval(currentSlider.dataset['tnsCurrentslidefunction'])(_sliders[index].getInfo()) | |
| } | |
| }); | |
| if (currentSlider.dataset.tnsIndexchangefunction && currentSlider.dataset.tnsIndexchangefunction.length) { | |
| console.log(_sliders[index].events, currentSlider.dataset.tnsIndexchangefunction); | |
| _sliders[index].events.on('indexChanged', | |
| (info, eventName) => { | |
| console.log('change') | |
| return eval(currentSlider.dataset['tnsIndexchangefunction'])(info, eventName, _sliders); | |
| }); | |
| } | |
| if (progressBarId && $(progressBarId).length) { | |
| var updateProgressbarWidth = () => { | |
| var progressBar = document.querySelector(currentSlider.dataset['tnsProgressbar']); | |
| progressBar.style.transition = '0ms'; | |
| progressBar.style.width = '0%'; | |
| setTimeout(() => { | |
| progressBar.style.width = '100%'; | |
| progressBar.style.transition = parseInt(currentSlider.dataset['tnsSpeed']) + 'ms'; | |
| }) | |
| }; | |
| _sliders[index].events.on('indexChanged', (info, eventName) => { | |
| console.log('index changed'); | |
| updateProgressbarWidth() | |
| }); | |
| updateProgressbarWidth() | |
| } | |
| } | |
| }); | |
| // END automate owl carousel | |
| /* todo: */ | |
| /* step1: migrate to includes */ | |
| /* step2: define tns ustage & write js*/ | |
| /* step3: make all sections sliders */ | |
| </script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="bg"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
| <title>Papazov YT Example</title> | |
| <meta name="description" content=""> | |
| <meta name="keywords" content=""> | |
| <meta name="owner" content="Dimitar Papazov | vtk.pw"> | |
| <link rel="stylesheet" href="./assets/css/style.css"> | |
| <link href="https://fonts.googleapis.com/css?family=Work+Sans:200,400&display=swap" rel="stylesheet"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.4/tiny-slider.css"> | |
| <!--[if (lt IE 9)]><script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.4/min/tiny-slider.helper.ie8.js"></script><![endif]--> | |
| </head> | |
| <body class="bg-white text-gray-600 work-sans leading-normal text-base tracking-normal"> | |
| <!--Nav--> | |
| <nav id="header" class="w-full z-30 top-0 py-1"> | |
| <div class="w-full container mx-auto flex flex-wrap items-center justify-between mt-0 px-6 py-3"> | |
| <label for="menu-toggle" class="cursor-pointer md:hidden block"> | |
| <svg class="fill-current text-gray-900" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"> | |
| <title>menu</title> | |
| <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path> | |
| </svg> | |
| </label> | |
| <input class="hidden" type="checkbox" id="menu-toggle" /> | |
| <div class="hidden md:flex md:items-center md:w-auto w-full order-3 md:order-1" id="menu"> | |
| <nav> | |
| <ul class="md:flex items-center justify-between text-base text-gray-700 pt-4 md:pt-0"> | |
| <li><a class="inline-block no-underline hover:text-black hover:underline py-2 px-4" href="#">Shop</a></li> | |
| <li><a class="inline-block no-underline hover:text-black hover:underline py-2 px-4" href="#">About</a></li> | |
| </ul> | |
| </nav> | |
| </div> | |
| <div class="order-1 md:order-2"> | |
| <a class="flex items-center tracking-wide no-underline hover:no-underline font-bold text-gray-800 text-xl " href="#"> | |
| <svg class="fill-current text-gray-800 mr-2" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"> | |
| <path d="M5,22h14c1.103,0,2-0.897,2-2V9c0-0.553-0.447-1-1-1h-3V7c0-2.757-2.243-5-5-5S7,4.243,7,7v1H4C3.447,8,3,8.447,3,9v11 C3,21.103,3.897,22,5,22z M9,7c0-1.654,1.346-3,3-3s3,1.346,3,3v1H9V7z M5,10h2v2h2v-2h6v2h2v-2h2l0.002,10H5V10z" /> | |
| </svg> | |
| VTK.SHOP | |
| </a> | |
| </div> | |
| <div class="order-2 md:order-3 flex items-center" id="nav-content"> | |
| <a class="inline-block no-underline hover:text-black" href="#"> | |
| <svg class="fill-current hover:text-black" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"> | |
| <circle fill="none" cx="12" cy="7" r="3" /> | |
| <path d="M12 2C9.243 2 7 4.243 7 7s2.243 5 5 5 5-2.243 5-5S14.757 2 12 2zM12 10c-1.654 0-3-1.346-3-3s1.346-3 3-3 3 1.346 3 3S13.654 10 12 10zM21 21v-1c0-3.859-3.141-7-7-7h-4c-3.86 0-7 3.141-7 7v1h2v-1c0-2.757 2.243-5 5-5h4c2.757 0 5 2.243 5 5v1H21z" /> | |
| </svg> | |
| </a> | |
| <a class="pl-3 inline-block no-underline hover:text-black" href="#"> | |
| <svg class="fill-current hover:text-black" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"> | |
| <path d="M21,7H7.462L5.91,3.586C5.748,3.229,5.392,3,5,3H2v2h2.356L9.09,15.414C9.252,15.771,9.608,16,10,16h8 c0.4,0,0.762-0.238,0.919-0.606l3-7c0.133-0.309,0.101-0.663-0.084-0.944C21.649,7.169,21.336,7,21,7z M17.341,14h-6.697L8.371,9 h11.112L17.341,14z" /> | |
| <circle cx="10.5" cy="18.5" r="1.5" /> | |
| <circle cx="17.5" cy="18.5" r="1.5" /> | |
| </svg> | |
| </a> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- radio input carousel 💥 --> | |
| <div class="carousel relative container mx-auto" style="max-width:1600px;"> | |
| <div class="carousel-inner relative overflow-hidden w-full"> | |
| <!--Slide 1--> | |
| <input class="carousel-open" type="radio" id="carousel-1" name="carousel" aria-hidden="true" hidden="" checked="checked"> | |
| <div class="carousel-item absolute opacity-0" style="height:50vh;"> | |
| <div class="block h-full w-full mx-auto flex pt-6 md:pt-0 md:items-center bg-cover bg-right" style="background-image: url('https://images.unsplash.com/photo-1422190441165-ec2956dc9ecc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1600&q=80');"> | |
| <div class="container mx-auto"> | |
| <div class="flex flex-col w-full lg:w-1/2 md:ml-16 items-center md:items-start px-6 tracking-wide"> | |
| <p class="text-black text-2xl my-4">Stripy Zig Zag Jigsaw Pillow and Duvet Set</p> | |
| <a class="text-xl inline-block no-underline border-b border-gray-600 leading-relaxed hover:text-black hover:border-black" href="#">view product</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <label for="carousel-3" class="prev control-1 w-10 h-10 ml-2 md:ml-10 absolute cursor-pointer hidden text-3xl font-bold text-black hover:text-white rounded-full bg-white hover:bg-gray-900 leading-tight text-center z-10 inset-y-0 left-0 my-auto">‹</label> | |
| <label for="carousel-2" class="next control-1 w-10 h-10 mr-2 md:mr-10 absolute cursor-pointer hidden text-3xl font-bold text-black hover:text-white rounded-full bg-white hover:bg-gray-900 leading-tight text-center z-10 inset-y-0 right-0 my-auto">›</label> | |
| <!--Slide 2--> | |
| <input class="carousel-open" type="radio" id="carousel-2" name="carousel" aria-hidden="true" hidden=""> | |
| <div class="carousel-item absolute opacity-0 bg-cover bg-right" style="height:50vh;"> | |
| <div class="block h-full w-full mx-auto flex pt-6 md:pt-0 md:items-center bg-cover bg-right" style="background-image: url('https://images.unsplash.com/photo-1533090161767-e6ffed986c88?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjM0MTM2fQ&auto=format&fit=crop&w=1600&q=80');"> | |
| <div class="container mx-auto"> | |
| <div class="flex flex-col w-full lg:w-1/2 md:ml-16 items-center md:items-start px-6 tracking-wide"> | |
| <p class="text-black text-2xl my-4">Real Bamboo Wall Clock</p> | |
| <a class="text-xl inline-block no-underline border-b border-gray-600 leading-relaxed hover:text-black hover:border-black" href="#">view product</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <label for="carousel-1" class="prev control-2 w-10 h-10 ml-2 md:ml-10 absolute cursor-pointer hidden text-3xl font-bold text-black hover:text-white rounded-full bg-white hover:bg-gray-900 leading-tight text-center z-10 inset-y-0 left-0 my-auto">‹</label> | |
| <label for="carousel-3" class="next control-2 w-10 h-10 mr-2 md:mr-10 absolute cursor-pointer hidden text-3xl font-bold text-black hover:text-white rounded-full bg-white hover:bg-gray-900 leading-tight text-center z-10 inset-y-0 right-0 my-auto">›</label> | |
| <!--Slide 3--> | |
| <input class="carousel-open" type="radio" id="carousel-3" name="carousel" aria-hidden="true" hidden=""> | |
| <div class="carousel-item absolute opacity-0" style="height:50vh;"> | |
| <div class="block h-full w-full mx-auto flex pt-6 md:pt-0 md:items-center bg-cover bg-bottom" style="background-image: url('https://images.unsplash.com/photo-1519327232521-1ea2c736d34d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1600&q=80');"> | |
| <div class="container mx-auto"> | |
| <div class="flex flex-col w-full lg:w-1/2 md:ml-16 items-center md:items-start px-6 tracking-wide"> | |
| <p class="text-black text-2xl my-4">Brown and blue hardbound book</p> | |
| <a class="text-xl inline-block no-underline border-b border-gray-600 leading-relaxed hover:text-black hover:border-black" href="#">view product</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <label for="carousel-2" class="prev control-3 w-10 h-10 ml-2 md:ml-10 absolute cursor-pointer hidden text-3xl font-bold text-black hover:text-white rounded-full bg-white hover:bg-gray-900 leading-tight text-center z-10 inset-y-0 left-0 my-auto">‹</label> | |
| <label for="carousel-1" class="next control-3 w-10 h-10 mr-2 md:mr-10 absolute cursor-pointer hidden text-3xl font-bold text-black hover:text-white rounded-full bg-white hover:bg-gray-900 leading-tight text-center z-10 inset-y-0 right-0 my-auto">›</label> | |
| <!-- Add additional indicators for each slide--> | |
| <ol class="carousel-indicators"> | |
| <li class="inline-block mr-3"> | |
| <label for="carousel-1" class="carousel-bullet cursor-pointer block text-4xl text-gray-400 hover:text-gray-900">•</label> | |
| </li> | |
| <li class="inline-block mr-3"> | |
| <label for="carousel-2" class="carousel-bullet cursor-pointer block text-4xl text-gray-400 hover:text-gray-900">•</label> | |
| </li> | |
| <li class="inline-block mr-3"> | |
| <label for="carousel-3" class="carousel-bullet cursor-pointer block text-4xl text-gray-400 hover:text-gray-900">•</label> | |
| </li> | |
| </ol> | |
| </div> | |
| </div> | |
| <!-- products --> | |
| <section class="bg-white py-8"> | |
| <!-- section products 1 --> | |
| <div class="container mx-auto flex items-center flex-wrap pt-4 pb-12"> | |
| <nav id="store" class="w-full z-30 top-0 px-6 py-1"> | |
| <div class="w-full container mx-auto flex flex-wrap items-center justify-between mt-0 px-2 py-3"> | |
| <a class="uppercase tracking-wide no-underline hover:no-underline font-bold text-gray-800 text-xl " href="#"> | |
| Our recommended products | |
| </a> | |
| <div class="flex items-center" id="store-nav-content"> | |
| <a class="pl-3 inline-block no-underline hover:text-black" href="#"> | |
| <svg class="fill-current hover:text-black" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"> | |
| <path d="M7 11H17V13H7zM4 7H20V9H4zM10 15H14V17H10z" /> | |
| </svg> | |
| </a> | |
| <a class="pl-3 inline-block no-underline hover:text-black" href="#"> | |
| <svg class="fill-current hover:text-black" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"> | |
| <path d="M10,18c1.846,0,3.543-0.635,4.897-1.688l4.396,4.396l1.414-1.414l-4.396-4.396C17.365,13.543,18,11.846,18,10 c0-4.411-3.589-8-8-8s-8,3.589-8,8S5.589,18,10,18z M10,4c3.309,0,6,2.691,6,6s-2.691,6-6,6s-6-2.691-6-6S6.691,4,10,4z" /> | |
| </svg> | |
| </a> | |
| </div> | |
| </div> | |
| </nav> | |
| <div class="w-full md:w-1/3 xl:w-1/4 p-6 flex flex-col"> | |
| <a href="#"> | |
| <img class="hover:grow hover:shadow-lg" src="https://images.unsplash.com/photo-1555982105-d25af4182e4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&h=400&q=80"> | |
| <div class="pt-3 flex items-center justify-between"> | |
| <p class="">Product Name</p> | |
| <svg class="h-6 w-6 fill-current text-gray-500 hover:text-black" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> | |
| <path d="M12,4.595c-1.104-1.006-2.512-1.558-3.996-1.558c-1.578,0-3.072,0.623-4.213,1.758c-2.353,2.363-2.352,6.059,0.002,8.412 l7.332,7.332c0.17,0.299,0.498,0.492,0.875,0.492c0.322,0,0.609-0.163,0.792-0.409l7.415-7.415 c2.354-2.354,2.354-6.049-0.002-8.416c-1.137-1.131-2.631-1.754-4.209-1.754C14.513,3.037,13.104,3.589,12,4.595z M18.791,6.205 c1.563,1.571,1.564,4.025,0.002,5.588L12,18.586l-6.793-6.793C3.645,10.23,3.646,7.776,5.205,6.209 c0.76-0.756,1.754-1.172,2.799-1.172s2.035,0.416,2.789,1.17l0.5,0.5c0.391,0.391,1.023,0.391,1.414,0l0.5-0.5 C14.719,4.698,17.281,4.702,18.791,6.205z" /> | |
| </svg> | |
| </div> | |
| <p class="pt-1 text-gray-900">€9.99</p> | |
| </a> | |
| </div> | |
| <div class="w-full md:w-1/3 xl:w-1/4 p-6 flex flex-col"> | |
| <a href="#"> | |
| <img class="hover:grow hover:shadow-lg" src="https://images.unsplash.com/photo-1508423134147-addf71308178?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&h=400&q=80"> | |
| <div class="pt-3 flex items-center justify-between"> | |
| <p class="">Product Name</p> | |
| <svg class="h-6 w-6 fill-current text-gray-500 hover:text-black" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> | |
| <path d="M12,4.595c-1.104-1.006-2.512-1.558-3.996-1.558c-1.578,0-3.072,0.623-4.213,1.758c-2.353,2.363-2.352,6.059,0.002,8.412 l7.332,7.332c0.17,0.299,0.498,0.492,0.875,0.492c0.322,0,0.609-0.163,0.792-0.409l7.415-7.415 c2.354-2.354,2.354-6.049-0.002-8.416c-1.137-1.131-2.631-1.754-4.209-1.754C14.513,3.037,13.104,3.589,12,4.595z M18.791,6.205 c1.563,1.571,1.564,4.025,0.002,5.588L12,18.586l-6.793-6.793C3.645,10.23,3.646,7.776,5.205,6.209 c0.76-0.756,1.754-1.172,2.799-1.172s2.035,0.416,2.789,1.17l0.5,0.5c0.391,0.391,1.023,0.391,1.414,0l0.5-0.5 C14.719,4.698,17.281,4.702,18.791,6.205z" /> | |
| </svg> | |
| </div> | |
| <p class="pt-1 text-gray-900">€9.99</p> | |
| </a> | |
| </div> | |
| <div class="w-full md:w-1/3 xl:w-1/4 p-6 flex flex-col"> | |
| <a href="#"> | |
| <img class="hover:grow hover:shadow-lg" src="https://images.unsplash.com/photo-1449247709967-d4461a6a6103?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&h=400&q=80"> | |
| <div class="pt-3 flex items-center justify-between"> | |
| <p class="">Product Name</p> | |
| <svg class="h-6 w-6 fill-current text-gray-500 hover:text-black" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> | |
| <path d="M12,4.595c-1.104-1.006-2.512-1.558-3.996-1.558c-1.578,0-3.072,0.623-4.213,1.758c-2.353,2.363-2.352,6.059,0.002,8.412 l7.332,7.332c0.17,0.299,0.498,0.492,0.875,0.492c0.322,0,0.609-0.163,0.792-0.409l7.415-7.415 c2.354-2.354,2.354-6.049-0.002-8.416c-1.137-1.131-2.631-1.754-4.209-1.754C14.513,3.037,13.104,3.589,12,4.595z M18.791,6.205 c1.563,1.571,1.564,4.025,0.002,5.588L12,18.586l-6.793-6.793C3.645,10.23,3.646,7.776,5.205,6.209 c0.76-0.756,1.754-1.172,2.799-1.172s2.035,0.416,2.789,1.17l0.5,0.5c0.391,0.391,1.023,0.391,1.414,0l0.5-0.5 C14.719,4.698,17.281,4.702,18.791,6.205z" /> | |
| </svg> | |
| </div> | |
| <p class="pt-1 text-gray-900">€9.99</p> | |
| </a> | |
| </div> | |
| <div class="w-full md:w-1/3 xl:w-1/4 p-6 flex flex-col"> | |
| <a href="#"> | |
| <img class="hover:grow hover:shadow-lg" src="https://images.unsplash.com/reserve/LJIZlzHgQ7WPSh5KVTCB_Typewriter.jpg?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&h=400&q=80"> | |
| <div class="pt-3 flex items-center justify-between"> | |
| <p class="">Product Name</p> | |
| <svg class="h-6 w-6 fill-current text-gray-500 hover:text-black" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> | |
| <path d="M12,4.595c-1.104-1.006-2.512-1.558-3.996-1.558c-1.578,0-3.072,0.623-4.213,1.758c-2.353,2.363-2.352,6.059,0.002,8.412 l7.332,7.332c0.17,0.299,0.498,0.492,0.875,0.492c0.322,0,0.609-0.163,0.792-0.409l7.415-7.415 c2.354-2.354,2.354-6.049-0.002-8.416c-1.137-1.131-2.631-1.754-4.209-1.754C14.513,3.037,13.104,3.589,12,4.595z M18.791,6.205 c1.563,1.571,1.564,4.025,0.002,5.588L12,18.586l-6.793-6.793C3.645,10.23,3.646,7.776,5.205,6.209 c0.76-0.756,1.754-1.172,2.799-1.172s2.035,0.416,2.789,1.17l0.5,0.5c0.391,0.391,1.023,0.391,1.414,0l0.5-0.5 C14.719,4.698,17.281,4.702,18.791,6.205z" /> | |
| </svg> | |
| </div> | |
| <p class="pt-1 text-gray-900">€9.99</p> | |
| </a> | |
| </div> | |
| <div class="w-full md:w-1/3 xl:w-1/4 p-6 flex flex-col"> | |
| <a href="#"> | |
| <img class="hover:grow hover:shadow-lg" src="https://images.unsplash.com/photo-1467949576168-6ce8e2df4e13?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&h=400&q=80"> | |
| <div class="pt-3 flex items-center justify-between"> | |
| <p class="">Product Name</p> | |
| <svg class="h-6 w-6 fill-current text-gray-500 hover:text-black" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> | |
| <path d="M12,4.595c-1.104-1.006-2.512-1.558-3.996-1.558c-1.578,0-3.072,0.623-4.213,1.758c-2.353,2.363-2.352,6.059,0.002,8.412 l7.332,7.332c0.17,0.299,0.498,0.492,0.875,0.492c0.322,0,0.609-0.163,0.792-0.409l7.415-7.415 c2.354-2.354,2.354-6.049-0.002-8.416c-1.137-1.131-2.631-1.754-4.209-1.754C14.513,3.037,13.104,3.589,12,4.595z M18.791,6.205 c1.563,1.571,1.564,4.025,0.002,5.588L12,18.586l-6.793-6.793C3.645,10.23,3.646,7.776,5.205,6.209 c0.76-0.756,1.754-1.172,2.799-1.172s2.035,0.416,2.789,1.17l0.5,0.5c0.391,0.391,1.023,0.391,1.414,0l0.5-0.5 C14.719,4.698,17.281,4.702,18.791,6.205z" /> | |
| </svg> | |
| </div> | |
| <p class="pt-1 text-gray-900">€9.99</p> | |
| </a> | |
| </div> | |
| <div class="w-full md:w-1/3 xl:w-1/4 p-6 flex flex-col"> | |
| <a href="#"> | |
| <img class="hover:grow hover:shadow-lg" src="https://images.unsplash.com/photo-1544787219-7f47ccb76574?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&h=400&q=80"> | |
| <div class="pt-3 flex items-center justify-between"> | |
| <p class="">Product Name</p> | |
| <svg class="h-6 w-6 fill-current text-gray-500 hover:text-black" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> | |
| <path d="M12,4.595c-1.104-1.006-2.512-1.558-3.996-1.558c-1.578,0-3.072,0.623-4.213,1.758c-2.353,2.363-2.352,6.059,0.002,8.412 l7.332,7.332c0.17,0.299,0.498,0.492,0.875,0.492c0.322,0,0.609-0.163,0.792-0.409l7.415-7.415 c2.354-2.354,2.354-6.049-0.002-8.416c-1.137-1.131-2.631-1.754-4.209-1.754C14.513,3.037,13.104,3.589,12,4.595z M18.791,6.205 c1.563,1.571,1.564,4.025,0.002,5.588L12,18.586l-6.793-6.793C3.645,10.23,3.646,7.776,5.205,6.209 c0.76-0.756,1.754-1.172,2.799-1.172s2.035,0.416,2.789,1.17l0.5,0.5c0.391,0.391,1.023,0.391,1.414,0l0.5-0.5 C14.719,4.698,17.281,4.702,18.791,6.205z" /> | |
| </svg> | |
| </div> | |
| <p class="pt-1 text-gray-900">€9.99</p> | |
| </a> | |
| </div> | |
| <div class="w-full md:w-1/3 xl:w-1/4 p-6 flex flex-col"> | |
| <a href="#"> | |
| <img class="hover:grow hover:shadow-lg" src="https://images.unsplash.com/photo-1550837368-6594235de85c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&h=400&q=80"> | |
| <div class="pt-3 flex items-center justify-between"> | |
| <p class="">Product Name</p> | |
| <svg class="h-6 w-6 fill-current text-gray-500 hover:text-black" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> | |
| <path d="M12,4.595c-1.104-1.006-2.512-1.558-3.996-1.558c-1.578,0-3.072,0.623-4.213,1.758c-2.353,2.363-2.352,6.059,0.002,8.412 l7.332,7.332c0.17,0.299,0.498,0.492,0.875,0.492c0.322,0,0.609-0.163,0.792-0.409l7.415-7.415 c2.354-2.354,2.354-6.049-0.002-8.416c-1.137-1.131-2.631-1.754-4.209-1.754C14.513,3.037,13.104,3.589,12,4.595z M18.791,6.205 c1.563,1.571,1.564,4.025,0.002,5.588L12,18.586l-6.793-6.793C3.645,10.23,3.646,7.776,5.205,6.209 c0.76-0.756,1.754-1.172,2.799-1.172s2.035,0.416,2.789,1.17l0.5,0.5c0.391,0.391,1.023,0.391,1.414,0l0.5-0.5 C14.719,4.698,17.281,4.702,18.791,6.205z" /> | |
| </svg> | |
| </div> | |
| <p class="pt-1 text-gray-900">€9.99</p> | |
| </a> | |
| </div> | |
| <div class="w-full md:w-1/3 xl:w-1/4 p-6 flex flex-col"> | |
| <a href="#"> | |
| <img class="hover:grow hover:shadow-lg" src="https://images.unsplash.com/photo-1551431009-a802eeec77b1?ixlib=rb-1.2.1&auto=format&fit=crop&w=400&h=400&q=80"> | |
| <div class="pt-3 flex items-center justify-between"> | |
| <p class="">Product Name</p> | |
| <svg class="h-6 w-6 fill-current text-gray-500 hover:text-black" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> | |
| <path d="M12,4.595c-1.104-1.006-2.512-1.558-3.996-1.558c-1.578,0-3.072,0.623-4.213,1.758c-2.353,2.363-2.352,6.059,0.002,8.412 l7.332,7.332c0.17,0.299,0.498,0.492,0.875,0.492c0.322,0,0.609-0.163,0.792-0.409l7.415-7.415 c2.354-2.354,2.354-6.049-0.002-8.416c-1.137-1.131-2.631-1.754-4.209-1.754C14.513,3.037,13.104,3.589,12,4.595z M18.791,6.205 c1.563,1.571,1.564,4.025,0.002,5.588L12,18.586l-6.793-6.793C3.645,10.23,3.646,7.776,5.205,6.209 c0.76-0.756,1.754-1.172,2.799-1.172s2.035,0.416,2.789,1.17l0.5,0.5c0.391,0.391,1.023,0.391,1.414,0l0.5-0.5 C14.719,4.698,17.281,4.702,18.791,6.205z" /> | |
| </svg> | |
| </div> | |
| <p class="pt-1 text-gray-900">€9.99</p> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- section products 2 --> | |
| <div class="container mx-auto flex items-center flex-wrap pt-4 pb-12"> | |
| <nav id="store2" class="w-full z-30 top-0 px-6 py-1"> | |
| <div class="w-full container mx-auto flex flex-wrap items-center justify-between mt-0 px-2 py-3"> | |
| <a class="uppercase tracking-wide no-underline hover:no-underline font-bold text-gray-800 text-xl " href="#"> | |
| NEW products | |
| </a> | |
| <div class="flex items-center" id="store-nav-content"> | |
| <a class="pl-3 inline-block no-underline hover:text-black" href="#"> | |
| <svg class="fill-current hover:text-black" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"> | |
| <path d="M7 11H17V13H7zM4 7H20V9H4zM10 15H14V17H10z" /> | |
| </svg> | |
| </a> | |
| <a class="pl-3 inline-block no-underline hover:text-black" href="#"> | |
| <svg class="fill-current hover:text-black" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"> | |
| <path d="M10,18c1.846,0,3.543-0.635,4.897-1.688l4.396,4.396l1.414-1.414l-4.396-4.396C17.365,13.543,18,11.846,18,10 c0-4.411-3.589-8-8-8s-8,3.589-8,8S5.589,18,10,18z M10,4c3.309,0,6,2.691,6,6s-2.691,6-6,6s-6-2.691-6-6S6.691,4,10,4z" /> | |
| </svg> | |
| </a> | |
| </div> | |
| </div> | |
| </nav> | |
| <div class="w-full md:w-1/3 xl:w-1/4 p-6 flex flex-col"> | |
| <a href="#"> | |
| <img class="hover:grow hover:shadow-lg" src="https://images.unsplash.com/photo-1555982105-d25af4182e4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&h=400&q=80"> | |
| <div class="pt-3 flex items-center justify-between"> | |
| <p class="">Product Name</p> | |
| <svg class="h-6 w-6 fill-current text-gray-500 hover:text-black" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> | |
| <path d="M12,4.595c-1.104-1.006-2.512-1.558-3.996-1.558c-1.578,0-3.072,0.623-4.213,1.758c-2.353,2.363-2.352,6.059,0.002,8.412 l7.332,7.332c0.17,0.299,0.498,0.492,0.875,0.492c0.322,0,0.609-0.163,0.792-0.409l7.415-7.415 c2.354-2.354,2.354-6.049-0.002-8.416c-1.137-1.131-2.631-1.754-4.209-1.754C14.513,3.037,13.104,3.589,12,4.595z M18.791,6.205 c1.563,1.571,1.564,4.025,0.002,5.588L12,18.586l-6.793-6.793C3.645,10.23,3.646,7.776,5.205,6.209 c0.76-0.756,1.754-1.172,2.799-1.172s2.035,0.416,2.789,1.17l0.5,0.5c0.391,0.391,1.023,0.391,1.414,0l0.5-0.5 C14.719,4.698,17.281,4.702,18.791,6.205z" /> | |
| </svg> | |
| </div> | |
| <p class="pt-1 text-gray-900">€9.99</p> | |
| </a> | |
| </div> | |
| <div class="w-full md:w-1/3 xl:w-1/4 p-6 flex flex-col"> | |
| <a href="#"> | |
| <img class="hover:grow hover:shadow-lg" src="https://images.unsplash.com/photo-1508423134147-addf71308178?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&h=400&q=80"> | |
| <div class="pt-3 flex items-center justify-between"> | |
| <p class="">Product Name</p> | |
| <svg class="h-6 w-6 fill-current text-gray-500 hover:text-black" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> | |
| <path d="M12,4.595c-1.104-1.006-2.512-1.558-3.996-1.558c-1.578,0-3.072,0.623-4.213,1.758c-2.353,2.363-2.352,6.059,0.002,8.412 l7.332,7.332c0.17,0.299,0.498,0.492,0.875,0.492c0.322,0,0.609-0.163,0.792-0.409l7.415-7.415 c2.354-2.354,2.354-6.049-0.002-8.416c-1.137-1.131-2.631-1.754-4.209-1.754C14.513,3.037,13.104,3.589,12,4.595z M18.791,6.205 c1.563,1.571,1.564,4.025,0.002,5.588L12,18.586l-6.793-6.793C3.645,10.23,3.646,7.776,5.205,6.209 c0.76-0.756,1.754-1.172,2.799-1.172s2.035,0.416,2.789,1.17l0.5,0.5c0.391,0.391,1.023,0.391,1.414,0l0.5-0.5 C14.719,4.698,17.281,4.702,18.791,6.205z" /> | |
| </svg> | |
| </div> | |
| <p class="pt-1 text-gray-900">€9.99</p> | |
| </a> | |
| </div> | |
| <div class="w-full md:w-1/3 xl:w-1/4 p-6 flex flex-col"> | |
| <a href="#"> | |
| <img class="hover:grow hover:shadow-lg" src="https://images.unsplash.com/photo-1449247709967-d4461a6a6103?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&h=400&q=80"> | |
| <div class="pt-3 flex items-center justify-between"> | |
| <p class="">Product Name</p> | |
| <svg class="h-6 w-6 fill-current text-gray-500 hover:text-black" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> | |
| <path d="M12,4.595c-1.104-1.006-2.512-1.558-3.996-1.558c-1.578,0-3.072,0.623-4.213,1.758c-2.353,2.363-2.352,6.059,0.002,8.412 l7.332,7.332c0.17,0.299,0.498,0.492,0.875,0.492c0.322,0,0.609-0.163,0.792-0.409l7.415-7.415 c2.354-2.354,2.354-6.049-0.002-8.416c-1.137-1.131-2.631-1.754-4.209-1.754C14.513,3.037,13.104,3.589,12,4.595z M18.791,6.205 c1.563,1.571,1.564,4.025,0.002,5.588L12,18.586l-6.793-6.793C3.645,10.23,3.646,7.776,5.205,6.209 c0.76-0.756,1.754-1.172,2.799-1.172s2.035,0.416,2.789,1.17l0.5,0.5c0.391,0.391,1.023,0.391,1.414,0l0.5-0.5 C14.719,4.698,17.281,4.702,18.791,6.205z" /> | |
| </svg> | |
| </div> | |
| <p class="pt-1 text-gray-900">€9.99</p> | |
| </a> | |
| </div> | |
| <div class="w-full md:w-1/3 xl:w-1/4 p-6 flex flex-col"> | |
| <a href="#"> | |
| <img class="hover:grow hover:shadow-lg" src="https://images.unsplash.com/reserve/LJIZlzHgQ7WPSh5KVTCB_Typewriter.jpg?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&h=400&q=80"> | |
| <div class="pt-3 flex items-center justify-between"> | |
| <p class="">Product Name</p> | |
| <svg class="h-6 w-6 fill-current text-gray-500 hover:text-black" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> | |
| <path d="M12,4.595c-1.104-1.006-2.512-1.558-3.996-1.558c-1.578,0-3.072,0.623-4.213,1.758c-2.353,2.363-2.352,6.059,0.002,8.412 l7.332,7.332c0.17,0.299,0.498,0.492,0.875,0.492c0.322,0,0.609-0.163,0.792-0.409l7.415-7.415 c2.354-2.354,2.354-6.049-0.002-8.416c-1.137-1.131-2.631-1.754-4.209-1.754C14.513,3.037,13.104,3.589,12,4.595z M18.791,6.205 c1.563,1.571,1.564,4.025,0.002,5.588L12,18.586l-6.793-6.793C3.645,10.23,3.646,7.776,5.205,6.209 c0.76-0.756,1.754-1.172,2.799-1.172s2.035,0.416,2.789,1.17l0.5,0.5c0.391,0.391,1.023,0.391,1.414,0l0.5-0.5 C14.719,4.698,17.281,4.702,18.791,6.205z" /> | |
| </svg> | |
| </div> | |
| <p class="pt-1 text-gray-900">€9.99</p> | |
| </a> | |
| </div> | |
| <div class="w-full md:w-1/3 xl:w-1/4 p-6 flex flex-col"> | |
| <a href="#"> | |
| <img class="hover:grow hover:shadow-lg" src="https://images.unsplash.com/photo-1467949576168-6ce8e2df4e13?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&h=400&q=80"> | |
| <div class="pt-3 flex items-center justify-between"> | |
| <p class="">Product Name</p> | |
| <svg class="h-6 w-6 fill-current text-gray-500 hover:text-black" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> | |
| <path d="M12,4.595c-1.104-1.006-2.512-1.558-3.996-1.558c-1.578,0-3.072,0.623-4.213,1.758c-2.353,2.363-2.352,6.059,0.002,8.412 l7.332,7.332c0.17,0.299,0.498,0.492,0.875,0.492c0.322,0,0.609-0.163,0.792-0.409l7.415-7.415 c2.354-2.354,2.354-6.049-0.002-8.416c-1.137-1.131-2.631-1.754-4.209-1.754C14.513,3.037,13.104,3.589,12,4.595z M18.791,6.205 c1.563,1.571,1.564,4.025,0.002,5.588L12,18.586l-6.793-6.793C3.645,10.23,3.646,7.776,5.205,6.209 c0.76-0.756,1.754-1.172,2.799-1.172s2.035,0.416,2.789,1.17l0.5,0.5c0.391,0.391,1.023,0.391,1.414,0l0.5-0.5 C14.719,4.698,17.281,4.702,18.791,6.205z" /> | |
| </svg> | |
| </div> | |
| <p class="pt-1 text-gray-900">€9.99</p> | |
| </a> | |
| </div> | |
| <div class="w-full md:w-1/3 xl:w-1/4 p-6 flex flex-col"> | |
| <a href="#"> | |
| <img class="hover:grow hover:shadow-lg" src="https://images.unsplash.com/photo-1544787219-7f47ccb76574?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&h=400&q=80"> | |
| <div class="pt-3 flex items-center justify-between"> | |
| <p class="">Product Name</p> | |
| <svg class="h-6 w-6 fill-current text-gray-500 hover:text-black" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> | |
| <path d="M12,4.595c-1.104-1.006-2.512-1.558-3.996-1.558c-1.578,0-3.072,0.623-4.213,1.758c-2.353,2.363-2.352,6.059,0.002,8.412 l7.332,7.332c0.17,0.299,0.498,0.492,0.875,0.492c0.322,0,0.609-0.163,0.792-0.409l7.415-7.415 c2.354-2.354,2.354-6.049-0.002-8.416c-1.137-1.131-2.631-1.754-4.209-1.754C14.513,3.037,13.104,3.589,12,4.595z M18.791,6.205 c1.563,1.571,1.564,4.025,0.002,5.588L12,18.586l-6.793-6.793C3.645,10.23,3.646,7.776,5.205,6.209 c0.76-0.756,1.754-1.172,2.799-1.172s2.035,0.416,2.789,1.17l0.5,0.5c0.391,0.391,1.023,0.391,1.414,0l0.5-0.5 C14.719,4.698,17.281,4.702,18.791,6.205z" /> | |
| </svg> | |
| </div> | |
| <p class="pt-1 text-gray-900">€9.99</p> | |
| </a> | |
| </div> | |
| <div class="w-full md:w-1/3 xl:w-1/4 p-6 flex flex-col"> | |
| <a href="#"> | |
| <img class="hover:grow hover:shadow-lg" src="https://images.unsplash.com/photo-1550837368-6594235de85c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&h=400&q=80"> | |
| <div class="pt-3 flex items-center justify-between"> | |
| <p class="">Product Name</p> | |
| <svg class="h-6 w-6 fill-current text-gray-500 hover:text-black" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> | |
| <path d="M12,4.595c-1.104-1.006-2.512-1.558-3.996-1.558c-1.578,0-3.072,0.623-4.213,1.758c-2.353,2.363-2.352,6.059,0.002,8.412 l7.332,7.332c0.17,0.299,0.498,0.492,0.875,0.492c0.322,0,0.609-0.163,0.792-0.409l7.415-7.415 c2.354-2.354,2.354-6.049-0.002-8.416c-1.137-1.131-2.631-1.754-4.209-1.754C14.513,3.037,13.104,3.589,12,4.595z M18.791,6.205 c1.563,1.571,1.564,4.025,0.002,5.588L12,18.586l-6.793-6.793C3.645,10.23,3.646,7.776,5.205,6.209 c0.76-0.756,1.754-1.172,2.799-1.172s2.035,0.416,2.789,1.17l0.5,0.5c0.391,0.391,1.023,0.391,1.414,0l0.5-0.5 C14.719,4.698,17.281,4.702,18.791,6.205z" /> | |
| </svg> | |
| </div> | |
| <p class="pt-1 text-gray-900">€9.99</p> | |
| </a> | |
| </div> | |
| <div class="w-full md:w-1/3 xl:w-1/4 p-6 flex flex-col"> | |
| <a href="#"> | |
| <img class="hover:grow hover:shadow-lg" src="https://images.unsplash.com/photo-1551431009-a802eeec77b1?ixlib=rb-1.2.1&auto=format&fit=crop&w=400&h=400&q=80"> | |
| <div class="pt-3 flex items-center justify-between"> | |
| <p class="">Product Name</p> | |
| <svg class="h-6 w-6 fill-current text-gray-500 hover:text-black" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> | |
| <path d="M12,4.595c-1.104-1.006-2.512-1.558-3.996-1.558c-1.578,0-3.072,0.623-4.213,1.758c-2.353,2.363-2.352,6.059,0.002,8.412 l7.332,7.332c0.17,0.299,0.498,0.492,0.875,0.492c0.322,0,0.609-0.163,0.792-0.409l7.415-7.415 c2.354-2.354,2.354-6.049-0.002-8.416c-1.137-1.131-2.631-1.754-4.209-1.754C14.513,3.037,13.104,3.589,12,4.595z M18.791,6.205 c1.563,1.571,1.564,4.025,0.002,5.588L12,18.586l-6.793-6.793C3.645,10.23,3.646,7.776,5.205,6.209 c0.76-0.756,1.754-1.172,2.799-1.172s2.035,0.416,2.789,1.17l0.5,0.5c0.391,0.391,1.023,0.391,1.414,0l0.5-0.5 C14.719,4.698,17.281,4.702,18.791,6.205z" /> | |
| </svg> | |
| </div> | |
| <p class="pt-1 text-gray-900">€9.99</p> | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- brands --> | |
| <section class="py-16 bg-white"> | |
| <div class="container m-auto px-6 space-y-8 md:px-12 lg:px-56"> | |
| <div class="m-auto text-center lg:w-7/12"> | |
| <h2 class="text-2xl text-gray-700 font-bold md:text-4xl">Your favorite companies are our partners.</h2> | |
| </div> | |
| <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4"> | |
| <div class="p-4"> | |
| <img src="https://tailus.io/sources/blocks/company-site/preview/images/clients/airbnb.svg" class="" alt=""> | |
| </div> | |
| <div class="p-4"> | |
| <img src="https://tailus.io/sources/blocks/company-site/preview/images/clients/client-8.png" class="w-32 " alt=""> | |
| </div> | |
| <div class="p-4"> | |
| <img src="https://tailus.io/sources/blocks/company-site/preview/images/clients/client-3.png" class="w-32 " alt=""> | |
| </div> | |
| <div class="p-4"> | |
| <img src="https://tailus.io/sources/blocks/company-site/preview/images/clients/client-1.png" class="w-32 " alt=""> | |
| </div> | |
| <div class="p-4"> | |
| <img src="https://tailus.io/sources/blocks/company-site/preview/images/clients/tailus.svg" class="w-32" alt=""> | |
| </div> | |
| <div class="p-4"> | |
| <img src="https://tailus.io/sources/blocks/company-site/preview/images/clients/microsoft.svg" class="w-32" alt=""> | |
| </div> | |
| <div class="p-4"> | |
| <img src="https://tailus.io/sources/blocks/company-site/preview/images/clients/coty.svg" class="w-20" alt=""> | |
| </div> | |
| <div class="p-4"> | |
| <img src="https://tailus.io/sources/blocks/company-site/preview/images/clients/client-4.png" class="w-24" alt=""> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- houses --> | |
| <section class="bg-white py-8"> | |
| <div class="container mx-auto flex items-center flex-wrap pt-4 pb-12"> | |
| <nav id="store" class="w-full z-30 top-0 px-6 py-1"> | |
| <div class="w-full container mx-auto flex flex-wrap items-center justify-between mt-0 px-2 py-3"> | |
| <a class="uppercase tracking-wide no-underline hover:no-underline font-bold text-gray-800 text-xl " href="#"> | |
| You can stay here | |
| </a> | |
| </div> | |
| </nav> | |
| <div class="mx-auto px-8 flex flex-wrap justify-between items-stretch"> | |
| <div class="max-w-sm w-full sm:w-1/2 lg:w-1/3 xl:w-1/4 py-6 px-3"> | |
| <div class="bg-white shadow-xl rounded-lg overflow-hidden"> | |
| <div class="bg-cover bg-center h-56 p-4" style="background-image: url(https://images.unsplash.com/photo-1475855581690-80accde3ae2b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80)"> | |
| <div class="flex justify-end"> | |
| <svg class="h-6 w-6 text-white fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> | |
| <path d="M12.76 3.76a6 6 0 0 1 8.48 8.48l-8.53 8.54a1 1 0 0 1-1.42 0l-8.53-8.54a6 6 0 0 1 8.48-8.48l.76.75.76-.75zm7.07 7.07a4 4 0 1 0-5.66-5.66l-1.46 1.47a1 1 0 0 1-1.42 0L9.83 5.17a4 4 0 1 0-5.66 5.66L12 18.66l7.83-7.83z"> | |
| </path> | |
| </svg> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <p class="uppercase tracking-wide text-sm font-bold text-gray-700">Detached house • 5y old | |
| </p> | |
| <p class="text-3xl text-gray-900">€750,000</p> | |
| <p class="text-gray-700">742 Evergreen Terrace</p> | |
| </div> | |
| <div class="flex p-4 border-t border-gray-300 text-gray-700"> | |
| <div class="flex-1 inline-flex items-center"> | |
| <svg class="h-6 w-6 text-gray-600 fill-current mr-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> | |
| <path d="M0 16L3 5V1a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v4l3 11v5a1 1 0 0 1-1 1v2h-1v-2H2v2H1v-2a1 1 0 0 1-1-1v-5zM19 5h1V1H4v4h1V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1h2V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1zm0 1v2a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1V6h-2v2a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V6H3.76L1.04 16h21.92L20.24 6H19zM1 17v4h22v-4H1zM6 4v4h4V4H6zm8 0v4h4V4h-4z"> | |
| </path> | |
| </svg> | |
| <p><span class="text-gray-900 font-bold">3</span> Bedrooms</p> | |
| </div> | |
| <div class="flex-1 inline-flex items-center"> | |
| <svg class="h-6 w-6 text-gray-600 fill-current mr-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> | |
| <path fill-rule="evenodd" d="M17.03 21H7.97a4 4 0 0 1-1.3-.22l-1.22 2.44-.9-.44 1.22-2.44a4 4 0 0 1-1.38-1.55L.5 11h7.56a4 4 0 0 1 1.78.42l2.32 1.16a4 4 0 0 0 1.78.42h9.56l-2.9 5.79a4 4 0 0 1-1.37 1.55l1.22 2.44-.9.44-1.22-2.44a4 4 0 0 1-1.3.22zM21 11h2.5a.5.5 0 1 1 0 1h-9.06a4.5 4.5 0 0 1-2-.48l-2.32-1.15A3.5 3.5 0 0 0 8.56 10H.5a.5.5 0 0 1 0-1h8.06c.7 0 1.38.16 2 .48l2.32 1.15a3.5 3.5 0 0 0 1.56.37H20V2a1 1 0 0 0-1.74-.67c.64.97.53 2.29-.32 3.14l-.35.36-3.54-3.54.35-.35a2.5 2.5 0 0 1 3.15-.32A2 2 0 0 1 21 2v9zm-5.48-9.65l2 2a1.5 1.5 0 0 0-2-2zm-10.23 17A3 3 0 0 0 7.97 20h9.06a3 3 0 0 0 2.68-1.66L21.88 14h-7.94a5 5 0 0 1-2.23-.53L9.4 12.32A3 3 0 0 0 8.06 12H2.12l3.17 6.34z"> | |
| </path> | |
| </svg> | |
| <p><span class="text-gray-900 font-bold">2</span> Bathrooms</p> | |
| </div> | |
| </div> | |
| <div class="px-4 pt-3 pb-4 border-t border-gray-300 bg-gray-100"> | |
| <div class="text-xs uppercase font-bold text-gray-600 tracking-wide">Realtor</div> | |
| <div class="flex items-center pt-2"> | |
| <div class="bg-cover bg-center w-10 h-10 rounded-full mr-3" style="background-image: url(https://images.unsplash.com/photo-1500522144261-ea64433bbe27?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=751&q=80)"> | |
| </div> | |
| <div> | |
| <p class="font-bold text-gray-900">Tiffany Heffner</p> | |
| <p class="text-sm text-gray-700">(555) 555-4321</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="max-w-sm w-full sm:w-1/2 lg:w-1/3 xl:w-1/4 py-6 px-3"> | |
| <div class="bg-white shadow-xl rounded-lg overflow-hidden"> | |
| <div class="bg-cover bg-center h-56 p-4" style="background-image: url(https://images.unsplash.com/photo-1475855581690-80accde3ae2b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80)"> | |
| <div class="flex justify-end"> | |
| <svg class="h-6 w-6 text-white fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> | |
| <path d="M12.76 3.76a6 6 0 0 1 8.48 8.48l-8.53 8.54a1 1 0 0 1-1.42 0l-8.53-8.54a6 6 0 0 1 8.48-8.48l.76.75.76-.75zm7.07 7.07a4 4 0 1 0-5.66-5.66l-1.46 1.47a1 1 0 0 1-1.42 0L9.83 5.17a4 4 0 1 0-5.66 5.66L12 18.66l7.83-7.83z"> | |
| </path> | |
| </svg> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <p class="uppercase tracking-wide text-sm font-bold text-gray-700">Detached house • 5y old | |
| </p> | |
| <p class="text-3xl text-gray-900">€750,000</p> | |
| <p class="text-gray-700">742 Evergreen Terrace</p> | |
| </div> | |
| <div class="flex p-4 border-t border-gray-300 text-gray-700"> | |
| <div class="flex-1 inline-flex items-center"> | |
| <svg class="h-6 w-6 text-gray-600 fill-current mr-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> | |
| <path d="M0 16L3 5V1a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v4l3 11v5a1 1 0 0 1-1 1v2h-1v-2H2v2H1v-2a1 1 0 0 1-1-1v-5zM19 5h1V1H4v4h1V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1h2V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1zm0 1v2a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1V6h-2v2a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V6H3.76L1.04 16h21.92L20.24 6H19zM1 17v4h22v-4H1zM6 4v4h4V4H6zm8 0v4h4V4h-4z"> | |
| </path> | |
| </svg> | |
| <p><span class="text-gray-900 font-bold">3</span> Bedrooms</p> | |
| </div> | |
| <div class="flex-1 inline-flex items-center"> | |
| <svg class="h-6 w-6 text-gray-600 fill-current mr-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> | |
| <path fill-rule="evenodd" d="M17.03 21H7.97a4 4 0 0 1-1.3-.22l-1.22 2.44-.9-.44 1.22-2.44a4 4 0 0 1-1.38-1.55L.5 11h7.56a4 4 0 0 1 1.78.42l2.32 1.16a4 4 0 0 0 1.78.42h9.56l-2.9 5.79a4 4 0 0 1-1.37 1.55l1.22 2.44-.9.44-1.22-2.44a4 4 0 0 1-1.3.22zM21 11h2.5a.5.5 0 1 1 0 1h-9.06a4.5 4.5 0 0 1-2-.48l-2.32-1.15A3.5 3.5 0 0 0 8.56 10H.5a.5.5 0 0 1 0-1h8.06c.7 0 1.38.16 2 .48l2.32 1.15a3.5 3.5 0 0 0 1.56.37H20V2a1 1 0 0 0-1.74-.67c.64.97.53 2.29-.32 3.14l-.35.36-3.54-3.54.35-.35a2.5 2.5 0 0 1 3.15-.32A2 2 0 0 1 21 2v9zm-5.48-9.65l2 2a1.5 1.5 0 0 0-2-2zm-10.23 17A3 3 0 0 0 7.97 20h9.06a3 3 0 0 0 2.68-1.66L21.88 14h-7.94a5 5 0 0 1-2.23-.53L9.4 12.32A3 3 0 0 0 8.06 12H2.12l3.17 6.34z"> | |
| </path> | |
| </svg> | |
| <p><span class="text-gray-900 font-bold">2</span> Bathrooms</p> | |
| </div> | |
| </div> | |
| <div class="px-4 pt-3 pb-4 border-t border-gray-300 bg-gray-100"> | |
| <div class="text-xs uppercase font-bold text-gray-600 tracking-wide">Realtor</div> | |
| <div class="flex items-center pt-2"> | |
| <div class="bg-cover bg-center w-10 h-10 rounded-full mr-3" style="background-image: url(https://images.unsplash.com/photo-1500522144261-ea64433bbe27?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=751&q=80)"> | |
| </div> | |
| <div> | |
| <p class="font-bold text-gray-900">Tiffany Heffner</p> | |
| <p class="text-sm text-gray-700">(555) 555-4321</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="max-w-sm w-full sm:w-1/2 lg:w-1/3 xl:w-1/4 py-6 px-3"> | |
| <div class="bg-white shadow-xl rounded-lg overflow-hidden"> | |
| <div class="bg-cover bg-center h-56 p-4" style="background-image: url(https://images.unsplash.com/photo-1475855581690-80accde3ae2b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80)"> | |
| <div class="flex justify-end"> | |
| <svg class="h-6 w-6 text-white fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> | |
| <path d="M12.76 3.76a6 6 0 0 1 8.48 8.48l-8.53 8.54a1 1 0 0 1-1.42 0l-8.53-8.54a6 6 0 0 1 8.48-8.48l.76.75.76-.75zm7.07 7.07a4 4 0 1 0-5.66-5.66l-1.46 1.47a1 1 0 0 1-1.42 0L9.83 5.17a4 4 0 1 0-5.66 5.66L12 18.66l7.83-7.83z"> | |
| </path> | |
| </svg> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <p class="uppercase tracking-wide text-sm font-bold text-gray-700">Detached house • 5y old | |
| </p> | |
| <p class="text-3xl text-gray-900">€750,000</p> | |
| <p class="text-gray-700">742 Evergreen Terrace</p> | |
| </div> | |
| <div class="flex p-4 border-t border-gray-300 text-gray-700"> | |
| <div class="flex-1 inline-flex items-center"> | |
| <svg class="h-6 w-6 text-gray-600 fill-current mr-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> | |
| <path d="M0 16L3 5V1a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v4l3 11v5a1 1 0 0 1-1 1v2h-1v-2H2v2H1v-2a1 1 0 0 1-1-1v-5zM19 5h1V1H4v4h1V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1h2V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1zm0 1v2a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1V6h-2v2a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V6H3.76L1.04 16h21.92L20.24 6H19zM1 17v4h22v-4H1zM6 4v4h4V4H6zm8 0v4h4V4h-4z"> | |
| </path> | |
| </svg> | |
| <p><span class="text-gray-900 font-bold">3</span> Bedrooms</p> | |
| </div> | |
| <div class="flex-1 inline-flex items-center"> | |
| <svg class="h-6 w-6 text-gray-600 fill-current mr-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> | |
| <path fill-rule="evenodd" d="M17.03 21H7.97a4 4 0 0 1-1.3-.22l-1.22 2.44-.9-.44 1.22-2.44a4 4 0 0 1-1.38-1.55L.5 11h7.56a4 4 0 0 1 1.78.42l2.32 1.16a4 4 0 0 0 1.78.42h9.56l-2.9 5.79a4 4 0 0 1-1.37 1.55l1.22 2.44-.9.44-1.22-2.44a4 4 0 0 1-1.3.22zM21 11h2.5a.5.5 0 1 1 0 1h-9.06a4.5 4.5 0 0 1-2-.48l-2.32-1.15A3.5 3.5 0 0 0 8.56 10H.5a.5.5 0 0 1 0-1h8.06c.7 0 1.38.16 2 .48l2.32 1.15a3.5 3.5 0 0 0 1.56.37H20V2a1 1 0 0 0-1.74-.67c.64.97.53 2.29-.32 3.14l-.35.36-3.54-3.54.35-.35a2.5 2.5 0 0 1 3.15-.32A2 2 0 0 1 21 2v9zm-5.48-9.65l2 2a1.5 1.5 0 0 0-2-2zm-10.23 17A3 3 0 0 0 7.97 20h9.06a3 3 0 0 0 2.68-1.66L21.88 14h-7.94a5 5 0 0 1-2.23-.53L9.4 12.32A3 3 0 0 0 8.06 12H2.12l3.17 6.34z"> | |
| </path> | |
| </svg> | |
| <p><span class="text-gray-900 font-bold">2</span> Bathrooms</p> | |
| </div> | |
| </div> | |
| <div class="px-4 pt-3 pb-4 border-t border-gray-300 bg-gray-100"> | |
| <div class="text-xs uppercase font-bold text-gray-600 tracking-wide">Realtor</div> | |
| <div class="flex items-center pt-2"> | |
| <div class="bg-cover bg-center w-10 h-10 rounded-full mr-3" style="background-image: url(https://images.unsplash.com/photo-1500522144261-ea64433bbe27?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=751&q=80)"> | |
| </div> | |
| <div> | |
| <p class="font-bold text-gray-900">Tiffany Heffner</p> | |
| <p class="text-sm text-gray-700">(555) 555-4321</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="max-w-sm w-full sm:w-1/2 lg:w-1/3 xl:w-1/4 py-6 px-3"> | |
| <div class="bg-white shadow-xl rounded-lg overflow-hidden"> | |
| <div class="bg-cover bg-center h-56 p-4" style="background-image: url(https://images.unsplash.com/photo-1475855581690-80accde3ae2b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80)"> | |
| <div class="flex justify-end"> | |
| <svg class="h-6 w-6 text-white fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> | |
| <path d="M12.76 3.76a6 6 0 0 1 8.48 8.48l-8.53 8.54a1 1 0 0 1-1.42 0l-8.53-8.54a6 6 0 0 1 8.48-8.48l.76.75.76-.75zm7.07 7.07a4 4 0 1 0-5.66-5.66l-1.46 1.47a1 1 0 0 1-1.42 0L9.83 5.17a4 4 0 1 0-5.66 5.66L12 18.66l7.83-7.83z"> | |
| </path> | |
| </svg> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <p class="uppercase tracking-wide text-sm font-bold text-gray-700">Detached house • 5y old | |
| </p> | |
| <p class="text-3xl text-gray-900">€750,000</p> | |
| <p class="text-gray-700">742 Evergreen Terrace</p> | |
| </div> | |
| <div class="flex p-4 border-t border-gray-300 text-gray-700"> | |
| <div class="flex-1 inline-flex items-center"> | |
| <svg class="h-6 w-6 text-gray-600 fill-current mr-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> | |
| <path d="M0 16L3 5V1a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v4l3 11v5a1 1 0 0 1-1 1v2h-1v-2H2v2H1v-2a1 1 0 0 1-1-1v-5zM19 5h1V1H4v4h1V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1h2V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1zm0 1v2a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1V6h-2v2a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V6H3.76L1.04 16h21.92L20.24 6H19zM1 17v4h22v-4H1zM6 4v4h4V4H6zm8 0v4h4V4h-4z"> | |
| </path> | |
| </svg> | |
| <p><span class="text-gray-900 font-bold">3</span> Bedrooms</p> | |
| </div> | |
| <div class="flex-1 inline-flex items-center"> | |
| <svg class="h-6 w-6 text-gray-600 fill-current mr-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> | |
| <path fill-rule="evenodd" d="M17.03 21H7.97a4 4 0 0 1-1.3-.22l-1.22 2.44-.9-.44 1.22-2.44a4 4 0 0 1-1.38-1.55L.5 11h7.56a4 4 0 0 1 1.78.42l2.32 1.16a4 4 0 0 0 1.78.42h9.56l-2.9 5.79a4 4 0 0 1-1.37 1.55l1.22 2.44-.9.44-1.22-2.44a4 4 0 0 1-1.3.22zM21 11h2.5a.5.5 0 1 1 0 1h-9.06a4.5 4.5 0 0 1-2-.48l-2.32-1.15A3.5 3.5 0 0 0 8.56 10H.5a.5.5 0 0 1 0-1h8.06c.7 0 1.38.16 2 .48l2.32 1.15a3.5 3.5 0 0 0 1.56.37H20V2a1 1 0 0 0-1.74-.67c.64.97.53 2.29-.32 3.14l-.35.36-3.54-3.54.35-.35a2.5 2.5 0 0 1 3.15-.32A2 2 0 0 1 21 2v9zm-5.48-9.65l2 2a1.5 1.5 0 0 0-2-2zm-10.23 17A3 3 0 0 0 7.97 20h9.06a3 3 0 0 0 2.68-1.66L21.88 14h-7.94a5 5 0 0 1-2.23-.53L9.4 12.32A3 3 0 0 0 8.06 12H2.12l3.17 6.34z"> | |
| </path> | |
| </svg> | |
| <p><span class="text-gray-900 font-bold">2</span> Bathrooms</p> | |
| </div> | |
| </div> | |
| <div class="px-4 pt-3 pb-4 border-t border-gray-300 bg-gray-100"> | |
| <div class="text-xs uppercase font-bold text-gray-600 tracking-wide">Realtor</div> | |
| <div class="flex items-center pt-2"> | |
| <div class="bg-cover bg-center w-10 h-10 rounded-full mr-3" style="background-image: url(https://images.unsplash.com/photo-1500522144261-ea64433bbe27?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=751&q=80)"> | |
| </div> | |
| <div> | |
| <p class="font-bold text-gray-900">Tiffany Heffner</p> | |
| <p class="text-sm text-gray-700">(555) 555-4321</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="max-w-sm w-full sm:w-1/2 lg:w-1/3 xl:w-1/4 py-6 px-3"> | |
| <div class="bg-white shadow-xl rounded-lg overflow-hidden"> | |
| <div class="bg-cover bg-center h-56 p-4" style="background-image: url(https://images.unsplash.com/photo-1475855581690-80accde3ae2b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80)"> | |
| <div class="flex justify-end"> | |
| <svg class="h-6 w-6 text-white fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> | |
| <path d="M12.76 3.76a6 6 0 0 1 8.48 8.48l-8.53 8.54a1 1 0 0 1-1.42 0l-8.53-8.54a6 6 0 0 1 8.48-8.48l.76.75.76-.75zm7.07 7.07a4 4 0 1 0-5.66-5.66l-1.46 1.47a1 1 0 0 1-1.42 0L9.83 5.17a4 4 0 1 0-5.66 5.66L12 18.66l7.83-7.83z"> | |
| </path> | |
| </svg> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <p class="uppercase tracking-wide text-sm font-bold text-gray-700">Detached house • 5y old | |
| </p> | |
| <p class="text-3xl text-gray-900">€750,000</p> | |
| <p class="text-gray-700">742 Evergreen Terrace</p> | |
| </div> | |
| <div class="flex p-4 border-t border-gray-300 text-gray-700"> | |
| <div class="flex-1 inline-flex items-center"> | |
| <svg class="h-6 w-6 text-gray-600 fill-current mr-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> | |
| <path d="M0 16L3 5V1a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v4l3 11v5a1 1 0 0 1-1 1v2h-1v-2H2v2H1v-2a1 1 0 0 1-1-1v-5zM19 5h1V1H4v4h1V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1h2V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1zm0 1v2a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1V6h-2v2a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V6H3.76L1.04 16h21.92L20.24 6H19zM1 17v4h22v-4H1zM6 4v4h4V4H6zm8 0v4h4V4h-4z"> | |
| </path> | |
| </svg> | |
| <p><span class="text-gray-900 font-bold">3</span> Bedrooms</p> | |
| </div> | |
| <div class="flex-1 inline-flex items-center"> | |
| <svg class="h-6 w-6 text-gray-600 fill-current mr-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> | |
| <path fill-rule="evenodd" d="M17.03 21H7.97a4 4 0 0 1-1.3-.22l-1.22 2.44-.9-.44 1.22-2.44a4 4 0 0 1-1.38-1.55L.5 11h7.56a4 4 0 0 1 1.78.42l2.32 1.16a4 4 0 0 0 1.78.42h9.56l-2.9 5.79a4 4 0 0 1-1.37 1.55l1.22 2.44-.9.44-1.22-2.44a4 4 0 0 1-1.3.22zM21 11h2.5a.5.5 0 1 1 0 1h-9.06a4.5 4.5 0 0 1-2-.48l-2.32-1.15A3.5 3.5 0 0 0 8.56 10H.5a.5.5 0 0 1 0-1h8.06c.7 0 1.38.16 2 .48l2.32 1.15a3.5 3.5 0 0 0 1.56.37H20V2a1 1 0 0 0-1.74-.67c.64.97.53 2.29-.32 3.14l-.35.36-3.54-3.54.35-.35a2.5 2.5 0 0 1 3.15-.32A2 2 0 0 1 21 2v9zm-5.48-9.65l2 2a1.5 1.5 0 0 0-2-2zm-10.23 17A3 3 0 0 0 7.97 20h9.06a3 3 0 0 0 2.68-1.66L21.88 14h-7.94a5 5 0 0 1-2.23-.53L9.4 12.32A3 3 0 0 0 8.06 12H2.12l3.17 6.34z"> | |
| </path> | |
| </svg> | |
| <p><span class="text-gray-900 font-bold">2</span> Bathrooms</p> | |
| </div> | |
| </div> | |
| <div class="px-4 pt-3 pb-4 border-t border-gray-300 bg-gray-100"> | |
| <div class="text-xs uppercase font-bold text-gray-600 tracking-wide">Realtor</div> | |
| <div class="flex items-center pt-2"> | |
| <div class="bg-cover bg-center w-10 h-10 rounded-full mr-3" style="background-image: url(https://images.unsplash.com/photo-1500522144261-ea64433bbe27?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=751&q=80)"> | |
| </div> | |
| <div> | |
| <p class="font-bold text-gray-900">Tiffany Heffner</p> | |
| <p class="text-sm text-gray-700">(555) 555-4321</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="max-w-sm w-full sm:w-1/2 lg:w-1/3 xl:w-1/4 py-6 px-3"> | |
| <div class="bg-white shadow-xl rounded-lg overflow-hidden"> | |
| <div class="bg-cover bg-center h-56 p-4" style="background-image: url(https://images.unsplash.com/photo-1475855581690-80accde3ae2b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80)"> | |
| <div class="flex justify-end"> | |
| <svg class="h-6 w-6 text-white fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> | |
| <path d="M12.76 3.76a6 6 0 0 1 8.48 8.48l-8.53 8.54a1 1 0 0 1-1.42 0l-8.53-8.54a6 6 0 0 1 8.48-8.48l.76.75.76-.75zm7.07 7.07a4 4 0 1 0-5.66-5.66l-1.46 1.47a1 1 0 0 1-1.42 0L9.83 5.17a4 4 0 1 0-5.66 5.66L12 18.66l7.83-7.83z"> | |
| </path> | |
| </svg> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <p class="uppercase tracking-wide text-sm font-bold text-gray-700">Detached house • 5y old | |
| </p> | |
| <p class="text-3xl text-gray-900">€750,000</p> | |
| <p class="text-gray-700">742 Evergreen Terrace</p> | |
| </div> | |
| <div class="flex p-4 border-t border-gray-300 text-gray-700"> | |
| <div class="flex-1 inline-flex items-center"> | |
| <svg class="h-6 w-6 text-gray-600 fill-current mr-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> | |
| <path d="M0 16L3 5V1a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v4l3 11v5a1 1 0 0 1-1 1v2h-1v-2H2v2H1v-2a1 1 0 0 1-1-1v-5zM19 5h1V1H4v4h1V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1h2V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1zm0 1v2a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1V6h-2v2a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V6H3.76L1.04 16h21.92L20.24 6H19zM1 17v4h22v-4H1zM6 4v4h4V4H6zm8 0v4h4V4h-4z"> | |
| </path> | |
| </svg> | |
| <p><span class="text-gray-900 font-bold">3</span> Bedrooms</p> | |
| </div> | |
| <div class="flex-1 inline-flex items-center"> | |
| <svg class="h-6 w-6 text-gray-600 fill-current mr-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> | |
| <path fill-rule="evenodd" d="M17.03 21H7.97a4 4 0 0 1-1.3-.22l-1.22 2.44-.9-.44 1.22-2.44a4 4 0 0 1-1.38-1.55L.5 11h7.56a4 4 0 0 1 1.78.42l2.32 1.16a4 4 0 0 0 1.78.42h9.56l-2.9 5.79a4 4 0 0 1-1.37 1.55l1.22 2.44-.9.44-1.22-2.44a4 4 0 0 1-1.3.22zM21 11h2.5a.5.5 0 1 1 0 1h-9.06a4.5 4.5 0 0 1-2-.48l-2.32-1.15A3.5 3.5 0 0 0 8.56 10H.5a.5.5 0 0 1 0-1h8.06c.7 0 1.38.16 2 .48l2.32 1.15a3.5 3.5 0 0 0 1.56.37H20V2a1 1 0 0 0-1.74-.67c.64.97.53 2.29-.32 3.14l-.35.36-3.54-3.54.35-.35a2.5 2.5 0 0 1 3.15-.32A2 2 0 0 1 21 2v9zm-5.48-9.65l2 2a1.5 1.5 0 0 0-2-2zm-10.23 17A3 3 0 0 0 7.97 20h9.06a3 3 0 0 0 2.68-1.66L21.88 14h-7.94a5 5 0 0 1-2.23-.53L9.4 12.32A3 3 0 0 0 8.06 12H2.12l3.17 6.34z"> | |
| </path> | |
| </svg> | |
| <p><span class="text-gray-900 font-bold">2</span> Bathrooms</p> | |
| </div> | |
| </div> | |
| <div class="px-4 pt-3 pb-4 border-t border-gray-300 bg-gray-100"> | |
| <div class="text-xs uppercase font-bold text-gray-600 tracking-wide">Realtor</div> | |
| <div class="flex items-center pt-2"> | |
| <div class="bg-cover bg-center w-10 h-10 rounded-full mr-3" style="background-image: url(https://images.unsplash.com/photo-1500522144261-ea64433bbe27?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=751&q=80)"> | |
| </div> | |
| <div> | |
| <p class="font-bold text-gray-900">Tiffany Heffner</p> | |
| <p class="text-sm text-gray-700">(555) 555-4321</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="max-w-sm w-full sm:w-1/2 lg:w-1/3 xl:w-1/4 py-6 px-3"> | |
| <div class="bg-white shadow-xl rounded-lg overflow-hidden"> | |
| <div class="bg-cover bg-center h-56 p-4" style="background-image: url(https://images.unsplash.com/photo-1475855581690-80accde3ae2b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80)"> | |
| <div class="flex justify-end"> | |
| <svg class="h-6 w-6 text-white fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> | |
| <path d="M12.76 3.76a6 6 0 0 1 8.48 8.48l-8.53 8.54a1 1 0 0 1-1.42 0l-8.53-8.54a6 6 0 0 1 8.48-8.48l.76.75.76-.75zm7.07 7.07a4 4 0 1 0-5.66-5.66l-1.46 1.47a1 1 0 0 1-1.42 0L9.83 5.17a4 4 0 1 0-5.66 5.66L12 18.66l7.83-7.83z"> | |
| </path> | |
| </svg> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <p class="uppercase tracking-wide text-sm font-bold text-gray-700">Detached house • 5y old | |
| </p> | |
| <p class="text-3xl text-gray-900">€750,000</p> | |
| <p class="text-gray-700">742 Evergreen Terrace</p> | |
| </div> | |
| <div class="flex p-4 border-t border-gray-300 text-gray-700"> | |
| <div class="flex-1 inline-flex items-center"> | |
| <svg class="h-6 w-6 text-gray-600 fill-current mr-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> | |
| <path d="M0 16L3 5V1a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v4l3 11v5a1 1 0 0 1-1 1v2h-1v-2H2v2H1v-2a1 1 0 0 1-1-1v-5zM19 5h1V1H4v4h1V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1h2V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1zm0 1v2a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1V6h-2v2a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V6H3.76L1.04 16h21.92L20.24 6H19zM1 17v4h22v-4H1zM6 4v4h4V4H6zm8 0v4h4V4h-4z"> | |
| </path> | |
| </svg> | |
| <p><span class="text-gray-900 font-bold">3</span> Bedrooms</p> | |
| </div> | |
| <div class="flex-1 inline-flex items-center"> | |
| <svg class="h-6 w-6 text-gray-600 fill-current mr-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> | |
| <path fill-rule="evenodd" d="M17.03 21H7.97a4 4 0 0 1-1.3-.22l-1.22 2.44-.9-.44 1.22-2.44a4 4 0 0 1-1.38-1.55L.5 11h7.56a4 4 0 0 1 1.78.42l2.32 1.16a4 4 0 0 0 1.78.42h9.56l-2.9 5.79a4 4 0 0 1-1.37 1.55l1.22 2.44-.9.44-1.22-2.44a4 4 0 0 1-1.3.22zM21 11h2.5a.5.5 0 1 1 0 1h-9.06a4.5 4.5 0 0 1-2-.48l-2.32-1.15A3.5 3.5 0 0 0 8.56 10H.5a.5.5 0 0 1 0-1h8.06c.7 0 1.38.16 2 .48l2.32 1.15a3.5 3.5 0 0 0 1.56.37H20V2a1 1 0 0 0-1.74-.67c.64.97.53 2.29-.32 3.14l-.35.36-3.54-3.54.35-.35a2.5 2.5 0 0 1 3.15-.32A2 2 0 0 1 21 2v9zm-5.48-9.65l2 2a1.5 1.5 0 0 0-2-2zm-10.23 17A3 3 0 0 0 7.97 20h9.06a3 3 0 0 0 2.68-1.66L21.88 14h-7.94a5 5 0 0 1-2.23-.53L9.4 12.32A3 3 0 0 0 8.06 12H2.12l3.17 6.34z"> | |
| </path> | |
| </svg> | |
| <p><span class="text-gray-900 font-bold">2</span> Bathrooms</p> | |
| </div> | |
| </div> | |
| <div class="px-4 pt-3 pb-4 border-t border-gray-300 bg-gray-100"> | |
| <div class="text-xs uppercase font-bold text-gray-600 tracking-wide">Realtor</div> | |
| <div class="flex items-center pt-2"> | |
| <div class="bg-cover bg-center w-10 h-10 rounded-full mr-3" style="background-image: url(https://images.unsplash.com/photo-1500522144261-ea64433bbe27?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=751&q=80)"> | |
| </div> | |
| <div> | |
| <p class="font-bold text-gray-900">Tiffany Heffner</p> | |
| <p class="text-sm text-gray-700">(555) 555-4321</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="max-w-sm w-full sm:w-1/2 lg:w-1/3 xl:w-1/4 py-6 px-3"> | |
| <div class="bg-white shadow-xl rounded-lg overflow-hidden"> | |
| <div class="bg-cover bg-center h-56 p-4" style="background-image: url(https://images.unsplash.com/photo-1475855581690-80accde3ae2b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80)"> | |
| <div class="flex justify-end"> | |
| <svg class="h-6 w-6 text-white fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> | |
| <path d="M12.76 3.76a6 6 0 0 1 8.48 8.48l-8.53 8.54a1 1 0 0 1-1.42 0l-8.53-8.54a6 6 0 0 1 8.48-8.48l.76.75.76-.75zm7.07 7.07a4 4 0 1 0-5.66-5.66l-1.46 1.47a1 1 0 0 1-1.42 0L9.83 5.17a4 4 0 1 0-5.66 5.66L12 18.66l7.83-7.83z"> | |
| </path> | |
| </svg> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <p class="uppercase tracking-wide text-sm font-bold text-gray-700">Detached house • 5y old | |
| </p> | |
| <p class="text-3xl text-gray-900">€750,000</p> | |
| <p class="text-gray-700">742 Evergreen Terrace</p> | |
| </div> | |
| <div class="flex p-4 border-t border-gray-300 text-gray-700"> | |
| <div class="flex-1 inline-flex items-center"> | |
| <svg class="h-6 w-6 text-gray-600 fill-current mr-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> | |
| <path d="M0 16L3 5V1a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v4l3 11v5a1 1 0 0 1-1 1v2h-1v-2H2v2H1v-2a1 1 0 0 1-1-1v-5zM19 5h1V1H4v4h1V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1h2V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1zm0 1v2a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1V6h-2v2a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V6H3.76L1.04 16h21.92L20.24 6H19zM1 17v4h22v-4H1zM6 4v4h4V4H6zm8 0v4h4V4h-4z"> | |
| </path> | |
| </svg> | |
| <p><span class="text-gray-900 font-bold">3</span> Bedrooms</p> | |
| </div> | |
| <div class="flex-1 inline-flex items-center"> | |
| <svg class="h-6 w-6 text-gray-600 fill-current mr-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> | |
| <path fill-rule="evenodd" d="M17.03 21H7.97a4 4 0 0 1-1.3-.22l-1.22 2.44-.9-.44 1.22-2.44a4 4 0 0 1-1.38-1.55L.5 11h7.56a4 4 0 0 1 1.78.42l2.32 1.16a4 4 0 0 0 1.78.42h9.56l-2.9 5.79a4 4 0 0 1-1.37 1.55l1.22 2.44-.9.44-1.22-2.44a4 4 0 0 1-1.3.22zM21 11h2.5a.5.5 0 1 1 0 1h-9.06a4.5 4.5 0 0 1-2-.48l-2.32-1.15A3.5 3.5 0 0 0 8.56 10H.5a.5.5 0 0 1 0-1h8.06c.7 0 1.38.16 2 .48l2.32 1.15a3.5 3.5 0 0 0 1.56.37H20V2a1 1 0 0 0-1.74-.67c.64.97.53 2.29-.32 3.14l-.35.36-3.54-3.54.35-.35a2.5 2.5 0 0 1 3.15-.32A2 2 0 0 1 21 2v9zm-5.48-9.65l2 2a1.5 1.5 0 0 0-2-2zm-10.23 17A3 3 0 0 0 7.97 20h9.06a3 3 0 0 0 2.68-1.66L21.88 14h-7.94a5 5 0 0 1-2.23-.53L9.4 12.32A3 3 0 0 0 8.06 12H2.12l3.17 6.34z"> | |
| </path> | |
| </svg> | |
| <p><span class="text-gray-900 font-bold">2</span> Bathrooms</p> | |
| </div> | |
| </div> | |
| <div class="px-4 pt-3 pb-4 border-t border-gray-300 bg-gray-100"> | |
| <div class="text-xs uppercase font-bold text-gray-600 tracking-wide">Realtor</div> | |
| <div class="flex items-center pt-2"> | |
| <div class="bg-cover bg-center w-10 h-10 rounded-full mr-3" style="background-image: url(https://images.unsplash.com/photo-1500522144261-ea64433bbe27?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=751&q=80)"> | |
| </div> | |
| <div> | |
| <p class="font-bold text-gray-900">Tiffany Heffner</p> | |
| <p class="text-sm text-gray-700">(555) 555-4321</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- blog / news --> | |
| <section class="bg-white py-8"> | |
| <div class="px-4 py-16 mx-auto sm:max-w-xl md:max-w-full lg:max-w-screen-xl md:px-24 lg:px-8 lg:py-20"> | |
| <div class="max-w-xl mb-10 md:mx-auto sm:text-center lg:max-w-2xl md:mb-12"> | |
| <div> | |
| <p class="inline-block px-3 py-px mb-4 text-xs font-semibold tracking-wider text-teal-900 uppercase rounded-full bg-teal-accent-400"> | |
| Here is what you missed | |
| </p> | |
| </div> | |
| <h2 class="max-w-lg mb-6 font-sans text-3xl font-bold leading-none tracking-tight text-gray-900 sm:text-4xl md:mx-auto"> | |
| <span class="relative inline-block"> | |
| <svg viewBox="0 0 52 24" fill="currentColor" class="absolute top-0 left-0 z-0 hidden w-32 -mt-8 -ml-20 text-blue-gray-100 lg:w-32 lg:-ml-28 lg:-mt-10 sm:block"> | |
| <defs> | |
| <pattern id="7b568941-9ed0-4f49-85a0-5e21ca6c7ad6" x="0" y="0" width=".135" height=".30"> | |
| <circle cx="1" cy="1" r=".7"></circle> | |
| </pattern> | |
| </defs> | |
| <rect fill="url(#7b568941-9ed0-4f49-85a0-5e21ca6c7ad6)" width="52" height="24"></rect> | |
| </svg> | |
| <span class="relative">The</span> | |
| </span> | |
| quick, brown fox jumps over a lazy dog | |
| </h2> | |
| <p class="text-base text-gray-700 md:text-lg"> | |
| Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque rem aperiam, | |
| eaque ipsa quae. | |
| </p> | |
| </div> | |
| <div class="grid gap-5 row-gap-5 mb-8 lg:grid-cols-4 sm:grid-cols-2"> | |
| <a href="/" aria-label="View Item" class="inline-block overflow-hidden duration-300 transform bg-white rounded shadow-sm hover:-translate-y-2"> | |
| <div class="flex flex-col h-full"> | |
| <img src="https://images.pexels.com/photos/3184291/pexels-photo-3184291.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="object-cover w-full h-48" alt="" /> | |
| <div class="flex-grow border border-t-0 rounded-b"> | |
| <div class="p-5"> | |
| <h6 class="mb-2 font-semibold leading-5">The doctor said</h6> | |
| <p class="text-sm text-gray-900"> | |
| Sportacus andrew weatherall goose Refined gentlemen super mario des lynam alpha | |
| trion zap rowsdower. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </a> | |
| <a href="/" aria-label="View Item" class="inline-block overflow-hidden duration-300 transform bg-white rounded shadow-sm hover:-translate-y-2"> | |
| <div class="flex flex-col h-full"> | |
| <img src="https://images.pexels.com/photos/3182750/pexels-photo-3182750.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="object-cover w-full h-48" alt="" /> | |
| <div class="flex-grow border border-t-0 rounded-b"> | |
| <div class="p-5"> | |
| <h6 class="mb-2 font-semibold leading-5">Skate ipsum dolor</h6> | |
| <p class="text-sm text-gray-900"> | |
| Bulbasaur Lorem ipsum dolor sit amet, consectetur adipiscing elit. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </a> | |
| <a href="/" aria-label="View Item" class="inline-block overflow-hidden duration-300 transform bg-white rounded shadow-sm hover:-translate-y-2"> | |
| <div class="flex flex-col h-full"> | |
| <img src="https://images.pexels.com/photos/3182746/pexels-photo-3182746.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="object-cover w-full h-48" alt="" /> | |
| <div class="flex-grow border border-t-0 rounded-b"> | |
| <div class="p-5"> | |
| <h6 class="mb-2 font-semibold leading-5">They urge you</h6> | |
| <p class="text-sm text-gray-900"> | |
| A flower in my garden, a mystery in my panties. Heart attack never stopped old Big | |
| Bear. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </a> | |
| <a href="/" aria-label="View Item" class="inline-block overflow-hidden duration-300 transform bg-white rounded shadow-sm hover:-translate-y-2"> | |
| <div class="flex flex-col h-full"> | |
| <img src="https://images.pexels.com/photos/3184296/pexels-photo-3184296.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="object-cover w-full h-48" alt="" /> | |
| <div class="flex-grow border border-t-0 rounded-b"> | |
| <div class="p-5"> | |
| <h6 class="mb-2 font-semibold leading-5">Baseball ipsum dolor</h6> | |
| <p class="text-sm text-gray-900"> | |
| Bro ipsum dolor sit amet gaper backside single track, manny Bike epic clipless. | |
| Schraeder drop gondy. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </a> | |
| <a href="/" aria-label="View Item" class="inline-block overflow-hidden duration-300 transform bg-white rounded shadow-sm hover:-translate-y-2"> | |
| <div class="flex flex-col h-full"> | |
| <img src="https://images.pexels.com/photos/3184311/pexels-photo-3184311.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500" class="object-cover w-full h-48" alt="" /> | |
| <div class="flex-grow border border-t-0 rounded-b"> | |
| <div class="p-5"> | |
| <h6 class="mb-2 font-semibold leading-5">The doctor said</h6> | |
| <p class="text-sm text-gray-900"> | |
| Sportacus andrew weatherall goose Refined gentlemen super mario des lynam alpha | |
| trion zap rowsdower. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </a> | |
| <a href="/" aria-label="View Item" class="inline-block overflow-hidden duration-300 transform bg-white rounded shadow-sm hover:-translate-y-2"> | |
| <div class="flex flex-col h-full"> | |
| <img src="https://images.pexels.com/photos/3184338/pexels-photo-3184338.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="object-cover w-full h-48" alt="" /> | |
| <div class="flex-grow border border-t-0 rounded-b"> | |
| <div class="p-5"> | |
| <h6 class="mb-2 font-semibold leading-5">Skate ipsum dolor</h6> | |
| <p class="text-sm text-gray-900"> | |
| Bulbasaur Lorem ipsum dolor sit amet, consectetur adipiscing elit. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </a> | |
| <a href="/" aria-label="View Item" class="inline-block overflow-hidden duration-300 transform bg-white rounded shadow-sm hover:-translate-y-2"> | |
| <div class="flex flex-col h-full"> | |
| <img src="https://images.pexels.com/photos/3184339/pexels-photo-3184339.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="object-cover w-full h-48" alt="" /> | |
| <div class="flex-grow border border-t-0 rounded-b"> | |
| <div class="p-5"> | |
| <h6 class="mb-2 font-semibold leading-5">They urge you</h6> | |
| <p class="text-sm text-gray-900"> | |
| A flower in my garden, a mystery in my panties. Heart attack never stopped old Big | |
| Bear. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </a> | |
| <a href="/" aria-label="View Item" class="inline-block overflow-hidden duration-300 transform bg-white rounded shadow-sm hover:-translate-y-2"> | |
| <div class="flex flex-col h-full"> | |
| <img src="https://images.pexels.com/photos/3184360/pexels-photo-3184360.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="object-cover w-full h-48" alt="" /> | |
| <div class="flex-grow border border-t-0 rounded-b"> | |
| <div class="p-5"> | |
| <h6 class="mb-2 font-semibold leading-5">Baseball ipsum dolor</h6> | |
| <p class="text-sm text-gray-900"> | |
| Bro ipsum dolor sit amet gaper backside single track, manny Bike epic clipless. | |
| Schraeder drop gondy. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </a> | |
| </div> | |
| <div class="text-center"> | |
| <a href="/" class="inline-flex items-center justify-center w-full h-12 px-6 font-medium tracking-wide text-gray-600 transition duration-200 rounded shadow-md md:w-auto bg-deep-purple-accent-400 hover:bg-deep-purple-accent-700 focus:shadow-outline focus:outline-none"> | |
| Learn more | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- about --> | |
| <section class="bg-white py-8"> | |
| <div class="container py-8 px-6 mx-auto"> | |
| <a class="uppercase tracking-wide no-underline hover:no-underline font-bold text-gray-800 text-xl mb-8" href="#"> | |
| About | |
| </a> | |
| <p class="mt-8 mb-8">This template is inspired by the stunning minamalist design and its created by | |
| <a class="text-gray-800 underline hover:text-gray-900" href="https://votkapower.eu/">https://votkapower.eu/</a> | |
| </p> | |
| <p class="mb-8">Lorem ipsum dolor sit amet, consectetur <a href="#">random link</a> adipiscing elit, sed do | |
| eiusmod tempor incididunt ut labore et dolore magna aliqua. Vel risus commodo viverra maecenas accumsan | |
| lacus vel facilisis volutpat. Vitae aliquet nec ullamcorper sit. Nullam eget felis eget nunc lobortis | |
| mattis aliquam. In est ante in nibh mauris. Egestas congue quisque egestas diam in. Facilisi nullam | |
| vehicula ipsum a arcu. Nec nam aliquam sem et tortor consequat. Eget mi proin sed libero enim sed | |
| faucibus turpis in. Hac habitasse platea dictumst quisque. In aliquam sem fringilla ut. Gravida rutrum | |
| quisque non tellus orci ac auctor augue mauris. Accumsan lacus vel facilisis volutpat est velit egestas | |
| dui id. At tempor commodo ullamcorper a. Volutpat commodo sed egestas egestas fringilla. Vitae congue eu | |
| consequat ac.</p> | |
| </div> | |
| </section> | |
| <!-- footer --> | |
| <footer class="container mx-auto bg-white py-8 border-t border-gray-400"> | |
| <div class="container flex px-3 py-8 "> | |
| <div class="w-full mx-auto flex flex-wrap"> | |
| <div class="flex w-full lg:w-1/2 "> | |
| <div class="px-3 md:px-0"> | |
| <h3 class="font-bold text-gray-900">Footer</h3> | |
| <p class="py-4"> | |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vel mi ut felis tempus | |
| commodo nec id erat. Suspendisse consectetur dapibus velit ut lacinia. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="flex w-full lg:w-1/2 lg:justify-end lg:text-right"> | |
| <div class="px-3 md:px-0"> | |
| <h3 class="font-bold text-gray-900">Social</h3> | |
| <ul class="list-reset items-center pt-3"> | |
| <li> | |
| <a class="inline-block no-underline hover:text-black hover:underline py-1" href="#">fb link</a> | |
| <a class="inline-block no-underline hover:text-black hover:underline py-1" href="#">in link</a> | |
| <a class="inline-block no-underline hover:text-black hover:underline py-1" href="https://www.youtube.com/channel/UCA_jssfnz8llZ4ZWFHJKs_g">yt link</a> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.2/min/tiny-slider.js"></script> | |
| <script> | |
| var slider1 = tns({ | |
| container: '#index-products-slider-top1', | |
| items: 3, | |
| slideBy: 'page', | |
| autoplay: true | |
| }); | |
| /* todo: */ | |
| /* step1: migrate to includes */ | |
| /* step2: define tns ustage & write js*/ | |
| /* step3: make all sections sliders */ | |
| </script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.4/tiny-slider.css"> | |
| <!--[if (lt IE 9)]><script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.4/min/tiny-slider.helper.ie8.js"></script><![endif]--> | |
| <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.2/min/tiny-slider.js"></script> | |
| <script defer> | |
| // --------------------------------- | |
| // using: https://ganlanyuan.github.io/tiny-slider/ | |
| // Create tiny slider carousel from html by Dimitar Papazov - vtk.pw | |
| // --------------------------------- | |
| // forEach function from Todd Motto's blog, as mentioned above | |
| var forEach = function (array, callback, scope) { | |
| for (let i = 0; i < array.length; i++) { | |
| callback.call(scope, i, array[i]); // passes back stuff we need | |
| } | |
| }; | |
| // tiny-slider initialisation | |
| let _sliders = []; | |
| let sliders = document.querySelectorAll('[data-tns-init="true"]'); | |
| forEach(sliders, function (index/*, value*/) { | |
| // now fetch YOUR-SLUG from html (use value.getAttribute('data-name') for < IE10 support) | |
| let value = sliders[index]; | |
| let sliderLoop = value.dataset.tnsLoop ? !!value.dataset.tnsLoop : false; | |
| let sliderAutoPlay = value.dataset.tnsAutoplay && value.dataset.tnsAutoplay!=='false' ? true : false; | |
| let sliderSpeed = value.dataset.tnsSpeed ? parseInt(value.dataset.tnsSpeed) : 5000; | |
| let sliderMargin = value.dataset.tnsMargin ? parseInt(value.dataset.tnsMargin) : 10; | |
| let sliderVisibleItems = value.dataset.tnsItems ? parseInt(value.dataset.tnsItems) : 1; | |
| let sliderUseNav = value.dataset.tnsNav && value.dataset.tnsNav!=='false' ? true : false; | |
| let sliderUseNavText = value.dataset.tnsNavText ? value.dataset.tnsNavText : ['','']; | |
| let sliderResponsive = value.dataset.tnsResponsive ? JSON.parse(value.dataset.tnsResponsive) : {}; | |
| let navPrevBtnSelector = value.dataset.tnsPrevController ? value.dataset.tnsPrevController : false; | |
| let navNextBtnSelector = value.dataset.tnsNextController ? value.dataset.tnsNextController : false; | |
| let sliderStagePadding = value.dataset.tnsStagePadding ? value.dataset.tnsStagePadding : false; | |
| let sliderCenterElements = value.dataset.tnsCenter ? value.dataset.tnsCenter : false; | |
| let progressBarId = value.dataset.tnsProgressbar && value.dataset.tnsProgressbar.length ? value.dataset.tnsProgressbar : false; | |
| let isVertical = value.dataset.tnsVertical && value.dataset.tnsVertical.length ? value.dataset.tnsVertical : false; | |
| let gutter = value.dataset.tnsGutter && value.dataset.tnsGutter.length ? value.dataset.tnsGutter : false; | |
| let slideBy = value.dataset.tnsSlideBy && value.dataset.tnsSlideBy.length ? value.dataset.tnsSlideBy : 1; | |
| let startIndex = value.dataset.tnsStartIndex && value.dataset.tnsStartIndex.length ? value.dataset.tnsStartIndex : 0; | |
| let fixedWidth = value.dataset.tnsFixedWidth && value.dataset.tnsFixedWidth.length ? parseInt(value.dataset.tnsFixedWidth) : false; | |
| let autoWidth = value.dataset.tnsAutoWidth && value.dataset.tnsAutoWidth.length && !value.dataset.tnsAutoWidth !='false' ? parseInt(value.dataset.tnsAutoWidth) : false; | |
| let autoHeight = value.dataset.tnsautoHeight && value.dataset.tnsautoHeight.length && !value.dataset.tnsautoHeight !='false' ? value.dataset.tnsautoHeight : false; | |
| let sliderControlsContainer = value.dataset.tnsControlsContainer && value.dataset.tnsControlsContainer.length && !value.dataset.tnsControlsContainer !='false' ? value.dataset.tnsControlsContainer : false; | |
| let sliderUseDots = value.dataset.tnsDots && value.dataset.tnsDots!=='false'? true : false; | |
| let sliderUseDotsPosition = value.dataset.tnsDotsPosition && value.dataset.tnsDotsPosition.length? value.dataset.tnsDotsPosition : 'bottom'; | |
| let sliderNavContainer = value.dataset.tnsNavContainer && value.dataset.tnsNavContainer.length? value.dataset.tnsNavContainer : false; | |
| // let thumbnail = value.dataset.name; | |
| console.log(value.dataset, sliderControlsContainer, navPrevBtnSelector,navNextBtnSelector); | |
| let data = {}; | |
| data.autoplayButtonOutput= false; | |
| data.controls= sliderUseNav; | |
| data.nav= sliderUseDots ; | |
| data.gutter= sliderMargin ; | |
| data.navPosition= sliderUseDotsPosition ; | |
| // data.controlsPosition= 'top'; | |
| data.controlsText= ['',''] ; | |
| data.controlsContainer= sliderControlsContainer ; | |
| data.autoplay= sliderAutoPlay ; | |
| data.mouseDrag= true ; | |
| if(sliderNavContainer) data.navContainer= sliderNavContainer; | |
| if(value ) data.container= value; | |
| if(gutter ) data.gutter= gutter ; | |
| if(sliderVisibleItems ) data.items= sliderVisibleItems ; | |
| if(sliderStagePadding ) data.edgePadding= sliderStagePadding ; | |
| if(slideBy ) data.slideBy= slideBy ; | |
| if(sliderCenterElements ) data.center= sliderCenterElements ; | |
| if(sliderUseNavText ) data.navText= sliderUseNavText ; | |
| data.loop= sliderLoop ; | |
| data.autoplayTimeout= sliderSpeed ; | |
| if(startIndex) data.startIndex= startIndex ; | |
| if(fixedWidth) data.fixedWidth= fixedWidth ; | |
| if(autoWidth) data.autoWidth= autoWidth ; | |
| if(autoHeight ) data.autoHeight= autoHeight ; | |
| data.responsive= sliderResponsive; | |
| if(isVertical){ | |
| data.swipeAngle = false; | |
| data.axis= "vertical"; | |
| } | |
| _sliders[index] = tns(data); | |
| let currentSlider = _sliders[index].getInfo().container; | |
| if(currentSlider){ | |
| if(navPrevBtnSelector) $((sliderControlsContainer ? sliderControlsContainer + ' ' : '') + navPrevBtnSelector).on('click tap', function(){ | |
| _sliders[index].goTo('prev'); | |
| if(currentSlider.dataset.tnsCurrentslidefunction && currentSlider.dataset.tnsCurrentslidefunction .length) { eval(currentSlider.dataset['tnsCurrentslidefunction'])(_sliders[index].getInfo() ) } | |
| }); | |
| if(navNextBtnSelector) $((sliderControlsContainer ? sliderControlsContainer + ' ' : '') + navNextBtnSelector).on('click tap', function(){ | |
| _sliders[index].goTo('next'); | |
| if(currentSlider.dataset.tnsCurrentslidefunction && currentSlider.dataset.tnsCurrentslidefunction.length) { eval(currentSlider.dataset['tnsCurrentslidefunction'])(_sliders[index].getInfo() ) } | |
| }); | |
| if(currentSlider.dataset.tnsIndexchangefunction && currentSlider.dataset.tnsIndexchangefunction.length) { | |
| console.log(_sliders[index].events, currentSlider.dataset.tnsIndexchangefunction); | |
| _sliders[index].events.on('indexChanged', | |
| (info, eventName) =>{ | |
| console.log('change') | |
| return eval(currentSlider.dataset['tnsIndexchangefunction'])(info, eventName, _sliders) ; | |
| }) ; | |
| } | |
| if(progressBarId){ | |
| var updateProgressbarWidth = ()=>{ | |
| var progressBar = document.querySelector(currentSlider.dataset['tnsProgressbar']); | |
| progressBar.style.transition= '0ms'; | |
| progressBar.style.width='0%'; | |
| setTimeout(()=>{ | |
| progressBar.style.width='100%'; | |
| progressBar.style.transition= parseInt(currentSlider.dataset['tnsSpeed']) + 'ms'; | |
| }) | |
| }; | |
| _sliders[index].events.on('indexChanged', (info, eventName) => | |
| { | |
| console.log('index changed'); | |
| updateProgressbarWidth() | |
| }); | |
| if(progressBarId) updateProgressbarWidth() | |
| } | |
| } | |
| }); | |
| // END automate owl carousel | |
| </script> | |
| <!-- Example html USTAGE: --> | |
| <div class="products-carousel" | |
| data-tns-init="true" | |
| data-tns-gutter="20" | |
| data-tns-items="3" | |
| data-tns-stage-padding="4" | |
| data-tns-autoplay="true" | |
| data-tns-speed="2000" | |
| data-tns-loop="false" | |
| data-tns-nav="false" | |
| data-tns-controls="false" | |
| data-tns-prev-controller=".suggested-products-section .section-title .prev" | |
| data-tns-next-controller=".suggested-products-section .section-title .next" | |
| data-tns-progressbar=".suggested-products-section .section-title .progressInner" | |
| data-tns-responsive='<?php | |
| echo json_encode([ | |
| '0' =>['items'=>1,'edgePadding'=> 25,'margin'=>3, 'center'=> true], | |
| '500' =>['items'=>2], | |
| '768' =>['items'=>3], | |
| '1024' =>['items'=>3, 'edgePadding'=> 4,'margin'=>20, 'center'=> false], | |
| '1280' =>['items'=>3], | |
| ]); | |
| ?>' | |
| > | |
| @foreach ($example_products as $item) | |
| <div class="item mb-4"> | |
| @include('theme._partials.product',['product'=>$item]) | |
| </div> | |
| @endforeach | |
| </div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment