Stuff

wesweb01/annonser_SLIM_practiceht21/app.rb

@@ -0,0 +1,49 @@
+require 'sinatra'
+require 'slim'
+
+get('/') do
+
+  
+
+  # 1: Hämta alla data ifrån 'data/user_data.csv'
+  lines = File.readlines('data/annonser.csv')
+  
+
+  # 2: Gör om datastrukturen till en ny dubbelarray. Tips: map, split.
+  
+  double_array = lines.map do |string|
+    string.chomp.split "," 
+  end
+
+  p double_array 
+
+  # 3: Utgå från dubbellarrayen (#2) och skapa ännu
+  # en ny array som innehåller 1 dictionary/anställd. Tips: map
+
+  array_with_hashes = []
+  double_array.each do |item|
+    itemhash = {}
+    itemhash[:index] = item[0].to_i
+    itemhash[:email] = item[1]
+    itemhash[:id] = item[2]
+    itemhash[:price] = item[3]
+    itemhash[:name] = item[4]
+    itemhash[:animal] = item[5]
+    itemhash[:city] = item[6]
+    itemhash[:avatar] = item[7]
+
+    array_with_hashes << itemhash
+  end
+
+  # 4: Kolla hur data är strukturerad
+  p array_with_hashes 
+
+  # 5: Här anropar du slim (:grillkorv). I locals skickar du med array_with_hashes
+
+  slim(:grillkorv, locals:{items: array_with_hashes})
+
+  # 6: Finslipa SLIM-kod i slim-filerna så att resultatet efterliknar
+  # html-koden i evilthsirts.html (ligger i public-mappen)
+
+end
+

wesweb01/annonser_SLIM_practiceht21/data/annonser.csv

