This Lead text is Theinhardt Medium 26px (1.3rem)
This Lead text is Theinhardt Medium 26px (1.3rem)
This Lead text is Theinhardt Medium 32px (1.6rem)
This Lead text is Theinhardt Medium 40px (2.0rem)
xs (custom) | < 384 px | |
---|---|---|
Medium | md | ≥ 768 px |
X-Large | xl | ≥ 1200 px |
Small | sm | ≥ 567 px |
---|---|---|
Large | lg | ≥ 992 px |
Extra Large | xl | ≥ 1200 px |
<div class="stageboxes row">
<div class="col-12 col-lg-4">
<a href="https://www.myclimate.org/information"
class="d-flex flex-column justify-content-between stagebox bg-secondary">
<p class="h2">Information</p>
<div class="subtitle d-flex justify-content-between">About myclimate</div>
</a>
</div>
<div class="col-12 col-lg-4">
<a href="https://www.myclimate.org/get-active/"
class="d-flex flex-column justify-content-between stagebox bg-info">
<p class="h2">Get Active</p>
<div class="subtitle d-flex justify-content-between">Offers & Solutions</div>
</a>
</div>
<div class="col-12 col-lg-4">
<a href="https://co2.myclimate.org/en/offset_further_emissions"
class="d-flex flex-column justify-content-between stagebox bg-primary">
<p class="h2">Contribute</p>
<div class="subtitle d-flex justify-content-between">Calculate & Support</div>
</a>
</div>
</div>
.stageboxes {
margin-right: -30px;
margin-left: -30px;
margin-bottom: 4rem;
}
.stagebox {
min-height: 8rem;
padding: 1.25rem 0.25rem 1.25rem 0.75rem;
.h2 {
color: #FFFFFF;
}
.subtitle {
color: #FFFFFF;
font-size: 1rem;
font-weight: bold;
line-height: 1.25rem;
text-transform: uppercase;
&::after {
align-self: flex-end;
content: '\e829';
font-family: 'myclimate-icons';
font-size: 2.5rem;
}
}
}
@media (min-width: 576px) {
.stageboxes {
margin-left: -15px;
margin-right: -15px;
}
}
@media (min-width: 992px) {
.stagebox {
min-height: 16rem;
padding: 1.25rem 0.25rem 1.25rem 1.25rem;
& + .stagebox {
margin-left: 1.5rem;
}
}
}
Large | lg | ≥ 992 px |
---|