Salta el contingut

Enunciat

SASS

Exercici 1 (1,5p)

Fes un arxiu en SASS que genere una eixida en CSS com aquesta.

CSS
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
.button-generic {
  padding: 10px 20px;
  font-size: 16px;
  border-radius: 5px;
  background-color: #2980b9;
  color: #ffffff;
  text-decoration: none; }

.button-segon {
  padding: 10px 20px;
  font-size: 16px;
  border-radius: 5px;
  background-color: #2980b9;
  color: #ffffff;
  text-decoration: none;
  background-color: #e74c3c; }

.button-tercer {
  padding: 10px 20px;
  font-size: 16px;
  border-radius: 5px;
  background-color: #2980b9;
  color: #ffffff;
  text-decoration: none;
  background-color: #060533; }

Requisits

Fes-ho indicant els colors com a variables i utilitzant un mixin

Exercici 2 (1,5p)

Completa aquest codi en SASS

Sass
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
$estils: principal, secundari, perill, avis, info, alerta;
$blanc: #ffffff;
$negre: #000000;

@mixin estil-botons {
    padding: 10px 20px;
    font-size: 16px;
    border-radius: 5px;
    color: $blanc;
    text-decoration: none;
  }

per a que genere un codi en CSS com aquest...

CSS
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
.button-principal {
  padding: 10px 20px;
  font-size: 16px;
  border-radius: 5px;
  color: #ffffff;
  text-decoration: none; }

.button-secundari {
  padding: 10px 20px;
  font-size: 16px;
  border-radius: 5px;
  color: #ffffff;
  text-decoration: none; }

.button-perill {
  padding: 10px 20px;
  font-size: 16px;
  border-radius: 5px;
  color: #ffffff;
  text-decoration: none; }

.button-avis {
  padding: 10px 20px;
  font-size: 16px;
  border-radius: 5px;
  color: #ffffff;
  text-decoration: none; }

.button-info {
  padding: 10px 20px;
  font-size: 16px;
  border-radius: 5px;
  color: #ffffff;
  text-decoration: none; }

.button-alerta {
  padding: 10px 20px;
  font-size: 16px;
  border-radius: 5px;
  color: #ffffff;
  text-decoration: none; }

Requisits

Cal utilitzar un each

Bootstrap

Exercici 3 (4p)

Fes una web en Boostrap que tinga una aparença el més similar possible a aquesta.

Pantalles grans

web

Pantalles menudes

web

Consells

En la web que es veu a l'enunciat s'han utilitzat cards. Pots utilitzar altres estructures sempre i quan l'aparença siga semblant.

Descarrega les imatges

Exercici 4 (3p)

Modifica la web anterior afegint funcionalitats de Bootstrap com accordions, carousels, botons, modificar el menú, etc.