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

Project CSS G1 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>
  /* your css code here */
    <!-- your html code here -->
  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:

Need help?

Download Free eBook

You can’t perform that action at this time.