This project was developed to create a responsive business website for BlueWave Scuba, featuring a full-width header video and a sign-up form with various inputs. The site was supposed to adapt seamlessly across devices with screen widths ranging from 320px to 1600px.
The main challenges were:
- Integrating a full-width video in the header that remains fixed and scales properly across different screen sizes.
- Building a responsive sign-up form that adapts to various device widths, from small mobile screens to large desktops.
To address the first challenge, I used a video element within the header and applied CSS properties such as object-fit: cover and position: sticky to ensure the video maintained its size and stayed fixed in the header.
For the second challenge, I employed a combination of flexible layout techniques and media queries to ensure the form's responsiveness. I started by building the form with a mobile-first approach, then added media queries to adjust the layout and styling for larger screens.
Tools and Technologies Used Google Fonts: To enhance the typography. Responsive Design: Utilizing media queries for a seamless experience across devices.
If I had more time, I would:
- Add a navigation bar and a logo to improve site structure and branding.
- Include additional information about what BlueWave Scuba offers to provide visitors with a clear understanding of the site's purpose.
- Add additional form validation.
- Incorporate animations to enhance user interaction.
Deployed project: https://bluewavescuba.netlify.app