diff --git a/FrontendMentor/four-card-feature-section/css/style.css b/FrontendMentor/four-card-feature-section/css/style.css index e18f525..2bd4168 100644 --- a/FrontendMentor/four-card-feature-section/css/style.css +++ b/FrontendMentor/four-card-feature-section/css/style.css @@ -35,4 +35,39 @@ body { font-size: 15px; -} \ No newline at end of file +} + +.card { +} +.card-title { +} +.card-blurb { +} +.card-image { +} + + +.flexContainer { +} +.topSection { +} +.blurb { +} +.middleSection { +} +.column1 { +} +.supervisor { +} +.column2 { +} +.teamBuilder { +} +.karma { +} +.column3 { +} +.calculator { +} +/* .attribution { +} */ diff --git a/FrontendMentor/four-card-feature-section/index.html b/FrontendMentor/four-card-feature-section/index.html index 973ea1d..bbe8623 100644 --- a/FrontendMentor/four-card-feature-section/index.html +++ b/FrontendMentor/four-card-feature-section/index.html @@ -16,30 +16,67 @@ +
+
+
+
+

Reliable, efficient delivery

+

Powered by Technology

+

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

+
- Reliable, efficient delivery - Powered by Technology - - Our Artificial Intelligence powered tools use millions of project data points - to ensure that your project is successful - - Supervisor - Monitors activity to identify project roadblocks - - Team Builder - Scans our talent network to create the optimal team for your project - - Karma - Regularly evaluates our talent to ensure quality - - Calculator - Uses data from past projects to provide better delivery estimates - - +
+
+
+

+ Supervisor +

+

+ Monitors activity to identify project roadblocks +

+ Supervisor icon +
+
+ +
+
+

+ Team Builder +

+

+ Scans our talent network to create the optimal team for your project +

+ Team building icon +
+
+

+ Karma +

+

+ Regularly evaluates our talent to ensure quality +

+ Karma icon +
+
+
+
+

+ Calculator +

+

+ Uses data from past projects to provide better delivery estimates +

+ Calculator icon +
+
+
+
+
diff --git a/FrontendMentor/four-card-feature-section/notes/layout-no-styling(1440x922).png b/FrontendMentor/four-card-feature-section/notes/layout-no-styling(1440x922).png new file mode 100644 index 0000000..194cba2 Binary files /dev/null and b/FrontendMentor/four-card-feature-section/notes/layout-no-styling(1440x922).png differ diff --git a/FrontendMentor/four-card-feature-section/notes/process.md b/FrontendMentor/four-card-feature-section/notes/process.md index 7f1ce60..b7b4434 100644 --- a/FrontendMentor/four-card-feature-section/notes/process.md +++ b/FrontendMentor/four-card-feature-section/notes/process.md @@ -6,17 +6,36 @@ Last to days lost doing nothing. Spent part of today trying to find the perfect Interesting but not quite there -Tokyo Night - I find the Classes/ID slightly too bright compared to the attributes (green vs purple-blue) -ReUI Mirage (React) (want darker background) -Panda Syntax -Palenight Theme - issues -Night Owl -Monokai Dark Soda -Gruvbox Dark (Hard) -Firefly Pro - -Dark Chrome DevTools - really nice, but JS REGEX is too hard to read +Tokyo Night - I find the Classes/ID slightly too bright compared to the attributes (green vs purple-blue) +ReUI Mirage (React) (want darker background) +Panda Syntax +Palenight Theme - issues +Night Owl +Monokai Dark Soda +Gruvbox Dark (Hard) +Firefly Pro - +Dark Chrome DevTools - really nice, but JS REGEX is too hard to read 2020-09-26 -Added basics to the style.css from the style guide. -Again I'm setting the root font to 20px to make working with REM easier. \ No newline at end of file +Added basics to the style.css from the style guide. +Again I'm setting the root font to 20px to make working with REM easier. + +I think the best approach for this is a flex container with + +top row: The title, sub title and blurb. +middle row: Is also a flex container, with 3 columns (in destkop) for the cards. + First column is Supervisor + Second column is Team Builder and Karma + Third column is calculator. +bottom row: attribution? (might just delete it) + +Added tags & classes to index.html. +Don't think I really need the classes for inside card (card-title, card-blurb, card-image). In theory that could just be handled with `card h1 {}` or `card p {}` or `card img {}` + +Layout looks like this right now + +![current layout](layout-no-styling(1440x922).png) + + +