Florentia

• 

  Our website homescreen

Inspiration

We were inspired by the extinction of certain scents. When a flower or ecosystem disappears, its fragrance vanishes forever. We wanted to create a space where those lost aromas could live again through our project.

What it does

Florentia is a CSS and HTML digital garden that memorializes scents humanity has lost, such as petrichor in cities or sandalwood forests. Each flower represents a vanished smell. Hovering reveals poetic text or fading color transitions that symbolize disappearance. An integrated AI Help Center lets users explore the science and history behind each scent.

How we built it

Florentia is built entirely with HTML and CSS. We used layered gradients, transitions, and keyframe animations to visualize diffusion and fading scent trails. The AI Help Center connects users to ai platforms for research, all styled to match the memorial’s calm and reflective tone.

Challenges we ran into

Creating immersive interactions and data visualization without JavaScript was difficult. We had to simulate interactivity purely with CSS selectors, pseudo-elements, and transitions while keeping performance smooth.

Accomplishments that we're proud of

We built an elegant and interactive experience using only CSS and HTML. Florentia combines art, ecology, and technology to turn the loss of scent into a digital memory. We are extremely proud of executing the program without the use of javascript. We had to adapt to new methods under CSS and HTML.

What we learned

We learned to push CSS beyond design and into storytelling. We also discovered how structure, rhythm, and light can communicate memory and emotion without complex code. We learned more HTML and what other use cases you can use it for.

What's next for Florentia

We plan to add endangered scents, real-time extinction data, and AI-generated scent visualizations. Our goal is to make Florentia a living archive of memory and environmental awareness. We also plan to integrate real API's so users can stay within the program, making the user experience superior.

Built With

• css
• html
• visual-studio-code