@@ -0,0 +1,30 @@
+1,htallyn0@japanpost.jp,siban0,€36.86,Blazer,Oncorhynchus nerka,Passagem,https://robohash.org/ametasperioresqui.png?size=50x50&set=set1
+2,kambroix1@mit.edu,schrystal1,€36.18,CC,Acinynox jubatus,Kobuleti,https://robohash.org/laborumdelenitiexercitationem.png?size=50x50&set=set1
+3,aferrieroi2@ihg.com,ttoke2,€24.58,X-90,Theropithecus gelada,Quixadá,https://robohash.org/fugafaceredolorem.png?size=50x50&set=set1
+4,dodeoran3@paypal.com,dstafford3,€17.76,GLK-Class,Delphinus delphis,Apače,https://robohash.org/sitconsequaturdolor.png?size=50x50&set=set1
+5,gstanyon4@economist.com,sslinn4,€12.25,Club Wagon,Porphyrio porphyrio,Biryulëvo,https://robohash.org/nisinonlabore.png?size=50x50&set=set1
+6,kbeneteau5@slashdot.org,kgeorgins5,€10.71,Elantra,Marmota monax,Kimito,https://robohash.org/ducimusillout.png?size=50x50&set=set1
+7,mgillibrand6@howstuffworks.com,elashmar6,€44.05,Tracker,Geochelone elegans,Lleida,https://robohash.org/etquamodit.png?size=50x50&set=set1
+8,vlicence7@theguardian.com,hmattusevich7,€26.84,Legacy,Ephippiorhynchus mycteria,Meipu,https://robohash.org/idvelitsunt.png?size=50x50&set=set1
+9,hshepheard8@earthlink.net,apankettman8,€13.87,Baja,Dicrostonyx groenlandicus,Bondy,https://robohash.org/doloremqueteneturexercitationem.png?size=50x50&set=set1
+10,pjerche9@dmoz.org,hfeatherbie9,€10.33,F-Series,Castor canadensis,Xiajiashan,https://robohash.org/fugiatvelitvoluptas.png?size=50x50&set=set1
+11,mbrasteada@domainmarket.com,dcosbya,€34.92,LS,Colaptes campestroides,Itupiranga,https://robohash.org/praesentiumvoluptatemvel.png?size=50x50&set=set1
+12,dcraigb@creativecommons.org,wlackneyb,€31.45,Prius,Merops sp.,Kamigyō-ku,https://robohash.org/rationeautrecusandae.png?size=50x50&set=set1
+13,ooffordc@shutterfly.com,fmarneyc,€24.07,Miata MX-5,Isoodon obesulus,Paidha,https://robohash.org/temporequiquia.png?size=50x50&set=set1
+14,mellisd@redcross.org,cgarletted,€40.56,A4,Acrantophis madagascariensis,Capalonga,https://robohash.org/exoditatque.png?size=50x50&set=set1
+15,pbouttone@imgur.com,hsowreye,€27.34,Freestar,Francolinus swainsonii,Zduńska Wola,https://robohash.org/minusaccusantiumperspiciatis.png?size=50x50&set=set1
+16,dfaulderf@uol.com.br,lpeakerf,€11.82,Avenger,Conolophus subcristatus,Canha,https://robohash.org/atqueperferendisqui.png?size=50x50&set=set1
+17,kdurmang@harvard.edu,ebrislandg,€29.89,del Sol,Pteropus rufus,Naval,https://robohash.org/reiciendisexplicaborepellat.png?size=50x50&set=set1
+18,shambrighth@altervista.org,theartfieldh,€10.53,Town & Country,Uraeginthus angolensis,Langnga,https://robohash.org/facilisnontotam.png?size=50x50&set=set1
+19,dgomersali@merriam-webster.com,rfillgatei,€36.16,Regal,Pitangus sulphuratus,Rujewa,https://robohash.org/fugitnonexercitationem.png?size=50x50&set=set1
+20,cbentjej@about.com,mfancetj,€41.47,911,Columba livia,Granja,https://robohash.org/magnidelectusex.png?size=50x50&set=set1
+21,bdargank@home.pl,zstrankk,€31.44,Mustang,unavailable,Masjed Soleymān,https://robohash.org/estetimpedit.png?size=50x50&set=set1
+22,dmcgralel@hp.com,cbrumhaml,€41.75,Ram,Anser anser,Mokotów,https://robohash.org/etipsammolestiae.png?size=50x50&set=set1
+23,hpatesm@clickbank.net,bloomism,€28.14,100,Spheniscus mendiculus,Chrzanów,https://robohash.org/quodetsit.png?size=50x50&set=set1
+24,mpumfreyn@xinhuanet.com,emcneillien,€47.40,Express 3500,Naja haje,Digne-les-Bains,https://robohash.org/sunteacum.png?size=50x50&set=set1
+25,jpamphilono@1und1.de,cingoldo,€17.06,Stratus,Haliaetus vocifer,Jbaïl,https://robohash.org/voluptasassumendacumque.png?size=50x50&set=set1
+26,npuntp@ifeng.com,gtownendp,€38.12,Durango,Mazama gouazoubira,Kamnica,https://robohash.org/voluptatelaborumut.png?size=50x50&set=set1
+27,styasq@vinaora.com,mhaskettq,€27.62,Range Rover Classic,Lama pacos,Carvalhal da Aroeira,https://robohash.org/liberorerumasperiores.png?size=50x50&set=set1
+28,vwhyker@youtube.com,ashouter,€43.21,Montero,Equus burchelli,Yamango,https://robohash.org/suscipitquaevel.png?size=50x50&set=set1
+29,pmonkhouses@accuweather.com,rarnaudots,€26.41,Riviera,Haliaeetus leucoryphus,Kurortnyy,https://robohash.org/doloremaccusamusdeserunt.png?size=50x50&set=set1
+30,rrewant@mlb.com,ptwopennyt,€30.51,Sierra Denali,Paradoxurus hermaphroditus,Salingogan,https://robohash.org/aliquamitaquealias.png?size=50x50&set=set1

wesweb01/annonser_SLIM_practiceht21/public/css/style.css

