Entre Líneas<title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@400;600;700&family=Nunito:wght@400;600&display=swap" rel="stylesheet"> <style> :root { --beige: #E0E2CA; --palm-leaf: #A6A15E; --light-bronze: #C99F89; --burgundy: #93032E; --prussian-blue: #071628; --font-bubble: 'Fredoka', cursive, sans-serif; --font-body: 'Nunito', sans-serif; } * { box-sizing: border-box; margin: 0; padding: 0; } body { background-color: var(--prussian-blue); color: var(--prussian-blue); font-family: var(--font-body); min-height: 100vh; padding: 20px; display: flex; justify-content: center; } .container { width: 100%; max-width: 900px; display: flex; flex-direction: column; gap: 20px; } header { background-color: var(--burgundy); color: var(--beige); padding: 20px 30px; border-radius: 20px; text-align: center; } header h1 { font-family: var(--font-bubble); font-size: 2.5rem; } header p { color: var(--light-bronze); font-weight: 600; margin-top: 5px; } .layout { display: flex; gap: 20px; } aside { flex: 1; background-color: var(--palm-leaf); padding: 25px 20px; border-radius: 20px; display: flex; flex-direction: column; align-items: center; gap: 15px; text-align: center; } aside h2 { font-family: var(--font-bubble); color: var(--prussian-blue); font-size: 1.4rem; } aside p { font-size: 0.95rem; color: var(--prussian-blue); line-height: 1.4; } nav.sidebar-links { width: 100%; margin-top: 10px; } nav.sidebar-links ul { list-style: none; display: flex; flex-direction: column; gap: 8px; } nav.sidebar-links a { display: block; background-color: var(--beige); color: var(--burgundy); font-family: var(--font-bubble); text-decoration: none; padding: 10px; border-radius: 12px; font-weight: 600; } main { flex: 2.5; display: flex; flex-direction: column; gap: 20px; } article.post { background-color: var(--beige); padding: 25px; border-radius: 20px; } article.post h2 { font-family: var(--font-bubble); color: var(--burgundy); font-size: 1.8rem; margin-bottom: 5px; } .fecha { display: inline-block; font-family: var(--font-bubble); background-color: var(--light-bronze); color: var(--beige); font-size: 0.85rem; padding: 4px 12px; border-radius: 10px; margin-bottom: 15px; } .post-content { line-height: 1.6; font-size: 1rem; color: var(--prussian-blue); } footer { background-color: var(--burgundy); color: var(--beige); text-align: center; padding: 15px; border-radius: 20px; font-family: var(--font-bubble); font-size: 0.9rem; } </style> </head> <body> <div class="container"> <header> <h1>✦ MI BLOG ✦</h1> <p>Un espacio creativo y personal</p> </header> <div class="layout"> <aside> <h2>SOBRE MÍ</h2> <p>¡Hola! Bienvenido/a a mi bitácora. Acá comparto dibujos, ideas y avances de proyectos.</p> <nav class="sidebar-links"> <ul> <li><a href="#">INICIO</a></li> <li><a href="#">PROYECTOS</a></li> <li><a href="#">GALERÍA</a></li> <li><a href="#">CONTACTO</a></li> </ul> </nav> </aside> <main> <article class="post"> <h2>¡Bienvenidos a mi sitio!</h2> <span class="fecha">17 AGO 2026</span> <div class="post-content"> <p>Este es el primer post oficial de mi nuevo blog alojado en Neocities.</p> </div> </article> </main> </div> <footer> <p>© 2026 - Hecho con amor en Neocities</p> </footer> </div> </body> </html>