HAM!DREZA
174 lines
12 KiB
Vue
174 lines
12 KiB
Vue
<template>
|
|
<div class="pinkShadow h-[103.846vw] md:h-[21.094vw] rounded-[2.564vw] md:rounded-[0.781vw] bg-white">
|
|
|
|
|
|
<div class="relative text-center h-[56.154vw] md:h-[11.406vw]">
|
|
<p
|
|
class="post w-[30.769vw] md:w-[6.979vw] h-[9.487vw] md:h-[2.24vw] font-semibold flexBox text-[3.59vw] md:text-[0.938vw] absolute left-0 bottom-0 bg-white rounded-tr-[3.59vw] md:rounded-tr-[0.781vw]">
|
|
540,000
|
|
<span class="ms-[1vw] md:ms-[0.2vw] text-[2.236vw] md:text-[0.585vw]">تومان</span>
|
|
</p>
|
|
<img style="object-fit: cover;" src="/public/images/course.png" alt="laravel"
|
|
class="h-[56.154vw] md:h-[11.406vw] w-full rounded-[3.846vw] md:rounded-[0.781vw]">
|
|
</div>
|
|
|
|
|
|
|
|
<div class="flexBox flex-col">
|
|
<div class="w-[69.231vw] md:w-[16vw] space-y-[9vw] md:space-y-[1.4vw] mt-[4vw] md:mt-[1vw]">
|
|
<p
|
|
class="text-[3.59vw] md:text-[0.833vw] text-[#383E43] w-full font-semibold">
|
|
ترفند های کاربردی
|
|
پایتون
|
|
</p>
|
|
<div class="flex justify-between text-[3.614vw] md:text-[0.658vw]">
|
|
<p class="flex items-center text-[#878787]">
|
|
<svg
|
|
class="h-[5.556vw] md:h-[0.99vw] w-[5.556vw] md:w-[0.99vw]"
|
|
viewBox="0 0 19 19" fill="none"
|
|
xmlns="http://www.w3.org/2000/svg">
|
|
<path
|
|
d="M17.4163 13.2525V3.69713C17.4163 2.74713 16.6405 2.04255 15.6984 2.12171H15.6509C13.9884 2.26421 11.463 3.1113 10.0538 3.99796L9.91926 4.08505C9.68967 4.22755 9.30967 4.22755 9.08009 4.08505L8.88217 3.9663C7.47301 3.08755 4.95551 2.24838 3.29301 2.1138C2.35092 2.03463 1.58301 2.74713 1.58301 3.68921V13.2525C1.58301 14.0125 2.20051 14.725 2.96051 14.82L3.19009 14.8517C4.90801 15.0813 7.56009 15.9521 9.08009 16.7834L9.11176 16.7992C9.32551 16.918 9.66592 16.918 9.87176 16.7992C11.3918 15.96 14.0518 15.0813 15.7776 14.8517L16.0388 14.82C16.7988 14.725 17.4163 14.0125 17.4163 13.2525Z"
|
|
fill="#E5E5E5" stroke="#E5E5E5" stroke-width="1.5"
|
|
stroke-linecap="round" stroke-linejoin="round" />
|
|
<path d="M9.5 4.34619V16.2212" stroke="white" stroke-linecap="round"
|
|
stroke-linejoin="round" />
|
|
<path d="M6.13574 6.72119H4.35449" stroke="white" stroke-linecap="round"
|
|
stroke-linejoin="round" />
|
|
<path d="M6.72949 9.09619H4.35449" stroke="white" stroke-linecap="round"
|
|
stroke-linejoin="round" />
|
|
</svg>
|
|
|
|
<span class="md:ms-[0.2vw]">بک اند</span>
|
|
</p>
|
|
<p class="flex items-center text-[#878787]">
|
|
<svg
|
|
class="h-[5.556vw] md:h-[0.99vw] w-[5.556vw] md:w-[0.99vw]"
|
|
viewBox="0 0 19 19" fill="none"
|
|
xmlns="http://www.w3.org/2000/svg">
|
|
<path
|
|
d="M7.12467 1.58337C5.05051 1.58337 3.36426 3.26962 3.36426 5.34379C3.36426 7.37837 4.95551 9.02504 7.02967 9.09629C7.09301 9.08837 7.15634 9.08837 7.20384 9.09629C7.21967 9.09629 7.22759 9.09629 7.24342 9.09629C7.25134 9.09629 7.25134 9.09629 7.25926 9.09629C9.28592 9.02504 10.8772 7.37837 10.8851 5.34379C10.8851 3.26962 9.19884 1.58337 7.12467 1.58337Z"
|
|
fill="#E5E5E5" />
|
|
<path
|
|
d="M11.1468 11.202C8.93801 9.72953 5.33592 9.72953 3.11134 11.202C2.10592 11.8749 1.55176 12.7854 1.55176 13.7591C1.55176 14.7329 2.10592 15.6354 3.10342 16.3004C4.21176 17.0445 5.66842 17.4166 7.12509 17.4166C8.58176 17.4166 10.0384 17.0445 11.1468 16.3004C12.1443 15.6274 12.6984 14.7249 12.6984 13.7433C12.6905 12.7695 12.1443 11.867 11.1468 11.202Z"
|
|
fill="#E5E5E5" />
|
|
<path
|
|
d="M15.8259 5.81083C15.9526 7.34666 14.8601 8.6925 13.348 8.87458C13.3401 8.87458 13.3401 8.87458 13.3321 8.87458H13.3084C13.2609 8.87458 13.2134 8.87458 13.1738 8.89041C12.4059 8.93 11.7013 8.68458 11.1709 8.23333C11.9863 7.505 12.4534 6.4125 12.3584 5.225C12.303 4.58375 12.0813 3.99791 11.7488 3.49916C12.0496 3.34875 12.398 3.25375 12.7542 3.22208C14.3059 3.0875 15.6913 4.24333 15.8259 5.81083Z"
|
|
fill="#E5E5E5" />
|
|
<path
|
|
d="M17.4085 13.1337C17.3452 13.9017 16.8544 14.5667 16.031 15.0179C15.2394 15.4533 14.2419 15.6592 13.2523 15.6354C13.8223 15.1208 14.1548 14.4796 14.2181 13.7987C14.2973 12.8171 13.8302 11.875 12.896 11.1229C12.3656 10.7033 11.7481 10.3708 11.0752 10.1254C12.8248 9.61874 15.0256 9.95915 16.3794 11.0517C17.1077 11.6375 17.4798 12.3737 17.4085 13.1337Z"
|
|
fill="#E5E5E5" />
|
|
</svg>
|
|
|
|
<span class="md:ms-[0.2vw]">825 دانشجو</span>
|
|
</p>
|
|
<p class="flex items-center text-[#878787]">
|
|
<svg
|
|
class="h-[5.556vw] md:h-[0.99vw] w-[5.556vw] md:w-[0.99vw]"
|
|
viewBox="0 0 19 19" fill="none"
|
|
xmlns="http://www.w3.org/2000/svg">
|
|
<path
|
|
d="M9.49967 1.58337C5.13759 1.58337 1.58301 5.13796 1.58301 9.50004C1.58301 13.8621 5.13759 17.4167 9.49967 17.4167C13.8618 17.4167 17.4163 13.8621 17.4163 9.50004C17.4163 5.13796 13.8618 1.58337 9.49967 1.58337ZM12.9434 12.3263C12.8326 12.5163 12.6347 12.6192 12.4288 12.6192C12.3259 12.6192 12.223 12.5955 12.128 12.5321L9.67384 11.0675C9.06426 10.7034 8.61301 9.90379 8.61301 9.19921V5.95337C8.61301 5.62879 8.88217 5.35962 9.20676 5.35962C9.53134 5.35962 9.80051 5.62879 9.80051 5.95337V9.19921C9.80051 9.48421 10.038 9.90379 10.2834 10.0463L12.7376 11.5109C13.0226 11.6771 13.1176 12.0413 12.9434 12.3263Z"
|
|
fill="#E5E5E5" />
|
|
</svg>
|
|
|
|
<span class="md:ms-[0.2vw]">00:28</span>
|
|
</p>
|
|
</div>
|
|
<div class="flex justify-between">
|
|
<button
|
|
class="mt-[0.5vw] flex items-center justify-center gap-[0.417vw] md:h-[2.292vw] px-[4.103vw] md:px-[1.563vw] py-[2.308vw] md:py-[0.521vw] bg-primaryGreen text-white text-[3.19vw] md:text-[0.833vw] rounded-[2.564vw] md:rounded-[0.521vw] md:w-[7.917vw]">
|
|
شروع دوره
|
|
<svg
|
|
class="w-[4.575vw] md:w-[0.833vw] h-[4.575vw] md:h-[0.833vw]"
|
|
viewBox="0 0 16 16" fill="none"
|
|
xmlns="http://www.w3.org/2000/svg">
|
|
<path
|
|
d="M10.0002 13.28L5.65355 8.93331C5.14022 8.41997 5.14022 7.57997 5.65355 7.06664L10.0002 2.71997"
|
|
stroke="white" stroke-width="1.5" stroke-miterlimit="10"
|
|
stroke-linecap="round" stroke-linejoin="round" />
|
|
</svg>
|
|
|
|
</button>
|
|
<span>
|
|
<svg class="mt-[0.5vw] w-[8.718vw] md:w-[2.24vw] h-[8.718vw] md:h-[2.24vw]" viewBox="0 0 44 46"
|
|
fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path
|
|
d="M22.4035 2C19.8297 2 17.2812 2.50851 14.9033 3.4965C12.5255 4.48448 10.365 5.9326 8.54504 7.75816C6.72512 9.58372 5.28149 11.751 4.29656 14.1362C3.31163 16.5214 2.80469 19.0778 2.80469 21.6596C2.80469 24.2413 3.31163 26.7978 4.29656 29.183C5.28149 31.5682 6.72512 33.7354 8.54504 35.561C10.365 37.3866 12.5255 38.8347 14.9033 39.8227C17.2812 40.8106 19.8297 41.3191 22.4035 41.3191L22.4035 21.6596V2Z"
|
|
fill="white" stroke="url(#paint0_linear_7_1513)" stroke-width="3" />
|
|
<path
|
|
d="M22.4035 2.00019C25.3093 2.00019 28.1788 2.64834 30.8041 3.89773C33.4295 5.14712 35.745 6.96647 37.5831 9.22406C39.4212 11.4817 40.7358 14.121 41.4318 16.951C42.1278 19.781 42.1877 22.7308 41.6073 25.5869C41.0268 28.443 39.8205 31.1338 38.0756 33.4647C36.3308 35.7955 34.0911 37.708 31.5186 39.0637C28.9462 40.4193 26.1055 41.1842 23.2021 41.303C20.2987 41.4218 17.4052 40.8914 14.7313 39.7504L22.4035 21.6598L22.4035 2.00019Z"
|
|
fill="white" stroke="#ABDCDD" stroke-width="3" stroke-linecap="round"
|
|
stroke-dasharray="6 6" />
|
|
<ellipse cx="22.4002" cy="21.1915" rx="18.2553" ry="17.7322"
|
|
transform="rotate(-90 22.4002 21.1915)" fill="white" />
|
|
<path
|
|
d="M10.6786 30.0149L12.0474 32.761C12.234 33.1433 12.7318 33.5099 13.1518 33.5801L15.6327 33.9936C17.2193 34.2589 17.5926 35.4135 16.4493 36.5525L14.5206 38.4872C14.1939 38.8149 14.015 39.4468 14.1161 39.8993L14.6683 42.2943C15.1039 44.1901 14.1006 44.9234 12.4285 43.9326L10.1031 42.5518C9.68309 42.3021 8.99091 42.3021 8.56316 42.5518L6.23774 43.9326C4.5734 44.9234 3.56235 44.1823 3.99788 42.2943L4.55007 39.8993C4.65117 39.4468 4.4723 38.8149 4.14565 38.4872L2.21688 36.5525C1.0814 35.4135 1.44693 34.2589 3.0335 33.9936L5.51445 33.5801C5.92665 33.5099 6.4244 33.1433 6.61105 32.761L7.97986 30.0149C8.72648 28.5248 9.93974 28.5248 10.6786 30.0149Z"
|
|
fill="#0D3F40" />
|
|
<path
|
|
d="M19.5137 27.3618C19.5244 27.0738 19.5297 26.6471 19.5297 26.0818C19.5297 24.3645 19.4391 22.8125 19.2577 21.4258C19.0231 19.6551 18.6284 18.1351 18.0737 16.8658L19.8497 15.7938C20.0311 16.1671 20.2071 16.6045 20.3777 17.1058C20.5484 17.5538 20.7031 17.9005 20.8417 18.1458C20.9911 18.3911 21.1831 18.5885 21.4177 18.7378C21.6524 18.8765 21.9617 18.9458 22.3457 18.9458C23.3697 18.9458 23.8817 18.2791 23.8817 16.9458C23.8817 16.7005 23.8657 16.4338 23.8337 16.1458L25.5137 15.8098C25.6097 16.2685 25.6577 16.7325 25.6577 17.2018C25.6577 17.9485 25.5351 18.6365 25.2897 19.2658C25.0444 19.8845 24.6711 20.3858 24.1697 20.7698C23.6791 21.1431 23.0817 21.3298 22.3777 21.3298C21.9617 21.3298 21.5671 21.2445 21.1937 21.0738V21.1218C21.3217 22.3271 21.3857 23.8311 21.3857 25.6338C21.3857 26.4018 21.3804 26.9778 21.3697 27.3618H19.5137Z"
|
|
fill="#383E43" />
|
|
<defs>
|
|
<linearGradient id="paint0_linear_7_1513" x1="20.8356" y1="1.21362"
|
|
x2="22.4054" y2="1.99611" gradientUnits="userSpaceOnUse">
|
|
<stop stop-color="#22A4A6" stop-opacity="0.6" />
|
|
<stop offset="1" stop-color="#22A4A6" stop-opacity="0" />
|
|
</linearGradient>
|
|
</defs>
|
|
</svg>
|
|
</span>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.post::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: -8.1vw;
|
|
left: 0vw;
|
|
width: 3vw;
|
|
height: 8.1vw;
|
|
border-bottom-left-radius: 0.781vw;
|
|
box-shadow: -0.03vw 0.8vw 0 -0.026vw rgb(255, 255, 255);
|
|
}
|
|
.post::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0.15vw;
|
|
left: 100%;
|
|
width: 3.083vw;
|
|
height: 2.083vw;
|
|
border-bottom-left-radius: 0.781vw;
|
|
box-shadow: -0.26vw 1.042vw 0 0.026vw rgb(255, 255, 255);
|
|
}
|
|
|
|
|
|
|
|
@media (max-width: 768px) {
|
|
.post::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: -8.1vw;
|
|
left: 0vw;
|
|
width: 3vw;
|
|
height: 8.1vw;
|
|
border-bottom-left-radius: 3.59vw;
|
|
box-shadow: -0.03vw 2.8vw 0 -0.026vw rgb(255, 255, 255) ;
|
|
}
|
|
.post::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 3.4vw;
|
|
left: 100%;
|
|
width: 5.083vw;
|
|
height: 6.083vw;
|
|
border-bottom-left-radius: 3.59vw;
|
|
box-shadow: -1vw 2vw 0 0.026vw rgb(255, 255, 255) ;
|
|
}
|
|
|
|
}
|
|
</style> |