Begin implementing go serverHEAD main

author: Mathias Magnusson <mathias@magnusson.space> 2025-08-25 14:55:07 +0200
committer: Mathias Magnusson <mathias@magnusson.space> 2025-08-25 14:58:26 +0200
commit: fb59ea2f57da2abf3c7bd76feddfaf10e109d2f4 (patch)
tree: a6d7dad7faf61fc50172ee5ac706497b07d7afd2 /public
parent: 5391b4a7b69c7fea5df6fa658c67ec683a94cea3 (diff)
download: traedgaardstomten-fb59ea2f57da2abf3c7bd76feddfaf10e109d2f4.tar.gz
13 files changed, 256 insertions, 0 deletions
diff --git a/public/OpenSans-Italic-VariableFont_wdth,wght.ttf b/public/OpenSans-Italic-VariableFont_wdth,wght.ttf
new file mode 100644
index 0000000..67a1ac7
--- /dev/null
+++ b/public/OpenSans-Italic-VariableFont_wdth,wght.ttf
diff --git a/public/OpenSans-VariableFont_wdth,wght.ttf b/public/OpenSans-VariableFont_wdth,wght.ttf
new file mode 100644
index 0000000..548c15f
--- /dev/null
+++ b/public/OpenSans-VariableFont_wdth,wght.ttf
diff --git a/public/images/efter-1.jpg b/public/images/efter-1.jpg
new file mode 100644
index 0000000..784111f
--- /dev/null
+++ b/public/images/efter-1.jpg
diff --git a/public/images/efter-3.jpg b/public/images/efter-3.jpg
new file mode 100644
index 0000000..7720e09
--- /dev/null
+++ b/public/images/efter-3.jpg
diff --git a/public/images/efter-4.jpg b/public/images/efter-4.jpg
new file mode 100644
index 0000000..d07eafd
--- /dev/null
+++ b/public/images/efter-4.jpg
diff --git a/public/images/före-1.jpg b/public/images/före-1.jpg
new file mode 100644
index 0000000..d953313
--- /dev/null
+++ b/public/images/före-1.jpg
diff --git a/public/images/före-3.jpg b/public/images/före-3.jpg
new file mode 100644
index 0000000..3965218
--- /dev/null
+++ b/public/images/före-3.jpg
diff --git a/public/images/före-4.jpg b/public/images/före-4.jpg
new file mode 100644
index 0000000..48b5a69
--- /dev/null
+++ b/public/images/före-4.jpg
diff --git a/public/images/lucas.jpg b/public/images/lucas.jpg
new file mode 100644
index 0000000..669c4cf
--- /dev/null
+++ b/public/images/lucas.jpg
diff --git a/public/index.html b/public/index.html
new file mode 100644
index 0000000..71f63a1
--- /dev/null
+++ b/public/index.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="sv">
+<head>
+    <meta charset="UTF-8">
+    <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>Trädgårdstomten ✂️</p>
+        </section>
+        <nav>
+            <a href="/">Tjänster</a>
+            <a href="/omdömen.html">Omdömen</a>
+            <a href="/kontakt.html">Kontakt</a>
+        </nav>
+    </header>
+    <main>
+        <article>
+                <p style="grid-area: p1">
+                    Jag heter Lucas Magnusson, är 26 år gammal och har flera års yrkeserfarenhet och
+                    är även utbildad inom trädgård. Jag har alltid varit intresserad av allt som
+                    växer. Så tidigt som vid 3 års ålder började jag trycka ner frön i jorden.
+                    Trädgård är och har alltid varit mitt största intresse, min hobby och det jag nu
+                    jobbar med. 
+                </p>
+                <p style="grid-area: p2">
+                    Sedan jag slutade gymnasiet (2018) har jag drivit eget företag. Jag har åkt runt
+                    till trädgårdar och beskurit, klippt häck, fixat med skötsel, designat och
+                    planterat. Jag tycker det är så kul att dela med mig av den glädjen till mina
+                    kunder. </p> 
+                <p style="grid-area: p3">
+                    Här är några jobb jag gjort, se före och efter bilder:
+                </p>
+                <img src="/images/lucas.jpg" alt="Lucas Magnusson">
+        </article>
+        <section>
+            <img src="/images/före-1.jpg">
+            <img src="/images/efter-1.jpg">
+        </section>
+        <section>
+            <img src="/images/före-3.jpg">
+            <img src="/images/efter-3.jpg">
+        </section>
+        <section>
+            <img src="/images/före-4.jpg">
+            <img src="/images/efter-4.jpg">
+        </section>
+    </main>
+</body>
+</html>
diff --git a/public/kontakt.html b/public/kontakt.html
new file mode 100644
index 0000000..4e8b2ac
--- /dev/null
+++ b/public/kontakt.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="sv">
+<head>
+    <meta charset="UTF-8">
+    <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>Trädgårdstomten ✂️</p>
+        </section>
+        <nav>
+            <a href="/">Tjänster</a>
+            <a href="/omdömen.html">Omdömen</a>
+            <a href="/kontakt.html">Kontakt</a>
+        </nav>
+    </header>
+    <main>
+        <p>Kontakta mig gärna så hör jag av mig så fort jag kan!</p>
+        <br>
+        <p>Telefonnummer: <a href="tel:+46 76 595 99 19">+46 76 595 99 19</a></p>
+        <p>E-postadress: <a href="mailto:lucas253magnusson@gmail.com">lucas253magnusson@gmail.com</a></p>
+    </main>
+</body>
+</html>
diff --git a/public/omdömen.html b/public/omdömen.html
new file mode 100644
index 0000000..1b295ea
--- /dev/null
+++ b/public/omdömen.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="sv">
+<head>
+    <meta charset="UTF-8">
+    <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">
+    <script src="https://unpkg.com/hyperscript.org@0.9.14" crossorigin="anonymous"
+        integrity="sha384-NzchC8z9HmP/Ed8cheGl9XuSrFSkDNHPiDl+ujbHE0F0I7tWC4rUnwPXP+7IvVZv"></script>
+</head>
+<body>
+    <header>
+        <section>
+            <p>Trädgårdstomten ✂️</p>
+        </section>
+        <nav>
+            <a href="/">Tjänster</a>
+            <a href="/omdömen.html">Omdömen</a>
+            <a href="/kontakt.html">Kontakt</a>
+        </nav>
+    </header>
+    <main>
+        <div class="height-transition-wrapper">
+            <form>
+                <label for="name">Namn:</label>
+                <input type="text" name="name" id="name">
+                <br>
+                <label for="review">Omdöme:</label>
+                <textarea name="review" id="review"></textarea>
+                <br>
+                <button>Skicka!</button>
+            </form>
+        </div>
+        <button _="
+            on click
+            toggle .open on previous <div/>
+            if (previous <div/>) match .open then
+                set my.innerText to 'Stäng formulär'
+            else
+                set my.innerText to 'Lämna ett omdöme'
+        ">Lämna ett omdöme</button>
+    </main>
+</body>
+</html>
diff --git a/public/style.css b/public/style.css
new file mode 100644
index 0000000..6f145db
--- /dev/null
+++ b/public/style.css
@@ -0,0 +1,129 @@
+* {
+    margin: 0;
+    box-sizing: border-box;
+}
+
+@font-face {
+    font-family: "OpenSans";
+    src: url(/OpenSans-VariableFont_wdth,wght.ttf);
+}
+
+:root {
+    --night: #0c090b;
+    --pink: #ea46c5;
+    --beige: #e9eddd;
+    --rose: #9e0012;
+
+    --green: #5a851c;
+    --green-1: #486a16;
+    --green-2: #364f10;
+
+    color: var(--night);
+}
+
+body {
+    font-family: OpenSans;
+    background-color: #eee;
+}
+
+header section {
+    padding-block: 0.6em;
+    text-align: center;
+    font-size: 32px;
+    background-color: var(--green);
+    display: grid;
+    place-items: center;
+    color: var(--beige);
+}
+
+@media (min-width: 500px) {
+    header section {
+        font-size: 48px;
+    }
+}
+
+header nav {
+    display: flex;
+    justify-content: center;
+    background-color: var(--green-1);
+    gap: 0.5em;
+}
+
+header nav a, header nav a:visited {
+    padding: 0.5em 1em;
+    color: var(--beige);
+    text-decoration: none;
+}
+
+main {
+    padding: 2em;
+    padding-top: 4em;
+    max-width: 1000px;
+    margin-inline: auto;
+}
+
+main article {
+    padding-bottom: 4em;
+    display: grid;
+    gap: 2em;
+    grid-template-columns: auto;
+    grid-template-areas: "p1" "img" "p2" "p3";
+}
+
+@media (min-width: 500px) {
+    main article {
+        grid-template-columns: auto auto;
+        grid-template-areas: "p1 img" "p2 p2" "p3 p3";
+    }
+}
+
+@media (min-width: 650px) {
+    main article {
+        grid-template-areas: "p1 img" "p2 img" "p3 img";
+    }
+}
+
+main article img {
+    max-width: 220px;
+    height: auto;
+    object-fit: contain;
+    grid-area: img;
+}
+
+main section {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1em;
+    padding-bottom: 3em;
+}
+
+main section img {
+    width: 100%;
+    height: auto;
+}
+
+button {
+    background-color: var(--green);
+    border: none;
+    border-radius: 4px;
+    padding: 0.5em;
+    color: var(--beige);
+}
+
+button:active {
+    background-color: var(--green-1);
+}
+
+.height-transition-wrapper {
+    display: grid;
+    grid-template-rows: 0fr;
+    transition: grid-template-rows 0.3s ease-in-out;
+}
+
+.height-transition-wrapper.open {
+    grid-template-rows: 1fr;
+}
+
+.height-transition-wrapper > * {
+    overflow: hidden;
+}
author	Mathias Magnusson <mathias@magnusson.space>	2025-08-25 14:55:07 +0200
committer	Mathias Magnusson <mathias@magnusson.space>	2025-08-25 14:58:26 +0200
commit	fb59ea2f57da2abf3c7bd76feddfaf10e109d2f4 (patch)
tree	a6d7dad7faf61fc50172ee5ac706497b07d7afd2 /public
parent	5391b4a7b69c7fea5df6fa658c67ec683a94cea3 (diff)
download	traedgaardstomten-fb59ea2f57da2abf3c7bd76feddfaf10e109d2f4.tar.gz