add syles for swapped about-section
This commit is contained in:
parent
eb000d83e7
commit
8d5bac6d9f
|
@ -3,14 +3,14 @@
|
||||||
<section class="l-relative l-screen-min-full">
|
<section class="l-relative l-screen-min-full">
|
||||||
<div class="l-underlay about-bg"></div>
|
<div class="l-underlay about-bg"></div>
|
||||||
<div class="l-section-pad l-wrapper l-flex-2-col-m about-section">
|
<div class="l-section-pad l-wrapper l-flex-2-col-m about-section">
|
||||||
<div class="about-info">
|
<div class="about-section__info">
|
||||||
<div class="about-icon"></div>
|
<div class="about-icon"></div>
|
||||||
<h2>About Heading One</h2>
|
<h2>About Heading One</h2>
|
||||||
<p>Lorem fuga cupiditate quidem quia earum, hic. Iusto id beatae sit similique sequi! Earum veritatis mollitia iste ipsam totam deleniti Nam cupiditate recusandae tempore ab magnam! Officiis maxime incidunt asperiores?</p>
|
<p>Lorem fuga cupiditate quidem quia earum, hic. Iusto id beatae sit similique sequi! Earum veritatis mollitia iste ipsam totam deleniti Nam cupiditate recusandae tempore ab magnam! Officiis maxime incidunt asperiores?</p>
|
||||||
<p>Amet sed ullam ea dolore corrupti sit. Alias aut doloribus explicabo perferendis fuga? Quas nostrum aut earum tempora voluptatem, magnam? Veritatis corrupti perspiciatis at aliquid perspiciatis Eligendi reprehenderit quidem veniam</p>
|
<p>Amet sed ullam ea dolore corrupti sit. Alias aut doloribus explicabo perferendis fuga? Quas nostrum aut earum tempora voluptatem, magnam? Veritatis corrupti perspiciatis at aliquid perspiciatis Eligendi reprehenderit quidem veniam</p>
|
||||||
<p>Amet dolore atque iure inventore vitae Dolores fuga porro quo odit et autem. Sint est nesciunt unde non aliquid officiis fugit Repellat cum sequi cum fugiat fugit Voluptatem quaerat quibusdam.</p>
|
<p>Amet dolore atque iure inventore vitae Dolores fuga porro quo odit et autem. Sint est nesciunt unde non aliquid officiis fugit Repellat cum sequi cum fugiat fugit Voluptatem quaerat quibusdam.</p>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div class="about-section__card">
|
||||||
<div class="c-img-card about-card">
|
<div class="c-img-card about-card">
|
||||||
<div class="c-img-card__header about-card-bg-img about-card-bg-img-1"></div>
|
<div class="c-img-card__header about-card-bg-img about-card-bg-img-1"></div>
|
||||||
<div class="c-img-card__body">
|
<div class="c-img-card__body">
|
||||||
|
@ -27,15 +27,15 @@
|
||||||
|
|
||||||
<section class="l-relative l-screen-min-full">
|
<section class="l-relative l-screen-min-full">
|
||||||
<div class="l-underlay about-bg about-bg--secondary"></div>
|
<div class="l-underlay about-bg about-bg--secondary"></div>
|
||||||
<div class="l-section-pad l-wrapper l-flex-2-col-m about-section">
|
<div class="l-section-pad l-wrapper l-flex-2-col-m about-section about-section--swapped">
|
||||||
<div>
|
<div class="about-section__info">
|
||||||
<div class="about-icon"></div>
|
<div class="about-icon"></div>
|
||||||
<h2>About Heading Two</h2>
|
<h2>About Heading Two</h2>
|
||||||
<p>Lorem fuga cupiditate quidem quia earum, hic. Iusto id beatae sit similique sequi! Earum veritatis mollitia iste ipsam totam deleniti Nam cupiditate recusandae tempore ab magnam! Officiis maxime incidunt asperiores?</p>
|
<p>Lorem fuga cupiditate quidem quia earum, hic. Iusto id beatae sit similique sequi! Earum veritatis mollitia iste ipsam totam deleniti Nam cupiditate recusandae tempore ab magnam! Officiis maxime incidunt asperiores?</p>
|
||||||
<p>Amet sed ullam ea dolore corrupti sit. Alias aut doloribus explicabo perferendis fuga? Quas nostrum aut earum tempora voluptatem, magnam? Veritatis corrupti perspiciatis at aliquid perspiciatis Eligendi reprehenderit quidem veniam</p>
|
<p>Amet sed ullam ea dolore corrupti sit. Alias aut doloribus explicabo perferendis fuga? Quas nostrum aut earum tempora voluptatem, magnam? Veritatis corrupti perspiciatis at aliquid perspiciatis Eligendi reprehenderit quidem veniam</p>
|
||||||
<p>Amet dolore atque iure inventore vitae Dolores fuga porro quo odit et autem. Sint est nesciunt unde non aliquid officiis fugit Repellat cum sequi cum fugiat fugit Voluptatem quaerat quibusdam.</p>
|
<p>Amet dolore atque iure inventore vitae Dolores fuga porro quo odit et autem. Sint est nesciunt unde non aliquid officiis fugit Repellat cum sequi cum fugiat fugit Voluptatem quaerat quibusdam.</p>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div class="about-section__card">
|
||||||
<div class="c-img-card about-card">
|
<div class="c-img-card about-card">
|
||||||
<div class="c-img-card__header about-card-bg-img about-card-bg-img-2"></div>
|
<div class="c-img-card__header about-card-bg-img about-card-bg-img-2"></div>
|
||||||
<div class="c-img-card__body">
|
<div class="c-img-card__body">
|
||||||
|
|
|
@ -193,9 +193,8 @@ html.is-animating .transition-fade {
|
||||||
|
|
||||||
.about-section {
|
.about-section {
|
||||||
align-items: flex-end;
|
align-items: flex-end;
|
||||||
}
|
|
||||||
|
|
||||||
.about-info {
|
&__info {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
||||||
@media (min-width: $bp-m) {
|
@media (min-width: $bp-m) {
|
||||||
|
@ -203,6 +202,20 @@ html.is-animating .transition-fade {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&--swapped {
|
||||||
|
.about-section__info {
|
||||||
|
order: 2;
|
||||||
|
@media (min-width: $bp-m) {
|
||||||
|
padding-left: 64px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.about-section__card {
|
||||||
|
order: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.about-card {
|
.about-card {
|
||||||
height: 30em;
|
height: 30em;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
@ -217,6 +230,14 @@ html.is-animating .transition-fade {
|
||||||
max-width: 26em;
|
max-width: 26em;
|
||||||
height: 40em;
|
height: 40em;
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
|
margin-right: initial;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.about-section--swapped .about-card {
|
||||||
|
@media (min-width: $bp-m) {
|
||||||
|
margin-left: initial;
|
||||||
|
margin-right: auto;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Reference in New Issue