tatiana
/
tatvilweb
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: add autocompra project card

This commit is contained in:
Tatiana Villa Ema 2026-04-27 02:00:56 +02:00
parent 5a6f23d152
commit 1d1d021692
2 changed files with 65 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
css/style.css
View File

@ -148,6 +148,31 @@ body {
font-weight: 600;
}
/* Card color variants */
.card-green { border-top: 3px solid #4ade80 !important; }
.card-green .card-title { color: #4ade80; }
.card-green .btn-link { color: #4ade80; }
.card-amber { border-top: 3px solid #fbbf24 !important; }
.card-amber .card-title { color: #fbbf24; }
.card-amber .btn-link { color: #fbbf24; }
.card-sky { border-top: 3px solid #38bdf8 !important; }
.card-sky .card-title { color: #38bdf8; }
.card-sky .btn-link { color: #38bdf8; }
.card-red { border-top: 3px solid #f87171 !important; }
.card-red .card-title { color: #f87171; }
.card-red .btn-link { color: #f87171; }
.card-violet { border-top: 3px solid #c084fc !important; }
.card-violet .card-title { color: #c084fc; }
.card-violet .btn-link { color: #c084fc; }
.card-orange { border-top: 3px solid #fb923c !important; }
.card-orange .card-title { color: #fb923c; }
.card-orange .btn-link { color: #fb923c; }
.btn-link:hover {
color: var(--color-texto);
}

69
proyectos.html
View File

@ -37,65 +37,76 @@
<div class="container py-5">
<h2 class="section-title mb-5">Proyectos en desarrollo</h2>
<div class="row g-4"> <div class="col-md-6 col-lg-4">
<div class="card project-card h-100">
<div class="row g-4">
<div class="col-md-6 col-lg-4">
<div class="card project-card card-green h-100">
<div class="card-body">
<h5 class="card-title fw-bold">Oposiciones</h5>
<p class="card-text text-muted">Temario y cuestionarios para TAI AGE</p>
<div id="countdown" class="mb-2" ></div>
<p class="card-text text-muted card-tecnologia">HTML, CSS, JS</p>
<a href="oposiciones/index.html" class="btn-link">Saber más →</a>
<h5 class="card-title fw-bold">📚 Oposiciones</h5>
<p class="card-text">Temario y cuestionarios para TAI AGE</p>
<div id="countdown" class="mb-2"></div>
<p class="card-text card-tecnologia">HTML, CSS, JS</p>
<a href="https://taiage.tatvil.es" class="btn-link" target="_blank" rel="noopener">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 project-card card-amber h-100">
<div class="card-body">
<h5 class="card-title fw-bold">Recursos Católicos</h5>
<p class="card-text text-muted">Web de recursos católicos gratuitos.</p>
<p class="card-text text-muted card-tecnologia">HTML, CSS, Bootstrap, JS, PHP, SQL.</p>
<a href="https://recursos-catolicos.es" class="btn-link">Saber más →</a>
<h5 class="card-title fw-bold">✝️ Recursos Católicos</h5>
<p class="card-text">Web de recursos católicos gratuitos.</p>
<p class="card-text card-tecnologia">HTML, CSS, Bootstrap, JS, PHP, SQL.</p>
<a href="https://recursos-catolicos.es" class="btn-link" target="_blank" rel="noopener">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 project-card card-sky h-100">
<div class="card-body">
<h5 class="card-title fw-bold">El Tiempo</h5>
<p class="card-text text-muted">Estadísticas de Madrid, L'Ampolla y L'Alfas del Pi.</p>
<p class="card-text text-muted card-tecnologia">PHP, MySQL, HTML, CSS, JS.</p>
<a href="eltiempo/index.html" class="btn-link">Saber más →</a>
<h5 class="card-title fw-bold">🌤️ El Tiempo</h5>
<p class="card-text">Estadísticas de Madrid, L'Ampolla y L'Alfas del Pi.</p>
<p class="card-text card-tecnologia">Java, Spring Boot, MySQL, HTML, CSS, JS.</p>
<a href="https://eltiempo.tatvil.es" class="btn-link" target="_blank" rel="noopener">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 project-card card-red h-100">
<div class="card-body">
<h5 class="card-title fw-bold">Formula 1</h5>
<p class="card-text text-muted">Web de estadísticas de Fórmula 1.</p>
<p class="card-text text-muted card-tecnologia">Java, Spring, Hibernate, MySQL.</p>
<a href="formula1/index.html" class="btn-link">Saber más →</a>
<h5 class="card-title fw-bold">Fórmula 1</h5>
<p class="card-text">Web de estadísticas de Fórmula 1.</p>
<p class="card-text card-tecnologia">Java, Spring Boot, Hibernate, MySQL.</p>
<a href="https://formula1.tatvil.es" class="btn-link" target="_blank" rel="noopener">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 project-card card-orange h-100">
<div class="card-body">
<h5 class="card-title fw-bold">Piedra, Papel o Tijera</h5>
<p class="card-text text-muted">Juego clásico optimizado para móviles.</p>
<p class="card-text text-muted card-tecnologia">HTML, CSS, JavaScript.</p>
<h5 class="card-title fw-bold">Autocompra</h5>
<p class="card-text">Seguimiento de precios y análisis de la compra del supermercado para estadística y lista de la compra automática.</p>
<p class="card-text card-tecnologia">Python, FastAPI, SQLite, HTML, CSS, JS.</p>
<a href="https://autocompra.tatvil.es" class="btn-link" target="_blank" rel="noopener">Saber más →</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="card project-card card-violet h-100">
<div class="card-body">
<h5 class="card-title fw-bold">✂️ Piedra, Papel o Tijera</h5>
<p class="card-text">Juego clásico optimizado para móviles.</p>
<p class="card-text card-tecnologia">HTML, CSS, JavaScript.</p>
<a href="piedra-papel-tijera.html" class="btn-link">Saber más →</a>
</div>
</div>
</div>
</div> </div>
</div>
</section>
<footer class="py-5 text-center">