From 7c09f64baaabb59aa5f870d6bc1d6d061059f832 Mon Sep 17 00:00:00 2001 From: Robert McGovern Date: Mon, 24 Oct 2022 14:59:04 +0100 Subject: [PATCH] desktop finished, except hero image right shifting left when adding overflow:hidden which is weird. All needs tidied --- .../newbie/meet-landing-page/css/style.css | 212 +++++++++++++++--- .../newbie/meet-landing-page/index.html | 2 +- 2 files changed, 184 insertions(+), 30 deletions(-) diff --git a/projects/FrontendMentor/newbie/meet-landing-page/css/style.css b/projects/FrontendMentor/newbie/meet-landing-page/css/style.css index 40f76c3..09496cb 100644 --- a/projects/FrontendMentor/newbie/meet-landing-page/css/style.css +++ b/projects/FrontendMentor/newbie/meet-landing-page/css/style.css @@ -100,7 +100,6 @@ body { } .hero-img { - outline: 1px solid red; margin-top: 3.175rem; height: 153px; object-fit: cover; @@ -141,6 +140,8 @@ body { } .btn-block { + margin-top: 2rem; + display: flex; flex-direction: column; @@ -171,7 +172,6 @@ body { } .btn-download { - margin-top: 2rem; background-color: var(--col-button-download-background); } @@ -310,8 +310,110 @@ body { font-weight: var(--fw-footer-body); } +.footer .btn-download { + margin-top: 2rem; +} + @media screen and (min-width: 48rem) { /* 768px */ + :root { + /* Typography */ + --fs-page-header: 3rem; + --lh-page-header: 100%; + + --fs-second-heading: 2.5rem; + --lh-second-heading: 110%; + + --fs-main-page-body: 1rem; + --lh-main-page-body: 162%; + + --fs-footer-header: 2.5rem; + --lh-footer-header: 110%; + + --image-footer: url(../assets/tablet/image-footer.jpg); + } + + .hero-img { + margin-top: 60px; + height: 303px; + } + + .btn-block { + margin-top: 32px; + flex-direction: row; + gap: 1rem; + } + + .btn-download { + } + + .primary-section__heading { + margin-top: 4.5rem; + } + + .primary-section__body { + width: 40ch; + } + + .btn-info { + margin-top: unset; + } + + .circle-plus-line { + margin-top: 5rem; + } + + .images-of-users { + margin-top: 96px; + + gap: 11px; + + flex-flow: row nowrap; + } + + .images-of-users img { + width: 164px; + flex: unset; + } + + .outline { + margin-top: 3rem; + } + + .secondary-header { + margin-top: 16px; + + width: 16ch; + } + + .secondary-body { + width: 49ch; + } + + .footer { + margin: unset; + display: flex; + flex-direction: column; + align-items: center; + } + + .footer__header { + /* margin-top: 4rem; */ + width: 15ch; + } + + .footer__body { + margin-top: 2rem; + width: 48ch; + } + + .footer .btn-download { + margin-top: 2.5rem; + } +} + +@media screen and (min-width: 90rem) { + /* 1440px */ :root { /* Typography */ --fs-page-header: 4rem; @@ -326,47 +428,99 @@ body { --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); } + .logo { + margin-top: 80px; + } + + .top-section { + margin-top: 60px; + display: flex; + gap: 115px; + } + + .hero-img { + display: none; + } + + .hero-img-left, + .hero-img-right { + display: block; + width: 394px; + object-fit: cover; + } + + .hero-img-left { + align-self: flex-start; + margin-left: -30px; + } + + .hero-img-right { + align-self: flex-end; + overflow: hidden; + /* margin-top: 16px; */ + } + + .primary-section__heading { + margin-top: 44px; + + justify-self: center; + } + + .primary-section__body { + margin-top: 2.1875rem; + } + + .circle-plus-line { + margin-top: 117px; + } + .circle-number { } + .btn-block { + margin-top: 32px; + } + + .images-of-users { + gap: 30px; + margin-top: 90px; + } + + .images-of-users img { + width: 255px; + } + + .outline { + margin-top: 80px; + } + .footer { flex-direction: row; justify-content: center; gap: 4.6875rem; text-align: left; + + padding: 116px 0 104px 0; + } + + footer .circle-plus-line { + margin-top: 72px; + } + + .footer__header { + margin-top: unset; } .footer__body { + margin-top: unset; + width: 29ch; } + + .footer .btn-download { + margin-top: unset; + } } diff --git a/projects/FrontendMentor/newbie/meet-landing-page/index.html b/projects/FrontendMentor/newbie/meet-landing-page/index.html index bfb3982..37d3de7 100755 --- a/projects/FrontendMentor/newbie/meet-landing-page/index.html +++ b/projects/FrontendMentor/newbie/meet-landing-page/index.html @@ -22,7 +22,7 @@
-
+