update about section styling layout
This commit is contained in:
parent
d5b6788f30
commit
eb000d83e7
|
@ -4,8 +4,8 @@
|
||||||
<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-info">
|
||||||
|
<div class="about-icon"></div>
|
||||||
<h2>About Heading One</h2>
|
<h2>About Heading One</h2>
|
||||||
<div class="section-icon"></div>
|
|
||||||
<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>
|
||||||
|
@ -27,24 +27,27 @@
|
||||||
|
|
||||||
<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">
|
<div class="l-section-pad l-wrapper l-flex-2-col-m about-section">
|
||||||
<div>
|
<div>
|
||||||
|
<div class="about-icon"></div>
|
||||||
<h2>About Heading Two</h2>
|
<h2>About Heading Two</h2>
|
||||||
<div class="section-icon"></div>
|
|
||||||
<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>
|
||||||
<div class="c-img-card">
|
<div class="c-img-card about-card">
|
||||||
<img src="https://via.placeholder.com/300x400" alt="CARD IMAGE">
|
<div class="c-img-card__header about-card-bg-img about-card-bg-img-2"></div>
|
||||||
<h3>Another Card Heading</h3>
|
<div class="c-img-card__body">
|
||||||
|
<div class="c-img-card__body-bg about-card-bg-2"></div>
|
||||||
|
<h3>Card Heading</h3>
|
||||||
<p>
|
<p>
|
||||||
Amet recusandae optio quia velit quisquam. Dolorem ipsam non modi est quisquam? Quia inventore neque amet laudantium impedit a, dignissimos. Repellendus vero animi saepe tempora quibusdam! Repudiandae esse ex adipisci
|
Amet recusandae optio quia velit quisquam. Dolorem ipsam non modi est quisquam? Quia inventore neque amet laudantium impedit a, dignissimos. Repellendus vero animi saepe tempora quibusdam! Repudiandae esse ex adipisci
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
</article>
|
</article>
|
||||||
|
|
|
@ -233,6 +233,23 @@ html.is-animating .transition-fade {
|
||||||
background-image: url(https://via.placeholder.com/300x400);
|
background-image: url(https://via.placeholder.com/300x400);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.about-card-bg-2 {
|
||||||
|
background-color: lightblue;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about-card-bg-img-2 {
|
||||||
|
background-image: url(https://via.placeholder.com/300x400);
|
||||||
|
}
|
||||||
|
|
||||||
|
.about-icon {
|
||||||
|
width: 4em;
|
||||||
|
height: 4em;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin-bottom: 1.25rem;
|
||||||
|
background-color: blue;
|
||||||
|
opacity: 0.2;
|
||||||
|
}
|
||||||
|
|
||||||
// services
|
// services
|
||||||
|
|
||||||
.services-bg {
|
.services-bg {
|
||||||
|
|
Reference in New Issue