Exercise

wesweb01/contacts_SLIM_practiceht21/data/user_data.csv

@@ -0,0 +1,19 @@
+87d3ba71-96ba-443e-99e9-5fb8cf98ed2b,Aisha Bui,aisha.bui@evilcorp.com,555-309-6145,Management
+dfd73c26-625a-468e-a1da-ff30e9af40df,Annelie Reinsch,annelie.reinsch@evilcorp.com,555-177-4703,Management
+90322934-a851-45ce-ac0c-f7ded0a38df8,Barb Silva,barb.silva@evilcorp.com,555-375-7169,Finance
+25561405-6280-4b9d-865f-2b1aca3bd4b1,Blake Robertson,blake.robertson@evilcorp.com,555-362-1574,IT-Support
+b9652654-12e2-4871-ba14-2e369bf9c4ef,Christina Holland,christina.holland@evilcorp.com,555-261-1207,Management
+5f99f26b-f024-4868-b56e-cb592a11ca69,Clementine Jongejans,clementine.jongejans@evilcorp.com,555-917-1377,Management
+b3a9cf09-4d88-47a5-9f46-96c313d9ff41,Heather Bennett,heather.bennett@evilcorp.com,555-415-5403,Marketing
+4e2e7912-66e4-4ac0-8268-cb467c249550,Jakob Crawford,jakob.crawford@evilcorp.com,555-205-4367,Management
+e3b1c2a2-4490-48df-82ee-527798db4148,Juan Waibel,juan.waibel@evilcorp.com,555-372-3003,Marketing
+daa08996-544a-4348-8bb3-0948c40ddd38,Leah Watkins,leah.watkins@evilcorp.com,555-733-1745,Marketing
+0356d34f-ff82-4ff8-8ede-d65c993b70d1,Leander Tomren,leander.tomren@evilcorp.com,555-595-2552,Finance
+dc9d1972-d9ef-4543-9f1b-4b4f89997a9f,Margareta Hopf,margareta.hopf@evilcorp.com,555-225-9715,Management
+9aea9836-61df-47ef-9561-dc3d7c47cfea,Merith Dickhoff,merith.dickhoff@evilcorp.com,555-813-6954,Finance
+6ef0e720-c43e-4a51-9fe2-a396d2787ea8,Naftali Schoones,naftali.schoones@evilcorp.com,555-375-7869,IT-Support
+44ee211b-62fd-4c07-99db-9552942cf43e,Nelia Fjellstad,nelia.fjellstad@evilcorp.com,555-644-3612,Management
+b0c37ad6-69a3-45d7-90e7-b06de3fe79af,Noelle Hotvedt,noelle.hotvedt@evilcorp.com,555-731-9991,IT-Support
+54290795-bde0-40e9-a6aa-2e88b80dd308,Nova Balstad,nova.balstad@evilcorp.com,555-364-6232,IT-Support
+98fb9c5b-9f02-473d-afe3-06e144353a9c,Raisa Brendel,raisa.brendel@evilcorp.com,555-081-3350,IT-Support
+a23ad6d2-f722-48d1-b267-0305b8fa638f,Rolf Hofbauer,rolf.hofbauer@evilcorp.com,555-012-5343,Marketing

wesweb01/contacts_SLIM_practiceht21/data/user_data2.csv

