Elgato_dark/fleet
1
0
Fork 0
mirror of https://github.com/fleetdm/fleet synced 2026-05-24 09:28:54 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 60

Website: Update logo carousel animation (#17820)

Browse source 
Closes: #17823

Changes:
- Updated the animation of the logo carousel on the homepage.
This commit is contained in:
Eric 2024-03-23 11:56:27 -05:00 committed by GitHub
parent 776ea4d7fd
commit 6145877c49
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 32 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
website/assets/styles/pages/homepage.less vendored
View file

@ -82,7 +82,8 @@
position: relative;
width: 100%;
overflow: hidden;
div {
[purpose='logo-row'] {
white-space: nowrap;
animation: scroll-horizontal 80s linear infinite;
}
@ -110,7 +111,14 @@
background: linear-gradient(90deg, rgba(255, 255, 255, 0.00) 0%, #FFF 100%);
}
}
@keyframes scroll-horizontal {
0% {
transform: translateX(-25%);
}
100% {
transform: translateX(-125%);
}
}
[purpose='homepage-content'] {
max-width: 1200px;
@ -1428,13 +1436,6 @@
}
@keyframes scroll-horizontal {
0% {
transform: translateX(50%);
}
100% {
transform: translateX(-50%);
}
}
}

23
website/views/pages/homepage.ejs vendored
View file

@ -22,7 +22,7 @@
<div purpose="hero-logos" class="mx-auto d-flex flex-row align-items-center justify-content-center">
<div purpose="logo-carousel">
<div class="d-flex flex-row align-items-center">
<div purpose="logo-row" class="d-flex flex-row align-items-center">
<img alt="Notion logo" src="/images/logo-notion-68x32@2x.png">
<img alt="Pinterest logo" src="/images/logo-pinterest-98x32@2x.png">
<img alt="Gusto logo" src="/images/logo-gusto-64x32@2x.png">
@ -41,7 +41,26 @@
<img alt="Reddit logo" src="/images/logo-reddit-80x32@2x.png">
</div>
<div class="d-flex flex-row align-items-center">
<div purpose="logo-row" class="d-flex flex-row align-items-center">
<img alt="Notion logo" src="/images/logo-notion-68x32@2x.png">
<img alt="Pinterest logo" src="/images/logo-pinterest-98x32@2x.png">
<img alt="Gusto logo" src="/images/logo-gusto-64x32@2x.png">
<img alt="Epic Games logo" style="height: 32px" src="/images/logo-epic-games-28x32@2x.png">
<img alt="Rivian logo" src="/images/logo-rivian-120x32@2x.png">
<img alt="Deloitte logo" src="/images/logo-deloitte-97x32@2x.png">
<img alt="Flywire logo" src="/images/logo-flywire-69x32@2x.png">
<img alt="Snowflake logo" src="/images/logo-snowflake-101x32@2x.png">
<img alt="Uber logo" src="/images/logo-uber-65x32@2x.png">
<img alt="Atlassian logo" src="/images/logo-atlassian-140x32@2x.png">
<img alt="Toast logo" src="/images/logo-toast-91x32@2x.png">
<img alt="Fastly logo" src="/images/logo-fastly-60x32@2x.png">
<img alt="Hashicorp logo" src="/images/logo-hashicorp-103x32@2x.png">
<img alt="Dropbox logo" src="/images/logo-dropbox-122x32@2x.png">
<img alt="Reddit logo" src="/images/logo-reddit-80x32@2x.png">
</div>
<div purpose="logo-row" class="d-flex flex-row align-items-center">
<img alt="Notion logo" src="/images/logo-notion-68x32@2x.png">
<img alt="Pinterest logo" src="/images/logo-pinterest-98x32@2x.png">
<img alt="Gusto logo" src="/images/logo-gusto-64x32@2x.png">