Create a Website using UI Packs (PSD to HTML) – Day 2

CodingValeriu Timbuc • June 20, 2012 • 3 minutes READ

Yesterday we started a new tutorial series about coding a PSD template using HTML and CSS3. Today we will continue coding our template. We will code the featured movies section and the content section (posts and sidebar).

Step 1 – Featured Movies HTML

We will start with the HTML structure of the featured movies section. Create a div to wrap the featured movies slider and to center it on the page. Add a heading and 3 anchor tags for the next, previous and “see all” buttons. Then create an unordered list and each list will contain the movie’s image preview, heading, paragraph and the total views and likes.

<div id="featured-movies-wrapper">
	
	<div id="featured-movies" class="center-wrapper">
		
		<h4>Movies of the Month</h4>

		<a class="see-all" href="#">See All</a>
		
		<!-- Prev & Next Buttons -->
		<a href="#" class="mm-prev-button"></a>
		<a href="#" class="mm-next-button"></a>
		
		<div id="fetured-movies-slider-wrapper">
			
			<div id="featured-movies-slider">
				
				<ul>	
					
					<li>						
						<div class="one-fourth">
							<a href="#"><img src="img/content/harrypotter.png" alt=""></a>
							<a href="#"><h2>Harry Potter</h2></a>
							<p>Laos, alongside many of its Southeast Asian neighbours, is well known.</p>
							<ul class="likes-views">
								<li><a class="likes" href="#">165</a></li>
								<li><a class="views" href="#">2,350</a></li>
							</ul><!-- end .likes-views -->
						</div><!-- end .one-fourth -->
					</li>
					
					<li>
						<div class="one-fourth">
							<a href="#"><img src="img/content/transformers.png" alt=""></a>
							<a href="#"><h2>Transformers</h2></a>
							<p>Laos, alongside many of its Southeast Asian neighbours, is well known.</p>
							<ul class="likes-views">
								<li><a class="likes" href="#">165</a></li>
								<li><a class="views" href="#">2,350</a></li>
							</ul><!-- end .likes-views -->
						</div><!-- end .one-fourth --> 
					</li>
					
					<li>
						<div class="one-fourth">
							<a href="#"><img src="img/content/batman.png" alt=""></a>
							<a href="#"><h2>Batman</h2></a>
							<p>Laos, alongside many of its Southeast Asian neighbours, is well known.</p>
							<ul class="likes-views">
								<li><a class="likes" href="#">165</a></li>
								<li><a class="views" href="#">2,350</a></li>
							</ul><!-- end .likes-views -->						
						</div><!-- end .one-fourth -->
					</li>
					
					<li>
						<div class="one-fourth">
							<a href="#"><img src="img/content/ironman.png" alt=""></a>
							<a href="#"><h2>Iron man</h2></a>
							<p>Laos, alongside many of its Southeast Asian neighbours, is well known.</p>
							<ul class="likes-views">
								<li><a class="likes" href="#">165</a></li>
								<li><a class="views" href="#">2,350</a></li>
							</ul><!-- end .likes-views -->
						</div><!-- end .one-fourth -->
					</li>
				
				</ul>
			
			</div><!-- end #featured-movies-slider --> 
			
		</div><!-- end #featured-movies-slider-wrapper -->
		
		<div class="clear-both"><!-- Clear Floats --></div>
	
	</div><!-- end #featured-movies .center-wrapper --> 
	
</div><!-- end #featured-movies-wrapper -->

Step 2 – Featured Movies CSS

First we’ll create the four columns layout and set the width to 185px for each column and add a 43px margin to the right for the first three columns.

/* Four Columns */
.one-fourth,
.one-fourth-last {
	position: relative;
	float: left;
	width: 185px;
	margin-right: 43px;
}

.one-fourth-last { margin: 0; }

Then add 35px padding to the top and bottom of the featured movies section, set the width of the wrapper to 870px, the height to 260px and we will use the overflow hidden to show only four movies each time. Position the next and previous buttons at the right of the heading and the “see all” button at the right of the wrapper.

#featured-movies { padding: 35px 0; }

