DEMO LINK

BANG & OLUFSEN Website Project

Project Description

This project is a web page mockup for Bang & Olufsen, a company specializing in premium audio and video equipment. The design showcases the main elements of a website, including a header, navigation menu, featured products section, product categories, information about the company, and a contact form.

Project Contents

• Homepage: Includes a hero section with a tagline, a navigation menu, and links to key sections of the website.

• Recommended Products Section: Displays a selection of featured products with images, descriptions, and prices.

• Categories Section: Offers product categories such as portable speakers, earphones, and smart home devices, with clickable images for each category.

• About Us Section: Highlights the history and mission of Bang & Olufsen, emphasizing their timeless design and innovative technology.

• Contact Us Section: Includes a contact form for user inquiries and displays company contact details like phone, email, and address.

Technologies Used

• HTML5: For creating the structure of the webpage.
• CSS3: For styling and layout.
• JavaScript: For adding interactivity and functionality (e.g., form submission behavior).
• Google Fonts: For custom typography using the Manrope font.
• Responsive Design: Ensures the layout adapts to different screen sizes and devices.

Features

1. Responsive Navigation Menu:

   • A mobile-friendly sidebar menu with links to the main sections.

2. Recommended Products:

   • Includes product descriptions, prices, and high-quality images.

3. Product Categories:

   • Interactive images for exploring different product categories.

4. Contact Form:

   • Simple form with fields for name, email, and message.
   • Form resets on submission for a seamless user experience.

5. Contact Details:

   • Provides phone number, email address, and a clickable address with a Google Maps link.

Future Enhancements

• Add dynamic content with a backend or CMS integration.
• Implement product filtering and sorting functionality.
• Enhance the user experience with animations and advanced interactivity.

Credits

• Design and Development: Vladyslav Bilinskiy
• Images and Fonts: Provided by Bang & Olufsen and Google Fonts.