Maquetatge de Header (menu navegació) i Footer (dades de contacte)

by
Barra Superior d'Utilitats (Top Bar)

  • Descripció: Situada a la part més alta amb el fons blau fosc corporatiu de la Generalitat.

  • Maquetatge: Utilitza un contenidor flexible (display: flex; justify-content: space-between;) on s’alinea a l’esquerra la identitat del Departamento de Educación i a la dreta els components actius del selector d’idioma (“Catalán”) i el botó de cerca ràpida.

  • Descripció: És el nucli de la capçalera on es presenta el nom del centre i les seves dades bàsiques per evitar que l’usuari hagi de fer scroll fins al Footer per trobar-les.

  • Maquetatge: Es divideix en dues columnes principals mitjançant Flexbox:

    • Columna Esquerra (Brand): Agrupa l’isotip (icona de l’institut) amb un fons arrodonit foscat, el títol principal en configuració H1 (“Instituto Castellbisbal”) i l’eslògan descriptiu en un paràgraf inferior.

    • Columna Dreta (Contact Info): Un bloc d’adreces vertical (<address>) que utilitza iconografia lineal per separar l’adreça física, el correu de la xarxa XTEC i el telèfon, fixant la tipografia en un gris fosc per a una lectura clara.

  • Descripció: Un sistema de 5 targetes d’acció ràpida que enllacen a les plataformes del dia a dia del centre (Moodle, Plataformas, Documentos, Avisos, Vida Social).

  • Maquetatge: Cada botó s’ha programat com un element independent amb la seva pròpia variable de color en CSS (background-color específic per a cadascun) per diferenciar clarament les àrees. S’ha aplicat un border-radius: 16px a les cantonades i una disposició en línia per garantir un format de botó tàctil i fàcil de prémer en dispositius mòbils.

  • Descripció: S’ha optat per un estil modern de botons tipus “càpsula” o píndola en lloc de text simple.

  • Maquetatge: Els elements del menú (“Instituto”, “Estudios”, “Vida Escolar”, “Preinscripció”, “Contacto”) estan maquetats com una llista on cada ítem té un fons gris molt suau, lletra fosca i cantonades totalment arrodonides (border-radius: 50px).

  • Botó CTA (Call to Action): El menú finalitza amb el botó destacat de “Preinscripció”, maquetat amb el color blau primari i lletra blanca per cridar l’atenció de l’usuari cap al tràmit administratiu més important de l’any.

Leave a Comment