Scribd
Cargar
14 vistas3 páginas

Servicios de Consultoría y Diseño

Examen

Cargado por

Posadas Reyes Ivan
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd

Temas abordados

  • navegación,
  • elementos de la cuadrícula,
  • funcionalidad,
  • diseño de proyectos,
  • diseño web,
  • cuadrícula,
  • creatividad,
  • diseño gráfico,
  • experiencia del usuario,
  • contenedor
14 vistas3 páginas

Servicios de Consultoría y Diseño

Examen

Cargado por

Posadas Reyes Ivan
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd

Temas abordados

  • navegación,
  • elementos de la cuadrícula,
  • funcionalidad,
  • diseño de proyectos,
  • diseño web,
  • cuadrícula,
  • creatividad,
  • diseño gráfico,
  • experiencia del usuario,
  • contenedor

<main>

<p>Ivan Posadas Reyes</p>


<label for=”services”>Servicios:</label>
<select id=”services”>
<option value=”consultoria”>Consultoría General</option>
<option value=”construccion”>Construcción</option>
<option value=”asesoria”>Asesoría Técnica</option>
<option value=”diseno”>Diseño de Proyectos</option>
</select>

<!-- Contenedor para las imágenes y botones -->


<div class=”grid-container”>
<!-- Primera fila -->
<div class=”grid-item”>
<img src=”ruta-de-la-imagen1.jpg” alt=”Descripción de la Imagen 1”>
<button>Botón 1</button>
</div>
<div class=”grid-item”>
<img src=”ruta-de-la-imagen2.jpg” alt=”Descripción de la Imagen 2”>
<button>Botón 2</button>
</div>
<div class=”grid-item”>
<img src=”ruta-de-la-imagen3.jpg” alt=”Descripción de la Imagen 3”>
<button>Botón 3</button>
</div>
<div class=”grid-item”>
<img src=”ruta-de-la-imagen4.jpg” alt=”Descripción de la Imagen 4”>
<button>Botón 4</button>
</div>

<!-- Segunda fila -->


<div class=”grid-item”>
<img src=”ruta-de-la-imagen5.jpg” alt=”Descripción de la Imagen 5”>
<button>Botón 5</button>
</div>
<div class=”grid-item”>
<img src=”ruta-de-la-imagen6.jpg” alt=”Descripción de la Imagen 6”>
<button>Botón 6</button>
</div>
<div class=”grid-item”>
<img src=”ruta-de-la-imagen7.jpg” alt=”Descripción de la Imagen 7”>
<button>Botón 7</button>
</div>
<div class=”grid-item”>
<img src=”ruta-de-la-imagen8.jpg” alt=”Descripción de la Imagen 8”>
<button>Botón 8</button>
</div>
</div>
</main>

/* Estilos para la cuadrícula */


.grid-container {
display: grid;
grid-template-columns: repeat(4, 1fr); /* 4 columnas en la cuadrícula */
gap: 20px; /* Espacio entre elementos */
margin-top: 20px;
}

/* Estilos para cada elemento de la cuadrícula */


.grid-item {
text-align: center;
}
/* Estilos para las imágenes */
.grid-item img {
width: 100px; /* Ajusta el tamaño de la imagen */
height: 100px;
object-fit: cover;
}

/* Estilos para los botones */


.grid-item button {
margin-top: 10px;
padding: 5px 10px;
font-size: 14px;
cursor: pointer;
}

También podría gustarte