@@ -0,0 +1,92 @@
+:root {
+  --darkgray-color:darkslategrey;
+  --bigtext:2rem;
+  --smalltext:0.7rem;
+
+}
+
+body {
+  margin:0px;
+  font-size:100%;
+  background-color: blanchedalmond;
+  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  color:var(--darkgray-color);
+}
+
+header {
+  min-height:200px;
+  text-align:center;
+  font-size:var(--bigtext);
+  padding:0.2rem;
+}
+
+section.wrapper {
+  display:flex;
+  justify-content: space-around;
+  flex-wrap: wrap;
+  width:100%;
+  row-gap:var(--bigtext);
+}
+
+section.wrapper article {
+  min-height: 450px;
+  min-width:400px;
+  background-color:rgb(238, 238, 238);
+  border:1px var(--darkgray-color) solid;
+  font-size:1rem;
+  border-radius: 5px;
+  transition: all 0.5s;
+}
+
+section.wrapper article:hover {
+  background-color: white;
+  transition: all 1s;
+}
+
+article .image {
+  background-image:url("../img/tshirt.jpeg");
+  background-size:cover;
+  height:55%;
+  display:grid;
+}
+
+.tshirt-text {
+  font-family: 'Press Start 2P', cursive;
+  font-size:var(--smalltext);
+  color:rgb(151, 79, 79);
+  margin: auto;
+  max-width:30%;
+  line-height:1rem;
+  text-align:center;
+}
+
+article footer {
+  padding:var(--smalltext);
+  display:grid;
+  grid-template-columns: 33% 67%;
+  grid-auto-rows: 1.2rem;
+  font-size:var(--smalltext)
+}
+
+footer label {
+  font-weight:700;
+  color:var(--darkgray-color);
+}
+
+img.avatar {
+  height:var(--smalltext);
+}
+
+
+h1 {
+  font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  color:white;
+  text-shadow: var(--darkgray-color) 0px 0px 2px;
+  font-size: 3rem;
+  
+}
+
+input {
+  font-size: var(--smalltext);
+  width:var(--bigtext);
+}

wesweb01/annonser_SLIM_practiceht21/public/eviltshirts.html

