Skip to content

Latest commit

 

History

History
 
 

project-htmlcss-k1-flexbox

Folders and files

NameName
Last commit message
Last commit date

parent directory

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

README.md

Project HTMLCSS K1 Flexbox

Topics: How to use Flexbox , flex-direction , flex-wrap , flex-flow , justify-content , align-items , align-content , Flexbox Item Properties , order , flex-grow , flex-shrink , flex-basis , flex , align-self

Project Title: Profile Sidebar

  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 with class main. Set display to flex.

  2. Inside main div create 2 divs. Set first class to sidebar and second to content. sidebar width is 20% and content width is 80%.

  3. In sidebar create a div with class sidebar-conainer and set display to flex and flex-direction to column.

  4. Add 3 divs to sidebar-conainer as follow:

  5. Set first div class to brand, to take 10% of height. Set content Dashboard.

  6. Set second div class to menu, to take 80% of height. Set content to ul of items like menu1, menu 2, ... .

  7. Set third div class to profile, to take 10% of height. Set content Dashboard. Set the div content to Admin User.

  8. In the content create a div with class content-conainer.

  9. Create 3 divs for 3 users and set their class to list-item and set display: flex; for list-item.

  10. Inside each list-item create 2 divs. First list-item-image and second list-item-name.

  11. Keep list-item-image fixed and let list-item-name grow.

  12. Add img to list-item-images and set src to following images:

  1. Add h4 to list-item-names and set names to:
  • Linda Hart
  • Roger Medina
  • Dean Sullivan

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