@@ -0,0 +1,10 @@
+4db7ebe0-0ebd-432d-a9ea-03106f8c5094,Abby Davidson,abby.davidson@evilcorp.com,555-220-6327,Finance
+d20e8f0b-7b5a-4adc-bf67-c9b4034a07a8,Bella Steinsland,bella.steinsland@evilcorp.com,555-553-2263,Finance
+4d76997d-89b4-42a8-be6f-2320eb981763,Bernhard Buchner,bernhard.buchner@evilcorp.com,555-567-3916,Management
+8f52a735-4710-468f-b562-9f2ded7888cd,Carla Strand,carla.strand@evilcorp.com,555-436-3801,IT-Support
+0cc61e19-294a-4861-b3a7-3c9030185330,Elizabeth Byrd,elizabeth.byrd@evilcorp.com,555-674-7621,Finance
+b13788a4-2244-43df-b0e0-61f567aabd95,Hubertus Mehlhorn,hubertus.mehlhorn@evilcorp.com,555-363-7710,Management
+7d1c0004-073e-4fce-a1b5-03c05b936c1f,Ismet Lehmann,ismet.lehmann@evilcorp.com,555-003-5750,Management
+3b3a5b47-cb74-4c99-b8f4-4239122b8e62,Julie Kausar,julie.kausar@evilcorp.com,555-636-5986,Management
+a45fd7cf-5f86-490d-ab18-264be4d0e826,Steffi Reuther,steffi.reuther@evilcorp.com,555-480-7872,Finance
+fbb70d1f-24f9-4dda-935f-56b648e4f799,Vedran Slaman,vedran.slaman@evilcorp.com,555-091-9805,Marketing

wesweb01/contacts_SLIM_practiceht21/main.rb

@@ -0,0 +1,35 @@
+#!/usr/bin/ruby 
+
+require "sinatra"
+require "slim"
+
+get("/") do
+
+	# 1: Hämta alla data ifrån "data/user_data.csv"
+	lines = File.readlines("data/user_data.csv")
+
+	# 2: Gör om datastrukturen till en ny dubbelarray
+	double_array = lines.map do | human_string |
+		human_string.split(",")
+	end
+
+	# 3: Skapa ännu en ny array som innehåller 1 dictionary/anställd
+
+	array_with_hashes = double_array.map do | human_array |
+		human = {
+			image_src: human_array[0],
+			name: human_array[1],
+			mail: human_array[2],
+			phone: human_array[3],
+			department: human_array[4]
+		}
+	end
+	# 4: Kolla hur data är strukturerad
+	p array_with_hashes 
+
+	# 5: Skapa SLIM-kod i slim-filerna (/viems/)
+
+	# 6: Här skapas html mha slim. Dictionaryn "data_hash" skickas med (alla anställda)
+	slim(:grillkorv, locals:{banankey:array_with_hashes}) #:index är namnet på slim-fil. datahash är en dictionary vi skickar.
+
+end

wesweb01/contacts_SLIM_practiceht21/public/contacts.html

