Close

Header with navbar

This is an example of a stylish web page header with a navbar and hover effects, designed using CSS, HTML, and Bootstrap framework 4. The product image and font are imported to the code with its URL. 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 child elements of the navbar, in an orderly manner. The form is given a background color of #cecece. The navbar is given a font color as #fff and a border-bottom style of 1px solid #fff, to be active on hover. The Sports Shoes' text is given a font-color of #83ff00, which changes to #fff, on hover. The left side of the form is given a linear gradient background color of (to bottom, #ce0000, #7A0800 70%). The right side header is displayed using the styles of font-family as 'Allerta Stencil', sans-serif, font-size as 2.4em, and text-align as center. The 'Order' button is given the styles of border as 2px solid #83ff00, font color as #83ff00, border-radius as 30%, and transition as 0.7s, which changes its border style to 2px solid #ce0000, and font-color to #ce0000, on hover. Source: https://bbbootstrap.com/snippets/bootstrap-header-navbar-23316626

Post Comment or Questions

Lorem ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Several Related Snippets

Lorem ut labore et dolore magna aliqua. Ut enim ad minim veniam.