rayelliott
/
victor-hugo
Archived
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

update about section styling layout

This commit is contained in:
Ray Elliott 2020-04-01 19:32:14 +00:00
parent d5b6788f30
commit eb000d83e7
2 changed files with 27 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
site/layouts/partials/about.html
View File

@ -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,23 +27,26 @@
<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>

17
src/css/main.css
View File

@ -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 {