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
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
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
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
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
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
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.
