HAM!DREZA
96 lines
4.0 KiB
Vue
96 lines
4.0 KiB
Vue
<template>
|
|
<div class="flexBox flex-col mt-[20vw] md:mt-[8.5vw] mb-[6.5vw] relative">
|
|
<div class="w-[81.2vw] flex justify-between">
|
|
<div class="w-full md:w-[30.5%] flex gap-[1vw]">
|
|
<div class="w-full md:w-[70%] flex gap-[3vw] md:gap-[1vw] border-b h-[13.077vw] md:h-[6.4vw]">
|
|
<svg
|
|
class="h-[8.462vw] md:h-[2.76vw] w-[1.538vw] md:w-[0.521vw]"
|
|
viewBox="0 0 10 53"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M0 5C0 2.23858 2.23858 0 5 0H10V53H5C2.23858 53 0 50.7614 0 48V5Z"
|
|
fill="#0D3F40"
|
|
/>
|
|
</svg>
|
|
<p class="w-full md:w-[18vw] text-[4.8vw] md:text-[1.69vw] text-[#383E43] font-semibold">
|
|
بخشی از فعالیت های ShinanLearning
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex gap-[2vw] md:gap-[0.6vw] absolute md:left-[0.5vw] top-[20vw] md:top-[3.2vw]">
|
|
<svg
|
|
class="h-[12.308vw] md:h-[3.125vw] w-[12.308vw] md:w-[3.125vw]"
|
|
viewBox="0 0 60 60"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<circle
|
|
cx="30"
|
|
cy="30"
|
|
r="29.5"
|
|
transform="rotate(-180 30 30)"
|
|
stroke="#878787"
|
|
/>
|
|
<path
|
|
d="M26.9999 22.0802L33.5199 28.6002C34.2899 29.3702 34.2899 30.6302 33.5199 31.4002L26.9999 37.9202"
|
|
stroke="#878787"
|
|
stroke-width="2"
|
|
stroke-miterlimit="10"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
</svg>
|
|
|
|
<svg
|
|
class="h-[12.308vw] md:h-[3.125vw] w-[12.308vw] md:w-[3.125vw]"
|
|
viewBox="0 0 60 60"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<circle cx="30" cy="30" r="29.5" stroke="#383E43" />
|
|
<g clip-path="url(#clip0_1_1122)">
|
|
<path
|
|
d="M33.0001 37.9198L26.4801 31.3998C25.7101 30.6298 25.7101 29.3698 26.4801 28.5998L33.0001 22.0798"
|
|
stroke="#383E43"
|
|
stroke-width="2"
|
|
stroke-miterlimit="10"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
</g>
|
|
<defs>
|
|
<clipPath id="clip0_1_1122">
|
|
<rect
|
|
width="24"
|
|
height="24"
|
|
fill="white"
|
|
transform="translate(18 18)"
|
|
/>
|
|
</clipPath>
|
|
</defs>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="flex flex-col flex-col-reverse md:flex-row items-center justify-between mt-[25vw] md:mt-[1.6vw] w-full md:w-[81.2%]">
|
|
<div>
|
|
<h2 class="text-[4.544vw] mt-[10vw] md:mt-0 md:text-[1.502vw] text-[#383E43] ">آموزش آنلاین</h2>
|
|
<p class="text-[3.59vw] md:text-[1.186vw] text-[#878787] leading-[7.692vw] md:leading-[2.083vw] mt-[3vw] md:mt-[1vw] w-[81.2vw] md:w-[39.844vw]">
|
|
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده
|
|
از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و
|
|
سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای
|
|
متنوع با هدف بهبود ابزارهای کاربردی می باشد
|
|
</p>
|
|
|
|
</div>
|
|
<img
|
|
class="h-[85.692vw] md:h-[20.469vw] w-[87.692vw] md:w-[20.469vw] rounded-[50%] object-cover"
|
|
src="/public/images/about-slider.jpg"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template> |