Skip to content

Commit

Permalink
added new products section
Browse files Browse the repository at this point in the history
  • Loading branch information
@xyryc
xyryc committed Aug 25, 2024
1 parent 72fa3d9 commit defa8a8
Show file tree
Hide file tree
Showing 7 changed files with 348 additions and 2 deletions.
Binary file modified images/10.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified images/5.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified images/6.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified images/7.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified images/8.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified images/9.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
350 changes: 348 additions & 2 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -442,6 +442,348 @@ <h2 class="text-[28px] font-extrabold">Professional Program</h2>
</div>
</section>

<!-- New Products Section -->
<section class="mt-24">
<!-- title -->
<div class="text-center py-8 border-dashed border-y-2 mb-12">
<h3 class="text-4xl font-extrabold">Our New Products</h3>
<p
class="text-base font-medium text-customGray leading-[26px] mt-6 w-10/12 md:w-1/2 inline-flex"
>
Dit amet consectetur. Condimentum dignissim adipiscing aliquam
turpis placerat dolor. Purus urna in sit nullam proin.
</p>
</div>

<!-- card container -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- card 1 -->
<div
class="border p-6 rounded-2xl flex flex-col lg:flex-row justify-center items-center gap-5"
>
<div class="flex justify-center items-center">
<img
class="lg:h-[172px] object-cover rounded-xl"
src="images/5.png"
alt=""
/>
</div>
<div>
<div
class="flex gap-4 text-customGray text-base leading-none font-medium"
>
<div><i class="fa-solid fa-star text-yellow-400"></i> 5.00</div>
<div><i class="fa-regular fa-eye"></i> 20</div>
<div><i class="fa-regular fa-heart"></i> 200</div>
</div>

<h2 class="text-xl font-extrabold leading-none my-3">
World Cup Flags Football
</h2>
<p class="text-base font-medium text-customGray leading-[26px]">
Dolor sit amet consectetur. Ut urna diam quis sagittis.
</p>
<div
class="flex flex-col lg:flex-row justify-left items-left gap-4 lg:gap-5 mt-4"
>
<h3 class="text-lg font-extrabold text-red-500 leading-none">
Price - $22.00
</h3>
<div class="flex items-center gap-2 text-customGray">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-6"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 0 0-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 0 0-16.536-1.84M7.5 14.25 5.106 5.272M6 20.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Zm12.75 0a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z"
/>
</svg>
<small class="text-base font-medium leading-none"
>Delivery Fee: Free</small
>
</div>
</div>
</div>
</div>
<!-- card 2 -->
<div
class="border p-6 rounded-2xl flex flex-col lg:flex-row justify-center items-center gap-5"
>
<div class="flex justify-center items-center">
<img
class="lg:h-[172px] object-cover rounded-xl"
src="images/6.png"
alt=""
/>
</div>
<div>
<div
class="flex gap-4 text-customGray text-base leading-none font-medium"
>
<div><i class="fa-solid fa-star text-yellow-400"></i> 5.00</div>
<div><i class="fa-regular fa-eye"></i> 20</div>
<div><i class="fa-regular fa-heart"></i> 200</div>
</div>

<h2 class="text-xl font-extrabold leading-none my-3">
World Cup Flags Football
</h2>
<p class="text-base font-medium text-customGray leading-[26px]">
Dolor sit amet consectetur. Ut urna diam quis sagittis.
</p>
<div
class="flex flex-col lg:flex-row justify-left items-left gap-4 lg:gap-5 mt-4"
>
<h3 class="text-lg font-extrabold text-red-500 leading-none">
Price - $22.00
</h3>
<div class="flex items-center gap-2 text-customGray">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-6"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 0 0-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 0 0-16.536-1.84M7.5 14.25 5.106 5.272M6 20.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Zm12.75 0a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z"
/>
</svg>
<small class="text-base font-medium leading-none"
>Delivery Fee: Free</small
>
</div>
</div>
</div>
</div>
<!-- card 3 -->
<div
class="border p-6 rounded-2xl flex flex-col lg:flex-row justify-center items-center gap-5"
>
<div class="flex justify-center items-center">
<img
class="lg:h-[172px] object-cover rounded-xl"
src="images/7.png"
alt=""
/>
</div>
<div>
<div
class="flex gap-4 text-customGray text-base leading-none font-medium"
>
<div><i class="fa-solid fa-star text-yellow-400"></i> 5.00</div>
<div><i class="fa-regular fa-eye"></i> 20</div>
<div><i class="fa-regular fa-heart"></i> 200</div>
</div>

