From 3eaa430a7050f7efed970b4df3bd178299adc946 Mon Sep 17 00:00:00 2001
From: Robert McGovern <rob@tarasis.net>
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 @@
     </div>
 
     <div class="intro">
-      <h1 class="intro__header">Maximize skill, minimize budget</h1>
-      <p class="intro__body">
-        Our modern courses across a range of in-demand skills will give you the
-        knowledge you need to live the life you want.
-      </p>
+      <div>
+        <h1 class="intro__header">Maximize skill, minimize budget</h1>
+        <p class="intro__body">
+          Our modern courses across a range of in-demand skills will give you the
+          knowledge you need to live the life you want.
+        </p>
 
-      <a class="btn intro__getting-started" href="">Get Started</a>
+        <a class="btn intro__getting-started" href="">Get Started</a>
+      </div>
 
       <picture class="intro__image">
         <source media="(min-width: 1440px)"