@@ -0,0 +1,283 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta content="width=device-width, initial-scale=1.0" name="viewport" />
+    <meta content="ie=edge" http-equiv="X-UA-Compatible" />
+    <title>Document</title>
+    <link href="css/style.css" rel="stylesheet" />
+  </head>
+  <body>
+    <div class="wrapper">
+      <header><h1>EVIL CORP</h1></header>
+      <main>
+        <article class="user-card">
+          <div class="profile-img">
+            <img
+              alt="Aisha Bui"
+              src="img/87d3ba71-96ba-443e-99e9-5fb8cf98ed2b.jpg"
+            />
+          </div>
+          <div class="info">
+            <label class="name">Aisha Bui</label
+            ><label class="email">aisha.bui@evilcorp.com</label
+            ><label class="tel">555-309-6145</label
+            ><label class="department">Management</label>
+          </div>
+        </article>
+        <article class="user-card">
+          <div class="profile-img">
+            <img
+              alt="Annelie Reinsch"
+              src="img/dfd73c26-625a-468e-a1da-ff30e9af40df.jpg"
+            />
+          </div>
+          <div class="info">
+            <label class="name">Annelie Reinsch</label
+            ><label class="email">annelie.reinsch@evilcorp.com</label
+            ><label class="tel">555-177-4703</label
+            ><label class="department">Management</label>
+          </div>
+        </article>
+        <article class="user-card">
+          <div class="profile-img">
+            <img
+              alt="Barb Silva"
+              src="img/90322934-a851-45ce-ac0c-f7ded0a38df8.jpg"
+            />
+          </div>
+          <div class="info">
+            <label class="name">Barb Silva</label
+            ><label class="email">barb.silva@evilcorp.com</label
+            ><label class="tel">555-375-7169</label
+            ><label class="department">Finance</label>
+          </div>
+        </article>
+        <article class="user-card">
+          <div class="profile-img">
+            <img
+              alt="Blake Robertson"
+              src="img/25561405-6280-4b9d-865f-2b1aca3bd4b1.jpg"
+            />
+          </div>
+          <div class="info">
+            <label class="name">Blake Robertson</label
+            ><label class="email">blake.robertson@evilcorp.com</label
+            ><label class="tel">555-362-1574</label
+            ><label class="department">IT-Support</label>
+          </div>
+        </article>
+        <article class="user-card">
+          <div class="profile-img">
+            <img
+              alt="Christina Holland"
+              src="img/b9652654-12e2-4871-ba14-2e369bf9c4ef.jpg"
+            />
+          </div>
+          <div class="info">
+            <label class="name">Christina Holland</label
+            ><label class="email">christina.holland@evilcorp.com</label
+            ><label class="tel">555-261-1207</label
+            ><label class="department">Management</label>
+          </div>
+        </article>
+        <article class="user-card">
+          <div class="profile-img">
+            <img
+              alt="Clementine Jongejans"
+              src="img/5f99f26b-f024-4868-b56e-cb592a11ca69.jpg"
+            />
+          </div>
+          <div class="info">
+            <label class="name">Clementine Jongejans</label
+            ><label class="email">clementine.jongejans@evilcorp.com</label
+            ><label class="tel">555-917-1377</label
+            ><label class="department">Management</label>
+          </div>
+        </article>
+        <article class="user-card">
+          <div class="profile-img">
+            <img
+              alt="Heather Bennett"
+              src="img/b3a9cf09-4d88-47a5-9f46-96c313d9ff41.jpg"
+            />
+          </div>
+          <div class="info">
+            <label class="name">Heather Bennett</label
+            ><label class="email">heather.bennett@evilcorp.com</label
+            ><label class="tel">555-415-5403</label
+            ><label class="department">Marketing</label>
+          </div>
+        </article>
+        <article class="user-card">
+          <div class="profile-img">
+            <img
+              alt="Jakob Crawford"
+              src="img/4e2e7912-66e4-4ac0-8268-cb467c249550.jpg"
+            />
+          </div>
+          <div class="info">
+            <label class="name">Jakob Crawford</label
+            ><label class="email">jakob.crawford@evilcorp.com</label
+            ><label class="tel">555-205-4367</label
+            ><label class="department">Management</label>
+          </div>
+        </article>
+        <article class="user-card">
+          <div class="profile-img">
+            <img
+              alt="Juan Waibel"
+              src="img/e3b1c2a2-4490-48df-82ee-527798db4148.jpg"
+            />
+          </div>
+          <div class="info">
+            <label class="name">Juan Waibel</label
+            ><label class="email">juan.waibel@evilcorp.com</label
+            ><label class="tel">555-372-3003</label
+            ><label class="department">Marketing</label>
+          </div>
+        </article>
+        <article class="user-card">
+          <div class="profile-img">
+            <img
+              alt="Leah Watkins"
+              src="img/daa08996-544a-4348-8bb3-0948c40ddd38.jpg"
+            />
+          </div>
+          <div class="info">
+            <label class="name">Leah Watkins</label
+            ><label class="email">leah.watkins@evilcorp.com</label
+            ><label class="tel">555-733-1745</label
+            ><label class="department">Marketing</label>
+          </div>
+        </article>
+        <article class="user-card">
+          <div class="profile-img">
+            <img
+              alt="Leander Tomren"
+              src="img/0356d34f-ff82-4ff8-8ede-d65c993b70d1.jpg"
+            />
+          </div>
+          <div class="info">
+            <label class="name">Leander Tomren</label
+            ><label class="email">leander.tomren@evilcorp.com</label
+            ><label class="tel">555-595-2552</label
+            ><label class="department">Finance</label>
+          </div>
+        </article>
+        <article class="user-card">
+          <div class="profile-img">
+            <img
+              alt="Margareta Hopf"
+              src="img/dc9d1972-d9ef-4543-9f1b-4b4f89997a9f.jpg"
+            />
+          </div>
+          <div class="info">
+            <label class="name">Margareta Hopf</label
+            ><label class="email">margareta.hopf@evilcorp.com</label
+            ><label class="tel">555-225-9715</label
+            ><label class="department">Management</label>
+          </div>
+        </article>
+        <article class="user-card">
+          <div class="profile-img">
+            <img
+              alt="Merith Dickhoff"
+              src="img/9aea9836-61df-47ef-9561-dc3d7c47cfea.jpg"
+            />
+          </div>
+          <div class="info">
+            <label class="name">Merith Dickhoff</label
+            ><label class="email">merith.dickhoff@evilcorp.com</label
+            ><label class="tel">555-813-6954</label
+            ><label class="department">Finance</label>
+          </div>
+        </article>
+        <article class="user-card">
+          <div class="profile-img">
+            <img
+              alt="Naftali Schoones"
+              src="img/6ef0e720-c43e-4a51-9fe2-a396d2787ea8.jpg"
+            />
+          </div>
+          <div class="info">
+            <label class="name">Naftali Schoones</label
+            ><label class="email">naftali.schoones@evilcorp.com</label
+            ><label class="tel">555-375-7869</label
+            ><label class="department">IT-Support</label>
+          </div>
+        </article>
+        <article class="user-card">
+          <div class="profile-img">
+            <img
+              alt="Nelia Fjellstad"
+              src="img/44ee211b-62fd-4c07-99db-9552942cf43e.jpg"
+            />
+          </div>
+          <div class="info">
+            <label class="name">Nelia Fjellstad</label
+            ><label class="email">nelia.fjellstad@evilcorp.com</label
+            ><label class="tel">555-644-3612</label
+            ><label class="department">Management</label>
+          </div>
+        </article>
+        <article class="user-card">
+          <div class="profile-img">
+            <img
+              alt="Noelle Hotvedt"
+              src="img/b0c37ad6-69a3-45d7-90e7-b06de3fe79af.jpg"
+            />
+          </div>
+          <div class="info">
+            <label class="name">Noelle Hotvedt</label
+            ><label class="email">noelle.hotvedt@evilcorp.com</label
+            ><label class="tel">555-731-9991</label
+            ><label class="department">IT-Support</label>
+          </div>
+        </article>
+        <article class="user-card">
+          <div class="profile-img">
+            <img
+              alt="Nova Balstad"
+              src="img/54290795-bde0-40e9-a6aa-2e88b80dd308.jpg"
+            />
+          </div>
+          <div class="info">
+            <label class="name">Nova Balstad</label
+            ><label class="email">nova.balstad@evilcorp.com</label
+            ><label class="tel">555-364-6232</label
+            ><label class="department">IT-Support</label>
+          </div>
+        </article>
+        <article class="user-card">
+          <div class="profile-img">
+            <img
+              alt="Raisa Brendel"
+              src="img/98fb9c5b-9f02-473d-afe3-06e144353a9c.jpg"
+            />
+          </div>
+          <div class="info">
+            <label class="name">Raisa Brendel</label
+            ><label class="email">raisa.brendel@evilcorp.com</label
+            ><label class="tel">555-081-3350</label
+            ><label class="department">IT-Support</label>
+          </div>
+        </article>
+        <article class="user-card">
+          <div class="profile-img">
+            <img
+              alt="Rolf Hofbauer"
+              src="img/a23ad6d2-f722-48d1-b267-0305b8fa638f.jpg"
+            />
+          </div>
+          <div class="info">
+            <label class="name">Rolf Hofbauer</label
+            ><label class="email">rolf.hofbauer@evilcorp.com</label
+            ><label class="tel">555-012-5343</label
+            ><label class="department">Marketing</label>
+          </div>
+        </article>
+      </main>
+    </div>
+  </body>
+</html>

