65 lines
5.4 KiB
HTML
65 lines
5.4 KiB
HTML
{{- $speed := .Get "speed" | default "30s" -}}
|
|
{{- $gap := .Get "gap" | default "4rem" -}}
|
|
{{- $height := .Get "height" | default "80px" -}}
|
|
|
|
<div class="tech-banner-wrapper" style="overflow: hidden; width: 100%; position: relative; margin: 2rem 0;">
|
|
<!-- Gradient overlays for smooth fade effect -->
|
|
<div style="position: absolute; top: 0; left: 0; width: 150px; height: 100%; background: linear-gradient(to right, var(--color-bg), transparent); z-index: 2; pointer-events: none;"></div>
|
|
<div style="position: absolute; top: 0; right: 0; width: 150px; height: 100%; background: linear-gradient(to left, var(--color-bg), transparent); z-index: 2; pointer-events: none;"></div>
|
|
|
|
<!-- Scrolling container -->
|
|
<div class="tech-banner-scroll" style="display: flex; gap: {{ $gap }}; animation: scroll-left {{ $speed }} linear infinite; will-change: transform;">
|
|
<!-- First set of logos -->
|
|
<div style="display: flex; gap: {{ $gap }}; align-items: center; flex-shrink: 0;">
|
|
<img src="/images/tech-banner/arista-color.svg" alt="Arista" style="height: {{ $height }}; width: auto; filter: grayscale(100%); opacity: 0.7; transition: all 0.3s ease;" onmouseover="this.style.filter='grayscale(0%)'; this.style.opacity='1';" onmouseout="this.style.filter='grayscale(100%)'; this.style.opacity='0.7';" />
|
|
<img src="/images/tech-banner/aws-color.svg" alt="AWS" style="height: {{ $height }}; width: auto; filter: grayscale(100%); opacity: 0.7; transition: all 0.3s ease;" onmouseover="this.style.filter='grayscale(0%)'; this.style.opacity='1';" onmouseout="this.style.filter='grayscale(100%)'; this.style.opacity='0.7';" />
|
|
<img src="/images/tech-banner/containerlab-color.svg" alt="ContainerLab" style="height: {{ $height }}; width: auto; filter: grayscale(100%); opacity: 0.7; transition: all 0.3s ease;" onmouseover="this.style.filter='grayscale(0%)'; this.style.opacity='1';" onmouseout="this.style.filter='grayscale(100%)'; this.style.opacity='0.7';" />
|
|
<img src="/images/tech-banner/k8s-color.svg" alt="Kubernetes" style="height: {{ $height }}; width: auto; filter: grayscale(100%); opacity: 0.7; transition: all 0.3s ease;" onmouseover="this.style.filter='grayscale(0%)'; this.style.opacity='1';" onmouseout="this.style.filter='grayscale(100%)'; this.style.opacity='0.7';" />
|
|
<img src="/images/tech-banner/nokia-color.svg" alt="Nokia" style="height: {{ $height }}; width: auto; filter: grayscale(100%); opacity: 0.7; transition: all 0.3s ease;" onmouseover="this.style.filter='grayscale(0%)'; this.style.opacity='1';" onmouseout="this.style.filter='grayscale(100%)'; this.style.opacity='0.7';" />
|
|
<img src="/images/tech-banner/scaleway-color.svg" alt="Scaleway" style="height: {{ $height }}; width: auto; filter: grayscale(100%); opacity: 0.7; transition: all 0.3s ease;" onmouseover="this.style.filter='grayscale(0%)'; this.style.opacity='1';" onmouseout="this.style.filter='grayscale(100%)'; this.style.opacity='0.7';" />
|
|
</div>
|
|
<!-- Duplicate set for seamless loop -->
|
|
<div style="display: flex; gap: {{ $gap }}; align-items: center; flex-shrink: 0;">
|
|
<img src="/images/tech-banner/arista-color.svg" alt="Arista" style="height: {{ $height }}; width: auto; filter: grayscale(100%); opacity: 0.7; transition: all 0.3s ease;" onmouseover="this.style.filter='grayscale(0%)'; this.style.opacity='1';" onmouseout="this.style.filter='grayscale(100%)'; this.style.opacity='0.7';" />
|
|
<img src="/images/tech-banner/aws-color.svg" alt="AWS" style="height: {{ $height }}; width: auto; filter: grayscale(100%); opacity: 0.7; transition: all 0.3s ease;" onmouseover="this.style.filter='grayscale(0%)'; this.style.opacity='1';" onmouseout="this.style.filter='grayscale(100%)'; this.style.opacity='0.7';" />
|
|
<img src="/images/tech-banner/containerlab-color.svg" alt="ContainerLab" style="height: {{ $height }}; width: auto; filter: grayscale(100%); opacity: 0.7; transition: all 0.3s ease;" onmouseover="this.style.filter='grayscale(0%)'; this.style.opacity='1';" onmouseout="this.style.filter='grayscale(100%)'; this.style.opacity='0.7';" />
|
|
<img src="/images/tech-banner/k8s-color.svg" alt="Kubernetes" style="height: {{ $height }}; width: auto; filter: grayscale(100%); opacity: 0.7; transition: all 0.3s ease;" onmouseover="this.style.filter='grayscale(0%)'; this.style.opacity='1';" onmouseout="this.style.filter='grayscale(100%)'; this.style.opacity='0.7';" />
|
|
<img src="/images/tech-banner/nokia-color.svg" alt="Nokia" style="height: {{ $height }}; width: auto; filter: grayscale(100%); opacity: 0.7; transition: all 0.3s ease;" onmouseover="this.style.filter='grayscale(0%)'; this.style.opacity='1';" onmouseout="this.style.filter='grayscale(100%)'; this.style.opacity='0.7';" />
|
|
<img src="/images/tech-banner/scaleway-color.svg" alt="Scaleway" style="height: {{ $height }}; width: auto; filter: grayscale(100%); opacity: 0.7; transition: all 0.3s ease;" onmouseover="this.style.filter='grayscale(0%)'; this.style.opacity='1';" onmouseout="this.style.filter='grayscale(100%)'; this.style.opacity='0.7';" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
:root {
|
|
--color-bg: #ffffff;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--color-bg: #111111;
|
|
}
|
|
}
|
|
|
|
[data-theme="dark"] {
|
|
--color-bg: #111111;
|
|
}
|
|
|
|
[data-theme="light"] {
|
|
--color-bg: #ffffff;
|
|
}
|
|
|
|
@keyframes scroll-left {
|
|
0% {
|
|
transform: translateX(0);
|
|
}
|
|
100% {
|
|
transform: translateX(-50%);
|
|
}
|
|
}
|
|
|
|
.tech-banner-scroll:hover {
|
|
animation-play-state: paused;
|
|
}
|
|
</style>
|