codyops/apex
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix #1 - Implementar Grid y Reboot #3

Merged
giacchetta merged 3 commits from 1-implementar-bootstrap-grid-reboot into main 2025-06-12 19:42:09 -03:00
Conversation 0 Commits 3 Files Changed 9 +82 -90
3 changed files with 82 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 82774e51e8 - Show all commits

16
src/components/Footer.astro
View File

@ -1,36 +1,36 @@
--- ---
const date = new Date(); const date = new Date();
--- ---
<footer class="position-absolute start-0 end-0"> <footer>
<div class="container pb-5"> <div class="container pb-5">
<div class="row justify-content-between align-items-center"> <div class="row justify-content-between align-items-center">
<div class="col-sm mb-3 mb-sm-0"> <div class="col-sm mb-3 mb-sm-0">
<p class="small mb-0 text-white">&copy; CodyOps ~ All Rights Reserved ~ {date.toDateString()}</p> <p class="mb-0 text-white">&copy; CodyOps ~ All Rights Reserved ~ {date.toDateString()}</p>
</div> </div>
<div class="col-sm-auto"> <div class="col-sm-auto" style="font-size:larger;">
<ul class="list-inline mb-0"> <ul class="list-inline mb-0">
<li class="list-inline-item"> <li class="list-inline-item">
<a class="btn" href="https://www.linkedin.com/company/codyopslatam"> <a href="https://www.linkedin.com/company/codyopslatam">
<i class="bi-linkedin text-white"></i> <i class="bi-linkedin text-white"></i>
</a> </a>
</li> </li>
<li class="list-inline-item"> <li class="list-inline-item">
<a class="btn" href="https://www.facebook.com/codyopslatam"> <a href="https://www.facebook.com/codyopslatam">
<i class="bi-facebook text-white"></i> <i class="bi-facebook text-white"></i>
</a> </a>
</li> </li>
<li class="list-inline-item"> <li class="list-inline-item">
<a class="btn" href="https://www.instagram.com/codyopslatam"> <a href="https://www.instagram.com/codyopslatam">
<i class="bi-instagram text-white"></i> <i class="bi-instagram text-white"></i>
</a> </a>
</li> </li>
<li class="list-inline-item"> <li class="list-inline-item">
<a class="btn" href="https://www.youtube.com/@codyopslabs"> <a href="https://www.youtube.com/@codyopslabs">
<i class="bi-youtube text-white"></i> <i class="bi-youtube text-white"></i>
</a> </a>
</li> </li>
<li class="list-inline-item"> <li class="list-inline-item">
<a class="btn" href="https://github.com/codyopslabs"> <a href="https://github.com/codyopslabs">
<i class="bi-github text-white"></i> <i class="bi-github text-white"></i>
</a> </a>
</li> </li>

48
src/layouts/Layout.astro
View File