/* Featured Movies Slider */
#fetured-movies-slider-wrapper {
	width: 870px;
	height: 260px;
	overflow: hidden;
}

#featured-movies .mm-prev-button,
#featured-movies .mm-next-button {
	position: absolute;
	display: block;
	width: 9px;
	height: 12px;
	top: 41px;
	left: 180px;
	background: url(../img/next-prev-2.png) no-repeat 0 0;
}

#featured-movies .mm-next-button {
	left: 200px;
	background-position: -9px 0;
}

#featured-movies .see-all {
	position: absolute;
	display: block;
	top: 40px;
	right: 0;
	padding-left: 20px;
	line-height: 14px;
	background: url(../img/arrow.png) no-repeat left center;
}

For the <h4> heading we will use the “PT Sans Narrow” font. You can get it on FontSquirrel or download today’s source files. We’ll also set the font-size, the color, line-height and make the text uppercase.

@font-face {
    font-family: 'PTSansNarrowBold';
    src: url('fonts/PTN77F-webfont.eot');
    src: url('fonts/PTN77F-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/PTN77F-webfont.woff') format('woff'),
         url('fonts/PTN77F-webfont.ttf') format('truetype'),
         url('fonts/PTN77F-webfont.svg#PTSansNarrowBold') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* Featured Movies & Content Wrapper Titles */
#featured-movies h4,
#content-wrapper h4 {
	font-family: 'PTSansNarrowBold', sans-serif;
	text-transform: uppercase;
	font-size: 18px;
	line-height: 26px;
	color: #999999;
}

The titles of the movies and the “see all” button will have the same typography styles and for the paragraph we will change the color and the line-height value.

/* Featured Movies Posts Titles */
#featured-movies h2,
#featured-movies .see-all {
	text-decoration: underline;
	font-weight: bold;
	font-size: 12px;
	line-height: 18px;
	color: #5293c2;
}

/* Featured Movies Post Paragraph */
#featured-movies p {
	font-size: 12px;
	color: #979797;
	line-height: 16px;
}

To finish the featured movies section we will style the likes and views. We’ll add an icon using a background image and change the text size and color.

/* Views & Likes */
.likes-views { display: block; }

.likes-views li {
	display: block;
	float: left;
	padding-right: 25px;
}

.likes-views li a.likes {
	padding-left: 15px;
	background: url(../img/likes.png) no-repeat 0 2px;
}

.likes-views li a.views {
	padding-left: 20px;
	background: url(../img/views.png) no-repeat 0 2px;
}

.likes-views li a {
	font-weight: bold;
	font-size: 11px;
	color: #979797;
}

Step 3 – Blog & Sidebar HTML

We’ll start to add the content of our page, the blog posts and the sidebar. First we’ll create a div with id = “blog-posts” and a div id = “side-bar”. Then add a <h4> heading for each section. Every blog post will be wrapped within a div with the class = “blog-post” and every sidebar post will be wrapped in a div with class = “sidebar-post”. For the blog posts we will also add a second variation and this posts will be wrapped in a div with class = “blog-post-box”. As this post will be floated we will add another div with the class = “clear-both” before and after this posts to maintain the post structure.

