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

Compare commits

base: rayelliott:c3bad5fadf618eac3999e08b5eb8e674a290145b
Branches Tags
rayelliott:master
..
compare: rayelliott:d5b6788f300ff99361075166a34b4b10c286de1f
Branches Tags
rayelliott:master

No commits in common. "c3bad5fadf618eac3999e08b5eb8e674a290145b" and "d5b6788f300ff99361075166a34b4b10c286de1f" have entirely different histories.
c3bad5fadf ... d5b6788f30

3 changed files with 17 additions and 58 deletions
Show Stats Expand all files Collapse all files

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

@ -3,14 +3,14 @@
<section class="l-relative l-screen-min-full">
<div class="l-underlay about-bg"></div>
<div class="l-section-pad l-wrapper l-flex-2-col-m about-section">
<div class="about-section__info">
<div class="about-icon"></div>
<div class="about-info">
<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>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>
</div>
<div class="about-section__card">
<div>
<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__body">
@ -27,27 +27,24 @@
<section class="l-relative l-screen-min-full">
<div class="l-underlay about-bg about-bg--secondary"></div>
<div class="l-section-pad l-wrapper l-flex-2-col-m about-section about-section--swapped">
<div class="about-section__info">
<div class="about-icon"></div>
<div class="l-section-pad l-wrapper l-flex-2-col-m">
<div>
<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>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>
</div>
<div class="about-section__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__body">
<div class="c-img-card__body-bg about-card-bg-2"></div>
<h3>Card Heading</h3>
<div>
<div class="c-img-card">
<img src="https://via.placeholder.com/300x400" alt="CARD IMAGE">
<h3>Another Card Heading</h3>
<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
</p>
</div>
</div>
</div>
</div>
</section>
</article>

2
src/css/imports/layout.scss
View File

@ -1,6 +1,6 @@
.l-wrapper {
width: 100%;
max-width: 80rem;
max-width: 90rem;
margin-left: auto;
margin-right: auto;

42
src/css/main.css
View File

@ -193,8 +193,9 @@ html.is-animating .transition-fade {
.about-section {
align-items: flex-end;
}
&__info {
.about-info {
padding: 0;
@media (min-width: $bp-m) {
@ -202,20 +203,6 @@ 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 {
height: 30em;
width: 100%;
@ -230,14 +217,6 @@ html.is-animating .transition-fade {
max-width: 26em;
height: 40em;
margin-left: auto;
margin-right: initial;
}
}
.about-section--swapped .about-card {
@media (min-width: $bp-m) {
margin-left: initial;
margin-right: auto;
}
}
@ -254,23 +233,6 @@ html.is-animating .transition-fade {
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-bg {