From 7942635664b293ada18f5a231b6e29b4dd5d4c72 Mon Sep 17 00:00:00 2001 From: Robert McGovern Date: Wed, 12 Oct 2022 18:17:27 +0100 Subject: [PATCH] finished tablet, need to swap px to rem, and tidy up --- .../newbie/equalizer-landing-page/README.md | 6 ++ .../equalizer-landing-page/css/style.css | 76 ++++++++++++++++++- .../newbie/equalizer-landing-page/index.html | 2 +- 3 files changed, 82 insertions(+), 2 deletions(-) diff --git a/projects/FrontendMentor/newbie/equalizer-landing-page/README.md b/projects/FrontendMentor/newbie/equalizer-landing-page/README.md index e829087..e4119d6 100644 --- a/projects/FrontendMentor/newbie/equalizer-landing-page/README.md +++ b/projects/FrontendMentor/newbie/equalizer-landing-page/README.md @@ -117,3 +117,9 @@ https://chenhuijing.com/blog/css-card-shadow-effects/#%F0%9F%A6%8A This is where you can give a hat tip to anyone who helped you out on this project. Perhaps you worked in a team or got some inspiration from someone else's solution. This is the perfect place to give them some credit. **Note: Delete this note and edit this section's content as necessary. If you completed this challenge by yourself, feel free to delete this section entirely.** + +---- + +NOTES + +Lighthouse notes that the offwhite on redish isn't a good contract. \ No newline at end of file diff --git a/projects/FrontendMentor/newbie/equalizer-landing-page/css/style.css b/projects/FrontendMentor/newbie/equalizer-landing-page/css/style.css index e8893f1..b15ae29 100644 --- a/projects/FrontendMentor/newbie/equalizer-landing-page/css/style.css +++ b/projects/FrontendMentor/newbie/equalizer-landing-page/css/style.css @@ -230,7 +230,7 @@ footer { font-size: var(--fs-footer); font-weight: var(--fw-footer); line-height: var(--lh-footer); - width: 30ch; + width: 32ch; margin-bottom: 4rem; } @@ -254,6 +254,80 @@ footer { --image-background: url(../assets/bg-main-tablet.png); --image-page-background: url(../assets/bg-pattern-1.svg); } + + body { + background-position: 13rem -2rem; + } + + header::before { + position: absolute; + background-image: var(--image-page-background); + background-position: top right; + background-repeat: no-repeat; + background-size: 16.666875rem; + top: -32px; + left: 36px; + width: 100%; + height: 500%; + content: " "; + } + header { + padding: 0 2.4375rem; + } + + .logo { + margin-top: 3.875rem; + } + + .intro-section { + margin-top: 90px; + width: 61ch; + + padding: 0 2.4375rem; + } + + .main-body { + margin-top: 1.75rem; + } + + .product-card::before { + top: -150px; + left: -14.9375rem; + width: 699px; + height: 600px; + + background-position: 230px -30px; + } + .product-card { + margin-top: 400px; + width: 24.9375rem; + margin-left: 17rem; + + padding: 3rem 3rem 2.875rem 3rem; + } + + .product-card__image { + width: 16.8881rem; + margin: -21rem -14rem; + z-index: -1; + } + + footer { + margin-top: 87px; + padding: 0 33px; + + position: relative; + } + + .footer__body { + width: 40ch; + } + + .social-image-block { + position: absolute; + right: 39px; + bottom: 33px; + } } @media screen and (min-width: 1400px) { diff --git a/projects/FrontendMentor/newbie/equalizer-landing-page/index.html b/projects/FrontendMentor/newbie/equalizer-landing-page/index.html index b948268..40ef56a 100644 --- a/projects/FrontendMentor/newbie/equalizer-landing-page/index.html +++ b/projects/FrontendMentor/newbie/equalizer-landing-page/index.html @@ -59,7 +59,7 @@ equalizer company logo