Markup of the hero section

The hero section is this particular area. It doesn’t include the navbar area. We will add that at later stage.

but for now, lets add a section with the Id home and a class home-area. The id will be used for the menu scrollspy.

Now, im going to create a container. It is a bootstrap container with padding on both left and right ride. But if you use container-fluid, it will take the total width. In our case we need that padding, so we are using container class.

now, I am gonna create a new div with a class of home-content.

as you can see here, there are 5 elemets here, as a column. first one is hello everyone…second one is i’m jesson doe…3rd is this text with this typewritter effect….thn the description and the button here.

<section id="home" class="home-area">
       <div class="container">
           <div class="home-content flex-column d-flex justify-content-center">
                <h6 class="hello">Hello <span>Everyone!</span></h6>
               <div class="intro">
                   <h1>I'm Jesson Doe</h1>
               <div class="intro_skill mb-1">
                        <span id="typed-strings">
                            <h2>Web Designer.</h2>
                            <h2>Web Developer.</h2>
                            <h2>UI Designer.</h2>
                        <span id="typed"></span>
               <div class="desc">
                   <p>I'm 28 years old creative web designer, specialized in User Interface Design and Development.</p>
               <div class="hire mt-3">
                   <a href="#" class="btn-hire">Hire Me <i class="fas fa-long-arrow-alt-right"></i></a>
           <div class="next-section">
               <a href="#about">
                   <i class="fas fa-chevron-down"></i>

now lets add this little icon here. if we click that it will take us to the next section.

This is it for the lecture. in the next lecture we are going to style this hero section.

Leave a Reply

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