web design 101 – Build Your First Website – Part 2

Today I’m going to start with a quote a very important quote that changed my way of thinking, and I hope it will help you too not only in the web design field but in all your life.

Easy choices, hard life.

Hard choices, easy life.

– Jerzy Gregorek

Why this quote? Because a lot of people quit from the early stage and they take the easy choice which is quitting instead of finishing the course or whatever in their life and adding some value to themselves.

Now let’s back to our tutorial and style the HTML we’ve done in Part 1 of the tutorial.

First of all, we will need a Reset stylesheet.  The goal of the reset is to prevent the browser default style, in paddings, margins, borders, font size and more… I’ll be using the Reset suggested by Eric Meyer.

/*******************************************************
********************* 1.RESET
*******************************************************/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	box-sizing: border-box;
	font-size: 100%;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, video, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
button{
	outline: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

 

General Settings

This part is very important I put this CSS code in almost all my projects. By styling the main elements (html, body, a, p, h1…,input) this will save you from repeating code and keep your code dry. This part should be used in all your projects if you’re not using some CSS frameworks like Bootstrap and Foundation.

/*******************************************************
********************* 2.GENERAL SETTINGS 
*******************************************************/
html{
	height: 100%;
	width: 100%;
	float: left;
}
body{
	background: #ffffff;
	color: #888;
	font-size: 14px;
	font-family: 'Roboto', sans-serif;
	width: 100%;
	height: 100%;
	float: left;
}
a{
	color: #333333;
	text-decoration: none;
	-webkit-transition: color 0.4s, background 0.4s;
    -moz-transition:    color 0.4s, background 0.4s;
    -o-transition:      color 0.4s, background 0.4s;
    transition:         color 0.4s, background 0.4s;
}
a,p{
	font-size: 1.02em;
}
h1, h2, h3, h4, h5, h6{
	line-height: 140%;
	color: #444444;
	font-weight: 400;
}
h1{
	font-size:2.2em;
	margin: 0 0 30px;
	margin-bottom:20px;
}
h2{
	font-size:1.9em;
	margin-bottom:20px;
}
h3{
	font-size:1.5em;
	margin-bottom:10px;
}
h4{
	font-size:1.2em;
	margin-bottom:10px;
}
h5{
	font-size:1em;
	margin-bottom:10px;
}
h6{
	font-size:.9em;
	margin-bottom:4px;
}
p{
	line-height: 170%;
	margin: 0px 0px 20px;
}
img{
	display: block;
}
section{
	width: 100%;
	float: left;
	padding: 100px 0;
	position: relative;
}
/* inputs*/
textarea, input[type="text"],
input[type="password"],
input[type="search"],
input[type="email"]{
	background-color: #ffffff;
	border: 1px solid #e7e7e7;
	color: #666666;
	font-size: 1em;
	text-indent: 10px;
	outline: none;
	width: 100%;
}
input[type="text"],
input[type="password"],
input[type="search"],
input[type="email"]{
	height: 40px;
}
textarea{
	resize: none;
	overflow: auto;
	margin-bottom: 10px;
	padding: 10px 0;
}
select{
	border: 1px solid #ddd;
	border-radius: 3px;
	color: #888;
	height: 40px;
	width: 100%;
	padding: 8px 10px;
	outline: none;
}
select:hover,
select:active,
select:focus
{
	color: #222;
	border-color: #222;
}

Layouts

this part of CSS where I put on all the repeated elements like the section title, button style and the container which are used almost in all sections.

/*******************************************************
********************* 3.LAYOUTS
*******************************************************/
.container{
	width: 1160px;
	margin: 0 auto; /* MARGIN TOP AND BOTTOM ZERO MARGIN LEFT & RIGHT AUTO TO BE CENTERED*/
	padding: 0 20px;
}
.section-title{
	color: #af30dd;
	font-size: 2.6em;
	font-weight: 600;
	text-align: center;
	margin-bottom: 50px;
}
.btn{
	background: #af30dd;
	border-radius: 60px;
	border: none;
	color: #fff;
	cursor: pointer;
	display: inline-block;
	font-size: 1.1em;
	font-weight: 600;
	text-transform: uppercase;
	padding: 10px 14px;
}

1. The Header

header html

Now let’s style the first element of our page (the header).

/*******************************************************
********************* 3.THE HEADER 
*******************************************************/
header {
	background: #af30dd;
	box-shadow: 0 0 20px 1px rgba(0,0,0,.1);
	width: 100%;
	height: 70px;
}
.logo{
	background: transparent url('../images/logo.png') no-repeat;
	display: block;
	float: left;
	width: 185px;
	height: 70px;
	margin: 0;
	text-indent: -9999px;
}
.primary-nav{
	float: right;
}
.primary-nav>ul>li{
	height: 70px;
	line-height: 70px;
	margin-left: 20px;
	display: inline-block;
}
.primary-nav>ul>li>a{
	color: #fff;
	font-weight: 600;
}

In the logo part we will be making the text inside the h1 hidden by the text-indent property and the logo image will be a background image.
The navigation will be on the right of the header.

2. Intro section

hero html

The intro is the part where we’ll be showing the main message of the site. In this section, we will make the background as cover using the background-size property that will let the background to cover all the section area.

.intro{
	background: #333333 url('../images/bg.jpg') center center no-repeat;
	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
  	background-size: cover;
  	text-align: center;
  	padding: 150px 0;
}
.intro-title{
	color: #fff;
	font-size: 3em;
	font-weight: 600;
}
.intro-subtitle{
	color: #fff;
	font-size: 1.3em;
	line-height: 160%;
}

3. Services section

services html

In the services section, we will have three elements(services) each one should have a width of 33.3333% because we’re not using any CSS grid or framework here. The service image will be in form of a circle by using the border-radius property.

/*******************************************************
********************* 6.SERVICES
*******************************************************/
.service-item{
	width: 33.3333%;
	float: left;
	padding: 20px;
	text-align: center;
}
.service-image{
	background: #af30dd;
	border-radius: 100%;
	width: 90px;
	height: 90px;
	margin: 0 auto 30px auto;
	text-align: center;
}
.service-image img{
	display: inline;
	margin-top: 15px;
}
.service-title{
	font-weight: 600;
}

4. Blog section

blog html

in the blog, we will have two blog articles each one will have 50% width, and a Read more button.

/*******************************************************
********************* 8.BLOG
*******************************************************/
.blog{
	background: #222;
}
.blog-article{
	color: #fff;
	width: 50%;
	float: left;
	padding: 20px;
	text-align: center;
}
.blog-article-image img{
	border-radius: 5px;
	width: 100%;
	margin-bottom: 20px;
}
.blog-article-title a{
	font-weight: 600;
	font-size: 1.1em;
	color: #af30dd;
}
.read-more{
	width: 100%;
	float: left;
	margin-top: 30px;
	text-align: center;
}

5. Contact section

Contact html

In the contact section, we’ll have two elements .contact-infos and .contact-form both will have a width of 50%. Inside of the contact info, there are three .info-row each one has a 100% width. And inside of the contact form, we have two inputs and one textarea that all share the same style with the box-sahdow property.

/*******************************************************
********************* 9.CONTACT
*******************************************************/
.contact-infos,
.contact-form {
	width: 50%;
	float: left;
}
.info-row{
	width: 100%;
	float: left;
	margin-bottom: 20px;
}
.info-row h4{
	color: #af30dd;
	font-weight: 800;
}
.input-holder{
	margin-bottom: 20px;
	width: 100%;
	float: left;
}
.input-holder input{
	width: 48%;
	float: left;
}
.input-holder input:last-child{
	float: right;
}
.contact-form input,
.contact-form textarea{
	border-radius: 5px;
	box-shadow: 0 2px 20px rgba(0,0,0,.1);
}
.contact-form textarea{
	height: 100px;
}
.message-btn{
	float: right;
}

6. The Footer

Footer html

The final section is the footer we have here a footer logo that has the same style as the logo in the header and some copyrights text.

/*******************************************************
********************* 10.FOOTER
*******************************************************/
footer{
	border-top: 1px solid #ddd;
	height: 70px;
	width: 100%;
	float: left;
}
.footer-logo{
	background: transparent url('../images/logo-footer.png') no-repeat;
	display: block;
	float: left;
	width: 185px;
	height: 70px;
	margin: 0;
	text-indent: -9999px;
}
footer p{
	float: right;
	display: inline-block;
	height: 70px;
	line-height: 70px;
	margin: 0;
}

Thank you for reading this boring lines I hope at least you get some value form this.
If you have any question please feel free to ask me in the comment section.

Live Demo

Leave a reply:

Your email address will not be published.

Site Footer