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

Haga lo que hicimos en el aula

HTML

<!DOCTYPE html>

<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portafolio de Juan camilo</title>
    <link rel="stylesheet" href="prueba.css">
</head>

<body>
    <header>
    </header>
    <main class="presentacion">
        <section class="presentacion__contenido">
            <h1 class="presentacion_contenido_titulo">Hola un gusto, soy Juan Camilo <strong class="texto-destacado">estudiante de Ingenierías De Sistemas.</strong> </h1>
                <p class="presentacion_contenido_texto">
                    Estoy enfocado en la parte <strong class="texto-destacado-parrafo">backend en el manejo de base de datos.</strong> Me gusta
                    la programación y seria un placer trabajar contigo.
                </p>
            <div class="presentacion__enlaces">
                <a class="presentacion__enlaces_link" href="https://github.com/Dark-ss">Github</a>
                <a class="presentacion__enlaces_link" href="https://instagram.com">Instagram</a>
            </div>
        </section>
        <div class="box">
            <img class="imagen" src="img/perfil.JPG" alt="Imagen perfil">
        </div>
    </main>
    <footer>
        <p>&copy; Todos los derechos reservados a Juan camilo Calderón</p>
    </footer>
</body>

</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap'); /*fuente letra*/

* {
    padding: 0;/*reset*/
    margin: 0;
}

img{
    width: 300px;
    height: 300px;
    overflow: hidden;
    border-radius: 20px;
}

body {
    background-color: rgb(16, 0, 46);
    box-sizing: border-box;
    height: 100vh;
    color: #F6F6F6;
}

.texto-destacado {
    color: rgb(255, 87, 34);/*destacar texto*/
}
.texto-destacado-parrafo{
    color: rgb(255,200,87);
}
.presentacion {
    display: flex;/*alinea los objetos*/
    align-items: center;/*los coloca en el centro*/
    margin: 12%;
    justify-content: space-between;/*espacio entre elementos*/
}

.presentacion__contenido {
    width: 615px;
}
.presentacion_contenido_titulo{
    font-size: 36;
    font-family: "Krona One", sans-serif;
}
.presentacion_contenido_texto{
    font-size: 24px;
    font-family: "Montserrat", sans-serif;
}

.presentacion__enlaces{
    display: flex;
    justify-content: space-between;
}

.presentacion__enlaces_link{
    width: 280px;/*ancho de la caja*/
    background-color: rgb(255, 87, 34);
    box-shadow: 5px 5px rgb(255, 200, 87);/*sombreado*/
    text-align: center;
    padding: 21.5px 0;/*Da un espaciado verticalmente*/
    font-size: 24px;
    font-weight: 600;/*establece la anchura del texto*/
    border-radius: 16px;
    font-family: "Montserrat", sans-serif;
    text-decoration: none;/*quitar la linea de abajo del link*/
    color: #000000;
}

footer{
    text-align: center;
    font-size: 22px;
    font-family: "Montserrat", sans-serif;
}

PAGINA pagina

1 respuesta

Hola, Juan ,

Gracias por compartir tu código con nosotros. Recuerda que estamos aquí para ayudarte. Si necesitas ayuda, no dudes en buscarnos en el foro.

¡Gracias nuevamente!

Saludos,

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