<h2 class="text-xl font-extrabold leading-none my-3">
World Cup Flags Football
</h2>
<p class="text-base font-medium text-customGray leading-[26px]">
Dolor sit amet consectetur. Ut urna diam quis sagittis.
</p>
<div
class="flex flex-col lg:flex-row justify-left items-left gap-4 lg:gap-5 mt-4"
>
<h3 class="text-lg font-extrabold text-red-500 leading-none">
Price - $22.00
</h3>
<div class="flex items-center gap-2 text-customGray">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-6"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 0 0-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 0 0-16.536-1.84M7.5 14.25 5.106 5.272M6 20.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Zm12.75 0a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z"
/>
</svg>
<small class="text-base font-medium leading-none"
>Delivery Fee: Free</small
>
</div>
</div>
</div>
</div>
<!-- card 4 -->
<div
class="border p-6 rounded-2xl flex flex-col lg:flex-row justify-center items-center gap-5"
>
<div class="flex justify-center items-center">
<img
class="lg:h-[172px] object-cover rounded-xl"
src="images/8.png"
alt=""
/>
</div>
<div>
<div
class="flex gap-4 text-customGray text-base leading-none font-medium"
>
<div><i class="fa-solid fa-star text-yellow-400"></i> 5.00</div>
<div><i class="fa-regular fa-eye"></i> 20</div>
<div><i class="fa-regular fa-heart"></i> 200</div>
</div>

<h2 class="text-xl font-extrabold leading-none my-3">
World Cup Flags Football
</h2>
<p class="text-base font-medium text-customGray leading-[26px]">
Dolor sit amet consectetur. Ut urna diam quis sagittis.
</p>
<div
class="flex flex-col lg:flex-row justify-left items-left gap-4 lg:gap-5 mt-4"
>
<h3 class="text-lg font-extrabold text-red-500 leading-none">
Price - $22.00
</h3>
<div class="flex items-center gap-2 text-customGray">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-6"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 0 0-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 0 0-16.536-1.84M7.5 14.25 5.106 5.272M6 20.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Zm12.75 0a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z"
/>
</svg>
<small class="text-base font-medium leading-none"
>Delivery Fee: Free</small
>
</div>
</div>
</div>
</div>
<!-- card 5 -->
<div
class="border p-6 rounded-2xl flex flex-col lg:flex-row justify-center items-center gap-5"
>
<div class="flex justify-center items-center">
<img
class="lg:h-[172px] object-cover rounded-xl"
src="images/9.png"
alt=""
/>
</div>
<div>
<div
class="flex gap-4 text-customGray text-base leading-none font-medium"
>
<div><i class="fa-solid fa-star text-yellow-400"></i> 5.00</div>
<div><i class="fa-regular fa-eye"></i> 20</div>
<div><i class="fa-regular fa-heart"></i> 200</div>
</div>

<h2 class="text-xl font-extrabold leading-none my-3">
World Cup Flags Football
</h2>
<p class="text-base font-medium text-customGray leading-[26px]">
Dolor sit amet consectetur. Ut urna diam quis sagittis.
</p>
<div
class="flex flex-col lg:flex-row justify-left items-left gap-4 lg:gap-5 mt-4"
>
<h3 class="text-lg font-extrabold text-red-500 leading-none">
Price - $22.00
</h3>
<div class="flex items-center gap-2 text-customGray">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-6"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 0 0-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 0 0-16.536-1.84M7.5 14.25 5.106 5.272M6 20.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Zm12.75 0a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z"
/>
</svg>
<small class="text-base font-medium leading-none"
>Delivery Fee: Free</small
>
</div>
</div>
</div>
</div>
<!-- card 6 -->
<div
class="border p-6 rounded-2xl flex flex-col lg:flex-row justify-center items-center gap-5"
>
<div class="flex justify-center items-center">
<img
class="lg:h-[172px] object-cover rounded-xl"
src="images/10.png"
alt=""
/>
</div>
<div>
<div
class="flex gap-4 text-customGray text-base leading-none font-medium"
>
<div><i class="fa-solid fa-star text-yellow-400"></i> 5.00</div>
<div><i class="fa-regular fa-eye"></i> 20</div>
<div><i class="fa-regular fa-heart"></i> 200</div>
</div>

<h2 class="text-xl font-extrabold leading-none my-3">
World Cup Flags Football
</h2>
<p class="text-base font-medium text-customGray leading-[26px]">
Dolor sit amet consectetur. Ut urna diam quis sagittis.
</p>
<div
class="flex flex-col lg:flex-row justify-left items-left gap-4 lg:gap-5 mt-4"
>
<h3 class="text-lg font-extrabold text-red-500 leading-none">
Price - $22.00
</h3>
<div class="flex items-center gap-2 text-customGray">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-6"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 0 0-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 0 0-16.536-1.84M7.5 14.25 5.106 5.272M6 20.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Zm12.75 0a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z"
/>
</svg>
<small class="text-base font-medium leading-none"
>Delivery Fee: Free</small
>
</div>
</div>
</div>
</div>
</div>
</section>

<!-- Clients Question Seciton -->
<section class="mt-24">
<!-- title -->
Expand Down Expand Up @@ -673,9 +1015,13 @@ <h1 class="text-[28px] font-extrabold">Get In Touch</h1>
Dit amet consectetur. Condimentum adipiscing aliquam turpis placerat
dolor. Purus urna in sit nullam proin.
</p>
<div><i class="fa-regular fa-envelope"></i> hockeys@support.com</div>
<div>
<i class="fa-solid fa-phone fill-none"></i> (+62) 123-321-543
<i class="fa-regular fa-envelope text-red-700"></i>
hockeys@support.com
</div>
<div>
<i class="fa-solid fa-phone fill-none text-red-700"></i> (+62)
123-321-543
</div>
</aside>
<nav>
Expand Down

0 comments on commit defa8a8

Please sign in to comment.