-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
9969b36
commit 810ec0f
Showing
37 changed files
with
4,162 additions
and
0 deletions.
There are no files selected for viewing
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| <div> <section class="py-20 bg-gray-100 overflow-x-hidden"> | ||
| <div class="container px-4 mx-auto relative"> | ||
| <div class="absolute inset-0 bg-blue-200 my-8 -ml-4 -mr-4"></div> | ||
| <div class="relative bg-blue-300 overflow-hidden"> | ||
| <img class="absolute top-0 left-0 xl:-ml-40 w-full h-full" src="yofte-assets/elements/cta-lines.svg" alt=""> | ||
| <div class="relative flex flex-wrap items-center"> | ||
| <div class="w-full md:w-4/6 p-10 lg:pl-40"> | ||
| <span class="text-xl md:text-2xl text-white">New Products</span> | ||
| <h2 class="mt-4 mb-14 text-4xl md:text-5xl font-bold font-heading text-white">Check our new collection</h2> | ||
| <a class="inline-block bg-orange-300 hover:bg-orange-400 text-white font-bold font-heading py-4 px-8 rounded-md uppercase transition duration-200" href="#">More</a> | ||
| </div> | ||
| <img class="relative ml-auto w-full md:w-2/6 h-96 object-cover" src="https://images.unsplash.com/photo-1554244933-d876deb6b2ff?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt=""> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </section></div> |
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| <div><section class="py-20 bg-gray-100 overflow-x-hidden"> | ||
| <div class="container px-4 mx-auto"> | ||
| <div class="relative max-w-4xl mx-auto"> | ||
| <div class="absolute inset-0 bg-blue-200 my-12 -ml-12 -mr-12"></div> | ||
| <div class="relative pt-20 pb-32 px-8 bg-blue-300 text-center"> | ||
| <a class="inline-block mb-14" href="#"> | ||
| <img class="h-9" src="yofte-assets/logos/yofte-logo-white.svg" alt=""> | ||
| </a> | ||
| <h2 class="mb-5 text-4xl md:text-5xl text-white font-bold font-heading">Join Our Newsletter</h2> | ||
| <p class="mb-6 text-blue-100">Sign me up for Yofte newsletters to get exclusive perks.</p> | ||
| <img class="mb-12 inline-block" src="yofte-assets/elements/quote.svg" alt=""> | ||
| <div class="relative max-w-xl mx-auto bg-white rounded-lg"> | ||
| <img class="absolute top-0 right-0 h-40 -mt-12 -mr-20" src="yofte-assets/elements/quote-light.png" alt=""> | ||
| <div class="relative lg:max-w-xl lg:mx-auto bg-white rounded-lg"> | ||
| <div class="relative flex flex-wrap items-center justify-between"> | ||
| <div class="relative flex-1"> | ||
| <span class="absolute top-0 left-0 ml-8 mt-4 font-semibold font-heading text-xs text-gray-400">Drop your e-mail</span> | ||
| <input class="inline-block w-full pt-8 pb-4 px-8 placeholder-gray-900 border-0 focus:ring-transparent focus:outline-none rounded-md" type="text" placeholder="[email protected]"> | ||
| </div> | ||
| <a class="inline-block w-auto bg-blue-800 hover:bg-blue-900 text-white font-bold font-heading py-6 px-8 rounded-md uppercase text-center" href="#">Join</a> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </section> </div> |
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,76 @@ | ||
| <div><section class="relative py-20 bg-gray-100 overflow-x-hidden"> | ||
| <div class="container px-4 mx-auto"> | ||
| <div class="flex flex-wrap -mx-12"> | ||
| <div class="w-full lg:w-1/2 px-12 mb-12 lg:mb-0"> | ||
| <div class="max-w-xl lg:pr-16"> | ||
| <h2 class="mb-14 text-4xl md:text-6xl font-bold font-heading"> | ||
| <span>Exclusive offers and</span> | ||
| <span class="text-blue-300">$10 Voucher</span> | ||
| <span>when you sign up to our Newsletter</span> | ||
| </h2> | ||
| <ul class="flex flex-col items-start"> | ||
| <li class="inline-flex items-center mb-2 px-6 py-3 bg-white rounded-full"> | ||
| <span class="mr-6"> | ||
| <svg width="36" height="36" viewbox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg"> | ||
| <circle cx="18" cy="18" r="18" fill="#A692FF"></circle> | ||
| <g clip-path="url(#clip0)"> | ||
| <path d="M15.135 24.3373L9 18.2023L9.81024 17.392L15.135 22.7168L26.1898 11.6621L27 12.4724L15.135 24.3373Z" fill="white"></path> | ||
| </g> | ||
| <defs><clippath id="clip0"><rect width="18" height="18" fill="white" transform="translate(9 9)"></rect></clippath></defs> | ||
| </svg> | ||
| </span> | ||
| <p>Non gravida metus, eget imperdiet</p> | ||
| </li> | ||
| <li class="inline-flex items-center mb-2 px-6 py-3 bg-white rounded-full"> | ||
| <span class="mr-6"> | ||
| <svg width="36" height="36" viewbox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg"> | ||
| <circle cx="18" cy="18" r="18" fill="#A692FF"></circle> | ||
| <g clip-path="url(#clip0)"> | ||
| <path d="M15.135 24.3373L9 18.2023L9.81024 17.392L15.135 22.7168L26.1898 11.6621L27 12.4724L15.135 24.3373Z" fill="white"></path> | ||
| </g> | ||
| <defs><clippath id="clip0"><rect width="18" height="18" fill="white" transform="translate(9 9)"></rect></clippath></defs> | ||
| </svg> | ||
| </span> | ||
| <p>A sagittis eleifend</p> | ||
| </li> | ||
| <li class="inline-flex items-center px-6 py-3 bg-white rounded-full"> | ||
| <span class="mr-6"> | ||
| <svg width="36" height="36" viewbox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg"> | ||
| <circle cx="18" cy="18" r="18" fill="#A692FF"></circle> | ||
| <g clip-path="url(#clip0)"> | ||
| <path d="M15.135 24.3373L9 18.2023L9.81024 17.392L15.135 22.7168L26.1898 11.6621L27 12.4724L15.135 24.3373Z" fill="white"></path> | ||
| </g> | ||
| <defs><clippath id="clip0"><rect width="18" height="18" fill="white" transform="translate(9 9)"></rect></clippath></defs> | ||
| </svg> | ||
| </span> | ||
| <p>Molestie felis, a aliquam torto</p> | ||
| </li> | ||
| </ul> | ||
| </div> | ||
| </div> | ||
| <div class="lg:absolute lg:top-0 lg:bottom-0 lg:right-0 w-full lg:w-1/2 flex items-center justify-center py-20 px-12 bg-blue-300"> | ||
| <div class="absolute left-0 -ml-8 w-8 h-5/6 bg-blue-200"></div> | ||
| <div class="relative text-center"> | ||
| <a class="inline-block mb-14" href="#"> | ||
| <img class="h-9" src="yofte-assets/logos/yofte-logo-white.svg" alt=""> | ||
| </a> | ||
| <h2 class="mb-5 text-4xl md:text-5xl text-white font-bold font-heading">Join Our Newsletter</h2> | ||
| <p class="mb-6 text-blue-100">Sign me up for Yofte newsletters to get exclusive perks.</p> | ||
| <img class="mb-12 inline-block" src="yofte-assets/elements/quote.svg" alt=""> | ||
| <div class="relative max-w-xl mx-auto bg-white rounded-lg"> | ||
| <img class="absolute top-0 right-0 h-40 -mt-12 -mr-20" src="yofte-assets/elements/quote-light.png" alt=""> | ||
| <div class="relative lg:max-w-xl lg:mx-auto bg-white rounded-lg"> | ||
| <div class="relative flex flex-wrap items-center justify-between"> | ||
| <div class="relative flex-1"> | ||
| <span class="absolute top-0 left-0 ml-8 mt-4 font-semibold font-heading text-xs text-gray-400">Drop your e-mail</span> | ||
| <input class="inline-block w-full pt-8 pb-4 px-8 placeholder-gray-900 border-0 focus:ring-transparent focus:outline-none rounded-md" type="text" placeholder="[email protected]"> | ||
| </div> | ||
| <a class="inline-block w-auto bg-blue-800 hover:bg-blue-900 text-white font-bold font-heading py-6 px-8 rounded-md uppercase text-center" href="#">Join</a> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </section> </div> |
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,93 @@ | ||
| <div><section class="py-20 bg-gray-100 overflow-x-hidden"> | ||
| <div class="container mx-auto px-4"> | ||
| <h2 class="mb-16 md:mb-24 text-4xl md:text-5xl font-bold font-heading">The Latest And The Greatest</h2> | ||
| <div class="flex mb-16"> | ||
| <div class="flex-shrink-0 w-full flex flex-wrap"> | ||
| <div class="w-full lg:w-1/2 md:px-3 mb-6"> | ||
| <a class="relative block bg-blue-300" href="#"> | ||
| <span class="absolute top-0 left-0 ml-6 mt-6 px-2 py-1 text-xs font-bold font-heading bg-white border-2 border-red-500 rounded-full text-red-500">-15%</span> | ||
| <img class="w-full h-64 object-cover" src="yofte-assets/images/placeholder-snapshot.png" alt=""> | ||
| <div class="px-6 pb-16 mt-12"> | ||
| <div class="px-6 mb-2"> | ||
| <h3 class="mb-3 text-3xl text-white font-bold font-heading">LIFE Bottle 2.0</h3> | ||
| <p class="mb-4 text-xl font-bold font-heading text-white"> | ||
| <span>$10.30</span> | ||
| <span class="text-xs text-blue-100 font-semibold font-heading line-through">$11.90</span> | ||
| </p> | ||
| <p class="text-blue-100">Great quality, eco material.</p> | ||
| </div> | ||
| </div> | ||
| </a> | ||
| </div> | ||
| <div class="w-full lg:w-1/2 md:px-3 mb-16"> | ||
| <a class="relative block bg-blue-300" href="#"> | ||
| <span class="absolute top-0 left-0 ml-6 mt-6 px-2 py-1 text-xs font-bold font-heading bg-white border-2 border-red-500 rounded-full text-red-500">-15%</span> | ||
| <img class="w-full h-64 object-cover" src="yofte-assets/images/placeholder-playing-tennis.png" alt=""> | ||
| <div class="px-6 pb-16 mt-12"> | ||
| <div class="px-6 mb-2"> | ||
| <h3 class="mb-3 text-3xl text-white font-bold font-heading">Tennis racket Sanks 2</h3> | ||
| <p class="mb-4 text-xl font-bold font-heading text-white"> | ||
| <span>$295.30</span> | ||
| <span class="text-xs text-blue-100 font-semibold font-heading line-through">$330.90</span> | ||
| </p> | ||
| <p class="text-blue-100">Great quality, light and pleasant.</p> | ||
| </div> | ||
| </div> | ||
| </a> | ||
| </div> | ||
| <div class="w-full md:px-3 flex items-center justify-between"> | ||
| <div class="relative mr-4 bg-gray-200 h-1 w-full md:w-10/12"> | ||
| <div class="absolute top-0 bottom-0 left-0 bg-blue-300 w-1/4"></div> | ||
| </div> | ||
| <div class="ml-auto md:w-2/12 flex items-center justify-end"> | ||
| <a class="mr-5 flex items-center justify-center w-12 h-12 bg-orange-300 hover:bg-orange-400 rounded-md" href="#"> | ||
| <svg width="8" height="12" viewbox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg"> | ||
| <path d="M3.02344 5.99748L7.14844 10.1225L5.97043 11.3008L0.66742 5.99748L5.97043 0.694179L7.14844 1.87248L3.02344 5.99748Z" fill="white"></path> | ||
| </svg> | ||
| </a> | ||
| <a class="flex items-center justify-center w-12 h-12 bg-blue-300 hover:bg-blue-400 rounded-md" href="#"> | ||
| <svg width="8" height="12" viewbox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg"> | ||
| <path d="M4.97656 6.00252L0.851562 1.87752L2.02957 0.699219L7.33258 6.00252L2.02957 11.3058L0.851562 10.1275L4.97656 6.00252Z" fill="white"></path> | ||
| </svg> | ||
| </a> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="hidden lg:flex flex-shrink-0 ml-16 opacity-40"> | ||
| <div class="w-full lg:w-1/2 px-3"> | ||
| <a class="relative block bg-blue-300" href="#"> | ||
| <span class="absolute top-0 left-0 ml-6 mt-6 px-2 py-1 text-xs font-bold font-heading bg-white border-2 border-red-500 rounded-full text-red-500">-15%</span> | ||
| <img class="w-full h-64 object-cover" src="yofte-assets/images/placeholder-playing-tennis.png" alt=""> | ||
| <div class="px-6 pb-16 mt-12"> | ||
| <div class="px-6 mb-2"> | ||
| <h3 class="mb-3 text-3xl text-white font-bold font-heading">LIFE Bottle 2.0</h3> | ||
| <p class="mb-4 text-xl font-bold font-heading text-white"> | ||
| <span>$10.30</span> | ||
| <span class="text-xs text-blue-100 font-semibold font-heading line-through">$11.90</span> | ||
| </p> | ||
| <p class="text-blue-100">Great quality, eco material.</p> | ||
| </div> | ||
| </div> | ||
| </a> | ||
| </div> | ||
| <div class="w-full lg:w-1/2 px-3"> | ||
| <a class="relative block bg-blue-300" href="#"> | ||
| <span class="absolute top-0 left-0 ml-6 mt-6 px-2 py-1 text-xs font-bold font-heading bg-white border-2 border-red-500 rounded-full text-red-500">-15%</span> | ||
| <img class="w-full h-64 object-cover" src="yofte-assets/images/placeholder-playing-tennis.png" alt=""> | ||
| <div class="px-6 pb-16 mt-12"> | ||
| <div class="px-6 mb-2"> | ||
| <h3 class="mb-3 text-3xl text-white font-bold font-heading">LIFE Bottle 2.0</h3> | ||
| <p class="mb-4 text-xl font-bold font-heading text-white"> | ||
| <span>$10.30</span> | ||
| <span class="text-xs text-blue-100 font-semibold font-heading line-through">$11.90</span> | ||
| </p> | ||
| <p class="text-blue-100">Great quality, eco material.</p> | ||
| </div> | ||
| </div> | ||
| </a> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="text-center"><a class="inline-block bg-blue-900 hover:bg-blue-800 text-white font-bold font-heading py-5 px-8 rounded-md uppercase" href="#">All products</a></div> | ||
| </div> | ||
| </section> </div> |
Oops, something went wrong.