mirror of https://github.com/E-Almqvist/hsf
parent
1ed130326a
commit
ece7032fe8
@ -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 |
||||
|
||||
Binary file not shown.
|
@ -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); |
||||
} |
||||
@ -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&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&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&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&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&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&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&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&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&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&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&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&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&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&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&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&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&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&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 & 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&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&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&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&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&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&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&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&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&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&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&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&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&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> |
||||
|
After Width: | Height: | Size: 4.7 KiB |
|
After Width: | Height: | Size: 5.8 KiB |
|
After Width: | Height: | Size: 3.8 KiB |
|
After Width: | Height: | Size: 4.7 KiB |
|
After Width: | Height: | Size: 4.3 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 4.2 KiB |
|
After Width: | Height: | Size: 4.4 KiB |
|
After Width: | Height: | Size: 3.5 KiB |
|
After Width: | Height: | Size: 3.8 KiB |
|
After Width: | Height: | Size: 4.7 KiB |
|
After Width: | Height: | Size: 3.5 KiB |
|
After Width: | Height: | Size: 5.6 KiB |
|
After Width: | Height: | Size: 5.5 KiB |
|
After Width: | Height: | Size: 5.0 KiB |
|
After Width: | Height: | Size: 3.1 KiB |
|
After Width: | Height: | Size: 4.3 KiB |
|
After Width: | Height: | Size: 2.8 KiB |
|
After Width: | Height: | Size: 5.7 KiB |
|
After Width: | Height: | Size: 3.5 KiB |
|
After Width: | Height: | Size: 3.1 KiB |
|
After Width: | Height: | Size: 4.2 KiB |
|
After Width: | Height: | Size: 5.7 KiB |
|
After Width: | Height: | Size: 3.5 KiB |
|
After Width: | Height: | Size: 5.0 KiB |
|
After Width: | Height: | Size: 4.4 KiB |
|
After Width: | Height: | Size: 6.4 KiB |
|
After Width: | Height: | Size: 4.4 KiB |
|
After Width: | Height: | Size: 4.3 KiB |
|
After Width: | Height: | Size: 2.8 KiB |
|
After Width: | Height: | Size: 5.8 KiB |
|
After Width: | Height: | Size: 3.8 KiB |
|
After Width: | Height: | Size: 5.0 KiB |
|
After Width: | Height: | Size: 5.7 KiB |
|
After Width: | Height: | Size: 4.3 KiB |
|
After Width: | Height: | Size: 6.2 KiB |
|
After Width: | Height: | Size: 4.6 KiB |
|
After Width: | Height: | Size: 4.7 KiB |
|
After Width: | Height: | Size: 4.5 KiB |
|
After Width: | Height: | Size: 4.3 KiB |
|
After Width: | Height: | Size: 5.6 KiB |
|
After Width: | Height: | Size: 4.3 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 5.0 KiB |
|
After Width: | Height: | Size: 6.4 KiB |
|
After Width: | Height: | Size: 5.7 KiB |
|
After Width: | Height: | Size: 4.6 KiB |
|
After Width: | Height: | Size: 3.2 KiB |
|
After Width: | Height: | Size: 26 KiB |
@ -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]} |
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -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 |
||||
|
||||
|
||||
Loading…
Reference in new issue