<div id="content-wrapper">
	
	<div class="center-wrapper">
		
		<div id="blog-posts">
			
			<h4>Movie of the Day</h4>
			
			<div class="blog-post">
				<a href="#"><img src="img/content/dreamworks.png" alt=""></a>
				<a href="#"><h1>DreamWorks Feels The Need</h1></a>
				<p>Laos, alongside many of its Southeast Asian neighbours, is well known for producing counterfeit goods of all types, and with the world going technology crazy in the last few years, Apple products take centre stage at the local market in the capital city of Vientiane.</p>
				<p>With the world going technology crazy in the last few years, Apple products take centre stage at the local market in the capital city of Vientiane.</p>
				<ul class="likes-views">
					<li><a class="likes" href="#">165</a></li>
					<li><a class="views" href="#">2,350</a></li>
				</ul><!-- end .likes-views -->
			</div><!-- end. blog-post -->
			
			<div class="blog-post">
				<a href="#"><img src="img/content/jurors.png" alt=""></a>
				<a href="#"><h1>Jurors announced for Tribeca Film Festival</h1></a>
				<p>Laos, alongside many of its Southeast Asian neighbours, is well known for producing counterfeit goods of all types, and with the world going technology crazy in the last few years, Apple products take centre stage at the local market in the capital city of Vientiane.</p>
				<ul class="likes-views">
					<li><a class="likes" href="#">165</a></li>
					<li><a class="views" href="#">2,350</a></li>
				</ul><!-- end .likes-views -->
			</div><!-- end. blog-post -->
			
			<div class="clear-both"><!-- Clear Floats --></div>
			
			<div class="blog-post-box float-left">
				<a class="video-icon" href="#"><img src="img/content/metallica.png" alt=""></a>
				<div>
					<a href="#"><h1>Metallica - Enter Sandman</h1></a>
					<p>Laos, alongside many of its Southeast Asian neighbours, is well known.</p>
					<ul class="likes-views">
						<li><a class="likes" href="#">165</a></li>
						<li><a class="views" href="#">2,350</a></li>
					</ul><!-- end .likes-views -->
				</div>
			</div><!-- end .blog-post-box .float-left -->
			
			<div class="blog-post-box float-right">
				<a class="video-icon" href="#"><img src="img/content/metallica2.png" alt=""></a>
				<div>
					<a href="#"><h1>Metallica - Enter Sandman</h1></a>
					<p>Laos, alongside many of its Southeast Asian neighbours, is well known.</p>
					<ul class="likes-views">
						<li><a class="likes" href="#">165</a></li>
						<li><a class="views" href="#">2,350</a></li>
					</ul><!-- end .likes-views -->
				</div>
			</div><!-- end .blog-post-box .float-right -->
			
			<div class="clear-both"><!-- Clear Floats --></div>
			
			<div class="blog-post">
				<a href="#"><img src="img/content/kay.png" alt=""></a>
				<a href="#"><h1>Kay Panabaker played Emily Lightman for the pilot episode</h1></a>
				<p>Laos, alongside many of its Southeast Asian neighbours, is well known for producing counterfeit goods of all types, and with the world going technology crazy in the last few years, Apple products take centre stage at the local market in the capital city of Vientiane.</p>
				<ul class="likes-views">
					<li><a class="likes" href="#">165</a></li>
					<li><a class="views" href="#">2,350</a></li>
				</ul><!-- end .likes-views -->
			</div><!-- end .blog-post -->
		
		</div><!-- end #blog-posts -->
		
		<div id="side-bar">
			
			<h4>Latest News</h4>
			
			<div class="sidebar-post">
				<a class="video-icon" href="#"><img src="img/content/fantastic.png" alt=""></a>
				<a href="#"><h3>A Fantastic Fear of Everything</h3></a>
				<p>Laos, alongside many of its Southeast Asian neighbours, is well known for producing counterfeit goods of all types.</p>
				<ul class="likes-views">
					<li><a class="likes" href="#">165</a></li>
					<li><a class="views" href="#">2,350</a></li>
				</ul><!-- end .likes-views -->
			</div><!-- end .sidebar-post -->
			
			<div class="sidebar-post">
				<a href="#"><img src="img/content/rome.png" alt=""></a>
				<a href="#"><h3>To Rome with Love</h3></a>
				<p>Laos, alongside many of its Southeast Asian neighbours, is well known for producing counterfeit goods of all types.</p>
				<ul class="likes-views">
					<li><a class="likes" href="#">165</a></li>
					<li><a class="views" href="#">2,350</a></li>
				</ul><!-- end .likes-views -->
			</div><!-- end .sidebar-post -->
			
			<div class="sidebar-post">
				<a class="video-icon" href="#"><img src="img/content/loopers.png" alt=""></a>
				<a href="#"><h3>Loopers</h3></a>
				<p>Laos, alongside many of its Southeast Asian neighbours, is well known for producing counterfeit goods of all types.</p>
				<ul class="likes-views">
					<li><a class="likes" href="#">165</a></li>
					<li><a class="views" href="#">2,350</a></li>
				</ul><!-- end .likes-views -->
			</div><!-- end .sidebar-post -->

		</div><!-- end #side-bar -->
		
		<div class="clear-both"><!-- Clear Floats --></div>
	
	</div><!-- end .center-wrapper --> 
	
