¡Vamos a darle vida a tu sitio web personal! 🌟 Aquí tienes un tema web completo en HTML y PHP con:
- 📸 Galería de fotos
- 🧑 Foto de perfil
- 🌌 Fondo animado
- 🎥 Sección de videos
- 📬 Formulario de contacto funcional
Todo integrado en un solo archivo index.php para facilitar su implementación.
Sitio web llamativo y funcional
Este es el código que tienes que introducir en un archivo llamado index.php. Puedes crear el archivo en tu ordenador e introducir el código completo ha continuación. No es necesaria ninguna otra acción.
<?php
$mensaje_enviado = false;
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$nombre = htmlspecialchars($_POST["nombre"]);
$email = filter_var($_POST["email"], FILTER_SANITIZE_EMAIL);
$mensaje = htmlspecialchars($_POST["mensaje"]);
$destinatario = "tu-correo@ejemplo.com";
$asunto = "Nuevo mensaje de contacto de $nombre";
$contenido = "Nombre: $nombre\nEmail: $email\nMensaje:\n$mensaje";
$cabeceras = "From: $email";
$mensaje_enviado = mail($destinatario, $asunto, $contenido, $cabeceras);
}
$seccion = $_GET['seccion'] ?? 'inicio';
?>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Mi Sitio Creativo</title>
<style>
body {
margin: 0;
font-family: 'Segoe UI', sans-serif;
background: linear-gradient(-45deg, #1e3c72, #2a5298, #1e3c72, #2a5298);
background-size: 400% 400%;
animation: fondo 15s ease infinite;
color: white;
}
@keyframes fondo {
0% {background-position: 0% 50%;}
50% {background-position: 100% 50%;}
100% {background-position: 0% 50%;}
}
header {
background-color: rgba(0,0,0,0.6);
padding: 20px;
text-align: center;
}
nav a {
color: #fff;
margin: 0 15px;
text-decoration: none;
font-weight: bold;
}
nav a:hover {
text-decoration: underline;
}
main {
padding: 30px;
max-width: 900px;
margin: auto;
background-color: rgba(0,0,0,0.5);
border-radius: 10px;
}
.perfil {
text-align: center;
}
.perfil img {
border-radius: 50%;
width: 150px;
border: 4px solid #fff;
}
.galeria img {
width: 30%;
margin: 10px;
border-radius: 8px;
transition: transform 0.3s;
}
.galeria img:hover {
transform: scale(1.05);
}
iframe {
width: 100%;
height: 400px;
border: none;
margin-top: 20px;
border-radius: 8px;
}
form input, form textarea {
width: 100%;
padding: 10px;
margin: 10px 0;
border-radius: 4px;
border: none;
}
form button {
background-color: #00bfff;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
.mensaje {
background-color: #28a745;
padding: 10px;
border-radius: 5px;
margin-bottom: 20px;
color: white;
}
</style>
</head>
<body>
<header>
<h1>Mi Sitio Creativo</h1>
<nav>
<a href="?seccion=inicio">Inicio</a>
<a href="?seccion=galeria">Galería</a>
<a href="?seccion=videos">Videos</a>
<a href="?seccion=contacto">Contacto</a>
</nav>
</header>
<main>
<?php if ($seccion == 'inicio'): ?>
<div class="perfil">
<img src="https://via.placeholder.com/150" alt="Foto de perfil">
<h2>¡Hola! Soy [Tu Nombre]</h2>
<p>Bienvenido a mi espacio personal. Aquí comparto mis pasiones, proyectos y creatividad.</p>
</div>
<?php elseif ($seccion == 'galeria'): ?>
<h2>Galería de Fotos</h2>
<div class="galeria">
<img src="https://picsum.photos/seed/1/300/200" alt="Foto 1">
<img src="https://picsum.photos/seed/2/300/200" alt="Foto 2">
<img src="https://picsum.photos/seed/3/300/200" alt="Foto 3">
</div>
<?php elseif ($seccion == 'videos'): ?>
<h2>Mis Videos</h2>
<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" allowfullscreen></iframe>
<iframe src="https://www.youtube.com/embed/3JZ_D3ELwOQ" allowfullscreen></iframe>
<?php elseif ($seccion == 'contacto'): ?>
<h2>Contacto</h2>
<?php if ($mensaje_enviado): ?>
<div class="mensaje">Gracias por tu mensaje. ¡Te responderé pronto!</div>
<?php endif; ?>
<form method="POST" action="?seccion=contacto">
<input type="text" name="nombre" placeholder="Tu nombre" required>
<input type="email" name="email" placeholder="Tu correo" required>
<textarea name="mensaje" rows="5" placeholder="Tu mensaje..." required></textarea>
<button type="submit">Enviar</button>
</form>
<?php endif; ?>
</main>
</body>
</html>
¿Qué puedes personalizar?
- 📷 Cambia la foto de perfil por una imagen tuya.
- 🖼️ Reemplaza las fotos de la galería con tus propias imágenes.
- 🎬 Sustituye los videos de YouTube por los tuyos.
- ✉️ Cambia el correo de destino en la sección PHP.
Además puedes añadir más filas a tu galería para eso solo tiene que abrir el código HTML, copiar y agregar este bloque, justo debajo:
Bloque Galería de Fotos
<img src="https://picsum.photos/seed/1/300/200" alt="Foto 1">
<img src="https://picsum.photos/seed/2/300/200" alt="Foto 2">
<img src="https://picsum.photos/seed/3/300/200" alt="Foto 3">También puedes agregar más vídeos a la página de Mis Videos. El proceso es el mismo copia el siguiente código, y agrégalo justo debajo:
Bloque Mis Videos
<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" allowfullscreen></iframe>
<iframe src="https://www.youtube.com/embed/3JZ_D3ELwOQ" allowfullscreen></iframe>Para que puedas recibir mensajes deberás sustituir el código PHP del correo electrónico, por tu propio correo. Busca la siguiente línea en el código PHP, y modifica solo lo siguiente: tu-correo@ejemplo.com, por tu dirección de correo electrónico. Por ejemplo: javier2030@gmail.com
$destinatario = "tu-correo@ejemplo.com";Sube el código a un alojamiento web con PHP, y tendrás una página personal que podrás ir modificando a tu gusto.
TU SITIO