├── logos ├── 3m.svg ├── forbes.svg ├── buzzfeed.svg ├── menshealth.svg ├── macys.svg ├── barstool-store.svg ├── budweiser.svg └── mrbeast.svg ├── index.html └── style.css /logos/3m.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Coding with Robby 8 | 9 | 10 | 11 |
12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 |
23 | 24 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | background: #f2f2f2; 9 | } 10 | 11 | @keyframes slide { 12 | from { 13 | transform: translateX(0); 14 | } 15 | to { 16 | transform: translateX(-100%); 17 | } 18 | } 19 | 20 | .logos { 21 | overflow: hidden; 22 | padding: 60px 0; 23 | background: white; 24 | white-space: nowrap; 25 | position: relative; 26 | } 27 | 28 | .logos:before, 29 | .logos:after { 30 | position: absolute; 31 | top: 0; 32 | width: 250px; 33 | height: 100%; 34 | content: ""; 35 | z-index: 2; 36 | } 37 | 38 | .logos:before { 39 | left: 0; 40 | background: linear-gradient(to left, rgba(255, 255, 255, 0), white); 41 | } 42 | 43 | .logos:after { 44 | right: 0; 45 | background: linear-gradient(to right, rgba(255, 255, 255, 0), white); 46 | } 47 | 48 | .logos:hover .logos-slide { 49 | animation-play-state: paused; 50 | } 51 | 52 | .logos-slide { 53 | display: inline-block; 54 | animation: 35s slide infinite linear; 55 | } 56 | 57 | .logos-slide img { 58 | height: 50px; 59 | margin: 0 40px; 60 | } 61 | -------------------------------------------------------------------------------- /logos/forbes.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /logos/buzzfeed.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /logos/menshealth.svg: -------------------------------------------------------------------------------- 1 | > -------------------------------------------------------------------------------- /logos/macys.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /logos/barstool-store.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /logos/budweiser.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /logos/mrbeast.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | --------------------------------------------------------------------------------