kalugin66/sts-avto-v2
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

22

Browse Source
This commit is contained in:
kalugin66
2026-06-22 21:06:36 +05:00
parent 5efacc11ea
commit cb416e7539
2 changed files with 108 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/img/sobol-4x4.webp
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 70 KiB

After

Width:  |  Height:  |  Size: 18 KiB

122
public/index.html
View File

@@ -515,17 +515,82 @@ img { max-width: 100%; display: block; }
.btn { width: 100%; justify-content: center; }
.hero-contacts { flex-direction: column; gap: 12px; }
}
.activity-grid {
/* ========== SOCIAL ACTIVITY ========== */
.activity-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 24px;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 20px;
margin-top: 40px;
}
.activity-grid img {
width: 100%; height: auto;
border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,0.1);
.activity-card {
background: var(--bg-white);
border: 1px solid var(--border);
border-radius: 14px;
padding: 30px 24px;
transition: all 0.4s;
position: relative;
overflow: hidden;
}
.activity-card::before {
content: '';
position: absolute;
top: 0; left: 0;
width: 4px; height: 0;
background: linear-gradient(to bottom, var(--orange), var(--orange-dark));
transition: height 0.4s;
border-radius: 0 0 4px 0;
}
.activity-card:hover::before { height: 100%; }
.activity-card:hover {
transform: translateY(-6px);
border-color: var(--orange);
box-shadow: 0 14px 35px rgba(230,126,34,0.12);
}
.activity-card-icon {
width: 56px; height: 56px;
background: linear-gradient(135deg, rgba(230,126,34,0.12), rgba(230,126,34,0.06));
border-radius: 14px;
display: flex; align-items: center; justify-content: center;
margin-bottom: 18px;
transition: all 0.4s;
}
.activity-card:hover .activity-card-icon {
background: linear-gradient(135deg, var(--orange), var(--orange-dark));
}
.activity-card:hover .activity-card-icon svg { fill: #fff; }
.activity-card-icon svg { width: 28px; height: 28px; fill: var(--orange); transition: fill 0.4s; }
.activity-card h4 {
font-family: 'Montserrat', sans-serif;
font-weight: 700; font-size: 1.05rem;
color: var(--text-dark); margin-bottom: 10px;
}
.activity-card p {
color: var(--text-gray);
font-size: 0.93rem; line-height: 1.7;
}
.activity-gallery {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
margin-top: 50px;
}
.activity-gallery .license-gallery-item {
flex: 0 1 320px;
max-width: 400px;
}
.activity-gallery-title {
width: 100%; text-align: center;
font-family: 'Montserrat', sans-serif;
font-weight: 700; font-size: 1.15rem;
color: var(--text-dark); margin-bottom: 8px;
}
.activity-gallery .license-gallery-item { cursor: pointer; }
@media (max-width: 768px) {
.activity-cards { grid-template-columns: 1fr; }
}
.activity-grid .license-gallery-item { cursor: pointer; }
.partners-scroll {
overflow: hidden;
@@ -547,10 +612,6 @@ img { max-width: 100%; display: block; }
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
@media (max-width: 768px) {
.activity-grid { grid-template-columns: 1fr; }
}
</style>
</head>
<body>
@@ -1106,23 +1167,56 @@ img { max-width: 100%; display: block; }
<h2 class="section-title">Общественная <span>деятельность</span></h2>
<p class="section-subtitle">Компания «СТС-Авто» активно участвует в социальной и общественной жизни регионов присутствия.</p>
</div>
<div class="activity-grid reveal">
<div class="license-gallery-item" data-src="./img/thanks-1.webp" data-title="Благодарственное письмо" data-desc="Благодарность от партнёров за качественно выполненные работы.">
<div class="activity-cards reveal">
<div class="activity-card">
<div class="activity-card-icon">
<svg viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
</div>
<h4>Спонсорство</h4>
<p>Поддерживаем спортивные, культурные и общественные мероприятия в регионах присутствия. Помогаем развитию местных сообществ.</p>
</div>
<div class="activity-card">
<div class="activity-card-icon">
<svg viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
</div>
<h4>Благотворительность</h4>
<p>Оказываем адресную помощь детским домам, ветеранским и общественным организациям. Участвуем в социальных проектах.</p>
</div>
<div class="activity-card">
<div class="activity-card-icon">
<svg viewBox="0 0 24 24"><path d="M17 8C8 10 5.9 16.2 3 19l-.47.74A7.02 7.02 0 004.5 22.5C7.35 21.83 9.76 19.7 11.85 17.61 14.64 14.79 18.35 11.36 17 8zM10.05 16.81c-.73.73-1.93 1.1-2.94.63-1.03-.48-1.22-1.76-.54-2.67.62-.83 1.84-1.13 2.96-.69.63.25 1.12.69 1.48 1.15l-.96 1.58zM21.19 2.09c-.45-.5-1.15-.66-1.77-.42l-3.02 1.17 3.76 3.76 1.17-3.02c.24-.62.08-1.32-.42-1.77l.28.28z"/></svg>
</div>
<h4>Экология</h4>
<p>Участвуем в экологических акциях, субботниках и проектах по озеленению. Следим за снижением воздействия на окружающую среду.</p>
</div>
<div class="activity-card">
<div class="activity-card-icon">
<svg viewBox="0 0 24 24"><path d="M5 13.18v4L12 21l7-3.82v-4L12 17l-7-3.82zM12 3L1 9l11 6 9-4.91V17h2V9L12 3z"/></svg>
</div>
<h4>Поддержка образования</h4>
<p>Сотрудничаем с профильными вузами и колледжами. Организуем практику для студентов, участвуем в ярмарках вакансий.</p>
</div>
</div>
<div class="activity-gallery reveal">
<div class="activity-gallery-title">Благодарственные письма</div>
<div class="license-gallery-item" data-src="./img/thanks-1.webp" data-title="Благодарственное письмо" data-desc="Благодарность от партнёров за качественно выполненные работы и вклад в развитие региона.">
<div class="license-gallery-thumb">
<img src="./img/thanks-1.webp" alt="Благодарственное письмо">
<div class="license-gallery-zoom"><svg viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0016 9.5 6.5 6.5 0 109.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg></div>
</div>
<div class="license-gallery-body">
<h4>Благодарственное письмо</h4>
<p>За вклад в развитие региона</p>
</div>
</div>
<div class="license-gallery-item" data-src="./img/thanks-2.webp" data-title="Благодарственное письмо" data-desc="Благодарность от партнёров за качественно выполненные работы.">
<div class="license-gallery-item" data-src="./img/thanks-2.webp" data-title="Благодарственное письмо" data-desc="Благодарность за активное участие в социально-экономическом развитии и благотворительной деятельности.">
<div class="license-gallery-thumb">
<img src="./img/thanks-2.webp" alt="Благодарственное письмо">
<div class="license-gallery-zoom"><svg viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0016 9.5 6.5 6.5 0 109.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg></div>
</div>
<div class="license-gallery-body">
<h4>Благодарственное письмо</h4>
<p>За благотворительную деятельность</p>
</div>
</div>
</div>