Web Development #14 - Introduce Myself

Hello everybody! 🤗 🤗

In this new post we continue with the layout of our portfolio of services, where we will create a small section where we will put a short history about us, who we are and why we like the world of web development.

The section we will do according to mockup design is the following ...

The first thing we neet to do is open our sublime text or favorite code editor and open the file index.html, where we paste the following code that will help us to structure this section ...

Important: Where we see this part {{image}} we must to replace with the following code ..

Because steemit not let me publish this tag 😩 😩 and that's it.

<section id="section-2">
    <div class="content-section">
        <figure>
            {{imagen}}
        </figure>
        <div class="about-me">
            <h3>Who i am?</h3>
            <p>
                I am a web developer passionate about web standards, I consider myself a very self-taught person and dedicated to my job, I like to create clean, reusable code and optimize it for web positioning in search engines SEO on page, I really like the area of programming and Computer security.
                <br>
                <br>
                I am a mechatronics engineer and I really like the area of automation and programming, as well as I have the ability to program pics, plc, create SCADA systems etc ...
            </p>
        </div>
    </div>
</section>

This code we paste after the other code of the banner that we created in the previous post, we should have the code something like this ...

And now we save changes and reload the browser, we must see something like this ...

The next step is to give styles to the new section, what we should do is open our style.css file and paste the following code ...

/* Section about me */
section#section-2 {
    background: #e8eaea;
    padding: 60px 40px 40px;
}
.content-section {
    max-width: 1024px;
    margin: 0 auto;
    overflow: hidden;
}
#section-2 figure {
    margin: 0;
    float: left;
    padding-right: 25px;
}
.about-me {
    line-height: 1.4;
    text-align: justify;
    color: #8a8686;
    font-size: 18px;
}
.about-me h3 {
    margin-top: 0;
    margin-bottom: 0px;
    color: #696868;
    letter-spacing: 2px;
}

After paste and load the page again we will have something like this ...

As you can see, when we apply css styles the page change is very noticeable, I think that's all for today.

Regards! 👋 👋