This project is a product landing page created as a certification requirement for the Responsive Web Design course from freeCodeCamp. The page showcases a market product and stick to the functional requirements of the freeCodeCamp Product Landing Page while allowing for personal design choices and subject selection.

Important

This project is part of the freeCodeCamp Responsive Web Design course. While freeCodeCamp provides guidelines and user stories for certification projects, it does not offer tutorials or step-by-step guides for development. This project was built entirely from scratch using my own approach to meet the requirements.

Screenshot

📝 Project Objective

The objective of this project was to create a product landing page similar to this example. I chose to focus on a landing page for the Final Fantasy XVI game, which allowed me to explore and implement various HTML and CSS techniques. This project was particularly challenging and fun due to the complexity of the Final Fantasy XVI website's layouts. It involved creating a visually engaging and functional landing page that highlights the game's features while incorporating responsive design elements and advanced CSS techniques.

🔧 Features

• Header: Contains an id="header" and an image with id="header-img", ideal for showcasing a logo.

• Navigation: Includes a nav element with id="nav-bar" and four clickable elements with the class nav-link, allowing smooth navigation to different sections of the landing page.

• Product Video: Embedded video with id="video" to showcase the product. The video uses HTML5 <video> tags with attributes like loop and autoplay to continuously play in the hero section, enhancing user engagement.

• Form: A form element with id="form" for user email submission, including an input field with id="email" for email addresses and a submit button with id="submit". The email field features HTML5 validation.

• Responsive Design: The navbar remains at the top of the viewport and the page includes two media queries to support three different viewports.

• CSS Flexbox: Utilized to create a responsive and flexible layout.

• CSS Grid: Applied CSS Grid for organizing and positioning some page content.

📖 Learnings

• CSS Variables: Applied CSS variables to manage and reuse design values efficiently.

• CSS Grid: Gained experience in using CSS Grid to create complex and responsive layouts.

• Flexbox: Enhanced skills in using Flexbox for building a responsive navigation bar and layout components.

• Responsive Design: Improved techniques in creating responsive designs that adapt to different screen sizes.

💻 Technologies Used

• HTML5 for structuring the page and implementing form elements.

• CSS3 for styling, including Flexbox and Grid for layout design.

💡 Acknowledgments

• freeCodeCamp: For providing the guidelines and user stories for this project.

• Final Fantasy XVI Official Site: The project was inspired by the complex and visually rich layouts of the Final Fantasy XVI website, which made this project both challenging and enjoyable.