Bootstrap Utility Example
p-4 m-auto position-relative overflow-hidden w-76
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;
}
Subheader border
orange_border
Css
.orange_border{
border-bottom-style: solid;
border-color: orange;
border-width: thick;
border-height: 5px;
}
Header borders
blue_border
Css
.blue_border{
border-bottom-style: solid;
border-color: #0073bd ;
border-width: thick;
border-height: 5px;
}
Header Gradient
headerSection
Css
.headerSection{
background: radial-gradient(circle at top left,#0073bd,#003976 80%);
background-width: 100%;
}
Thumbnails
img-thumbnail
Css
Footer border
footer_orange_border
Css
.footer_orange_border{
border-top-style: solid;
border-color: orange;
border-width: thick;
border-height: 5px;
}
Footer Border white
footer_white_border
Css
.footer_white_border{
border-top-style: solid;
border-color: white;
border-width: 1px ;
border-height: 5px;
}
products_headers
productheader
Css
.productheader{
color: #003976;
background: linear-gradient(to bottom, #f8eb61, #efab00);
width:100%;
font-weight: 600;
}
stripeblue
stripeblue
Css
.stripeblue{
background-color: #0073bd !important;
height: 4px;
width: 100%;
}
about_us_border
about_us_border
Css
.about_us_border{
border-border-2
border-bottom-style: solid;
border-bottom-color: #0073bd ;
border-bottom-width: thick;
}
loginmodal-container
loginmodal-container
Css
@media only screen and (min-width: 1401px) {
.loginmodal-container {
max-width: 750px;
}
}
.loginmodal-container {
padding: 30px;
width: 100% !important;
background-color: #F7F7F7;
margin: 0px auto;
border-radius: 2px;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
overflow: hidden;
}
career
career
Css
.callout {
width: 100%;
max-width: 850px;
}
.callout > * {
max-width: 65ch;
z-index:1;
}
.callout::after {
content: "";
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;
}
container
col-md-12 col-sm-12 col-xs-12
Css
Headings
yellowBgHeading
Css
.yellowBgHeading {
background: linear-gradient(to bottom, #f8eb61, #efab00);
width: 100%;
}
.yellowBgHeading h4 {
font-weight: 600;
background: linear-gradient(to bottom, #f8eb61, #efab00);
width: 100%;
}
Mighty Subheader border
red_border
Css
.red_border{
border-bottom-style: solid;
border-color: #ff3c00;
border-width: thick;
}
Red background heading
red-bg
Css
.red-bg {
background: linear-gradient(to bottom, #f5928f, #c60400);
width: 100%;
}
.red-bg h4 {
color: white;
margin: 7px 0;
font-weight: 600;
word-spacing: 0.08rem;
}
Full width footer
fullWidthFooter
Css
.fullWidthFooter {
padding-top: 0 !Important;
padding-bottom: 0 !Important;
width: 100%;
}
.fullWidthFooter div.mw-75ch {
max-width: unset !Important;
width: 100%;
}
Mighty footer border
red_footer_border
Css
.red_footer_border {
border-top-style: solid;
border-color: #ff3c00;
border-width: thick;
}
Might OffCanvas
mightyOffCanvas
Css
.cus-offcanvas__container .offcanvas-navigation .nav, .cus-offcanvas__container {
background-color: var(--swift-background-color) !Important;
}
Industries Title
industriesContainer w-100
Css
.industriesContainer {
background: radial-gradient(circle at top left, #0073bd, #003976 80%);
}
.industriesContainer #topRow .itemTitle {
font-size: 24px;
text-transform: uppercase;
}
.industriesContainer .mb-lg-4 {
margin-bottom: 0 !important;
}