Part 3 – Create hero block | Portfolio website

Articles, Blog

Part 3 – Create hero block | Portfolio website

Part 3 – Create hero block | Portfolio website


Hi my name is Bibek and in this session
I’m going to show you how to create hero block using HTML and CSS. First of all
let’s have a quick look at the design. We got background image, header, paragraph
and button. Notice that our background image has black overlay to make text
more readable. Now let’s begin by writing some HTML code. I will copy the code and explain it. As you can see we got a section with a class called
hero block and div with a class called container. Then inside this container we
got header wrapped in

tag, paragraph in

tag and button intag with a class called .btn Now let’s save and refresh the page. hmm the content is overlapped by header
because it has fixed position. To solve this issue we can add padding
top to the main tag. Remember padding top should be equivalent to the height
of the header so let’s check the height of the header first by using developer
tool. Hover over this header tag and you will see the header’s height is 76 pixel
so 76 pixel will be the padding top of main tag. Great!! Now we need a background image so I will copy this code and paste it over here. Everything looks perfect now with HTML
so let’s begin writing CSS for hero block. I will copy the code and explain
it. background size: cover means it will
resize the background image to cover the entire container. background position: 50% means it will be centered. Then we have used padding, text align and color. Let’s compare to our original design. We are now missing black overlay.
Let’s add it using before pseudo-element. It has background in our RGBA means we
got black background with 0.85 opacity. Then we use position:absolute with top,
bottom, left and right value to 0. Now let’s see the result. The black overlay is covering the entire
page. This is not the result we are looking forward but I have a quick
solution. Let’s add position: relative in hero block so that it covers only hero
block. Looking better now!
But still not convincing we can’t read the text. It is because overlay has
absolute: position so container div is now overlapped by it. If you want to move container div in front of overlay then you
have to use higher z-index. Remember z-index can only be used when there is
some position value like absolute, relative etc. Here we will use
position: relative and z-index: 1. Let’s add them and see the result. Great!! Now let’s have a quick look at the
design. It has got smaller width. We can add max-width to container to get
desired result. Now let’s add some CSS for headings. We have used different font size for
different headers and all headers will have margin bottom of 20 pixel and font
weight of 500. Everything is working well so far. Now
let’s add margin bottom of 25 px for all

tags. Finally we have to add CSS for button. I
will copy them and explain it. We have used CSS properties like border,
background, font, color, padding etc whichever is needed to style the button.
They are basic CSS properties but in demo site we have got some fancy hover
effect. Let’s have a quick look. As you can see when the button is hovered red background is slided from left to right. If you notice clearly the
background is slightly tilted too. So let’s achieve this style using before
pseudo-element. We want this background box inside this
button so let’s add position: relative. If you want to hide the rest you can use
overflow:hidden in button. Then in hover just expand the width from 5% to 150%. Since the color of text is red, it seems
invisible when we hover the button. So let’s add white color in hover. Here we go. Our hero block looks much
nicer now. This is the end of this session and in the next session I’ll be
showing you how to create a about me block.

Leave a Reply

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