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! 👋 👋

Sort:  

Welcome Juanpchica to Steemit !! . I hope you enjoy your time here, its a great community :) Nice post, i will follow your account, please follow me !

Welcome to Steemit @juanpchica, I have upvoted and sent you a tip. Check my blogs if you are looking for tips on how to earn more Steem and SBD.

Welcome to the steemit community @juanpchica. Enjoy the platform and everything it has to offer. Stay true to who you are and you will do great on this platform.

#circleoffriends
#cof

Congratulations! This post has been upvoted from the communal account, @minnowsupport, by juanpchica from the Minnow Support Project. It's a witness project run by aggroed, ausbitbank, teamsteem, theprophet0, someguy123, neoxian, followbtcnews/crimsonclad, and netuoso. The goal is to help Steemit grow by supporting Minnows and creating a social network. Please find us in the Peace, Abundance, and Liberty Network (PALnet) Discord Channel. It's a completely public and open space to all members of the Steemit community who voluntarily choose to be there.

Coin Marketplace

STEEM 0.19
TRX 0.15
JST 0.029
BTC 64349.20
ETH 2673.53
USDT 1.00
SBD 2.83