From bfb154d80d4e5a77142b81bc42cba1d59a527345 Mon Sep 17 00:00:00 2001 From: Robert McGovern Date: Wed, 9 Sep 2020 23:37:34 +0100 Subject: [PATCH] Social icons have a better circular border and have hover states. --- .../ping-coming-soon-page-master/README.md | 12 ++++---- .../css/style.css | 30 +++++++++++++++++-- .../ping-coming-soon-page-master/index.html | 15 ++-------- .../work-through/myProcess.md | 4 ++- notes.md | 11 +++++-- 5 files changed, 48 insertions(+), 24 deletions(-) diff --git a/FrontendMentor/ping-coming-soon-page-master/README.md b/FrontendMentor/ping-coming-soon-page-master/README.md index 088dc5f..a20346a 100644 --- a/FrontendMentor/ping-coming-soon-page-master/README.md +++ b/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. diff --git a/FrontendMentor/ping-coming-soon-page-master/css/style.css b/FrontendMentor/ping-coming-soon-page-master/css/style.css index 740cc2b..67cd2eb 100644 --- a/FrontendMentor/ping-coming-soon-page-master/css/style.css +++ b/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%; diff --git a/FrontendMentor/ping-coming-soon-page-master/index.html b/FrontendMentor/ping-coming-soon-page-master/index.html index e36d96f..c945968 100644 --- a/FrontendMentor/ping-coming-soon-page-master/index.html +++ b/FrontendMentor/ping-coming-soon-page-master/index.html @@ -40,18 +40,9 @@