<h2>Weekly Coding Challenge #18 - Social Media Buttons</h2>

<ul class="social-media-container">
	<li class="social-media blog">
		<i class="fas fa-laptop-code"></i>
		<a href="https://florin-pop.com/blog" target="_blank">Check out my blog</a>
	</li>
	<li class="social-media twitter">
		<i class="fab fa-twitter"></i>
		<a href="https://twitter.com/florinpop1705" target="_blank">Follow me on Twitter</a>
	</li>
	<li class="social-media linkedin">
		<i class="fab fa-linkedin-in"></i>
		<a href="https://linkedin.com/in/florinpop17" target="_blank">Connect on Linkedin</a>
	</li>
	<li class="social-media facebook">
		<i class="fab fa-facebook-f"></i>
		<a href="https://facebook.com/florinpop17" target="_blank">Like my Facebook page</a>
	</li>
	<li class="social-media github">
		<i class="fab fa-github"></i>
		<a href="https://github.com/florinpop17" target="_blank">See projects on Github</a>
	</li>
</ul>

<footer>
	<p>
		Created with <i class="fa fa-heart"></i> by
		<a target="_blank" href="https://florin-pop.com">Florin Pop</a>
		- Read how I created this and how you can join the challenge
		<a target="_blank" href="https://www.florin-pop.com/blog/2019/07/social-media-buttons">here</a>
	</p>
</footer>
@import url('https://fonts.googleapis.com/css?family=Lato');

* {
	box-sizing: border-box;
}

body {
	background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
	
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;

	min-height: 100vh;
	font-family: 'Lato', sans-serif;
	margin: 0;
}

h2 {
	text-align: center;
}

.social-media-container {
	position: fixed;
	top: 50%;
	left: calc(100% - 60px);
	list-style-type: none;
	padding: 0;
	transform: translateY(-50%);
	min-width: 250px;
}

.social-media {
	align-items: center;
	display: flex;
	transition: transform .3s ease-in-out;
}

.social-media:hover {
	transform: translateX(calc(-100% + 60px));
}

.social-media.blog {
	background-color: #e17b77;
}

.social-media.facebook {
	background-color: #3b5998;
}

.social-media.twitter {
	background-color: #00aced;
}

.social-media.github {
	background-color: #333;
}

.social-media.linkedin {
	background-color: #007bb6;
}

.social-media i {
	color: #fff;
	font-size: 20px;
	padding: 15px;
	text-align: center;
	width: 60px;
}

.social-media a {
	color: #fff;
	padding: 0 10px;
}

footer {
    background-color: #222;
    color: #fff;
    font-size: 14px;
    bottom: 0;
    position: fixed;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 999;
}

footer p {
    margin: 10px 0;
}

footer i {
    color: red;
}

footer a {
    color: #3c97bf;
    text-decoration: none;
}
Run Pen

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.0/css/all.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.