Close

Page Header With Page Transitions

This is an example of a page header with page transitions, designed using HTML, CSS, JavaScript, and Bootstrap framework 4. The images are imported to the code with their URLs. 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. The colors and values are predefined as --purple-brown: #231f20, --egg-shell: #e8e4d2, --dark-peach: #e26961, --border-width: .75rem, and --dots-gap: 10px. The body of the form is given the styles of font-family as Trocchi, Georgia, serif, line-height as 1.5, and color as var(--egg-shell). The background is given the styles of min-height as 100vh, padding as 25vh 0 1.5rem, and transition as background 0s 1s, color .6s. Bio, Projects, and Find Me sections are given different background colors as var(--purple-brown), var(--egg-shell), and var(--dark-peach). The dots are given an animation of movebg .2s linear infinite. Source: https://codepen.io/pehaa/pen/wvBLpNK

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 *

Several Related Snippets

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