Share
Paul J Nobles vinnende, unikt designet porteføljeside har tatt mange mennesker i øynene, og ikke bare kunder. I dag skal han følge opp på utviklingsstadiet av denne opplæringen, og demonstrere hvordan den er kodet opp.
For denne opplæringen brukes den utmerkede ROA (Sweden) nettsiden som et eksempel på et porteføljeelement. Dette nettstedet har nylig blitt omtalt i Creattica, og forfatteren er ikke tilknyttet ROA. Ta gjerne med ditt eget arbeid som porteføljeposter.
Vi skal lage et nettbasert porteføljeside med et rutenett med bilder, en fast topptekst, tekst og grensesnittelementer. Markeringen vil bli stylet slik at innholdet passer uten å rulle i nesten alle brukeres skjermer og skalerer pent til større skjermstørrelser, samtidig som det forringes grasiøst ved lavere oppløsninger. Bildegitteret viser bare det nåværende, aktive bildet, men likevel inneholder mange flere skjulte bilder som kan vises via navigasjon på sidelinjen.
Å lage HTML-malen og CSS vil forberede oss på neste del av denne opplæringen, der vi vil legge til interaksjonslaget ved hjelp av Javascript og bringe designet til liv.
Opprett et nytt HTML-dokument i din foretrukne tekstredigerer. Fest jQuery (1.4.2+) og en ny, blank CSS-fil.
Første merking vi lager vil være en div som inneholder alt innholdet vårt. Vi fastsetter senere minimum høyde- og breddeverdier for denne diven ('#page') for å sikre at utformingen skaleres ved lave oppløsninger. Lag noen flere divs for de viktigste elementene på siden som er illustrert nedenfor.
Ditt navn - Digital portefølje
For nettsteder der det ikke kreves vertikal rulling, er det ofte mindre påtrengende å plassere navigasjons- og topptekstelementer nederst på skjermen. Dette frigjør ekstra plass på hyppigere sett plass nær toppen av vinduet. Vi vil at dette elementet skal strekke hele bredden på brukerens skjerm og alltid plasseres nederst på skjermen.
Selv om dette er visuelt plassert nederst på skjermen, vises det faktisk øverst i dokumentets oppslag. Vi lager en div med ID-tittelen og deretter en nestet div med klassen 'indre'. En indre innpakning vil forenkle posisjonering av de indre elementene.
Innenfor wrapper oppretter vi tre divs; '#logo', '#social' og '#nav'.
For logoen vil vi neste en bildefil kalt 'images_26 / build-a-innovative-portfolio-site-using-alternative-uiux.png' og legg til litt alt-tekst. Opprett logo-bildefilen ved å kutte logoen fra PSD-en. Da dette skal plasseres absolutt, er den eksakte størrelsen ikke kritisk, men sørg for at logobildet ditt passer i navigasjonsfeltet i designet.
For de sosiale knappene krever vi tre ankre - en hver for Facebook, Flickr og LinkedIn. Disse vil ha bakgrunnsbilder brukt som grafikk, men vi vil fortsatt bruke tekst til semantiske formål og gjemme dette med CSS. For disse eksterne linkene bruker vi mål = "_ blank" -attributtet slik at sidene åpnes i en ny kategori eller et vindu.
For navigasjonen bruker vi igjen tre ankre og tilordner disse sine egne klasser og id verdier.
Finn meg på Facebook Se min Flickr Finn meg på LinkedInOm fotografering
Våre grafiske gjenstander for de gjenværende elementene vil ikke være like enkle som logoen. Da de er interaktive, trenger de hover-tilstander og navigasjonsknappene krever aktive stater.
For navigasjonsknappene lager vi et bildesprite. Gå tilbake til Photoshop og opprett et valg rundt knappene i PSD. Velg Rediger> Kopier sammenføyt.
Velg deretter Arkiv> Ny. En dialogboks vises med bredden og høyden som er standard for det tidligere valgte rektangel. Endre høyden til 3 ganger standardverdien. Dette vil skape et nytt lerret som passer til tre versjoner av navigasjonsgrafikken, en for hver stat som kreves; aktiv, svever og av.
Flytt nå knappene mappen fra PSD og klone denne gruppen to ganger for å lage tre grupper. Juster tekstfargene litt for å være ensartet for hver gruppe for å opprette de forskjellige knappestatusene. Nedenfor er et eksempel på en endelig grafikk. Lagre den ferdige versjonen som en PNG (24-bit) til 'img / icons / nav.png' sørg for at bakgrunnen er gjennomsiktig.
For de sosiale medier knappene trenger vi bare to stater ("hover" og "off"). Gjenta prosessen over for å lage en sosial media knapper image sprite. Lagre bildet som 'img / icons / social-media.png'.
Endelig opprett et nytt bilde 'img / bg / header.png'.
Nå som vi har utviklet strukturen og bildebildene, la oss lage noen CSS for å starte styling denne siden.
Øverst i CSS-filen vil vi inkludere en CSS-tilbakestilling for å sikre at ingen nettleser-spesifikke standardinnstillinger vil ødelegge oppsettet vårt.
html, html, html, html, ht, p, blockquote, pre, a, abbr, akronym, adresse, stor, sitere, kode, del, dfn, em, skrift, img, inn, kbd, q, s, samp, liten, streik, sterk, sub, sup, tt, var, du, jeg, midt, dl, dt, dd, ol, ul, li, fieldset, form, label, legend margin: 0; polstring: 0; grense: 0; oversikt: 0; skriftstørrelse: 100%; vertikaljustering: basislinje; bakgrunn: gjennomsiktig; kropp linjehøyde: 1.2em; font-familie: arial, sans-serif; ol, ul listestil: ingen; blockquote, q quotes: none; blockquote: før, blockquote: etter, q: før, q: etter innhold: "; innhold: ingen;: fokus disposisjon: 0; inn tekst-dekorasjon: ingen; del text-decoration: line -gjennom;
Deretter vil vi opprette noen basestiler for de viktigste sidene elementene.
kropp, html høyde: 100%; kropp bakgrunn: # 0f1219; #page height: 100%; Min høyde: 700px; stilling: relativ; min bredde: 1100px; overløp: skjult; h1, h2, p, li, div font-family: "arial", "helvetica", sans-serif; li font-size: 12px;
Deretter stiler vi toppteksten. Vi bruker absolutt posisjonering for logoen og andre elementer for enkel kontroll over designen.
Merk: Vi skal stilere våre ankre som blokknivåelementer ('display: block') og med negativ tekstinntrykk for å sikre tilgjengelige, men likevel grafisk baserte elementer. Breddene og høydene kan justeres hvis de egendefinerte bildespritfiler varierer i deres dimensjoner.
Accentsconagua
#header background: url ('? /img/bg/header.png') gjenta; høyde: 60px; z-indeks: 1200; overløp: skjult; posisjon: absolutt; bunn: 0; bredde: 100%; #logo posisjon: absolutt; top: 0px; igjen: 30px; #header .inner width: auto; polstring: 0 30px; stilling: relativ; høyde: 70px; #nav posisjon: absolutt; høyre: 30px; topp: 14px; høyde: 31px; bredde: 290px; #nav en bakgrunn: url ('? /img/icons/nav.png') no-repeat 0 0; tekstindeks: -9999px; flyte: høyre; skjerm: blokk; oversikt: ingen; høyde: 31px; Nå skal vi definere de individuelle stilene for hver navigasjonsknapp ved å kartlegge de ulike bildesprettstedene til hver knappes klasse.
#nav a.work width: 95px; #nav a.work:hover bakgrunnsstilling: 0 -62px; #nav a.about width: 93px; bakgrunnsposisjon: -188px 0; #nav a.about: hover bakgrunnsposisjon: -188px -62px; #nav a.workActive width: 95px; bakgrunnsposisjon: -0px -31px; markør: standard; #nav a.aboutActive width: 93px; bakgrunnsposisjon: -188px -31px; markør: standard; #nav a.photos bredde: 93px; bakgrunnsposisjon: -95px 0; #nav a.photos:hover bakgrunnsposisjon: -95px -62px; #nav a.photosActive width: 93px; bakgrunnsposisjon: -95px -31px; markør: standard;
Neste vil vi gjøre det samme for sosiale medier knapper.
#social width: 88px; høyde: 26px; posisjon: absolutt; topp: 17px; høyre: 330px; #social a display: block; bakgrunn: url ('? /img/icons/social-media.png') no-repeat 0 0; flyte: venstre; høyde: 26px; bredde: 26px; oversikt: ingen; flyte: venstre; margin-høyre: 4px; tekstindeks: -9999px; overløp: skjult; #social a.fb bakgrunnsposisjon: 0 0; #social a.fb: svever bakgrunnsposisjon: 0 -26px; #social a.flickr bakgrunnsstilling: -30px 0; #social a .flickr: svever bakgrunnsstilling: -30px -26px; #social a.linkedin bakgrunnsstilling: -60px 0; margin-høyre: 0; #social a.linkedin: svever bakgrunnsposisjon: -60px -26px; OK, oppdater nå siden, og du bør se noe som ligner på bildet nedenfor. Hold markøren over knappene for å se de forskjellige tilstandene. Hvis det er noen quirks i hover-tilstandene, prøv å justere bakgrunnsposisjonen i CSS.
Prøv å endre størrelsen på nettleservinduet ditt for å simulere visninger med lavere oppløsning. Rullestenger skal vises når vinduet er redusert under minhøyde- og minbreddsverdiene som er definert for "#page" div.
Vi skal bruke en spot-lyseffekt for å fokusere visuell oppmerksomhet på det aktive bildet mens det hintes på omgivende innhold. For å skape en sterkere bakgrunns- / forgrunnsavstand vil vi også bruke et subtilt teksturmønster til bakgrunnen.
For å oppnå dette må vi legge til noen mark-up. Opprett følgende nye divs nestet i div '#main'.
Først la oss lage spotlight-bildet ('images_26 / build-a-innovative-portfolio-site-using-alternative-uiux_2.png') som vil legge over galleriet. Gå tilbake til Photoshop, velg laget i "vignette" -gruppen. Gå til Velg> Alt og kopier den valgte regionen. Opprett et nytt dokument (det skal være minst 1400 x 900) og lim ut utklippstavlen i lerretet.
Nå må vi gjøre noen tilpasninger til bildet vårt. For det første, utvide lerretets størrelse slik at det er 100 piksler høyere øverst.
Deretter skal du utvide den venstre kanten med 50 piksler.
Til slutt, utvide bunn og høyre kant, slik at den totale lerretstørrelsen er 1600 x 1600.
Ta nå bøtteverktøyet og med anti-aliasing 'off' og toleranse satt til '0', fyll det gjennomsiktige området rundt kantene med bakgrunnsfargen på siden (# 0f1219). Det endelige resultatet skal se ut som bildet nedenfor.
Velg Fil> Lagre for web og lagre dette bildet som en 24-bit PNG ('images_26 / build-a-innovative-portefølje-site-using-alternative-uiux_2.png') med gjennomsiktighet aktivert.
Nå, tilbake til vårt opprinnelige kildebilde, velg lagermønsterfyll 1 (dette er diagonalt linjelag). Høyreklikk og velg 'Rasterize layer'. Deretter zoomer du inn i nærheten og velger en region av laget som nedenfor. Kopier dette (bare linjene - ikke kopier bakgrunnen) og lim inn i et nytt dokument. Lagre for web, igjen en 24-bit PNG med gjennomsiktighet med banen 'img / bg / lines.png'.
La oss nå legge til CSS som vil integrere våre nye bilder?
#horizon min-høyde: 700px; bredde: 100%; overløp: skjult; #main bakgrunn: # 0f1219; bredde: 1300px; margin: auto; margin-topp: -190px; høyde: 1000 piksler; overløp: skjult; stilling: relativ; #main .inner width: 9000px; høyde: 9000px; overløp: skjult; posisjon: absolutt; topp: 0; venstre: 0; .glowBg bakgrunn: # 282d3f; høyde: 100%; bredde: 100%; posisjon: absolutt; #glowTexture bakgrunn: url ('? /img/bg/lines.png') gjenta; høyde: 900px; bredde: 1300px; posisjon: absolutt; topp: 0; venstre: 0; #glowShadow høyde: 1600px; posisjon: absolutt; bredde: 1500px; topp: 00px; overløp: skjult; z-indeks: 200; #glowShadow img display: block; stilling: i forhold; venstre: -100px; Lagre, oppdater og du bør nå se bakgrunnsfargen, tekstur og spotlight. Deretter begynner vi å legge til noen bilder.
For galleribildene plasserer vi bilder ved prosjekt i kolonner. Hvert prosjekt kan ha flere bilder arrangert vertikalt. Ulike prosjekter blir åpnet ved å flytte kolonnene sidelengs.
Lag et nytt bilde 640x480 og lim inn et øyeblikksbilde av et nettsted eller en avling av noe arbeid du vil gjerne ha. Denne designens mørkere stil fungerer vanligvis best med bilder som overveiende har en lys bakgrunn.
For å begynne med legger vi til noen mark-up.
Du vil legge merke til at vi har lagt til noen inline-stiler på kodene. Dette simulerer hva vårt samspillingslag senere vil gjelde automatisk (vi får se hvordan dette gjøres i neste del av denne opplæringen). For tiden vil vi imidlertid bare kode inn stilene. Merk: Opasitetsattributtet vil ikke fungere i Internet Explorer 8 og under.
Legg til følgende CSS for galleribilder:
#gallery left: 285px; posisjon: absolutt; bredde: 100%; høyde: 900px; #gallery .col posisjon: absolutt; topp: 80px; bredde: 640px; .item høyde: 480px; bredde: 640px; bakgrunn: # 181a22; posisjon: absolutt; margin: auto; topp: 320px; z-indeks: 100; overløp: skjult;
Den viktigste egenskapen her er den absolutte posisjoneringen av kolonnene (disse er divene med klassen "col"). Med absolutt posisjonering kan vi flytte hver kolonne uavhengig eller flytte alle kolonnene i synkronisering, noe som gjør at vi kan navigere i rutenettet av bilder når samspillingslaget har blitt brukt.
Oppdater siden, og du bør nå se galleriet med bilder. Du vil imidlertid merke seg at galleriet er statisk posisjonert vertikalt. Ideelt sett vil vi at innholdet skal sentrere seg, avhengig av vinduets størrelse. For å oppnå dette må vi legge til litt skripting.
Opprett en ny skriptetikett like før den avsluttende kroppsmerket og sett inn følgende kode:
Sørg for at jQuery er lagt til i sidens overskrift, ellers vil dette skriptet ikke fungere.
Dette skriptet gjør noen ting. Arrangøren () -funksjonen oppdager vinduhøyden og justerer deretter '#main'-elementene' CSS-egenskapene for å sentrere innholdet vertikalt. Det gjør dette i tilfeller der brukerens vindu er større enn 760 piksler høyt (se betinget av linje 541), for vinduhøyder lavere enn dette, brukes standard CSS-egenskaper. $ (Vinduet) .resize () lytteren (linje 25) kaller justeringsfunksjonen () når brukerens vindu er endret.
På dette stadiet legger vi til tekstinnhold knyttet til det aktive prosjektet. For dette trenger vi tittel, en underrubrikk og et avsnitt med tekst for å utdybe det aktive prosjektet.
Legg til følgende mark-up i divisjonen "#leftCol":
Demo Project
WEBSITE 2011
Demo Project
WEBSITE 2011
Kjæresten er dum og sitter, og er en avgjørende forfatter. Ikke noe annet å si. Etiam neque augue, tristique egen malesuada et, luktus sed felis. I dignissim lacus er du bare i stand til å utvide deg. Kjæresten er dum og sitter, og er en avgjørende forfatter. Ikke noe annet å si.
Link til prosjekt her
Selvfølgelig, hvis du bruker et virkelig arbeid som du har gjort, kan du ikke bruke overskrifter og kropps tekst som beskriver arbeidet ditt nøyaktig.
Nå stiler vi dette innholdet med noen ekstra CSS:
#leftCol padding-top: 30px; bredde: 200px; høyde: 480px; igjen: 30px; posisjon: absolutt; z-indeks: 10001; toppen: 270px; #projectInfo topp: 50px; posisjon: absolutt; høyde: 350px; bredde: 200px; #leftCol h1 farge: #fff; skriftstørrelse: 28px; margin-bunn: 6px; topp: 50px; font-weight: 300; linjehøyde: 30px; #leftCol p.sub farge: # 338966; skriftstørrelse: 11px; tekst-transformer: store bokstaver; brev-Avstand: 2 piksler; font-weight: bold; #leftCol p.body, #leftCol p.link color: # 8c8f95; font-familie: 'lucida grande', 'arial'; skriftstørrelse: 12px; linjehøyde: 19px; polstring: 30px; margin-bunn: 10px; #leftCol p.link padding-top: 10px; #leftCol p.link a color: # 8c8f95; tekst-dekorasjon: understreke; #leftCol p.link a: svever farge: #fff; tekst-dekorasjon: understreke;
Igjen, det viktigste omtanke her er absolutt posisjonering av elementet "#leftCol". Ettersom dette elementet er plassert utenfor taggen # # gallery enn innenfor taggen # #, vil posisjonen være i forhold til den sentrert "#main" -taggen og uavhengig av bevegelse i galleriet. Dette betyr at teksten kan oppdateres når det aktive prosjektet endres uten å endre posisjon. Den svært høye z-indeksen for "#leftCol" (10001) plasserer dette innholdet fremfor alt annet innhold på siden. Dette betyr at vår tekst ikke vil bli forstyrret av søkelyset. De andre egenskapene er mest tekststiler og formateringsrelaterte som kan justeres etter ønske.
Oppdater nå siden din, og noe pent formatert tekst skal vises til venstre for det aktive bildet som illustrert nedenfor.
Nå som vi har utviklet en struktur for det statiske innholdet, bruker vi noen markeringer som vil legge til elementer som gjør det mulig for brukerne å samhandle med nettstedet.
Gå tilbake til "#leftCol" div, legg til følgende kode:
Opp ned venstre høyre
Elementet "#grid" er tomt; Dette vil bli befolket av Javascript i den endelige arbeidsversjonen. For tiden vil vi imidlertid bare kode noen barnelementer for å få en ide om hvordan det vil se ut.
Nå skal vi igjen bruke et sprites-bilde, denne gangen for våre piltastene. Så gå tilbake til Photoshop, gå til "tastatur" gruppen og bruk linjalverktøyet notat de totale dimensjonene.
Igjen må vi tillate to ganger høyden på gruppen for å inkludere en 'standard' og 'svinger' -stat. Opprett et nytt dokument med gjennomsiktig bakgrunn som er lik bredden på tastaturgruppen og to ganger i høyden. I opplæringseksemplet svarer dette til 70 x 92.
Dra "tastaturgruppen" til det nye dokumentet. Dupliser denne gruppen og plasser en umiddelbart over den andre. Gruppen nedenfor vil være vår "svinger" -stat. Gjør litt mindre justeringer for hover-tilstanden ved å lyse fargeroverlegget, pilene og omrisset. Fine justeringer er ofte tilstrekkelig for svevertilstander og mindre skift i lysstyrke er vanligvis lett merkbare.
For opplæringseksemplet vil endring av bakgrunnsfarge fra # 262a34 til # 2b2f3a og strekk / pil bakgrunnsfarge fra # 32343f til # 4b4d56 skape en effekt som er ideell.
Det endelige bildet skal se ut som nedenfor:
Lagre dette bildet som 'img / icons / keys.png'.
Nå legger vi til noen CSS for å kartlegge bildet til de ulike klassene.
#leftCol #controls width: 200px; høyde: 55px; posisjon: absolutt; bunn: 18px; #grid .line width: 5px; bakgrunn: # 666; overløp: skjult; flyte: venstre; margin-høyre: 2px; stilling: relativ; markør: standard; #grid høyde: 55px; bredde: 200px; #tracker høyde: 10px; bakgrunn: #fff; bredde: 5px; posisjon: absolutt; z-indeks: 10000; markør: standard; #grid .line width: 5px; bakgrunn: # 3d424f; overløp: skjult; flyte: venstre; margin-høyre: 2px; stilling: relativ; markør: standard; #keys bredde: 92px; høyde: 46px; posisjon: absolutt; venstre: 86px; bunn: 0; #keys en text-indent: -999px; bredde: 22px; høyde: 22px; bakgrunn: url ('? /img/icons/keys.png') no-repeat 0 0; overløp: skjult; posisjon: absolutt; Barnets ".line" -elementer vil danne et rutenett som representerer de relative kolonnehøyder. Denne abstraksjonen vil være en ideell måte å la brukeren få vite størrelsen på folio, dens deler og deres nåværende posisjon - på noen måter som tilsvarer breadcrumb på et tradisjonelt innholdsside.
Uansett er neste oppgave å kartlegge nøkkeltallene til bildesprite:
#keys a.kup left: 24px; tekstinnhold: -999px; topp: 0; bakgrunnsposisjon: -24px 0; #keys a.kup: svever, #keys a.hoveru bakgrunnsposisjon: -24px -46px; #keys a.kdown left: 24px; topp: 24px; bakgrunnsposisjon: -24px -24px; #keys a.kdown: svever, #keys a.hoverd bakgrunnsposisjon: -24px -70px; #keys a.kleft left: 0px; top: 24px; bakgrunnsposisjon: 0px -24px; #keys a.kleft: svever, #keys a.hoverl bakgrunnsstilling: 0px -70px; #keys a.kright left: 46px; topp: 24px; bakgrunnsposisjon: -46px -24px; bredde: 24px; #keys a.kright: svever, #keys a.hoverr bakgrunnsstilling: -46px -70px;
Prøv å forfriske nettleseren din og sveve elementene som nettopp er opprettet. De nye nøklene og rutenettet skal vises på samme måte som illustrasjonen nedenfor:
Til slutt legger vi til den dynamiske navigasjonen som skal knyttes til det aktive prosjektet. Sett inn følgende markering umiddelbart etter den åpne taggen av elementet # ############################
Vi har brukt inline styling her for å simulere hva som skal oppnås automatisk når vi har lagt til full Javascript-interaktivitet.
En annen image sprite vil bli brukt til disse ankrene. Gå tilbake til vår Photoshop-fil, åpne "knappene" -gruppen og velg det riktige vinkellaget. Som vi vil ha noe polstring på ankeret vårt, stiler vi disse med dimensjonene 44 x 44.
Opprett et nytt dokument 88 x 176 med gjennomsiktig bakgrunn for å imøtekomme 2 sett med 4 ikoner. Opprett et nytt lag som er svart for å hjelpe oss med å se de gjennomsiktige piler. Dra en vertikal guide til 44 piksler på x-aksen. (dra hjelpelinjer når linjene er aktivert og sikre at Vindu> Info er synlig for å se den nåværende plasseringen). Dra deretter tre horisontale guider ved 44, 88 og 132 piksler på y-aksen.
Nå, tilbake til den opprinnelige PSD, drar vinkelspilen inn i det nye dokumentet og lager 4 kopier på venstre side. Dette vil være vår standardstandard. Lag opaciteten for hvert lag 12%. Bruk Rediger> Transform for å rotere støttelinjene slik at bestillingen er som vist nedenfor:
Kopier disse lagene og flytt hver nøyaktig 44 piksler til høyre. Juster hver av de nye lagens opasitet til 20%. Slå av den svarte bakgrunnen slik at lerretet vises nesten helt gjennomsiktig og velg Lagre for web. Eksporter som en 24-biters PNG med gjennomsiktighet aktivert til 'img / icons / movers.png'.
Nå legger vi til noen CSS for å kartlegge dette bildet:
a.mover bakgrunn: url ('? /img/icons/movers.png') no-repeat -44px 0; høyde: 44px; bredde: 44px; disposisjon: ingen! viktig; #up, #right, #down, #left display: block; z-indeks: 300; posisjon: absolutt; topp: 10px; igjen: 10px; #right bakgrunnsposisjon: 0px -44px; # rett: svinger bakgrunnsstilling: -44px -44px; #down bakgrunnsposisjon: 0 -88px; #down: hover bakgrunnsposisjon: -44px -88px; #up bakgrunnsposisjon: 0px -132px; #up: hover bakgrunnsposisjon: - 44px -132px; Oppdater nettleseren din, og du bør nå se noe som ligner på nedenfor.
Og det er det! For den siste delen av denne opplæringen skriver vi Javascript som automatisk håndterer utformingen av bildene og introduserer dynamisk navigasjon ved hjelp av tastaturet eller musen.
Hvis du kanskje har gått glipp av noe, her er den endelige HTML-oppslaget:
Ditt navn - Digital portefølje Finn meg på Facebook Se min Flickr Finn meg på LinkedInOm fotografering
Demo Project
WEBSITE 2011
Kjæresten er dum og sitter, og er en avgjørende forfatter. Ikke noe annet å si. Etiam neque augue, tristique egen malesuada et, luktus sed felis. I dignissim lacus er du bare i stand til å utvide deg. Kjæresten er dum og sitter, og er en avgjørende forfatter. Ikke noe annet å si.
Link til prosjekt her
Opp ned venstre høyre
