diff --git a/projects/FrontendMentor/newbie/skilled-elearning-landing-page/css/styles.css b/projects/FrontendMentor/newbie/skilled-elearning-landing-page/css/styles.css index a927c6d..4b78f0f 100644 --- a/projects/FrontendMentor/newbie/skilled-elearning-landing-page/css/styles.css +++ b/projects/FrontendMentor/newbie/skilled-elearning-landing-page/css/styles.css @@ -50,11 +50,11 @@ --fs-heading-l: 2.5rem; --lh-heading-l: 3.1875rem; - --fs-heading-m: 2rem; - --lh-heading-m: 2.5rem; + --fs-heading-m: 24px; + --lh-heading-m: 2rem; - --fs-heading-s: 1.5rem; - --lh-heading-s: 1.75rem; + --fs-heading-s: 20px; + --lh-heading-s: 25px; --fs-body-m: 1.125rem; --lh-body-m: 1.75rem; @@ -62,7 +62,7 @@ --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: 700; + --fw-body-s: 500; /* Sizing */ --border-radius: 1.75rem; @@ -70,13 +70,193 @@ /* 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); +} + +.header { +} +.banner { + display: flex; + justify-content: space-between; + align-items: center; + padding: 16px 16px 0px 16px; +} + +.logo { + width: 89px; + vertical-align: center; +} + +.banner__logo { +} + +.btn { + font-size: var(--fs-body-s); + line-height: var(--lh-body-s); + font-weight: 700; + + padding: 10px 24px; + 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: 38px; + margin-inline: 16px; + /* 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: 26px; +} +.intro__getting-started { + display: inline-block; + margin-top: 24px; + + padding: 15px 37.5px; + + background: var(--col-orange-to-pink); + color: var(--col-white); + align-self: center; +} + +.intro__image { + display: block; + margin-top: 30px; + /* width: 100%; */ +} + +.intro__image img { + display: block; + margin-left: -13%; + width: 125%; +} +.hero_img { +} +.cards { + display: flex; + flex-direction: column; + + margin-top: -60px; + margin-inline: 16px; +} +.card { + display: flex; + flex-direction: column; + + border-radius: 10px; + background: white; + + margin-top: 42px; + padding-inline: 28px; + + max-width: 350px; +} +.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: 24px 30px 32px 27px; +} +.card__image { + position: relative; + width: 56px; + top: -28px; +} +.card__header { + margin-top: 0px; + + 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: 16px; +} +.card__getting-started { + font-size: 1.125rem; + padding: unset; + margin-top: 24px; + margin-bottom: 32px; + + color: var(--col-hot-pink); +} + +.card__getting-started:where(:focus, :hover) { + color: var(--col-light-pink); +} + +.footer { + margin-top: 80px; + background: var(--col-dark-purple); + + display: flex; + justify-content: space-between; + align-items: center; + padding: 36px 16px; +} +.footer__logo { +} + +.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: 768px) { } @media screen and (min-width: 1440px) { + :root { + --fs-heading-m: 2rem; + --lh-heading-m: 2.5rem; + + --fs-heading-s: 24px; + --lh-heading-s: 30px; + } } diff --git a/projects/FrontendMentor/newbie/skilled-elearning-landing-page/index.html b/projects/FrontendMentor/newbie/skilled-elearning-landing-page/index.html index 387c7e9..fd89149 100644 --- a/projects/FrontendMentor/newbie/skilled-elearning-landing-page/index.html +++ b/projects/FrontendMentor/newbie/skilled-elearning-landing-page/index.html @@ -21,21 +21,21 @@
-
- - Get Started + -
-

Maximize skill, minimize budget

-

+

+

Maximize skill, minimize budget

+

Our modern courses across a range of in-demand skills will give you the knowledge you need to live the life you want.

- Get Started + Get Started - + @@ -78,68 +78,68 @@
-
+
-

Check out our most popular courses!

+

Check out our most popular courses!

-
- + -

Animation

-

+

Animation

+

Learn the latest animation techniques to create stunning motion design and captivate your audience.

- Get Started + Get Started
-
- + -

Design

-

+

Design

+

Create beautiful, usable interfaces to help shape the future of how the web looks.

- Get Started + Get Started
-
- + -

Photography

-

+

Photography

+

Explore critical fundamentals like lighting, composition, and focus to capture exceptional photos.

- Get Started + Get Started
-
- + -

Crypto

-

+

Crypto

+

All you need to know to get started investing in crypto. Go from beginner to advanced with this 54 hour course.

- Get Started + Get Started
-
- + -

Business

-

+

Business

+

A step-by-step playbook to help you start, scale, and sustain your business without outside investment.

- Get Started + Get Started