GoIT Markup Homework #5

Welcome to my fifth homework project for the GoIT Full Stack Course! 🎨

Overview: This project builds upon the "Web Studio" website by adding form elements and modal window functionality based on the homework #5 mockups. It also focuses on proper semantic HTML, optimized images, and responsive design using modern CSS techniques.

Getting Started:

1. Clone the repository: git clone https://github.com/roman-shugol/goit-markup-hw-05.git

2. Open index.html in your browser.

Project Structure

• index.html: Main HTML file containing the updated page structure.
• css/styles.css: Stylesheet with custom CSS using Flexbox for layout, along with responsive design techniques.
• images/: Directory containing optimized images and SVG sprite (icons.svg).
• modern-normalize.css: Normalize stylesheet for cross-browser consistency.

Key Features:

1. Modal Window: Implemented modal window with a backdrop and centered content. The window includes a close button, styled to be in the top-right corner with padding and circular design.
2. SVG Icons: All vector icons are stored in an optimized SVG sprite (icons.svg) for better performance.
3. Form Elements: Integrated multiple forms, including a subscription form in the footer and a contact form inside the modal window, with semantic HTML and proper name attributes.
4. Checkbox Styling: Custom checkbox for accepting terms and conditions using an SVG checkmark.
5. Responsive Layout: Ensures the layout adapts to different screen sizes using Flexbox and media queries.
6. Hover and Focus Effects: Hover and focus effects applied to form elements, including color changes for inputs and icons when focused, as seen in the mockup.
7. Optimized Images: All images, including icons, are optimized for faster loading and better performance.
8. Semantic HTML: The code adheres to semantic HTML practices for better accessibility and SEO.

Live Preview: You can view the live version of this project through GitHub Pages.