template / create the components of the honor page

This commit is contained in:
HAM!DREZA
2024-05-02 11:07:45 +03:30
parent 48537c93a5
commit 573fe4807e
13 changed files with 734 additions and 357 deletions
+1 -1
View File
@@ -91,7 +91,7 @@
<div
class="leading-[1.458vw] absolute w-full lg:w-[27.76vw] bg-white rounded-[25px] pb-[7vw] lg:pb-[2.8vw] p-2 start-0 lg:start-[42.5vw] top-[18vw] lg:top-[9.2vw]">
class="leading-[1.458vw] absolute w-full lg:w-[27.76vw] bg-white rounded-[25px] pb-[7vw] lg:pb-[2.8vw] p-2 md:start-[42.5vw] top-[18vw] lg:top-[9.2vw]">
<h1 class="mt-[5vw] lg:mt-[1.3vw] text-[5.11vw] lg:text-[1.335vw] ps-4 lg:ps-8">
لورم ایپسوم
</h1>
+1 -1
View File
@@ -1,5 +1,5 @@
<template>
<div class="bg-white flex justify-center pt-[20vw] lg:pt-[9vw] lg:mt-[8.6vw] lg:pb-[21vw]" dir="rtl">
<div class="bg-white flex justify-center pt-[20vw] lg:pt-[9vw] lg:mt-[3.6vw] lg:pb-[21vw]" dir="rtl">
<div class="w-[87.69%] lg:w-[81.04%] flex flex-col flex-col-reverse lg:flex-row">
<div dir="rtl" class="z-[1] mt-[70vw] lg:mt-0">
+67 -60
View File
@@ -1,5 +1,5 @@
<template>
<div class="flex flex-col lg:flex-row pb-[15vw] lg:pb-0 px-[2vw] pt-[6.5vw]">
<div class="flex flex-col lg:flex-row pb-[15vw] lg:pb-[5vw] px-[2vw] pt-[6.5vw]">
<div class="w-full lg:w-[35%] flex flex-col ps-[8vw] lg:ps-0">
<div class="flex justify-between">
<p
@@ -87,54 +87,52 @@
فواید و مضرات مصرف گندم
</span>
</p>
<p class="items-center hidden lg:flex">
<svg
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle cx="8" cy="8" r="7.5" fill="#FAF6F9" stroke="#383E43" />
<circle cx="8" cy="8" r="2" fill="#383E43" />
</svg>
<span class="ps-3 text-[0.938vw] font-semibold">
فواید و مضرات مصرف گندم
</span>
</p>
<p class="items-center hidden lg:flex">
<svg
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle cx="8" cy="8" r="7.5" fill="#FAF6F9" stroke="#383E43" />
<circle cx="8" cy="8" r="2" fill="#383E43" />
</svg>
<span class="ps-3 text-[0.938vw] font-semibold">
فواید و مضرات مصرف گندم
</span>
</p>
<p class="items-center hidden lg:flex">
<svg
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle cx="8" cy="8" r="7.5" fill="#FAF6F9" stroke="#383E43" />
<circle cx="8" cy="8" r="2" fill="#383E43" />
</svg>
<span class="ps-3 text-[0.938vw] font-semibold">
فواید و مضرات مصرف گندم
</span>
</p>
<p class=" items-center hidden lg:flex">
<svg
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle cx="8" cy="8" r="7.5" fill="#FAF6F9" stroke="#383E43" />
<circle cx="8" cy="8" r="2" fill="#383E43" />
</svg>
<span class="ps-3 text-[0.938vw] font-semibold">
فواید و مضرات مصرف گندم
</span>
</p>
<p class=" items-center hidden lg:flex">
<svg
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle cx="8" cy="8" r="7.5" fill="#FAF6F9" stroke="#383E43" />
<circle cx="8" cy="8" r="2" fill="#383E43" />
</svg>
<span class="ps-3 text-[0.938vw] font-semibold">
فواید و مضرات مصرف گندم
</span>
</p>
<p class=" items-center hidden lg:flex">
<svg
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle cx="8" cy="8" r="7.5" fill="#FAF6F9" stroke="#383E43" />
<circle cx="8" cy="8" r="2" fill="#383E43" />
</svg>
<span class="ps-3 text-[0.938vw] font-semibold">
فواید و مضرات مصرف گندم
</span>
</p>
<button
class="hidden lg:flex text-[0.833vw] border-[1px] px-[1.302vw] py-[0.625vw] rounded-[10px]"
>
@@ -171,26 +169,35 @@
<div
class="mt-[8vw] lg:mt-0 w-full grid grid-cols-1 lg:grid-cols-3 border-s-none lg:border-s-[1px] ms-0 lg:ms-[3vw] ps-0 lg:ps-[1vw]"
>
<div
class="w-[64.103vw] lg:w-[20.156vw] h-[85.641vw] lg:h-[28.021vw] border-[1.5px] rounded-[500px] flex justify-center items-center mx-auto"
class="w-[64.103vw] lg:w-[20.156vw] h-[85.641vw] lg:h-[28.021vw]
border-[1.5px] rounded-[500px] flex justify-center items-center mx-auto">
<div class="mediagallery w-[53.846vw] lg:w-[18.073vw] h-[76.41vw] lg:h-[25.938vw]
border-[1.5px] rounded-[500px]"></div>
</div>
<div
class="hidden lg:flex lg:w-[20.156vw] lg:h-[28.021vw] border-[1.5px] rounded-[500px] justify-center items-center"
>
<div
class="w-[53.846vw] lg:w-[18.073vw] h-[76.41vw] lg:h-[25.938vw] border-[1.5px] rounded-[500px]"
class="mediagallery lg:w-[18.073vw] lg:h-[25.938vw] border-[1.5px] rounded-[500px]"
></div>
</div>
<div
class="hidden lg:flex lg:w-[20.156vw] lg:h-[28.021vw] border-[1.5px] rounded-[500px] justify-center items-center"
>
<div class="lg:w-[18.073vw] lg:h-[25.938vw] border-[1.5px] rounded-[500px]"></div>
</div>
<div
class="hidden lg:flex lg:w-[20.156vw] lg:h-[28.021vw] border-[1.5px] rounded-[500px] justify-center items-center"
>
<div class="lg:w-[18.073vw] lg:h-[25.938vw] border-[1.5px] rounded-[500px]"></div>
<div
class="mediagallery lg:w-[18.073vw] lg:h-[25.938vw] border-[1.5px] rounded-[500px]"
></div>
</div>
</div>
</div>