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.
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.
- 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.
- File Name:
grid-template-method-two.html
- Description: This layout showcases the flexibility of CSS Grid with
grid-column
andgrid-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.
- 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.
-
Clone the Repository: Clone this repository to your local machine using the following command:
https://github.com/Muhammadqasim1011/Grid-Assignment-SMIT.git
-
Navigate to the Directory: Navigate to the cloned directory on your local machine:
cd smit-web-layouts
-
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.
- 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.
This assignment was completed by MuhammadQasim. If you have any questions or feedback, feel free to reach out!
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.