diff --git a/css/main.css b/css/main.css index 7653175..9843c49 100644 --- a/css/main.css +++ b/css/main.css @@ -881,6 +881,104 @@ section#how { color: var(--color-gray-700); } +section#payment { + display: none; +} + +.payment-container { + margin-top: 8rem; + margin-bottom: 8rem; + padding-inline: 8rem; + display: grid; + grid-template-columns: 1fr 1.1fr; + justify-content: start; + align-items: center; + gap: 8rem 4rem; +} +.payment-container h2 { + font-size: var(--fs-h2); + line-height: 1.3; +} +.payment-container li { + color: var(--color-paragraph); +} +.payment-container ul { + margin-top: 2rem; + list-style-type: none; +} +.payment-container li { + display: flex; +} +.payment-container li img { + margin-right: 0.5rem; +} +.payment-container li:not(:first-child) { + margin-top: 1rem; +} +.payment-container .btn-learn-more { + width: 160px; + border-radius: 6px; + margin-top: 3rem; + font-size: var(--fs-body-s); + font-weight: var(--fw-semi); + line-height: 1.6; +} +.payment-container .btn-learn-more i { + margin-left: 1rem; +} +.payment-container .cards { + display: flex; + margin-top: 2rem; + gap: 2rem; +} +.payment-container .card { + flex-basis: 100%; +} +.payment-container .card p { + margin-top: 1rem; +} +.payment-container .card-img-container { + flex-shrink: 0; /*Prevent flex container from shrinking box below 60x60*/ + display: flex; + justify-content: center; + align-items: center; + width: 60px; + height: 60px; + background-color: var(--color-feature-cards-img-bg); + border-radius: 8px; +} +.payment-container .img-container { + position: relative; + flex-shrink: 0; +} +.payment-container .img-payment, .payment-container .img-transfer { + position: absolute; +} +.payment-container .img-container.top { + width: 470px; + height: 452px; +} +.payment-container .img-transfer.back { + top: 0; + left: 0; +} +.payment-container .img-transfer.front { + top: 335px; + left: 210px; +} +.payment-container .img-container.bottom { + width: 458px; + height: 450px; +} +.payment-container .img-payment.back { + top: 0; + left: 0; +} +.payment-container .img-payment.front { + top: 105px; + left: 135px; +} + @media (768px <= width) { /* Change margin & padding */ :root { diff --git a/css/scss/sections/_index.scss b/css/scss/sections/_index.scss index 2faedf5..86b6ed5 100644 --- a/css/scss/sections/_index.scss +++ b/css/scss/sections/_index.scss @@ -2,4 +2,5 @@ @forward './hero'; @forward './features'; @forward './how'; +@forward './payment'; @forward './footer'; \ No newline at end of file diff --git a/css/scss/sections/_payment.scss b/css/scss/sections/_payment.scss new file mode 100644 index 0000000..684205e --- /dev/null +++ b/css/scss/sections/_payment.scss @@ -0,0 +1,113 @@ +section#payment { + display: none; +} + +.payment-container { + margin-top: 8rem; + margin-bottom: 8rem; + padding-inline: 8rem; + display: grid; + grid-template-columns: 1fr 1.1fr; + justify-content: start; + align-items: center; + gap: 8rem 4rem; + + h2 { + font-size: var(--fs-h2); + line-height: 1.3; + } + + li { + color: var(--color-paragraph); + } + + ul { + margin-top: 2rem; + list-style-type: none; + } + + li { + display: flex; + img { + margin-right: .5rem; + } + } + + li:not(:first-child) { + margin-top: 1rem; + } + + .btn-learn-more { + width: 160px; + border-radius: 6px; + margin-top: 3rem; + font-size: var(--fs-body-s); + font-weight: var(--fw-semi); + line-height: 1.6; + i { + margin-left: 1rem; + } + } + + .cards { + display: flex; + margin-top: 2rem; + gap: 2rem; + } + + .card { + flex-basis: 100%; + p { + margin-top: 1rem; + } + } + + .card-img-container { + flex-shrink: 0; /*Prevent flex container from shrinking box below 60x60*/ + display: flex; + justify-content: center; + align-items: center; + width: 60px; + height: 60px; + background-color: var(--color-feature-cards-img-bg); + border-radius: 8px; + } + + .img-container { + position: relative; + flex-shrink: 0; + } + .img-payment, .img-transfer { + position: absolute; + } + + .img-container.top { + width: 470px; + height: 452px; + } + + .img-transfer.back { + top: 0; + left: 0; + } + + .img-transfer.front { + top: 335px; + left: 210px; + } + + .img-container.bottom { + width: 458px; + height: 450px; + } + + .img-payment.back { + top: 0; + left: 0; + } + + .img-payment.front { + top: 105px; + left: 135px;; + } +} \ No newline at end of file