{"id":171,"date":"2026-05-25T15:33:40","date_gmt":"2026-05-25T15:33:40","guid":{"rendered":"https:\/\/wp.als080717od.hemsida.eu\/?p=171"},"modified":"2026-05-28T17:38:47","modified_gmt":"2026-05-28T17:38:47","slug":"projekt-02-css","status":"publish","type":"post","link":"https:\/\/wp.als080717od.hemsida.eu\/index.php\/2026\/05\/25\/projekt-02-css\/","title":{"rendered":"Projekt 02 &#8211; CSS"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">H\u00e4r ska jag g\u00e5 igenom den CSS som anv\u00e4nds p\u00e5 sidan.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">H\u00e4r \u00e4r den f\u00f6rsta delen av CSS:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>*,\n*::before,\n*::after {\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n}<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #D8DEE9FF\">*,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">*::before,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">*::after {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  margin: 0;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  padding: 0;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  box-sizing: border-box;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">H\u00e4r st\u00e4ller jag in att alla element har noll i marginal och 0 i padding fr\u00e5n b\u00f6rjan. Detta g\u00f6r att det blir l\u00e4ttare att s\u00e4tta eller ber\u00e4kna marginaler och padding ist\u00e4llet f\u00f6r att beh\u00f6va ta h\u00e4nsyn till vad webbl\u00e4saren g\u00f6r. Jag anv\u00e4nder border-box vilket f\u00f6renklar att best\u00e4mma storleken p\u00e5 element j\u00e4mf\u00f6rt med content-box som \u00e4r standard. D\u00e4r m\u00e5ste man ta h\u00e4nsyn till padding och border. Jag har ocks\u00e5 pseudo elementen ::before och ::after f\u00f6r att framtidss\u00e4kra om jag beh\u00f6ver anv\u00e4nda dom i framtiden. Dessa kan exempelvis anv\u00e4ndas f\u00f6r att skapa grafiska effekter.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">N\u00e4sta del \u00e4r f\u00e4rgerna:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>:root {\n  --navy-dark: #0A1628;\n  --navy-mid:  #1B3A6B;\n  --blue:      #2563EB;\n  --blue-pale: #93C5FD;\n  --blue-ghost:#E2EEFF;\n  --white:     #ffffff;\n  --off-white: #F0F6FF;\n  --text-dark: #0F172A;\n  --text-grey: #334155;\n}<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #D8DEE9FF\">:root {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  --navy-dark: #0A1628;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  --navy-mid:  #1B3A6B;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  --blue:      #2563EB;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  --blue-pale: #93C5FD;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  --blue-ghost:#E2EEFF;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  --white:     #ffffff;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  --off-white: #F0F6FF;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  --text-dark: #0F172A;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  --text-grey: #334155;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">H\u00e4r s\u00e4tter jag namn p\u00e5 olika f\u00e4rger jag vill anv\u00e4nda f\u00f6r att det ska bli l\u00e4ttare att anv\u00e4nda f\u00e4rgerna p\u00e5 olika st\u00e4llen ist\u00e4llet f\u00f6r att skriva hexkoden varje g\u00e5ng. Det blir ocks\u00e5 tydligare vilken f\u00e4rg jag anv\u00e4nder. Jag anv\u00e4nder pseudo klassen :root som inneh\u00e5ller alla andra element. D\u00e4rf\u00f6r kan jag anv\u00e4nda variablerna i resten av filen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">H\u00e4r kommer n\u00e4sta del:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>html {\n  font-size: 62.5%;\n}<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #D8DEE9FF\">html {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  font-size: 62.5%;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">I font-size s\u00e4tter jag v\u00e4rdet 62.5% i hela HTML filen, detta g\u00f6r att 1rem \u00e4r lika med 10px, ist\u00e4llet f\u00f6r 16px. 16 * 62.5% = 10. Detta g\u00f6r att det blir l\u00e4ttare att s\u00e4tta storlekar med rem och f\u00f6rst\u00e5 vad det blir i pixlar. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">N\u00e4sta del:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>body {\n  font-family: 'Inter', sans-serif;\n  font-size: 1.6rem;\n  background: var(--off-white);\n  color: var(--text-dark);\n  line-height: 1.7;\n}<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #D8DEE9FF\">body {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  font-family: &#39;Inter&#39;, sans-serif;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  font-size: 1.6rem;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  background: var(--off-white);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  color: var(--text-dark);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  line-height: 1.7;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">H\u00e4r st\u00e4ller jag in n\u00e5gra saker som g\u00e4ller f\u00f6r hela bodyn, f\u00f6rst s\u00e5 v\u00e4ljer jag vilken font som ska vara standard p\u00e5 sidan, d\u00e5 undviker jag att beh\u00f6va st\u00e4lla in fonten varje g\u00e5ng jag har anv\u00e4nt ett nytt element. Sedan v\u00e4ljer jag standard storleken p\u00e5 all text inom bodyn, allts\u00e5 storleken som den h\u00e5ller ifall jag inte \u00e4ndrar n\u00e5got. I detta fall 1.6 rem som blir 16 pixlar. Efter det s\u00e5 v\u00e4ljer jag bakgrundsf\u00e4rg p\u00e5 allt inom bodyn, det \u00e4r en av f\u00e4rgerna som jag har best\u00e4mt. Sedan best\u00e4mmer jag textf\u00e4rgen vilket \u00e4r en av dom variablerna jag best\u00e4mde. Sist s\u00e5 har jag satt line-height p\u00e5 1.7, detta \u00e4r avst\u00e5ndet mellan raderna av text, jag har \u00f6kat den f\u00f6r att \u00f6ka l\u00e4sbarheten.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">N\u00e4sta del:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>a {\n  color: inherit;\n  text-decoration: none;\n}<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #D8DEE9FF\">a {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  color: inherit;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  text-decoration: none;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Webbl\u00e4sare g\u00f6r l\u00e4nkar bl\u00e5 som standard, color: inherit g\u00f6r att f\u00e4rgen p\u00e5 en l\u00e4nk matchar omgivningen.  text-decoration: none tar bort understrecket p\u00e5 en l\u00e4nk.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">N\u00e4sta del:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>img {\n  display: block;\n  max-width: 100%;\n}<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #D8DEE9FF\">img {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  display: block;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  max-width: 100%;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Display: block; tar bort utrymmet under bilden. Max-width: 100%; g\u00f6r att bilden inte kan bli st\u00f6rre \u00e4n boxen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">N\u00e4sta del:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>h1,\nh2,\nh3 {\n  font-weight: 500;\n  line-height: 1.2;\n}<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #D8DEE9FF\">h1,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">h2,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">h3 {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  font-weight: 500;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  line-height: 1.2;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">St\u00e4ller in tjockleken p\u00e5 texten, s\u00e5 500 \u00e4r lite tjockare \u00e4n 400 som \u00e4r standard men inte helt bold. Line height 1.2 s\u00e4tter bara utrymmet mellan tv\u00e5 rader. Eftersom en rubrik \u00e4r kort s\u00e5 funkar 1.2 utm\u00e4rkt, ist\u00e4llet f\u00f6r 1.7 som \u00e4r p\u00e5 vanlig text.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">N\u00e4sta del:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>h2 {\n  font-size: 2rem;\n  color: var(--navy-mid);\n  margin-bottom: 1.6rem;\n}<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #D8DEE9FF\">h2 {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  font-size: 2rem;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  color: var(--navy-mid);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  margin-bottom: 1.6rem;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">H\u00e4r anger jag storlek, f\u00e4rg och marginal under texten p\u00e5 alla h2 headings.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">H\u00e4r har vi navbaren:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>nav {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 60px;\n  z-index: 100;\n  background: var(--navy-dark);\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0 4rem;\n}<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #D8DEE9FF\">nav {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  position: fixed;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  top: 0;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  left: 0;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  width: 100%;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  height: 60px;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  z-index: 100;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  background: var(--navy-dark);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  display: flex;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  align-items: center;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  justify-content: space-between;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  padding: 0 4rem;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Position: fixed; g\u00f6r att navbaren f\u00f6rblir synlig \u00e4ven om man skrollar l\u00e4ngre ner. top:0; g\u00f6r att navbaren hamnar helt l\u00e4ngst upp, samma sak g\u00e4ller left: 0; men att den ist\u00e4llet hamnar l\u00e4ngst \u00e5t v\u00e4nster d\u00e4r navbaren b\u00f6rjar. Width: 100%; g\u00f6r att navbaren anv\u00e4nder hela viewporten. Height: 60px; g\u00f6r ju att navbarens h\u00f6jd h\u00e5ller 60px. z-index: 100; detta g\u00f6r att navbaren alltid f\u00f6rblir l\u00e4ngst upp p\u00e5 sidan ist\u00e4llet f\u00f6r att inneh\u00e5llet renderas \u00f6ver navbaren. Sen under z-index s\u00e5 v\u00e4ljer jag en navy dark bl\u00e5 f\u00e4rg. Display: flex; g\u00f6r att l\u00e4nkarna till dom olika sidorna stackas brevid varandra ist\u00e4llet f\u00f6r att dom hamnar under varandra. align-items: center; g\u00f6r att l\u00e4nkarna\/knapparna centreras vertikalt i navbaren. justify-content: space-between; g\u00f6r att loggan hamnar l\u00e4ngst \u00e5t v\u00e4nster och att l\u00e4nkarna trycks iv\u00e4g mot h\u00f6ger sida p\u00e5 navbaren. Padding: 0 4rem; nollan g\u00f6r att det \u00e4r 0 padding vertikalt eftersom redan har centrerat elementen med align-items, 4rem g\u00f6r att det blir 40 pixlar padding p\u00e5 v\u00e4nster och h\u00f6ger sida.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Nav logo:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>nav a.logo {\n  color: var(--white);\n  font-size: 1.7rem;\n  font-weight: 500;\n}<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #D8DEE9FF\">nav a.logo {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  color: var(--white);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  font-size: 1.7rem;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  font-weight: 500;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">H\u00e4r anger jag f\u00e4rg, storlek och tjocklek.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">N\u00e4sta del:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>nav ul {\n  list-style: none;\n  display: flex;\n  gap: 0.4rem;\n}<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #D8DEE9FF\">nav ul {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  list-style: none;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  display: flex;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  gap: 0.4rem;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">list-style g\u00f6r att det inte blir n\u00e5gon punkt eller siffror p\u00e5 listan i navbaren. Det \u00e4r 4 pixlar mellan dom olika list elementen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">N\u00e4sta del:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>nav ul a {\n  color: var(--blue-ghost);\n  font-size: 1.4rem;\n  padding: 0.6rem 1.2rem;\n  border-radius: 5px;\n  transition: background 0.18s, color 0.18s;\n}<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #D8DEE9FF\">nav ul a {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  color: var(--blue-ghost);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  font-size: 1.4rem;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  padding: 0.6rem 1.2rem;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  border-radius: 5px;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  transition: background 0.18s, color 0.18s;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Vi har padding: 0.6rem 1.2rem;, detta \u00e4r f\u00f6r att skapa distans mellan l\u00e4nkarna i navbaren, f\u00f6r att g\u00f6ra det l\u00e4ttare att klicka p\u00e5 dom speciellt p\u00e5 mobila enheter, s\u00e5 det blir 6 pixlar vertikalt och 12 pixlar padding v\u00e4nster och h\u00f6ger. Border-radius g\u00f6r att kanterna blir runda p\u00e5 l\u00e4nkarna. transition element g\u00f6r att n\u00e4r musen \u00e4r \u00f6ver en l\u00e4nk s\u00e5 \u00e4ndras f\u00e4rgen p\u00e5 l\u00e4nken p\u00e5 0.18 sekunder ist\u00e4llet f\u00f6r direkt vilket ger en snyggare \u00f6verg\u00e5ng.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">N\u00e4sta del:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>nav ul a:hover,\nnav ul a.active {\n  background: var(--blue);\n  color: var(--white);\n}<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #D8DEE9FF\">nav ul a:hover,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">nav ul a.active {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  background: var(--blue);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  color: var(--white);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">\u00c4ndrar f\u00e4rgen p\u00e5 l\u00e4nkarna i navbaren n\u00e4r muspekaren st\u00e5r \u00f6ver l\u00e4nken samt visar vilken sida som man \u00e4r p\u00e5.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Banner:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>.banner {\n  background: linear-gradient(135deg, var(--navy-mid) 0%, var(--blue) 100%);\n  text-align: center;\n  color: var(--white);\n  padding: 10rem 2rem 5rem;\n}<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #D8DEE9FF\">.banner {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  background: linear-gradient(135deg, var(--navy-mid) 0%, var(--blue) 100%);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  text-align: center;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  color: var(--white);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  padding: 10rem 2rem 5rem;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Bakgrundsf\u00e4rgen \u00e4r inte den samma \u00f6ver hela bannern, det \u00e4r en linj\u00e4r \u00f6verg\u00e5ng mellan olika bl\u00e5 f\u00e4rger vilket skapar en snyggare sida som blir lite roligare. Text-align g\u00f6r att texten centreras i bannern. F\u00e4rgen \u00e4r satt vit enligt min standard. Padding \u00e4r 100 pixlar top, 20 pixlar v\u00e4nster\/h\u00f6ger och 50 pixlar l\u00e4ngst ner.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">.banner \u00e4r den delen av sidan som \u00e4r precis under navbaren men som inte inneh\u00e5ller huvudinneh\u00e5llet: <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">.banner \u00e4r den bl\u00e5a rektangelrutan med headern.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">N\u00e4sta del: <\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>.banner h1 {\n  font-size: 3.6rem;\n  margin-bottom: 1rem;\n}\n\n.banner p {\n  color: var(--blue-ghost);\n  font-size: 1.6rem;\n}<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #D8DEE9FF\">.banner h1 {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  font-size: 3.6rem;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  margin-bottom: 1rem;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">.banner p {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  color: var(--blue-ghost);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  font-size: 1.6rem;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">S\u00e4tter textstorlek, f\u00e4rger och marginaler p\u00e5 text inom .banner<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">N\u00e4sta del:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>.hero {\n  min-height: 100vh;\n  padding: 8rem 2rem 6rem;\n}<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #D8DEE9FF\">.hero {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  min-height: 100vh;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  padding: 8rem 2rem 6rem;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">H\u00e4r justerar vi minsta storleken f\u00f6r huvudinneh\u00e5llet p\u00e5 sidan (hero min-height) och padding som \u00e4r 80 pixlar top, 20pixlar v\u00e4nster\/h\u00f6ger, och 60 pixlar ner.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">N\u00e4sta del av .hero:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>.hero p.eyebrow {\n  font-size: 1.2rem;\n  letter-spacing: 0.16em;\n  text-transform: uppercase;\n  color: var(--blue-pale);\n  margin-bottom: 1.2rem;\n}<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #D8DEE9FF\">.hero p.eyebrow {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  font-size: 1.2rem;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  letter-spacing: 0.16em;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  text-transform: uppercase;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  color: var(--blue-pale);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  margin-bottom: 1.2rem;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Letter spacing \u00e4r satt p\u00e5 0.16em, allts\u00e5 16% av font size vilket \u00e4r 1.92px. text-transform: uppercase; g\u00f6r att all text \u00e4r versaler. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">N\u00e4sta av .hero:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>.hero h1 {\n  font-size: 4.8rem;\n  margin-bottom: 1.6rem;\n}<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #D8DEE9FF\">.hero h1 {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  font-size: 4.8rem;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  margin-bottom: 1.6rem;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">S\u00e4tter text storlek och marginaler p\u00e5 h1 header i hero elementet.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">N\u00e4sta av .hero:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>.hero p.sub {\n  font-size: 1.8rem;\n  max-width: 52rem;\n  margin: 0 auto 2.4rem;\n  opacity: 0.9;\n}<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #D8DEE9FF\">.hero p.sub {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  font-size: 1.8rem;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  max-width: 52rem;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  margin: 0 auto 2.4rem;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  opacity: 0.9;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">S\u00e4tter maxbredd av texten under huvudinneh\u00e5llet till max 52rem eller 520 pixlar, detta g\u00f6r att texten radbryter oftare och inte blir en j\u00e4ttel\u00e5ng text sidleds som i den f\u00f6rsta versionen av Paolos webb. Opacity s\u00e4tter genomskinligheten p\u00e5 texten.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">N\u00e4sta del av .hero:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>.hero img {\n  width: 14rem;\n  height: 14rem;\n  border-radius: 50%;\n  object-fit: cover;\n  border: 3px solid rgba(255, 255, 255, 0.3);\n  margin: 3rem auto 0;\n}<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #D8DEE9FF\">.hero img {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  width: 14rem;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  height: 14rem;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  border-radius: 50%;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  object-fit: cover;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  border: 3px solid rgba(255, 255, 255, 0.3);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  margin: 3rem auto 0;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">L\u00e4ngst upp anges h\u00f6jd och bredd. Under s\u00e4tter jag radien p\u00e5 bordern till 50% av boxen vilket g\u00f6r att bilden ser ut som en cirkel. object-fit: cover; g\u00f6r att att bilden passar i cirkel bordern och att allt som hamnar utanf\u00f6r klipps bort. Border: g\u00f6r att det skapas en vit ring runt bilden med 30% genomskinlighet.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">N\u00e4sta del av CSS filen:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>.btn {\n  display: inline-block;\n  padding: 1rem 2.4rem;\n  border: 1px solid var(--white);\n  border-radius: 6px;\n  color: var(--white);\n  font-size: 1.5rem;\n  font-weight: 500;\n  transition: background 0.18s;\n}\n\n.btn:hover {\n  background: rgba(255, 255, 255, 0.15);\n}<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #D8DEE9FF\">.btn {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  display: inline-block;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  padding: 1rem 2.4rem;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  border: 1px solid var(--white);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  border-radius: 6px;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  color: var(--white);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  font-size: 1.5rem;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  font-weight: 500;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  transition: background 0.18s;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">.btn:hover {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  background: rgba(255, 255, 255, 0.15);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">.btn eller button, l\u00e4ngst upp anger jag att display: inline-block;, det g\u00f6r att de element som ska se ut som knappar hamnar i linje med texten. Knapparna har en vit border men ingen bakgrund vilket g\u00f6r att knappen blir transparent. Jag anv\u00e4nder igen transition f\u00f6r att skapa en animation.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">.btn:hover g\u00f6r att jag kan best\u00e4mma vad som h\u00e4nder med elementet n\u00e4r muspekaren st\u00e5r \u00f6ver knappen, i detta fall blir bakgrunden vit med en genomskinlighet p\u00e5 15%.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">N\u00e4sta del \u00e4r .content:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>.content {\n  max-width: 96rem;\n  margin: 0 auto;\n  padding: 6rem 4rem;\n}<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #D8DEE9FF\">.content {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  max-width: 96rem;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  margin: 0 auto;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  padding: 6rem 4rem;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">.content \u00e4r huvudinneh\u00e5llet p\u00e5 sidan inom maintaggen med max bredd 96rem vilket \u00e4r 960 pixlar, marginal 0 \u00f6ver och auto p\u00e5 h\u00f6ger och v\u00e4nster sida. Padding 60 pixlar \u00f6ver och 40 pixlar v\u00e4nster\/h\u00f6ger sida.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Nu card-grid:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>.card-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(28rem, 1fr));\n  gap: 2.4rem;\n}<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #D8DEE9FF\">.card-grid {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  display: grid;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  grid-template-columns: repeat(auto-fit, minmax(28rem, 1fr));<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  gap: 2.4rem;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">H\u00e4r skapar jag en grid som anv\u00e4nds f\u00f6r att gruppera korten. Den skapar kolumner som \u00e4r minst 280 pixlar men som kan v\u00e4xa om utrymmet beh\u00f6ver fyllas. Med auto-fit skapar den s\u00e5 m\u00e5nga kolumner som f\u00e5r plats. Det \u00e4r 24px mellanrum mellan korten.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">N\u00e4sta del av card:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>.card {\n  background: var(--white);\n  border: 1px solid rgba(37, 99, 235, 0.15);\n  border-radius: 10px;\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n}\n\n.card:hover {\n  border-color: var(--blue);\n}<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #D8DEE9FF\">.card {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  background: var(--white);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  border: 1px solid rgba(37, 99, 235, 0.15);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  border-radius: 10px;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  overflow: hidden;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  display: flex;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  flex-direction: column;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">.card:hover {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  border-color: var(--blue);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">H\u00e4r applicerar jag stilen p\u00e5 korten. Overflow:hidden; g\u00f6r s\u00e5 korten inte hamnar utanf\u00f6r den runda ramen. N\u00e4r musen h\u00e5lls \u00f6ver ett kort \u00e4ndras f\u00e4rgen p\u00e5 ramen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">.card img:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>.card img {\n  width: 100%;\n  height: 18rem;\n  object-fit: contain;\n  background: var(--off-white);\n  padding: 2rem;\n}<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #D8DEE9FF\">.card img {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  width: 100%;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  height: 18rem;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  object-fit: contain;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  background: var(--off-white);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  padding: 2rem;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">H\u00e4r appliceras stilen p\u00e5 bilderna. object-fit: contain; justerar bilden s\u00e5 att den f\u00e5r plats inom kortet.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">.card-body:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>.card-body {\n  padding: 2rem;\n  flex: 1;\n}\n\n.card-body h2 {\n  font-size: 1.8rem;\n  margin-bottom: 0.8rem;\n}\n\n.card-body p {\n  color: var(--text-grey);\n  font-size: 1.5rem;\n}<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #D8DEE9FF\">.card-body {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  padding: 2rem;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  flex: 1;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">.card-body h2 {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  font-size: 1.8rem;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  margin-bottom: 0.8rem;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">.card-body p {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  color: var(--text-grey);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  font-size: 1.5rem;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">H\u00e4r \u00e4r flex satt till 1. Det g\u00f6r s\u00e5 att alla korten blir lika h\u00f6ga oavsett m\u00e4ngden text. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">.intro:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>.intro {\n  font-size: 1.8rem;\n  color: var(--text-grey);\n  max-width: 64rem;\n  margin-bottom: 3.2rem;\n}<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #D8DEE9FF\">.intro {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  font-size: 1.8rem;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  color: var(--text-grey);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  max-width: 64rem;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  margin-bottom: 3.2rem;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Applicerar stilen p\u00e5 texten som handlar om Paolo (om.html).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">.table:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>table {\n  border-collapse: collapse;\n  max-width: 52rem;\n  width: 100%;\n  margin-bottom: 4rem;\n}\n\nth,\ntd {\n  padding: 1rem 1.4rem;\n  border-bottom: 1px solid rgba(37, 99, 235, 0.15);\n  text-align: left;\n}\n\nth {\n  color: #64748B;\n  font-size: 1.3rem;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  width: 14rem;\n}\n\ntd a {\n  color: var(--blue);\n}\n\ntd a:hover {\n  color: var(--navy-mid);\n}<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #D8DEE9FF\">table {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  border-collapse: collapse;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  max-width: 52rem;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  width: 100%;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  margin-bottom: 4rem;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">th,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">td {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  padding: 1rem 1.4rem;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  border-bottom: 1px solid rgba(37, 99, 235, 0.15);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  text-align: left;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">th {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  color: #64748B;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  font-size: 1.3rem;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  text-transform: uppercase;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  letter-spacing: 0.05em;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  width: 14rem;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">td a {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  color: var(--blue);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">td a:hover {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  color: var(--navy-mid);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">H\u00e4r appliceras stilen f\u00f6r tabellen som anv\u00e4nds f\u00f6r Paolos kontaktuppgifter. Border-collapse: collapse; anv\u00e4nds f\u00f6r att det inte ska bli dubbla linjer d\u00e4r cellerna m\u00f6ts. All text omvandlas till versaler med text-transform: uppercase;. L\u00e4nkar f\u00e4rgas bl\u00e5tt och f\u00e4rgen p\u00e5 l\u00e4nkarna \u00e4ndras n\u00e4r muspekaren st\u00e5r \u00f6ver med hj\u00e4lp av hover.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">N\u00e4sta form och label:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>form {\n  max-width: 56rem;\n}\n\nlabel {\n  display: block;\n  font-size: 1.3rem;\n  font-weight: 500;\n  color: #64748B;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  margin-bottom: 0.5rem;\n}<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #D8DEE9FF\">form {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  max-width: 56rem;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">label {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  display: block;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  font-size: 1.3rem;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  font-weight: 500;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  color: #64748B;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  text-transform: uppercase;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  letter-spacing: 0.05em;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  margin-bottom: 0.5rem;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">H\u00e4r appliceras stilen p\u00e5 labels i kontaktformul\u00e4ret. Jag har satt en maxbredd f\u00f6r att det inte ska bli f\u00f6r brett. Jag anv\u00e4nder ocks\u00e5 display: block s\u00e5 att texten hamnar ovanf\u00f6r f\u00e4ltet d\u00e4r man fyller i text.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">N\u00e4sta del:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>input,\ntextarea {\n  display: block;\n  width: 100%;\n  font-family: 'Inter', sans-serif;\n  font-size: 1.5rem;\n  color: var(--text-dark);\n  background: var(--white);\n  border: 1px solid #CBD5E1;\n  border-radius: 6px;\n  padding: 1rem 1.4rem;\n  margin-bottom: 1.6rem;\n}\n\ninput:focus,\ntextarea:focus {\n  outline: none;\n  border-color: var(--blue);\n  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);\n}\n\ntextarea {\n  height: 14rem;\n  resize: vertical;\n}\n\nbutton&#91;type=\"submit\"&#93; {\n  font-family: 'Inter', sans-serif;\n  font-size: 1.5rem;\n  font-weight: 500;\n  color: var(--white);\n  background: var(--blue);\n  border: none;\n  border-radius: 6px;\n  padding: 1.1rem 2.6rem;\n  cursor: pointer;\n  transition: background 0.18s;\n}\n\nbutton&#91;type=\"submit\"&#93;:hover {\n  background: var(--navy-mid);\n}<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #D8DEE9FF\">input,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">textarea {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  display: block;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  width: 100%;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  font-family: &#39;Inter&#39;, sans-serif;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  font-size: 1.5rem;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  color: var(--text-dark);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  background: var(--white);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  border: 1px solid #CBD5E1;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  border-radius: 6px;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  padding: 1rem 1.4rem;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  margin-bottom: 1.6rem;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">input:focus,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">textarea:focus {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  outline: none;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  border-color: var(--blue);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">textarea {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  height: 14rem;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  resize: vertical;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">button&#91;type=&quot;submit&quot;&#93; {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  font-family: &#39;Inter&#39;, sans-serif;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  font-size: 1.5rem;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  font-weight: 500;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  color: var(--white);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  background: var(--blue);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  border: none;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  border-radius: 6px;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  padding: 1.1rem 2.6rem;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  cursor: pointer;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  transition: background 0.18s;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">button&#91;type=&quot;submit&quot;&#93;:hover {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  background: var(--navy-mid);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">H\u00e4r appliceras stilen p\u00e5 textf\u00e4lten in formul\u00e4ret. Input: focus och text-area: focus anv\u00e4nds f\u00f6r att visa anv\u00e4ndaren vilket f\u00e4lt som \u00e4r aktivt. Jag anv\u00e4nder button[type=&#8221;submit&#8221;] f\u00f6r att applicera en stil p\u00e5 knappen. F\u00e4rgen p\u00e5 knappen \u00e4ndras n\u00e4r man h\u00e5ller musen \u00f6ver den. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Footer och media query:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>footer {\n  background: var(--navy-dark);\n  padding: 1.6rem 4rem;\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n}\n\nfooter p {\n  color: var(--blue-ghost);\n  font-size: 1.3rem;\n}\n\n@media (max-width: 600px) {\n  nav {\n    padding: 0 1.6rem;\n  }\n\n  nav a.logo {\n    font-size: 1.4rem;\n  }\n\n  nav ul a {\n    padding: 0.5rem 0.7rem;\n    font-size: 1.2rem;\n  }\n\n  .banner {\n    padding: 8rem 2rem 4rem;\n  }\n\n  .banner h1 {\n    font-size: 2.8rem;\n  }\n\n  .hero h1 {\n    font-size: 3.2rem;\n  }\n\n  .content {\n    padding: 4rem 2rem;\n  }\n\n  .card-grid {\n    grid-template-columns: 1fr;\n  }\n\n  footer {\n    padding: 1.6rem 2rem;\n  }\n}<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #D8DEE9FF\">footer {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  background: var(--navy-dark);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  padding: 1.6rem 4rem;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  display: flex;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  align-items: center;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  justify-content: flex-end;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">footer p {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  color: var(--blue-ghost);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  font-size: 1.3rem;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">@media (max-width: 600px) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  nav {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    padding: 0 1.6rem;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  }<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  nav a.logo {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    font-size: 1.4rem;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  }<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  nav ul a {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    padding: 0.5rem 0.7rem;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    font-size: 1.2rem;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  }<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  .banner {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    padding: 8rem 2rem 4rem;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  }<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  .banner h1 {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    font-size: 2.8rem;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  }<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  .hero h1 {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    font-size: 3.2rem;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  }<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  .content {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    padding: 4rem 2rem;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  }<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  .card-grid {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    grid-template-columns: 1fr;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  }<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  footer {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    padding: 1.6rem 2rem;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">H\u00e4r appliceras stilen f\u00f6r footern. Jag har en media query som anv\u00e4nds f\u00f6r sk\u00e4rmar 600px eller l\u00e4gre f\u00f6r att justera storlekar och padding. Den justerar ocks\u00e5 s\u00e5 att det blir f\u00e4rre kolumner i card-grid.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>H\u00e4r ska jag g\u00e5 igenom den CSS som anv\u00e4nds p\u00e5 sidan. H\u00e4r \u00e4r den f\u00f6rsta delen av CSS: H\u00e4r st\u00e4ller jag in att alla element har noll i marginal och 0 i padding fr\u00e5n b\u00f6rjan. Detta g\u00f6r att det blir l\u00e4ttare att s\u00e4tta eller ber\u00e4kna marginaler och padding ist\u00e4llet f\u00f6r att beh\u00f6va ta h\u00e4nsyn till [&hellip;]<\/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-171","post","type-post","status-publish","format-standard","hentry","category-projekt02"],"_links":{"self":[{"href":"https:\/\/wp.als080717od.hemsida.eu\/index.php\/wp-json\/wp\/v2\/posts\/171","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wp.als080717od.hemsida.eu\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wp.als080717od.hemsida.eu\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wp.als080717od.hemsida.eu\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wp.als080717od.hemsida.eu\/index.php\/wp-json\/wp\/v2\/comments?post=171"}],"version-history":[{"count":16,"href":"https:\/\/wp.als080717od.hemsida.eu\/index.php\/wp-json\/wp\/v2\/posts\/171\/revisions"}],"predecessor-version":[{"id":250,"href":"https:\/\/wp.als080717od.hemsida.eu\/index.php\/wp-json\/wp\/v2\/posts\/171\/revisions\/250"}],"wp:attachment":[{"href":"https:\/\/wp.als080717od.hemsida.eu\/index.php\/wp-json\/wp\/v2\/media?parent=171"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wp.als080717od.hemsida.eu\/index.php\/wp-json\/wp\/v2\/categories?post=171"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wp.als080717od.hemsida.eu\/index.php\/wp-json\/wp\/v2\/tags?post=171"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}