diff --git a/app/style/landing.css b/app/style/landing.css index c251a03..2c01038 100644 --- a/app/style/landing.css +++ b/app/style/landing.css @@ -1,5 +1,5 @@ @import url('https://fonts.googleapis.com/css2?family=Gabarito:wght@400..900&display=swap'); - +/*could be optimizied*/ :root { --ecogreen: #1F3A26; --eggshell: #FFF8F3; @@ -96,7 +96,7 @@ body{ .header_a--github { display: flex; align-items: center; - opacity: 0.85; + opacity: .85; } .header_a--github svg{ @@ -108,7 +108,7 @@ body{ display: inline-block; align-items: center; gap: 8px; - opacity: 0.85; + opacity: .85; } .header_a--linkedin svg{ @@ -262,6 +262,38 @@ button:active { border-radius: 40px; } +.textwithbackground { + display: inline-block; + padding: 2px 15px; + border-radius: 20px; + transition: all 0.5s ease-in-out; + background-size: cover; + background-position: center; + color: var(--ecogreen); + position: relative; + z-index: 1; + min-width: 120px; + text-align: center; +} + +.textwithbackground.has-bg{ + color: var(--eggshell); +} + +.textwithbackground.has-bg::before { + content: ''; + position: absolute; + inset: 0; + background: rgba(0, 0, 0, 0.2); + border-radius: 20px; + z-index: -1; +} + +.fade-out { + opacity: 0; + transform: translateY(10px); +} + @media only screen and (max-width: 1250px){ .image { width: 0; diff --git a/app/view/landing.php b/app/view/landing.php index a3ea44d..0b871cd 100644 --- a/app/view/landing.php +++ b/app/view/landing.php @@ -1,7 +1,5 @@ - - Tidy Together @@ -11,92 +9,115 @@ -
-
-

- - TidyTogether -

+
+
+

+ + TidyTogether +

-
+ + + +
-
-
-

- Caring for - your city
- Uniting the community -

+
+
+

+ Caring for + your city
+ Uniting the community +

-
-
-

A web application that helps you find recycling spots

-

and streamlines collaboration between citizens and official waste managers.

+
+
+

A web application that helps you find recycling spots

+

and streamlines collaboration between citizens and official waste managers.

+
+
+ + +
-
- - -
-
+
+
-
-
-
- CITY+GREEN -
- - - +
+ CITY+GREEN +
\ No newline at end of file + //this is for the slideshow (not optimized but works) + let currentIndex = 0; + const citySlot = document.getElementById('cityslideshow'); + const cities = [ + { name: "Iași", img: "https://images.unsplash.com/photo-1699359104149-8a959a1c348c?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"}, + { name: "Cluj", img: "https://images.unsplash.com/photo-1583751636643-94790958040a?q=80&w=1182&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"}, + { name: "Bucharest", img: "https://images.unsplash.com/photo-1574616979112-f9f52d3747f8?q=80&w=687&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"}, + { name: "Timișoara", img: "https://images.unsplash.com/photo-1687696162729-a75f9ddc004d?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"}, + { name: "Galați", img: "https://images.unsplash.com/photo-1664912879009-fcf1fb932009?q=80&w=1032&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"} + ]; + + function updateCity() { + citySlot.classList.add('fade-out'); + setTimeout(() => { + currentIndex = (currentIndex + 1) % cities.length; + const city = cities[currentIndex]; + citySlot.textContent = city.name; + if (city.img) { + citySlot.style.backgroundImage = `url('${city.img}')`; + citySlot.classList.add('has-bg'); + } else { + citySlot.style.backgroundImage = 'none'; + citySlot.classList.remove('has-bg'); + } + citySlot.classList.remove('fade-out'); + }, 300); + } + setInterval(updateCity, 4000); + + + \ No newline at end of file