Oliver/ODOO4projects.com
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Enhance: 50% bigger partner icons, text next to icon, smooth logo carousel animation

Browse Source
This commit is contained in:
Reef
2026-06-24 18:55:49 +00:00
parent 7871bacb8a
commit 7180fd190d
2 changed files with 177 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+142 -70
View File
@@ -693,76 +693,148 @@
<section class="partner-banner" id="partners"> <section class="partner-banner" id="partners">
<div class="container"> <div class="container">
<h3>Trusted by</h3> <h3>Trusted by</h3>
<div class="partner-grid"> <div class="partner-carousel-wrap">
<a <div class="partner-grid">
href="https://paraguayservice.com/" <a
target="_blank" href="https://paraguayservice.com/"
rel="noopener" target="_blank"
class="partner-item" rel="noopener"
> class="partner-item"
<img >
src="images/paraguayservice-favicon.png" <img
alt="Paraguay Service" src="images/paraguayservice-favicon.png"
/> alt="Paraguay Service"
<span>Paraguay Service</span> />
</a> <span>Paraguay Service</span>
<a </a>
href="https://estancia-agape.com/" <a
target="_blank" href="https://estancia-agape.com/"
rel="noopener" target="_blank"
class="partner-item" rel="noopener"
> class="partner-item"
<img >
src="images/estancia-agape-favicon.png" <img
alt="Estancia Agape" src="images/estancia-agape-favicon.png"
/> alt="Estancia Agape"
<span>Estancia Agape</span> />
</a> <span>Estancia Agape</span>
<a </a>
href="https://kate-group.de/" <a
target="_blank" href="https://kate-group.de/"
rel="noopener" target="_blank"
class="partner-item" rel="noopener"
> class="partner-item"
<img >
src="images/kate-group-favicon.png" <img
alt="KATE Group" src="images/kate-group-favicon.png"
/> alt="KATE Group"
<span>KATE Group</span> />
</a> <span>KATE Group</span>
<a </a>
href="https://agilnova.de/" <a
target="_blank" href="https://agilnova.de/"
rel="noopener" target="_blank"
class="partner-item" rel="noopener"
> class="partner-item"
<img src="images/agilnova-favicon.png" alt="agilnova" /> >
<span>agilnova</span> <img src="images/agilnova-favicon.png" alt="agilnova" />
</a> <span>agilnova</span>
<a </a>
href="https://006-002-bc5bb1cb-984d-42c3-8580-63439f4924c5.odoo4projects.com/" <a
target="_blank" href="https://006-002-bc5bb1cb-984d-42c3-8580-63439f4924c5.odoo4projects.com/"
rel="noopener" target="_blank"
class="partner-item" rel="noopener"
> class="partner-item"
<img >
src="images/ramani-kenya-logo.png" <img
alt="Ramani Kenya" src="images/ramani-kenya-logo.png"
/> alt="Ramani Kenya"
<span>Ramani Kenya</span> />
</a> <span>Ramani Kenya</span>
<a </a>
href="https://startparaguay.net/" <a
target="_blank" href="https://startparaguay.net/"
rel="noopener" target="_blank"
class="partner-item" rel="noopener"
> class="partner-item"
<img >
src="images/startparaguay-favicon.png" <img
alt="Start Paraguay" src="images/startparaguay-favicon.png"
/> alt="Start Paraguay"
<span>Start Paraguay</span> />
</a> <span>Start Paraguay</span>
</a>
<!-- duplicate for seamless scroll -->
<a
href="https://paraguayservice.com/"
target="_blank"
rel="noopener"
class="partner-item"
>
<img
src="images/paraguayservice-favicon.png"
alt="Paraguay Service"
/>
<span>Paraguay Service</span>
</a>
<a
href="https://estancia-agape.com/"
target="_blank"
rel="noopener"
class="partner-item"
>
<img
src="images/estancia-agape-favicon.png"
alt="Estancia Agape"
/>
<span>Estancia Agape</span>
</a>
<a
href="https://kate-group.de/"
target="_blank"
rel="noopener"
class="partner-item"
>
<img
src="images/kate-group-favicon.png"
alt="KATE Group"
/>
<span>KATE Group</span>
</a>
<a
href="https://agilnova.de/"
target="_blank"
rel="noopener"
class="partner-item"
>
<img src="images/agilnova-favicon.png" alt="agilnova" />
<span>agilnova</span>
</a>
<a
href="https://006-002-bc5bb1cb-984d-42c3-8580-63439f4924c5.odoo4projects.com/"
target="_blank"
rel="noopener"
class="partner-item"
>
<img
src="images/ramani-kenya-logo.png"
alt="Ramani Kenya"
/>
<span>Ramani Kenya</span>
</a>
<a
href="https://startparaguay.net/"
target="_blank"
rel="noopener"
class="partner-item"
>
<img
src="images/startparaguay-favicon.png"
alt="Start Paraguay"
/>
<span>Start Paraguay</span>
</a>
</div>
</div> </div>
</div> </div>
</section> </section>
style.css
+35 -12
View File
@@ -682,6 +682,7 @@ img {
padding: 2rem 0; padding: 2rem 0;
background: #f6f5f4; background: #f6f5f4;
text-align: center; text-align: center;
overflow: hidden;
} }
.partner-banner h3 { .partner-banner h3 {
font-family: "Inter Tight", sans-serif; font-family: "Inter Tight", sans-serif;
@@ -692,39 +693,61 @@ img {
letter-spacing: 0.08em; letter-spacing: 0.08em;
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
} }
.partner-carousel-wrap {
overflow: hidden;
width: 100%;
}
.partner-grid { .partner-grid {
display: flex; display: flex;
flex-wrap: wrap;
align-items: center; align-items: center;
justify-content: center; gap: 3rem;
gap: 2rem; width: max-content;
animation: partnerScroll 40s linear infinite;
}
.partner-carousel-wrap:hover .partner-grid {
animation-play-state: paused;
}
@keyframes partnerScroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
} }
.partner-item { .partner-item {
display: flex; display: flex;
flex-direction: column; flex-direction: row;
align-items: center; align-items: center;
gap: 0.4rem; gap: 0.6rem;
text-decoration: none; text-decoration: none;
color: rgba(33, 37, 41, 0.55); color: rgba(33, 37, 41, 0.55);
font-size: 0.75rem; font-size: 0.85rem;
font-weight: 500;
white-space: nowrap;
transition: opacity 0.2s; transition: opacity 0.2s;
flex-shrink: 0;
} }
.partner-item:hover { .partner-item:hover {
opacity: 0.7; opacity: 0.7;
} }
.partner-item img { .partner-item img {
width: 32px; width: 48px;
height: 32px; height: 48px;
border-radius: 6px; border-radius: 8px;
object-fit: contain; object-fit: contain;
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.partner-grid { .partner-grid {
gap: 1.25rem; gap: 2rem;
} }
.partner-item img { .partner-item img {
width: 28px; width: 42px;
height: 28px; height: 42px;
}
.partner-item {
font-size: 0.75rem;
gap: 0.4rem;
} }
} }
/* ---- Blog Section ---- */ /* ---- Blog Section ---- */