DEV Community

Cover image for Frontend Challenge | Best Beaches in the World!
Hikolakita
Hikolakita Subscriber

Posted on • Updated on

Frontend Challenge | Best Beaches in the World!

This is a submission for Frontend Challenge v24.04.17, Glam Up My Markup : Beaches

🌴🏖️ Welcome to My June CSS Frontend Challenge Submission! 🌊🌅
Inspiration ✨

Inspiration 🤔

Today, I am highlighting a serene and visually appealing web page dedicated to showcasing the best beaches in the world. The design captures the tranquility and beauty of beach destinations, aiming to evoke a sense of wanderlust and relaxation. The warm colors and tropical imagery set the perfect mood for exploring dreamy beach getaways. 🌞🌴

Demo 🌐

Here's a preview of my submission:
Gif demo of the website

👉 You can view and interact with the full demo here.

👉 You can also preview the full code on this repository.

Journey 🚀

Creating this webpage was an exciting journey that allowed me to blend aesthetics with functionality. I focused on achieving a visually pleasing gradient background to simulate a sunset, complemented by palm tree silhouettes to enhance the tropical theme. 🌇🌴 The typography was chosen to be welcoming and easy to read, emphasizing the headline and call-to-action button.

What I Learned 📚

CSS Gradients: Crafting beautiful, smooth transitions that mimic natural light.
Layering Images with Transparency: Adding depth and dimension to the visuals.
Creating a Cohesive Color Scheme: Ensuring all elements harmonize to enhance the user experience.
I am particularly proud of how the background and text elements harmonize to create an inviting and immersive experience.

What's Next? 🔮

Responsive Design: Refining my skills to ensure the webpage looks great on all devices.
Animations: Experimenting with subtle movements to bring the design to life.
Thank you for taking the time to check out my project! I hope it inspired a bit of wanderlust in you. 🌍✨

"To travel is to take a journey into yourself." – Danny Kaye

Feel free to leave feedback or suggestions in the comments. Until next time, happy coding! 💻🌟

Edit : Well, I think it's responsive now :)
If it's not for you, just let me know what's your screen size and I'll fix it ;)

Top comments (12)

Collapse
 
programordie profile image
programORdie

NICE!

Collapse
 
hikolakita profile image
Hikolakita

Thank you bro!

Collapse
 
programordie profile image
programORdie

Sad it's not responsive, the header and the opened image don't fit on my screen 😓

Collapse
 
hikolakita profile image
Hikolakita

Yah you're right 💀
I focused on the phone responsive, so I forgot small screen :(

Collapse
 
hikolakita profile image
Hikolakita

hmm

Weird, when I use the minimum size of screen for a computer it looks to work. Let me try again

Collapse
 
hikolakita profile image
Hikolakita

Don't hesitate to give me feedback!

Collapse
 
dhrutisubham03 profile image
Dhrutisundar Sahoo

Nice one! I think you mentioned CSS Art instead of Glam up my Markup in your post 😄

Collapse
 
uhehfhiufzerore profile image
IDK

oh is it big deal? I'm kinda afraid i'll lose all my stats if i repost something :(

Collapse
 
dhrutisubham03 profile image
Dhrutisundar Sahoo

You can edit lol

Thread Thread
 
hikolakita profile image
Hikolakita

Oh yea lol

Collapse
 
uhehfhiufzerore profile image
IDK

Guys, I'm on an alt I just created at school, don't worry for the responsive it'll be fixed soon :)

Collapse
 
uhehfhiufzerore profile image
IDK

To the DEV team :

I'm sorry, I accidentaly posted this as the CSS Art challenge, but please rate it as Glam Up My Markup.

(Right now I'm on an alt).

Well thank you, have a good day!