Added about

src/app/about/about.component.html

@@ -1,2 +1,11 @@
-<img src="assets/logo.svg" alt="sfeerfoto" />
-<span>Mijn naam is Lotte. Ik ben grafischvormgever in hart en nieren. Ondertussenkan ik met trots zeggen dat ik eendecennium ervaring heb als vormgever.Het begon als experimenteren met hetAdobe-pakket en is uitgegroeid tot eenpassie die ik nooit meer wil loslaten.</span>
+<div class="contents">
+  <p>Ingrediënten voor 10 jaar ervaring</p>
+  <p>Indesign<span>10 kg</span></p>
+  <p>> educatief zetwerk<span>10kg</span></p>
+  <p>> catalogi<span>1 cup</span></p>
+  <p>> magazines<span>27 tbsp</span></p>
+  <p>Illustrator<span>500ml</span></p>
+  <p>> verpakkingen<span>14 oz</span></p>
+  <p>een scheut UX en UI<span>1/2 cup</span></p>
+  <p>een mespuntje video<span>2 inch</span></p>
+</div>

src/app/about/about.component.scss

@@ -4,11 +4,28 @@
   justify-content: space-between;
 }
 
-img {
-  width: 30%;
-  max-height: 10rem;
+.contents {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-template-rows: repeat(5, 3rem);
+  grid-column-gap: 4rem;
+  grid-row-gap: 0;
+  width: calc(100% - 2rem);
+  align-items: center;
+
+  p {
+    margin: 0;
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    padding: 1rem;
+    border-bottom: 0.1rem solid black;
   }
 
-span {
-  width: 50%;
+  p:first-child {
+    grid-column: 1 / 3;
+    background-color: var(--text-color);
+    color: var(--background-color);
+    font-weight: 500;
+  }
 }

src/app/app.component.scss

@@ -1,6 +1,6 @@
 .wrapper {
-  width: 80%;
-  max-width: 80rem;
+  max-width: 55rem;
+  padding: 0 2rem;
   margin: 0 auto;
 
   > * {