Instruktioner för infografik

Skapa en komplett, inklistringsbar HTML- och CSS-infografik för en Squarespace-sida. Utgå från mitt innehåll nedan och behåll alla formuleringar exakt som jag har skrivit dem. Ändra inte, förkorta inte och korrekturläs inte texten om jag inte uttryckligen ber om det.

Visuell stil:

  • Typsnitt: DM Sans via Google Fonts, med vikterna 300, 400, 500, 700 och 800.

  • Ren, lugn och professionell design. Infografiken ska kännas som en del av samma webbplats, inte som en separat presentation.

  • Ingen skugga, inga illustrationer, inga överdrivna effekter och inga dekorativa element som inte hjälper läsningen.

  • Använd rundade hörn på kort: 8–10 px. Tunna ljusa ramar och luft mellan elementen.

  • Låt innehållet styra formen: processer kan visas som numrerade kort eller steg, jämförelser som kort eller kolumner och samband som tydliga grupper. Välj alltid den enklaste form som gör innehållet lätt att förstå.

Färger:

  • Mörkt petrol: #1E4B58 för huvudrubriker, primära markeringar och mörka fasband.

  • Grönt: #3D8B5F för positiva eller individuella delar.

  • Guld: #C08A2E för valfria delar, undantag eller kompletterande steg.

  • Ljusgrönt band: #EAF1F0.

  • Ljusgul bakgrund för valfria kort: #FCF7E8.

  • Vita kort: #FFFFFF.

  • Tunna ramar: #DCE5E7.

  • All vanlig text och förklarande text ska vara svart: #000000. Använd inte grå text.

  • Rubriker kan vara petrol eller mycket mörk blågrön: #22333B.

Typografi:

  • Huvudrubrik: ungefär 29 pt, vikt 800.

  • Kortens rubriker: ungefär 19,5 pt, vikt 800.

  • Brödtext och ingress: ungefär 19 pt, vikt 400.

  • Etiketter, teckenförklaringar och fasband: 13–16 pt.

  • På mobil ska brödtexten aldrig bli mindre än 17 pt.

  • Om texten blir lång ska korten bli högre eller staplas på varandra. Minska inte texten för att få plats.

Tekniska krav:

  • Skriv all CSS inom en unik wrapper-klass för just denna infografik, till exempel .infografik-process eller .infografik-jamforelse.

  • Använd inte globala CSS-regler för body, html eller :root, eftersom infografiken inte får påverka övriga delar av Squarespace-sidan.

  • Infografiken ska vara helt responsiv: flera kort per rad på större skärm och en kolumn på mobil.

  • Använd semantisk HTML, till exempel header, rubriker, listor och kort.

  • Skriv hela den färdiga koden i ett enda HTML-kodblock, inklusive eventuell Google Fonts-länk och CSS.

  • Ge ingen förklaring före eller efter koden.

  • Ändra inget annat än det jag ber om om jag senare skickar tillbaka koden för justering.

Mitt innehåll och eventuell önskad struktur:

[KListra in rubrik, text och eventuella önskemål här]