Skip to content
Branch: master
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
README.md
joshua.html

README.md

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

  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/

You can’t perform that action at this time.