Social icons have a better circular border and have hover states.

FrontendMentor/ping-coming-soon-page-master/README.md

@@ -18,12 +18,12 @@ You can use any tools you like to help you complete the challenge. So if you've
 
 Your users should be able to: 
 
-- View the optimal layout for the site depending on their device's screen size
-- See hover states for all interactive elements on the page
-- Submit their email address using an `input` field
-- Receive an error message when the `form` is submitted if:
-	- The `input` field is empty. The message for this error should say *"Whoops! It looks like you forgot to add your email"*
-	- The email address is not formatted correctly (i.e. a correct email address should have this structure: `name@host.tld`). The message for this error should say *"Please provide a valid email address"*
+- View the optimal layout for the site depending on their device's screen size ✅
+- See hover states for all interactive elements on the page ✅
+- Submit their email address using an `input` field ✅
+- Receive an error message when the `form` is submitted if: ✅
+	- The `input` field is empty. The message for this error should say *"Whoops! It looks like you forgot to add your email"* ✅
+	- The email address is not formatted correctly (i.e. a correct email address should have this structure: `name@host.tld`). The message for this error should say *"Please provide a valid email address"* ✅
 
 Want some support on the challenge? [Join our Slack community](https://www.frontendmentor.io/slack) and ask questions in the **#help** channel.
 

FrontendMentor/ping-coming-soon-page-master/css/style.css

@@ -155,15 +155,34 @@ footer {
 }
 .socialButtonsSection {
     margin-bottom: 1.35rem;
+    font-size: 14px;
+    display: flex;
+    width: 35%;
 }
 
 .socialButtonsSection a {
     color: var(--site-blue);
+    width: 100%;
+    height: 100%;
 }
 
-.socialButtonsSection .fa-stack {
-    color: rgba(0, 0, 0, 0.03);
-    font-size: 15px;
+.socialButtonsSection .icon-background {
+    color: var(--site-blue);
+    padding:8px;
+    border-radius: 50%;
+
+    width: 15px;
+    height: 15px;
+    text-align: center;
+    line-height: 15px;
+    vertical-align: middle;
+
+    border: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+.icon-background:hover {
+    color: white;
+    background-color: var(--site-blue); 
 }
 
 .copyright {
@@ -252,6 +271,11 @@ footer {
         box-shadow: 0px 3px 10px 1px var(--site-paleBlue);
     }
 
+    .socialButtonsSection {
+        width: 10%;
+    }
+    
+
     .imageSection {
         margin-top: 4.3rem;
         width: 89%;

FrontendMentor/ping-coming-soon-page-master/index.html

@@ -40,18 +40,9 @@
   </div>
   <footer>
     <div class="socialButtonsSection">
-      <span class="fa-stack fa-2x">
-        <i class="far fa-circle fa-stack-2x"></i>
-        <a href="https://facebook.com/tarasis"><i class="fab fa-facebook-f fa-stack-1x"></i></a>
-      </span>
-      <span class="fa-stack fa-2x">
-        <i class="far fa-circle fa-stack-2x"></i>
-        <a href="https://twitter.com/tarasis"><i class="fab fa-twitter fa-stack-1x"></i></a>
-      </span>
-    <span class="fa-stack fa-2x">
-        <i class="far fa-circle fa-stack-2x"></i>
-        <a href="https://www.instagram.com/tarasis/"><i class="fab fa-instagram fa-stack-1x"></i></a>
-      </span>
+      <a href="https://facebook.com/tarasis"><i class="fab fa-facebook-f icon-background"></i></a>
+      <a href="https://twitter.com/tarasis"><i class="fab fa-twitter icon-background"></i></a>
+      <a href="https://www.instagram.com/tarasis/"><i class="fab fa-instagram icon-background"></i></a>
     </div>
     <p class="copyright">
       &copy; Copyright Ping. All rights reserved.

FrontendMentor/ping-coming-soon-page-master/work-through/myProcess.md

@@ -77,10 +77,12 @@ Played with alignment so mobile & mobile error are close.
 
 ![mobile difference](mobile-error-diff.png)
 
+Swapped method of doing the circles around the social icons. I would have preferred the stacks but I couldn't figure out how to put a thin border around a fa-circle
+
 
 BUGS:
 * when screen not tall enough social buttons and copyright pushed up the page because I clamped them to the bottom of the browser window, rather than the page. 
-* because I used attacked circles I can't just change the background to blue for hover. Need to either sub in a filled circle on hover OR swap to manually creating the circle
+* ~~because I used attacked circles I can't just change the background to blue for hover. Need to either sub in a filled circle on hover OR swap to manually creating the circle~~
 * transitions sizes between 600 and about 800 look wrong / bad / odd
 
 To Research: 

notes.md

@@ -38,5 +38,12 @@ Think of it as a combination of learning, and tips and tricks. They will start u
 
 * CSS - The "!important" rule should only be used as a last resort - nuclear option
     * better to do elementName.className when wanting to temp add a class to override some css (like say a border color)
-    
-* Blah
+
+* Blah
+
+## Articles
+
+* https://www.freecodecamp.org/news/how-to-use-the-position-property-in-css-to-align-elements-d8f49c403a26/
+* https://thoughtbot.com/blog/transitions-and-transforms
+* https://www.sitepoint.com/hide-elements-in-css/
+*