<!
DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Perfil Personal</title>
<style>
/* Agregar estilo al cuerpo de la página */
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
/* Contenedor principal */
.container {
width: 80%;
margin: auto;
background-color: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
/* Estilo para el encabezado */
h1 {
color: #333;
text-align: center;
}
/* Estilo para el párrafo de descripción */
p{
font-size: 1.2em;
line-height: 1.5;
color: #555;
text-align: center;
/* Estilo para la imagen de perfil */
img {
display: block;
margin: 20px auto;
border-radius: 50%;
width: 150px;
height: 150px;
object-fit: cover;
/* Estilo para la lista de hobbies */
ul {
list-style-type: none;
padding: 0;
margin: 0;
text-align: center;
ul li {
font-size: 1.1em;
margin: 10px 0;
color: #444;
/* Estilo para el formulario de contacto */
form {
margin-top: 20px;
text-align: center;
label {
font-size: 1.1em;
color: #333;
input, textarea {
padding: 10px;
margin: 10px;
width: 80%;
max-width: 400px;
border: 1px solid #ccc;
border-radius: 4px;
button {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
button:hover {
background-color: #45a049;
</style>
</head>
<body>
<div class="container">
<h1>Santiago Lizarazo</h1>
<p>¡Hola! Soy Santiago, un apasionado del desarrollo web y la tecnología. Me encanta
aprender nuevos lenguajes de programación y explorar nuevas tendencias en el mundo
digital.</p>
<img src="[Link]" alt="Imagen de perfil">
<h2>Hobbies e Intereses</h2>
<ul>
<li>Programación</li>
<li>Videojuegos</li>
<li>Deportes</li>
</ul>
<h2>Contacto</h2>
<form action="/submit_form" method="post">
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre" required><br><br>
<label for="correo">Correo Electrónico:</label>
<input type="email" id="correo" name="correo" required><br><br>
<label for="mensaje">Mensaje:</label><br>
<textarea id="mensaje" name="mensaje" rows="4" cols="50"
required></textarea><br><br>
<button type="submit">Enviar</button>
</form>
</div>
</body>
</html>
2.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tienda en Línea</title>
<style>
/* Estilos generales para el cuerpo de la página */
body {
font-family: 'Arial', sans-serif;
background-color: #f7f7f7;
margin: 0;
padding: 0;
color: #333;
/* Contenedor principal de la página */
.container {
width: 80%;
margin: auto;
padding: 20px;
background-color: #fff;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
border-radius: 8px;
margin-top: 20px;
/* Estilo para el encabezado */
h1 {
text-align: center;
color: #4CAF50;
font-size: 2.5em;
/* Estilo para el párrafo introductorio */
p{
text-align: center;
font-size: 1.2em;
color: #555;
line-height: 1.6;
}
/* Estilo de la tabla */
table {
width: 100%;
margin-top: 20px;
border-collapse: collapse;
table th, table td {
padding: 12px;
text-align: left;
border-bottom: 2px solid #ddd;
/* Estilo de los encabezados de la tabla */
table th {
background-color: #4CAF50;
color: white;
/* Estilo de las filas de la tabla */
table tr:nth-child(even) {
background-color: #f2f2f2;
table tr:hover {
background-color: #ddd;
/* Estilo para el enlace */
a{
color: #4CAF50;
text-decoration: none;
font-weight: bold;
a:hover {
text-decoration: underline;
</style>
</head>
<body>
<div class="container">
<h1>Tienda de Electrónica</h1>
<p>Bienvenidos a nuestra tienda en línea. Aquí encontrarás los mejores productos de
tecnología, desde teléfonos móviles hasta accesorios para computadoras. A continuación,
presentamos una lista de nuestros productos más populares.</p>
<!-- Tabla de productos -->
<table>
<tr>
<th>Nombre del Producto</th>
<th>Precio</th>
<th>Descripción</th>
</tr>
<tr>
<td>Smartphone Galaxy X</td>
<td>$599</td>
<td>Un teléfono inteligente con una cámara de alta resolución y gran rendimiento.</td>
</tr>
<tr>
<td>Smartwatch Z</td>
<td>$199</td>
<td>Reloj inteligente con monitor de actividad y notificaciones en tiempo real.</td>
</tr>
<tr>
<td>Auriculares Bluetooth</td>
<td>$79</td>
<td>Dispositivos inalámbricos para escuchar música de alta calidad.</td>
</tr>
</table>
<!-- Enlace para más información -->
<p><a href="[Link] target="_blank">Más
información sobre nuestra tienda</a></p>
</div>
</body>
</html>
