Task no: 1

Task id # 1

Responsive Header

beginner level

Task goal

  • Learning media-query
  • Practicing flexbox
  • practicing position

Required skills:

htmlcssflexboxmedia-query

Design a responsive header with following structure:
Desktop mode (min width 600px)

  • A logo at left side
  • A navbar at middle including four menu items (Home,About,Contact,Blog)
  • A search bar and profile icon at right side

    • Mobile mode (max width 600px)
    • A logo at left side
    • A hamburger menu icon at right side
    • If hover or click on hamburger menu icon, a drawer from left side will open. It will cover 80% width of the viewport.
    • In that drawer, logo will be at middle top. then there will be the search bar. After that Menus will be at center and at bottom there will be the profile icon