Part 5 – Create Services Block | Portfolio website


Hi, my name is Bibek and in this session
I’m going to show you how to create services block. Looking at the design we
need title called services and content which is divided into three columns. Each
column has icon, heading and paragraph. When it comes to icon we have to find
out which icon providers are they. I mean are they font awesome, icomoon, glyph
icon or others. In the example I have used font awesome 5 so let’s import
it inside head tag just after google font. Then let’s add some HTML code after
the end of about block section. Just like aboutBlock ID is used to scroll and
navigate towards about me block serviceBlock ID is used to scroll and navigate
toward services block. Then block class holds common CSS properties for all
blocks like padding, heading and border bottom and serviceBlock class is unique
class which will be used only to style this block without affecting any other
blocks. Then we have a div with a class called container and heading. Let’s have
a quick look. We can also see that the navigation is
working too. Now let’s add HTML for these 3 columns. I have used class called threeColumn,
this will be the parent class for its child class called col. col is just a
short form of column. Inside col class I have a div with a
class called icon where I have added font awesome icon – like this. If you don’t
know how font awesome works, I have shared my tutorial link in the
description below. Then we have heading and paragraph. If you want to add more child div, then
keep on copying col div and change the content. The reason I have used three column here
is because if there is another block which is also using three column and
have similar layout then I can reuse it again. Alright so now let’s add some
CSS. Here I have used display:inline-block,
with 33.33% and padding left and right 15px each. As you can see third column is not
aligning together with first and second column. I have a quick fix for this one.
Set actual font size, line height and letter spacing in child div or in this
example it is .col class. Then in parent div or .threeColumn
class, set font size and line height to 0 and letter spacing to some negative
value like – 7px. Now refresh the page again and it should
work. Great!! let’s check the design now. All content are centered so let’s use
text-align:center for parent div. Also in child div we have used padding:0
15px so in order to balance left and right position we have to set margin:0
– 15px in parent div. Now let’s check the page again. Nice!! Now let’s have a look at the demo site, you will find white background and zoom
effect on hover. We can get this effect using CSS on hover. You can increase or decrease zoom by
modifying the scale here. I will revert back to 1.03. Now let’s style icon according to our
design. Nothing fancy here. Just added border,
font-size, height, weight, color etc whichever is needed to style the icon’s
outer circle. Then let’s add some hover effect in icon. Finally let’s add heading color to black
and hover color to red. Perfect!! we got nice services block now.
Feel free to comment below if you’ve got any questions. This is the end of this
session. In the next session I will show you how to create portfolio block. Thank
you.

Add a Comment

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