anatolykopyl/pure-city.ru
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

About company responsive

Browse Source
This commit is contained in:
Anatoly Kopyl
2024-09-22 17:38:17 +03:00
parent f6d3e5eb09
commit c03c3de452
4 changed files with 33 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
components/about-company.vue
View File

@@ -17,20 +17,21 @@ const handleMouseMove = (event: MouseEvent) => {
>
<div class="about__grid py-16">
<NuxtPicture
class="overflow-hidden rounded-r-xl"
style="grid-area: img-a;"
class="overflow-hidden rounded-r-xl col-span-1 sm:col-span-2 h-0 min-h-full"
src="/images/sweep.jpg"
></NuxtPicture>
<div class="rounded-xl p-8 bg-slate-100 md:mr-16" style="grid-area: card-a;">
Компания Чистый город осуществляет профессиональные комплексные услуги по уборке помещений для частных и корпоративных клиентов. Высокое качество выполняемых услуг обеспечивается за счет использования современной профессиональной техники с использованием качественных моющих средств нашими опытными специалистами.
<div class="rounded-xl p-4 lg:p-8 bg-slate-100 col-start-2 sm:col-start-auto col-span-2 sm:col-span-1 text-2xl mr-4 sm:mr-0">
Осуществляем профессиональные комплексные услуги по уборке помещений для частных и корпоративных клиентов.
</div>
<div class="rounded-xl p-8 bg-slate-100 md:ml-16" style="grid-area: card-b;">
<div class="rounded-xl p-4 lg:p-8 bg-slate-100 mx-4 sm:mx-0 md:mr-16 col-span-3 sm:col-span-1 text-base">
Высокое качество выполняемых услуг обеспечивается за счет использования современной профессиональной техники с использованием качественных моющих средств нашими опытными специалистами.
</div>
<div class="rounded-xl p-4 lg:p-8 bg-slate-100 ml-4 sm:mx-0 md:ml-16 sm:col-start-2 col-span-2 text-base">
Нам дорог каждый клиент и важно каждое мнение о нас, поэтому мы с максимальной ответственностью подходим к своей работе! Наша работа делает мир чище! Благодаря нашему труду пространство становиться чистым, а чистота залог здоровья и приятно находиться в убранном чистом месте, пусть это будет ваша квартира, дом или рабочее место! Нам важно, чтобы наши клиенты оставались с нами и рекомендовали нас как ответственных профессионалов своего дела!
</div>
<NuxtPicture
class="overflow-hidden rounded-l-xl"
class="overflow-hidden rounded-l-xl col-span-1 sm:col-span-2 h-0 min-h-full"
src="/images/building-window.jpg"
style="grid-area: img-b;"
></NuxtPicture>
</div>
@@ -49,22 +50,26 @@ const handleMouseMove = (event: MouseEvent) => {
<style scoped lang="postcss">
.about__grid {
--about-grid-gap: 16px;
--about-grid-magic: calc(calc(var(--about-grid-gap) * 4) / 3);
display: grid;
gap: 16px;
gap: var(--about-grid-gap);
grid-template-columns:
calc(calc(100% - var(--col-width)) / 2)
repeat(3,
calc(calc(var(--col-width) / 3) - 21.33px)
calc(calc(var(--col-width) / 3) - var(--about-grid-magic))
)
calc(calc(100% - var(--col-width)) / 2);
grid-template-rows: 300px 300px;
grid-template-areas:
'img-a img-a card-a card-a .'
'. card-b card-b img-b img-b';
grid-auto-rows: auto;
@media screen and (max-width: 1280px) {
grid-template-columns: auto repeat(3, 1fr) auto;
}
@media screen and (max-width: 639px) {
grid-template-columns: repeat(3, 1fr)
}
}
:deep(img) {
@@ -78,6 +83,10 @@ const handleMouseMove = (event: MouseEvent) => {
top: 0;
left: 0;
z-index: -1;
@media (hover: none) {
display: none;
}
}
.about__blob {