DEV Community

Cover image for Glam Up My Markup: Camp Activities
Eduard Constantin
Eduard Constantin

Posted on

Glam Up My Markup: Camp Activities

This is a submission for DEV Challenge v24.03.20, Glam Up My Markup: Camp Activities

What I Built

I built a web form that has a Camp Activities theme, aiming to enhance the markup and styling for a visually appealing experience. Here are the key features:

  • Background Image: I incorporated a custom background image that seamlessly blends with the camp theme. The AI-generated background adds an adventurous vibe to the page, setting the tone for camp-related content.
  • Custom Dropdown: To improve user interaction, I designed a custom dropdown menu. The dropdown enhances both functionality and aesthetics.
  • Font Style: I found that Bubblegum Sans perfectly aligns with the camp atmosphere. Its bouncy, cheerful style adds a sense of adventure and excitement to the form content.

Demo

Journey

During this challenge, I delved into CSS and JS techniques and learned how to:

  • Blend Backgrounds: The background image was carefully chosen to evoke the spirit of camping.
  • Style Custom Dropdowns: Customizing the dropdown menu involved tweaking colors, fonts and animations using both JS and CSS.
  • Validate Form Inputs: I also used JS to validate user's inputs, ensuring accurate and complete form submissions.

MIT License

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