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 4806e3d..3202eae 100644 --- a/projects/FrontendMentor/newbie/skilled-elearning-landing-page/css/styles.css +++ b/projects/FrontendMentor/newbie/skilled-elearning-landing-page/css/styles.css @@ -44,17 +44,17 @@ /* Typography */ --fs-heading-xl: 3.5rem; - --lh-heading-xl: 71px; + --lh-heading-xl: 4.4375rem; --fw-headings: 800; --fs-heading-l: 2.5rem; --lh-heading-l: 3.1875rem; - --fs-heading-m: 24px; + --fs-heading-m: 1.5rem; --lh-heading-m: 2rem; - --fs-heading-s: 20px; - --lh-heading-s: 25px; + --fs-heading-s: 1.25rem; + --lh-heading-s: 1.5625rem; --fs-body-m: 1.125rem; --lh-body-m: 1.75rem; @@ -91,11 +91,11 @@ body { display: flex; justify-content: space-between; align-items: center; - padding: 16px 16px 0px 16px; + padding: 1rem 1rem 0 1rem; } .logo { - width: 89px; + width: 5.5625rem; vertical-align: center; } @@ -107,7 +107,7 @@ body { line-height: var(--lh-body-s); font-weight: 700; - padding: 10px 24px; + padding: 0.625rem 1.5rem; border-radius: var(--border-radius); text-decoration: none; } @@ -122,8 +122,8 @@ body { } .intro { - margin-top: 38px; - margin-inline: 16px; + margin-top: 2.375rem; + margin-inline: 1rem; overflow: hidden; } .intro__header { @@ -143,23 +143,28 @@ body { color: var(--col-light-purple); } .intro__body { - margin-top: 26px; + margin-top: 1.625rem; } .intro__getting-started { display: inline-block; - margin-top: 24px; + margin-top: 1.5rem; - padding: 15px 37.5px; + 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: 30px; + margin-top: 1.875rem; /* width: 100%; */ + z-index: -1; } .intro__image img { @@ -173,21 +178,17 @@ body { display: flex; flex-direction: column; - margin-top: -18px; - margin-inline: 16px; - gap: 38px; + margin-top: -1.125rem; + margin-inline: 1rem; + gap: 2.375rem; } .card { - /* display: flex; - flex-direction: column; */ - - border-radius: 10px; + border-radius: 0.625rem; background: white; - /* margin-top: 42px; */ - padding-inline: 28px; + padding-inline: 1.75rem; - max-width: 350px; + max-width: 21.875rem; } .cards__header { font-size: var(--fs-heading-m); @@ -196,16 +197,16 @@ body { color: var(--col-white); background: var(--col-orange-to-pink); - padding: 24px 30px 32px 27px; + padding: 1.5rem 1.875rem 2rem 1.6875rem; } .card__image { position: relative; - width: 56px; - height: 56px; - top: -23px; + width: 3.5rem; + height: 3.5rem; + top: -1.4375rem; } .card__header { - margin-top: 0px; + margin-top: 0rem; font-size: var(--fs-heading-s); line-height: var(--lh-heading-s); @@ -214,14 +215,14 @@ body { color: var(--col-dark-purple); } .card__body { - margin-top: 16px; + margin-top: 1rem; } .card__getting-started { display: inline-block; font-size: 1.125rem; padding: unset; - margin-top: 24px; - margin-bottom: 32px; + margin-top: 1.5rem; + margin-bottom: 2rem; color: var(--col-hot-pink); } @@ -231,13 +232,13 @@ body { } .footer { - margin-top: 84px; + margin-top: 5.25rem; background: var(--col-dark-purple); display: flex; justify-content: space-between; align-items: center; - padding: 36px 16px; + padding: 2.25rem 1rem; } .footer__logo { } @@ -257,17 +258,17 @@ body { overflow: hidden; } .banner { - padding: 24px 39.5px 0px 39.5px; + padding: 1.5rem 2.4688rem 0 2.4688rem; } .intro { - margin-top: 99px; - margin-left: 39.5px; + margin-top: 6.1875rem; + margin-left: 2.4688rem; overflow: unset; display: flex; flex-direction: row; flex: 1 0 50%; /* width: 51%; */ - padding-bottom: 210px; + padding-bottom: 13.125rem; position: relative; } @@ -278,48 +279,41 @@ body { .intro__image { display: block; position: absolute; - top: -291px; /*-38vw;*/ - right: -404px; /*-52.5vw;*/ + top: -18.1875rem; /*-38vw;*/ + right: -25.25rem; /*-52.5vw;*/ } .intro__image img { display: block; /* margin-right: 113%; */ - width: 695px; + width: 43.4375rem; } .cards { margin-top: unset; - margin-inline: 39.5px; - /* display: grid; - gap: unset; - row-gap: 2.5em; - column-gap: 1.5em; - grid-template-columns: repeat(2, 1fr); */ - /* margin-top: 210px; */ + margin-inline: 2.4688rem; + flex-direction: row; flex-wrap: wrap; - gap: 11px; - row-gap: 53px; + gap: 0.6875rem; + row-gap: 3.3125rem; } .cards > * { - /* flex-shrink: 0; */ flex-basis: 49%; } .card { - padding-inline: 32px 21px; - /* margin-inline-start: 32px; */ + padding-inline: 2rem 1.3125rem; } .cards__header { - padding: 56px 21px 139px 32px; + padding: 3.5rem 1.3125rem 8.6875rem 2rem; } .footer { - margin-top: 88px; - padding: 36px 39.5px; + margin-top: 5.5rem; + padding: 2.25rem 2.4688rem; } } @@ -328,25 +322,25 @@ body { --fs-heading-m: 2rem; --lh-heading-m: 2.5rem; - --fs-heading-s: 24px; - --lh-heading-s: 30px; + --fs-heading-s: 1.5rem; + --lh-heading-s: 1.875rem; } .btn { font-size: var(--fs-body-m); line-height: var(--lh-body-m); - padding: 14px 31.5px; + padding: 0.875rem 1.9688rem; } .banner { - padding: 24px 165px 0 165px; + padding: 1.5rem 10.3125rem 0 10.3125rem; } .intro { - margin-top: 174px; - margin-left: 165px; - padding-bottom: 250px; + margin-top: 10.875rem; + margin-left: 10.3125rem; + padding-bottom: 15.625rem; } .intro > div { @@ -364,39 +358,42 @@ body { } .intro__getting-started { - padding: 19px 31px 16px 32px; - margin-top: 42px; + padding: 1.1875rem 1.9375rem 1rem 2rem; + margin-top: 2.625rem; } .intro__image { - top: -431px; /*-38vw;*/ - right: -486px; /*-52.5vw;*/ + top: -26.9375rem; /*-38vw;*/ + right: -30.375rem; /*-52.5vw;*/ } .intro__image img { - width: 1046px; + width: 65.375rem; } .cards { - margin-inline: 165px; - gap: 30px; - row-gap: 80px; + margin-inline: 10.3125rem; + gap: 1.875rem; + row-gap: 5rem; } .cards__header { - padding: 64px 32px 138px 32px; + padding: 4rem 2rem 8.625rem 2rem; } .card { - padding-inline: 32px; + display: flex; + flex-direction: column; + padding-inline: 2rem; } .card__header { - margin-top: 4px; + margin-top: 0.5rem; } .card__body { - margin-top: 24px; + margin-top: 1.5rem; + margin-bottom: 1.5rem; font-size: var(--fs-body-m); line-height: var(--lh-body-m); } @@ -404,15 +401,16 @@ body { .card__getting-started { padding: unset; /* margin-top: ; */ - margin-bottom: 40px; + margin-top: auto; + margin-bottom: 2.5rem; } .logo { - width: 114px; + width: 7.125rem; } .footer { - margin-top: 140px; - padding: 32px 165px; + margin-top: 8.75rem; + padding: 2rem 10.3125rem; } } diff --git a/projects/FrontendMentor/newbie/skilled-elearning-landing-page/screenshots/desktop.png b/projects/FrontendMentor/newbie/skilled-elearning-landing-page/screenshots/desktop.png new file mode 100644 index 0000000..c6cc763 Binary files /dev/null and b/projects/FrontendMentor/newbie/skilled-elearning-landing-page/screenshots/desktop.png differ diff --git a/projects/FrontendMentor/newbie/skilled-elearning-landing-page/screenshots/mobile.png b/projects/FrontendMentor/newbie/skilled-elearning-landing-page/screenshots/mobile.png new file mode 100644 index 0000000..4f66ebd Binary files /dev/null and b/projects/FrontendMentor/newbie/skilled-elearning-landing-page/screenshots/mobile.png differ diff --git a/projects/FrontendMentor/newbie/skilled-elearning-landing-page/screenshots/tablet.png b/projects/FrontendMentor/newbie/skilled-elearning-landing-page/screenshots/tablet.png new file mode 100644 index 0000000..5229bac Binary files /dev/null and b/projects/FrontendMentor/newbie/skilled-elearning-landing-page/screenshots/tablet.png differ