515 lines
9.6 KiB
CSS
515 lines
9.6 KiB
CSS
/*
|
|
* Design sizes:
|
|
* 375x2215
|
|
* 768x2128
|
|
* 1440x1895
|
|
*/
|
|
|
|
*,
|
|
::before,
|
|
::after {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
img {
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
:root {
|
|
/* General Colors */
|
|
--col-dark-cyan: hsla(192, 37%, 48%, 1);
|
|
--col-lighter-cyan: hsla(192, 54%, 64%, 1);
|
|
--col-light-cyan: hsla(192, 90%, 77%, 1);
|
|
--col-dark-magenta: hsla(268, 34%, 53%, 1);
|
|
--col-lighter-magenta: hsla(268, 55%, 71%, 1);
|
|
--col-light-magenta: hsla(268, 100%, 86%, 1);
|
|
--col-dark-blue-gray: hsla(240, 21%, 20%, 1);
|
|
--col-light-gray: hsla(240, 10%, 57%, 1);
|
|
--col-slightly-off-white: hsla(0, 0%, 98%, 1);
|
|
|
|
/* */
|
|
--col-background: var(--col-slightly-off-white);
|
|
--col-background-footer: var(--col-dark-cyan);
|
|
--col-headers: var(--col-dark-blue-gray);
|
|
--col-body: var(--col-light-gray);
|
|
--col-button-text: white;
|
|
--col-button-download-ver-text: var(--col-light-magenta);
|
|
--col-button-download-background: var(--col-dark-magenta);
|
|
--col-button-download-background-hover: var(--col-lighter-magenta);
|
|
|
|
/* Typography */
|
|
--fs-page-header: 2.5rem;
|
|
--lh-page-header: 110%;
|
|
--fw-page-header: 900;
|
|
|
|
--fs-main-page-body: 1rem;
|
|
--lh-main-page-body: 162%;
|
|
--fw-main-page-body: 500;
|
|
|
|
--fs-sell-tag: 1rem;
|
|
--lh-sell-tag: 162%;
|
|
--ls-sell-tag: 4px;
|
|
--fw-sell-tag: 900;
|
|
|
|
--fs-second-heading: 2rem;
|
|
--lh-second-heading: 112%;
|
|
--fw-second-heading: 900;
|
|
|
|
--fs-footer-header: 2rem;
|
|
--lh-footer-header: 112%;
|
|
--fw-footer-header: 900;
|
|
|
|
--fs-footer-body: 1.125rem;
|
|
--lh-footer-body: 144%;
|
|
--fw-footer-body: 500;
|
|
|
|
--fs-button: 1rem;
|
|
--lh-button: 162%;
|
|
--fw-button: 900;
|
|
|
|
--fs-circle-number: 1rem;
|
|
--lh-circle-number: 162%;
|
|
|
|
--padding-btn: 1rem 2.5rem;
|
|
--border-radius-btn: 1.8125rem;
|
|
|
|
--image-footer: url(../assets/mobile/image-footer.jpg);
|
|
|
|
--line-height: 5.25rem;
|
|
}
|
|
|
|
body {
|
|
min-height: 100vh;
|
|
|
|
font-family: "Red Hat Display", sans-serif;
|
|
|
|
text-align: center;
|
|
|
|
background-color: var(--col-background);
|
|
}
|
|
|
|
.logo {
|
|
margin-top: 3rem;
|
|
width: unset;
|
|
height: 100%;
|
|
}
|
|
|
|
.hero-img {
|
|
margin-top: 3.175rem;
|
|
height: 9.5625rem;
|
|
object-fit: cover;
|
|
|
|
vertical-align: top;
|
|
}
|
|
|
|
.hero-img-left,
|
|
.hero-img-right {
|
|
display: none;
|
|
}
|
|
|
|
.primary-section__heading {
|
|
margin-top: 3rem;
|
|
margin-inline: auto;
|
|
|
|
width: 10ch;
|
|
|
|
color: var(--col-headers);
|
|
font-size: var(--fs-page-header);
|
|
line-height: var(--lh-page-header);
|
|
font-weight: var(--fw-page-header);
|
|
}
|
|
|
|
.primary-section__body {
|
|
margin-top: 1.5rem;
|
|
|
|
color: var(--col-body);
|
|
font-size: var(--fs-main-page-body);
|
|
line-height: var(--lh-main-page-body);
|
|
font-weight: var(--fw-main-page-body);
|
|
margin-inline: 1.5rem;
|
|
}
|
|
|
|
.btn-block {
|
|
margin-top: 2rem;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
justify-content: center;
|
|
|
|
--col-button-download-ver-text: var(--col-light-cyan);
|
|
--col-button-download-background: var(--col-dark-cyan);
|
|
--col-button-download-background-hover: var(--col-lighter-cyan);
|
|
}
|
|
|
|
.btn {
|
|
padding: var(--padding-btn);
|
|
border-radius: var(--border-radius-btn);
|
|
|
|
font-size: var(--fs-button);
|
|
line-height: var(--lh-button);
|
|
font-weight: var(--fw-button);
|
|
|
|
text-decoration: none;
|
|
display: inline-block;
|
|
align-self: center;
|
|
|
|
color: var(--col-button-text);
|
|
}
|
|
|
|
.btn span {
|
|
margin-left: 0.25rem;
|
|
}
|
|
|
|
.btn-download {
|
|
background-color: var(--col-button-download-background);
|
|
}
|
|
|
|
.btn-download span {
|
|
color: var(--col-button-download-ver-text);
|
|
}
|
|
|
|
.btn-download:where(:focus, :hover) {
|
|
background-color: var(--col-button-download-background-hover);
|
|
}
|
|
|
|
.btn-info {
|
|
--padding-btn: 1rem 1.8125rem;
|
|
margin-top: 1rem;
|
|
background-color: var(--col-dark-magenta);
|
|
}
|
|
|
|
.btn-info:where(:hover, :focus) {
|
|
background-color: var(--col-light-magenta);
|
|
}
|
|
|
|
.circle-plus-line {
|
|
margin-top: 4rem;
|
|
position: relative;
|
|
left: 50%;
|
|
border-left: 1px solid hsla(240, 10%, 57%, 0.25);
|
|
height: calc(var(--line-height) + 1.75rem);
|
|
width: 1px;
|
|
}
|
|
|
|
.circle-number {
|
|
position: relative;
|
|
border-radius: 50%;
|
|
padding: 0.9375rem 1rem;
|
|
|
|
font-size: 1rem;
|
|
line-height: 162%;
|
|
font-weight: 900;
|
|
color: var(--col-body);
|
|
background-color: var(--col-background);
|
|
|
|
text-align: center;
|
|
|
|
border: 1px solid hsla(240, 10%, 57%, 0.25);
|
|
width: 3.5rem;
|
|
|
|
top: var(--line-height);
|
|
left: calc(50% - 1.75rem);
|
|
}
|
|
|
|
.images-of-users {
|
|
margin-top: calc(4rem + 1.75rem);
|
|
|
|
display: flex;
|
|
flex-flow: row wrap;
|
|
justify-content: center;
|
|
gap: 1.5rem;
|
|
}
|
|
|
|
.images-of-users img {
|
|
flex: 0 0 40%;
|
|
width: 40%;
|
|
border-radius: 0.5rem;
|
|
}
|
|
|
|
.overline {
|
|
margin-top: 4rem;
|
|
text-transform: uppercase;
|
|
|
|
font-size: var(--fs-sell-tag);
|
|
line-height: var(--lh-sell-tag);
|
|
letter-spacing: var(--ls-sell-tag);
|
|
font-weight: var(--fw-sell-tag);
|
|
color: var(--col-dark-cyan);
|
|
}
|
|
|
|
.secondary-header {
|
|
margin-top: 1.5rem;
|
|
|
|
margin-inline: 1.5rem;
|
|
|
|
color: var(--col-headers);
|
|
font-size: var(--fs-second-heading);
|
|
line-height: var(--lh-second-heading);
|
|
font-weight: var(--fw-second-heading);
|
|
}
|
|
|
|
.secondary-body {
|
|
margin-top: 2rem;
|
|
margin-inline: 1.5rem;
|
|
|
|
color: var(--col-body);
|
|
font-size: var(--fs-main-page-body);
|
|
line-height: var(--lh-main-page-body);
|
|
font-weight: var(--fw-main-page-body);
|
|
}
|
|
|
|
.footer {
|
|
background: linear-gradient(
|
|
hsla(192, 37%, 48%, 0.9),
|
|
hsla(192, 37%, 48%, 0.9)
|
|
),
|
|
var(--image-footer) no-repeat top center;
|
|
background-size: contain;
|
|
|
|
color: var(--col-slightly-off-white);
|
|
|
|
padding: 3.625rem 1.5rem 4.5rem 1.5rem;
|
|
}
|
|
|
|
.footer__header {
|
|
margin-top: 2.25rem;
|
|
|
|
font-size: var(--fs-footer-header);
|
|
line-height: var(--lh-footer-header);
|
|
font-weight: var(--fw-footer-header);
|
|
}
|
|
|
|
.footer__body {
|
|
margin-top: 1.5rem;
|
|
|
|
font-size: var(--fs-footer-body);
|
|
line-height: var(--lh-footer-body);
|
|
font-weight: var(--fw-footer-body);
|
|
}
|
|
|
|
.footer .btn-download {
|
|
margin-top: 2rem;
|
|
}
|
|
|
|
@media screen and (min-width: 28.125rem) {
|
|
.primary-section__body,
|
|
.secondary-body {
|
|
width: 30ch;
|
|
margin-inline: auto;
|
|
}
|
|
|
|
.secondary-header {
|
|
width: 14ch;
|
|
margin-inline: auto;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 48rem) {
|
|
/* 768px */
|
|
:root {
|
|
/* Typography */
|
|
--fs-page-header: 3rem;
|
|
--lh-page-header: 100%;
|
|
|
|
--fs-second-heading: 2.5rem;
|
|
--lh-second-heading: 110%;
|
|
|
|
--fs-main-page-body: 1rem;
|
|
--lh-main-page-body: 162%;
|
|
|
|
--fs-footer-header: 2.5rem;
|
|
--lh-footer-header: 110%;
|
|
|
|
--image-footer: url(../assets/tablet/image-footer.jpg);
|
|
}
|
|
|
|
.hero-img {
|
|
margin-top: 3.75rem;
|
|
height: 18.9375rem;
|
|
}
|
|
|
|
.btn-block {
|
|
margin-top: 2rem;
|
|
flex-direction: row;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.primary-section__heading {
|
|
margin-top: 4.5rem;
|
|
}
|
|
|
|
.primary-section__body {
|
|
width: 40ch;
|
|
margin-inline: auto;
|
|
}
|
|
|
|
.btn-info {
|
|
margin-top: unset;
|
|
}
|
|
|
|
.circle-plus-line {
|
|
margin-top: 5rem;
|
|
}
|
|
|
|
.images-of-users {
|
|
margin-top: 6rem;
|
|
|
|
gap: 0.6875rem;
|
|
|
|
flex-flow: row nowrap;
|
|
}
|
|
|
|
.images-of-users img {
|
|
width: 10.25rem;
|
|
flex: unset;
|
|
}
|
|
|
|
.overline {
|
|
margin-top: 3rem;
|
|
}
|
|
|
|
.secondary-header {
|
|
margin-top: 1rem;
|
|
|
|
width: 16ch;
|
|
}
|
|
|
|
.secondary-body {
|
|
width: 49ch;
|
|
}
|
|
|
|
.footer {
|
|
margin: unset;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.footer__header {
|
|
margin-top: 2.125rem;
|
|
width: 14ch;
|
|
}
|
|
|
|
.footer__body {
|
|
margin-top: 2rem;
|
|
width: 48ch;
|
|
}
|
|
|
|
.footer .btn-download {
|
|
margin-top: 2.5rem;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 90rem) {
|
|
/* 1440px */
|
|
:root {
|
|
/* Typography */
|
|
--fs-page-header: 4rem;
|
|
--lh-page-header: 100%;
|
|
|
|
--fs-second-heading: 2.5rem;
|
|
--lh-second-heading: 110%;
|
|
|
|
--fs-main-page-body: 1.125rem;
|
|
--lh-main-page-body: 144%;
|
|
|
|
--fs-footer-header: 2.5rem;
|
|
--lh-footer-header: 110%;
|
|
|
|
--image-footer: url(../assets/desktop/image-footer.jpg);
|
|
}
|
|
|
|
.logo {
|
|
margin-top: 5rem;
|
|
}
|
|
|
|
.top-section {
|
|
margin-top: 3.75rem;
|
|
display: flex;
|
|
gap: 7.5rem;
|
|
justify-content: center;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.hero-img {
|
|
display: none;
|
|
}
|
|
|
|
.hero-img-left,
|
|
.hero-img-right {
|
|
display: block;
|
|
width: 24.625rem;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.hero-img-left {
|
|
align-self: flex-start;
|
|
}
|
|
|
|
.hero-img-right {
|
|
align-self: flex-end;
|
|
}
|
|
|
|
.primary-section__heading {
|
|
margin-top: 2.75rem;
|
|
|
|
justify-self: center;
|
|
}
|
|
|
|
.primary-section__body {
|
|
margin-top: 2.1875rem;
|
|
}
|
|
|
|
.circle-plus-line {
|
|
margin-top: 7.3125rem;
|
|
}
|
|
|
|
.btn-block {
|
|
margin-top: 2rem;
|
|
}
|
|
|
|
.images-of-users {
|
|
gap: 1.875rem;
|
|
margin-top: 5.625rem;
|
|
}
|
|
|
|
.images-of-users img {
|
|
width: 15.9375rem;
|
|
}
|
|
|
|
.overline {
|
|
margin-top: 5rem;
|
|
}
|
|
|
|
.footer {
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
gap: 5.5rem;
|
|
text-align: left;
|
|
|
|
padding: 7.25rem 0 6.5rem 0;
|
|
}
|
|
|
|
footer .circle-plus-line {
|
|
margin-top: 4.5rem;
|
|
}
|
|
|
|
.footer__header {
|
|
margin-top: unset;
|
|
}
|
|
|
|
.footer__body {
|
|
margin-top: unset;
|
|
|
|
width: 29ch;
|
|
}
|
|
|
|
.footer .btn-download {
|
|
margin-top: unset;
|
|
}
|
|
}
|