ajustando pantallas para que cuadre

This commit is contained in:
Tatiana Villa Ema 2026-02-03 18:41:02 +01:00
parent 81ecbca072
commit d100fbd16c
6 changed files with 36 additions and 9 deletions

View File

@ -7,6 +7,7 @@
--accent-orange: #ff9900;
--light-gold: #ffc24a;
--bg-dark: #0f172a; /* Fondo muy oscuro para contraste */
--gray: #acb3bf;
}
body {
@ -107,6 +108,13 @@ body {
.card-text {
color: white !important;
}
.card-tecnologia {
font-size: 0.75rem;
font-style: italic;
color: var(--gray) !important;
}
.btn-link {
color: var(--light-blue);
text-decoration: none;

Binary file not shown.

After

Width:  |  Height:  |  Size: 301 KiB

View File

@ -4,6 +4,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>El Tiempo</title>
<link rel="icon" href="img/eltiempo-logo.png" type="image/x-icon">
<link rel="stylesheet" href="css/estilos.css">
</head>

View File

@ -28,6 +28,8 @@ async function santoDelDia() {
const hoy = new Date();
const offset = hoy.getTimezoneOffset() * 60000;
const fechaISO = new Date(hoy - offset).toISOString().split('T')[0];
const santoDelDiaElem = document.getElementById("santo-del-dia");
try {
const res = await fetch('data/santos.json');
@ -38,7 +40,6 @@ async function santoDelDia() {
if (elSanto) {
document.getElementById("santo-del-dia").textContent = elSanto.santo;
santoDelDiaElem.textContent = elSanto.santo;
descripcionSantoDelDiaElem.textContent = elSanto.descripcion || "";
}
} catch (e) {
console.error("Error en la carga de santos:", e);
@ -68,7 +69,7 @@ async function getLocationName(lat, lon) {
if (data.address.city) return data.address.city + ", " + data.address.country;
if (data.address.town) return data.address.town + ", " + data.address.country;
if (data.address.village) return data.address.village + ", " + data.address.country;
if (data.address.hamlet) return data.address.hamlet + ", " + data.address.country;
// if (data.address.hamlet) return data.address.hamlet + ", " + data.address.country;
}
return "Ubicación desconocida";
@ -241,7 +242,7 @@ function generateMiniMoonCalendar() {
const daysInMonth = new Date(year, month + 1, 0).getDate();
const container = document.getElementById("moon-mini-calendar");
container.innerHTML = "";
//container.innerHTML = ".";
let firstDay = new Date(year, month, 1).getDay();
firstDay = (firstDay === 0) ? 6 : firstDay - 1;
@ -250,7 +251,7 @@ function generateMiniMoonCalendar() {
const empty = document.createElement("div");
empty.classList.add("moon-day");
empty.style.visibility = "hidden";
container.appendChild(empty);
// container.appendChild(empty);
}
for (let day = 1; day <= daysInMonth; day++) {
@ -260,7 +261,7 @@ function generateMiniMoonCalendar() {
if (day === today) div.classList.add("moon-today");
div.innerHTML = `<span>${day}</span><span class="moon-icon">${icon}</span>`;
container.appendChild(div);
// container.appendChild(div);
}
}

BIN
img/eltiempo.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 63 KiB

View File

@ -32,7 +32,8 @@
</div>
<div class="card-body">
<h5 class="card-title fw-bold">Recursos Católicos</h5>
<p class="card-text text-muted">Tecnologia (HTML, CSS, Bootstrap, JavaScript, PHP, SQL, XML, JSON).</p>
<p class="card-text text-muted">Web de recursos católicos gratuitos (Rosario, oraciones, etc.).</p>
<p class="card-text text-muted card-tecnologia">HTML, CSS, Bootstrap, JavaScript, PHP, SQL, XML, JSON.</p>
<a href="https://recursos-catolicos.es" class="btn-link">Saber más →</a>
</div>
</div>
@ -45,7 +46,8 @@
</div>
<div class="card-body">
<h5 class="card-title fw-bold">Piedra, Papel o Tijera</h5>
<p class="card-text text-muted">El famoso juego Piedra, Papel o Tijera realizado en HTML, CSS, JavaScript y optimizado para dispositivos móviles.</p>
<p class="card-text text-muted">El famoso juego Piedra, Papel o Tijera.</p>
<p class="card-text text-muted card-tecnologia">HTML, CSS, JavaScript y optimizado para dispositivos móviles.</p>
<a href="piedra-papel-tijera.html" class="btn-link">Saber más →</a>
</div>
</div>
@ -58,18 +60,33 @@
</div>
<div class="card-body">
<h5 class="card-title fw-bold">Portfolio</h5>
<p class="card-text text-muted">Tecnologia (.NET, C#, HTML, CSS, Bootstrap, JavaScript).</p>
<p class="card-text text-muted">Mi portfolio personal donde muestro mis proyectos y habilidades.</p>
<p class="card-text text-muted card-tecnologia">.NET, C#, HTML, CSS, Bootstrap, JavaScript.</p>
<a href="/portfolio/" class="btn-link">Saber más →</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="card project-card h-100">
<div class="card-img-placeholder d-flex align-items-center justify-center">
<img src="img/eltiempo.jpg" alt="El Tiempo" class="img-fluid">
</div>
<div class="card-body">
<h5 class="card-title fw-bold">El Tiempo</h5>
<p class="card-text text-muted">Guardo los datos del tiempo de 3 ciudades españolas que me interesan (Madrid, L'Ampolla (Tarragona), L'Alfas del Pi (Alicante)) con fines estadísticos. </p>
<p class="card-text text-muted card-tecnologia">PHP, MySQL, HTML, CSS, JavaScript.</p>
<a href="eltiempo/index.html" class="btn-link">Saber más →</a>
</div>
</div>
</div>
</div>
</div>
</section>
<footer class="py-5 text-center">
<div class="container">
<p class="mb-0">&copy; 2026 - Creado con fe en el proceso y pasión por la tecnología.</p>
<p class="mb-0">&copy; 2026 - Tatiana Villa</p>
</div>
</footer>