Created: August 12, 2022

Modified: August 31, 2022

Our story

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sextilio Rufo, cum is rem ad amicos ita deferret, se esse heredem Q. An eum locum libenter invisit, ubi Demosthenes et Aeschines inter se decertare soliti sunt? Claudii libidini, qui tum erat summo ne imperio, dederetur. Duo Reges: constructio interrete. 
Master in HTML
Master in HTML
Learn More About Us



  1. Section CTA 4
    1. Container
        1. Column ::before ::after
          1. Div
            1. Image
        2. Column
          1. Div
            1. Heading ::after
            2. Basic Text
            3. USP Wrapper | .cta-4__usp__container
              1. USP | .cta-4__usp
                1. Icon | .cta-4__icon
                2. Div | .cta-4__wrap
                  1. Basic Text | .cta-4__text1
                  2. Basic Text | .cta-4__text2
              2. USP | .cta-4__usp
                1. Icon | .cta-4__icon
                2. Div | .cta-4__wrap
                  1. Basic Text | .cta-4__text1
                  2. Basic Text | .cta-4__text2
              3. Button

If you don’t have ::before and ::after pseudo-classes create those first.

On ‘Column ::before ::after’ the ::before class you can change the background image. The ::after class you can change the overlay background color.

On mobile landscape the ::before element of the first column is set to ‘display:none’ you can set the background image on the element without the pseudo-class on mobile landscape.

‘Heading ::after’ on the ::after pseudo class you change the little border beneath the heading you change the width, height and background-color of it.

.cta-4__icon there is custom css added. I used this generator for creating this effect https://cssgradient.io/

Bricks version

Support our work

Consider a small donation
If you have any comments please let me know, support my work and leave a small donation so I can develop several more templates and keep Bricks Design Set free for everyone.