Proyecto Web: Colores por Sección (HTML + CSS +
JavaScript)
1■■ Archivo: [Link]
Este archivo define la estructura principal del sitio web, con secciones para header, nav, main,
aside y footer.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>Proyecto Colores: HTML + CSS + JS</title>
<link rel="stylesheet" href="[Link]" />
</head>
<body>
<header>
<h1>Proyecto: Colores por Sección</h1>
<p>HTML + CSS + JavaScript</p>
</header>
<nav>
<a href="#main">Contenido</a>
<a href="#aside">Lateral</a>
<a href="#footer">Pie</a>
</nav>
<main id="main">
<section>
<h2>Controles de color</h2>
<div class="panel">
<div class="control">
<label for="colorHeader">Header</label>
<input type="color" id="colorHeader" value="#0a3d62" />
</div>
<div class="control">
<label for="colorNav">Nav</label>
<input type="color" id="colorNav" value="#1e6091" />
</div>
<div class="control">
<label for="colorMain">Main</label>
<input type="color" id="colorMain" value="#e9ecef" />
</div>
<div class="control">
<label for="colorAside">Aside</label>
<input type="color" id="colorAside" value="#f8f9fa" />
</div>
<div class="control">
<label for="colorFooter">Footer</label>
<input type="color" id="colorFooter" value="#0a3d62" />
</div>
</div>
<div class="acciones">
<button id="btnAplicar">Aplicar colores</button>
<button id="btnReset">Restablecer</button>
</div>
</section>
</main>
<aside id="aside">
<h3>Barra lateral</h3>
<p>Información complementaria o enlaces.</p>
</aside>
<footer id="footer">
<p>© 2025 Proyecto educativo</p>
</footer>
<script src="[Link]"></script>
</body>
</html>
2■■ Archivo: [Link]
Este archivo define los colores, fuentes y diseño general de cada parte del sitio.
:root {
--color-header: #0a3d62;
--color-nav: #1e6091;
--color-main: #e9ecef;
--color-aside: #f8f9fa;
--color-footer: #0a3d62;
}
body {
margin: 0;
font-family: Arial, sans-serif;
background: #ffffff;
}
header {
background: var(--color-header);
color: white;
text-align: center;
padding: 24px;
}
nav {
background: var(--color-nav);
padding: 10px;
text-align: center;
}
nav a {
color: white;
text-decoration: none;
margin: 0 10px;
}
main {
background: var(--color-main);
padding: 24px;
margin: 20px;
border-radius: 8px;
}
aside {
background: var(--color-aside);
padding: 20px;
margin: 20px;
border-radius: 8px;
}
footer {
background: var(--color-footer);
color: white;
text-align: center;
padding: 16px;
}
3■■ Archivo: [Link]
Este archivo controla la lógica de los botones y guarda los colores seleccionados utilizando
localStorage.
const defaults = {
header: "#0a3d62",
nav: "#1e6091",
main: "#e9ecef",
aside: "#f8f9fa",
footer: "#0a3d62",
};
const pickers = {
header: [Link]("colorHeader"),
nav: [Link]("colorNav"),
main: [Link]("colorMain"),
aside: [Link]("colorAside"),
footer: [Link]("colorFooter"),
};
const btnAplicar = [Link]("btnAplicar");
const btnReset = [Link]("btnReset");
function applyColors({ header, nav, main, aside, footer }) {
const root = [Link];
if (header) [Link]("--color-header", header);
if (nav) [Link]("--color-nav", nav);
if (main) [Link]("--color-main", main);
if (aside) [Link]("--color-aside", aside);
if (footer) [Link]("--color-footer", footer);
}
function loadFromStorage() {
const saved = [Link]([Link]("colores-secciones") || "null");
if (!saved) return;
[Link](saved).forEach(([k, v]) => {
if (pickers[k]) pickers[k].value = v;
});
applyColors(saved);
}
function saveToStorage(values) {
[Link]("colores-secciones", [Link](values));
}
[Link]("click", () => {
const values = {
header: [Link],
nav: [Link],
main: [Link],
aside: [Link],
footer: [Link],
};
applyColors(values);
saveToStorage(values);
});
[Link]("click", () => {
[Link](pickers).forEach(k => pickers[k].value = defaults[k]);
applyColors(defaults);
[Link]("colores-secciones");
});
loadFromStorage();