EXAMEN PROYECTO 1 –
MODIFICACION 2
ATENTO A LAS EXPLICACIONES, SIGA LAS SIGUIENTES INSTRUCCIONES Y ATENTOS A LAS PREGUNTAS ACERCA DEL PROYECTO:
1. Copie y pegue el codigo de a continucacion en el bloc de notas, guardelo bajo el nombre de: mipresentacion.html recuerde que debe tener la imagen acorde a su sexo, debe cambiar el color del fondo de la pagina, asi como el color del fondo del encabezado sobre el que está el nombre suyo, obviamente debe colocar su nombre en el encabezado.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mi Página de Presentación</title>
<style>
/* Estilos CSS internos para la página */
body {
/* Estilos para el elemento body (todo el contenido visible) */
font-family: 'Open Sans', sans-serif;
/* Fuente: Arial, o una fuente sans-serif genérica si Arial no está disponible */
margin: 0;
/* Sin márgenes exteriores */
padding: 0;
/* Sin rellenos interiores */
background-color: #a7a7e6;
/* Color de fondo: gris claro */
color: #333;
/* Color del texto: gris oscuro */
text-align: center;
/* Alineación del texto: centrado */
}
.profile-picture {
/* Estilos para el contenedor de la imagen de perfil */
margin-top: 20px;
/* Margen superior de 20px */
}
.profile-picture img {
/* Estilos para la imagen de perfil */
width: 150px;
/* Ancho: 150 píxeles */
height: 150px;
/* Alto: 150 píxeles */
border-radius: 50%;
/* Borde redondeado para hacer la imagen circular */
border: 3px solid #4CAF50;
/* Borde sólido de 3px de ancho y color verde */
}
header {
/* Estilos para el encabezado */
background-color: #4CAF50;
/* Color de fondo: verde */
color: white;
/* Color del texto: blanco */
padding: 20px 0;
/* Relleno superior e inferior de 20px, relleno izquierdo y derecho de 0 */
}
header h1 {
/* Estilos para el título h1 dentro del encabezado */
margin: 0;
/* Sin márgenes */
font-size: 2.5em;
/* Tamaño de fuente: 2.5 veces el tamaño de fuente predeterminado del elemento padre */
}
header h1 {
margin: 0;
font-size: 2.5em;
font-family: 'Poppins', sans-serif; /* Aplica Poppins. Si no carga, usa una sans-serif genérica. */
}
.description {
/* Estilos para el contenedor de la descripción */
margin: 20px auto;
/* Margen superior e inferior de 20px, margen izquierdo y derecho automático (centra el elemento) */
max-width: 600px;
/* Ancho máximo: 600 píxeles */
font-size: 1.2em;
/* Tamaño de fuente: 1.2 veces el tamaño de fuente predeterminado */
}
.social-links {
/* Estilos para el contenedor de los enlaces sociales */
margin-top: 20px;
/* Margen superior de 20px */
}
.social-links a {
/* Estilos para los enlaces dentro del contenedor de enlaces sociales */
display: inline-block;
/* Mostrar como bloque en línea (permite establecer ancho, alto, márgenes, etc.) */
margin: 0 10px;
/* Margen izquierdo y derecho de 10px, margen superior e inferior de 0 */
text-decoration: none;
/* Quitar subrayado */
color: white;
/* Color del texto: blanco */
background-color: #4c77af;
/* Color de fondo: verde */
padding: 10px 15px;
/* Relleno superior e inferior de 10px, relleno izquierdo y derecho de 15px */
border-radius: 5px;
/* Bordes redondeados */
font-size: 1em;
/*Tamaño de fuente: igual al predeterminado*/
}
.social-links a:hover {
/* Estilos para los enlaces sociales cuando el cursor está sobre ellos */
background-color: #45a049;
/* Color de fondo: verde más oscuro */
}
</style>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&family=Poppins:wght@400;700&display=swap" rel="stylesheet">
</head>
<body>
<header>
<h1>¡Hola, soy Javier!</h1>
</header>
<div class="profile-picture">
<img src="https://edutechsiglo21.com/2025/imgs/jovencito.jpg" alt="Foto de perfil">
</div>
<div class="description">
<p>
Soy un apasionado de la tecnología y la informatica. Me encanta aprender, crear y compartir mis conocimientos con los demás.
Si deseas saber más sobre mí o trabajar juntos, no dudes en contactarme.
</p>
</div>
<div class="social-links">
<a href="https://facebook.com/" target="_blank">Facebook</a>
<a href="https://twitter.com/" target="_blank">Twitter</a>
<a href="https://linkedin.com/" target="_blank">LinkedIn</a>
</div>
</body>
</html>
2.
Vaya a: https://fonts.google.com/
3.
En
la parte superior en el cuadro de busqueda escriba: Poppins y dele ENTER
4.
En
la parte superior derecha haga clic en Get font
5.
Haga
clic en Get embeb font
6. Luego en en el link "Copy code" haga clic para copiar fuente
7.
Regrese
al codigo html y justo antes de cerrar head (</Head>), peque el texto que
habia seleccionado en google font
8.
Busque
de nuevo en google font la fuente: Open
Sans y repita el paso anterior para la fuente del parrafo de la descripcion.
9.
Oberve
que ahora tiene dos lineas duplicadas eliminelas, a saber:
·
<link
rel="preconnect" href="https://fonts.googleapis.com">
·
<link
rel="preconnect" href="https://fonts.gstatic.com"
crossorigin>
10. GUARDE EN SU USB EL ARCHIVO ENVUELVALA EN UNA HOJA DE PAPEL MARCADA CON SU NOMBRE Y CURSO, RECUERDE QUE ES INDIVIDUAL.
11. EJECUTE EL CODIGO EN EL NAVEGADOR PARA CALIFICAR
No hay comentarios:
Publicar un comentario