- Style 1*
My outer container uses CSS variables and clamp values to control padding.
No need to edit the padding for various break sizes. Try re-sizing your browser window and watch my padding fluidly change.
- Style 2*
Hero Heading
My outer container uses variables and clamp to define padding. For the bottom padding (padding-block-end), it uses calc() to add extra padding equivalent to the negative margin on the CTA section below.
Add Your Heading Text Here
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
- Style 3*
CSS Variable for Border Radius
In this section, I used a CSS variable to control the radius on the cards, button and image. To change the border radius across the entire website, we would simply change the variable’s value.
Service
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Service
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Service
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Service
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Service
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Service
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Lorem Ipsum Dolor
Dignissim duis magna habitant nam montes leo erat maecenas hendrerit, bibendum aenean quisque pharetra.