HAM!DREZA
117 lines
4.0 KiB
Vue
117 lines
4.0 KiB
Vue
<template>
|
|
<div class="flex justify-center mt-[10vw] md:mt-[8vw] pb-[10vw]">
|
|
<div
|
|
class="w-[87.69%] md:w-[81.04%] flex flex-col md:flex-row justify-between mt-[3.846vw] md:mt-[1.667vw]"
|
|
>
|
|
|
|
<div class="basis-1/1 md:basis-1/2">
|
|
<h2
|
|
class="text-[5.11vw] md:text-[1.69vw] text-primaryGreen text-[#383E43] font-semibold ms-0 md:ms-[1.458vw]"
|
|
>
|
|
درباره ما
|
|
</h2>
|
|
<p
|
|
class="text-[#383E43] max-w-[766px] text-[3.59vw] md:text-[1.335vw] mt-[4vw] md:mt-[1.354vw] mb-[6vw] md:mb-0 leading-[7.179vw] md:leading-[2.865vw]"
|
|
>
|
|
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با
|
|
استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در
|
|
ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و
|
|
کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی
|
|
در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می
|
|
طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی
|
|
الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این
|
|
صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و
|
|
شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای
|
|
اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده
|
|
قرار گیرد.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="relative basis-1/1 md:basis-1/2">
|
|
<div class="grid-gallery mt-0 md:mt-[3.906vw] pb-[120vw] md:pb-0">
|
|
<div class="panel"></div>
|
|
<div class="panel"></div>
|
|
<div class="panel"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
|
|
<style scoped>
|
|
@media (min-width: 768px) {
|
|
|
|
.panel {
|
|
background: url("./images/aboutUs.jpg");
|
|
background-size: cover;
|
|
background-repeat: no-repeat !important;
|
|
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
|
|
position: absolute;
|
|
}
|
|
.panel:nth-child(1) {
|
|
width: 16.667vw !important;
|
|
height: 16.667vw !important;
|
|
top: 4vw !important;
|
|
left: -0.1vw !important;
|
|
background-position-x: 28% !important;
|
|
background-position-y: 0% !important;
|
|
background-size: 340% !important;
|
|
}
|
|
.panel:nth-child(2) {
|
|
top: 12.75vw !important;
|
|
left: 0.26vw !important;
|
|
height: 33.076vw !important;
|
|
width: 33.076vw !important;
|
|
background-position-x: 50% !important;
|
|
background-position-y: -7.24vw !important;
|
|
background-size: 150% !important;
|
|
}
|
|
|
|
.panel:nth-child(3) {
|
|
width: 16.667vw !important;
|
|
height: 16.667vw !important;
|
|
top: 4vw !important;
|
|
left: 17.1vw !important;
|
|
background-size: 300% !important;
|
|
background-position-x: 75% !important;
|
|
background-position-y: 0% !important;
|
|
}
|
|
}
|
|
|
|
.panel {
|
|
background: url("./images/aboutUs.jpg");
|
|
background-size: cover;
|
|
background-repeat: no-repeat !important;
|
|
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
|
|
position: absolute;
|
|
}
|
|
.panel:nth-child(1) {
|
|
width: 45.667vw;
|
|
height: 45.667vw;
|
|
top: 9vw;
|
|
left: -2.5vw;
|
|
background-position-x: 28%;
|
|
background-position-y: 0%;
|
|
background-size: 340%;
|
|
}
|
|
.panel:nth-child(2) {
|
|
top: 32.75vw;
|
|
left: 0.26vw;
|
|
height: 87.076vw;
|
|
width: 87.692vw;
|
|
background-position-x: 50%;
|
|
background-position-y: 310%;
|
|
background-size: 160%;
|
|
}
|
|
|
|
.panel:nth-child(3) {
|
|
width: 45.667vw;
|
|
height: 45.667vw;
|
|
top: 9vw;
|
|
left: 45.2vw;
|
|
background-size: 300%;
|
|
background-position-x: 75%;
|
|
background-position-y: 0%;
|
|
}
|
|
</style> |