wesweb01/contacts_SLIM_practiceht21/public/css/style.css

@@ -0,0 +1,49 @@
+body{
+    margin: 0;
+    display: grid;
+    place-content: center;
+    background: linear-gradient(to right, #ebf1f6 0%,#abd3ee 50%,#89c3eb 51%,#d5ebfb 100%);
+    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+    font-size: 1.2em;
+}
+
+header{
+    text-align: center;
+    color: white;
+    width: 100%;
+    background-color: rgba(255,255,255,0.5);
+    padding: 20px;
+    box-sizing: border-box;
+}
+
+h2{
+    color: white;
+    border-bottom: 2px solid white;
+    padding-bottom: 10px;
+}
+
+article{
+    color: gray;
+    box-shadow: 0px 2px 12px 0px rgba(0,0,0,0.42);
+    margin: 20px;
+    padding: 35px;
+    width: 500px;
+    display: grid;
+    grid-template-columns: auto auto;
+    background-color: #fff;
+}
+
+article img{
+    border-radius: 50%;
+}
+
+article .info{
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    border-left: 1px solid lightgray;
+}
+
+article label{
+    margin: 5px 20px 5px 0;
+}

wesweb01/contacts_SLIM_practiceht21/public/departments.html

@@ -0,0 +1,287 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta content="width=device-width, initial-scale=1.0" name="viewport" />
+    <meta content="ie=edge" http-equiv="X-UA-Compatible" />
+    <title>Document</title>
+    <link href="css/style.css" rel="stylesheet" />
+  </head>
+  <body>
+    <div class="wrapper">
+      <header><h1>EVIL CORP</h1></header>
+      <main>
+        <h2>Management</h2>
+        <article class="user-card">
+          <div class="profile-img">
+            <img
+              alt="Aisha Bui"
+              src="img/87d3ba71-96ba-443e-99e9-5fb8cf98ed2b.jpg"
+            />
+          </div>
+          <div class="info">
+            <label class="name">Aisha Bui</label
+            ><label class="email">aisha.bui@evilcorp.com</label
+            ><label class="tel">555-309-6145</label
+            ><label class="department">Management</label>
+          </div>
+        </article>
+        <article class="user-card">
+          <div class="profile-img">
+            <img
+              alt="Annelie Reinsch"
+              src="img/dfd73c26-625a-468e-a1da-ff30e9af40df.jpg"
+            />
+          </div>
+          <div class="info">
+            <label class="name">Annelie Reinsch</label
+            ><label class="email">annelie.reinsch@evilcorp.com</label
+            ><label class="tel">555-177-4703</label
+            ><label class="department">Management</label>
+          </div>
+        </article>
+        <article class="user-card">
+          <div class="profile-img">
+            <img
+              alt="Christina Holland"
+              src="img/b9652654-12e2-4871-ba14-2e369bf9c4ef.jpg"
+            />
+          </div>
+          <div class="info">
+            <label class="name">Christina Holland</label
+            ><label class="email">christina.holland@evilcorp.com</label
+            ><label class="tel">555-261-1207</label
+            ><label class="department">Management</label>
+          </div>
+        </article>
+        <article class="user-card">
+          <div class="profile-img">
+            <img
+              alt="Clementine Jongejans"
+              src="img/5f99f26b-f024-4868-b56e-cb592a11ca69.jpg"
+            />
+          </div>
+          <div class="info">
+            <label class="name">Clementine Jongejans</label
+            ><label class="email">clementine.jongejans@evilcorp.com</label
+            ><label class="tel">555-917-1377</label
+            ><label class="department">Management</label>
+          </div>
+        </article>
+        <article class="user-card">
+          <div class="profile-img">
+            <img
+              alt="Jakob Crawford"
+              src="img/4e2e7912-66e4-4ac0-8268-cb467c249550.jpg"
+            />
+          </div>
+          <div class="info">
+            <label class="name">Jakob Crawford</label
+            ><label class="email">jakob.crawford@evilcorp.com</label
+            ><label class="tel">555-205-4367</label
+            ><label class="department">Management</label>
+          </div>
+        </article>
+        <article class="user-card">
+          <div class="profile-img">
+            <img
+              alt="Margareta Hopf"
+              src="img/dc9d1972-d9ef-4543-9f1b-4b4f89997a9f.jpg"
+            />
+          </div>
+          <div class="info">
+            <label class="name">Margareta Hopf</label
+            ><label class="email">margareta.hopf@evilcorp.com</label
+            ><label class="tel">555-225-9715</label
+            ><label class="department">Management</label>
+          </div>
+        </article>
+        <article class="user-card">
+          <div class="profile-img">
+            <img
+              alt="Nelia Fjellstad"
+              src="img/44ee211b-62fd-4c07-99db-9552942cf43e.jpg"
+            />
+          </div>
+          <div class="info">
+            <label class="name">Nelia Fjellstad</label
+            ><label class="email">nelia.fjellstad@evilcorp.com</label
+            ><label class="tel">555-644-3612</label
+            ><label class="department">Management</label>
+          </div>
+        </article>
+        <h2>Finance</h2>
+        <article class="user-card">
+          <div class="profile-img">
+            <img
+              alt="Barb Silva"
+              src="img/90322934-a851-45ce-ac0c-f7ded0a38df8.jpg"
+            />
+          </div>
+          <div class="info">
+            <label class="name">Barb Silva</label
+            ><label class="email">barb.silva@evilcorp.com</label
+            ><label class="tel">555-375-7169</label
+            ><label class="department">Finance</label>
+          </div>
+        </article>
+        <article class="user-card">
+          <div class="profile-img">
+            <img
+              alt="Leander Tomren"
+              src="img/0356d34f-ff82-4ff8-8ede-d65c993b70d1.jpg"
+            />
+          </div>
+          <div class="info">
+            <label class="name">Leander Tomren</label
+            ><label class="email">leander.tomren@evilcorp.com</label
+            ><label class="tel">555-595-2552</label
+            ><label class="department">Finance</label>
+          </div>
+        </article>
+        <article class="user-card">
+          <div class="profile-img">
+            <img
+              alt="Merith Dickhoff"
+              src="img/9aea9836-61df-47ef-9561-dc3d7c47cfea.jpg"
+            />
+          </div>
+          <div class="info">
+            <label class="name">Merith Dickhoff</label
+            ><label class="email">merith.dickhoff@evilcorp.com</label
+            ><label class="tel">555-813-6954</label
+            ><label class="department">Finance</label>
+          </div>
+        </article>
+        <h2>IT-Support</h2>
+        <article class="user-card">
+          <div class="profile-img">
+            <img
+              alt="Blake Robertson"
+              src="img/25561405-6280-4b9d-865f-2b1aca3bd4b1.jpg"
+            />
+          </div>
+          <div class="info">
+            <label class="name">Blake Robertson</label
+            ><label class="email">blake.robertson@evilcorp.com</label
+            ><label class="tel">555-362-1574</label
+            ><label class="department">IT-Support</label>
+          </div>
+        </article>
+        <article class="user-card">
+          <div class="profile-img">
+            <img
+              alt="Naftali Schoones"
+              src="img/6ef0e720-c43e-4a51-9fe2-a396d2787ea8.jpg"
+            />
+          </div>
+          <div class="info">
+            <label class="name">Naftali Schoones</label
+            ><label class="email">naftali.schoones@evilcorp.com</label
+            ><label class="tel">555-375-7869</label
+            ><label class="department">IT-Support</label>
+          </div>
+        </article>
+        <article class="user-card">
+          <div class="profile-img">
+            <img
+              alt="Noelle Hotvedt"
+              src="img/b0c37ad6-69a3-45d7-90e7-b06de3fe79af.jpg"
+            />
+          </div>
+          <div class="info">
+            <label class="name">Noelle Hotvedt</label
+            ><label class="email">noelle.hotvedt@evilcorp.com</label
+            ><label class="tel">555-731-9991</label
+            ><label class="department">IT-Support</label>
+          </div>
+        </article>
+        <article class="user-card">
+          <div class="profile-img">
+            <img
+              alt="Nova Balstad"
+              src="img/54290795-bde0-40e9-a6aa-2e88b80dd308.jpg"
+            />
+          </div>
+          <div class="info">
+            <label class="name">Nova Balstad</label
+            ><label class="email">nova.balstad@evilcorp.com</label
+            ><label class="tel">555-364-6232</label
+            ><label class="department">IT-Support</label>
+          </div>
+        </article>
+        <article class="user-card">
+          <div class="profile-img">
+            <img
+              alt="Raisa Brendel"
+              src="img/98fb9c5b-9f02-473d-afe3-06e144353a9c.jpg"
+            />
+          </div>
+          <div class="info">
+            <label class="name">Raisa Brendel</label
+            ><label class="email">raisa.brendel@evilcorp.com</label
+            ><label class="tel">555-081-3350</label
+            ><label class="department">IT-Support</label>
+          </div>
+        </article>
+        <h2>Marketing</h2>
+        <article class="user-card">
+          <div class="profile-img">
+            <img
+              alt="Heather Bennett"
+              src="img/b3a9cf09-4d88-47a5-9f46-96c313d9ff41.jpg"
+            />
+          </div>
+          <div class="info">
+            <label class="name">Heather Bennett</label
+            ><label class="email">heather.bennett@evilcorp.com</label
+            ><label class="tel">555-415-5403</label
+            ><label class="department">Marketing</label>
+          </div>
+        </article>
+        <article class="user-card">
+          <div class="profile-img">
+            <img
+              alt="Juan Waibel"
+              src="img/e3b1c2a2-4490-48df-82ee-527798db4148.jpg"
+            />
+          </div>
+          <div class="info">
+            <label class="name">Juan Waibel</label
+            ><label class="email">juan.waibel@evilcorp.com</label
+            ><label class="tel">555-372-3003</label
+            ><label class="department">Marketing</label>
+          </div>
+        </article>
+        <article class="user-card">
+          <div class="profile-img">
+            <img
+              alt="Leah Watkins"
+              src="img/daa08996-544a-4348-8bb3-0948c40ddd38.jpg"
+            />
+          </div>
+          <div class="info">
+            <label class="name">Leah Watkins</label
+            ><label class="email">leah.watkins@evilcorp.com</label
+            ><label class="tel">555-733-1745</label
+            ><label class="department">Marketing</label>
+          </div>
+        </article>
+        <article class="user-card">
+          <div class="profile-img">
+            <img
+              alt="Rolf Hofbauer"
+              src="img/a23ad6d2-f722-48d1-b267-0305b8fa638f.jpg"
+            />
+          </div>
+          <div class="info">
+            <label class="name">Rolf Hofbauer</label
+            ><label class="email">rolf.hofbauer@evilcorp.com</label
+            ><label class="tel">555-012-5343</label
+            ><label class="department">Marketing</label>
+          </div>
+        </article>
+      </main>
+    </div>
+  </body>
+</html>

wesweb01/contacts_SLIM_practiceht21/views/layout.slim

@@ -0,0 +1,16 @@
+doctype html
+html lang="en"
+  head
+    meta charset="UTF-8"/
+    meta name="viewport" content="width=device-width, initial-scale=1.0"/
+    title Ewil Corp.
+    link rel="stylesheet" href="css/style.css"/
+  body
+    .wrapper
+      header
+        h1 Evil Corp
+      main
+        == yield
+
+
+