4 files changed, 40 insertions, 0 deletions
diff --git a/OpenSans-Italic-VariableFont_wdth,wght.ttf b/OpenSans-Italic-VariableFont_wdth,wght.ttf
new file mode 100644
index 0000000..67a1ac7
--- /dev/null
+++ b/OpenSans-Italic-VariableFont_wdth,wght.ttf
diff --git a/OpenSans-VariableFont_wdth,wght.ttf b/OpenSans-VariableFont_wdth,wght.ttf
new file mode 100644
index 0000000..548c15f
--- /dev/null
+++ b/OpenSans-VariableFont_wdth,wght.ttf
diff --git a/index.html b/index.html
index 4b16e30..4c651ca 100644
--- a/index.html
+++ b/index.html
@@ -5,14 +5,21 @@
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>Trädgårdstomten.se</title>
+        <link rel="stylesheet" href="/style.css">
     </head>
     <body>
         <header>
+            <section>
+                <p><i>Trädgårdstomten</i> ✂️</p>
+            </section>
             <nav>
                 <a href="/">Hem</a>
                 <a href="#">Kontakt</a>
                 <a href="#">Om</a>
             </nav>
         </header>
+        <main>
+            <img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fmedia.istockphoto.com%2Fid%2F1276959334%2Fsv%2Fvektor%2Fvarningsskylt-med-symbol-f%25C3%25B6r-v%25C3%25A4garbeten.jpg%3Fs%3D170667a%26w%3D0%26k%3D20%26c%3Deu_R8EfjsmJL23wAgwiTYZma3NPnxKoCiKRDDeEKLsA%3D&f=1&nofb=1&ipt=d1cacf3ffad01b7159a201c2652b36aa73febb8dfd4e2fbe12fa0eb260d7af5c">
+        </main>
     </body>
 </html>
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..28c2567
--- /dev/null
+++ b/style.css
@@ -0,0 +1,33 @@
+* {
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+}
+
+@font-face {
+    font-family: "OpenSans";
+    src: url(/OpenSans-VariableFont_wdth,wght.ttf);
+}
+
+body {
+    font-family: OpenSans;
+}
+
+header {
+    text-align: center;
+}
+
+header section {
+    padding-block: 2em;
+    font-size: 24px;
+}
+
+header nav a, header nav a:visited {
+    color: green;
+    text-decoration: none;
+}
+
+main {
+    padding-block: 2em;
+    text-align: center;
+}