Add Creation and Present section to About page
This commit is contained in:
@@ -142,7 +142,7 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="about__creation">
|
||||
<section class="about__creation">
|
||||
<div class="container grid">
|
||||
<figure class="first-photo">
|
||||
<Image
|
||||
@@ -166,8 +166,66 @@
|
||||
</a>
|
||||
</figcaption>
|
||||
</figure>
|
||||
|
||||
<h2 class="title-small">The creation of Houses Of</h2>
|
||||
<p class="heading text-huge">Often separated on different sides of the world, we started a <strong>photography project</strong> of <strong>collecting charismatic houses</strong> from the places we visited together.</p>
|
||||
|
||||
<div class="text text-small">
|
||||
<p>A few years later and reunited in the South of France, this little collection has evolved into a rather large passion project along with the success of our web launch back in 2020.</p>
|
||||
</div>
|
||||
<figure class="portrait-photo">
|
||||
<Image
|
||||
class="shadow-box-dark"
|
||||
id={about.intro_portraits.id}
|
||||
alt={about.intro_portraits.title}
|
||||
sizeKey="photo-list"
|
||||
sizes={{
|
||||
small: { width: 250 }
|
||||
}}
|
||||
ratio={1}
|
||||
/>
|
||||
<figcaption class="text-info">
|
||||
Whatever I want
|
||||
</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="about__present">
|
||||
<div class="container grid">
|
||||
<Image
|
||||
class="shadow-box-dark"
|
||||
id="bba45d9d-8380-45a1-99ee-eb52dde0a6fb"
|
||||
alt={about.intro_portraits.title}
|
||||
sizeKey="photo-list"
|
||||
sizes={{
|
||||
small: { width: 1060 }
|
||||
}}
|
||||
ratio={1.5}
|
||||
/>
|
||||
|
||||
<h2 class="title-small">Where are we now</h2>
|
||||
|
||||
<div class="text text-small">
|
||||
<p>Since then we've been travelling more and adding new locations to the Houses Of site, however we always wanted to create something more tangible for the travel and design lovers like us.</p>
|
||||
</div>
|
||||
<p class="heading text-big">We decided to use our expertise to create the Houses Of graphic posters, for those wanting to bring art into their homes, but are unsatisfied with typical tourism prints.</p>
|
||||
<div class="text text-small">
|
||||
<p>We hope that you will join us on this journey and that our art can also spark memories in your own home.</p>
|
||||
</div>
|
||||
|
||||
<Image
|
||||
class="shadow-box-dark"
|
||||
id="bba45d9d-8380-45a1-99ee-eb52dde0a6fb"
|
||||
alt={about.intro_portraits.title}
|
||||
sizeKey="photo-list"
|
||||
sizes={{
|
||||
small: { width: 1060 }
|
||||
}}
|
||||
ratio={1.5}
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="about__process">
|
||||
<div class="container grid">
|
||||
|
||||
@@ -97,6 +97,20 @@
|
||||
/* ==========================================================================
|
||||
TEXT
|
||||
========================================================================== */
|
||||
// Huge
|
||||
.text-huge {
|
||||
font-size: rem(72px);
|
||||
font-weight: 300;
|
||||
line-height: 1.25;
|
||||
|
||||
@include bp (sm) {
|
||||
// font-size: rem(36px);
|
||||
}
|
||||
@include bp (sd) {
|
||||
// font-size: rem(44px);
|
||||
}
|
||||
}
|
||||
|
||||
// Big
|
||||
.text-big {
|
||||
font-size: rem(32px);
|
||||
|
||||
@@ -60,6 +60,30 @@
|
||||
*/
|
||||
&__creation {
|
||||
background: #fff;
|
||||
padding-bottom: 240px;
|
||||
|
||||
// Figures
|
||||
:global(picture) {
|
||||
width: 100%;
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
|
||||
:global(img) {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
figcaption {
|
||||
margin-left: auto;
|
||||
color: $color-gray;
|
||||
text-align: right;
|
||||
|
||||
@include bp (sm) {
|
||||
margin-top: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
// First photo
|
||||
.first-photo {
|
||||
@@ -68,30 +92,11 @@
|
||||
|
||||
@include bp (sm) {
|
||||
grid-column: 8 / -2;
|
||||
margin: -10vw 0 clamp(80px, 10vw, 128px);
|
||||
}
|
||||
|
||||
:global(picture) {
|
||||
width: 100%;
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
|
||||
:global(img) {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
margin: -10vw 0 70px;
|
||||
// margin: -10vw 0 clamp(80px, 10vw, 128px);
|
||||
}
|
||||
|
||||
figcaption {
|
||||
margin-left: auto;
|
||||
color: $color-gray;
|
||||
text-align: right;
|
||||
|
||||
@include bp (sm) {
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
@@ -119,8 +124,104 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Text content
|
||||
h2 {
|
||||
grid-column: 3 / span 10;
|
||||
max-width: 240px;
|
||||
line-height: 1.2;
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
|
||||
// Large text
|
||||
.heading {
|
||||
grid-column: 3 / -3;
|
||||
color: $color-primary-tertiary20;
|
||||
margin-bottom: 112px;
|
||||
|
||||
strong {
|
||||
color: $color-lilas-bright;
|
||||
font-weight: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
// Small paragraph
|
||||
.text {
|
||||
color: $color-text;
|
||||
grid-column: 9 / span 6;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
// Portrait
|
||||
.portrait-photo {
|
||||
position: relative;
|
||||
grid-column: 16 / span 7;
|
||||
align-self: center;
|
||||
|
||||
figcaption {
|
||||
position: absolute;
|
||||
bottom: -40px;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
** Present
|
||||
*/
|
||||
&__present {
|
||||
background-color: $color-cream;
|
||||
|
||||
.text {
|
||||
color: $color-gray;
|
||||
}
|
||||
|
||||
// Poster image
|
||||
:global(picture) {
|
||||
height: auto;
|
||||
|
||||
:global(img) {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
&:first-of-type {
|
||||
overflow: hidden;
|
||||
border-radius: 12px;
|
||||
grid-column: 3 /-6;
|
||||
margin-top: -100px;
|
||||
}
|
||||
&:last-of-type {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
grid-column: 3 / 7;
|
||||
line-height: 1;
|
||||
margin-top: 88px;
|
||||
}
|
||||
.text {
|
||||
&:first-of-type {
|
||||
grid-column: 3 / span 6;
|
||||
align-self: baseline;
|
||||
margin-top: 24px;
|
||||
}
|
||||
&:last-of-type {
|
||||
grid-column: 11 / span 8;
|
||||
margin: 96px 0 144px;
|
||||
}
|
||||
}
|
||||
|
||||
.heading {
|
||||
grid-column: 11 / -2;
|
||||
color: $color-primary-tertiary20;
|
||||
align-self: baseline;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*
|
||||
** Process
|
||||
@@ -131,7 +232,7 @@
|
||||
margin-top: 72px;
|
||||
|
||||
@include bp (sm) {
|
||||
margin: 128px 0 0;
|
||||
margin: 96px 0 0;
|
||||
}
|
||||
|
||||
& > .container {
|
||||
|
||||
Reference in New Issue
Block a user