@ -1,8 +1,9 @@
--- ---
import 'bootstrap/dist/css/bootstrap.min.css'; import 'bootstrap/dist/css/bootstrap-grid.min.css';
import 'bootstrap/dist/css/bootstrap-reboot.min.css';
import 'bootstrap-icons/font/bootstrap-icons.min.css'; import 'bootstrap-icons/font/bootstrap-icons.min.css';
import favicon from '../assets/svg/favicon.svg'; import favicon from '../assets/svg/favicon.svg';
const gtm = import.meta.env.ASTRO_GTAG; const gtm = import.meta.env.ASTRO_GTAG;
--- ---
<!doctype html> <!doctype html>
@ -11,7 +12,7 @@ const gtm = import.meta.env.ASTRO_GTAG;
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="generator" content={Astro.generator} /> <meta name="generator" content={Astro.generator} />
<meta name="description" content='' /> <!-- <meta name="description" content='' /> -->
<title>CodyOps</title> <title>CodyOps</title>
<link rel="icon" type="image/svg+xml" href={favicon.src} /> <link rel="icon" type="image/svg+xml" href={favicon.src} />
<link rel="alternate" href="https://codyops.com/" hreflang="es" /> <link rel="alternate" href="https://codyops.com/" hreflang="es" />
@ -22,13 +23,44 @@ const gtm = import.meta.env.ASTRO_GTAG;
<script is:inline async define:vars={{ gtm }}>window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', gtm);</script> <script is:inline async define:vars={{ gtm }}>window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', gtm);</script>
} }
</head> </head>
<body> <body data-bs-theme="dark">
<slot /> <slot />
</body> </body>
</html> </html>
<style> <style is:global>
body{ .list-inline {
background-color: #18181B; padding-left: 0;
} list-style: none;
}
.list-inline-item {
display: inline-block;
}
.list-inline-item:not(:last-child) {
margin-right: 1rem;
}
.text-center {
text-align: center !important;
}
.text-uppercase {
text-transform: uppercase !important;
}
.text-white {
--bs-text-opacity: 1;
color: rgba(var(--bs-white-rgb), var(--bs-text-opacity)) !important;
}
.text-decoration-none {
text-decoration: none !important;
}
.img-thumbnail {
padding: 0.25rem;
background-color: var(--bs-body-bg);
border: var(--bs-border-width) solid var(--bs-border-color);
border-radius: var(--bs-border-radius);
max-width: 100%;
height: auto;
}
.border-0 {
border: 0 !important;
}
</style> </style>

104
src/pages/index.astro
View File

