Com es posicionen les columnes
El sistema de columnes s'ha creat utilitzant CSS Grid Layout, una tecnologia moderna que permet crear dissenys bidimensionals.
.content {
display: grid;
grid-template-columns: 1fr 1fr; /* Dues columnes d'amplada igual */
gap: 30px; /* Espai entre columnes */
}
La propietat grid-template-columns defineix les columnes. La unitat fr representa una fracció de l'espai disponible.
Vantatges de CSS Grid:
- Control bidimensional (files i columnes)
- Alineació precisa dels elements
- Responsiu amb menys codi
- Cap dependència de frameworks externs
Com s'estructura la taula
La taula de comparació està dissenyada per ser llegible i visualment atractiva, amb estils que milloren l'experiència d'usuari.
.comparison-table {
width: 100%;
border-collapse: collapse; /* Elimina espais entre vores */
}
/* Estils per a cel·les */
.comparison-table th, .comparison-table td {
padding: 12px 15px;
text-align: left;
border-bottom: 1px solid #ddd; /* Vora inferior */
}
/* Efecte hover a les files */
.comparison-table tr:hover {
background-color: #f5f5f5;
}
Detalls addicionals del disseny
Colors i temática
S'ha utilitzat una paleta de blaus com a color principal, amb accents en verd per a la conclusió. Això crea una identitat visual coherent.
Responsivitat
La pàgina s'adapta a diferents mides de pantalla mitjançant consultes multimèdia (media queries):
@media (max-width: 768px) {
.content {
grid-template-columns: 1fr;
}
}
Jerarquia visual
S'han utilitzat espais, mides de font i colors per crear una clara jerarquia visual que guia l'usuari a través del contingut.
Principis de disseny aplicats
| Principi | Com s'ha aplicat | Effecte |
|---|---|---|
| Contrast | Colors foscs sobre fons clars | Millora la llegibilitat |
| Proximitat | Elements relacionats estan propers | Guia visualment l'usuari |
| Alineació | Tots els elements esten alineats | Crea ordre i cohesió |
| Repetició | Patrons de colors i estils | Reforça la identitat visual |
