add icon list block and a fun happy placeholder piggy
This commit is contained in:
60
web/src/components/blocks/iconListBlock.module.scss
Normal file
60
web/src/components/blocks/iconListBlock.module.scss
Normal file
@@ -0,0 +1,60 @@
|
||||
.iconListBlock {
|
||||
margin: 5rem auto;
|
||||
max-width: 68rem;
|
||||
}
|
||||
|
||||
.iconList {
|
||||
list-style: none;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
column-gap: var(--spacing-gap-column);
|
||||
row-gap: var(--spacing-gap-row);
|
||||
}
|
||||
|
||||
.iconListItem {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 1.6rem;
|
||||
|
||||
&:nth-of-type(3n+1) {
|
||||
.icon {
|
||||
background: var(--color-goldenBeige);
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-of-type(3n+2) {
|
||||
.icon {
|
||||
background: var(--color-neufPink);
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-of-type(3n+3) {
|
||||
.icon {
|
||||
background: var(--color-goldenOrange);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.text {
|
||||
margin-bottom: 1rem;
|
||||
|
||||
h2 {
|
||||
font-size: var(--font-size-lead);
|
||||
margin: .5rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
flex: none;
|
||||
width: 3.4rem;
|
||||
height: 3.4rem;
|
||||
background: var(--color-goldenBeige);
|
||||
border-radius: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
Reference in New Issue
Block a user