primer commit
This commit is contained in:
Tatiana Villa Ema
commit
9c5b89cdbd
Binary file not shown.
|
After Width: | Height: | Size: 33 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
|
|
@ -0,0 +1,65 @@
|
|||
<!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="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">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/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">Tecnologia (HTML, CSS, Bootstrap, JavaScript).</p>
|
||||
<a href="/var/www/portfolio/publish" 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 - Creado con fe en el proceso y pasión por la tecnología.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,130 @@
|
|||
/* Variables de tus colores */
|
||||
:root {
|
||||
--primary-blue: #0054a4;
|
||||
--medium-blue: #286291;
|
||||
--dark-blue: #1a3668;
|
||||
--light-blue: #a4d7f4;
|
||||
--accent-orange: #ff9900;
|
||||
--light-gold: #ffc24a;
|
||||
--bg-dark: #0f172a; /* Fondo muy oscuro para contraste */
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: Roboto, 'Inter', sans-serif;
|
||||
background-color: var(--bg-dark);
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Navbar */
|
||||
.navbar {
|
||||
background-color: rgba(26, 54, 104, 0.95); /* var(--dark-blue) con opacidad */
|
||||
border-bottom: 2px solid var(--primary-blue);
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
font-weight: bold;
|
||||
color: var(--light-blue) !important;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
color: white !important;
|
||||
font-size: 0.8rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.nav-link:hover {
|
||||
color: var(--light-gold) !important;
|
||||
}
|
||||
|
||||
/* Hero Section */
|
||||
.hero-section {
|
||||
min-height: 80vh;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
color: var(--accent-orange);
|
||||
text-decoration: underline;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.celeste {
|
||||
color: var(--light-blue);
|
||||
text-decoration: underline;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.btn-custom {
|
||||
background-color: var(--primary-blue);
|
||||
color: white;
|
||||
border-radius: 50px;
|
||||
padding: 12px 35px;
|
||||
font-weight: bold;
|
||||
border: none;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.btn-custom:hover {
|
||||
background-color: var(--accent-orange);
|
||||
color: white;
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
|
||||
/* Cards de Proyectos */
|
||||
.section-title {
|
||||
border-left: 5px solid var(--accent-orange);
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
.project-card {
|
||||
background-color: var(--dark-blue);
|
||||
border: 1px solid var(--medium-blue);
|
||||
border-radius: 1.5rem;
|
||||
transition: 0.3s;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.project-card:hover {
|
||||
border-color: var(--light-gold);
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
|
||||
.card-img-placeholder {
|
||||
height: 180px;
|
||||
background-color: #1e293b;
|
||||
text-align: center;
|
||||
line-height: 180px;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
color: var(--accent-orange);
|
||||
background-color: rgba(26, 54, 104, 0.5);
|
||||
width: 100%;
|
||||
padding: 5px 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.card-text {
|
||||
color: white !important;
|
||||
}
|
||||
.btn-link {
|
||||
color: var(--light-blue);
|
||||
text-decoration: none;
|
||||
font-style: italic;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.btn-link:hover {
|
||||
color: var(--light-gold);
|
||||
}
|
||||
|
||||
.border-dashed {
|
||||
border: 2px dashed var(--medium-blue) !important;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
footer {
|
||||
border-top: 1px solid var(--medium-blue);
|
||||
color: var(--light-blue);
|
||||
}
|
||||
Loading…
Reference in New Issue