Spaces:

Lxzzvip34
/

deepsite-project

Running

App Files Files Community

Lxzzvip34 commited on Sep 28, 2025

Commit

5a8b307

verified ·

1 Parent(s): 16a4ce5

Quiero una página un blog en la nube con esta base mejoralo: <!DOCTYPE html>

Browse files

<html lang="es">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>RETRO BLOG · Fotoblog Nostálgico</title>
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
<style>
:root {
--bg: #0f0c29;
--bg2: #24243e;
--neon-pink: #ff00ff;
--neon-green: #39ff14;
--neon-blue: #00ffff;
--text: #e0e0e0;
}

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
background: linear-gradient(135deg, var(--bg), var(--bg2));
color: var(--text);
font-family: 'Press Start 2P', monospace;
font-size: 12px;
line-height: 1.6;
padding: 20px;
position: relative;
overflow-x: hidden;
}

/* Efecto CRT */
body::before {
content: "";
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: repeating-linear-gradient(
0deg,
rgba(0, 0, 0, 0.15),
rgba(0, 0, 0, 0.15) 1px,
transparent 1px,
transparent 2px
);
pointer-events: none;
z-index: 999;
animation: flicker 0.15s infinite;
}

@keyframes flicker {
0%, 100% { opacity: 0.95; }
50% { opacity: 0.98; }
}

header {
text-align: center;
margin-bottom: 30px;
padding: 20px;
border: 2px solid var(--neon-pink);
border-radius: 12px;
box-shadow: 0 0 15px var(--neon-pink);
background: rgba(15, 12, 41, 0.7);
}

h1 {
font-size: 24px;
color: var(--neon-green);
text-shadow: 0 0 10px var(--neon-green);
letter-spacing: 2px;
}

.container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 25px;
max-width: 1200px;
margin: 0 auto;
}

.post {
background: rgba(36, 36, 62, 0.8);
border: 2px solid var(--neon-blue);
border-radius: 10px;
padding: 15px;
transition: transform 0.3s, box-shadow 0.3s;
}

.post:hover {
transform: translateY(-5px);
box-shadow: 0 0 20px var(--neon-blue);
}

.post img {
width: 100%;
height: auto;
border-radius: 8px;
margin-bottom: 12px;
border: 1px solid var(--neon-green);
}

.post h2 {
font-size: 14px;
color: var(--neon-pink);
margin-bottom: 8px;
}

.post p {
font-size: 10px;
color: #ccc;
}

.date {
font-size: 8px;
color: var(--neon-green);
margin-top: 8px;
display: block;
}

footer {
text-align: center;
margin-top: 40px;
padding: 15px;
font-size: 10px;
color: var(--neon-blue);
}

/* Scroll suave */
html {
scroll-behavior: smooth;
}

/* Responsive */
@media (max-width: 600px) {
.container {
grid-template-columns: 1fr;
}
body {
font-size: 10px;
}
}
</style>
</head>
<body>

<header>
<h1>RETRO BLOG · 1987</h1>
<p>MEMORIAS EN PIXEL Y NEÓN</p>
</header>

<div class="container" id="blog-container">

</div>

<footer>
© 1987 · TODOS LOS DERECHOS RESERVADOS · NOSTALGIA.EXE
</footer>

<script>
// Datos simulados de blog + fotoblog
const posts = [
{
title: "PRIMER VIAJE A LA LUNA",
date: "12/07/1987",
image: "https://placehold.co/300x200/0f0c29/39ff14?text=LUNA+1987",
content: "Con mi cámara analógica capturé el reflejo lunar en el charco del patio trasero. Mi abuelo dijo que era basura. Yo sé que es arte."
},
{
title: "VIDEOJUEGOS EN LA COCINA",
date: "03/03/1987",
image: "https://placehold.co/300x200/24243e/ff00ff?text=GAME+TIME",
content: "Mi NES se sobrecalentaba cada vez que jugaba Metroid. La cocina era el único lugar con enchufe cerca del televisor."
},
{
title: "CINTA DE CASSETTE PERDIDA",
date: "29/11/1987",
image: "https://placehold.co/300x200/0f0c29/00ffff?text=MIXTAPE",
content: "Grabé 45 minutos de éxitos de radio. La cinta se atascó en el walkman. Nunca volví a escuchar 'Take On Me' igual."
},
{
title: "FOTOGRAFÍA EN LA PLAYA",
date: "15/08/1987",
image: "https://placehold.co/300x200/24243e/39ff14?text=SUMMER+87",
content: "El sol quemaba la película. Las fotos salieron sobreexpuestas... como mis recuerdos."
}
];

const container = document.getElementById('blog-container');

posts.forEach(post => {
const postEl = document.createElement('div');
postEl.className = 'post';
postEl.innerHTML = `
<img src="${post.image}" alt="${post.title}">
<h2>${post.title}</h2>
<p>${post.content}</p>
<span class="date">${post.date}</span>
`;
container.appendChild(postEl);
});
</script>

</body>
</html>

Files changed (1) hide show

README.md +8 -5

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Deepsite Project
-emoji: 🏃
-colorFrom: indigo
-colorTo: indigo
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: DeepSite Project
+colorFrom: blue
+colorTo: yellow
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://deepsite.hf.co).