HAM!DREZA
139 lines
5.2 KiB
Vue
139 lines
5.2 KiB
Vue
<template>
|
|
<div class="absolute top-[5vw] md:top-0 right-0 px-[3vw] md:px-0 md:relative ">
|
|
<div class=" flex items-center gap-[3vw] md:gap-[0.7vw]">
|
|
<svg
|
|
class="w-[1.538vw] md:w-[0.521vw] h-[8.462vw] md:h-[2.76vw]"
|
|
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>
|
|
<span
|
|
class="text-[4.544vw] md:text-[1.69vw] text-[#383E43] font-bold -tracking-[0.05vw]"
|
|
>آموزش HTML رایگان مقدماتی تا پیشرفته</span
|
|
>
|
|
</div>
|
|
|
|
<video controls class="mt-[4vw] md:mt-[1.8vw] w-full">
|
|
<source src="/public/video/test.mp4" type="video/mp4" />
|
|
</video>
|
|
<div
|
|
class="relative flex items-center text-[4.038vw] md:text-[1.502vw] mt-[6vw] md:mt-[1.6vw] font-semibold"
|
|
>
|
|
آشنایی با ساختار صفحات
|
|
<div class="absolute gap-[2vw] flex md:hidden left-0">
|
|
<svg
|
|
class="h-[5.641vw] w-[5.641vw]"
|
|
viewBox="0 0 24 22"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<g clip-path="url(#clip0_1_6600)">
|
|
<path
|
|
d="M16.96 5.65576C18.96 6.92993 20.34 8.95576 20.62 11.2933"
|
|
stroke="#878787"
|
|
stroke-width="1.5"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
<path
|
|
d="M3.48999 11.3392C3.74999 9.01083 5.10999 6.98499 7.08999 5.70166"
|
|
stroke="#878787"
|
|
stroke-width="1.5"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
<path
|
|
d="M8.19 19.1951C9.35 19.7359 10.67 20.0384 12.06 20.0384C13.4 20.0384 14.66 19.7634 15.79 19.2592"
|
|
stroke="#878787"
|
|
stroke-width="1.5"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
<path
|
|
d="M12.06 7.05834C13.5954 7.05834 14.84 5.91741 14.84 4.51C14.84 3.1026 13.5954 1.96167 12.06 1.96167C10.5247 1.96167 9.28003 3.1026 9.28003 4.51C9.28003 5.91741 10.5247 7.05834 12.06 7.05834Z"
|
|
stroke="#878787"
|
|
stroke-width="1.5"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
<path
|
|
d="M4.82999 18.26C6.36534 18.26 7.60999 17.1191 7.60999 15.7117C7.60999 14.3043 6.36534 13.1633 4.82999 13.1633C3.29464 13.1633 2.04999 14.3043 2.04999 15.7117C2.04999 17.1191 3.29464 18.26 4.82999 18.26Z"
|
|
stroke="#878787"
|
|
stroke-width="1.5"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
<path
|
|
d="M19.17 18.26C20.7054 18.26 21.95 17.1191 21.95 15.7117C21.95 14.3043 20.7054 13.1633 19.17 13.1633C17.6347 13.1633 16.39 14.3043 16.39 15.7117C16.39 17.1191 17.6347 18.26 19.17 18.26Z"
|
|
stroke="#878787"
|
|
stroke-width="1.5"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
</g>
|
|
<defs>
|
|
<clipPath id="clip0_1_6600">
|
|
<rect width="24" height="22" fill="white" />
|
|
</clipPath>
|
|
</defs>
|
|
</svg>
|
|
|
|
<svg
|
|
class="h-[5.641vw] w-[5.641vw]"
|
|
viewBox="0 0 22 22"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<g clip-path="url(#clip0_1_6599)">
|
|
<path
|
|
d="M8.54333 10.7068L10.89 13.0535L13.2367 10.7068"
|
|
stroke="#383E43"
|
|
stroke-width="1.5"
|
|
stroke-miterlimit="10"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
<path
|
|
d="M10.89 3.66675V12.9892"
|
|
stroke="#383E43"
|
|
stroke-width="1.5"
|
|
stroke-miterlimit="10"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
<path
|
|
d="M18.3334 11.165C18.3334 15.2167 15.5834 18.4984 11 18.4984C6.41669 18.4984 3.66669 15.2167 3.66669 11.165"
|
|
stroke="#383E43"
|
|
stroke-width="1.5"
|
|
stroke-miterlimit="10"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
</g>
|
|
<defs>
|
|
<clipPath id="clip0_1_6599">
|
|
<rect width="22" height="22" fill="white" />
|
|
</clipPath>
|
|
</defs>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<style scoped>
|
|
video {
|
|
border-radius: 0.781vw;
|
|
}
|
|
@media (max-width: 768px) {
|
|
video {
|
|
border-radius: 3.846vw;
|
|
}
|
|
}
|
|
</style> |