111 lines
5.8 KiB
HTML
111 lines
5.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="es">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Aplicaciones de Vanguardia</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;700&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="css/style.css">
|
|
</head>
|
|
<body>
|
|
|
|
<nav class="navbar navbar-expand-lg sticky-top">
|
|
<div class="container">
|
|
<a class="navbar-brand" href="#">Aplicaciones de Vanguardia</a>
|
|
<div class="ms-auto">
|
|
<a href="#proyectos" class="nav-link d-inline-block me-3">Proyectos</a>
|
|
<a href="#sobre-mi" class="nav-link d-inline-block">Sobre mí</a>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<section id="proyectos" class="py-5">
|
|
<div class="container py-5">
|
|
<h2 class="section-title mb-5">Proyectos</h2>
|
|
|
|
<div class="row g-4">
|
|
<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/recursos-catolicos.jpg" alt="Recursos Católicos" class="img-fluid">
|
|
</div>
|
|
<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 (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>
|
|
</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/piedra-papel-tijera.jpg" alt="Piedra, Papel o Tijera" class="img-fluid">
|
|
</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.</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>
|
|
</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/portfolio.jpg" alt="Portfolio" class="img-fluid">
|
|
</div>
|
|
<div class="card-body">
|
|
<h5 class="card-title fw-bold">Portfolio</h5>
|
|
<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 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/oposiciones.jpg" alt="Oposiciones" class="img-fluid">
|
|
</div>
|
|
<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>
|
|
<p class="card-text text-muted card-tecnologia">HTML, CSS</p>
|
|
<a href="oposiciones/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">© 2026 - Tatiana Villa</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
|
</body>
|
|
</html>
|