💄 (satisfaction) simpler roof
This commit is contained in:
22
style.css
22
style.css
@@ -2,7 +2,6 @@
|
|||||||
|
|
||||||
:root {
|
:root {
|
||||||
--background-color: #b2f1ad;
|
--background-color: #b2f1ad;
|
||||||
--customer-height: 180px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
* {
|
* {
|
||||||
@@ -25,7 +24,6 @@ main {
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
gap: 0;
|
gap: 0;
|
||||||
margin: 0 1rem;
|
margin: 0 1rem;
|
||||||
max-height: 100vh;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.customer-satisfaction {
|
.customer-satisfaction {
|
||||||
@@ -34,27 +32,17 @@ main {
|
|||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
height: var(--customer-height);
|
border-radius: 6rem 6rem 0.5rem 0.5rem;
|
||||||
|
background-color: var(--background-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.customer-satisfaction h2,
|
.customer-satisfaction h2,
|
||||||
.customer-satisfaction p {
|
.customer-satisfaction p {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
position: relative;
|
|
||||||
padding: 0 0.5rem;
|
padding: 0 0.5rem;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.customer-satisfaction::before {
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
border-left: 50vw solid transparent;
|
|
||||||
border-right: 50vw solid transparent;
|
|
||||||
border-bottom: var(--customer-height) solid var(--background-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.pilars {
|
.pilars {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
@@ -78,6 +66,7 @@ main {
|
|||||||
|
|
||||||
.people-improvement svg {
|
.people-improvement svg {
|
||||||
min-width: 20vw;
|
min-width: 20vw;
|
||||||
|
max-width: 50vw;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -121,15 +110,10 @@ li {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.customer-satisfaction {
|
.customer-satisfaction {
|
||||||
background-color: var(--background-color);
|
|
||||||
padding: 0 0.5rem;
|
padding: 0 0.5rem;
|
||||||
font-size: min(22px, 50vw);
|
font-size: min(22px, 50vw);
|
||||||
height: initial;
|
height: initial;
|
||||||
}
|
}
|
||||||
|
|
||||||
.customer-satisfaction::before {
|
|
||||||
content: initial;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media only screen and (min-width: 750px) {
|
@media only screen and (min-width: 750px) {
|
||||||
|
|||||||
Reference in New Issue
Block a user