Principal

Per montar aquesta pàgina anem a anar per parts: capçalera, primers paràgrafs amb fotos, part amb el color més obscur i amb vídeo, i finalment, peu de pàgina.

Primer que tot, dins del body crea una taula amb una fila i 4 columnes.

En la primera columna (td) posa la imatge del logo del ODS que has trobat amb una altura de 140.

Les altres columnes, que seran els enllaços han de tindre un enllaç (a) i dins un paràgraf (p):

<td>

<a href="#"><p>Datos destacables</p></a>

</td>

El nom de les 3 columnes seran: Datos destacables, Metas del ODS-16 (o el número que tingues) i Enlaces.

Primer que tot, a la taula (crea un identificador), li hauràs de posar el color de fons del logo del ODS que has triat:

Si te fixes, no ocupa tota la pantalla, dis-li a la taula que ocupe el 100% de l'amplada.

A l'etiqueta body (que és tota la web) llévali el marge que té i posa'l a 0;

A les 4 columnes (utilitza una classe) li hauràs de posar amplada 25% perquè ocupen les 4 el mateix espai. A més, text alineat al centre.

Després, als enllaços (utilitza una classe), lléva-li el subratllat i el color de la lletra blanc.

Per últim, afegeix als paràgrafs (utilitza una classe) un borde amb un color més clar que el fons, posa el text en majúscules (text-transform: uppercase), posa un borde redondejat i a més un encoixament (padding) perquè el borde no es veja tant junt del text, per exemple, de 30px. A més, fes que l'amplada del text vaja al màxim contingut i li posarem margin automàtic als costats perquè es pose centrat.

També, per fer que al passar el cursor sobre els textos es canvie de color has de crear dins l'etiqueta style la mateixa classe seguida de :hover. Per exemple, si has utilitzat la classe hola ara posaràs hola:hover { }. Dins d'aquest posaràs de color de fons el mateix color de borde que havies posat abans i el color de la lletra negra o blanc, depenent de com es llig millor.

Afegeix una altra taula amb una fila i 2 columnes. Dins de la primera columna afegeix tots els paràgrafs que trobes d'informació de l'ODS i a la columna de la dreta, afegeix 2 imatges que trobes sobre el teu ODS.

Igual que abans anem a posar que la taula ocupe el 100% de l'amplada.

A més, al body canvia el color de fons per un to més clar del color que té el teu ODS, pots triar el que havies posat en el borde abans.

Ara anem a fer que el primer td ocupe un 80% i l'altre un 20%, ja que volem que les fotos estiguen a un costat.

Després, afegeix un encoixament (padding) a la primera columna de 20px dalt i baix i 60px als costats. La columna de les fotos tindrà un encoixament de 20px.

Per últim, a les fotos dis-li que tinguen una amplada del 100% perquè ocupen tot el que puguen dins la columna.

Afegeix una taula amb una fila i una columna. Afegeix un títol h2 amb Respuestas al COVID-19, després afegeix tots els paràgrafs que trobes i afegeix el vídeo de Youtube:

El codi que copiaràs estarà entre una etiqueta iframe, el que has de fer és posar-la dins d'una etiqueta div.

<div>

<iframe>.......</iframe>

</div>

Ara anem a pels estils. A la taula li has de posar una amplada de 90% i a més un marge de 0 dalt i baix i automàtic als costats per centrar-ho.

La columna (td) tindrà un encoixament (padding) de 20px dalt i baix i 60 als costats i li posaràs un color de fons un poc més obscur que el de dalt.

Per últim, el div que té el vídeo haurà de tindre un alineat del text al centre perquè el vídeo es veja en mig.

Crea una taula amb una fila i una columna. Dins crea un paràgraf amb el teu nom, curs i grup i el nom del centre.

Fes que la taula tinga una amplada del 100%.

Ara al paràgraf li has de fer el següent:

• Posar-li el color de lletra que té el logo de fons

• Posar-lo en negreta

• Un tamany de lletra del 150%

• Alinear-lo al centre

• Posar-li un marge superior i inferior perquè quede separat (uns 30 px)

• Posar-li una vora només a la part superior amb el color de la lletra

• Un encoixament (padding) superior perquè no es veja la vora just damunt del text