Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
1
respuesta

[Proyecto] Desafío: comparta tú proyecto con el mundo

HTML

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portafolio - MR</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <img src="logo.png" alt="Logotipo Portafolio">
    </header>
    <main>
        <h1>
            Eleva tu negocio digital a otro nivel <strong>con un Front-end de calidad!</strong>
        </h1>
        <p>
            ¡Hola! Soy Michael Romero, un profesional en formación a través del programa de Alura y Oracle. Me apasiona desarrollar soluciones innovadoras para mis clientes utilizando mis conocimientos en HTML, CSS y JavaScript.
        </p>
        <a href="https://www.github.com" target="_blank">Github</a>
        <a href="https://www.linkedin.com" target="_blank">LinkedIn</a>
        <a href="https://www.instagram.com" target="_blank">Instagram</a>
        <img src="perfil.jpg" alt="Foto de perfil">
    </main>
    <footer>
        <p>Author: Michael Romero</p>
        <a href="mailto:mromero.working@gmail.com">mromero.working@gmail.com</a>
    </footer>
</body>
</html>

CSS

body{
    background-color: #213555;
    color: #F5EFE7;
    justify-self: center;
}

header>img{
    width: 150px;
    padding: 10px;
}

main{
    width: 1000px;
}

main>p, main>a{
    display: inline-block;
}

main>img{
    display: flex;
    align-items: flex-end;
    margin-left: 20px;
    width: 350px;
    height: auto;
    border-radius: 5%;
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3);
}

h1{
    font-family: 'Krona One', sans-serif;
    font-size: 36px;
    padding: 10px;
}

h1>strong{
    color: #D8C4B6;
}

main>a{
    background-color: #D8C4B6;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    color: #213555;
    text-decoration: none;
    padding: 14px 25px;
    margin: 25px;
    border-radius: 10px;
}

p{
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    font-size: 22px;
    padding: 10px;
}

main>img{
    width: 350px;
}

footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #3E5879;
    color: #F5EFE7;
    text-align: center;
    padding: 10px;
}

footer>p, footer>a{
    margin: 5px;
}

footer>a{
    font-family: 'Segoe UI', Tahoma, Verdana, sans-serif;
    color: #F5EFE7;
    text-decoration: none;
    font-weight: 400;
    font-size: 20px;
    padding: 10px;
}

footer>p>a{
    text-decoration: none;
    color: #F5EFE7;
}

Resultado

1 respuesta

Hola Michael, espero que estés bien.

Gracias por tu aporte, esperamos que disfrutes mucho del contenido del curso y que esto te ayude a llegar lejos.

Mucho éxito en todo lo que te propongas y si tienes alguna duda aquí estaremos para apoyarte.

Te recomiendo que puedes interactuar con el resto de nuestros compañero por nuestro Discord.

En virtud de que en Discord el alcance es mayor, la interacción es inmediata y llega a más compañeros y el foro solo quedaría para esclarecer cualquier duda que puedas tener sobre el contenido de los cursos.

De esa manera si tienes algún comentario, opinión, recomendación o algún consejo o si quiere compartir los desafíos sea por el Discord, con certeza por ahí llegará a más personas.

¡Un saludo!

Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios