Estil Corporatiu CSS – Araceli Saldaña

🎨 Desenvolupament Web · HTML5 + CSS3

Estil Corporatiu CSS

Institut Castellbisbal · Curs 2025–2026 · CFGM Sistemes Microinformàtics i Xarxes

📋 Introducció

Context del projecte — LAN Party 2026

La identitat visual és un element fonamental en qualsevol aplicació web moderna, ja que influeix directament en l’experiència d’usuari, la llegibilitat i la percepció del producte digital.

En aquest projecte s’ha desenvolupat un estil corporatiu per a la plataforma LAN Party 2026, orientada a un públic de jugadors i competicions de videojocs. El projecte s’ha construït utilitzant HTML5 per a l’estructura del contingut i CSS3 extern per a la presentació visual, seguint la separació de contingut i disseny.

🎯 Objectius i Tecnologies

🎯 Objectiu del projecte

Interfície gaming amb identitat visual coherent

Visualment atractiva i alineada amb l’estètica eSports
Fàcil de llegir amb contrast elevat i jerarquia visual
Responsive — adaptable a ordinador, tauleta i mòbil
Coherent amb el tema LAN Party / gaming

⚙️ Tecnologies

Stack utilitzat

HTML5 (estructura)
CSS3 extern (disseny)
Chrome / Edge (tests)
Notepad (editor de codi)

📁 Estructura del projecte

Fitxers principals

El projecte està format per dos fitxers independents que separen el contingut de la presentació:

📄

index.html

Estructura semàntica
header · section · footer

🎨

style.css

Full d’estils extern
colors · tipografia · layout

💻 Implementació tècnica

📄 Estructura HTML — Fragment

Estructura semàntica amb etiquetes HTML5 estàndard:

<!-- Estructura semàntica HTML5 -->
<header>
  <h1>LAN Party 2026</h1>
</header>

<section>
  <h2>Informació de l'esdeveniment</h2>
  <p>Competicions, activitats i tornejos gaming.</p>
</section>

<footer>
  <p>Araceli Saldaña - 2026</p>
</footer>

<!-- Enllaç al full d'estils extern -->
<link rel="stylesheet" href="style.css">

🎨 Full d’estils CSS — Fragment

Estil corporatiu gaming amb fons fosc, tipografia clara i efectes interactius:

/* ══ Cos general ══ */
body {
  background-color: #111827;
  color: white;
  font-family: Arial, sans-serif;
}

/* ══ Capçalera ══ */
header {
  text-align: center;
  color: #00e5ff;
}

/* ══ Seccions ══ */
section {
  padding: 20px;
  background-color: #1f2937;
}

/* ══ Efecte hover botó ══ */
button:hover {
  background-color: #ff00ff;
  transition: 0.3s;
}

🎨 Justificació del disseny

🖌️ Identitat de marca — Paleta de colors

// base

#0d2018

Fons fosc principal

// dark

#1a3a28

Capes secundàries

// mid

#2d7a4f

Accents i cards

// primary

#4aad6f

Color corporatiu principal

// light

#90d9b0

Funcions i subtítols

// pale

#eaf3ec

Fons cards i pills

fosc clar

✅ Usabilitat

Prioritats de disseny

Contrast elevat
Lectura clara
Jerarquia visual
Navegació intuïtiva

📱 Disseny responsive

Adaptació a dispositius

🖥️ Ordinador de sobretaula
💻 Portàtil
📱 Tauleta
📲 Mòbil

🕹️ Identitat Gaming

Inspiració visual

Estètica eSports
Colors neó sobre fons fosc
Transmissió de modernitat
Ambient gaming immersiu

⚙️ Procés de desenvolupament

Passos seguits per crear el projecte

Creació de la carpeta del projecte Estil_Corporatiu/

Creació del fitxer index.html amb l’estructura semàntica HTML5

Creació del fitxer style.css amb tots els estils visuals

Enllaç del CSS dins l’HTML amb l’etiqueta: <link rel="stylesheet" href="style.css">

Prova del projecte obrint index.html al navegador (Chrome / Edge)

Ajustos visuals i millores de disseny fins assolir la identitat gaming desitjada

📸 Evidències documentades

Evidència 1 – Fitxers creats a l'ordinador

📁 Evidència 1 — Fitxers del projecte creats dins de l’ordinador Estructura del projecte

📄 Evidència 2 — Fitxer HTML amb estructura semàntica (header, section, footer) index.html

🎨 Evidència 3 — Fitxer style.css amb els estils corporatiu gaming aplicats style.css

✅ Conclusions

Resultat del repte — Estil Corporatiu CSS

Separació contingut / presentació: Implementació correcta de HTML5 + CSS3 extern en fitxers independents.
Identitat visual gaming: L’estil corporatiu reforça la identitat de la LAN Party amb estètica moderna i coherent.
Disseny responsive: La pàgina s’adapta a ordinador, portàtil, tauleta i mòbil sense pèrdua de qualitat visual.
Efectes visuals: L’ús d’efectes hover i transicions CSS millora significativament l’experiència d’usuari.
Objectius assolits: Disseny corporatiu coherent · Estructura HTML semàntica · Estils CSS externs · Adaptabilitat a dispositius.

📊 Resum del projecte

Fitxers principals

Colors corporatius

Dispositius compatibles

Evidències documentades