basic stylings, chasing mobile design. More in the morning.

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 {
 } */

FrontendMentor/four-card-feature-section/index.html

@@ -20,8 +20,8 @@
   <main>
     <div class="flexContainer">
       <div class="topSection">
-          <h1>Reliable, efficient delivery</h1>
-          <h1>Powered by Technology</h1>
+          <h1 class="title1">Reliable, efficient delivery</h1>
+          <h1 class="title2">Powered by Technology</h1>
           <p class="blurb">Our Artificial Intelligence powered tools use millions of project data points 
             to ensure that your project is successful</p>
       </div>

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.)
+