diff --git a/index.html b/index.html index 735a1470..87a0a014 100644 --- a/index.html +++ b/index.html @@ -17,6 +17,7 @@ crossorigin="anonymous" referrerpolicy="no-referrer" /> + @@ -30,6 +31,7 @@ + + + + diff --git a/index.js b/index.js index 51837926..6eb90385 100644 --- a/index.js +++ b/index.js @@ -133,3 +133,7 @@ document.getElementById('emailInput').addEventListener('focus', function() { document.getElementById('emailInput').addEventListener('blur', function() { document.getElementById('send').classList.remove('focused'); }); + + + + diff --git a/styles.css b/styles.css index 5e717725..58ef9d1e 100644 --- a/styles.css +++ b/styles.css @@ -1806,7 +1806,7 @@ body { .testimonials { /* z-index: 100; */ background-color: var(--secondary-color); - max-width: var(--max-width); + /* max-width: var(--max-width); */ padding: 5rem 5rem; margin-top: -3rem; } @@ -1818,12 +1818,36 @@ body { font-weight: 600; } +.marquee { + position: relative; + width: 100vw; + max-width: 100%; + height: 500px; + overflow-x: hidden; + display: inline-block; +} + +.track { + position: absolute; + /* white-space: nowrap; + will-change: transform; */ + animation: marquee 32s linear infinite; +} + +@keyframes marquee { + from { transform: translateX(0); } + to { transform: translateX(-50%); } +} + + .testimonial-container { display: flex; - justify-content: center; - align-items: center; - flex-wrap: wrap; gap: 50px; + padding: 20px; +} + +.testimonial-container::-webkit-scrollbar{ + display: none; } .testimonial-user { @@ -1860,6 +1884,9 @@ body { box-shadow: 0 0 0 10px var(--testimonials-img-border); } + + + .fa-quote-left, .fa-quote-right { font-size: 16px;