Stylish Footer Tutorial HTML5 CSS3

Hey, Pixels! In this week's tutorial, I’ll be showing you how to create this stylish footer with html5 and css3. Be sure to like this video and subscribe to XO PIXEL for more great videos every week! Comment below if you have any suggestions for future videos.

Source Files

The HTML



The CSS


@import url(https://fonts.googleapis.com/css?family=Open+Sans:300italic,700italic,400,300,700);
@import url(https://fonts.googleapis.com/css?family=Permanent+Marker);
body {
	margin: 0;
	padding: 0;
}

footer {
	background-image: url('https://bit.ly/21hO6hH');
}

#footer_container {
	max-width: 940px;
	height: 100px;
	margin: 0 auto;
	padding-top: 2%;
}

.social {
	list-style: none;
}

.social li a {
	font-family: 'Permanent Marker', cursive;
	font-size: 20px;
	display: inline;
	float: right;
	padding: 10px;
	color: #A3A3A3;
	text-decoration: none;
	-o-transition: .5s;
	-ms-transition: .5s;
	-moz-transition: .5s;
	-webkit-transition: .5s;
	transition: .5s;
}

.social li a:hover {
	color: #ff7bac;
}

.copyright_text {
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	padding-top: 2%;
	float: left;
	line-height: 1.5em;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-size: 0.65em;
	color: #A3A3A3;
}

2 Comments

    1. Hi Bruno,
      Yay, that’s good to hear! I’m actually working on the final touches for my new PixelFix program–I made a video on it late last year. Hold off on emailing it to me for now, and I’ll announce when the program is open and I’m available for code reviews!

Leave a Reply

Your email address will not be published. Required fields are marked *

More On XO PIXEL