Project CSS D1 CSS Display and Positioning
To code this project you need to know:
Flow of HTML , Position , Position: Relative , Position: Absolute , Position: Fixed , Z-Index , Inline Display , Block Display , Inline-Block Display , Float , Clear
If you are not familiar with them please download Learn CSS eBook from (https://codingwithbasir.com/learn-css)
Project Title: Puzzle
- Create a html file with your name like
- Add current code to that file:
<!DOCTYPE html> <style> /* your css code here */ </style> <html> <body> <!-- your html code here --> </body> </html>
Create a div and set class to header
For next 4 divs set their width and height to 200px and 150px respectively in their classes.
Create a div inside header and set class to static-child. Set this class style background color blue.
Create a div next to static-child and set class to relative-child. Set this class style position to relative, background color red and left 400.
Create a div next to relative-child and set class to absolute-child. Set this class style position to absolute, background color to green, top 50px, left 150px.
Create a div next to absolute-child and set class to fixed-child. Set this class style position to fixed, background color to yellow, top 100px, left 250px.
Send absolute-child behind of static-child and strong-child divs. Note: use z-index.
Create another div next to header and set class to content
Inside content div create 3 divs as inline-block with these classes:
- block1, set backgroudn color orange.
- block2, set backgroudn color to yellow.
- block3, set backgroudn color to blue.
- For all above classes, set their padding to 10px and width and height to 100px.
Create another div next to content and set class to footer.
Inside footer div create 3 divs with these classes:
- footer1, set width 100px and height 200px and backgroudn color red
- footer2, set float right and width 100px and height 200px and backgroudn color green
- footer3, set clear to right and width 100px and height 200px and backgroudn color blue
- Content of divs should be name of their classes. Also set text align of div to center.
How to deliver this project
Check this link: https://codingwithbasir.com/how-to-deliver-projects/