Skip to content

Latest commit

 

History

History
 
 

project-htmlcss-h1-box-model

Folders and files

NameName
Last commit message
Last commit date

parent directory

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

README.md

Project HTMLCSS H1 Box Model

Topics: The Box Model , Height and Width , Borders , Border Radius , Padding , Margins , Auto , Margin Collapse , Minimum and Maximum Height and Width , Overflow , Resetting Defaults , Visibility

Project Title: Show Windows

  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 the class to container

  2. Style container class to have a border 10px solid green and set border-radius to 30px.

  3. Inside this div create another div and set the class to circle.

  4. Change cricle style to shap a blue circle with border-radius attribute.

  5. Add another div in the container and name the class to header.

  6. Enter some text into header and set style to have padding 10 and margin 10 and border 10px dotted red.

  7. Make another div next to header and name it content. Make it centered horizontally with 500px width.

  8. Enter some text into content and set border to 20px solid yellow.

  9. Change the default margin and padding for all element to 10px.

  10. Create an list of 3 items and set left marigns of item 1, item 2 and item 3 item to 10px, 20px and 30px respectively. Then, add the 4th item and hide it with visibility property.

  11. Add a div with footer class at the end of container div and set max-width to 700px. Set margin and padding to 20 px and border to 15px dashed orange.

Want to get reviewed?

Send Pull Request. Check how to deliver your code: https://codingwithbasir.com/how-to-deliver-projects/

Need help?

Download Free eBook https://codingwithbasir.com/download