HAM!DREZA
202 lines
8.5 KiB
Vue
202 lines
8.5 KiB
Vue
<template>
|
|
<div class="w-full relative flex h-[86.41vw] md:h-[40.625vw]">
|
|
<NuxtImg
|
|
:placeholder="[30, 20]"
|
|
:src="props.props.slug.value.image"
|
|
alt="html"
|
|
class="absolute h-[86.41vw] md:h-[40.625vw] top-0 left-0 w-full object-cover brightness-75"
|
|
/>
|
|
<div class="mt-[14vw] ms-[9.5vw] z-[1] text-white">
|
|
<h1
|
|
class="text-[5.751vw] md:text-[1.69vw] font-[600] -tracking-[0.05vw]"
|
|
>
|
|
{{ props.props.slug.value.name }}
|
|
</h1>
|
|
<p class="text-[3.19vw] md:text-[0.833vw] mt-[0.6vw] text-[#E5E5E5]">
|
|
برنامه نویسی
|
|
</p>
|
|
<p
|
|
class="hidden md:block w-[39.896vw] text-[1.055vw] leading-[1.582vw] mt-[1.2vw]"
|
|
>
|
|
اولین قدم شروع طراحی وبسایت، آموزش HTML هست. HTML یه زبان نشانه گذاری
|
|
هست که با کمک اون میتونی تگ هایی بنویسی تا سایت رو روی اون تگ ها پیاده
|
|
کنی. همونجوری که هیچ موجودی نمیتونه بدون اسکلت زندگی کنه،...
|
|
</p>
|
|
<p
|
|
class="text-[2.836vw] md:text-[0.741vw] text-[##E5E5E5] mt-[1.8vw] absolute bottom-[8vw] md:bottom-auto md:relative"
|
|
>
|
|
مدرس دوره :
|
|
<span class="text-[3.59vw] md:text-[1.055vw] text-white ms-[1vw]"
|
|
>حمیدرضا عبادی</span
|
|
>
|
|
</p>
|
|
<div
|
|
class="w-[39.896vw] mt-[3.2vw] flex flex-col md:flex-row justify-between absolute left-0 bottom-[8vw] md:bottom-auto md:relative space-y-[2vw] md:space-y-0"
|
|
>
|
|
<div class="flex gap-[1vw] items-center">
|
|
<svg
|
|
class="h-[6.667vw] md:h-[1.927vw] w-[6.667vw] md:w-[1.927vw]"
|
|
viewBox="0 0 37 37"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M12.3335 3.08331V7.70831"
|
|
stroke="white"
|
|
stroke-width="2"
|
|
stroke-miterlimit="10"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
<path
|
|
d="M24.6665 3.08331V7.70831"
|
|
stroke="white"
|
|
stroke-width="2"
|
|
stroke-miterlimit="10"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
<path
|
|
d="M5.396 14.0137H31.6043"
|
|
stroke="white"
|
|
stroke-width="2"
|
|
stroke-miterlimit="10"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
<path
|
|
d="M32.375 13.1041V26.2083C32.375 30.8333 30.0625 33.9166 24.6667 33.9166H12.3333C6.9375 33.9166 4.625 30.8333 4.625 26.2083V13.1041C4.625 8.47915 6.9375 5.39581 12.3333 5.39581H24.6667C30.0625 5.39581 32.375 8.47915 32.375 13.1041Z"
|
|
stroke="white"
|
|
stroke-width="2"
|
|
stroke-miterlimit="10"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
<path
|
|
d="M24.196 21.1209H24.2098"
|
|
stroke="white"
|
|
stroke-width="2.5"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
<path
|
|
d="M24.196 25.7459H24.2098"
|
|
stroke="white"
|
|
stroke-width="2.5"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
<path
|
|
d="M18.4928 21.1209H18.5067"
|
|
stroke="white"
|
|
stroke-width="2.5"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
<path
|
|
d="M18.4928 25.7459H18.5067"
|
|
stroke="white"
|
|
stroke-width="2.5"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
<path
|
|
d="M12.7873 21.1209H12.8011"
|
|
stroke="white"
|
|
stroke-width="2.5"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
<path
|
|
d="M12.7873 25.7459H12.8011"
|
|
stroke="white"
|
|
stroke-width="2.5"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
</svg>
|
|
<div class="space-y-[0.3vw]">
|
|
<p class="text-[3.59vw] md:text-[1.055vw]">آخرین بروزرسانی</p>
|
|
<p class="text-[2.518vw] md:text-[0.741vw]">1401/12/24</p>
|
|
</div>
|
|
</div>
|
|
<div class="border-l"></div>
|
|
<div class="flex gap-[1vw] items-center">
|
|
<svg
|
|
class="h-[6.667vw] md:h-[1.927vw] w-[6.667vw] md:w-[1.927vw]"
|
|
viewBox="0 0 37 37"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M33.9168 18.5C33.9168 27.01 27.0102 33.9166 18.5002 33.9166C9.99016 33.9166 3.0835 27.01 3.0835 18.5C3.0835 9.98998 9.99016 3.08331 18.5002 3.08331C27.0102 3.08331 33.9168 9.98998 33.9168 18.5Z"
|
|
stroke="white"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
<path
|
|
d="M24.2197 23.4025L19.4405 20.5504C18.608 20.0571 17.9297 18.87 17.9297 17.8988V11.5779"
|
|
stroke="white"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
</svg>
|
|
|
|
<div class="space-y-[0.3vw]">
|
|
<p class="text-[3.59vw] md:text-[1.055vw]">مدت زمان دوره</p>
|
|
<p class="text-[2.518vw] md:text-[0.741vw]">7 ساعت</p>
|
|
</div>
|
|
</div>
|
|
<div class="border-l"></div>
|
|
<div class="flex gap-[1vw] items-center">
|
|
<svg
|
|
class="h-[6.667vw] md:h-[1.927vw] w-[6.667vw] md:w-[1.927vw]"
|
|
viewBox="0 0 37 37"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M14.1215 16.7579C13.9673 16.7425 13.7823 16.7425 13.6127 16.7579C9.94353 16.6346 7.02979 13.6283 7.02979 9.92831C7.02979 6.15123 10.0823 3.08331 13.8748 3.08331C17.6519 3.08331 20.7198 6.15123 20.7198 9.92831C20.7044 13.6283 17.7906 16.6346 14.1215 16.7579Z"
|
|
stroke="white"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
<path
|
|
d="M25.2986 6.16669C28.2894 6.16669 30.6944 8.5871 30.6944 11.5625C30.6944 14.4763 28.3819 16.8504 25.499 16.9584C25.3756 16.9429 25.2369 16.9429 25.0981 16.9584"
|
|
stroke="white"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
<path
|
|
d="M6.41336 22.4467C2.68253 24.9442 2.68253 29.0142 6.41336 31.4963C10.6529 34.3329 17.6059 34.3329 21.8454 31.4963C25.5763 28.9988 25.5763 24.9288 21.8454 22.4467C17.6213 19.6254 10.6684 19.6254 6.41336 22.4467Z"
|
|
stroke="white"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
<path
|
|
d="M28.2739 30.8333C29.3839 30.6021 30.4323 30.155 31.2956 29.4921C33.7006 27.6883 33.7006 24.7129 31.2956 22.9091C30.4477 22.2616 29.4148 21.83 28.3202 21.5833"
|
|
stroke="white"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
</svg>
|
|
|
|
<div class="space-y-[0.3vw]">
|
|
<p class="text-[3.59vw] md:text-[1.055vw]">37546</p>
|
|
<p class="text-[2.518vw] md:text-[0.741vw]">دانشجو</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
const props = defineProps(['props'])
|
|
</script> |