One Page Portfolio Website Tutorial CSS

In this weeks video tutorial, I will be showing you how to finish coding a responsive one-page portfolio website with CSS3. Be sure to check out part 1 of this tutorial to see how we started coding the website with HTML5.

Step 1 – CSS Reset

Before we begin to apply CSS3 styles to this websites, we should first use a CSS reset. What is that you ask? Well, it’s important to know that all browsers have styles that are applied to websites by default. This includes padding, margins, font-sizes etc. The aim for a CSS reset is to remove all that default styling so that any CSS styling done by the web developer is from scratch, without the browser interfering with the look of the website. There’s a popular CSS reset that I use called “Reset CSS 2.0” by Eric Meyer. Place this at the beginning (line 1) of your style sheets.

Step 2 – The CSS3

Now that we’ve applied the reset rules to our stylesheet, we can move on to applying styles to our one-page portfolio. Just like in part one of this tutorial, we’re going to apply the styles in the order in which they appear in the HTML. First, we’re going to style the header, then we’ll style the about section, the work section, the contact section, image divider and lastly, the footer. So without further delay, let’s finish this one-page portfolio so we can show off our work!

Global Styles

First, I’m just going to apply global styles (that apply to the entire website) to some general CSS elements. This helps save time since we won’t have to apply the same rules over and over again for each section. I’m going to change the background color of the entire website, add a smooth hover effect to all anchors/hyperlinks, style em and strong tags, make all images full-width, and change the fonts and look of the heading tags. Now that we’ve applied the global styles to our website, we can move on to style the header of our website.


body {
	background-color: #f9f9f9;
}

a {
	-o-transition: .5s;
	-ms-transition: .5s;
	-moz-transition: .5s;
	-webkit-transition: .5s;
	transition: .5s;
	text-decoration: none;
}

em {
	font-style: oblique;
}

strong {
	font-style: bold;
}

img {
	width: 100%;
}

h1, h2, h3, h4, h5 {
	font-family: proxima-nova, sans-serif;
	font-style: normal;
}

h3 {
	text-transform: capitalize;
	font-size: 1.875em;
	padding: 0 0 1% 0;
	color: #001833;
	font-weight: 800;
}

Header

To style the header to look like our original mockup, we’re going to first use the background image we chose in our mockup and then apply a subtle gradient over the image. Then, we’re going to style the div that contains my full name. This portfolio website will be responsive because I want to be able to show it on a variety of mobile devices. Not just on a desktop computer.


header {
	background: linear-gradient( rgba(224, 204, 200, 1.0), rgba(224, 204, 200, 0.90)), /* bottom, image */
	url(img/laptop.jpg);
	background-size: cover;
	background-position: center top;
	width: 100%;
}

.intro {
	max-width: 960px;
	margin: 0 auto;
	padding: 8% 0;
}

.intro h1 {
	font-size: 6em;
	text-align: center;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight: 800;
	line-height: 1.5em;
}

.intro h2 {
	font-size: 2em;
	text-align: center;
	color: #fff;
	font-weight: 300;
	text-transform: capitalize;
	letter-spacing: 0.09em;
}

About

Now, let’s set some rules for the about section. Note that both the about section and work section will be wrapped in the same div called “wrapper”. First, we’ll set the maximum width of the wrapper to 960px using the max-width:960px declaration. We’ll use the margin: 0 auto declaration to center the wrapper in the web page. Lastly, we’re going make the padding on the top and bottom of the about section 4%, and style the paragraph text and the anchor text. Be sure to watch my tutorial on how to style text in css3 for a more in-depth look on how to do just that. Now, let’s move on to the work section.


.wrapper {
	max-width: 960px;
	margin: 0 auto;
	font-family: proxima-nova, sans-serif;
	-webkit-animation-delay: 4s;
	/* Chrome, Safari, Opera */
	animation-delay: 2s;
}

.about {
	padding: 4% 0;
}

.about p {
	font-family: proxima-nova, sans-serif;
	font-style: normal;
	font-weight: 300;
	line-height: 1.8;
	color: #616569;
	letter-spacing: .03em;
	margin: 10px auto;
	font-size: 1.5em;
	padding: 2% 0;
}

.about p a {
	color: #E1CCC9;
	border-bottom: 2px solid;
}

Work

The work section is the best part of this whole one-page tutorial. It’s a different layout than the usual full-width, one-page portfolio layouts that are so common in many websites today.

Now let’s style the text-box. First, we’re going to float the textbox to the left of the page, align the text within the text box to the left, and make the width of the text box 480px. Just as in our mockup, we’re now going to style the big rectangular button. Lastly, we need to style the portfolio image and alternate the image placement for each portfolio item as we did in our mockup.


.work {
	height: 300px;
	padding: 2% 0;
}

.work h3 {
	padding: 4% 0;
}

.text-box {
	float: left;
	text-align: left;
	width: 480px;
	background-color: #fff;
	height: 100%;
}

.text-box-content {
	padding: 4% 8%;
}

.text-box-content p {
	line-height: 1.8;
	color: #616569;
	letter-spacing: .03em;
	font-size: 1em;
}

