Intro text & image

5 files changed, 53 insertions, 21 deletions

diff --git a/images/efter-2.jpg b/images/efter-2.jpg
deleted file mode 100644
index c9d1db4..0000000
--- a/images/efter-2.jpg
+++ /dev/null
diff --git a/images/före-2.jpg b/images/före-2.jpg
deleted file mode 100644
index fdea22c..0000000
--- a/images/före-2.jpg
+++ /dev/null
diff --git a/images/lucas.jpg b/images/lucas.jpg
new file mode 100644
index 0000000..669c4cf
--- /dev/null
+++ b/images/lucas.jpg
diff --git a/index.html b/index.html
index 4b97ee6..e829e43 100644
--- a/index.html
+++ b/index.html
@@ -14,32 +14,41 @@
         </section>
         <nav>
             <a href="/">Tjänster</a>
-            <a href="/">Om mig</a>
             <a href="/">Omdömen</a>
             <a href="/">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">
-            <p>Se på fan va' snygg buskfan blev!</p>
-        </article>
-        <article>
-            <img src="/images/före-2.jpg">
-            <img src="/images/efter-2.jpg">
-            <p>O la la, så stiligt!</p>
-        </article>
-        <article>
+        </section>
+        <section>
             <img src="/images/före-3.jpg">
             <img src="/images/efter-3.jpg">
-            <p>Wow, en massa grenar försvann!</p>
-        </article>
-        <article>
+        </section>
+        <section>
             <img src="/images/före-4.jpg">
             <img src="/images/efter-4.jpg">
-            <p>Kolla, inte bara beskärning, utan även fint väder ordnas här!</p>
-        </article>
+        </section>
     </main>
 </body>
 </html>
diff --git a/style.css b/style.css
index 3faee62..327d962 100644
--- a/style.css
+++ b/style.css
@@ -1,5 +1,4 @@
 * {
-    padding: 0;
     margin: 0;
     box-sizing: border-box;
 }
@@ -24,6 +23,7 @@
 
 body {
     font-family: OpenSans;
+    background-color: #eee;
 }
 
 header section {
@@ -52,22 +52,45 @@ header nav a, header nav a:visited {
 main {
     padding: 2em;
     max-width: 1000px;
-    text-align: center;
     margin-inline: auto;
 }
 
 main article {
+    padding-bottom: 2em;
     display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 0.5em 1em;
+    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 {
-    width: 100%;
+    max-width: 220px;
     height: auto;
+    object-fit: contain;
+    grid-area: img;
 }
 
-main article p {
-    grid-column: 1 / -1;
+main section {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 0.5em 1em;
     padding-bottom: 1.2em;
 }
+
+main section img {
+    width: 100%;
+    height: auto;
+}