copiamndo el figma | HTML y CSS: ambientes de desarrollo, estructura de archivos y tags | Alura Latam

<!DOCTYPE html>
<html lang="es-mx">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portafolio</title>
    <style>
        .button {
            background-color: #04AA6D;
            /* Green */
            border: none;
            color: white;
            padding: 15px 32px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 4px 2px;
            cursor: pointer;
        }

        .button2 {
            background-color: #008CBA;
        }

        /* Blue */
        .button3 {
            background-color: #008CBA;
        }

        body {
            background-color: black;
            color: white;
            margin: 0;
            height: 100vh; /* Para que ocupe toda la pantalla */
            display: flex;
            flex-direction: column;
        }
        .division {
            flex: 1; /* Todas ocupan el mismo espacio */
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 24px;
            color: white;
        }
        .uno { background: black; }
        .dos { background: black; }
        .tres { background: black; }


        /* Blue */
    </style>

</head>

<body>
    <header></header>
    <main>
        <!-- <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul> -->
        <div class="division uno">
            <h1>Eleve tu negocio digital a otro nivel con un <strong>Front-end de calidad!</strong> </h1>
            <br>
            <br>
            <p>¡Hola! soy Edwin Torres, Ingeniero Mecánico desarrollador Front-end con especialización desarrollo de
                software. Ayudo a pequeños negocios y diseñadores a llevar a cabo buenas ideas. ¿Hablamos?</p>
                <br>
        </div>
        <div class="division dos">
            <img src="edwinlink.png" alt="Imagen de Edwin">
            <!-- <input type="text"><input type="password"> -->

        </div>

        <div class="division tres">
            <br>
            <a href="https://www.linkedin.com/in/edwin-bladimir-torres-corredor-9112435/"
                style="display: inline-block; padding: 10px 20px; background: blue; color: white; text-decoration: none; border-radius: 5px;">Ir
                a LikedIn</a>
                <br>
            <a href="https://github.com/Bladito77"
                style="display: inline-block; padding: 10px 20px; background: blue; color: white; text-decoration: none; border-radius: 5px;">Ir
                a Github</a>
        </div>

    </main>
    <footer></footer>
</body>

</html>

<!-- html: Genera la estructura básica de un documento HTML.
ul>li*5: Crea una lista no ordenada con cinco elementos de lista.
div>h1+p: Crea una div que contiene un encabezado (h1) seguido de un párrafo (p).