.button {
	padding: 5% 3%;
	border: 3px solid #e0ccc8;
	letter-spacing: 0.2em;
	text-decoration: none;
	color: #e0ccc8;
	text-align: center;
	display: block;
	font-weight: 600;
	text-transform: uppercase;
	margin-top: 4%;
}

.button:hover {
	color: #fff;
	background-color: #e0ccc8;
}

.image-area {
	width: 480px;
	height: 300px;
	overflow: hidden;
}

.left {
	float: left;
}

.right {
	float: right;
}

Contact

Styling the contact section is going to be super easy now that we’ve completed the work section! First, we want the background to be full width by setting the width of .contact to 100%. We’re also going to apply a background-color, add 5% padding to the top and bottom and apply a 5% margin only to the top. We’re also going to use clear: both to this section to prevent any floating elements from floating to the left or right of this section.


.contact {
	width: 100%;
	background-color: #011833;
	padding: 5% 0;
	margin-top: 5%;
	clear: both;
}

.contact-content {
	max-width: 960px;
	margin: 0 auto;
	text-align: center;
}

.contact-content h4 {
	font-size: 1.875em;
	padding: 1% 0;
	color: #fff;
	font-weight: 600;
	letter-spacing: 0.04em;
}

.contact-content a {
	color: #E0CCC8;
	text-decoration: none;
}

Image Divider

To style the image divider, all you need to do is selected the .image-divider class and add a plenty of padding. I added 15% to the top and bottom. I also added the image using the the background:URL(”); declaration. To make the image the full width, I used background-size:cover, I also wanted to make sure it was positioned correctly so I used background-position:center top.


.image-divider {
	padding: 15% 0;
	background: /* bottom, image */
	url(img/workspace.jpg);
	background-size: cover;
	background-position: center top;
}

Footer

To style the footer, we’re going to style the main footer tag. Then, we’re going to style the .footer-content class which will style all the content within the footer.We want the width of the footer content to be 960px, as is most of the content in this portfolio. We’re also going to center it using the margin:0 auto; declaration. Let’s add some padding, and then apply some styles to the text. Next, we’ll style the copyright text and social media links.

The copyright text needs to be on the left-hand side, so we’re going to select .credit and use float: left. To style the social media links, we’re going to select .social and float the links to the right. We want the links to display inline and not as a list, so we’re going to use the display:inline \ declaration to have them display inline and with their own width and height. Now, we’re going to color the links white, add a bit of padding around them, increase the font size and add some weight to the font. Lastly, we’re going to make the font change color on hover using : hover pseudo class.


footer {
 background-color:#E0CCC8;
 color:#fff;
 padding:2% 0;
 width:100%;
 clear:both;
 height:100px;
}

.footer-content {
 max-width:960px;
 padding:2% 0;
 margin:0 auto;
 font-family: proxima-nova,sans-serif;
 font-style: normal;
 font-weight: 300;
 line-height: 1.4;
 color: #fff;
 letter-spacing: .03em;
 font-size:1em;
}

.credit {
 float:left;
}

.social {
 float:right;
}

.social li {
 display:inline;
}

.social li a {
 color:#fff;
 padding:0.2em;
 font-size:1.8em;
 font-weight:600;
}

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

Media Queries

We’re almost done coding our one-page portfolio. We’ve done all the main work to get our portfolio to look awesome. But, we still need to make sure that it looks as good on a tablet or smartphone, as it does on our desktop computer. That’s why we need to use media queries. Media queries are made using the @media rule. This is going to allow us to create various style rules for different size browsers and devices.


@media only screen and (max-width:1000px) {
	.wrapper {
		padding: 0% 4%;
	}
	.work {
		padding: 4% 0;
	}
	.image-area {
		float: left;
		width: 100%;
		height: auto;
	}
	.text-box {
		width: 100%;
		height: auto;
	}
	.social li a {
		font-size: 1.4em;
	}
	.footer-content {
		padding: 3.5%;
	}
}

@media only screen and (max-width:800px) {
	.intro h1 {
		font-size: 4em;
		line-height: 1.2;
	}
	.intro h2 {
		font-size: 1.8em;
		padding-top: 3%;
	}
	.about p {
		font-size: 1em;
		line-height: 2;
	}
	footer {
		height: 130px;
		line-height: 1.3em;
	}
	.footer-content {
		padding: 4%;
		font-size: 14px;
	}
	.social {
		float: left;
	}
	.social li a {
		font-size: 1.3em;
	}
	.contact-content {
		font-size: 12px;
		line-height: 1.5;
	}
}

Conclusion

Now, we’ve successfully completed the coding for our one-page portfolio website! Coding a website is so much easier when it’s broken down into a series of steps. If you haven’t already, watch part 1 to see how to code the HTML. Or, see how the whole portfolio website was created by watching how it was designed in Adobe Photoshop.

Feel free to share this tutorial with anyone you know that would like to learn how to create their own portfolio to showcase their creative artwork. If you’ve followed along with this tutorial, I would love to see what your version of this one-page website looks like! Feel free to change the colors and fonts to suit your personal style!

Leave a Reply

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

More On XO PIXEL