@@ -0,0 +1,622 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta content="width=device-width, initial-scale=1.0" name="viewport" />
+    <title>T-shirts (Evil)</title>
+    <link href="https://fonts.googleapis.com" rel="preconnect" />
+    <link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Press+Start+2P&amp;display=swap"
+      rel="stylesheet"
+    />
+    <link href="css/style.css" rel="stylesheet" />
+  </head>
+  <body>
+    <header><h1>Evil T-shirts</h1></header>
+    <section class="wrapper">
+      <article class="annons">
+        <div class="image"><p class="tshirt-text">Blazer</p></div>
+        <footer>
+          <label>Price</label><span>€36.86</span><label>...or trade for:</label
+          ><span>Oncorhynchus nerka</span><label>Username</label
+          ><span
+            >siban0<img
+              class="avatar"
+              src="https://robohash.org/ametasperioresqui.png?size=50x50&amp;set=set1
+  " /></span
+          ><label>Contact</label><span>htallyn0@japanpost.jp</span
+          ><label>City</label><span>Passagem</span><label>Quantity</label>
+          <form action="/" method="GET">
+            <input placeholder="0" type="number" /><input
+              type="submit"
+              value="Add"
+            />
+          </form>
+        </footer>
+      </article>
+      <article class="annons">
+        <div class="image"><p class="tshirt-text">CC</p></div>
+        <footer>
+          <label>Price</label><span>€36.18</span><label>...or trade for:</label
+          ><span>Acinynox jubatus</span><label>Username</label
+          ><span
+            >schrystal1<img
+              class="avatar"
+              src="https://robohash.org/laborumdelenitiexercitationem.png?size=50x50&amp;set=set1
+  " /></span
+          ><label>Contact</label><span>kambroix1@mit.edu</span
+          ><label>City</label><span>Kobuleti</span><label>Quantity</label>
+          <form action="/" method="GET">
+            <input placeholder="0" type="number" /><input
+              type="submit"
+              value="Add"
+            />
+          </form>
+        </footer>
+      </article>
+      <article class="annons">
+        <div class="image"><p class="tshirt-text">X-90</p></div>
+        <footer>
+          <label>Price</label><span>€24.58</span><label>...or trade for:</label
+          ><span>Theropithecus gelada</span><label>Username</label
+          ><span
+            >ttoke2<img
+              class="avatar"
+              src="https://robohash.org/fugafaceredolorem.png?size=50x50&amp;set=set1
+  " /></span
+          ><label>Contact</label><span>aferrieroi2@ihg.com</span
+          ><label>City</label><span>Quixadá</span><label>Quantity</label>
+          <form action="/" method="GET">
+            <input placeholder="0" type="number" /><input
+              type="submit"
+              value="Add"
+            />
+          </form>
+        </footer>
+      </article>
+      <article class="annons">
+        <div class="image"><p class="tshirt-text">GLK-Class</p></div>
+        <footer>
+          <label>Price</label><span>€17.76</span><label>...or trade for:</label
+          ><span>Delphinus delphis</span><label>Username</label
+          ><span
+            >dstafford3<img
+              class="avatar"
+              src="https://robohash.org/sitconsequaturdolor.png?size=50x50&amp;set=set1
+  " /></span
+          ><label>Contact</label><span>dodeoran3@paypal.com</span
+          ><label>City</label><span>Apače</span><label>Quantity</label>
+          <form action="/" method="GET">
+            <input placeholder="0" type="number" /><input
+              type="submit"
+              value="Add"
+            />
+          </form>
+        </footer>
+      </article>
+      <article class="annons">
+        <div class="image"><p class="tshirt-text">Club Wagon</p></div>
+        <footer>
+          <label>Price</label><span>€12.25</span><label>...or trade for:</label
+          ><span>Porphyrio porphyrio</span><label>Username</label
+          ><span
+            >sslinn4<img
+              class="avatar"
+              src="https://robohash.org/nisinonlabore.png?size=50x50&amp;set=set1
+  " /></span
+          ><label>Contact</label><span>gstanyon4@economist.com</span
+          ><label>City</label><span>Biryulëvo</span><label>Quantity</label>
+          <form action="/" method="GET">
+            <input placeholder="0" type="number" /><input
+              type="submit"
+              value="Add"
+            />
+          </form>
+        </footer>
+      </article>
+      <article class="annons">
+        <div class="image"><p class="tshirt-text">Elantra</p></div>
+        <footer>
+          <label>Price</label><span>€10.71</span><label>...or trade for:</label
+          ><span>Marmota monax</span><label>Username</label
+          ><span
+            >kgeorgins5<img
+              class="avatar"
+              src="https://robohash.org/ducimusillout.png?size=50x50&amp;set=set1
+  " /></span
+          ><label>Contact</label><span>kbeneteau5@slashdot.org</span
+          ><label>City</label><span>Kimito</span><label>Quantity</label>
+          <form action="/" method="GET">
+            <input placeholder="0" type="number" /><input
+              type="submit"
+              value="Add"
+            />
+          </form>
+        </footer>
+      </article>
+      <article class="annons">
+        <div class="image"><p class="tshirt-text">Tracker</p></div>
+        <footer>
+          <label>Price</label><span>€44.05</span><label>...or trade for:</label
+          ><span>Geochelone elegans</span><label>Username</label
+          ><span
+            >elashmar6<img
+              class="avatar"
+              src="https://robohash.org/etquamodit.png?size=50x50&amp;set=set1
+  " /></span
+          ><label>Contact</label><span>mgillibrand6@howstuffworks.com</span
+          ><label>City</label><span>Lleida</span><label>Quantity</label>
+          <form action="/" method="GET">
+            <input placeholder="0" type="number" /><input
+              type="submit"
+              value="Add"
+            />
+          </form>
+        </footer>
+      </article>
+      <article class="annons">
+        <div class="image"><p class="tshirt-text">Legacy</p></div>
+        <footer>
+          <label>Price</label><span>€26.84</span><label>...or trade for:</label
+          ><span>Ephippiorhynchus mycteria</span><label>Username</label
+          ><span
+            >hmattusevich7<img
+              class="avatar"
+              src="https://robohash.org/idvelitsunt.png?size=50x50&amp;set=set1
+  " /></span
+          ><label>Contact</label><span>vlicence7@theguardian.com</span
+          ><label>City</label><span>Meipu</span><label>Quantity</label>
+          <form action="/" method="GET">
+            <input placeholder="0" type="number" /><input
+              type="submit"
+              value="Add"
+            />
+          </form>
+        </footer>
+      </article>
+      <article class="annons">
+        <div class="image"><p class="tshirt-text">Baja</p></div>
+        <footer>
+          <label>Price</label><span>€13.87</span><label>...or trade for:</label
+          ><span>Dicrostonyx groenlandicus</span><label>Username</label
+          ><span
+            >apankettman8<img
+              class="avatar"
+              src="https://robohash.org/doloremqueteneturexercitationem.png?size=50x50&amp;set=set1
+  " /></span
+          ><label>Contact</label><span>hshepheard8@earthlink.net</span
+          ><label>City</label><span>Bondy</span><label>Quantity</label>
+          <form action="/" method="GET">
+            <input placeholder="0" type="number" /><input
+              type="submit"
+              value="Add"
+            />
+          </form>
+        </footer>
+      </article>
+      <article class="annons">
+        <div class="image"><p class="tshirt-text">F-Series</p></div>
+        <footer>
+          <label>Price</label><span>€10.33</span><label>...or trade for:</label
+          ><span>Castor canadensis</span><label>Username</label
+          ><span
+            >hfeatherbie9<img
+              class="avatar"
+              src="https://robohash.org/fugiatvelitvoluptas.png?size=50x50&amp;set=set1
+  " /></span
+          ><label>Contact</label><span>pjerche9@dmoz.org</span
+          ><label>City</label><span>Xiajiashan</span><label>Quantity</label>
+          <form action="/" method="GET">
+            <input placeholder="0" type="number" /><input
+              type="submit"
+              value="Add"
+            />
+          </form>
+        </footer>
+      </article>
+      <article class="annons">
+        <div class="image"><p class="tshirt-text">LS</p></div>
+        <footer>
+          <label>Price</label><span>€34.92</span><label>...or trade for:</label
+          ><span>Colaptes campestroides</span><label>Username</label
+          ><span
+            >dcosbya<img
+              class="avatar"
+              src="https://robohash.org/praesentiumvoluptatemvel.png?size=50x50&amp;set=set1
+  " /></span
+          ><label>Contact</label><span>mbrasteada@domainmarket.com</span
+          ><label>City</label><span>Itupiranga</span><label>Quantity</label>
+          <form action="/" method="GET">
+            <input placeholder="0" type="number" /><input
+              type="submit"
+              value="Add"
+            />
+          </form>
+        </footer>
+      </article>
+      <article class="annons">
+        <div class="image"><p class="tshirt-text">Prius</p></div>
+        <footer>
+          <label>Price</label><span>€31.45</span><label>...or trade for:</label
+          ><span>Merops sp.</span><label>Username</label
+          ><span
+            >wlackneyb<img
+              class="avatar"
+              src="https://robohash.org/rationeautrecusandae.png?size=50x50&amp;set=set1
+  " /></span
+          ><label>Contact</label><span>dcraigb@creativecommons.org</span
+          ><label>City</label><span>Kamigyō-ku</span><label>Quantity</label>
+          <form action="/" method="GET">
+            <input placeholder="0" type="number" /><input
+              type="submit"
+              value="Add"
+            />
+          </form>
+        </footer>
+      </article>
+      <article class="annons">
+        <div class="image"><p class="tshirt-text">Miata MX-5</p></div>
+        <footer>
+          <label>Price</label><span>€24.07</span><label>...or trade for:</label
+          ><span>Isoodon obesulus</span><label>Username</label
+          ><span
+            >fmarneyc<img
+              class="avatar"
+              src="https://robohash.org/temporequiquia.png?size=50x50&amp;set=set1
+  " /></span
+          ><label>Contact</label><span>ooffordc@shutterfly.com</span
+          ><label>City</label><span>Paidha</span><label>Quantity</label>
+          <form action="/" method="GET">
+            <input placeholder="0" type="number" /><input
+              type="submit"
+              value="Add"
+            />
+          </form>
+        </footer>
+      </article>
+      <article class="annons">
+        <div class="image"><p class="tshirt-text">A4</p></div>
+        <footer>
+          <label>Price</label><span>€40.56</span><label>...or trade for:</label
+          ><span>Acrantophis madagascariensis</span><label>Username</label
+          ><span
+            >cgarletted<img
+              class="avatar"
+              src="https://robohash.org/exoditatque.png?size=50x50&amp;set=set1
+  " /></span
+          ><label>Contact</label><span>mellisd@redcross.org</span
+          ><label>City</label><span>Capalonga</span><label>Quantity</label>
+          <form action="/" method="GET">
+            <input placeholder="0" type="number" /><input
+              type="submit"
+              value="Add"
+            />
+          </form>
+        </footer>
+      </article>
+      <article class="annons">
+        <div class="image"><p class="tshirt-text">Freestar</p></div>
+        <footer>
+          <label>Price</label><span>€27.34</span><label>...or trade for:</label
+          ><span>Francolinus swainsonii</span><label>Username</label
+          ><span
+            >hsowreye<img
+              class="avatar"
+              src="https://robohash.org/minusaccusantiumperspiciatis.png?size=50x50&amp;set=set1
+  " /></span
+          ><label>Contact</label><span>pbouttone@imgur.com</span
+          ><label>City</label><span>Zduńska Wola</span><label>Quantity</label>
+          <form action="/" method="GET">
+            <input placeholder="0" type="number" /><input
+              type="submit"
+              value="Add"
+            />
+          </form>
+        </footer>
+      </article>
+      <article class="annons">
+        <div class="image"><p class="tshirt-text">Avenger</p></div>
+        <footer>
+          <label>Price</label><span>€11.82</span><label>...or trade for:</label
+          ><span>Conolophus subcristatus</span><label>Username</label
+          ><span
+            >lpeakerf<img
+              class="avatar"
+              src="https://robohash.org/atqueperferendisqui.png?size=50x50&amp;set=set1
+  " /></span
+          ><label>Contact</label><span>dfaulderf@uol.com.br</span
+          ><label>City</label><span>Canha</span><label>Quantity</label>
+          <form action="/" method="GET">
+            <input placeholder="0" type="number" /><input
+              type="submit"
+              value="Add"
+            />
+          </form>
+        </footer>
+      </article>
+      <article class="annons">
+        <div class="image"><p class="tshirt-text">del Sol</p></div>
+        <footer>
+          <label>Price</label><span>€29.89</span><label>...or trade for:</label
+          ><span>Pteropus rufus</span><label>Username</label
+          ><span
+            >ebrislandg<img
+              class="avatar"
+              src="https://robohash.org/reiciendisexplicaborepellat.png?size=50x50&amp;set=set1
+  " /></span
+          ><label>Contact</label><span>kdurmang@harvard.edu</span
+          ><label>City</label><span>Naval</span><label>Quantity</label>
+          <form action="/" method="GET">
+            <input placeholder="0" type="number" /><input
+              type="submit"
+              value="Add"
+            />
+          </form>
+        </footer>
+      </article>
+      <article class="annons">
+        <div class="image"><p class="tshirt-text">Town &amp; Country</p></div>
+        <footer>
+          <label>Price</label><span>€10.53</span><label>...or trade for:</label
+          ><span>Uraeginthus angolensis</span><label>Username</label
+          ><span
+            >theartfieldh<img
+              class="avatar"
+              src="https://robohash.org/facilisnontotam.png?size=50x50&amp;set=set1
+  " /></span
+          ><label>Contact</label><span>shambrighth@altervista.org</span
+          ><label>City</label><span>Langnga</span><label>Quantity</label>
+          <form action="/" method="GET">
+            <input placeholder="0" type="number" /><input
+              type="submit"
+              value="Add"
+            />
+          </form>
+        </footer>
+      </article>
+      <article class="annons">
+        <div class="image"><p class="tshirt-text">Regal</p></div>
+        <footer>
+          <label>Price</label><span>€36.16</span><label>...or trade for:</label
+          ><span>Pitangus sulphuratus</span><label>Username</label
+          ><span
+            >rfillgatei<img
+              class="avatar"
+              src="https://robohash.org/fugitnonexercitationem.png?size=50x50&amp;set=set1
+  " /></span
+          ><label>Contact</label><span>dgomersali@merriam-webster.com</span
+          ><label>City</label><span>Rujewa</span><label>Quantity</label>
+          <form action="/" method="GET">
+            <input placeholder="0" type="number" /><input
+              type="submit"
+              value="Add"
+            />
+          </form>
+        </footer>
+      </article>
+      <article class="annons">
+        <div class="image"><p class="tshirt-text">911</p></div>
+        <footer>
+          <label>Price</label><span>€41.47</span><label>...or trade for:</label
+          ><span>Columba livia</span><label>Username</label
+          ><span
+            >mfancetj<img
+              class="avatar"
+              src="https://robohash.org/magnidelectusex.png?size=50x50&amp;set=set1
+  " /></span
+          ><label>Contact</label><span>cbentjej@about.com</span
+          ><label>City</label><span>Granja</span><label>Quantity</label>
+          <form action="/" method="GET">
+            <input placeholder="0" type="number" /><input
+              type="submit"
+              value="Add"
+            />
+          </form>
+        </footer>
+      </article>
+      <article class="annons">
+        <div class="image"><p class="tshirt-text">Mustang</p></div>
+        <footer>
+          <label>Price</label><span>€31.44</span><label>...or trade for:</label
+          ><span>unavailable</span><label>Username</label
+          ><span
+            >zstrankk<img
+              class="avatar"
+              src="https://robohash.org/estetimpedit.png?size=50x50&amp;set=set1
+  " /></span
+          ><label>Contact</label><span>bdargank@home.pl</span><label>City</label
+          ><span>Masjed Soleymān</span><label>Quantity</label>
+          <form action="/" method="GET">
+            <input placeholder="0" type="number" /><input
+              type="submit"
+              value="Add"
+            />
+          </form>
+        </footer>
+      </article>
+      <article class="annons">
+        <div class="image"><p class="tshirt-text">Ram</p></div>
+        <footer>
+          <label>Price</label><span>€41.75</span><label>...or trade for:</label
+          ><span>Anser anser</span><label>Username</label
+          ><span
+            >cbrumhaml<img
+              class="avatar"
+              src="https://robohash.org/etipsammolestiae.png?size=50x50&amp;set=set1
+  " /></span
+          ><label>Contact</label><span>dmcgralel@hp.com</span><label>City</label
+          ><span>Mokotów</span><label>Quantity</label>
+          <form action="/" method="GET">
+            <input placeholder="0" type="number" /><input
+              type="submit"
+              value="Add"
+            />
+          </form>
+        </footer>
+      </article>
+      <article class="annons">
+        <div class="image"><p class="tshirt-text">100</p></div>
+        <footer>
+          <label>Price</label><span>€28.14</span><label>...or trade for:</label
+          ><span>Spheniscus mendiculus</span><label>Username</label
+          ><span
+            >bloomism<img
+              class="avatar"
+              src="https://robohash.org/quodetsit.png?size=50x50&amp;set=set1
+  " /></span
+          ><label>Contact</label><span>hpatesm@clickbank.net</span
+          ><label>City</label><span>Chrzanów</span><label>Quantity</label>
+          <form action="/" method="GET">
+            <input placeholder="0" type="number" /><input
+              type="submit"
+              value="Add"
+            />
+          </form>
+        </footer>
+      </article>
+      <article class="annons">
+        <div class="image"><p class="tshirt-text">Express 3500</p></div>
+        <footer>
+          <label>Price</label><span>€47.40</span><label>...or trade for:</label
+          ><span>Naja haje</span><label>Username</label
+          ><span
+            >emcneillien<img
+              class="avatar"
+              src="https://robohash.org/sunteacum.png?size=50x50&amp;set=set1
+  " /></span
+          ><label>Contact</label><span>mpumfreyn@xinhuanet.com</span
+          ><label>City</label><span>Digne-les-Bains</span
+          ><label>Quantity</label>
+          <form action="/" method="GET">
+            <input placeholder="0" type="number" /><input
+              type="submit"
+              value="Add"
+            />
+          </form>
+        </footer>
+      </article>
+      <article class="annons">
+        <div class="image"><p class="tshirt-text">Stratus</p></div>
+        <footer>
+          <label>Price</label><span>€17.06</span><label>...or trade for:</label
+          ><span>Haliaetus vocifer</span><label>Username</label
+          ><span
+            >cingoldo<img
+              class="avatar"
+              src="https://robohash.org/voluptasassumendacumque.png?size=50x50&amp;set=set1
+  " /></span
+          ><label>Contact</label><span>jpamphilono@1und1.de</span
+          ><label>City</label><span>Jbaïl</span><label>Quantity</label>
+          <form action="/" method="GET">
+            <input placeholder="0" type="number" /><input
+              type="submit"
+              value="Add"
+            />
+          </form>
+        </footer>
+      </article>
+      <article class="annons">
+        <div class="image"><p class="tshirt-text">Durango</p></div>
+        <footer>
+          <label>Price</label><span>€38.12</span><label>...or trade for:</label
+          ><span>Mazama gouazoubira</span><label>Username</label
+          ><span
+            >gtownendp<img
+              class="avatar"
+              src="https://robohash.org/voluptatelaborumut.png?size=50x50&amp;set=set1
+  " /></span
+          ><label>Contact</label><span>npuntp@ifeng.com</span><label>City</label
+          ><span>Kamnica</span><label>Quantity</label>
+          <form action="/" method="GET">
+            <input placeholder="0" type="number" /><input
+              type="submit"
+              value="Add"
+            />
+          </form>
+        </footer>
+      </article>
+      <article class="annons">
+        <div class="image"><p class="tshirt-text">Range Rover Classic</p></div>
+        <footer>
+          <label>Price</label><span>€27.62</span><label>...or trade for:</label
+          ><span>Lama pacos</span><label>Username</label
+          ><span
+            >mhaskettq<img
+              class="avatar"
+              src="https://robohash.org/liberorerumasperiores.png?size=50x50&amp;set=set1
+  " /></span
+          ><label>Contact</label><span>styasq@vinaora.com</span
+          ><label>City</label><span>Carvalhal da Aroeira</span
+          ><label>Quantity</label>
+          <form action="/" method="GET">
+            <input placeholder="0" type="number" /><input
+              type="submit"
+              value="Add"
+            />
+          </form>
+        </footer>
+      </article>
+      <article class="annons">
+        <div class="image"><p class="tshirt-text">Montero</p></div>
+        <footer>
+          <label>Price</label><span>€43.21</span><label>...or trade for:</label
+          ><span>Equus burchelli</span><label>Username</label
+          ><span
+            >ashouter<img
+              class="avatar"
+              src="https://robohash.org/suscipitquaevel.png?size=50x50&amp;set=set1
+  " /></span
+          ><label>Contact</label><span>vwhyker@youtube.com</span
+          ><label>City</label><span>Yamango</span><label>Quantity</label>
+          <form action="/" method="GET">
+            <input placeholder="0" type="number" /><input
+              type="submit"
+              value="Add"
+            />
+          </form>
+        </footer>
+      </article>
+      <article class="annons">
+        <div class="image"><p class="tshirt-text">Riviera</p></div>
+        <footer>
+          <label>Price</label><span>€26.41</span><label>...or trade for:</label
+          ><span>Haliaeetus leucoryphus</span><label>Username</label
+          ><span
+            >rarnaudots<img
+              class="avatar"
+              src="https://robohash.org/doloremaccusamusdeserunt.png?size=50x50&amp;set=set1
+  " /></span
+          ><label>Contact</label><span>pmonkhouses@accuweather.com</span
+          ><label>City</label><span>Kurortnyy</span><label>Quantity</label>
+          <form action="/" method="GET">
+            <input placeholder="0" type="number" /><input
+              type="submit"
+              value="Add"
+            />
+          </form>
+        </footer>
+      </article>
+      <article class="annons">
+        <div class="image"><p class="tshirt-text">Sierra Denali</p></div>
+        <footer>
+          <label>Price</label><span>€30.51</span><label>...or trade for:</label
+          ><span>Paradoxurus hermaphroditus</span><label>Username</label
+          ><span
+            >ptwopennyt<img
+              class="avatar"
+              src="https://robohash.org/aliquamitaquealias.png?size=50x50&amp;set=set1
+  " /></span
+          ><label>Contact</label><span>rrewant@mlb.com</span><label>City</label
+          ><span>Salingogan</span><label>Quantity</label>
+          <form action="/" method="GET">
+            <input placeholder="0" type="number" /><input
+              type="submit"
+              value="Add"
+            />
+          </form>
+        </footer>
+      </article>
+    </section>
+  </body>
+</html>

