• Beautiful Code
  • Posts
  • 🧞‍♀️ Virtual Tours and Imaginary Worlds – Beautiful Code #4

🧞‍♀️ Virtual Tours and Imaginary Worlds – Beautiful Code #4

This week, I’m bringing you some experiential websites where the user experience is the key focus of each site. It’s amazing how we can do more and more spectacular things through a browser.

Author

Marc Taulé
October 3rd, 2024

Hey everyone! It’s Marc 👋

Welcome to my weekly newsletter.

This week, I’m bringing you some experiential websites where the user experience is the key focus of each site. It’s amazing how we can do more and more spectacular things through a browser.

I’ve also selected resources and tools that I use in my side project, Supasnap, such as Resend and DaisyUI. These are freemium tools that you can use with certain limitations, but they help optimize project execution time significantly.

I hope you find them as useful as I do.
Let’s get started! 👇

😍 Websites

🔨 Tools

A simple, elegant interface so you can start sending emails in minutes. It fits right into your code with SDKs for your favorite programming languages.

Haikei is a web app to generate stunning visual content – ready to use with your design tools and workflow.

LottieFiles is a platform for creating, editing, and sharing Lottie animations, which are lightweight, scalable animations based on JSON.

🧰 Resources

DaisyUI is a component library for Tailwind. This library adds component class names to Tailwind CSS so you can make beautiful websites faster than ever.

Statamic is a modern, clean, and highly adaptable CMS built on Laravel that can run full-stack, headless, on flat files or databases, or as a static site generator.

Avatars is a collection of diverse free avatar images from across the web, designed to add personality to your projects. With a vast selection of vibrant illustrations, you can enhance your projects in seconds.

🤖 Code and snippets

Here you will find code snippets from CodePen that you can use in your projects and adapt to your needs.

Hover animations for buttons, made with CSS using box-shadow and background gradients.
Author: Yuhomyan

2. Toggles

A list of various toggles made using only CSS, with a checkbox and label..
Author: Olivia Ng

Simple star rating made with CSS using an <input type="radio" />.
Author: Nanou

😂 Humor

Final solution when pushing doesn't work.

.

I hope you enjoy it, and if you like it and want to support me, you can:

  • You can support me by buying me a coffee ☕️

  • Forward it to a friend and invite them to subscribe

  • Share it on your social networks

Or if you just want to say hello, reply to this email or write me on Twitter/X and let's talk!

That's all for today. I hope you enjoyed the content, and see you next week! 👋

Cheers!
Marc