From 3eaa430a7050f7efed970b4df3bd178299adc946 Mon Sep 17 00:00:00 2001 From: Robert McGovern Date: Thu, 3 Nov 2022 12:44:02 +0000 Subject: [PATCH] finished tablet, but its not responsive yet --- .../css/styles.css | 74 +++++++++++++++++++ .../skilled-elearning-landing-page/index.html | 14 ++-- 2 files changed, 82 insertions(+), 6 deletions(-) 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 fdcee32..bc8d7b6 100644 --- a/projects/FrontendMentor/newbie/skilled-elearning-landing-page/css/styles.css +++ b/projects/FrontendMentor/newbie/skilled-elearning-landing-page/css/styles.css @@ -201,6 +201,7 @@ body { .card__image { position: relative; width: 56px; + height: 56px; top: -23px; } .card__header { @@ -251,6 +252,79 @@ body { } @media screen and (min-width: 768px) { + header { + position: relative; + overflow: hidden; + } + .banner { + display: flex; + flex-direction: row; + /* justify-content: space-between; */ + align-items: center; + padding: 24px 39.5px 0px 39.5px; + } + .intro { + margin-top: 99px; + margin-left: 39.5px; + overflow: unset; + display: flex; + flex-direction: row; + flex: 1 0 50%; + /* width: 51%; */ + padding-bottom: 210px; + position: relative; + } + + .intro > div { + flex-basis: 56%; + } + + .intro__image { + display: block; + position: absolute; + top: -291px; /*-38vw;*/ + right: -404px; /*-52.5vw;*/ + } + + .intro__image img { + display: block; + /* margin-right: 113%; */ + width: 695px; + } + + .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; */ + flex-direction: row; + flex-wrap: wrap; + gap: 11px; + row-gap: 53px; + } + + .cards > * { + /* flex-shrink: 0; */ + flex-basis: 49%; + } + + .card { + padding-inline: 32px 21px; + /* margin-inline-start: 32px; */ + } + + .cards__header { + padding: 56px 21px 139px 32px; + } + + .footer { + margin-top: 88px; + padding: 36px 39.5px; + } } @media screen and (min-width: 1440px) { diff --git a/projects/FrontendMentor/newbie/skilled-elearning-landing-page/index.html b/projects/FrontendMentor/newbie/skilled-elearning-landing-page/index.html index fd89149..62857ea 100644 --- a/projects/FrontendMentor/newbie/skilled-elearning-landing-page/index.html +++ b/projects/FrontendMentor/newbie/skilled-elearning-landing-page/index.html @@ -27,13 +27,15 @@
-

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. -

+
+

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 +