{"id":11,"date":"2026-05-12T12:18:10","date_gmt":"2026-05-12T10:18:10","guid":{"rendered":"https:\/\/25005.ooteca.artedra.net\/?page_id=11"},"modified":"2026-05-19T12:56:26","modified_gmt":"2026-05-19T10:56:26","slug":"web-obra-final","status":"publish","type":"page","link":"https:\/\/25005.ooteca.artedra.net\/","title":{"rendered":"web obra final"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n \n \n Projecte \u2014 Landing Page<\/title>\n <link href=\"https:\/\/fonts.cdnfonts.com\/css\/eurostile\" rel=\"stylesheet\" \/>\n <style>\n .nav-links a.active {\n color: var(--red) !important;\n opacity: 1 !important;\n}\n @font-face {\n font-family: 'Inlanders';\n src: url('https:\/\/fonts.cdnfonts.com\/s\/12345\/Inlanders.woff2') format('woff2');\n font-weight: normal;\n font-style: normal;\n }\n\n :root {\n --black: #0B0B0B;\n --sand: #c8c3b9;\n --red: #c51a1b;\n --font-title: 'Inlanders', 'Georgia', serif;\n --font-body: 'Eurostile Extended', 'Eurostile', 'Arial Narrow', sans-serif;\n }\n\n *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n\n html { scroll-behavior: smooth; }\n\n body {\n background-color: var(--black);\n color: var(--sand);\n font-family: var(--font-body);\n overflow-x: hidden;\n }\n\n \/* \u2500\u2500 NAV \u2500\u2500 *\/\n nav {\n position: fixed;\n top: 2; left: 0; right: 0;\n z-index: 100;\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 1.2rem 3rem;\n background: rgba(11,11,11,0.85);\n backdrop-filter: blur(10px);\n border-bottom: 1px solid rgba(200,195,185,0.08);\n }\n\n .nav-logo {\n font-family: var(--font-body);\n font-size: 2.3rem;\n font-weight: 300;\n letter-spacing: 0.18em;\n text-transform: uppercase;\n text-decoration: none;\n display: flex;\n align-items: center;\n line-height: 1;\n}\n\n.logo-c { color: var(--sand); }\n.logo-s { color: var(--red); }\n\n .nav-links {\n display: flex;\n gap: 2rem;\n list-style: none;\n }\n .nav-links a {\n font-family: var(--font-body);\n font-size: 0.78rem;\n letter-spacing: 0.18em;\n text-transform: uppercase;\n color: var(--sand);\n text-decoration: none;\n opacity: 0.6;\n transition: opacity 0.2s, color 0.2s;\n }\n .nav-links a:hover { opacity: 1; color: var(--red); }\n\n .nav-burger { display: none; flex-direction: column; gap: 5px; cursor: pointer; }\n .nav-burger span { display: block; width: 24px; height: 2px; background: var(--sand); transition: 0.3s; }\n\n \/* \u2500\u2500 SECTIONS COMMON \u2500\u2500 *\/\n section { padding: 7rem 3rem; }\n .section-label {\n font-size: 0.69rem;\n letter-spacing: 0.35em;\n text-transform: uppercase;\n color: var(--red);\n margin-bottom: 1rem;\n display: flex;\n align-items: center;\n gap: 0.7rem;\n }\n .section-label::before {\n content: '';\n display: inline-block;\n width: 28px; height: 1px;\n background: var(--red);\n }\n\n h1, h2, h3 {\n font-family: var(--font-body);\n text-transform: uppercase;\n letter-spacing: 0.12em;\n }\n h2 {\n font-size: clamp(2.2rem, 5vw, 3.5rem);\n letter-spacing: 0.04em;\n color: var(--sand);\n margin-bottom: 1.5rem;\n }\n\n p {\n font-size: 0.98rem;\n line-height: 1.8;\n letter-spacing: 0.04em;\n color: rgba(200,195,185,0.75);\n }\n\n .max-w { max-width: 1200px; margin: 0 auto; }\n\n section { padding: 25rem 1rem; }\n\n \/* \u2500\u2500 HERO \u2500\u2500 *\/\n #hero {\n min-height: 100vh;\n display: grid;\n grid-template-columns: 1fr 1fr;\n align-items: center;\n gap: 4rem;\n padding-top: 9rem;\n position: relative;\n overflow: hidden;\n }\n\n #hero::before {\n content: '';\n position: absolute;\n top: -20%; right: -10%;\n width: 55vw; height: 55vw;\n border-radius: 50%;\n background: radial-gradient(circle, rgba(197,26,27,0.08) 0%, transparent 70%);\n pointer-events: none;\n }\n\n .hero-text { position: relative; z-index: 1; }\n\n .hero-eyebrow {\n font-size: 0.71rem;\n letter-spacing: 0.4em;\n text-transform: uppercase;\n color: var(--red);\n margin-bottom: 1.4rem;\n display: flex;\n align-items: center;\n gap: 0.8rem;\n }\n .hero-eyebrow::before {\n content: '';\n width: 36px; height: 1px;\n background: var(--red);\n }\n\n h1 {\n font-size: clamp(3rem, 7vw, 6rem);\n line-height: 1;\n letter-spacing: 0.03em;\n color: var(--sand);\n margin-bottom: 1.8rem;\n }\n h1 em {\n font-style: normal;\n color: var(--red);\n }\n\n .hero-desc {\n font-size: 0.94rem;\n line-height: 1.9;\n max-width: 420px;\n margin-bottom: 2.5rem;\n color: rgba(200,195,185,0.65);\n }\n\n .btn-primary {\n display: inline-flex;\n align-items: center;\n gap: 0.7rem;\n padding: 0.85rem 2rem;\n background: var(--red);\n color: var(--sand);\n font-family: var(--font-body);\n font-size: 0.78rem;\n letter-spacing: 0.2em;\n text-transform: uppercase;\n text-decoration: none;\n border: none;\n cursor: pointer;\n transition: background 0.2s, transform 0.2s;\n }\n .btn-primary:hover { background: #a01516; transform: translateY(-2px); }\n .btn-primary svg { width: 14px; height: 14px; }\n\n .btn-ghost {\n display: inline-flex;\n align-items: center;\n gap: 0.7rem;\n padding: 0.85rem 2rem;\n border: 1px solid rgba(200,195,185,0.25);\n color: var(--sand);\n font-family: var(--font-body);\n font-size: 0.78rem;\n letter-spacing: 0.2em;\n text-transform: uppercase;\n text-decoration: none;\n transition: border-color 0.2s, transform 0.2s;\n }\n .btn-ghost:hover { border-color: var(--red); transform: translateY(-2px); }\n\n .hero-cta { display: flex; gap: 1rem; flex-wrap: wrap; }\n\n .hero-image { position: relative; }\n .hero-img-wrap {\n position: relative;\n aspect-ratio: 4\/5;\n overflow: hidden;\n }\n .hero-img-wrap::after {\n content: '';\n position: absolute;\n inset: 0;\n background: linear-gradient(to bottom, transparent 50%, var(--black) 100%);\n }\n .hero-frame {\n position: absolute;\n top: -12px; right: -12px;\n bottom: 12px; left: 12px;\n border: 1px solid rgba(197,26,27,0.35);\n pointer-events: none;\n }\n\n section { padding: 0rem 0rem; }\n\n \/* \u2500\u2500 REFERENTS \u2500\u2500 *\/\n #referents { background: #0e0e0e; }\n .ref-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n gap: 1px;\n background: rgba(200,195,185,0.07);\n margin-top: 3rem;\n }\n .ref-card {\n background: #0B0B0B;\n overflow: hidden;\n transition: transform 0.3s;\n }\n .ref-card:hover { transform: translateY(-4px); }\n .ref-img {\n aspect-ratio: 16\/9;\n background: linear-gradient(135deg, #1a1a1a, #111);\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 0.69rem;\n letter-spacing: 0.3em;\n color: rgba(200,195,185,0.15);\n text-transform: uppercase;\n position: relative;\n overflow: hidden;\n }\n .ref-img img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n display: block;\n }\n .ref-img::before {\n content: '';\n position: absolute;\n bottom: 0; left: 0; right: 0;\n height: 3px;\n background: var(--red);\n transform: scaleX(0);\n transform-origin: left;\n transition: transform 0.3s;\n }\n .ref-card:hover .ref-img::before { transform: scaleX(1); }\n .ref-body { padding: 1.5rem; }\n .ref-name {\n font-family: var(--font-title);\n font-size: 1.265rem;\n color: var(--sand);\n margin-bottom: 0.3rem;\n }\n .ref-desc { font-size: 0.9rem; line-height: 1.75; color: rgba(200,195,185,0.6); }\n\n section { padding: 8rem 2rem; }\n\n \/* \u2500\u2500 PROC\u00c9S \u2500\u2500 *\/\n #proces { position: relative; }\n .process-header {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 4rem;\n align-items: end;\n margin-bottom: 4rem;\n }\n\n .process-timeline {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 1px;\n background: rgba(200,195,185,0.07);\n }\n @media (max-width: 900px) {\n .process-timeline { grid-template-columns: 1fr 1fr; }\n }\n @media (max-width: 600px) {\n .process-timeline { grid-template-columns: 1fr; }\n }\n\n .pt-item {\n background: #0B0B0B;\n padding: 2rem 1.5rem;\n position: relative;\n overflow: hidden;\n }\n .pt-item::before {\n content: '';\n position: absolute;\n top: 0; left: 0; right: 0;\n height: 2px;\n background: var(--red);\n opacity: 0;\n transition: opacity 0.3s;\n }\n .pt-item:hover::before { opacity: 1; }\n .pt-num {\n font-family: var(--font-title);\n font-size: 2.875rem;\n color: rgba(200,195,185,0.06);\n line-height: 1;\n margin-bottom: 0.8rem;\n }\n .pt-label {\n font-size: 0.71rem;\n letter-spacing: 0.25em;\n text-transform: uppercase;\n color: var(--red);\n margin-bottom: 0.5rem;\n }\n .pt-title {\n font-family: var(--font-title);\n font-size: 1.15rem;\n color: var(--sand);\n margin-bottom: 0.7rem;\n }\n .pt-img {\n margin-top: 1.2rem;\n aspect-ratio: 4\/3;\n background: linear-gradient(135deg, #181818, #131313);\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 0.63rem;\n letter-spacing: 0.2em;\n color: rgba(200,195,185,0.12);\n text-transform: uppercase;\n overflow: hidden;\n }\n .pt-real-img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n display: block;\n }\n\n \/* \u2500\u2500 FANZINE \u2500\u2500 *\/\n #fanzine { background: #0e0e0e; }\n .fanzine-layout {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 4rem;\n align-items: center;\n margin-top: 3rem;\n }\n .fanzine-cover { position: relative; }\n .fanzine-frame {\n position: absolute;\n top: 10px; right: -10px;\n bottom: -10px; left: 10px;\n border: 1px solid rgba(197,26,27,0.25);\n pointer-events: none;\n }\n\n \/* \u2500\u2500 IMAGEN FANZINE COMPLETA (sin recorte) \u2500\u2500 *\/\n .fanzine-img-full {\n display: block;\n width: 100%;\n height: auto;\n object-fit: contain;\n }\n\n .fanzine-meta {\n display: flex;\n gap: 2rem;\n margin: 1.5rem 0;\n }\n .fanzine-meta-item span:first-child {\n display: block;\n font-size: 0.63rem;\n letter-spacing: 0.25em;\n text-transform: uppercase;\n color: var(--red);\n margin-bottom: 0.3rem;\n }\n .fanzine-meta-item span:last-child {\n font-size: 0.92rem;\n color: rgba(200,195,185,0.65);\n }\n\n \/* \u2500\u2500 VIDEO \u2500\u2500 *\/\n .video-wrap {\n margin-top: 3rem;\n position: relative;\n padding-bottom: 56.25%;\n height: 0;\n background: #111;\n overflow: hidden;\n border-radius: 8px;\n }\n .video-wrap iframe {\n position: absolute;\n top: 0; left: 0;\n width: 100%; height: 100%;\n border: none;\n object-fit: cover;\n }\n .video-border {\n position: absolute;\n top: -8px; left: -8px;\n right: 8px; bottom: 8px;\n border: 1px solid rgba(197,26,27,0.2);\n pointer-events: none;\n }\n .video-outer { position: relative; margin-top: 3rem; }\n .heyzine-wrap {\n margin-top: 3rem;\n position: relative;\n width: 100%;\n padding-bottom: 56.25%;\n height: 0;\n overflow: hidden;\n background: #111;\n border-radius: 8px;\n }\n .heyzine-iframe {\n position: absolute;\n top: 0; left: 0;\n width: 100%; height: 100%;\n border: 0;\n }\n\n \/* \u2500\u2500 CONCLUSIONS \u2500\u2500 *\/\n #conclusions { background: #0e0e0e; }\n .conclusions-grid {\n display: grid;\n grid-template-columns: 1fr 2fr;\n gap: 5rem;\n margin-top: 3rem;\n }\n @media (max-width: 768px) {\n .conclusions-grid { grid-template-columns: 1fr; gap: 2.5rem; }\n }\n .concl-aside-box {\n border: 1px solid rgba(200,195,185,0.1);\n padding: 2rem;\n margin-bottom: 1px;\n }\n .concl-aside-box:hover { border-color: rgba(197,26,27,0.3); }\n .concl-aside-label {\n font-size: 0.63rem;\n letter-spacing: 0.3em;\n text-transform: uppercase;\n color: var(--red);\n margin-bottom: 0.6rem;\n }\n .concl-aside-text {\n font-size: 0.92rem;\n line-height: 1.7;\n color: rgba(200,195,185,0.6);\n }\n .concl-main h3 {\n font-family: var(--font-title);\n font-size: 1.8rem;\n color: var(--sand);\n margin-bottom: 1.2rem;\n }\n .concl-quote {\n border-left: 2px solid var(--red);\n padding-left: 1.5rem;\n margin: 2rem 0;\n font-family: var(--font-title);\n font-size: 1.495rem;\n color: var(--sand);\n line-height: 1.4;\n font-style: italic;\n }\n\n \/* \u2500\u2500 FOOTER \u2500\u2500 *\/\n footer {\n background: var(--black);\n border-top: 1px solid rgba(200,195,185,0.08);\n padding: 4rem 3rem;\n }\n .footer-inner {\n max-width: 1200px;\n margin: 0 auto;\n display: grid;\n grid-template-columns: 1fr 1fr 1fr;\n gap: 4rem;\n align-items: start;\n }\n @media (max-width: 768px) {\n .footer-inner { grid-template-columns: 1fr; gap: 2.5rem; }\n }\n .footer-name {\n font-family: var(--font-title);\n font-size: 1.725rem;\n color: var(--sand);\n margin-bottom: 0.3rem;\n }\n .footer-course {\n font-size: 0.69rem;\n letter-spacing: 0.25em;\n text-transform: uppercase;\n color: var(--red);\n margin-bottom: 0.8rem;\n }\n .footer-nav-title {\n font-size: 0.69rem;\n letter-spacing: 0.3em;\n text-transform: uppercase;\n color: var(--red);\n margin-bottom: 1.2rem;\n }\n .footer-nav { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; }\n .footer-nav a {\n font-size: 0.86rem;\n letter-spacing: 0.1em;\n color: rgba(200,195,185,0.5);\n text-decoration: none;\n transition: color 0.2s;\n }\n .footer-nav a:hover { color: var(--sand); }\n .footer-bottom {\n max-width: 1200px;\n margin: 3rem auto 0;\n padding-top: 2rem;\n border-top: 1px solid rgba(200,195,185,0.06);\n display: flex;\n justify-content: space-between;\n align-items: center;\n flex-wrap: wrap;\n gap: 1rem;\n }\n .footer-bottom p {\n font-size: 0.69rem;\n letter-spacing: 0.15em;\n text-transform: uppercase;\n color: rgba(200,195,185,0.25);\n }\n .footer-red-line { width: 40px; height: 2px; background: var(--red); }\n\n \/* \u2500\u2500 DIVIDER \u2500\u2500 *\/\n .red-divider { width: 40px; height: 2px; background: var(--red); margin-bottom: 2rem; }\n\n \/* \u2500\u2500 ANIMATIONS \u2500\u2500 *\/\n .fade-up {\n opacity: 0;\n transform: translateY(30px);\n transition: opacity 0.7s ease, transform 0.7s ease;\n }\n .fade-up.visible { opacity: 1; transform: none; }\n\n \/* \u2500\u2500 RESPONSIVE \u2500\u2500 *\/\n @media (max-width: 900px) {\n #hero { grid-template-columns: 1fr; padding-top: 7rem; }\n .hero-image { display: none; }\n .process-header { grid-template-columns: 1fr; gap: 2rem; }\n .fanzine-layout { grid-template-columns: 1fr; }\n .fanzine-cover { max-width: 360px; }\n nav { padding: 1rem 1.5rem; }\n .nav-links { display: none; }\n .nav-links.open {\n display: flex;\n flex-direction: column;\n position: fixed;\n top: 0; left: 0; right: 0; bottom: 0;\n background: var(--black);\n align-items: center;\n justify-content: center;\n gap: 2.5rem;\n z-index: 99;\n }\n .nav-links.open a { font-size: 1rem; opacity: 1; }\n .nav-burger { display: flex; z-index: 200; position: relative; }\n section { padding: 5rem 1.5rem; }\n footer { padding: 3rem 1.5rem; }\n }\n\n .hero-main-img {\n width: 100%;\n height: 100%;\n object-fit: contain;\n object-position: center;\n display: block;\n filter: brightness(0.75);\n }\n <\/style>\n<\/head>\n<body>\n\n <!-- NAV -->\n <nav>\n <a href=\"#hero\" class=\"nav-logo logo-cs\">\n <span class=\"logo-c\">C<\/span><span class=\"logo-s\">S<\/span>\n <\/a>\n <ul class=\"nav-links\" id=\"navLinks\">\n <li><a href=\"#hero\">Inici<\/a><\/li>\n <li><a href=\"#referents\">Referents<\/a><\/li>\n <li><a href=\"#proces\">Proc\u00e9s<\/a><\/li>\n <li><a href=\"#fanzine\">Fanzine<\/a><\/li>\n <li><a href=\"#video\">V\u00eddeo<\/a><\/li>\n <li><a href=\"#conclusions\">Conclusions<\/a><\/li>\n <\/ul>\n <div class=\"nav-burger\" id=\"burger\" onclick=\"toggleMenu()\" aria-label=\"Menu\">\n <span><\/span><span><\/span><span><\/span>\n <\/div>\n <\/nav>\n\n <!-- 1. HERO -->\n <section id=\"hero\" class=\"max-w\">\n <div class=\"hero-text\">\n <div class=\"hero-eyebrow\">Projecte Final de Curs<\/div>\n <h1 style=\"\n font-family: var(--font-body);\n font-size: clamp(3rem, 7vw, 6rem);\n line-height: 0.95;\n letter-spacing: 0.18em;\n text-transform: uppercase;\n color: var(--sand);\n margin-bottom: 1.8rem;\n \">\n Carrosseria<br><em style=\"font-style: normal; color: var(--red);\">Social<\/em>\n <\/h1>\n <p class=\"hero-desc\">\n No parlar del cotxe com a m\u00e0quina, sin\u00f3 com a mirall de qui som. El cotxe no \u00e9s nom\u00e9s un mitj\u00e0 de transport:\n \u00e9s una extensi\u00f3 de la identitat de la persona que el condueix.\n <\/p>\n <div class=\"hero-cta\">\n <a href=\"#fanzine\" class=\"btn-primary\">\n Veure Fanzine\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><polyline points=\"12 5 19 12 12 19\"\/><\/svg>\n <\/a>\n <a href=\"#proces\" class=\"btn-ghost\">Veure Proc\u00e9s<\/a>\n <\/div>\n <\/div>\n <div class=\"hero-image\">\n <div class=\"hero-img-wrap\">\n <img decoding=\"async\"\n src=\"https:\/\/25005.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/pemnenen.jpg\"\n alt=\"Imatge principal\"\n class=\"hero-main-img\"\n >\n <\/div>\n <div class=\"hero-frame\"><\/div>\n <\/div>\n <\/section>\n\n <!-- 2. REFERENTS -->\n <section id=\"referents\">\n <div class=\"max-w\">\n <div class=\"section-label\">02 \u2014 Referents<\/div>\n <h2>Referents<br>Visuals<\/h2>\n <div class=\"red-divider\"><\/div>\n <p style=\"max-width:520px;\">Aquests s\u00f3n els referents visuals que m\u00e9s m'han influ\u00eft i que he utilitzat com a font d'inspiraci\u00f3 per al desenvolupament del fanzine.<\/p>\n <div class=\"ref-grid\">\n\n <div class=\"ref-card fade-up\">\n <div class=\"ref-img\">\n <img decoding=\"async\" src=\"https:\/\/25005.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/xcx.jpg\" alt=\"Referent\">\n <\/div>\n <div class=\"ref-body\">\n <div class=\"ref-name\">Lamborghini Diablo<\/div>\n <p class=\"ref-desc\">El meu disseny es basa en un p\u00f2ster del Lamborghini Diablo. M'he inspirat en la seva composici\u00f3 fotogr\u00e0fica per aconseguir un efecte din\u00e0mic i esportiu, i he utilitzat la mateixa tipografia de la marca perqu\u00e8 \u00e9s la m\u00e9s elegant que existeix.<\/p>\n <\/div>\n <\/div>\n\n <div class=\"ref-card fade-up\">\n <div class=\"ref-img\">\n <img decoding=\"async\" src=\"https:\/\/25005.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/tuj.jpg\" alt=\"Referent\">\n <\/div>\n <div class=\"ref-body\">\n <div class=\"ref-name\">Cyberpunk Street Racing<\/div>\n <p class=\"ref-desc\">He basat la meva inspiraci\u00f3 per a la composici\u00f3 d'aquest poster en l'extravag\u00e0ncia i l'exageraci\u00f3 boges del tuning, mentre que el color rosa el representa per la seva energia i vibracions.<\/p>\n <\/div>\n <\/div>\n\n <div class=\"ref-card fade-up\">\n <div class=\"ref-img\">\n <img decoding=\"async\" src=\"https:\/\/25005.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/xxxzz.jpg\" alt=\"Referent\">\n <\/div>\n <div class=\"ref-body\">\n <div class=\"ref-name\">Mitsubishi Outlander<\/div>\n <p class=\"ref-desc\">D'aquesta refer\u00e8ncia m'he quedat amb els fons clars i les tipografies gruixudes i negres, ja que representen a la perfecci\u00f3 l'ess\u00e8ncia dels cotxes SUV urbans: vehicles de gran volum, robustos i potents.<\/p>\n <\/div>\n <\/div>\n\n <\/div>\n <\/div>\n <\/section>\n\n <!-- 3. PROC\u00c9S -->\n <section id=\"proces\">\n <div class=\"max-w\">\n <div class=\"process-header\">\n <div>\n <div class=\"section-label\">03 \u2014 Proc\u00e9s<\/div>\n <h2>Proc\u00e9s de<br>Treball<\/h2>\n <div class=\"red-divider\"><\/div>\n <\/div>\n <p>Documentaci\u00f3 visual de l'evoluci\u00f3 del projecte, des dels primers esbossos fins a les versions finals. Cada etapa reflecteix decisions i aprenentatges.<\/p>\n <\/div>\n\n <div class=\"process-timeline\">\n\n <div class=\"pt-item fade-up\">\n <div class=\"pt-num\">01<\/div>\n <div class=\"pt-label\">Fase 1<\/div>\n <div class=\"pt-title\">Guio narratiu<\/div>\n <p style=\"font-size:0.86rem; color:rgba(200,195,185,0.5);\">El gui\u00f3 narratiu s\u00f3n tots els textos que apareixeran al fanz\u00edn i que donaran forma i sentit.<\/p>\n <div class=\"pt-img\">\n <img decoding=\"async\" src=\"https:\/\/25005.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/guinar.jpg\" alt=\"Fase 1\" class=\"pt-real-img\">\n <\/div>\n <\/div>\n\n <div class=\"pt-item fade-up\">\n <div class=\"pt-num\">02<\/div>\n <div class=\"pt-label\">Fase 2<\/div>\n <div class=\"pt-title\">Prototip en Paper<\/div>\n <p style=\"font-size:0.86rem; color:rgba(200,195,185,0.5);\">Primeres idees i exploraci\u00f3 de conceptes de forma r\u00e0pida.<\/p>\n <div class=\"pt-img\">\n <img decoding=\"async\" src=\"https:\/\/25005.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/ChatGPT-Image-13-may-2026-11_44_43.jpg\" alt=\"Prototip\" class=\"pt-real-img\">\n <\/div>\n <\/div>\n\n <div class=\"pt-item fade-up\">\n <div class=\"pt-num\">03<\/div>\n <div class=\"pt-label\">Fase 3<\/div>\n <div class=\"pt-title\">Wireframes<\/div>\n <p style=\"font-size:0.86rem; color:rgba(200,195,185,0.5);\">Estructura i jerarquia visual gr\u00e1fica de les seccions del projecte.<\/p>\n <div class=\"pt-img\">\n <img decoding=\"async\" src=\"https:\/\/25005.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/Captura-de-pantalla-2026-05-13-a-las-11.24.15.png\" alt=\"Wireframe\" class=\"pt-real-img\">\n <\/div>\n <\/div>\n\n <div class=\"pt-item fade-up\">\n <div class=\"pt-num\">04<\/div>\n <div class=\"pt-label\">Fase 4<\/div>\n <div class=\"pt-title\">Mockups<\/div>\n <p style=\"font-size:0.86rem; color:rgba(200,195,185,0.5);\">Representaci\u00f3 visual fidel al resultat final amb color i tipografia.<\/p>\n <div class=\"pt-img\">\n <img decoding=\"async\" src=\"https:\/\/25005.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/Captura-de-pantalla-2026-05-13-a-las-11.57.33.jpg\" alt=\"Mockup\" class=\"pt-real-img\">\n <\/div>\n <\/div>\n\n <div class=\"pt-item fade-up\">\n <div class=\"pt-num\">05<\/div>\n <div class=\"pt-label\">Fase 5<\/div>\n <div class=\"pt-title\">Gui\u00f3 d'Interacci\u00f3<\/div>\n <p style=\"font-size:0.86rem; color:rgba(200,195,185,0.5);\">Definici\u00f3 dels fluxos d'usuari i les transicions entre pantalles.<\/p>\n <div class=\"pt-img\">\n <img decoding=\"async\" src=\"https:\/\/25005.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/Captura-de-pantalla-2026-05-19-a-las-9.52.24.png\" alt=\"Gui\u00f3 d'interacci\u00f3\" class=\"pt-real-img\">\n <\/div>\n <\/div>\n\n <div class=\"pt-item fade-up\">\n <div class=\"pt-num\">06<\/div>\n <div class=\"pt-label\">Fase 6<\/div>\n <div class=\"pt-title\">Versions Finals<\/div>\n <p style=\"font-size:0.86rem; color:rgba(200,195,185,0.5);\">Resultat definitiu del projecte integrant tots els elements.<\/p>\n <div class=\"pt-img\">\n <video autoplay muted loop playsinline class=\"pt-real-img\">\n <source src=\"https:\/\/25005.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/version-finallll.mp4\" type=\"video\/mp4\">\n <\/video>\n <\/div>\n <\/div>\n\n <\/div>\n <\/div>\n <\/section>\n\n <!-- 4. FANZINE -->\n <section id=\"fanzine\">\n <div class=\"max-w\">\n <div class=\"section-label\">04 \u2014 Fanzine<\/div>\n <div class=\"fanzine-layout\">\n\n <!-- CANVI: contenidor sense aspect-ratio for\u00e7at, imatge completa -->\n <div class=\"fanzine-cover fade-up\">\n <img decoding=\"async\"\n src=\"https:\/\/25005.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/ccccejcaqjdf.jpg\"\n alt=\"Versi\u00f3 final\"\n class=\"fanzine-img-full\"\n >\n <div class=\"fanzine-frame\"><\/div>\n <\/div>\n\n <div class=\"fanzine-info\">\n <h2>El Fanzine<\/h2>\n <div class=\"red-divider\"><\/div>\n <p>Accedeix al fanzine. P\u00e0gines de contingut visual i textual que articulen la proposta de forma editorial i personal.<\/p>\n <div class=\"fanzine-meta\">\n <div class=\"fanzine-meta-item\">\n <span>Format<\/span>\n <span>A5 Digital<\/span>\n <\/div>\n <div class=\"fanzine-meta-item\">\n <span>plecs<\/span>\n <span>22 p\u00e0g.<\/span>\n <\/div>\n <div class=\"fanzine-meta-item\">\n <span>Any<\/span>\n <span>2026<\/span>\n <\/div>\n <\/div>\n <a href=\"https:\/\/indd.adobe.com\/view\/dbb9787e-33da-4090-ac9e-759384455a25\" class=\"btn-primary\" target=\"_blank\" rel=\"noopener\">\n Llegir Fanzine\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" style=\"width:14px;height:14px\">\n <path d=\"M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6\"\/>\n <polyline points=\"15 3 21 3 21 9\"\/>\n <line x1=\"10\" y1=\"14\" x2=\"21\" y2=\"3\"\/>\n <\/svg>\n <\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <!-- 5. VIDEO -->\n <section id=\"video\">\n <div class=\"max-w\">\n <div class=\"section-label\">05 \u2014 V\u00eddeo Tour<\/div>\n <h2>V\u00eddeo Tour<\/h2>\n <div class=\"red-divider\"><\/div>\n <p style=\"max-width:520px; margin-bottom:0;\">A continuaci\u00f3 es pot veure un v\u00eddeo tour del projecte i tamb\u00e9 la revista interactiva, on es poden passar les p\u00e0gines i explorar el contingut de manera m\u00e9s din\u00e0mica.<\/p>\n <div class=\"video-outer\">\n <div class=\"video-border\"><\/div>\n <div class=\"video-wrap\">\n <iframe\n src=\"https:\/\/www.youtube.com\/embed\/ng79ernY5vY?rel=0&modestbranding=1&showinfo=0\"\n title=\"tour\"\n allowfullscreen>\n <\/iframe>\n <\/div>\n <div class=\"heyzine-wrap\">\n <iframe\n src=\"https:\/\/heyzine.com\/flip-book\/002a706994.html\"\n class=\"heyzine-iframe\"\n allowfullscreen\n scrolling=\"no\">\n <\/iframe>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <!-- 6. CONCLUSIONS -->\n <section id=\"conclusions\">\n <div class=\"max-w\">\n <div class=\"section-label\">06 \u2014 Conclusions<\/div>\n <h2>Reflexi\u00f3 Final<\/h2>\n <div class=\"red-divider\"><\/div>\n <div class=\"conclusions-grid\">\n <div class=\"concl-aside\">\n <div class=\"concl-aside-box fade-up\">\n <div class=\"concl-aside-label\">Aprenentatges<\/div>\n <p class=\"concl-aside-text\">He apr\u00e8s a utilitzar millor InDesign i Photoshop, sobretot per maquetar i organitzar millor els elements visuals. Tamb\u00e9 he ent\u00e8s com el disseny pot transmetre un missatge.<\/p>\n <\/div>\n <div class=\"concl-aside-box fade-up\">\n <div class=\"concl-aside-label\">Valoraci\u00f3<\/div>\n <p class=\"concl-aside-text\">Crec que el projecte ha evolucionat molt durant el proc\u00e9s i ha acabat sent m\u00e9s interessant del que imaginava. El que m\u00e9s destaca \u00e9s la identitat visual diferent de cada tipus de cotxe.<\/p>\n <\/div>\n <div class=\"concl-aside-box fade-up\">\n <div class=\"concl-aside-label\">Millores<\/div>\n <p class=\"concl-aside-text\">M'agradaria continuar millorant la part interactiva i afegir m\u00e9s animacions o recursos visuals. Tamb\u00e9 crec que es podria aprofundir m\u00e9s en alguns conceptes i ampliar el contingut.<\/p>\n <\/div>\n <\/div>\n <div class=\"concl-main\">\n <h3>Sobre el Projecte<\/h3>\n <p>El projecte final ha evolucionat molt des de la idea inicial. He intentat convertir el cat\u00e0leg de cotxes en una reflexi\u00f3 sobre els prejudicis i les identitats relacionades amb cada vehicle.\n El que millor ha funcionat \u00e9s que cada categoria t\u00e9 una imatge i un estil visual diferent, utilitzant tipografies, textures i composicions pr\u00f2pies. Tamb\u00e9 he afegit animacions i interaccions perqu\u00e8 la lectura sigui m\u00e9s din\u00e0mica.<\/p>\n <div class=\"concl-quote\">\n \"Potser un cotxe no defineix qui som, per\u00f2 s\u00ed la imatge que volem transmetre als altres.\"\n <\/div>\n <p>Durant el proc\u00e9s he canviat bastant l'estructura inicial perqu\u00e8 al principi era massa repetitiva. Aix\u00f2 m'ha ajudat a fer un projecte m\u00e9s variat i interessant. Tamb\u00e9 he apr\u00e8s a utilitzar millor InDesign i Photoshop, sobretot en maquetaci\u00f3 i organitzaci\u00f3 visual.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <!-- 7. FOOTER -->\n <footer>\n <div class=\"footer-inner\">\n <div>\n <div class=\"footer-name\">Iker Corchero Garcia<\/div>\n <div class=\"footer-course\">Disseny Gr\u00e0fic \u00b7 Curs 2025\u201326<\/div>\n <\/div>\n <div>\n <div class=\"footer-nav-title\">Navegaci\u00f3<\/div>\n <ul class=\"footer-nav\">\n <li><a href=\"#hero\">Hero \u00b7 Idea<\/a><\/li>\n <li><a href=\"#referents\">Referents<\/a><\/li>\n <li><a href=\"#proces\">Proc\u00e9s de Treball<\/a><\/li>\n <li><a href=\"#fanzine\">Fanzine<\/a><\/li>\n <li><a href=\"#video\">V\u00eddeo Tour<\/a><\/li>\n <li><a href=\"#conclusions\">Conclusions<\/a><\/li>\n <\/ul>\n <\/div>\n <div><\/div>\n <\/div>\n <\/footer>\n\n <script>\n function toggleMenu() {\n document.getElementById('navLinks').classList.toggle('open');\n }\n\n document.addEventListener('DOMContentLoaded', () => {\n const fadeObserver = new IntersectionObserver((entries) => {\n entries.forEach((entry, index) => {\n if (entry.isIntersecting) {\n setTimeout(() => entry.target.classList.add('visible'), index * 80);\n fadeObserver.unobserve(entry.target);\n }\n });\n }, { threshold: 0.1 });\n\n document.querySelectorAll('.fade-up').forEach(el => fadeObserver.observe(el));\n\n const sections = document.querySelectorAll('section[id]');\n const navAnchorLinks = document.querySelectorAll('.nav-links a');\n\n function changeActiveNav() {\n let currentSectionId = \"\";\n sections.forEach((section) => {\n const rect = section.getBoundingClientRect();\n if (rect.top <= window.innerHeight \/ 3 && rect.bottom >= window.innerHeight \/ 3) {\n currentSectionId = section.getAttribute('id');\n }\n });\n if (currentSectionId) {\n navAnchorLinks.forEach((link) => {\n link.classList.toggle('active', link.getAttribute('href') === `#${currentSectionId}`);\n });\n }\n }\n\n window.addEventListener('scroll', changeActiveNav);\n changeActiveNav();\n });\n <\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Projecte \u2014 Landing Page CS Inici Referents Proc\u00e9s Fanzine V\u00eddeo Conclusions Projecte Final de Curs CarrosseriaSocial No parlar del cotxe com a m\u00e0quina, sin\u00f3 com a mirall de qui som. El cotxe no \u00e9s nom\u00e9s un mitj\u00e0 de transport: \u00e9s una extensi\u00f3 de la identitat de la persona que el condueix. Veure Fanzine Veure Proc\u00e9s […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-11","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/25005.ooteca.artedra.net\/index.php?rest_route=\/wp\/v2\/pages\/11","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/25005.ooteca.artedra.net\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/25005.ooteca.artedra.net\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/25005.ooteca.artedra.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/25005.ooteca.artedra.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=11"}],"version-history":[{"count":192,"href":"https:\/\/25005.ooteca.artedra.net\/index.php?rest_route=\/wp\/v2\/pages\/11\/revisions"}],"predecessor-version":[{"id":249,"href":"https:\/\/25005.ooteca.artedra.net\/index.php?rest_route=\/wp\/v2\/pages\/11\/revisions\/249"}],"wp:attachment":[{"href":"https:\/\/25005.ooteca.artedra.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=11"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}