From a1e4c4e86f83a0bad42df1ff95211d109370791b Mon Sep 17 00:00:00 2001 From: Robert McGovern Date: Sun, 27 Sep 2020 15:46:19 +0100 Subject: [PATCH] Mobile version in place, except shadows on cards. --- .../four-card-feature-section/css/style.css | 28 ++++++++++++------- .../four-card-feature-section/index.html | 4 +-- .../notes/process.md | 5 ++++ 3 files changed, 25 insertions(+), 12 deletions(-) diff --git a/FrontendMentor/four-card-feature-section/css/style.css b/FrontendMentor/four-card-feature-section/css/style.css index 9b5ef63..2f39356 100644 --- a/FrontendMentor/four-card-feature-section/css/style.css +++ b/FrontendMentor/four-card-feature-section/css/style.css @@ -28,7 +28,7 @@ * { margin: 0; padding: 0; - box-sizing: border-box; + /* box-sizing: border-box; */ } /* Basic Styling */ @@ -42,21 +42,22 @@ body { .flexContainer { display: flex; flex-direction: column; - width: 90%; + width: 83.5%; /* height: 100vh; */ margin: 0 auto; } .topSection { - margin-top: 4rem; + margin-top: 3.8rem; text-align: center; } .topSection h1 { - font-size: 1.3rem; + font-size: 1.2rem; } .topSection .title1 { + margin-top: 0.5rem; font-weight: 200; color: var(--grayishBlue); } @@ -68,33 +69,40 @@ body { } .topSection .blurb { + margin-top: 0.7rem; text-align: center; color: var(--grayishBlue); + font-size: 16px; } .middleSection { + margin-top: 2.45rem; } .card { - margin-top: 1rem; + margin-top: 1.35rem; display: flex; flex-direction: column; background-color: white; - border-top: 2px solid; - box-shadow: var(--veryLightGray); + border-top: 4px solid; + box-shadow: 0px 3px 5px var(--veryLightGray); + padding: 23px 30px 25px 30px; } .card-title { - /* font-size: ; */ + font-size: 18px; color: var(--veryDarkBlue); + font-weight: 600; } .card-blurb { + margin-top: 0.4rem; color: var(--grayishBlue); - /* font-size: ; */ + font-size: 13px; } .card-image { - margin-top: 2rem; + margin-top: 1.8rem; align-self: flex-end; + width: 22%; } .column1 { diff --git a/FrontendMentor/four-card-feature-section/index.html b/FrontendMentor/four-card-feature-section/index.html index 7bbcb68..baa7ee5 100644 --- a/FrontendMentor/four-card-feature-section/index.html +++ b/FrontendMentor/four-card-feature-section/index.html @@ -74,10 +74,10 @@ \ No newline at end of file diff --git a/FrontendMentor/four-card-feature-section/notes/process.md b/FrontendMentor/four-card-feature-section/notes/process.md index dec8970..85ae50b 100644 --- a/FrontendMentor/four-card-feature-section/notes/process.md +++ b/FrontendMentor/four-card-feature-section/notes/process.md @@ -46,5 +46,10 @@ Lots of touch ups required yet, improve shadow, spacing, shrinking icons, but it My card titles and card blurbs are too big. Probabl h3 rather than h1, font size is a guess. Icons are also a little big, although its not far off 75% rather than 100%? (Prob should pay for the Pro frontend Mentor sub to stop having to guess, but its part of the challenge for me too.) +2020-09-27 15:05 + +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 :)