Close

Sidebar Layout With Day and Night modes

This is an example of a sidebar layout with hover effects and a color theme, designed using HTML, CSS, JavaScript and Bootstrap framework 4. The JavaScript functions have been used to implement the day and night themes in a click event. The icons and images are imported to the code with the URLs. The colors used in the form are predefined as variables. The body of the form is given the styles of font-family as 'Inter UI', system-ui, font-size as 1.6rem, and background as #F6FBFF. The sidebar has the styles of background as #2B3137, font color as #FFFFFF, width as 100%, max-width as 300px, border-radius as 1rem, transition as all 200ms ease, and box-shadow as 0px 5px 12px rgba(black, .1), 0px 3px 6px rgba(black, .06). The menu buttons are given the styles of padding as 1rem 1.5rem, background as linear-gradient(to top, #2B3137, #394047), font color as #FFFFFF, border-radius as .3rem, cursor as pointer to get the hand cursor effect, box-shadow as 0px 3px 6px rgba(black, .15), and text-shadow as 0px 1px 1px rgba(black, .2). The buttons take the styles of background as #4BC6E9, and font color as #FFFFFF, in the night mode. Source: https://codepen.io/ryanparag/pen/gZEbOq

Post Comment or Questions

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

Your email address will not be published. Required fields are marked *

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.