<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<title>Área de gobierno 1er nivel - Opción 1</title>
<!-- Obelisco -->
<!-- OBELISCO CDN´s -->
<!-- Obelisco -->
</head>
<body>
<main id="main">
<article class="pb-5 mb-4">
<header class="bg-light pt-3 pb-5 mb-5">
<div class="container pt-1">
<nav aria-label="Navegación secundaria" class="py-3">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Inicio</a></li>
</ol>
</nav>
<div class="row">
<div class="col-12 col-xl-8">
<div class="mt-2 pt-1">
<h1 class="mb-3">Nombre del área</h1>
<p class="lead">It has survived not only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged. It was popularised in the 1960s.</p>
</div>
<div class="d-block d-md-flex flex-wrap pt-3">
<!-- Desplegable de navegación 1 -->
<div class="dropdown me-3">
<button type="button" class="btn btn-dropdown btn-dropdown-border btn-lg" data-bs-toggle="dropdown"
aria-expanded="false">
<span class="btn-dropdown-text ellipsis-1">Institucional</span>
<span class="material-symbols-rounded btn-dropdown-icon" aria-label="hidden">
expand_more
</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">
<span class="item-text">Opción de navegación</span>
</a>
<a class="dropdown-item" href="#">
<span class="item-text">Opción de navegación</span>
</a>
<a class="dropdown-item" href="#">
<span class="item-text">Opción de navegación</span>
</a>
</div>
</div>
<!-- Inicio Desplegable de navegación 2 -->
<div class="dropdown">
<button type="button" class="btn btn-dropdown btn-dropdown-border btn-lg" data-bs-toggle="dropdown"
aria-expanded="false">
<span class="btn-dropdown-text ellipsis-1">Transparencia activa</span>
<span class="material-symbols-rounded btn-dropdown-icon" aria-label="hidden">
expand_more
</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">
<span class="item-text">Opción de navegación</span>
</a>
<a class="dropdown-item" href="#">
<span class="item-text">Opción de navegación</span>
</a>
<a class="dropdown-item" href="#">
<span class="item-text">Opción de navegación</span>
</a>
</div>
</div>
<!-- Fin Desplegable de navegación 2 -->
</div>
</div>
</div>
</div>
</header>
<div class="container py-3">
<div class="card-items-3 mb-5">
<div class="col">
<div class="card unbordered">
<i class='bx bxs-detail card-icon'></i>
<div class="card-body">
<h3 class="card-title"><a href="#">Titular de la tarjeta</a></h3>
<p class="card-text">
Descripción del titular de una tarjeta con contenedor que puede llegar a contener hasta 3 líneas
máximo </p>
</div>
</div>
</div>
<div class="col">
<div class="card unbordered">
<i class='bx bxs-detail card-icon'></i>
<div class="card-body">
<h3 class="card-title"><a href="#">Titular de la tarjeta</a></h3>
<p class="card-text">
Descripción del titular de una tarjeta con contenedor que puede llegar a contener hasta 3 líneas
máximo </p>
</div>
</div>
</div>
<div class="col">
<div class="card unbordered">
<i class='bx bxs-detail card-icon'></i>
<div class="card-body">
<h3 class="card-title"><a href="#">Titular de la tarjeta</a></h3>
<p class="card-text">
Descripción del titular de una tarjeta con contenedor que puede llegar a contener hasta 3 líneas
máximo </p>
</div>
</div>
</div>
</div>
</div>
<div class="panel-horizontal-content">
<div class="panel-horizontal">
<img src="../../assets/panel/multimediaDestacado.png" alt="descripción de imagen" class="panel-img" />
<div class="panel-body">
<h2 class="panel-title">Título del destacado</h2>
<p class="panel-text">
Este es el cuerpo de un destacado. Debe ser breve y conciso, de pocas
líneas. No puede contener negritas ni enlaces. Este es el cuerpo de un
destacado. Debe ser breve y conciso, de pocas líneas. No puede contener
negritas ni enlaces
</p>
<div class="panel-footer">
<a class="btn btn-primary btn-lg" href="#" rel="noopener noreferrer">
Botón
</a>
<a class="btn btn-outline-primary btn-lg" href="#" rel="noopener noreferrer">
Botón
</a>
</div>
</div>
</div>
</div>
<div class="container mt-5">
<h2>Encabezado de la sección</h2>
<div class="card-items-3 mb-5">
<div class="col">
<div class="card">
<span class="material-symbols-rounded card-icon">
assignment
</span>
<!-- <i class='bx bxs-assignment card-icon'></i> -->
<div class="card-body">
<h3 class="card-title">Titular de la tarjeta con dos líneas de ejemplo</h3>
<p class="card-text">
Descripción del titular de una tarjeta con contenedor que puede llegar a contener hasta 3 líneas
máximo</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<span class="material-symbols-rounded card-icon">
assignment
</span>
<!-- <i class='bx bxs-assignment card-icon'></i> -->
<div class="card-body">
<h3 class="card-title">Titular de la tarjeta con dos líneas de ejemplo</h3>
<p class="card-text">
Descripción del titular de una tarjeta con contenedor que puede llegar a contener hasta 3 líneas
máximo</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<span class="material-symbols-rounded card-icon">
assignment
</span>
<!-- <i class='bx bxs-assignment card-icon'></i> -->
<div class="card-body">
<h3 class="card-title">Titular de la tarjeta con dos líneas de ejemplo</h3>
<p class="card-text">
Descripción del titular de una tarjeta con contenedor que puede llegar a contener hasta 3 líneas
máximo</p>
</div>
</div>
</div>
</div>
</div>
<div class="container mt-5 pt-3">
<h2 class="mb-4">Programas y servicios del Ministerio</h2>
<div class="card-items-3">
<div class="col">
<div class="card card-horizontal">
<img src="../../assets/eventos/cultura.png" class="card-img" alt="descripción alternativa" width="168" />
<div class="card-body">
<h3 class="card-title">
<a href="#" class="card-title-link">Título de la tarjeta</a>
</h3>
</div>
</div>
</div>
<div class="col">
<div class="card card-horizontal">
<img src="../../assets/eventos/cultura.png" class="card-img" alt="descripción alternativa" width="168" />
<div class="card-body">
<h3 class="card-title">
<a href="#" class="card-title-link">Título de la tarjeta</a>
</h3>
</div>
</div>
</div>
<div class="col">
<div class="card card-horizontal" href="#">
<img src="../../assets/eventos/cultura.png" class="card-img" alt="descripción alternativa" width="168" />
<div class="card-body">
<h3 class="card-title"><a href="#" class="card-title-link">Título de la tarjeta</a>
</h3>
</div>
</div>
</div>
<div class="col">
<div class="card card-horizontal" href="#">
<img src="../../assets/eventos/cultura.png" class="card-img" alt="descripción alternativa" width="168" />
<div class="card-body text-center">
<h3 class="card-title"><a href="#" class="card-title-link">Título de la tarjeta</a></h3>
</div>
</div>
</div>
<div class="col">
<div class="card card-horizontal" href="#">
<img src="../../assets/eventos/cultura.png" class="card-img" alt="descripción alternativa" width="168" />
<div class="card-body text-center">
<h3 class="card-title"><a href="#" class="card-title-link">Título de la tarjeta</a></h3>
</div>
</div>
</div>
<div class="col">
<div class="card card-horizontal" href="#">
<img src="../../assets/eventos/cultura.png" class="card-img" alt="descripción alternativa" width="168" />
<div class="card-body text-center">
<h3 class="card-title"><a href="#" class="card-title-link">Título de la tarjeta</a></h3>
</div>
</div>
</div>
</div>
</div>
<div class="container py-4 pt-md-4 pb-md-5 mt-md-2">
<h2 class="mb-3 mb-md-4">Noticias</h2>
<div class="card-items-3 mb-4">
<div class="col">
<div class="card">
<img src="../../assets/tarjetas/image-1.jpeg" class="card-img" alt="descripción alternativa" />
<div class="card-body">
<div class="card-badge mb-2">
<span class="badge badge-info">ETIQUETA</span>
</div>
<h3 class="card-title">
<a href="#" class="card-title-link">Titular de la tarjeta con dos líneas de ejemplo</a>
</h3>
<p class="card-text">
Descripción del titular de una tarjeta con contenedor que puede contener hasta 2 líneas.
</p>
<div class="card-info">
<div>
<small><span>Fecha de publicación: 07/08/2023</span></small>
</div>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="../../assets/tarjetas/image-2.jpeg" class="card-img" alt="descripción alternativa" />
<div class="card-body">
<div class="card-badge">
<span class="badge badge-info">ETIQUETA</span>
</div>
<h3 class="card-title">
<a href="#" class="card-title-link">Titular de la tarjeta con dos líneas de ejemplo</a>
</h3>
<p class="card-text">
Descripción del titular de una tarjeta con contenedor que puede contener hasta 2 líneas.
</p>
<div class="card-info">
<small><span>Fecha de publicación: 05/08/2023</span></small>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="../../assets/tarjetas/image-3.jpeg" class="card-img" alt="descripción alternativa" />
<div class="card-body">
<div class="card-badge mb-2">
<span class="badge badge-info">ETIQUETA</span>
</div>
<h3 class="card-title">
<a href="#" class="card-title-link">Titular de la tarjeta con dos líneas de ejemplo</a>
</h3>
<p class="card-text">
Descripción del titular de una tarjeta con contenedor que puede contener hasta 2 líneas.
</p>
<div class="card-info">
<div>
<small><span>Fecha de publicación: 03/08/2023</span></small>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="pt-1">
<a class="access" href="#" target="_blank" rel="noreferrer">
Ver todas las Noticias
</a>
</div>
</div>
</article>
<section class="bg-light py-5">
<div class="container my-1 py-2">
<h2 class="mb-4">Información institucional</h2>
<div class="card-items-2 mb-5">
<div class="col">
<div class="d-flex p-3 rounded-3 gap-3">
<img src="../../assets/institucional/ministro.jpeg" class="rounded" alt="descripción alternativa"
width="96" height="96" />
<div class="">
<h3 class="h4">
Nombre del Ministro
</h3>
<p class="mb-0">
Ministro del Gobierno de Buenos Aires
</p>
</div>
</div>
</div>
<div class="col">
<div class="d-flex p-3 rounded-3 gap-3">
<div class="">
<h3 class="h4">Contacto</h3>
<p class="mb-0">
Teléfono: 0432-5544 <br> Email: email@buenosaires.gob.ar
</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12 col-md-6">
<h2 class="mb-4">Redes sociales</h2>
<div class="access-items-1 mb-3">
<div class="col">
<a href="#" class="list-group-item item-sm">
<i class="bx bxl-facebook-circle o-icon"></i>
<div class="access-content">
<span class="access-title">Facebook</span>
</div>
</a>
</div>
<div class="col">
<a href="#" class="list-group-item item-sm">
<i class="bx bxl-instagram o-icon"></i>
<div class="access-content">
<span class="access-title">Instagram</span>
</div>
</a>
</div>
<div class="col">
<a href="#" class="list-group-item item-sm">
<i class="bx bxl-twitter o-icon"></i>
<div class="access-content">
<span class="access-title">Twitter</span>
</div>
</a>
</div>
<div class="col">
<a href="#" class="list-group-item item-sm">
<i class="bx bxl-youtube o-icon"></i>
<div class="access-content">
<span class="access-title">Youtube</span>
</div>
</a>
</div>
</div>
</div>
<div class="col-12 col-md-6">
<!-- eliminar clase de img, cuando se actualice obelisco-v2 -->
<div class="map">
<div class="map-body">
<h3 class="map-title">Ubicación</h3>
<p class="map-text">Av. Monroe 3555</p>
<div class="map-iframe">
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3285.546419258713!2d-58.47368982446642!3d-34.56503805545613!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x95bcb7af96224d2b%3A0x74db1988250c9c82!2sAv.%20Monroe%203555%2C%20C1430BKC%20Cdad.%20Aut%C3%B3noma%20de%20Buenos%20Aires!5e0!3m2!1ses-419!2sar!4v1732540817198!5m2!1ses-419!2sar"
width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"
referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
<a href="https://mapa.buenosaires.gob.ar/comollego/?lat=-34.564499&lng=-58.468230&zl=15&modo=transporte&dir=Monroe+Av.+3555"
class="btn btn-primary btn-lg btn-block mt-4" target="_blank" rel="noopener noreferrer" tabindex="0">
Cómo llego
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<h2 class="sr-only">Navegación de pie de página</h2>
<div class="footer-info">
<div class="container">
<h3 class="footer-info-text">Texto del indicador</h3>
<div class="footer-info-actions">
<button class="btn btn-outline-secondary">Acción 1</button>
<button class="btn btn-outline-secondary">Acción 2</button>
</div>
</div>
</div>
<footer class="main-footer">
<div class="container">
<section>
<h3>Teléfonos útiles</h3>
<ul class="list-inline">
<li class="list-inline-item phone-items">
<a href="tel:102">102 - Niñez y Adolescencia</a>
</li>
<li class="list-inline-item phone-items">
<a href="tel:103">103 - Emergencias</a>
</li>
<li class="list-inline-item phone-items">
<a href="tel:107">107 - SAME</a>
</li>
<li class="list-inline-item phone-items">
<a href="tel:911">911 - Policía</a>
</li>
<li class="list-inline-item phone-items">
<a href="tel:144">144 - Violencia de género</a>
</li>
<li class="list-inline-item phone-items">
<a href="tel:147">147 - Atención ciudadana</a>
</li>
</ul>
<a href="https://buenosaires.gob.ar/inicio/telefonos">
Ver todos los teléfonos
</a>
</section>
<section>
<h3>Redes de la ciudad</h3>
<ul class="list-inline">
<li class="list-inline-item redes-items">
<a href="https://www.facebook.com/GCBA">
<i class="o-icon bx bxl-facebook-circle"></i>
Facebook
</a>
</li>
<li class="list-inline-item redes-items">
<a href="https://www.instagram.com/gcba/">
<i class="o-icon bx bxl-instagram-alt"></i>
Instagram
</a>
</li>
<li class="list-inline-item redes-items">
<a href="https://x.com/gcba">
<img src="../../assets/footer/rrss_x.svg" class="o-icon" alt="x" />
X
</a>
</li>
<li class="list-inline-item redes-items">
<a href="https://www.youtube.com/user/GCBA">
<i class="o-icon bx bxl-youtube"></i>
YouTube
</a>
</li>
<li class="list-inline-item redes-items">
<a href="https://ar.linkedin.com/company/gobierno-de-la-ciudad-de-buenos-aires">
<i class="o-icon bx bxl-linkedin-square"></i>
LinkedIn
</a>
</li>
<li class="list-inline-item redes-items">
<a href="https://www.tiktok.com/@buenosaires">
<i class="o-icon bx bxl-tiktok"></i>
TikTok
</a>
</li>
<li class="list-inline-item redes-items">
<a href="https://www.pinterest.es/buenosaires/">
<i class="o-icon bx bxl-pinterest"></i>
Pinterest
</a>
</li>
</ul>
</section>
</div>
<hr class="divider" />
<div class="container">
<section class="footer-legal-section">
<h3 class="sr-only">Información gubernamental</h3>
<div class="row align-items-center">
<div class="col-12 col-md-5 col-xl-4 footer-content-img">
<img class="d-md-none" src="../../assets/footer/logo-footer-mobile.svg"
alt="Logo de Ciudad de Buenos Aires" height="48" />
<img class="d-none d-md-inline" src="../../assets/footer/logo-footer.svg"
alt="Logo de Ciudad de Buenos Aires" height="40" />
<img class="img-vamos-ba" src="../../assets/footer/logo-footer-ba.svg" alt="Logo de Vamos Buenos Aires" />
</div>
<div class="col-12">
<ul class="list-inline">
<li class="list-inline-item">
<a href="https://boletinoficial.buenosaires.gob.ar">
Boletín oficial
</a>
</li>
<li class="list-inline-item">
<a href="https://buenosaires.gob.ar/inicio/terminos-y-condiciones">
Términos y condiciones
</a>
</li>
<li class="list-inline-item">
<a href="https://buenosaires.gob.ar/inicio/privacidad">
Política de privacidad
</a>
</li>
<li class="list-inline-item">
<a
href="https://buenosaires.gob.ar/jefedegobierno/legalytecnica/normativa/boletin-oficial-y-registro/oficios-judiciales">
Oficios judiciales
</a>
</li>
<li class="list-inline-item">
<a href="https://www.buenosaires.gob.ar/gobierno/transparencia">
Transparencia
</a>
</li>
</ul>
</div>
</div>
</section>
<section>
<div class="footer-license-text">
Los contenidos de buenosaires.gob.ar están licenciados bajo Creative
Commons Reconocimiento 2.5 Argentina License.
</div>
</section>
</div>
</footer>
</main>
<!-- OBELISCO SCCRIPTS -->
<!-- OBELISCO SCCRIPTS -->
</body>
</html>
