Landing Page: Building a product landing page by using HTML5 & CSS

🎗️ Badges

🚀 Overview

DC Aws is a group of professional pet experts coming from different fields in animal care sectors. Our community is a non-profit forum and we are proud to give needful information to pet owners 🐾.

For this project, I got the idea of making a pet sitter landing page when I had to take care of my friend's cats during their trip to Spain. And here again, I have another chance to optimize my knowledge in using HyperText Markup Language and Cascading Style Sheets languages to code.

🔑 Key Topic

The following content will be covered in this README.md:

1. Learning Objectives
2. Requirements
3. Installation & Usage
4. Author
5. References & Helpful Links
6. Contributing
7. License

🧑‍💻 Learning Objectives

After fulfilling the project, I acquire knowledge to:

• Build and style static webpages with semantic HTML and CSS
• Implement best practices and standards when structuring HTML files using nested elements, indentation, comments, and line breaks
• Implement the use of adding Images & Links into HTML, using <ul>, <ol>, so ontags to present the content of the project
• Implement CSS styling via class, id and element selectors using external stylesheets and inline styles and box model for HTML elements
• Implement Bootstrap styling, Mailchimp, Google font, Font Awesome, CSS breakpoints and Navigation with Responsive web design theory
• Use Git workflow to initialize projects, track changes, and host via remote server
• Execute live deployment using GitHub Pages

📋 Requirements

Build an app that is functionally similar to this

User Stories:

1. Your product landing page should have a header element with a corresponding id="header"
2. You can see an image within the header element with a corresponding id="header-img" (A logo would make a good image here)
3. Within the #header element, you can see a nav element with a corresponding id="nav-bar"
4. You can see at least three clickable elements inside the nav element, each with the class nav-link
5. When you click a .nav-link button in the nav element, you are taken to the corresponding section of the landing page
6. You can watch an embedded product video with id="video"
7. Your landing page has a form element with a corresponding id="form"
8. Within the form, there is an input field with id="email" where you can enter an email address
9. The #email input field should have placeholder text to let users know what the field is for
10. The #email input field uses HTML5 validation to confirm that the entered text is an email address
11. Within the form, there is a submit input with a corresponding id="submit"
12. When you click the #submit element, the email is submitted to a static page (use this mock URL: https://www.freecodecamp.com/email-submit)
13. The navbar should always be at the top of the viewport
14. Your product landing page should have at least one media query
15. Your product landing page should utilize CSS flexbox at least once

⚡ Installation & Usage

1. Cloning the project & render on your local browser

• The respository can be cloned as other github repository
• Then drag the index.html to your local browser

2. Using the live code

• Open your webbrowser
• Then add this link to your internet browser

👥 Author & Credit

Author:

• Nio Phan

Credit:

• (Heart Beating) element credited by Dimitris Kiriakakis

💡 References & Helpful Links

• Version Control
• HTML
• CSS
• Bootstrap
• Google Fonts
• Font Awesome
• Mailchimp
• Pro Git
• Reference Project
• Pictures

💭 Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to follow Common Guidlines as appropriate.

📝 License

MIT