DEV Community

Cover image for Glam Up My Markup: Beaches - My Submission
Harshita Sharma D
Harshita Sharma D

Posted on

3

Glam Up My Markup: Beaches - My Submission

This is a submission for Frontend Challenge v24.04.17, CSS Art: June.

Inspiration 🌊🏄‍♀️🏄‍♂️

I was inspired by the idea of creating a serene beach scene using just HTML and CSS. I wanted to challenge myself to create a visually appealing design without manipulating the HTML structure, relying solely on CSS for styling. I drew inspiration from the brutalist design movement, known for its raw, unrefined aesthetic and bold use of typography and color.

Demo 🩴🌴

Here is the Demo of the site.

Journey 🌊🏄‍♀️🏄‍♂️⛱️🏖️🩴🌴

During this project, I learned how to use CSS to create complex and realistic visual effects, such as the sky, sea, sand, and palm tree. I also honed my skills in CSS positioning and animation to bring the scene to life. One of the challenges I faced was achieving the right balance of elements to create a cohesive and realistic beach environment.

I'm particularly proud of how I was able to use CSS to create the illusion of depth and movement in the scene, such as the gentle sway of the palm tree leaves and the foamy waves lapping at the shore.

Next, I hope to further refine my CSS skills and explore more advanced techniques to create even more intricate and lifelike scenes using only HTML and CSS.

In this project, I learned how to create complex layouts and animations using just HTML and CSS. I experimented with different techniques to achieve the brutalist look, such as asymmetrical layouts, vibrant colors, and unconventional typography.

I'm particularly proud of the final result, as it showcases my ability to think creatively and push the boundaries of traditional web design. Moving forward, I hope to further refine my skills in CSS and explore more advanced animation techniques with GSAP.

Do tell me how you liked the Beach Animation. Open for feedbacks and constructive criticism.
.

GIF relax on the beach

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay