diff --git a/FrontendMentor/four-card-feature-section/css/style.css b/FrontendMentor/four-card-feature-section/css/style.css index 2f39356..9cd9b9f 100644 --- a/FrontendMentor/four-card-feature-section/css/style.css +++ b/FrontendMentor/four-card-feature-section/css/style.css @@ -77,25 +77,26 @@ body { .middleSection { - margin-top: 2.45rem; + margin-top: 2.5rem; } .card { - margin-top: 1.35rem; + margin-top: 1.3rem; display: flex; flex-direction: column; background-color: white; border-top: 4px solid; - box-shadow: 0px 3px 5px var(--veryLightGray); - padding: 23px 30px 25px 30px; + border-radius: 6px; + box-shadow: 0px 10px 15px rgba(0, 0, 255, 0.15); + padding: 23px 30px 26px 30px; } .card-title { - font-size: 18px; + font-size: 20px; color: var(--veryDarkBlue); font-weight: 600; } .card-blurb { - margin-top: 0.4rem; + margin-top: 0.3rem; color: var(--grayishBlue); font-size: 13px; } diff --git a/FrontendMentor/four-card-feature-section/notes/mobile-final-diff.png b/FrontendMentor/four-card-feature-section/notes/mobile-final-diff.png new file mode 100644 index 0000000..22d3616 Binary files /dev/null and b/FrontendMentor/four-card-feature-section/notes/mobile-final-diff.png differ diff --git a/FrontendMentor/four-card-feature-section/notes/mobile-final-side-by-side.png b/FrontendMentor/four-card-feature-section/notes/mobile-final-side-by-side.png new file mode 100644 index 0000000..44f2cbb Binary files /dev/null and b/FrontendMentor/four-card-feature-section/notes/mobile-final-side-by-side.png differ diff --git a/FrontendMentor/four-card-feature-section/notes/process.md b/FrontendMentor/four-card-feature-section/notes/process.md index 85ae50b..09b8cda 100644 --- a/FrontendMentor/four-card-feature-section/notes/process.md +++ b/FrontendMentor/four-card-feature-section/notes/process.md @@ -52,4 +52,8 @@ Picking up from yesterday. 38 minutes later. Mobile is virtually exact apart from shadow on the cards. Basically bits of tweaking to fit. Not a horrendous amount. Havent looked at how it looks on desktop yet :) +So how to judge what the shadow should be? what is the trick to that? Basically experimentation it seems. + +![mobile final side by side](mobile-final-diff.png) +![mobile final diff'd](mobile-final-side-by-side.png)