flayks/housesof
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Create shop page

Browse Source 
Make components: poster, poster product
This commit is contained in:
Shelby Kay
2021-10-27 22:48:31 +02:00
parent ad1b57fef2
commit 68f9743f17
9 changed files with 492 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

119
src/style/organisms/_poster-product.scss Normal file
View File

@@ -0,0 +1,119 @@
.poster-product {
background-color: $color-cream;
// Title Location
h2 {
grid-column: 2 / span calc(var(--columns) - 1);
font-size: clamp(200px, 20vw, 340px);
color: $color-secondary;
text-align: center;
margin-bottom: 48px;
}
// Poster Product
&__buy {
grid-column: 2 / span 10;
img {
display: block;
width: 100%;
height: auto;
}
// Product Info
.info {
display: flex;
justify-content: space-between;
margin-top: 36px;
}
// Title
dt {
color: $color-secondary;
font-family: $font-serif;
font-size: rem(36px);
line-height: 1.3;
}
// Text
dd {
font-size: rem(16px);
color: $color-gray;
margin-top: 8px;
}
}
// Images set
&__images {
--columns: 10;
grid-column: 14 / span var(--columns);
position: relative;
z-index: 2;
.image {
border-radius: 6px;
img {
display: block;
width: 100%;
height: auto;
}
}
// Image 1
.image--first {
grid-column: 1 / span 10;
}
// Image 2
.image--second {
grid-column: 2 / span 5;
margin: 48px 0;
}
// Image 3
.image--third {
grid-column: 5 / span 5;
}
}
// About
&__about {
background-color: #fff;
padding: 148px 0 260px;
margin: -80px 0 -120px;
font-size: rem(36px);
font-weight: 300;
color: $color-primary-tertiary20;
line-height: 1.4;
.text {
grid-column: 4 / span 13;
}
.details {
color: $color-gray;
font-size: rem(18px);
margin-top: 56px;
line-height: 1.5;
}
}
// Single Image
&__image {
margin-bottom: 120px;
.image {
border-radius: 6px;
img {
display: block;
width: 100%;
height: auto;
}
}
// Image 4
.image--fourth {
grid-column: 8 / span 13;
}
}
}