create profile section

2024-05-21 15:01:29 +03:30
parent abe8daf536
commit 0c7fd83de2
18 changed files with 1535 additions and 39 deletions
@@ -0,0 +1,108 @@
+<template>
+  <div class="thin pinkShadow 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="text-black post w-[30.769vw] md:w-[6.979vw] h-[9.487vw] md:h-[2.24vw] 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="w-full flex flex-col justify-center space-y-[1.042vw] md:space-y-[1.25vw]"
+        >
+          <p
+            class="mb-[15vw] md:mb-[2.5vw] text-[14px] md:text-[0.833vw] text-[#383E43] ] mt-[4vw] md:mt-[1.042vw] ms-[3vw] md:ms-[0.625vw]"
+          >
+            ترفند های کاربردی پایتون
+          </p>
+
+          <div
+            class="flex flex-col justify-between items-center py-[3vw] md:py-[0.7vw] mx-[3vw] md:mx-[0.833vw] border-t"
+          >
+            <div class="flex justify-between w-full mb-[0.417vw]">
+              <p class="text-[2.836vw] md:text-[0.658vw] text-[#383E43]">میزان مشاهده</p>
+              <p class="text-[3.19vw] md:text-[0.741vw] text-[#383E43]">0 %</p>
+            </div>
+            <div
+            id="progressbar"
+            class="mt-[3vw] md:mt-[0vw] h-[2.051vw] md:h-[0.26vw] rounded-[2vw] md:rounded-[0.521vw]"
+          >
+            <div
+              class="rounded-[2vw] md:rounded-[0.521vw] h-[2.051vw] md:h-[0.26vw]"
+            ></div>
+            </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.16vw;
+    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);
+}
+#progressbar {
+  background-color: #e5e5e5;
+
+  width: 100%;
+}
+#progressbar > div {
+  background-color: #0d3f40;
+  width: 77%;
+  float: left;
+
+  left: 0;
+}
+
+
+@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>