index.html
<!DOCTYPE html>
<html lang="es-mx">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portafolio</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<nav>
<a href="#inicio">Inicio</a>
<a href="#sobre-mi">Sobre mí</a>
<a href="#proyectos">Proyectos</a>
<a href="#contacto">Contacto</a>
</nav>
</header>
<main>
<h1 class="titulo-blog">
Eleve su negocio digital a otro nivel
<strong class="titulo-destaque">con un Front-end de calidad!</strong>
</h1>
<p class="texto-destaque">
¡Hola! Soy Ana García, desarrolladora Front-end con especialización en React, HTML y CSS.
Ayudo a pequeños negocios y diseñadores a llevar a cabo buenas ideas. ¿Hablamos?
</p>
<p class="urgente">
¡Noticia urgente! Oferta especial por tiempo limitado.
</p>
<a href="https://instagram.com/">Instagram</a>
<a href="https://github.com/">GitHub</a>
<img src="Imagem.png" alt="Foto de Ana García desarrollando un proyecto en su computadora">
</main>
<footer>
<p>Contacto: ana.garcia@example.com | Teléfono: +52 55 1234 5678</p>
</footer>
</body>
</html>
style.css
* {
margin: 0;
padding: 0;
}
body {
background-color: #000000;
color: #F6F6F6;
}
.titulo-destaque {
color: #22D4FD;
}
.texto-destaque {
color: #FF5733; /* Color vibrante */
}
.titulo-blog {
color: #007BFF; /* Color llamativo */
}
.urgente {
color: red; /* Color rojo para urgencia */
}
p {
margin: 10px;
border: 2px solid black;
padding: 5px;
}
