—Pare, m'han explicat que si la "cago" he de demanar perdó.
PARE —I tant que sí, fill. Però no només demanar perdó, sinó entendre per què l'has cagada.
*/ } .conclusio { background-color: #d5e3f1; border-radius: 10px; border-left: 4px solid #4a90e2; padding: 20px; margin: 30px 0; font-family: 'Segoe UI', sans-serif; } .conclusio h3 { color: #2a7f8a; margin-top: 0; border-bottom: 1px solid #2a7f8a; padding-bottom: 10px; } .conclusio p { color: #333; line-height: 1.6; margin-bottom: 15px; } .conclusio ul { list-style-type: none; padding-left: 20px; } .conclusio li { color: #333; line-height: 1.6; margin-bottom: 15px; position: relative; padding-left: 25px; } .conclusio a { color: #2a7f8a; text-decoration: none; } .conclusio a:hover { text-decoration: underline; } /* Botons de compartir */ .share-section { /* Contenidor dels botons de compartir */ text-align: center; /* Centrat horitzontalment */ margin: 32px 0 16px 0; /* Marge superior i inferior */ } .share-title { /* Títol de la secció de compartir */ color: #35424a; /* Color del text */ font-size: 1.2em; /* Mida de la font */ margin-bottom: 12px; /* Espai sota el títol */ font-weight: bold; /* Text en negreta */ } .share-btn { /* Estil dels botons de compartir */ display: inline-block; /* Permet aplicar dimensions */ margin: 0 10px; /* Espai entre els botons */ padding: 8px 12px; /* Espaiat intern */ border-radius: 8px; /* Cantons arrodonits */ background: #f4f4f4; /* Color de fons */ border: 2px solid #ddd; /* Borde */ color: #222; /* Color del text */ font-size: 1.1em; /* Mida de la font */ text-decoration: none; /* Sense subratllat */ transition: background 0.2s, border 0.2s, color 0.2s; /* Transicions suaus */ vertical-align: middle; /* Alineació vertical */ } .share-btn:hover { /* Efecte hover */ background: #35424a; /* Color de fons més fosc */ color: #fff; /* Color del text blanc */ border-color: #35424a; /* Borde més fosc */ } .share-btn img { /* Estil de les icones */ width: 24px; /* Amplada de la icona */ height: 24px; /* Altura de la icona */ vertical-align: middle; /* Alineació vertical */ margin-right: 6px; /* Espai entre la icona i el text */ } /* Peu de pàgina amb columnes */ footer { /* Estils per al peu de pàgina */ background: #2c3e50; /* Color de fons blau fosc */ color: white; /* Text blanc */ padding: 40px 0 20px; /* Espaiat vertical */ margin-top: 40px; /* Espai sobre el peu de pàgina */ border-radius: 10px 10px 0 0; /* Cantonades arrodonides a la part superior */ } .footer-content { /* Contenidor per al contingut del peu de pàgina */ display: flex; /* Utilitza Flexbox per al layout */ flex-wrap: wrap; /* Permet que les columnes es moguin a la següent línia si cal */ gap: 30px; /* Espai entre les columnes */ justify-content: space-between; /* Espai entre les columnes */ padding: 0 20px; /* Espaiat horitzontal */ } .footer-column { /* Estils per a cada columna del peu de pàgina */ flex: 1 1 250px; /* Flexibilitat per a adaptar-se a diferents mides */ } .footer-column h3 { /* Estils per als títols de les columnes */ color: #fff; /* Text blanc */ border-bottom: 2px solid #4a6580; /* Línia sota el títol */ padding-bottom: 10px; /* Espai sota el títol */ margin-bottom: 20px; /* Espai sobre el contingut */ margin-left: 20px; /* Sagnat a l'esquerra */ } .footer-links { /* Estils per a la llista d'enllaços del peu de pàgina */ list-style: none; /* Elimina els punts de la llista */ } .footer-links li { /* Estils per a cada element de la llista */ margin-bottom: 10px; /* Espai entre els elements */ } .footer-links a { /* Estils per als enllaços del peu de pàgina */ color: #ccc; /* Color gris clar */ text-decoration: none; /* Elimina la subratllada */ transition: color 0.3s; /* Transició suau per al color */ } .footer-links a:hover { /* Efecte hover per als enllaços */ color: white; /* Text blanc al passar el cursor */ } .social-links { /* Contenidor per als enllaços socials */ display: flex; /* Utilitza Flexbox per al layout */ gap: 15px; /* Espai entre les icones */ margin-top: 15px; /* Espai sobre les icones */ } .social-links a { /* Estils per a cada enllaç social */ display: inline-block; /* Mostra com a bloc en línia */ color: white; /* Text blanc */ background: #4a6580; /* Fons blau */ width: 40px; /* Amplada de la icona */ height: 40px; /* Alçada de la icona */ border-radius: 50%; /* Forma circular */ text-align: center; /* Centra el text */ line-height: 40px; /* Centra verticalment el text */ transition: background 0.3s; /* Transició suau per al fons */ } .social-links a:hover { /* Efecte hover per als enllaços socials */ background: #5d7a97; /* Fons blau més clar */ } .copyright { /* Estils per al text de copyright */ text-align: center; /* Centra el text */ margin-top: 40px; /* Espai sobre el text */ padding-top: 20px; /* Espaiat superior */ border-top: 1px solid #4a6580; /* Línia superior */ } /* MEDIA QUERIES */ /* Tablet: màxim 1024px d'amplada */ @media screen and (max-width: 1024px) { /* Ajustos per a pantalles de tablet */ .container { /* Ajusta l'amplada del contenidor */ width: 95%; /* Amplada del 95% de la finestra */ } h1 { /* Ajusta la mida del títol principal */ font-size: 2.2rem; /* Mida de font lleugerament més petita */ } .content { /* Ajusta el layout del contingut principal i la barra lateral */ flex-direction: column; /* Columna en lloc de fila */ } .gallery { /* Ajusta la graella de la galeria */ grid-template-columns: repeat(2, 1fr); /* Dues columnes en lloc de tres */ } .features { /* Ajusta el layout de les característiques amb icones */ gap: 15px; /* Redueix l'espai entre les característiques */ } .feature { /* Ajusta la mida de cada característica */ flex: 1 1 calc(50% - 15px); /* Dues característiques per fila */ } } /* Tablet petita / mòbil gran: màxim 768px d'amplada */ @media screen and (max-width: 768px) { /* Ajustos per a pantalles de tablet petita i mòbil gran */ header { /* Ajusta la capçalera */ padding: 20px 0; /* Redueix l'espaiat vertical */ } h1 { font-size: 1.8rem; /* Mida de font més petita */ } main, aside { /* Ajusta el padding del contingut principal i la barra lateral */ padding: 15px; /* Redueix l'espaiat intern */ } .gallery { /* Ajusta la graella de la galeria */ grid-template-columns: repeat(2, 1fr); /* Dues columnes */ gap: 10px; } .feature { /* Ajusta la mida de cada característica */ flex: 1 1 100%; /* Una característica per fila */ } .footer-content { /* Ajusta el layout del peu de pàgina */ gap: 20px; /* Redueix l'espai entre les columnes */ } } /* Mòbil: màxim 480px d'amplada */ @media screen and (max-width: 480px) { /* Ajustos per a pantalles de mòbil */ .container { /* Ajusta l'amplada del contenidor */ width: 100%; /* Amplada completa de la finestra */ padding: 10px; /* Redueix l'espaiat intern */ } h1 { /* Ajusta la mida del títol principal */ font-size: 1.5rem; /* Mida de font més petita */ } .gallery { /* Ajusta la graella de la galeria */ grid-template-columns: 1fr; /* Una columna */ } .feature { /* Ajusta la disposició de cada característica */ flex-direction: column; /* Columna en lloc de fila */ text-align: center; /* Centra el text */ } .feature i { /* Ajusta la mida de les icones */ margin-bottom: 10px; /* Espai sota la icona */ } .footer-column { /* Ajusta la mida de cada columna del peu de pàgina */ flex: 1 1 100%; /* Una columna per fila */ } .social-links { /* Centra els enllaços socials */ justify-content: center; /* Centra horitzontalment */ } } /* Orientació: retrat (vertical) */ @media screen and (max-width: 768px) and (orientation: portrait) { /* Ajustos per a pantalles en orientació vertical */ header { /* Ajusta la capçalera */ padding: 25px 0; /* Espaiat vertical */ } } /* Orientació: paisatge (horizontal) */ @media screen and (max-width: 930px) and (orientation: landscape) { /* Ajustos per a pantalles en orientació horitzontal */ .gallery { /* Ajusta la graella de la galeria */ grid-template-columns: repeat(2, 1fr); /* Dues columnes */ } } /* Exemple per a dispositius amb alta resolució (retina) */ @media only screen and (-webkit-min-device-pixel-ratio: 2), /* Safari i Chrome */ only screen and (min-resolution: 192dpi) { /* Altres navegadors */ /* Podem carregar imatges de major resolució per a pantalles retina */ } @media (max-width: 768px) { /* Estils per a pantalles petites (mòbils i tablets) */ iframe { height: 600px; } } /* cartes que giren */ .wrapper h2 { font-size: 2rem; font-family: 'Montserrat'; font-weight: normal; color: #fff; text-align: center; margin: 2rem 0; padding: 1rem; } .wrapper { width: 90%; margin: 0 auto; max-width: 80rem; background-color: #444; border-radius: 20px; padding: 1rem; margin-bottom: 2rem; } .cols { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .col { width: calc(33% - 2rem); margin: 1rem; cursor: pointer; } .container { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-perspective: 1000px; perspective: 1000px; } .front, .back { background-size: cover; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.25); border-radius: 10px; background-position: center; -webkit-transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1); transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1); -o-transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1); transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1); transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1), -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1); -webkit-backface-visibility: hidden; backface-visibility: hidden; text-align: center; min-height: 280px; height: auto; border-radius: 10px; color: #fff; font-size: 1rem; } .back { background: #cedce7; background: -webkit-linear-gradient(45deg, #cedce7 0%, #596a72 100%); background: -o-linear-gradient(45deg, #cedce7 0%, #596a72 100%); background: linear-gradient(45deg, #cedce7 0%, #596a72 100%); } .front:after { position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; content: ''; display: block; opacity: .6; background-color: #000; -webkit-backface-visibility: hidden; backface-visibility: hidden; border-radius: 10px; } .container:hover .front, .container:hover .back { -webkit-transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1); transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1); -o-transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1); transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1); transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1), -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1); } .back { position: absolute; top: 0; left: 0; width: 100%; } .inner { -webkit-transform: translateY(-50%) translateZ(60px) scale(0.94); transform: translateY(-50%) translateZ(60px) scale(0.94); top: 50%; position: absolute; left: 0; width: 100%; padding: 2rem; -webkit-box-sizing: border-box; box-sizing: border-box; outline: 1px solid transparent; -webkit-perspective: inherit; perspective: inherit; z-index: 2; } .container .back { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .container .front { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .container:hover .back { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .container:hover .front { -webkit-transform: rotateY(-180deg); transform: rotateY(-180deg); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .front .inner p { font-size: 2rem; margin-bottom: 1rem; position: relative; } .front .inner p:after { content: ''; width: 4rem; height: 2px; position: absolute; background: #C6D4DF; display: block; left: 0; right: 0; margin: 0 auto; bottom: -.75rem; } .front .inner span { color: rgba(255, 255, 255, 0.7); font-family: 'Montserrat'; font-weight: 300; } @media screen and (max-width: 64rem) { .col { width: calc(33.333333% - 2rem); } .back { font-size: 1rem; } } @media screen and (max-width: 56rem) { .col { width: calc(50% - 1rem); } .back { font-size: 1rem; } } @media screen and (max-width: 48rem) { .col { width: calc(50% - 2rem); } .back { font-size: 0.75rem; } } @media screen and (max-width: 32rem) { .col { width: 100%; margin: 0 0 2rem 0; } .back { font-size: 1rem; } }