El resultat \u00e9s un arxiu HTML que quan el miro en el navegador sembla m\u00e9s un Word que una web.<\/p>\n\n\n\n Recorda que \u00e9s important etiquetar el text de manera sem\u00e0ntica. A vegades, el que veig visualment m’enganya. Per exemple, en el disseny veig aquests t\u00edtols:<\/p>\n\n\n\n Podria pensar que \u00abSell your products\u00bb \u00e9s el t\u00edtol. Aleshores qu\u00e8 \u00e9s \u00abStart your Business\u00bb? JPenso que el t\u00edtol \u00e9s, en realitat: \u00abStart your Business: Sell your produts\u00bb. Aix\u00f2 significa que l’h2 engloba les dues frases i que entre les dues ha d’haver-hi dos punts que haur\u00e9 d’afegir a l’HTML. Ser\u00e0 feina del CSS amagar-los.<\/p>\n\n\n\n Tamb\u00e9 pot passar que consideri que l’h1 \u00e9s el t\u00edtol m\u00e9s gran, per\u00f2 tractant-se d’una p\u00e0gina \u00fanica sobre l’aplicaci\u00f3 \u00abm-app\u00bb, tinc clar que l’h1 \u00e9s en realitat el logo de la cap\u00e7alera i que la primera secci\u00f3 \u00e9s igual d’important que la resta. Per aix\u00f2 he etiquetat el logo com un \u00abh1\u00bb i el t\u00edtol de la primera secci\u00f3 com un \u00abh2\u00bb.<\/p>\n\n\n\n El seg\u00fcent pas \u00e9s mirar el disseny i veure quines agrupacions hi ha. Hi ha contingut agrupat en columnes? Aquestes columnes formen files? Hi ha conjunts de t\u00edtols i text que formen entradetes? <\/p>\n\n\n\n En aquest punt, afegeixo etiquetes d’html per crear aquestes divisions. S\u00f3n divisions no sem\u00e0ntiques i, per tant, puc fer servir etiquetes sense contingut sem\u00e0ntic com \u00abdiv\u00bb, \u00abspan\u00bb, \u00abb\u00bb o \u00abi\u00bb.<\/p>\n\n\n\n Un cop aplicades les etiquetes, afegeixo classes als elements, pensant ja en el servei que faran aquestes classes a l’hora d’aplicar CSS. <\/p>\n\n\n\n Exercici<\/p>\n\n\n\n Afegeix a l’HTML les etiquetes que et permetran agrupar continguts fent servir div i span. Opcionalment pots fer servir altres etiquetes no sem\u00e0ntiques com b o i o sem\u00e0ntiques com strong i em.<\/p>\n\n\n\n Afegeix les seg\u00fcents classes<\/p>\n\n\n\n Mirant el disseny veig que el contingut no ocupa el 100% de l’amplada. Sense parlar amb qui ha fet el disseny puc dedu\u00efr que el contingut s\u00ed va de banda a banda per\u00f2 que t\u00e9 un padding als laterals for\u00e7a gran (uns 60px); o puc dedu\u00efr que el contingut t\u00e9 una amplada m\u00e0xima que no creixer\u00e0 a pantalles grans. He obtat per aplicar la segona opci\u00f3.<\/p>\n\n\n\n Mirant el disseny tamb\u00e9 veig que algunes franges (hero, cta, footer) tenen un color de fons que s\u00ed va de banda a banda. Per tant, dedueixo que les seccions ocupen el 100%, per\u00f2 que cal agrupar tot el seu contingut en un element que els faci de contenidor, un div. Per aix\u00f2 afegeixo divisions (\u00abdiv\u00bb) amb la classe \u00abcontingut\u00bb.<\/p>\n\n\n\n Com pots veure a la imatge, tamb\u00e9 he agrupat el conjunt de icona, text i descripci\u00f3 de les propietats del producte en uns divs. A cadascun d’aquests divs els he donat dues classes<\/p>\n\n\n\n Mirant el disseny veig que el contingut no ocupa el 100% de l’amplada. Sense parlar amb qui ha fet el disseny puc dedu\u00efr que el contingut s\u00ed va de banda a banda per\u00f2 que t\u00e9 un padding als laterals for\u00e7a gran (uns 60px); o puc dedu\u00efr que el contingut t\u00e9 una amplada m\u00e0xima que no creixer\u00e0 a pantalles grans. Jo he obtat per la segona opci\u00f3.<\/p>\n\n\n\n Mirant el disseny tamb\u00e9 veig que algunes franges (hero, cta, footer) tenen un color de fons que s\u00ed va de banda a banda. Per tant, dedueixo que les seccions ocupen el 100%, per\u00f2 que cal agrupar tot el seu contingut en un element que els faci de contenidor, un div. Per aix\u00f2 afegeixo divisions (\u00abdiv\u00bb) amb la classe \u00abcontenidor\u00bb.<\/p>\n\n\n\n A l’hora d’aplicar estils, m’agrada:<\/p>\n\n\n\n El m\u00e9s gen\u00e8ric \u00e9s tot all\u00f2 referent a tipografies. En aquest punt afegeixo les regles per estilar de manera gen\u00e8rica les principals etiquetes: h1, h2, h3, p,..<\/p>\n\n\n\n IMPORTANT: El disseny est\u00e0 presentat per a pantalles grans. Potser aquestes mides les haurem de definir m\u00e9s petites i posar les mides del disseny a media queries per a que nom\u00e9s s’apliquin a pantalles grans.<\/p>\n\n\n\n He estilat els textos amb l’etiqueta h1, tot i que a aquesta p\u00e0gina no tenim cap text amb aquesta etiqueta. Ho he fet perqu\u00e8 \u00e9s provable que fem una una segona p\u00e0gina (per exemple l’av\u00eds legal o una p\u00e0gina de contacte) i aquesta s\u00ed que tindria el t\u00edtol amb l’etiqueta h1, que seria com l’h2 del hero d’aquesta p\u00e0gina<\/p>\n\n\n\n Seguidament estilo enlla\u00e7os i botons. En el disseny no hi ha cap enlla\u00e7 en el text. Si no tinc la possibilitat de parlar amb qui ho ha dissenyat, els haur\u00e9 de fer com jo consideri. S\u00ed que hi ha uns botons de color taronja amb forma de pildora, als que ja he posat la classe \u00abbotonet\u00bb.<\/p>\n\n\n\n A continuaci\u00f3 segueixo amb elements que seran iguals quan es vegin en una pantalla petita o una pantalla gran, com les icones de les caracter\u00edstiques (divs amb la classe \u00abcaracteristica\u00bb). Qu\u00e8 tenen en com\u00fa totes les caracter\u00edstiques?<\/p>\n\n\n\n Pts veure aqu\u00ed com poso les imatges de fons d’aquestes seccions<\/a> amb m\u00e9s detall<\/p>\n\n\n\n Els continguts, com ja he comentat, estan encaixats en un contenidor que evita que vagin de banda a banda. <\/p>\n\n\n\n He afegit padding al contenidor per garantir que quan ocupi el 100% de l’amplada deixi un petit espai al voltant del contingut. En realitat, el contingut del contenidor mai ocupar\u00e0 els 1140px, perqu\u00e8 hi ha un padding de 20px a cada costat (\u00e9s a dir: el contingut ocupar\u00e0 1100px com a molt)<\/p>\n\n\n\n A la cap\u00e7alera tenim el logo a l’esquerra i un bot\u00f3 a la dreta. Caldr\u00e0 posar cada cosa en una mateixa l\u00ednia i cada element a una punta.<\/p>\n\n\n\n Un dels elements que \u00e9s repeteix al llarg del disseny \u00e9s el conjunt de t\u00edtols de secci\u00f3 (h2) i un par\u00e0graf amb el text lleugerament m\u00e9s gran que altres par\u00e0grafs. Aquests conjunts els he fet fent servir l’etiqueta div, sense valor sem\u00e0ntic, tot i que no seria incorrecte fer servir l’etiqueta \u00abheader\u00bb, per indicar que \u00e9s la cap\u00e7alera de la secci\u00f3.<\/p>\n\n\n\n Com que totes aquestes entradetes tenen la mateixa aparen\u00e7a, he afegit la classe \u00abentradeta\u00bb<\/p>\n\n\n\n Qu\u00e8 tenen en com\u00fa totes les entradetes? S\u00f3n totes iguals?<\/p>\n\n\n\n Per tant, podem aplicar a totes una mateixa classe (\u00abentradeta\u00bb) i afegeixo una segona classe (\u00abesquerra\u00bb) a les entradetes aliniades a l’esquerra. Tamb\u00e9 ho podria fer al rev\u00e9s (posar una segona classe a les entradetes aliniades al centre i no a l’entradeta aliniada a l’esquerra).<\/p>\n\n\n\n En realitat, la classe \u00abesquerra\u00bb em servir\u00e0 per a qualsevol element on vulgui for\u00e7ar el text alineat a l’esquerra. Recorda que \u00e9s important crear classes que no siguin molt espec\u00edficiques, per a que siguin reutilitzables.<\/p>\n\n\n\n Mirant, per\u00f2, el disseny i pensant com ho voldria veure a un m\u00f2bil, penso que les entradetes esquerra s’haurien de veure als m\u00f2bils tamb\u00e9 alineades al centre. Per tant, l’alineaci\u00f3 a l’esquerra nom\u00e9s s’haur\u00e0 de produ\u00efr a pantalles grans.<\/p>\n\n\n\n A la secci\u00f3 dels testimonis hi ha una franja, despr\u00e9s de la entradeta, amb 3 columnes. Aquestes 3 columnes nom\u00e9s es veuran a pantalles grans, a les pantalles petites es veuran una sota de l’altra. <\/p>\n\n\n\n Cadascun dels testimonis es visualitza com una targeta, amb un fil al voltant i cantos arrodonits. Dins de cada targeta, alguns elements tenen estils molt espec\u00edfics, que no trobem enlloc m\u00e9s a la p\u00e0gina.<\/p>\n\n\n\n Comen\u00e7ar\u00e9 per estilar les targetes. Els estils em serviran tant per pantalles petites com per a pantalles grans.<\/p>\n\n\n\n El text de la cita est\u00e0 etiquetat com a \u00abblockquote\u00bb<\/p>\n\n\n\n A continuaci\u00f3 estilo aquest text<\/p>\n\n\n\n Tamb\u00e9 podria haver fet servir com a selector nom\u00e9s la paraula \u00abblockquote\u00bb o \u00ab.testimoni blockquote\u00bb. Posant \u00abarticle.testimoni blockquote\u00bb concreto m\u00e9s que aquests estils nom\u00e9s s’aplicaran en unes circunst\u00e0ncies molt concretes.<\/p>\n\n\n\n Despr\u00e9s del blockquote hi ha una altra divisi\u00f3 que, al seu torn, est\u00e0 dividida en dues parts: una imatge i una altra divisi\u00f3 que agrupa el nom i la web del testimoni<\/p>\n\n\n\n A continuaci\u00f3 segueixo estilant els elements textuals<\/p>\n\n\n\n Ara comen\u00e7ar\u00e9 a aplicar colors de fons a aquelles seccions que no s\u00f3n blanques: el header, el hero, el cta i el footer.<\/p>\n\n\n\n Ara aplicar\u00e9 les imatges de fons. Comen\u00e7ar\u00e9 pel cta. El cta t\u00e9 una imatge a la part inferior que fa de separaci\u00f3 entre el cta i la seg\u00fcent secci\u00f3. Podria posar la imatge alineada a la part inferior, per\u00f2 el que far\u00e9 \u00e9s crear un pseudoelement sense contingut que faci de separador, que tingui les proporcions exactes de la imatge que fa de separador i que tingui la imatge de fons ocupant tota la seva \u00e0rea.<\/p>\n\n\n\n He fet servir la unitat vw (view width) per a calcular l’al\u00e7ada de la franja. Mirant el disseny veig que la franja t\u00e9 una al\u00e7ada que representa el 10% de l’amplada. Com que l’amplada coincideix amb l’amplada del dispositiu (view width), puc dir que l’al\u00e7ada \u00e9s de 10vw (una 10a part de l’amplada).<\/p>\n\n\n\n He posat l’amplada de la imatge al 100%, per cobrir tot l’espai. El navegador l’escala proporcionalment. <\/p>\n\n\n\n El cta d’abans del footer tamb\u00e9 t\u00e9 una divisi\u00f3, aquesta vegada a la part superior. Puc fer servir la mateixa t\u00e8cnica fent servir el pseudoelement \u00abbefore\u00bb, aquesta vegada. Per\u00f2 faig servir una altra t\u00e8cnica.<\/p>\n\n\n\n El que faig \u00e9s posar la imatge de fons i deixar un espai a la part superior (mitjan\u00e7ant padding-top) per a que es vegi la corva sense trepitjar el text.<\/p>\n\n\n\n En aquest cas, he posat un color de fons transparent per negar el color blau de fons que li havia donat anteriorment al cta. Ho he hagut de fer perqu\u00e8 la imatge t\u00e9 una part transparent i si el fons fos blau es veuria aquest blau sota la image i no veur\u00edem la corva.<\/p>\n\n\n\n El padding \u00e9s de 10vw perqu\u00e8 l’espai que hem de deixar t\u00e9 aquestes proporcions (100 \/ 10).<\/p>\n\n\n\n Al mirar la p\u00e0gina en una pantalla petita, he vist que a pantalles petites no he d’escalar la imatge de fons, perqu\u00e8 si ho faig no cobreixt tot l’espai. Per aix\u00f2 he canviat la mida de la imatge nom\u00e9s a pantalles grans.<\/p>\n\n\n\n He fet l’amplada de la imatge de 101% perqu\u00e8 la imatge est\u00e0 mal feta i t\u00e9 un espai en blanc a la dreta. Si la faig m\u00e9s gran, surt de la pantalla aquest tro\u00e7 de la imatge.<\/p>\n\n\n\n Tamb\u00e9 far\u00e9 servir imatges de fons a la llista de botigues del cta, com que les imatges no estan al HTML, les haur\u00e9 de posar per CSS:<\/p>\n\n\n\n Aqu\u00ed necessito amagar el text de l’enlla\u00e7 i canviar-lo per una imatge. Hi ha diferents maneres de fer-ho. Podria tocar l’html per posar el text dins d’un span i amagar-lo amb CSS, per exemple. El que far\u00e9 ser\u00e0 limitar la mida dels enlla\u00e7os (width, height), moure el text ben lluny, amagar tot all\u00f2 que surt de les dimensions que he donat als enlla\u00e7os (overflow: hidden) i posar les imatges de fons.<\/p>\n\n\n\n He posat les indicacions del que he fet com a comentari del CSS<\/p>\n\n\n\n Si miro el disseny, veig que hi ha espais entre seccions que haur\u00e9 d’afegir per CSS<\/p>\n\n\n\n He estat maquetant amb la filosofia mobile first.<\/em> Tot all\u00f2 aplicat fa que la p\u00e0gina es vegi correctament a dispositius petits. <\/p>\n\n\n\n Ara afegir\u00e9 tot all\u00f2 que nom\u00e9s s’ha de produ\u00efr a pantalles grans<\/p>\n\n\n\n <\/p>\n\n\n\n Flex<\/p>\n","protected":false},"excerpt":{"rendered":" \u00abCada maestrillo tiene su librillo\u00bb. Aquest \u00e9s el meu \u00ablibrillo\u00bb Quan desenvolupo una p\u00e0gina web, el que faig \u00e9s passar un disseny a HTML , estilar-lo amb CSS i, si cal, afegir-hi comportaments amb programaci\u00f3 (javascript o php). Un cop revisat el disseny i aclarits els dubtes amb la dissenyadora, inicio el pas a HTML.… Continueu llegint Proc\u00e9s de maquetaci\u00f3<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10],"tags":[],"class_list":["post-234","post","type-post","status-publish","format-standard","hentry","category-maquetacio","entry"],"_links":{"self":[{"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/posts\/234","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/comments?post=234"}],"version-history":[{"count":24,"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/posts\/234\/revisions"}],"predecessor-version":[{"id":390,"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/posts\/234\/revisions\/390"}],"wp:attachment":[{"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/media?parent=234"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/categories?post=234"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/tags?post=234"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}![\"\"](\"https:\/\/user0.gesem.es\/blog\/wp-content\/uploads\/2023\/06\/imagen-7.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/user0.gesem.es\/blog\/wp-content\/uploads\/2023\/07\/imagen.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/user0.gesem.es\/blog\/wp-content\/uploads\/2023\/07\/imagen-1.png\")
Pas 2 – Maquetaci\u00f3<\/h2>\n\n\n\n
![\"\"](\"https:\/\/user0.gesem.es\/blog\/wp-content\/uploads\/2023\/07\/imagen-2.png\")
![\"\"](\"https:\/\/user0.gesem.es\/blog\/wp-content\/uploads\/2023\/07\/imagen-3.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/user0.gesem.es\/blog\/wp-content\/uploads\/2023\/06\/imagen-8.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/user0.gesem.es\/blog\/wp-content\/uploads\/2023\/06\/imagen-9.png\")
<\/figure>\n\n\n\n\n
![\"\"](\"https:\/\/user0.gesem.es\/blog\/wp-content\/uploads\/2023\/07\/imagen-6.png\")
<\/figure>\n\n\n\n\n
Caixa del contingut<\/h3>\n\n\n\n
.contenidor{\n width:100%;\n max-width: 1140px;\n padding:10px 20px;\n margin: 0 auto;\n}<\/code><\/pre>\n\n\n\nPas 3 – Estilar amb CSS mobile first<\/em><\/h2>\n\n\n\n
\n
Tipografies<\/h3>\n\n\n\n
h1, \/* Aquesta p\u00e0gina no el fa servir *\/\n.hero h2{\n font-weight: 600;\n font-size: 2.5rem; \n line-height: 1.125; \/* 72px *\/\n \n}\nh2{\n font-weight: 500;\n font-size: 1rem;\n line-height: 1.375;\n color:#202249;\n}\nh2 strong{\n font-weight: 600;\n font-size: 3rem;\n line-height: 1.125;\n display: block;\n color:black;\n}\nh3{\n font-weight: 700;\n font-size: 1.375rem; \/* 22px *\/\n line-height: 1.455; \/* 32px *\/\n}\np{\n font-weight: 400;\n font-size: 1rem;\n line-height: 1.78;\n}<\/code><\/pre>\n\n\n\na{\n text-decoration:underline;\n}\na:hover{\n text-decoration:none;\n}\na.botonet{\n text-decoration: none;\n color:white;\n background-color: #FF6701;\n font-size: 1rem;\n line-height: 1.01;\n padding: 1em 2em;\n border-radius: 3.125em;\n font-weight: 700;\n display:inline-block;\n}<\/code><\/pre>\n\n\n\nPictogrames<\/h3>\n\n\n\n
\n
.caracteristica{\n padding-top:50px;\n background-position: top left;\n background-size:40px;\n background-repeat:no-repeat;\n}\n\n.emails{\n background-image: url(imatges\/icos\/email.png);\n}\n.descarregues{\n background-image: url(imatges\/icos\/downloads.png);\n\n}\n.formularis{\n background-image: url(imatges\/icos\/forms.png);\n}\n.ofertes{\n background-image: url(imatges\/icos\/coupons.png);\n}\n.descompte{\n background-image: url(imatges\/icos\/packs.png);\n}\n.eina{\n background-image: url(imatges\/icos\/all-in-one.png);\n}\n.factures{\n background-image: url(imatges\/icos\/factura.png);\n}\n.estadistiques{\n background-image: url(imatges\/icos\/estadistiques.png);\n}\n.impostos{\n background-image: url(imatges\/icos\/impostos.png);\n}\n.software{\n background-image: url(imatges\/icos\/software.png);\n}\n.subscripcions{\n background-image: url(imatges\/icos\/subscription.png);\n}<\/code><\/pre>\n\n\n\nCaixa del contingut<\/h3>\n\n\n\n
.contenidor{\n width:100%;\n max-width: 1140px;\n padding:10px 20px;\n margin: 0 auto;\n}<\/code><\/pre>\n\n\n\nCap\u00e7alera<\/h3>\n\n\n\n
\n
header h1, \nheader p,\nheader a.botonet{\n display:inline-block;\n margin:0;\n}\nheader p{\n float:right;\n}<\/code><\/pre>\n\n\n\nEntradetes<\/h3>\n\n\n\n
![\"\"](\"https:\/\/user0.gesem.es\/blog\/wp-content\/uploads\/2023\/07\/imagen-4.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/user0.gesem.es\/blog\/wp-content\/uploads\/2023\/07\/imagen-5.png\")
<\/figure>\n\n\n\n\n
\n
.esquerra{\n text-align:left;\n}\n.entradeta,\n.entradeta.esquerra{\n text-align: center;\n}\n@media all and (min-width:1024px){\n .entradeta:not(.esquerra){\n width:50%;\n margin-left: auto;\n margin-right: auto;\n }\n .entradeta.esquerra{\n text-align:left;\n }\n}<\/code><\/pre>\n\n\n\nTestimonis<\/h3>\n\n\n\n
![\"\"](\"https:\/\/user0.gesem.es\/blog\/wp-content\/uploads\/2023\/07\/imagen-7.png\")
.testimoni{\n padding: 1.25rem;\n border: 1px solid rgba(32, 32, 71, 0.37);\n border-radius: 0.5rem;\n}<\/code><\/pre>\n\n\n\n![\"\"](\"https:\/\/user0.gesem.es\/blog\/wp-content\/uploads\/2023\/07\/imagen-8.png\")
<\/figure>\n\n\n\narticle.testimoni blockquote {\n font-weight: 400;\n font-size: 1rem;\n line-height: 1.75;\n}<\/code><\/pre>\n\n\n\n![\"\"](\"https:\/\/user0.gesem.es\/blog\/wp-content\/uploads\/2023\/07\/imagen-10.png\")
<\/figure>\n\n\n\narticle.testimoni p {\n font-weight: 700;\n font-size: 0.9375rem;\n}\narticle.testimoni p a {\n color: #A8A8A8;\n text-decoration: none;\n}<\/code><\/pre>\n\n\n\nColors i imatges de fons<\/h3>\n\n\n\n
header,\n.hero,\n.cta,\nfooter{\n background-color:#202249;\n color:white;\n}\n<\/code><\/pre>\n\n\n\n.hero::after {\n content: \"\";\n display: block;\n width: 100%;\n height: 10vw;\n background-image: url(imatges\/fons-1.png);\n background-size: 100%;\n background-position: left bottom;\n background-repeat: no-repeat;\n}<\/code><\/pre>\n\n\n\n![\"\"](\"https:\/\/user0.gesem.es\/blog\/wp-content\/uploads\/2023\/07\/imagen-11-1024x250.png\")
<\/figure>\n\n\n\n .cta{\n background-image: url(imatges\/fons-2.png);\n background-color:transparent;\n background-position: center top;\n \n padding-top: 10vw;\n background-repeat: no-repeat;\n position: relative;\n}\n@media all and (min-width:768px){\n\t.cta{\n\t\tbackground-size: 101%;\n\t}\n}<\/code><\/pre>\n\n\n\n![\"\"](\"https:\/\/user0.gesem.es\/blog\/wp-content\/uploads\/2023\/07\/imagen-13.png\")
<\/figure>\n\n\n\n\/* treiem al ul del cta l'estil de llista*\/ \n.cta ul{\n\tlist-style-type: none;\n\tpadding: 0;\n}\n\/* posem al li display inline-block\nper a que es vegin un al costat de l'altre*\/\n.cta ul li{\n\tdisplay: inline-block;\n}\n\/* Donem display block a l'enlla\u00e7 per a poder\nccanviar-li les dimensions. Movem el text\naamb text-indent i amaguem tot all\u00f2 que surt\ndde la caixa (aix\u00f2 far\u00e0 que no es vegi el text)*\/\n.cta ul li a{\n\tdisplay: block;\n\twidth:150px;\n\theight:46px;\n\toverflow: hidden;\n\tbackground-size: contain;\n\tbackground-repeat: no-repeat;\n\tbackground-position: left top;\n\ttext-indent:-1000px;\n\toverflow: hidden;\n\tmargin: 2px;\n\n}\n\/* cada li t\u00e9 una imatge diferent a l'enlla\u00e7*\/\n.cta ul li.app-store a{\n\tbackground-image:url(imatges\/app-store.png);\n\n}\n.cta ul li.google-play a{\n\tbackground-image:url(imatges\/google-play.png);\n\n}<\/code><\/pre>\n\n\n\nModificar l’espai entre seccions<\/h2>\n\n\n\n
\n
.hero{\n padding-top:60px;\n}\nsection:not(:last-child){\n margin-bottom:90px;\n}\n.entradeta{\nmargin-bottom: 60px;\n}<\/code><\/pre>\n\n\n\n