End for now. Now mobile design

FrontendMentor/huddle-landing-page-with-single-introductory-section-master/css/style.css

@@ -1,7 +1,12 @@
 @import url('https://fonts.googleapis.com/css2?family=Open+Sans&family=Poppins:wght@400;700&display=swap');
 
+:root {
+    font-size: 16px;
+    --site-color: hsl(257, 40%, 49%);
+}
+
 body {
-    background-color: hsl(257, 40%, 49%);
+    background-color: var(--site-color);
     background-image: url("../images/bg-desktop.svg");
     /* background-repeat: no-repeat;
     background-size: contain; */
@@ -12,7 +17,8 @@ body {
 
 h1 {
     font-family: 'Poppins', sans-serif;
-    font-weight: 400;
+    font-weight: 400; /* 400 & 40 are very close*/
+    font-size: 40px;
 }
 
 body {
@@ -21,48 +27,74 @@ body {
 
 .logo {
     width: 215px;
-    margin: 3.3125rem 4.4rem 0rem;
+    margin: 3.75% 4.86% 0rem; /* 3.75% 4.375rem 0rem*/
 }
 
 .middleSection {
     display: flex;
-    margin: 5.0625rem 4.6rem 0rem 4.55rem;
+    margin: 5.0625rem 0rem 0rem 4.55rem;
 }
 
 .siteBlurb {
-    margin: 3rem;
+    margin: 1.0625rem 4rem 2rem 3.325rem;
+
     /* line-height: 2rem;
     font-weight: 400; */
 }
 
 .siteBlurb h1 {
     margin-right: 2em;
+    margin-bottom: 0;
 }
 
-/* .siteBlurb p {
+.siteBlurb p {
-    line-height: 1.5rem;
+    margin-right: 1.5rem;
-} */
+    margin-bottom: 1.5625rem;
+    line-height: 1.7rem;
+    font-size: 18px;
+    font-weight: 400;
+}
+
+.registerButton {
+    background-color: white;
+    color: var(--site-color);
+    font-size: 19px;
+    border: none;
+    padding: 17px 64px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    /* margin: 4px 2px; */
+    cursor: pointer;
+    border-radius: 32px;
+    box-shadow: 3px 3px 10px 1px rgba(0, 0, 0, 0.4); /* 10px 5px 10px*/
+}
 
 .socialButtonsSection {
     display: block;
     text-align: right;
+    margin-right: 5.1875rem;
 }
 
 .socialButtonsSection i {
-    padding: 0.5em;
+    padding: 0.5rem;
-    margin-left: 0.5em;
+    margin-left: 0.5rem;
-    margin-top: 1em;
+    margin-top: 0.9375rem;
+    margin-right: 0;
 }
 
 .circleIcon {
+    magin: 0;
+    color: white;
     background: transparent;
-    border: 1px solid #fff;
+    border: 1.75px solid #fff;
-    width: 16px;
+    width: 20px;
-    height: 16px;
+    height: 20px;
     border-radius: 50%;
     text-align: center;
-    line-height: 16px;
+    line-height: 20px;
     vertical-align: middle;
+    font-size: 19px;
     /* padding: 5px; */
 
     /* border: 2px solid #fff;
@@ -74,6 +106,10 @@ body {
     color: transparent; */
 }
 
+.circleIcon:hover {
+    color: blue;
+}
+
 .attribution { font-size: 11px; text-align: center; }
 .attribution a { color: hsl(228, 45%, 44%); }
 

FrontendMentor/huddle-landing-page-with-single-introductory-section-master/index.html

@@ -34,9 +34,9 @@
   </div>
 
   <div class="socialButtonsSection">
-    <i class="fab fa-facebook-f circleIcon"></i>
+    <a href="#"><i class="fab fa-facebook-f fa-lg circleIcon"></i></a>
-    <i class="fab fa-twitter circleIcon"></i>
+    <a href="#"><i class="fab fa-twitter fa-lg circleIcon"></i></a>
-    <i class="fab fa-instagram circleIcon"></i>
+    <a href="#"><i class="fab fa-instagram fa-lg circleIcon"></i></a>
   </div>
   <footer>
     <p class="attribution">

FrontendMentor/huddle-landing-page-with-single-introductory-section-master/work-through/myProcess.md

@@ -32,8 +32,23 @@ next day
     download diffchecker trial rather than keep using website
     adjust size of logo svg
     play with positioning using margin and rem. Logo and mockup images are so close at this point (see image diff 1)
+    ![alt](image-diff-1.png)
     realise I probably should be using % rather than rem for margin positioning
     also should probably be using 0 positioning in body and doing it in each element
+    tweaked logo and mid section margins mixture rem & % for the moment
+    set body to have 0 margin
+    seemingly no changes are made with % unless they are to a pixel, so 4.86 is the same as 4.8611111, need to go to next px % which is 4.7916666667
+    then lots and lots of iterating. Making changes and comparing in diffchecker against the design doc.
+    Spent 2 hours+ on this. Too long.
+    Still haven't quite nailed the blurb section.
+        Basically the logo is slight off
+        the differences between the mockup and symbols are image quality between jpg and png
+        its like a pixel off with the social media buttons
+    img-diff-2-desktop-near-enough.png
+    ![alt](img-diff-2-desktop-near-enough.png)
+
+    Still now on to the mobile variant. Can I nail it better?
+
 
 Things I've not touched so far:
     main section