418 lines
8.0 KiB
CSS
418 lines
8.0 KiB
CSS
/*
|
||
* Design Sizes:
|
||
* Mobile: 375x2615
|
||
* Tablet: 768 × 1760
|
||
* Desktop: 1440 × 1845
|
||
*/
|
||
|
||
*,
|
||
::before,
|
||
::after {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
:root {
|
||
/* Colors */
|
||
--col-medium-purple: hsla(234, 25%, 52%, 1);
|
||
--col-dark-purple: hsla(234, 53%, 16%, 1);
|
||
--col-light-purple: hsla(233, 10%, 56%, 1);
|
||
|
||
--col-hot-pink: hsla(341, 92%, 62%, 1);
|
||
--col-light-pink: hsla(341, 100%, 83%, 1);
|
||
|
||
--col-white: hsla(0, 0%, 100%, 1);
|
||
|
||
--col-orange-to-pink: linear-gradient(180deg, #ff6f48 0.04%, #f02aa6 100%);
|
||
--col-purple-to-pink: linear-gradient(180deg, #4851ff 0%, #f02aa6 99.92%);
|
||
|
||
--col-orange-to-pink-hover: linear-gradient(
|
||
0deg,
|
||
rgba(255, 255, 255, 0.5),
|
||
rgba(255, 255, 255, 0.5)
|
||
),
|
||
linear-gradient(180deg, #ff6f48 0%, #f02aa6 100%);
|
||
--col-purple-to-pink-hover: linear-gradient(
|
||
0deg,
|
||
rgba(255, 255, 255, 0.5),
|
||
rgba(255, 255, 255, 0.5)
|
||
),
|
||
linear-gradient(180deg, #4851ff -54.32%, #f02aa6 100%);
|
||
|
||
--col-white-to-off-white: linear-gradient(180deg, #ffffff 0%, #f0f1ff 100%);
|
||
|
||
/* Typography */
|
||
--fs-heading-xl: 3.5rem;
|
||
--lh-heading-xl: 4.4375rem;
|
||
--fw-headings: 800;
|
||
|
||
--fs-heading-l: 2.5rem;
|
||
--lh-heading-l: 3.1875rem;
|
||
|
||
--fs-heading-m: 1.5rem;
|
||
--lh-heading-m: 2rem;
|
||
|
||
--fs-heading-s: 1.25rem;
|
||
--lh-heading-s: 1.5625rem;
|
||
|
||
--fs-body-m: 1.125rem;
|
||
--lh-body-m: 1.75rem;
|
||
--fw-body-m: 500;
|
||
|
||
--fs-body-s: 1rem;
|
||
--lh-body-s: 1.625rem; /* design system says 28px / 1.75rem, but in the elements themselves its 26px / 1.625rem */
|
||
--fw-body-s: 500;
|
||
/* Sizing */
|
||
|
||
--border-radius: 1.75rem;
|
||
|
||
/* Other */
|
||
}
|
||
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
body {
|
||
min-height: 100vh;
|
||
font-family: "Plus Jakarta Sans", sans-serif;
|
||
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
background: var(--col-white-to-off-white);
|
||
}
|
||
|
||
.banner {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 1rem 1rem 0 1rem;
|
||
}
|
||
|
||
.logo {
|
||
width: 5.5625rem;
|
||
vertical-align: center;
|
||
}
|
||
|
||
.btn {
|
||
font-size: var(--fs-body-s);
|
||
line-height: var(--lh-body-s);
|
||
font-weight: 700;
|
||
|
||
padding: 0.625rem 1.5rem;
|
||
border-radius: var(--border-radius);
|
||
text-decoration: none;
|
||
}
|
||
|
||
.banner__getting-started {
|
||
background-color: var(--col-dark-purple);
|
||
color: var(--col-white);
|
||
}
|
||
|
||
.banner__getting-started:where(:focus, :hover) {
|
||
background-color: var(--col-medium-purple);
|
||
}
|
||
|
||
.intro {
|
||
margin-top: 2.375rem;
|
||
margin-inline: 1rem;
|
||
overflow: hidden;
|
||
}
|
||
.intro__header {
|
||
font-size: var(--fs-heading-l);
|
||
line-height: var(--lh-heading-l);
|
||
font-weight: var(--fw-headings);
|
||
|
||
color: var(--col-dark-purple);
|
||
}
|
||
|
||
.intro__body,
|
||
.card__body {
|
||
font-size: var(--fs-body-s);
|
||
line-height: var(--lh-body-s);
|
||
font-weight: var(--fw-body-s);
|
||
|
||
color: var(--col-light-purple);
|
||
}
|
||
.intro__body {
|
||
margin-top: 1.625rem;
|
||
}
|
||
.intro__getting-started {
|
||
display: inline-block;
|
||
margin-top: 1.5rem;
|
||
|
||
padding: 0.9375rem 2.3438rem;
|
||
|
||
background: var(--col-orange-to-pink);
|
||
color: var(--col-white);
|
||
align-self: center;
|
||
}
|
||
|
||
.intro__getting-started:where(:focus, :hover) {
|
||
background: var(--col-orange-to-pink-hover);
|
||
}
|
||
|
||
.intro__image {
|
||
display: block;
|
||
margin-top: 1.875rem;
|
||
/* width: 100%; */
|
||
z-index: -1;
|
||
}
|
||
|
||
.intro__image img {
|
||
display: block;
|
||
margin-left: -13%;
|
||
width: 125%;
|
||
}
|
||
|
||
main {
|
||
margin-inline: auto;
|
||
}
|
||
|
||
.cards {
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
margin-top: -1.125rem;
|
||
margin-inline: 1rem;
|
||
gap: 2.375rem;
|
||
|
||
justify-content: center;
|
||
|
||
max-width: 70rem;
|
||
}
|
||
.card {
|
||
border-radius: 0.625rem;
|
||
background: white;
|
||
|
||
padding-inline: 1.75rem;
|
||
|
||
max-width: 21.875rem;
|
||
}
|
||
.cards__header {
|
||
font-size: var(--fs-heading-m);
|
||
line-height: var(--lh-heading-m);
|
||
font-weight: var(--fw-headings);
|
||
|
||
color: var(--col-white);
|
||
background: var(--col-orange-to-pink);
|
||
padding: 1.5rem 1.875rem 2rem 1.6875rem;
|
||
}
|
||
.card__image {
|
||
position: relative;
|
||
width: 3.5rem;
|
||
height: 3.5rem;
|
||
top: -1.4375rem;
|
||
}
|
||
.card__header {
|
||
margin-top: 0rem;
|
||
|
||
font-size: var(--fs-heading-s);
|
||
line-height: var(--lh-heading-s);
|
||
font-weight: var(--fw-headings);
|
||
|
||
color: var(--col-dark-purple);
|
||
}
|
||
.card__body {
|
||
margin-top: 1rem;
|
||
}
|
||
.card__getting-started {
|
||
display: inline-block;
|
||
font-size: 1.125rem;
|
||
padding: unset;
|
||
margin-top: 1.5rem;
|
||
margin-bottom: 2rem;
|
||
|
||
color: var(--col-hot-pink);
|
||
}
|
||
|
||
.card__getting-started:where(:focus, :hover) {
|
||
color: var(--col-light-pink);
|
||
}
|
||
|
||
.footer {
|
||
margin-top: 5.25rem;
|
||
background: var(--col-dark-purple);
|
||
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 2.25rem 1rem;
|
||
}
|
||
|
||
.footer__getting-started {
|
||
background: var(--col-purple-to-pink);
|
||
color: var(--col-white);
|
||
}
|
||
|
||
.footer__getting-started:where(:focus, :hover) {
|
||
background: var(--col-purple-to-pink-hover);
|
||
}
|
||
|
||
@media screen and (min-width: 48rem) {
|
||
header {
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
.banner {
|
||
padding: 1.5rem 2.4688rem 0 2.4688rem;
|
||
}
|
||
.intro {
|
||
margin-top: 6.1875rem;
|
||
margin-left: 2.4688rem;
|
||
overflow: unset;
|
||
display: flex;
|
||
flex-direction: row;
|
||
flex: 1 0 50%;
|
||
/* width: 51%; */
|
||
padding-bottom: 13.125rem;
|
||
position: relative;
|
||
}
|
||
|
||
.intro > div {
|
||
flex-basis: 56%;
|
||
}
|
||
|
||
.intro__image {
|
||
display: block;
|
||
position: absolute;
|
||
top: -18.1875rem; /*-38vw;*/
|
||
right: -25.25rem; /*-52.5vw;*/
|
||
}
|
||
|
||
.intro__image img {
|
||
display: block;
|
||
/* margin-right: 113%; */
|
||
width: 43.4375rem;
|
||
}
|
||
|
||
.cards {
|
||
margin-top: unset;
|
||
margin-inline: 2.4688rem;
|
||
|
||
flex-direction: row;
|
||
flex-wrap: wrap;
|
||
gap: 0.6875rem;
|
||
row-gap: 3.3125rem;
|
||
}
|
||
|
||
.cards > * {
|
||
flex-basis: 49%;
|
||
}
|
||
|
||
.card {
|
||
padding-inline: 2rem 1.3125rem;
|
||
}
|
||
|
||
.cards__header {
|
||
padding: 3.5rem 1.3125rem 8.6875rem 2rem;
|
||
}
|
||
|
||
.footer {
|
||
margin-top: 5.5rem;
|
||
padding: 2.25rem 2.4688rem;
|
||
}
|
||
}
|
||
|
||
@media screen and (min-width: 90rem) {
|
||
/* 1440px */
|
||
:root {
|
||
--fs-heading-m: 2rem;
|
||
--lh-heading-m: 2.5rem;
|
||
|
||
--fs-heading-s: 1.5rem;
|
||
--lh-heading-s: 1.875rem;
|
||
}
|
||
|
||
.btn {
|
||
font-size: var(--fs-body-m);
|
||
line-height: var(--lh-body-m);
|
||
|
||
padding: 0.875rem 1.9688rem;
|
||
}
|
||
|
||
.banner {
|
||
padding: 1.5rem 10.3125rem 0 10.3125rem;
|
||
}
|
||
|
||
.intro {
|
||
margin-top: 10.875rem;
|
||
margin-left: 10.3125rem;
|
||
padding-bottom: 15.625rem;
|
||
}
|
||
|
||
.intro > div {
|
||
flex-basis: 38%;
|
||
}
|
||
|
||
.intro__header {
|
||
font-size: var(--fs-heading-xl);
|
||
line-height: var(--lh-heading-xl);
|
||
}
|
||
|
||
.intro__body {
|
||
font-size: var(--fs-body-m);
|
||
line-height: var(--lh-body-m);
|
||
}
|
||
|
||
.intro__getting-started {
|
||
padding: 1.1875rem 1.9375rem 1rem 2rem;
|
||
margin-top: 2.625rem;
|
||
}
|
||
|
||
.intro__image {
|
||
top: -26.9375rem; /*-38vw;*/
|
||
right: -30.375rem; /*-52.5vw;*/
|
||
}
|
||
|
||
.intro__image img {
|
||
width: 65.375rem;
|
||
}
|
||
|
||
.cards {
|
||
margin-inline: 10.3125rem;
|
||
gap: 1.875rem;
|
||
row-gap: 5rem;
|
||
}
|
||
|
||
.cards__header {
|
||
padding: 4rem 2rem 8.625rem 2rem;
|
||
}
|
||
|
||
.card {
|
||
display: flex;
|
||
flex-direction: column;
|
||
padding-inline: 2rem;
|
||
}
|
||
|
||
.card__header {
|
||
margin-top: 0.5rem;
|
||
}
|
||
|
||
.card__body {
|
||
margin-top: 1.5rem;
|
||
margin-bottom: 1.5rem;
|
||
font-size: var(--fs-body-m);
|
||
line-height: var(--lh-body-m);
|
||
}
|
||
|
||
.card__getting-started {
|
||
padding: unset;
|
||
/* margin-top: ; */
|
||
margin-top: auto;
|
||
margin-bottom: 2.5rem;
|
||
}
|
||
|
||
.logo {
|
||
width: 7.125rem;
|
||
}
|
||
|
||
.footer {
|
||
margin-top: 8.75rem;
|
||
padding: 2rem 10.3125rem;
|
||
}
|
||
}
|