# Activity 26 CSS Flex # Instruction: * Apply CSS Flexbox on 5 pages (e.g., product layout, employee cards, student profiles, etc.) * Name your repository CSS\_FLEX * Add documentation in the [README.md](http://README.md) file of your repository * Submit the GitHub repository link * Deadline: December 5 2024 ## Overview This Activity demonstrates responsive layouts using CSS Flexbox. Each page showcases a different layout type, including product layouts, employee cards, and more. ## Pages and Layouts 1. **Product Layout**: Displays products in a responsive grid. 2. **Employee Cards**: Shows employee profiles in a card format. 3. **Student Profiles**: Lists student profiles with images. 4. **Gallery**: A flexible, responsive image gallery. 5. **Services Section**: Highlights different services. ## How to Use Flexbox Each page uses Flexbox for layout. Here are the primary Flexbox properties used: * `display: flex;` - Defines a flex container. * `flex-wrap: wrap;` - Allows items to wrap onto new rows. * `justify-content` - Aligns items horizontally within the container. To view the project: 1. Clone the repository: `git clone` [`https://github.com/your-username/CSS_FLEX.git`](https://github.com/your-username/CSS_FLEX.git) 2. Open `index.html` in your browser. index.html ```xml Responsive Flexbox Layout

Product Layout

Product 1

Product 1

White Mustang 5.0

Product 2

Product 2

Shining purple Mustang 5.0

Product 3

Product 3

blue Mustang 5.0

Employee Cards

Employee 1

John

Position: Developer

Employee 2

Isaac

Position: Designer

Employee 3

Zaack

Position: Manager

Student Profiles

Student 1

Jane Smith

Course: Computer Science

Student 2

Mike Johnson

Course: Business

Student 3

Sarah Lee

Course: Engineering

Gallery

Gallery Image 1
Gallery Image 2
Gallery Image 3

Our Services

Service 1

Gallery Image 2

Service 2

Gallery Image 2

Service 3

Gallery Image 2
``` styles.css ```css * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: Arial, sans-serif; line-height: 1.6; padding: 20px; background-color: #f9f9f9; } h2 { margin-bottom: 20px; font-size: 1.8em; text-align: center; color: #333; } .section { margin-bottom: 40px; } .container { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; } .card { background-color: #fff; padding: 16px; border: 1px solid #ddd; border-radius: 8px; flex: 1 1 calc(100% - 16px); max-width: 100%; text-align: center; } .card img { width: 100%; height: auto; border-radius: 8px; } .card h3 { font-size: 1.2em; margin-top: 8px; } .card p { font-size: 0.9em; margin: 8px 0; } .card button { padding: 8px 16px; margin-top: 8px; background-color: #007bff; color: #fff; border: none; border-radius: 4px; cursor: pointer; } .card button:hover { background-color: #0056b3; } /* Responsive styles */ @media (min-width: 600px) { .card { flex: 1 1 calc(50% - 16px); } } @media (min-width: 900px) { .card { flex: 1 1 calc(33.333% - 16px); } } ``` OUTPUT: %[https://www.youtube.com/watch?v=dW1fMrY-2w8] GitHub Repository: [isaaczacck/activity26](https://github.com/isaaczacck/activity26?tab=readme-ov-file)