Skip to content

Instantly share code, notes, and snippets.

@Jossdel
Created April 10, 2026 02:31
Show Gist options
  • Select an option

  • Save Jossdel/96faf2d526a2808e4b5a9cd84a4972f9 to your computer and use it in GitHub Desktop.

Select an option

Save Jossdel/96faf2d526a2808e4b5a9cd84a4972f9 to your computer and use it in GitHub Desktop.
<!doctype html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>Mi Página Personal</title>
<style>
body {
font-family: Arial, sans-serif;
background: linear-gradient(to right, #74ebd5, #acb6e5);
margin: 0;
padding: 0;
}
header {
background: linear-gradient(to right, #ff512f, #dd2476);
color: white;
text-align: center;
padding: 25px;
box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}
section {
background: white;
margin: 20px;
padding: 20px;
border-radius: 15px;
box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}
h2 {
color: #dd2476;
}
img {
width: 200px;
border-radius: 15px;
border: 3px solid #ff512f;
}
a {
color: white;
background-color: #007BFF;
padding: 8px 15px;
border-radius: 8px;
text-decoration: none;
transition: 0.3s;
}
a:hover {
background-color: #0056b3;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
overflow: hidden;
border-radius: 10px;
}
th {
background: #ff512f;
color: white;
}
td {
background-color: #f9f9f9;
}
tr:nth-child(even) td {
background-color: #e0e0e0;
}
th, td {
padding: 12px;
text-align: center;
}
</style>
</head>
<body>
<!-- Encabezado -->
<header>
<h1>Mi Página Personal</h1>
</header>
<!-- Contenido -->
<section>
<h2>Sobre mí</h2>
<p>
Hola, soy Josué. Soy estudiante de ingeniería de software y me gusta el
desarrollo web.
</p>
<!-- Imagen -->
<h2>Mi foto</h2>
<img src="https://via.placeholder.com/200" alt="Mi foto">
<!-- Enlace -->
<h2>Mi red favorita</h2>
<p>
Visita mi página favorita:
<a href="https://www.google.com" target="_blank">Ir a Google</a>
</p>
<!-- Tabla -->
<h2>Mis habilidades</h2>
<table>
<tr>
<th>Lenguaje</th>
<th>Nivel</th>
</tr>
<tr>
<td>JavaScript</td>
<td>Intermedio</td>
</tr>
<tr>
<td>React</td>
<td>Básico</td>
</tr>
<tr>
<td>HTML/CSS</td>
<td>Intermedio</td>
</tr>
</table>
</section>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment