All in One Navbar
This is an example of a web form with an all in one navigational bar, designed suing HTML, and CSS. The concept of Lists has been used with UL and LI components. UL element has been used with the child elements of LI to display the details in an orderly manner. Bootstrap style sheets including the fonts and images are imported to the form with their URLs. The body of the form is given a background color of #eeeeee. The navigational bar is given the styles of background as #fff, padding-left as 16px, padding-right as 16px, border-bottom as 1px solid #d6d6d6, and box-shadow as 0 0 4px rgba(0,0,0,.1). The profile image is given the styles of border-radius as 50% to make it circular shaped, width as36px, height as 36px, margin as -8px 0, float as left, and margin-right as 10px. The navigational bar brand name has the styles of color as #555, and font-family as 'Merienda One', sans-serif whereas the notifications and messages badges are given a background color of #f44336, font-size of 11px, and border-radius of 20px.