Exercicis Model Caixa**

Cada exercici utilitza el mateix HTML base, així poden modificar només el CSS per a cada activitat.

HTML BASE PER A TOTS ELS EXERCICIS 

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <title>Exercicis Model Caixa</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

    <h1>Exercicis Model Caixa</h1>

    <div id="ex1" class="caixa">Exercici 1</div>
    <div id="ex2" class="caixa">Exercici 2</div>
    <div id="ex3" class="caixa">Exercici 3</div>
    <div id="ex4" class="caixa">Exercici 4</div>
    <div id="ex5" class="caixa">Exercici 5</div>
    <div id="ex6" class="caixa">Exercici 6</div>
    <div id="ex7" class="caixa">Exercici 7</div>

    <div id="ex8a" class="caixa">A</div>
    <div id="ex8b" class="caixa">B</div>
    <div id="ex8c" class="caixa">C</div>

    <div class="targeta" id="ex9">
        <img src="foto.jpg" alt="Perfil">
        <h2>Nom d’Exemple</h2>
        <p>Descripció breu.</p>
        <button>Botó</button>
    </div>

    <header id="ex10-header">Capçalera</header>
    <section id="ex10-content">
        <div class="targeta"></div>
        <div class="targeta"></div>
        <div class="targeta"></div>
    </section>
    <footer id="ex10-footer">Peu de pàgina</footer>

</body>
</html>


.caixa {
    width: 150px;
    height: 150px;
    background: lightgray;
    margin: 10px;
    padding: 10px;
    display: inline-block;
}

.targeta {
    width: 250px;
    margin: 20px;
    padding: 20px;
    background: #fff;
}

#ex10-header, #ex10-footer {
    margin: 20px 0;
    padding: 20px;
    background: #eee;
}

INSTRUCCIONS PER ALS EXERCICIS

# —

Exercici 1: Amplada i Altura (width i height)

Treballa sobre l’element #ex1.

  1. Dóna-li una amplada de 200px i una altura de 100px.
  2. Modifica l’amplada i posa-la al 50%.
  3. Modifica l’altura i posa-la a 50vh.
  4. Posa l’amplada a auto.

Exercici 2: Marge extern (margin)

Treballa sobre #ex2.

  1. Dóna-li una mida de 150×150px.
  2. Aplica un marge superior de 20px i un marge dret de 50px.
  3. Reemplaça-ho per la forma abreujada: margin: 20px 50px 0 0;.
  4. Substituïx-ho per margin: 10px;.

Exercici 3: Emplenament (padding)

Treballa sobre #ex3.

  1. Dóna-li un fons taronja.
  2. Afig un padding de 20px general.
  3. Modifica només un costat (per exemple, padding-left).
  4. Afig box-sizing: border-box;.

Exercici 4: Vora (border)

Treballa sobre #ex4.

  1. Crea una caixa de 150×150px amb fons rosa.
  2. Aplica una vora sòlida, negra, de 5px.
  3. Canvia l’estil de la vora a dashed, dotted i double.
  4. Afig border-color: transparent.

Exercici 5: Arrodoniment de vora (border-radius)

Treballa sobre #ex5.

  1. Dóna-li fons morat i una mida de 150×150px.
  2. Aplica border-radius: 15px;.
  3. Modifica el valor a 50%.
  4. Ajusta amplada i altura perquè siga un cercle perfecte.

Exercici 6: Ombratge (box-shadow)

Treballa sobre #ex6.

  1. Aplica una ombra amb 10px 10px 20px rgba(0,0,0,0.25).
  2. Substituïx-la per 0 0 10px black.
  3. Torna a l’ombra inicial i afig inset.

Exercici 7: Posició (position)

Treballa sobre #ex7.

  1. Aplica position: relative; i mou-lo amb top: 50px; left: 30px;.
  2. Substituïx relative per absolute.
  3. Substituïx-ho per fixed i col·loca’l a dalt de tot de la pàgina.

Exercici 8: Disseny complet amb diverses caixes

Treballa sobre #ex8a, #ex8b, #ex8c.

  1. Dona a cada caixa una mida diferent.
  2. Aplica colors de fons diferents.
  3. Aplica marges i padding diferents.
  4. Afig border, border-radius i box-shadow a cada una.
  5. Modifica la posició d’una d’elles (position, top, left…).

Exercici 9: Targeta d’informació

Treballa sobre #ex9.

  1. Estilitza la targeta amb padding, border-radius i box-shadow.
  2. Converteix la imatge en un cercle (border-radius: 50%).
  3. Dóna estils diferents al botó (color, padding, borde, border-radius).
  4. Centra el contingut de la targeta.

Exercici 10: Pàgina completa

Treballa sobre:

  • #ex10-header
  • #ex10-content
  • #ex10-footer
  • .targeta dins del contenidor

Passos:

  1. Dona estil al header (color, padding, border-radius).
  2. Aplica un layout amb espai entre targetes (gap).
  3. Dóna estil a cada targeta amb padding, border-radius i box-shadow.
  4. Dona estil al footer amb un fons diferent i padding.