El color institucional es un elemento fundamental en la identidad visual de cualquier entidad, ya que refuerza el reconocimiento y coherencia en todas las plataformas. Para asegurar su correcta implementación en medios digitales, es crucial adaptar los tonos del color institucional a diferentes usos en la web, garantizando la legibilidad, accesibilidad y estética.
La paleta de colores institucionales ha sido cuidadosamente seleccionada para su óptimo rendimiento en pantallas, considerando su variación de tonos en situaciones específicas, como fondos, botones interactivos, enlaces y otros elementos de interfaz de usuario. Estas variaciones permiten mantener la identidad visual sin sacrificar la funcionalidad, asegurando una experiencia de usuario amigable y consistente en todos los dispositivos.
A continuación, te presentamos las diferentes opciones de colores y sus tonos adaptados para el uso en la web, respetando siempre la esencia del color institucional, pero optimizándolo para diversas aplicaciones digitales.
<ol className='olNum'>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ol>
<ol className='olLet'>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ol>
<ul className='ulMuni'>
<li>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fuga adipisci dolore rerum aperiam natus corporis ea veniam.</li>
<li>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fuga adipisci dolore rerum aperiam natus corporis ea veniam.</li>
</ul>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fuga adipisci dolore rerum aperiam natus corporis ea veniam.
<ol className='olNum'>
<li><strong>Item 1</strong>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fuga adipisci dolore rerum aperiam natus corporis ea veniam.</p>
</li>
<ol className='olLet'>
<li>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fuga adipisci dolore rerum aperiam natus corporis ea veniam.</li>
<ul className='ulMuni'>
<li>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fuga adipisci dolore rerum aperiam natus corporis ea veniam.
</li>
</ul>
</ol>
</ol>
El uso del logotipo institucional es clave para mantener una identidad visual coherente en todas las plataformas de comunicación. En este apartado, te mostramos diversas aplicaciones del logotipo municipal, adaptadas a diferentes formatos y tamaños, garantizando su correcta representación en medios impresos y digitales.
Utilizamos el formato SVG (Scalable Vector Graphics) por su capacidad de escalar sin perder calidad, lo que lo convierte en una opción ideal para pantallas de alta resolución, aplicaciones web responsivas y cualquier diseño que requiera flexibilidad. El SVG permite que los logotipos se mantengan nítidos y claros en todos los dispositivos, desde monitores hasta smartphones, sin aumentar innecesariamente el tamaño del archivo.
<nav class="navbar navbar-expand-lg bg-muni" data-bs-theme="dark">
<div class="container-fluid">
<a class="navbar-brand d-none d-md-block border-end border-3 border-light pe-3" href="#">
<img src="https://framework.laserena.cl/img/horizontal-blanco.svg" alt="Logo" />
</a>
<a class="navbar-brand d-md-none d-block border-end border-3 border-light pe-3" href="#">
<img src="https://framework.laserena.cl/img/escudo-blanco.svg" alt="Logo" />
</a>
<div class="flex-grow-1 text-light fw-bold lh-1">
<div class="" style={{ maxWidth: '200px' }}> {/* Ajusta el maxWidth según sea necesario */}
{/*nombre de la pagina*/}
</div>
</div>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navImls"
aria-controls="navImls"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navImls">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
<hr/>
<div class="row d-md-none d-block">
<div class="col-12 text-center align-self-center">
<div class="btn-group btn-group-sm" role="group">
<a href="https://www.facebook.com/Munilaserena/" target="_blank" class="btn">
<i class="bi bi-facebook tx-8 text-light">
</i>
</a>
<a href="https://www.instagram.com/muni_laserena" target="_blank" class="btn">
<i class="bi bi-instagram tx-8 text-light">
</i>
</a>
<a href="https://www.youtube.com/user/munilaserena" target="_blank" class="btn">
<i class="bi bi-youtube tx-8 text-light">
</i>
</a>
<a href="https://x.com/munilaserena" target="_blank" class="btn">
<i class="bi bi-twitter-x tx-8 text-light">
</i>
</a>
<a href="https://www.tiktok.com/@munilaserena" target="_blank" class="btn">
<i class="bi bi-tiktok text-light tx-8">
</i>
</a>
</div>
</div>
</div>
</ul>
</div>
</div>
</nav>
| Columna 1 | Columna 2 | Columna 3 | Columna 4 | Columna 5 | Columna 6 | Columna 7 | Columna 8 | Columna 9 | Columna 10 | Columna 11 | Columna 12 |
|---|---|---|---|---|---|---|---|---|---|---|---|
| Item1a | Item2a | Item3a | Item4a | Item5a | Item6a | Item7a | Item8a | Item9a | Item10a | Item11a | Item12a |
| Item1b | Item2b | Item3b | Item4b | Item5b | Item6b | Item7b | Item8b | Item9b | Item10b | Item11b | Item12b |
| Item1c | Item2c | Item3c | Item4c | Item5c | Item6c | Item7c | Item8c | Item9c | Item10c | Item11c | Item12c |
<table>
<thead>
<tr>
<th>Columna 1</th>
<th>Columna 2</th>
<th>Columna 3</th>
<th>Columna 4</th>
<th>Columna 5</th>
<th>Columna 6</th>
<th>Columna 7</th>
<th>Columna 8</th>
<th>Columna 9</th>
<th>Columna 10</th>
<th>Columna 11</th>
<th>Columna 12</th>
</tr>
</thead>
<tbody>
<tr>
<td data-cell="col-1">Item1a</td>
<td data-cell="col-2">Item2a</td>
<td data-cell="col-3">Item3a</td>
<td data-cell="col-4">Item4a</td>
<td data-cell="col-5">Item5a</td>
<td data-cell="col-6">Item6a</td>
<td data-cell="col-7">Item7a</td>
<td data-cell="col-8">Item8a</td>
<td data-cell="col-9">Item9a</td>
<td data-cell="col-10">Item10a</td>
<td data-cell="col-11">Item11a</td>
<td data-cell="col-12">Item12a</td>
</tr>
<tr>
<td data-cell="col-1">Item1b</td>
<td data-cell="col-2">Item2b</td>
<td data-cell="col-3">Item3b</td>
<td data-cell="col-4">Item4b</td>
<td data-cell="col-5">Item5b</td>
<td data-cell="col-6">Item6b</td>
<td data-cell="col-7">Item7b</td>
<td data-cell="col-8">Item8b</td>
<td data-cell="col-9">Item9b</td>
<td data-cell="col-10">Item10b</td>
<td data-cell="col-11">Item11b</td>
<td data-cell="col-12">Item12b</td>
</tr>
<tr>
<td data-cell="col-1">Item1c</td>
<td data-cell="col-2">Item2c</td>
<td data-cell="col-3">Item3c</td>
<td data-cell="col-4">Item4c</td>
<td data-cell="col-5">Item5c</td>
<td data-cell="col-6">Item6c</td>
<td data-cell="col-7">Item7c</td>
<td data-cell="col-8">Item8c</td>
<td data-cell="col-9">Item9c</td>
<td data-cell="col-10">Item10c</td>
<td data-cell="col-11">Item11c</td>
<td data-cell="col-12">Item12c</td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>
<div class="accordion" id="Acordeon_id">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse_id1" aria-expanded="true" aria-controls="collapse_id1">
Accordion Item #1
</button>
</h2>
<div id="collapse_id1" class="accordion-collapse collapse show" data-bs-parent="#Acordeon_id">
<div class="accordion-body">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores illum alias dicta quas explicabo fuga delectus ducimus voluptate. Commodi at error autem, maiores expedita modi aut incidunt unde quis dolores.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse_id2" aria-expanded="false" aria-controls="collapse_id2">
Accordion Item #2
</button>
</h2>
<div id="collapse_id2" class="accordion-collapse collapse" data-bs-parent="#Acordeon_id">
<div class="accordion-body">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores illum alias dicta quas explicabo fuga delectus ducimus voluptate. Commodi at error autem, maiores expedita modi aut incidunt unde quis dolores.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse_id3" aria-expanded="false" aria-controls="collapse_id3">
Accordion Item #3
</button>
</h2>
<div id="collapse_id3" class="accordion-collapse collapse" data-bs-parent="#Acordeon_id">
<div class="accordion-body">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores illum alias dicta quas explicabo fuga delectus ducimus voluptate. Commodi at error autem, maiores expedita modi aut incidunt unde quis dolores.
</div>
</div>
</div>
</div>
<nav class='bg-muni-b5 p-1'>
<div class="container-fluid">
<div class="row justify-content-between">
<div class="col-md col-12 align-self-center">
<div class="row">
<div class="col-md-auto d-none d-md-block g-0">
<div class="btn-outline-dark btn-sm d-flex align-items-center text-light text-start lh-1">
<div class="row align-items-center">
<div class="col-3"><img width={'30px'} src="https://framework.laserena.cl/img/logo-transparencia.png" alt="" /></div>
<div class="col-9 tx-1">Transparencia <br/>Municipal</div>
</div>
</div>
</div>
<div class="col-md-auto col-4 g-0">
<a href='https://www.portaltransparencia.cl/PortalPdT/web/guest/directorio-de-organismos-regulados?p_p_id=pdtorganismos_WAR_pdtorganismosportlet&orgcode=d67e38e61d6896e0e50080a9baaabf3f'
target='_blank'
class="btn btn-outline-dark btn-sm d-flex align-items-center text-light text-start lh-1">
<div class="row align-items-center">
<div class="col-3"><i class="bi bi-info-circle-fill tx-8"></i></div>
<div class="col-9 tx-2">Solicita <br/>Información</div>
</div>
</a>
</div>
<div class="col-md-auto col-4 g-0">
<a href='https://www.portaltransparencia.cl/PortalPdT/directorio-de-organismos-regulados/?org=MU126'
target='_blank'
class="btn btn-outline-dark btn-sm d-flex align-items-center text-light text-start lh-1">
<div class="row align-items-center">
<div class="col-3"><i class="bi bi-check2-square tx-8"></i></div>
<div class="col-9 tx-2">Transparencia <br/>Activa</div>
</div>
</a>
</div>
<div class="col-md-auto col-4 g-0">
<a href='https://www.leylobby.gob.cl/instituciones/MU126'
target='_blank'
class="btn btn-outline-dark btn-sm d-flex align-items-center text-light text-start lh-1">
<div class="row align-items-center">
<div class="col-3"><i class="bi bi-file-earmark-medical-fill tx-8"></i></div>
<div class="col-9 tx-2">Plataforma <br/>Ley del Lobby</div>
</div>
</a>
</div>
</div>
</div>
<div class="col-auto align-self-end d-none d-md-block">
<div class="btn-group btn-group-sm" role="group">
<a href="https://www.facebook.com/Munilaserena/" target="_blank" class="btn">
<i class="bi bi-facebook tx-8 text-light">
</i>
</a>
<a href="https://www.instagram.com/muni_laserena" target="_blank" class="btn">
<i class="bi bi-instagram tx-8 text-light">
</i>
</a>
<a href="https://www.youtube.com/user/munilaserena" target="_blank" class="btn">
<i class="bi bi-youtube tx-8 text-light">
</i>
</a>
<a href="https://x.com/munilaserena" target="_blank" class="btn">
<i class="bi bi-twitter-x tx-8 text-light">
</i>
</a>
<a href="https://www.tiktok.com/@munilaserena" target="_blank" class="btn">
<i class="bi bi-tiktok text-light tx-8">
</i>
</a>
</div>
</div>
</div>
</div>
</nav>
<footer class='bg-gris-90 pt-3 pb-3'>
<div class="container">
<div class="row align-items-center">
<div class="col-md d-none d-md-block order-2 order-md-1 mb-2">
<div class="text-light tx-2">
<ul>
<li>
<a
target='_blank'
class='text-light text-decoration-none'
href="https://www.portaltransparencia.cl/PortalPdT/directorio-de-organismos-regulados/?org=MU126">
Transparencia Activa | Ley de Transparencia
</a>
</li>
<li>
<a
target='_blank'
class='text-light text-decoration-none'
href="https://www.portaltransparencia.cl/PortalPdT/web/guest/directorio-de-organismos-regulados?p_p_id=pdtorganismos_WAR_pdtorganismosportlet&orgcode=d67e38e61d6896e0e50080a9baaabf3f">
Solicitar Información | Ley de Transparencia
</a>
</li>
<li>
<a
target='_blank'
class=' text-light text-decoration-none'
href="https://www.leylobby.gob.cl/instituciones/MU126">
Plataforma Ley del Lobby
</a>
</li>
</ul>
</div>
</div>
<div class="col-md-4 ms-auto col-12 order-1 order-md-2 mb-2">
<div class="text-light text-md-end text-center lh-1">
<div class='mb-2'><img src="https://framework.laserena.cl/img/horizontal-blanco.svg" alt="" /></div>
<div><strong>Ilustre Municipalidad de La Serena</strong></div>
<div>Arturo Prat #451 </div>
<div>(56) 51 - 2 206600</div>
</div>
</div>
</div>
</div>
</footer>