have mobile working, needs tidy up

projects/FrontendMentor/newbie/meet-landing-page/css/style.css

@@ -1,8 +1,8 @@
 /*
  * Design sizes:
  *      375x2215
- *      768x540
+ *      768x2128
- *      1440x308
+ *      1440x1895
  */
 
 *,
@@ -13,11 +13,18 @@
     box-sizing: border-box;
 }
 
+img {
+    width: 100%;
+    height: auto;
+}
+
 :root {
     /* General Colors */
     --col-dark-cyan: hsla(192, 37%, 48%, 1);
+    --col-lighter-cyan: hsla(192, 54%, 64%, 1);
     --col-light-cyan: hsla(192, 90%, 77%, 1);
     --col-dark-magenta: hsla(268, 34%, 53%, 1);
+    --col-lighter-magenta: hsla(268, 55%, 71%, 1);
     --col-light-magenta: hsla(268, 100%, 86%, 1);
     --col-dark-blue-gray: hsla(240, 21%, 20%, 1);
     --col-light-gray: hsla(240, 10%, 57%, 1);
@@ -25,11 +32,13 @@
 
     /*  */
     --col-background: var(--col-slightly-off-white);
+    --col-background-footer: var(--col-dark-cyan);
     --col-headers: var(--col-dark-blue-gray);
     --col-body: var(--col-light-gray);
     --col-button-text: white;
-    --col-button-background: var(--col-dark-magenta);
+    --col-button-download-ver-text: var(--col-light-magenta);
-    --col-button-background-hover: var(--col-light-magenta);
+    --col-button-download-background: var(--col-dark-magenta);
+    --col-button-download-background-hover: var(--col-lighter-magenta);
 
     /* Typography */
     --fs-page-header: 2.5rem;
@@ -61,13 +70,244 @@
     --lh-button: 162%;
     --fw-button: 900;
 
+    --fs-circle-number: 1rem;
+    --lh-circle-number: 162%;
+
     --padding-btn: 1rem 2.5rem;
+    --border-radius-btn: 1.8125rem;
+
+    --image-footer: url(../assets/mobile/image-footer.jpg);
+
+    --line-height: 5.25rem;
 }
 
 body {
     height: 100vh;
 
     font-family: "Red Hat Display", sans-serif;
+
+    text-align: center;
+}
+
+.logo {
+    margin-top: 3rem;
+    width: unset;
+    height: 100%;
+}
+
+.hero-img {
+    /* height: 100%; */
+}
+
+.hero-img {
+    outline: 1px solid red;
+    margin-top: 3.175rem;
+    height: 153px;
+    object-fit: cover;
+
+    vertical-align: top;
+}
+
+.hero-img-left,
+.hero-img-right {
+    display: none;
+}
+
+.hero-img-left img,
+.hero-img-right img {
+}
+
+.primary-section__heading {
+    margin-top: 3rem;
+    margin-inline: auto;
+
+    width: 10ch;
+
+    color: var(--col-headers);
+    font-size: var(--fs-page-header);
+    line-height: var(--lh-page-header);
+    font-weight: var(--fw-page-header);
+}
+
+.primary-section__body {
+    margin-top: 1.5rem;
+
+    color: var(--col-body);
+    font-size: var(--fs-main-page-body);
+    line-height: var(--lh-main-page-body);
+    font-weight: var(--fw-main-page-body);
+    width: 30ch;
+    margin-inline: auto;
+}
+
+.btn-block {
+    display: flex;
+    flex-direction: column;
+
+    justify-content: center;
+
+    --col-button-download-ver-text: var(--col-light-cyan);
+    --col-button-download-background: var(--col-dark-cyan);
+    --col-button-download-background-hover: var(--col-lighter-cyan);
+}
+
+.btn {
+    padding: var(--padding-btn);
+    border-radius: var(--border-radius-btn);
+
+    font-size: var(--fs-button);
+    line-height: var(--lh-button);
+    font-weight: var(--fw-button);
+
+    text-decoration: none;
+    display: inline-block;
+    align-self: center;
+
+    color: var(--col-button-text);
+}
+
+.btn span {
+    margin-left: 0.25rem;
+}
+
+.btn-download {
+    margin-top: 2rem;
+    background-color: var(--col-button-download-background);
+}
+
+.btn-download span {
+    color: var(--col-button-download-ver-text);
+}
+
+.btn-download:where(:focus, :hover) {
+    background-color: var(--col-button-download-background-hover);
+}
+
+.btn-info {
+    --padding-btn: 1rem 1.8125rem;
+    margin-top: 1rem;
+    background-color: var(--col-dark-magenta);
+}
+
+.btn-info:where(:hover, :focus) {
+    background-color: var(--col-light-magenta);
+}
+
+.circle-plus-line {
+    margin-top: 4rem;
+    position: relative;
+    left: 50%;
+    border-left: 1px solid hsla(240, 10%, 57%, 0.25);
+    height: calc(var(--line-height) + 1.75rem);
+    width: 1px;
+}
+
+.circle-number {
+    position: relative;
+    border-radius: 50%;
+    padding: 15px 16px;
+
+    font-size: 1rem;
+    line-height: 162%;
+    font-weight: 900;
+    color: var(--col-body);
+    background-color: var(--col-background);
+
+    text-align: center;
+
+    border: 1px solid hsla(240, 10%, 57%, 0.25);
+    width: 3.5rem;
+
+    /* top: 1.75rem; */
+    top: var(--line-height);
+    left: calc(50% - 1.75rem);
+}
+
+.images-of-users {
+    margin-top: calc(4rem + 28px);
+    /* height: 19.375rem; */
+    /* display: flex;
+    justify-content: space-around;
+    flex-wrap: wrap; */
+
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: center;
+    gap: 24px;
+}
+
+.images-of-users img {
+    /* width: auto; */
+    /* height: 100%; */
+    /* flex: 0 1 auto; */
+    flex: 0 0 40%;
+    width: 40%;
+    border-radius: 0.5rem;
+}
+
+.outline {
+    margin-top: 4rem;
+    text-transform: uppercase;
+
+    font-size: var(--fs-sell-tag);
+    line-height: var(--lh-sell-tag);
+    letter-spacing: var(--ls-sell-tag);
+    font-weight: var(--fw-sell-tag);
+    color: var(--col-dark-cyan);
+}
+
+.secondary-header {
+    margin-top: 1.5rem;
+
+    margin-inline: auto;
+
+    color: var(--col-headers);
+    font-size: var(--fs-second-heading);
+    line-height: var(--lh-second-heading);
+    font-weight: var(--fw-second-heading);
+
+    width: 14ch;
+}
+
+.secondary-body {
+    margin-top: 2rem;
+    margin-inline: auto;
+
+    width: 30ch;
+
+    color: var(--col-body);
+    font-size: var(--fs-main-page-body);
+    line-height: var(--lh-main-page-body);
+    font-weight: var(--fw-main-page-body);
+}
+
+.footer {
+    background: linear-gradient(
+            hsla(192, 37%, 48%, 0.9),
+            hsla(192, 37%, 48%, 0.9)
+        ),
+        var(--image-footer) no-repeat top center;
+    background-size: contain;
+
+    color: var(--col-slightly-off-white);
+
+    padding: 58px 1.5rem 4.5rem 1.5rem;
+}
+
+.footer__header {
+    margin-top: 2.25rem;
+
+    font-size: var(--fs-footer-header);
+    line-height: var(--lh-footer-header);
+    font-weight: var(--fw-footer-header);
+}
+
+.footer__body {
+    margin-top: 1.5rem;
+
+    font-size: var(--fs-footer-body);
+    line-height: var(--lh-footer-body);
+    font-weight: var(--fw-footer-body);
 }
 
 @media screen and (min-width: 48rem) {
@@ -82,9 +322,51 @@ body {
 
         --fs-main-page-body: 1.125rem;
         --lh-main-page-body: 144%;
+
+        --fs-footer-header: 2.5rem;
+        --lh-footer-header: 110%;
+
+        --image-footer: url(../assets/tablet/image-footer.jpg);
+    }
+
+    .btn-download {
+        margin-top: 2.5rem;
+    }
+
+    .footer {
+        margin: unset;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .footer__header {
+        width: 15ch;
+    }
+
+    .footer__body {
+        margin-top: 2rem;
+        width: 48ch;
     }
 }
 
 @media screen and (min-width: 90rem) {
     /* 1440px */
+    :root {
+        --image-footer: url(../assets/desktop/image-footer.jpg);
+    }
+
+    .circle-number {
+    }
+
+    .footer {
+        flex-direction: row;
+        justify-content: center;
+        gap: 4.6875rem;
+        text-align: left;
+    }
+
+    .footer__body {
+        width: 29ch;
+    }
 }

projects/FrontendMentor/newbie/meet-landing-page/index.html

@@ -17,53 +17,71 @@
 <body>
   <header>
     <picture>
-      <img src="assets/logo.svg" alt="Logo of Meet">
+      <img class="logo" src="assets/logo.svg" alt="Logo of Meet">
     </picture>
   </header>
 
   <main>
     <section>
-      <picture>
+      <!-- <picture class="hero-img"> -->
-        <img src="assets/tablet/image-hero.png" alt="Image of users of meet" aria-hidden="true">
+      <img class="hero-img" src="assets/tablet/image-hero.png" alt="Image of users of meet" aria-hidden="true">
-      </picture>
+      <!-- </picture> -->
-      <picture>
+      <!-- <picture class="hero-img-left"> -->
-        <img src="assets/desktop/image-hero-left.png" alt="Image of users of meet" aria-hidden="true">
+      <img class="hero-img-left" src="assets/desktop/image-hero-left.png" alt="Image of users of meet"
-      </picture>
+        aria-hidden="true">
-      <section>
+      <!-- </picture> -->
-        <h1>Group Chat for Everyone</h1>
+      <section class="primary-section">
-        <p>Meet makes it easy to connect with others face-to-face virtually and collaborate across any device.</p>
+        <h1 class="primary-section__heading">Group Chat for Everyone</h1>
-        <a href="">Download <span>v1.3</span></a>
+        <p class="primary-section__body">Meet makes it easy to connect with others face-to-face virtually and
-        <a href="">What is it?</a>
+          collaborate across any device.</p>
+        <p class="btn-block">
+
+          <a class="btn btn-download" href="#">Download <span>v1.3</span></a>
+          <a class="btn btn-info" href="#">What is it?</a>
+        </p>
       </section>
-      <picture>
+      <!-- <picture class="hero-img-right"> -->
-        <img src="assets/desktop/image-hero-right.png" alt="Image of users of meet" aria-hidden="true">
+      <img class="hero-img-right" src="assets/desktop/image-hero-right.png" alt="Image of users of meet"
-      </picture>
+        aria-hidden="true">
+      <!-- </picture> -->
     </section>
 
     <section>
-      <div>01</div>
+      <div class="circle-plus-line">
+        <div class="circle-number">01</div>
+      </div>
 
-      <section>
+      <section class="images-of-users">
-        <img src="assets/desktop/image-woman-in-videocall.jpg" alt="A Woman in a Videocall">
+        <img src="assets/shared/image-woman-in-videocall.jpg" alt="A Woman in a Videocall">
-        <img src="assets/desktop/image-women-videochatting.jpg" alt="A group of women video chatting">
+        <img src="assets/shared/image-women-videochatting.jpg" alt="A group of women video chatting">
-        <img src="assets/desktop/image-men-in-meeting.jpg" alt="A man in a meeting via video chat">
+        <img src="assets/shared/image-men-in-meeting.jpg" alt="A man in a meeting via video chat">
-        <img src="assets/desktop/image-man-texting.jpg" alt="A man sitting and texting">
+        <img src="assets/shared/image-man-texting.jpg" alt="A man sitting and texting">
       </section>
 
-      <h3>Built for modern use</h3>
+      <p class="outline">Built for modern use</p>
-      <h2>Smarter meetings, all in one place</h2>
+      <h2 class="secondary-header">Smarter meetings, all in one place</h2>
-      Send messages, share files, show your screen, and record your meetings — all in one
+
-      workspace. Control who can join with invite-only team access, data encryption, and data export.
+      <p class="secondary-body">
+        Send messages, share files, show your screen, and record your meetings — all in one
+        workspace. Control who can join with invite-only team access, data encryption, and data export.
+      </p>
     </section>
   </main>
 
   <footer>
 
-    <div>02</div>
+    <div class="circle-plus-line">
-    <h2>Experience more together</h2>
+      <div class="circle-number">02</div>
-    <p>Stay connected with reliable HD meetings and unlimited one-on-one and group video sessions.</p>
+    </div>
+    <section class="footer">
 
-    <a href="">Download <span>v1.3</span></a>
+      <h2 class="footer__header">Experience more together</h2>
+      <p class="footer__body">Stay connected with reliable HD meetings and unlimited one-on-one and group video
+        sessions.
+      </p>
+
+      <a class="btn btn-download" href="#">Download<span>v1.3</span></a>
+    </section>
   </footer>
 </body>