wesweb01/annonser_SLIM_practiceht21/views/grillkorv.slim

@@ -0,0 +1,31 @@
+- items.each do |item|
+    article.annons
+        .image 
+            p.tshirt-text #{item[:name]}
+        footer 
+            label Price
+            span #{item[:price]}
+            
+            label ...or trade for:
+            span #{item[:animal]}
+
+            label Username 
+            span #{item[:id]} <img class="avatar" src="#{item[:avatar]}">
+
+            label Contact 
+            span #{item[:email]}
+
+            label City 
+            span #{item[:city]}
+
+            label Quantity 
+            form action="/" method="GET"
+                input placeholder="0" type="number"
+                input type="button" value="add"
+            
+            //img src=#{item[:avatar]}
+           
+
+
+
+

wesweb01/annonser_SLIM_practiceht21/views/layout.slim

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+html lang="en"
+  head
+    meta charset="UTF-8"/
+    meta name="viewport" content="width=device-width, initial-scale=1.0"/
+    title T-shirts (Evil)
+    link href="https://fonts.googleapis.com" rel="preconnect" /
+    link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect" /
+    link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet" /
+    link rel="stylesheet" href="css/style.css"/
+
+  body
+      header 
+        h1 Evil T-Shirts
+      
+      section.wrapper 
+
+        == yield
+
+