Exempel:Det här blocket visar en responsiv prissättningstabell för AINNOVA:s tjänster. Tabellen är mobilanpassad och har tydliga färger, hover-effekter och tillgänglighetsattribut.
Lägg in koden i en Notion-codeblock, gärna med kommentarer direkt i koden:
xml*<!-- Grundläggande HTML-struktur -->* <!DOCTYPE html> <html lang="sv"> <head> *<!-- Teckenkodning och mobilvänlighet -->* <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> *<!-- SEO och sociala medier -->* <meta name="description" content="AINNOVAs överskådliga prissättning ..."> <meta property="og:title" content="AINNOVA | Våra ERBJUDANDEN på ett silverfat"> *<!-- Färger och typsnitt -->* <link rel="stylesheet" href="<https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Montserrat:wght@700&display=swap>"> <style> /* CSS-variabler för färger – lätt att byta tema */ :root { --primary-blue: #007BBF; --button-green: #80CB45; --button-green-hover: #3A8C2D;
`--black: #333333;
--white: #FFFFFF;
}
/* Reset och grundstilar */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: 'Lato', sans-serif; }
/* ...resten av CSS... */
</style> </head> <body> <!-- Wrapper för sidans innehåll --> <div class="ainnova-wrapper" id="top" role="main"> <div class="container"> <h1>AINNOVA | Våra ERBJUDANDEN på ett silverfat</h1> <!-- Prissättningstabell --> <div class="table-title" id="table-title">AINNOVAs prissättning ...</div> <div class="table-container"> <table role="grid" aria-labelledby="table-title"> <!-- ...tabellrader... --> </table> </div> <!-- CTA-cirklar och back-to-top-länk --> <nav class="cta-circles"> <a href="..." class="cta-circle">AINNOVA</a> <!-- ...fler länkar... --> </nav> <a href="#top" class="back-to-top" tabindex="0">Opp till topps bestemor!</a> </div> </div> <!-- Enkel JS för smooth scroll --> <script> document.querySelector('.back-to-top').addEventListener('click', function(e) { e.preventDefault(); document.getElementById('top').scrollIntoView({ behavior: 'smooth' }); }); </script> </body> </html>`
<div class="ainnova-wrapper" id="top" role="main">
Wrapper för hela sidans innehåll. role="main" hjälper skärmläsare hitta huvudinnehållet.
Tabellen är byggd så att den visas som klassisk tabell på desktop och som "kort" (cards) på mobil.
Detta görs via CSS med @media (max-width: 768px) där tabellrader blir grid och varje rad får en egen rubrik via tr::before.
:root { ... }) vilket gör det lätt att byta tema eller anpassa för olika varumärken..cta-circle använder border-radius: 50% och animationen pulse för att dra blickarna till sig.Opp till topps bestemor! är både humoristisk och användbar.