Skip to content

Latest commit

 

History

History
 
 

project-htmlcss-i1-display-positioning

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
README.md
README.md
 
 
joshua.html
joshua.html
 
 

README.md

Project HTMLCSS I1 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

  1. Create a html file with your name like john.html
  2. Add current code to that file:
<!DOCTYPE html>
<style>
  /* your css code here */
</style>
<html>
  <body>
    <!-- your html code here -->
  </body>
</html>

  1. Create a div and set class to header

  2. For next 4 divs set their width and height to 200px and 150px respectively in their classes.

  3. Create a div inside header and set class to static-child. Set this class style background color blue.

  4. 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.

  5. 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.

  6. 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.

  7. Send absolute-child behind of static-child and strong-child divs. Note: use z-index.

  8. Create another div next to header and set class to content

  9. 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.

  1. Create another div next to content and set class to footer.

  2. 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
  1. 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/