Each block can have a background color and/or image. For example a rgba transparent color over an image. If the background is dark and the text needs to be light, add the .text-light
class to the div with the .header
class.
Add the animated polygon effect by adding the class .polygon-bg
to the div with the .header-overlay
class and use the atributes data-color-bg
and data-color-light
to set the colors. For example: <div class="header-overlay polygon-bg" data-color-bg="222222" data-color-light="333333">
Add the animated particles effect by adding id="particles-js-connect"
to the div with the .header-overlay
class. For example: <div id="particles-js-connect" class="header-overlay" style="background-color:rgba(37,75,98,0.7)">
. These are the available particle animations (see src/scripts/scripts.js
and html/assets/js/particles
):