SMIT Assignment: Web Layouts with HTML & CSS

Welcome to the SMIT assignment repository for web layouts using HTML and CSS. This repository contains several web layout examples, each showcasing different techniques and approaches to create visually appealing and responsive web designs.

Overview

In this assignment, we explore various layout techniques, including CSS Grid and Flexbox, to create modern and flexible web layouts. Each layout is accompanied by detailed HTML and CSS code, providing insights into the structure, styling, and responsiveness of the design.

Layouts Included

1. Grid Template Method One Using Grid Area

• File Name: grid-template-method-one.html
• Description: This layout demonstrates the power of CSS Grid by utilizing the grid-template-areas property to define a complex grid layout with named areas. Each grid area corresponds to a specific section of the layout, allowing for easy organization and styling of content.

2. Grid Template Method Two Using Grid Column and Row Span

• File Name: grid-template-method-two.html
• Description: This layout showcases the flexibility of CSS Grid with grid-column and grid-row spans. By spanning multiple columns and rows, specific grid items can be sized and positioned dynamically within the grid, resulting in a more fluid and adaptive layout.

3. Photo Animated Grid

• HTML File: photo-animated-grid.html
• CSS Files: Photo-Animated-grid.css, base.css
• Description: This layout presents an animated photo grid using CSS Grid and CSS animations. Each photo card enters the grid with a staggered animation effect on page load, creating an engaging and visually appealing presentation of images.

Usage Instructions

1. Clone the Repository: Clone this repository to your local machine using the following command:

   https://github.com/Muhammadqasim1011/Grid-Assignment-SMIT.git

2. Navigate to the Directory: Navigate to the cloned directory on your local machine:

   cd smit-web-layouts

3. View the Layouts: Open the HTML files in your preferred web browser to view the layouts. Explore the code and experiment with different modifications to understand how each layout is constructed.

Additional Resources

• CSS Grid Layout: Learn more about CSS Grid and its powerful layout capabilities.
• Flexbox: Explore Flexbox, another flexible layout model that offers more control over alignment and distribution of items.

Author

This assignment was completed by MuhammadQasim. If you have any questions or feedback, feel free to reach out!

Acknowledgements

Special thanks to SMIT for providing the assignment guidelines and resources. The layouts were created based on the concepts learned during the course, with additional experimentation and customization to enhance the learning experience.