CSS

Bootstrap Utility Example

p-4 rounded-4 shadow m-auto position-relative overflow-hidden

Css

Custom CSS Example

custom-image

Css

.custom-image {
}

Custom Callout Example

callout

Css

.callout {
width: 100%;
max-width: 850px;
}
.callout > * {
max-width: 65ch;
z-index:1;
}
.callout::after {
       content: "";
    background: url(data:image/svg+xml;base64,PCEtLT94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/LS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIGZpbGw9InJnYmEoODUsIDAsIDI1NSwgMSkiIGNsYXNzPSJiaSBiaS1hc3RlcmlzayIgdmlld0JveD0iMCAwIDE2IDE2Ij4KICA8cGF0aCBkPSJNOCAwYTEgMSAwIDAgMSAxIDF2NS4yNjhsNC41NjItMi42MzRhMSAxIDAgMSAxIDEgMS43MzJMMTAgOGw0LjU2MiAyLjYzNGExIDEgMCAxIDEtMSAxLjczMkw5IDkuNzMyVjE1YTEgMSAwIDEgMS0yIDBWOS43MzJsLTQuNTYyIDIuNjM0YTEgMSAwIDEgMS0xLTEuNzMyTDYgOCAxLjQzOCA1LjM2NmExIDEgMCAwIDEgMS0xLjczMkw3IDYuMjY4VjFhMSAxIDAgMCAxIDEtMXoiLz4KPC9zdmc+);
    position: absolute;
    height: 200px;
    background-position: center;
    right: 0;
    top: 0;
    background-size: 100%;
    z-index: 0;
    transform: translate(20%, -20%) rotate(45deg);
    background-repeat: no-repeat;
    aspect-ratio: 1/1;
    opacity: 0.6;
}

bottom border

border-bottom

Css

Back to top

Css

/* CSS styles for the Back to Top button */
.back-to-top-button {
    position: fixed;
    bottom: 20px; /* Adjust the distance from the bottom as needed */
    right: 20px; /* Adjust the distance from the right as needed */
    display: none;
    z-index: 999; /* Ensure it appears above other content */
}

bottom border yellow

bottom-border-yellow

Css

.bottom-border-yellow {
border-bottom: 2px solid #ffdc00;
}

Buttons

theme .btn-primary theme .btn-secondary

Css

.theme .btn-primary {
border-top-left-radius: 30px;
border-top-right-radius: 30px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 30px;
}
.theme .btn-secondary {
border-top-left-radius: 30px;
border-top-right-radius: 30px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 30px;
}

Align right

text-right

Css

.text-right {
text-align: right;
}

bottom border - product list

border-bottom-product-list

Css

.border-bottom-product-list {
border-bottom: 1px solid #dfdfdf;;
}