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

This commit is contained in:
Robert McGovern 2020-09-09 23:37:34 +01:00
parent 22f6907743
commit bfb154d80d
5 changed files with 48 additions and 24 deletions

View File

@ -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.

View File

@ -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%;

View File

@ -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.

View File

@ -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:

View File

@ -40,3 +40,10 @@ Think of it as a combination of learning, and tips and tricks. They will start u
* better to do elementName.className when wanting to temp add a class to override some css (like say a border color)
* 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/
*