diff --git a/FrontendMentor/four-card-feature-section/css/style.css b/FrontendMentor/four-card-feature-section/css/style.css index 2bd4168..9b5ef63 100644 --- a/FrontendMentor/four-card-feature-section/css/style.css +++ b/FrontendMentor/four-card-feature-section/css/style.css @@ -35,39 +35,85 @@ body { font-size: 15px; + background-color: var(--veryLightGray); + height: 100vh; +} + +.flexContainer { + display: flex; + flex-direction: column; + width: 90%; + /* height: 100vh; */ + margin: 0 auto; +} + +.topSection { + margin-top: 4rem; + text-align: center; +} + +.topSection h1 { + font-size: 1.3rem; +} + +.topSection .title1 { + font-weight: 200; + color: var(--grayishBlue); +} + +/* should be a class but wanted to play with :nth-child() */ +.topSection .title2 { + font-weight: 600; + color: var(--veryDarkBlue); +} + +.topSection .blurb { + text-align: center; + color: var(--grayishBlue); +} + + +.middleSection { } .card { + margin-top: 1rem; + display: flex; + flex-direction: column; + background-color: white; + border-top: 2px solid; + box-shadow: var(--veryLightGray); } .card-title { + /* font-size: ; */ + color: var(--veryDarkBlue); } .card-blurb { + color: var(--grayishBlue); + /* font-size: ; */ } .card-image { + margin-top: 2rem; + align-self: flex-end; } - -.flexContainer { -} -.topSection { -} -.blurb { -} -.middleSection { -} .column1 { } .supervisor { + border-top-color: var(--cyan); } .column2 { } .teamBuilder { + border-top-color: var(--red); } .karma { + border-top-color: var(--orange); } .column3 { } .calculator { + border-top-color: var(--blue); } /* .attribution { } */ diff --git a/FrontendMentor/four-card-feature-section/index.html b/FrontendMentor/four-card-feature-section/index.html index bbe8623..7bbcb68 100644 --- a/FrontendMentor/four-card-feature-section/index.html +++ b/FrontendMentor/four-card-feature-section/index.html @@ -20,8 +20,8 @@
-

Reliable, efficient delivery

-

Powered by Technology

+

Reliable, efficient delivery

+

Powered by Technology

Our Artificial Intelligence powered tools use millions of project data points to ensure that your project is successful

diff --git a/FrontendMentor/four-card-feature-section/notes/mobile-diff-sidebyside.png b/FrontendMentor/four-card-feature-section/notes/mobile-diff-sidebyside.png new file mode 100644 index 0000000..6a990bf Binary files /dev/null and b/FrontendMentor/four-card-feature-section/notes/mobile-diff-sidebyside.png differ diff --git a/FrontendMentor/four-card-feature-section/notes/mobile-difference-basic-styling.png b/FrontendMentor/four-card-feature-section/notes/mobile-difference-basic-styling.png new file mode 100644 index 0000000..64ef75b Binary files /dev/null and b/FrontendMentor/four-card-feature-section/notes/mobile-difference-basic-styling.png differ diff --git a/FrontendMentor/four-card-feature-section/notes/process.md b/FrontendMentor/four-card-feature-section/notes/process.md index b7b4434..dec8970 100644 --- a/FrontendMentor/four-card-feature-section/notes/process.md +++ b/FrontendMentor/four-card-feature-section/notes/process.md @@ -37,5 +37,14 @@ Layout looks like this right now ![current layout](layout-no-styling(1440x922).png) +Added some styling, working of the mobile design and building it up. +Lots of touch ups required yet, improve shadow, spacing, shrinking icons, but its taking shape. + +![mobile difference](mobile-difference-basic-styling.png) +![mobile difference side by side](mobile-diff-sidebyside.png) + +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.) +