</div><!-- end #content-wrapper -->

Step 4 – Blog & Sidebar Styles

We’ll begin to set the margins and paddings of our content elements (images, paragraphs, etc.). For the images we will use the max-width selector to set the maximum width of the images.

#content-wrapper {
	padding-top: 50px;
	padding-bottom: 25px;
}

#content-wrapper .blog-post,
#content-wrapper .sidebar-post { padding-bottom: 60px; }

#content-wrapper img {
	margin: 15px 0;

	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
}

#content-wrapper .blog-posts img { max-width: 500px; }
#content-wrapper .side-bar img { max-width: 315px; }

#content-wrapper p { margin: 10px 0; }

Then we will style the second blog post variation that will be wrapped in a smaller white box. We’ll set the width to 227px, add 2px border-radius to make the corners rounded, add a bottom shadow and a CSS3 gradient.

#content-wrapper .blog-post-box {
	position: relative;
	overflow: hidden;
	width: 227px;
	padding-bottom: 15px;
	margin-bottom: 40px;

	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;

	-webkit-box-shadow: 0px 2px 0px rgba(0,0,0, .06);
	-moz-box-shadow: 0px 2px 0px rgba(0,0,0, .06);
	box-shadow: 0px 2px 0px rgba(0,0,0, .06);

	background: #ffffff;
	background: -webkit-linear-gradient(top, #ffffff 0%, #f8f8f8 100%);
	background: -moz-linear-gradient(top, #ffffff 0%, #f8f8f8 100%);
	background: -o-linear-gradient(top, #ffffff 0%, #f8f8f8 100%);
	background: -ms-linear-gradient(top, #ffffff 0%, #f8f8f8 100%);
	background: linear-gradient(top, #ffffff 0%, #f8f8f8 100%);
}

#content-wrapper .blog-post-box div { padding: 25px; }

#content-wrapper .blog-post-box img {
	max-width: 227px;
	margin: 0;

	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
}

Next we will set the color, font-size and the line-height for the headings and the paragraphs.

/* Blog & Sidebar Posts Titles */
#content-wrapper h1,
#content-wrapper h3 {
	font-size: 20px;
	line-height: 28px;
	color: #5293c2;
}

/* Blog & Sidebar Paragraph */
#content-wrapper p {
	font-size: 13px;
	line-height: 18px;
	color: #7c7e85;
}

/* Blog Post Box Title */
#content-wrapper .blog-post-box h1 {
	font-weight: bold;
	font-size: 12px;
	line-height: 18px;
	color: #5293c2;
}

Some images have a play button. We’ll use it to show to the visitors that that blog post has a video. To add this icon to the images we will set the position of the anchor tag to relative. Then using the :before pseudo-selector we will insert the image and position it absolutely on the anchor tag that is wrapping the post image.

/* Images Video Icons */
.video-icon { position: relative; }

.video-icon:before {
	position: absolute;
	display: block;
	content: '';
	width: 33px;
	height: 35px;
	bottom: 10px;
	right: 10px;
	background: url(../img/video-icon.png) no-repeat 0 0;
}

#side-bar .video-icon:before { bottom: 25px; }

To finish today’s tutorial we will add the float left, float right and clear floats classes.

/* Float Left & Right */
.float-left { float: left; }
.float-right { float: right; }

/* Clear Floats */
.clear-both { clear: both; }

Source Files

Each day you will be able to download the source files that contain all the resources that we used on the tutorial. On the last day of this tutorial you will be able to download the complete project that contains all the code, images, psd file and all the resources of the tutorial.

Conclusion

That’s it for today, if you have any question let me know in the comments. Don’t forget to check the last part of this tutorial tomorrow.

Create a Website using UI Packs (PSD to HTML) – Day 1
Create a Website using UI Packs (PSD to HTML) – Day 3