From 52492563397630dbd574b8bed7e4538af0cb0117 Mon Sep 17 00:00:00 2001
From: Robert McGovern <rob@tarasis.net>
Date: Thu, 3 Nov 2022 00:49:01 +0000
Subject: [PATCH] nearly finished mobile layout

---
 .../css/styles.css                            | 190 +++++++++++++++++-
 .../skilled-elearning-landing-page/index.html |  72 +++----
 2 files changed, 221 insertions(+), 41 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 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 @@
 
   <header class="header">
 
-    <div>
-      <img class="logo header__logo" src="assets/logo-dark.svg" alt="skilled logo">
-      <a class="btn header__getting-started" href="">Get Started</a>
+    <div class="banner">
+      <img class="logo banner__logo" src="assets/logo-dark.svg" alt="skilled logo">
+      <a class="btn banner__getting-started" href="">Get Started</a>
     </div>
 
-    <div>
-      <h1>Maximize skill, minimize budget</h1>
-      <p>
+    <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>
 
-      <a href="">Get Started</a>
+      <a class="btn intro__getting-started" href="">Get Started</a>
 
-      <picture>
+      <picture class="intro__image">
         <source media="(min-width: 1440px)"
           srcset="assets/image-hero-desktop@2x.webp 2x, assets/image-hero-desktop.webp" type="image/webp">
         <source media="(min-width: 1440px)" srcset="assets/image-hero-desktop@2x.png 2x, assets/image-hero-desktop.png">
@@ -78,68 +78,68 @@
 
 
   <main>
-    <section>
+    <section class="cards">
 
-      <h2>Check out our most popular courses!</h2>
+      <h2 class="card cards__header">Check out our most popular courses!</h2>
 
-      <article>
-        <img src="assets/icon-animation.svg"
+      <article class="card">
+        <img class="card__image" src="assets/icon-animation.svg"
           alt="Stylised image of Person running, inside a circle with a gradient from orange to pink"
           aria-hidden="true">
-        <h3>Animation</h3>
-        <p>
+        <h3 class="card__header">Animation</h3>
+        <p class="card__body">
           Learn the latest animation techniques to create stunning motion design and captivate your audience.
         </p>
-        <a href="">Get Started</a>
+        <a class="btn card__getting-started" href="">Get Started</a>
       </article>
 
-      <article>
-        <img src="assets/icon-design.svg"
+      <article class="card">
+        <img class="card__image" src="assets/icon-design.svg"
           alt="Stylised image of Picture, inside a circle with a gradient from orange to pink" aria-hidden="true">
-        <h3>Design</h3>
-        <p>
+        <h3 class="card__header">Design</h3>
+        <p class="card__body">
           Create beautiful, usable interfaces to help shape the future of how the web looks.
         </p>
-        <a href="">Get Started</a>
+        <a class="btn card__getting-started" href="">Get Started</a>
       </article>
 
-      <article>
-        <img src="assets/icon-photography.svg"
+      <article class="card">
+        <img class="card__image" src="assets/icon-photography.svg"
           alt="Stylised image of a Camera, inside a circle with a gradient from orange to pink" aria-hidden="true">
-        <h3>Photography</h3>
-        <p>
+        <h3 class="card__header">Photography</h3>
+        <p class="card__body">
           Explore critical fundamentals like lighting, composition, and focus to capture exceptional photos.
         </p>
-        <a href="">Get Started</a>
+        <a class="btn card__getting-started" href="">Get Started</a>
       </article>
 
-      <article>
-        <img src="assets/icon-crypto.svg"
+      <article class="card">
+        <img class="card__image" src="assets/icon-crypto.svg"
           alt="Stylised image of 8 dots, inside a circle with a gradient from orange to pink" aria-hidden="true">
-        <h3>Crypto</h3>
-        <p>
+        <h3 class="card__header">Crypto</h3>
+        <p class="card__body">
           All you need to know to get started investing in crypto. Go from beginner to advanced with this 54 hour
           course.
         </p>
-        <a href="">Get Started</a>
+        <a class="btn card__getting-started" href="">Get Started</a>
       </article>
 
-      <article>
-        <img src="assets/icon-business.svg"
+      <article class="card">
+        <img class="card__image" src="assets/icon-business.svg"
           alt="Stylised image of Bag with handles, inside a circle with a gradient from orange to pink"
           aria-hidden="true">
-        <h3>Business</h3>
-        <p>
+        <h3 class="card__header">Business</h3>
+        <p class="card__body">
           A step-by-step playbook to help you start, scale, and sustain your business without outside investment.
         </p>
-        <a href="">Get Started</a>
+        <a class="btn card__getting-started" href="">Get Started</a>
       </article>
 
     </section>
   </main>
 
   <footer class="footer">
-    <img class="logo footer_logo" src="assets/logo-light.svg" alt="skilled logo">
+    <img class="logo footer__logo" src="assets/logo-light.svg" alt="skilled logo">
     <a class="btn footer__getting-started" href="">Get Started</a>
   </footer>