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:
👉 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)
NICE!
Thank you bro!
Sad it's not responsive, the header and the opened image don't fit on my screen 😓
Yah you're right 💀
I focused on the phone responsive, so I forgot small screen :(
hmm
Weird, when I use the minimum size of screen for a computer it looks to work. Let me try again
Don't hesitate to give me feedback!
Nice one! I think you mentioned CSS Art instead of Glam up my Markup in your post 😄
oh is it big deal? I'm kinda afraid i'll lose all my stats if i repost something :(
You can edit lol
Oh yea lol
Guys, I'm on an alt I just created at school, don't worry for the responsive it'll be fixed soon :)
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!