tarasis
/
rmcg.dev
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Mobile version very close. Ping logo off, as is coming soon text.

This commit is contained in:
Robert McGovern 2020-09-07 15:38:52 +01:00
parent edd15d465f
commit 32bf863905
3 changed files with 48 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
FrontendMentor/ping-coming-soon-page-master/css/style.css
View File

@ -135,14 +135,32 @@ body {
/* height: auto; */
}
footer {
position: fixed;
bottom: 0;
text-align: center;
width: 100vw;
}
.socialButtonsSection {
/* margin-top: auto; */
margin-bottom: 1.45rem;
font-size: 20px;
}
.socialButtonsSection a {
color: var(--site-blue);
}
.socialButtonsSection .fa-stack {
color: rgba(0, 0, 0, 0.03);
font-size: 15px;
}
.copyright {
color: var(--site-gray);
font-size: 12px;
font-size: 10px;
text-align: center;
margin-bottom: 1.05rem;
}
/* Feel free to remove these styles or customise in your own stylesheet 👍 */

37
FrontendMentor/ping-coming-soon-page-master/index.html
View File

@ -33,20 +33,29 @@
<img src="./images/illustration-dashboard.png" alt="Illustration of the dashboard" class="mockupImage">
</div>
</main>
<div class="socialButtonsSection">
<a href="https://facebook.com/tarasis"><i class="fab fa-facebook-f"></i></a>
<a href="https://twitter.com/tarasis"><i class="fab fa-twitter"></i></a>
<a href="https://www.instagram.com/tarasis/"><i class="fab fa-instagram"></i></a>
</div>
<footer>
<p class="copyright">
&copy; Copyright Ping. All rights reserved.
</p>
<p class="attribution">
Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
Coded by <a href="mailto:work@tarasis.net">Robert McGovern</a>.
</p>
</footer>
</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>
</div>
<p class="copyright">
&copy; Copyright Ping. All rights reserved.
</p>
<p class="attribution">
Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
Coded by <a href="mailto:work@tarasis.net">Robert McGovern</a>.
</p>
</footer>
</body>
</html>

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

@ -28,3 +28,9 @@ Continue to play with positioning rather than focusing on main styling
Nudge screenshot nudge screenshot nudge screenshot *sigh*
I'm not OCD I swear ...
Realised better to social icons into footer and move the footer out of the flex container, and clamp it to the bottom.
So mobile is virtually there. The Ping! logo is slightly off, as is the "We are launching soon!"
So close *sigh*