@ -2,8 +2,7 @@
import Layout from '../layouts/Layout.astro'; import Layout from '../layouts/Layout.astro';
import Footer from '../components/Footer.astro'; import Footer from '../components/Footer.astro';
import { Image } from 'astro:assets'; import { Picture } from 'astro:assets';
import logo from '../assets/svg/codyops.svg';
import argentina from '../assets/img/argentina-flag-square-medium.png'; import argentina from '../assets/img/argentina-flag-square-medium.png';
import chile from '../assets/img/chile-flag-square-medium.png'; import chile from '../assets/img/chile-flag-square-medium.png';
@ -23,177 +22,138 @@ import spain from '../assets/img/spain-flag-square-medium.png';
--- ---
<Layout> <Layout>
<body> <body>
<header id="header" class="navbar navbar-expand"> <div class="container my-4">
<div class="container">
<nav class="navbar-nav">
<a class="navbar-brand" href="/" aria-label="CodyOps">
<Image width="120" src={logo} alt="CodyOps Logo" />
</a>
</nav>
</div>
</header>
<div class="container my-2">
<div class="text-center mx-md-auto mb-5"> <div class="text-center mx-md-auto mb-5">
<span class="text-uppercase text-white">Selector</span> <span class="text-uppercase text-white">Selector</span>
<h2 class="h2 text-white">Escoja su País – Choose your Country - Escolha seu País</h2> <h2 class="h2 text-white">Escoja su País – Choose your Country - Escolha seu País</h2>
</div> </div>
<div class="row"> <div class="row">
<div class="col-md-6 col-lg-4 mb-4 mb-md-5 mb-lg-0"> <div class="col-md-6 col-lg-4 mb-4 mb-md-5 mb-lg-0">
<a class="card h-100 text-center text-decoration-none border-0" href="https://ar.codyops.com/ "> <a class="text-center text-decoration-none border-0" href="https://ar.codyops.com/ ">
<div class="card-body bg-dark bg-opacity-75">
<div class="mb-3"> <div class="mb-3">
<Image class="img-fluid img-thumbnail" src={argentina} alt="Argentina Logo" /> <Picture class="img-thumbnail" src={argentina} alt="Argentina Logo" />
</div> </div>
<h2 class="card-title text-white">Argentina</h2> <h2 class="card-title text-white">Argentina</h2>
</div>
</a> </a>
</div> </div>
<div class="col-md-6 col-lg-4 mb-4 mb-md-5 mb-lg-0"> <div class="col-md-6 col-lg-4 mb-4 mb-md-5 mb-lg-0">
<a class="card h-100 text-center text-decoration-none border-0" href="https://www.codyops.com.br"> <a class="text-center text-decoration-none border-0" href="https://www.codyops.com.br">
<div class="card-body bg-dark bg-opacity-75">
<div class="mb-3"> <div class="mb-3">
<Image class="img-fluid img-thumbnail" src={brazil} alt="Brasil Logo" /> <Picture class="img-thumbnail" src={brazil} alt="Brasil Logo" />
</div> </div>
<h2 class="card-title text-white">Brasil</h2> <h2 class="card-title text-white">Brasil</h2>
</div>
</a> </a>
</div> </div>
<div class="col-md-6 col-lg-4 mb-4 mb-md-5 mb-lg-0"> <div class="col-md-6 col-lg-4 mb-4 mb-md-5 mb-lg-0">
<a class="card h-100 text-center text-decoration-none border-0" href="https://cl.codyops.com"> <a class="text-center text-decoration-none border-0" href="https://cl.codyops.com">
<div class="card-body bg-dark bg-opacity-75">
<div class="mb-3"> <div class="mb-3">
<Image class="img-fluid img-thumbnail" src={chile} alt="Chile Logo" /> <Picture class="img-thumbnail" src={chile} alt="Chile Logo" />
</div> </div>
<h2 class="card-title text-white">Chile</h2> <h2 class="card-title text-white">Chile</h2>
</div>
</a> </a>
</div> </div>
</div> </div>
<div class="row mt-3"> <div class="row mt-3">
<div class="col-md-6 col-lg-4 mb-4 mb-md-5 mb-lg-0"> <div class="col-md-6 col-lg-4 mb-4 mb-md-5 mb-lg-0">
<a class="card h-100 text-center text-decoration-none border-0" href="https://co.codyops.com"> <a class="text-center text-decoration-none border-0" href="https://co.codyops.com">
<div class="card-body bg-dark bg-opacity-75">
<div class="mb-3"> <div class="mb-3">
<Image class="img-fluid img-thumbnail" src={colombia} alt="Colombia Logo" /> <Picture class="img-thumbnail" src={colombia} alt="Colombia Logo" />
</div> </div>
<h2 class="card-title text-white">Colombia</h2> <h2 class="card-title text-white">Colombia</h2>
</div>
</a> </a>
</div> </div>
<div class="col-md-6 col-lg-4 mb-4 mb-md-5 mb-lg-0"> <div class="col-md-6 col-lg-4 mb-4 mb-md-5 mb-lg-0">
<a class="card h-100 text-center text-decoration-none border-0" href="https://cr.codyops.com/ "> <a class="text-center text-decoration-none border-0" href="https://cr.codyops.com/ ">
<div class="card-body bg-dark bg-opacity-75">
<div class="mb-3"> <div class="mb-3">
<Image class="img-fluid img-thumbnail" src={costarica} alt="Costa Rica Logo" /> <Picture class="img-thumbnail" src={costarica} alt="Costa Rica Logo" />
</div> </div>
<h2 class="card-title text-white">Costa Rica</h2> <h2 class="card-title text-white">Costa Rica</h2>
</div>
</a> </a>
</div> </div>
<div class="col-md-6 col-lg-4 mb-4 mb-md-5 mb-lg-0"> <div class="col-md-6 col-lg-4 mb-4 mb-md-5 mb-lg-0">
<a class="card h-100 text-center text-decoration-none border-0" href="https://do.codyops.com"> <a class="text-center text-decoration-none border-0" href="https://do.codyops.com">
<div class="card-body bg-dark bg-opacity-75">
<div class="mb-3"> <div class="mb-3">
<Image class="img-fluid img-thumbnail" src={dominicana} alt="Dominicana Logo" /> <Picture class="img-thumbnail" src={dominicana} alt="Dominicana Logo" />
</div> </div>
<h2 class="card-title text-white">Dominicana</h2> <h2 class="card-title text-white">Dominicana</h2>
</div>
</a> </a>
</div> </div>
</div> </div>
<div class="row mt-3"> <div class="row mt-3">
<div class="col-md-6 col-lg-4 mb-4 mb-md-5 mb-lg-0"> <div class="col-md-6 col-lg-4 mb-4 mb-md-5 mb-lg-0">
<a class="card h-100 text-center text-decoration-none border-0" href="https://ec.codyops.com"> <a class="text-center text-decoration-none border-0" href="https://ec.codyops.com">
<div class="card-body bg-dark bg-opacity-75">
<div class="mb-3"> <div class="mb-3">
<Image class="img-fluid img-thumbnail" src={ecuador} alt="Ecuador Logo" /> <Picture class="img-thumbnail" src={ecuador} alt="Ecuador Logo" />
</div> </div>
<h2 class="card-title text-white">Ecuador</h2> <h2 class="card-title text-white">Ecuador</h2>
</div>
</a> </a>
</div> </div>
<div class="col-md-6 col-lg-4 mb-4 mb-md-5 mb-lg-0"> <div class="col-md-6 col-lg-4 mb-4 mb-md-5 mb-lg-0">
<a class="card h-100 text-center text-decoration-none border-0" href="https://www.codyops.com.es"> <a class="text-center text-decoration-none border-0" href="https://www.codyops.com.es">
<div class="card-body bg-dark bg-opacity-75">
<div class="mb-3"> <div class="mb-3">
<Image class="img-fluid img-thumbnail" src={spain} alt="Spain Logo" /> <Picture class="img-thumbnail" src={spain} alt="Spain Logo" />
</div> </div>
<h2 class="card-title text-white">España</h2> <h2 class="card-title text-white">España</h2>
</div>
</a> </a>
</div> </div>
<div class="col-md-6 col-lg-4 mb-4 mb-md-5 mb-lg-0"> <div class="col-md-6 col-lg-4 mb-4 mb-md-5 mb-lg-0">
<a class="card h-100 text-center text-decoration-none border-0" href="https://www.codyops.com "> <a class="text-center text-decoration-none border-0" href="https://www.codyops.com ">
<div class="card-body bg-dark bg-opacity-75">
<div class="mb-3"> <div class="mb-3">
<Image class="img-fluid img-thumbnail" src={usa} alt="USA Logo" /> <Picture class="img-thumbnail" src={usa} alt="USA Logo" />
</div> </div>
<h2 class="card-title text-white">Estados Unidos</h2> <h2 class="card-title text-white">Estados Unidos</h2>
</div>
</a> </a>
</div> </div>
</div> </div>
<div class="row mt-3"> <div class="row mt-3">
<div class="col-md-6 col-lg-4 mb-4 mb-md-5 mb-lg-0"> <div class="col-md-6 col-lg-4 mb-4 mb-md-5 mb-lg-0">
<a class="card h-100 text-center text-decoration-none border-0" href="https://mx.codyops.com/ "> <a class="text-center text-decoration-none border-0" href="https://mx.codyops.com/ ">
<div class="card-body bg-dark bg-opacity-75">
<div class="mb-3"> <div class="mb-3">
<Image class="img-fluid img-thumbnail" src={mexico} alt="Mexico Logo" /> <Picture class="img-thumbnail" src={mexico} alt="Mexico Logo" />
</div> </div>
<h2 class="card-title text-white">México</h2> <h2 class="card-title text-white">México</h2>
</div>
</a> </a>
</div> </div>
<div class="col-md-6 col-lg-4 mb-4 mb-md-5 mb-lg-0"> <div class="col-md-6 col-lg-4 mb-4 mb-md-5 mb-lg-0">
<a class="card h-100 text-center text-decoration-none border-0" href="https://pa.codyops.com"> <a class="text-center text-decoration-none border-0" href="https://pa.codyops.com">
<div class="card-body bg-dark bg-opacity-75">
<div class="mb-3"> <div class="mb-3">
<Image class="img-fluid img-thumbnail" src={panama} alt="Panama Logo" /> <Picture class="img-thumbnail" src={panama} alt="Panama Logo" />
</div> </div>
<h2 class="card-title text-white">Panamá</h2> <h2 class="card-title text-white">Panamá</h2>
</div>
</a> </a>
</div> </div>
<div class="col-md-6 col-lg-4"> <div class="col-md-6 col-lg-4">
<a class="card h-100 text-center text-decoration-none border-0" href="https://py.codyops.com"> <a class="text-center text-decoration-none border-0" href="https://py.codyops.com">
<div class="card-body bg-dark bg-opacity-75">
<div class="mb-3"> <div class="mb-3">
<Image class="img-fluid img-thumbnail" src={paraguay} alt="Paraguay Logo" /> <Picture class="img-thumbnail" src={paraguay} alt="Paraguay Logo" />
</div> </div>
<h2 class="card-title text-white">Paraguay</h2> <h2 class="card-title text-white">Paraguay</h2>
</div>
</a> </a>
</div> </div>
</div> </div>
<div class="row mt-3"> <div class="row mt-3">
<div class="col-md-6 col-lg-4 mb-4 mb-md-5 mb-lg-0"> <div class="col-md-6 col-lg-4 mb-4 mb-md-5 mb-lg-0">
<a class="card h-100 text-center text-decoration-none border-0" href="https://pe.codyops.com/ "> <a class="text-center text-decoration-none border-0" href="https://pe.codyops.com/ ">
<div class="card-body bg-dark bg-opacity-75">
<div class="mb-3"> <div class="mb-3">
<Image class="img-fluid img-thumbnail" src={peru} alt="Peru Logo" /> <Picture class="img-thumbnail" src={peru} alt="Peru Logo" />
</div> </div>
<h2 class="card-title text-white">Perú</h2> <h2 class="card-title text-white">Perú</h2>
</div>
</a> </a>
</div> </div>
<div class="col-md-6 col-lg-4 mb-4 mb-md-5 mb-lg-0"> <div class="col-md-6 col-lg-4 mb-4 mb-md-5 mb-lg-0">
<a class="card h-100 text-center text-decoration-none border-0" href="https://sv.codyops.com"> <a class="text-center text-decoration-none border-0" href="https://sv.codyops.com">
<div class="card-body bg-dark bg-opacity-75">
<div class="mb-3"> <div class="mb-3">
<Image class="img-fluid img-thumbnail" src={salvador} alt="Salvador Logo" /> <Picture class="img-thumbnail" src={salvador} alt="Salvador Logo" />
</div> </div>
<h2 class="card-title text-white">El Salvador</h2> <h2 class="card-title text-white">El Salvador</h2>
</div>
</a> </a>
</div> </div>
<div class="col-md-6 col-lg-4"> <div class="col-md-6 col-lg-4">
<a class="card h-100 text-center text-decoration-none border-0" href="https://uy.codyops.com"> <a class="text-center text-decoration-none border-0" href="https://uy.codyops.com">
<div class="card-body bg-dark bg-opacity-75">
<div class="mb-3"> <div class="mb-3">
<Image class="img-fluid img-thumbnail" src={uruguay} alt="Uruguay Logo" /> <Picture class="img-thumbnail" src={uruguay} alt="Uruguay Logo" />
</div> </div>
<h2 class="card-title text-white">Uruguay</h2> <h2 class="card-title text-white">Uruguay</h2>
</div>
</a> </a>
</div> </div>
</div> </div>