Visualización de la página Html
Código HTML "Presentación"
<!DOCTYPE html>
<html lang="en-es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mi presentación</title>
<link rel = "stylesheet" href="style.css">
</head>
<body>
<header></header>
<main>
<div id = "contenedor">
<div id = "encabezado">
<h1>Anthony Jiménez TI <img src = "assets/tecnologia-e-inovacao.jpg" alt = "Imagen referencia a la tecnologías TI"></h1>
</div>
<p>
Apasionado por adentrarme en el mundo del desarrollo de software, con un gran interés por aprender, experimentar y enfrentar nuevos retos.
Me motiva colaborar en nuevos proyectos, además estoy encantado de poder mezclar mis conocimientos en redes y telecomunicaciones, espero
poder conformar parte de una gran comunidad de desarrolladores, adquirir nuevos conocimientos y crecer profesionalmente.
</p>
<div id = "adicionales">
<a href = "https://github.com/anthonyjimenez17?tab=repositories"><img src ="assets/GitHub-logo.png" class = "enlace"></a>
<a href = "https://www.instagram.com/"><img src = "assets/Instagram_logo_2022.svg.png" class = "enlace"></a>
</div>
</div>
</main>
</body>
</html>
Código CSS ----> Práctica de las distintas aplicaciones de color en CSS
body {
height: 100vh;
margin: 0;
background-color: #10bDE8;
display: flex;
justify-content: center; /* centra en horizontal */
align-items: center; /* centra en vertical */
}
#contenedor{
display: flex;
flex-direction: column;
width: 50em;
height: 40em;
border: 3px solid #333;
border-radius: 20px;
box-shadow: 8px 8px 5px #444;
padding: 8px 12px;
background-color:#1079E8;
}
#encabezado {
display: flex;
justify-content: center; /* centra horizontalmente */
align-items: center; /* centra verticalmente */
width: 100%; /* ocupa todo el ancho disponible */
}
#encabezado h1 {
width: 20em;
height: 3em;
border: 3px solid #3f337e;
border-radius: 20px;
color: white;
background: radial-gradient(circle,
rgb(126, 126, 207),rgb(226, 148, 226), rgb(120, 202, 202) );
display: flex;
font-family:cursive;
justify-content: center; /* centra texto horizontalmente */
align-items: center; /* centra texto verticalmente */
margin: 0; /* elimina márgenes por defecto */
}
#contenedor p {
color: white;
font-size: 1.75em;
font-family:fantasy;
margin-top: 1em; /* espacio respecto al h1 o al div superior */
text-align: justify;
}
#encabezado img {
width: 90px;
height: 90px;
border-radius: 12px;
border: 2px solid white;
object-fit: cover;
flex-shrink: 0; /* Evita que la imagen se reduzca */
margin-left: 20px;
}
#adicionales{
display: flex;
justify-content: center;
}
.enlace{
width: 90px;
height: 90px;
border-radius: 12px;
border: 2px solid transparent;
object-fit: cover;
flex-shrink: 0; /* Evita que la imagen se reduzca */
margin-left: 20px;
}
