1. Creating a Responsive Service Page with Bootstrap

Objective:

The aim of this assignment is to apply Bootstrap layout concepts to create a responsive webpage that outlines the services offered by a fictional company, "Tech Solutions." The page should be navigable, and informative, and maintain a professional appearance across various devices.

Problem Statement:

Tech Solutions is looking to improve its online presence with a sleek service page that outlines what it offers in a clear and engaging way. The page needs to be responsive, adhering to mobile-first design principles, and should be accessible on all devices without compromising on usability or design.

Task 1: Design the Services Section Use the grid system to design a services section that showcases at least three services offered by Tech Solutions. Each service should have an icon/image, a title, and a short description.

Expected Outcome: A well-structured services section with equally spaced service cards that stack vertically on smaller screens and display in a row on larger screens.

Task 2: About Section with Sidebar Design an 'About Us' section that includes a main content area and a sidebar. The main content should take up two-thirds of the width, while the sidebar occupies one-third.

Expected Outcome: An 'About Us' section that maintains a two-column layout on medium to large screens and collapses into a single column on smaller screens, ensuring readability and accessibility.

Task 3: Create a Contact Form End with a contact form that uses Bootstrap form components. The form should include fields for the user's name, email, a selection of the service they are interested in, and a message box.

Expected Outcome: A responsive contact form that is well aligned and aesthetically pleasing, with intuitive input fields that provide a seamless user experience across all devices.

Lesson 2: Assignment | Bootstrap Layout