Share
Il sito portfolio di Paul J Noble, vincente a livello internazionale, dal design unico, ha attirato l'attenzione di molte persone, e non solo dei clienti. Oggi seguirà la fase di progettazione di questo tutorial e dimostrerà come è stato codificato.
Per questo tutorial l'eccellente sito Web ROA (Svezia) viene utilizzato come esempio di un elemento del portfolio. Questo sito è stato descritto recentemente in Creattica e l'autore non è affiliato con ROA. Sentiti libero di usare il tuo lavoro come elementi del portfolio.
Creeremo un sito portfolio online con una griglia di immagini, un'intestazione fissa, elementi di testo e di interfaccia. Il mark-up sarà stilizzato in modo tale che il contenuto si adatti senza scorrere in quasi tutti gli schermi degli utenti e si adatti bene alle dimensioni dello schermo più grandi degradandosi con grazia a risoluzioni più basse. La griglia dell'immagine mostrerà solo l'immagine corrente e attiva, ma conterrà molte più immagini nascoste che possono essere visualizzate tramite la navigazione a livello di pagina.
La creazione del modello HTML e del CSS ci preparerà per la parte successiva di questo tutorial, in cui aggiungeremo il livello di interazione usando Javascript e daremo vita al design.
Crea un nuovo documento html nel tuo editor di testo preferito. Allegare jQuery (1.4.2+) e un nuovo file CSS vuoto.
Il primo markup che creeremo sarà un div che contiene tutti i nostri contenuti. In seguito, imposteremo i valori minimi di altezza e larghezza per questo div ('#pagina') per garantire che il design si riduca a basse risoluzioni. Crea altre div per i principali elementi della pagina illustrata di seguito.
Il tuo nome - Portafoglio digitale
Per i siti in cui non è richiesto lo scorrimento verticale, è spesso meno invadente posizionare elementi di navigazione e intestazione nella parte inferiore dello schermo. Ciò libera spazio aggiuntivo nello spazio più frequentemente visualizzato vicino alla parte superiore della finestra. Vorremmo che questo elemento estendesse l'intera larghezza del display dell'utente e fosse sempre posizionato nella parte inferiore dello schermo.
Sebbene questo sia visivamente posizionato nella parte inferiore dello schermo, apparirà effettivamente nella parte superiore del markup del documento. Creeremo un div con l'intestazione 'ID' e quindi un div nidificato con la classe 'inner'. Un involucro interno semplificherà il posizionamento degli articoli interni.
All'interno del wrapper creeremo tre div; "#logo", "#social" e "#nav".
Per il logo annideremo un file immagine chiamato "images_26 / build-an-innovative-portfolio-site-using-alternative-uiux.png" e aggiungeremo un testo alternativo. Crea il file immagine del logo tagliando il tuo logo dal PSD. Dato che sarà posizionata in modo assoluto, la dimensione esatta non è critica, tuttavia assicurati che l'immagine del logo si adatti alla barra di navigazione nel design.
Per i pulsanti social avremo bisogno di tre ancore - una per Facebook, Flickr e LinkedIn. Questi avranno le immagini di sfondo applicate come elementi grafici, tuttavia continueremo a usare il testo per scopi semantici e a nasconderlo con i CSS. Per questi collegamenti esterni utilizzeremo l'attributo target = "_ blank" in modo che le pagine si aprano in una nuova scheda o finestra.
Per la navigazione utilizzeremo ancora tre ancore e assegneremo loro le proprie classi e i valori di identificazione.
Trovami su Facebook Guarda il mio Flickr Trovami su LinkedInInformazioni sul lavoro fotografico
I nostri oggetti grafici per gli articoli rimanenti non saranno semplici come il logo. Poiché sono interattivi, avranno bisogno di stati di passaggio del mouse e i pulsanti di navigazione richiedono stati attivi.
Per i pulsanti di navigazione creeremo uno sprite dell'immagine. Torna a Photoshop e crea una selezione attorno ai pulsanti nel PSD. Seleziona Modifica> Copia unita.
Quindi selezionare File> Nuovo. Verrà visualizzata una finestra di dialogo con la larghezza e l'altezza predefinite rispetto al rettangolo selezionato in precedenza. Cambia l'altezza a 3 volte il valore predefinito. Questo creerà una nuova tela che si adatta a tre versioni del grafico di navigazione, una per ogni stato richiesto; attivo, al passaggio del mouse e spento.
Ora sposta la cartella dei pulsanti dal PSD e clona questo gruppo due volte per creare tre gruppi. Regola leggermente i colori del testo per uniformare ciascun gruppo per creare i diversi stati dei pulsanti. Di seguito è riportato un esempio di grafica finale. Salva la versione finale come PNG (24 bit) in "img / icons / nav.png" assicurandoti che lo sfondo sia trasparente.
Per i pulsanti dei social media avremo bisogno solo di due stati ('hover' e 'off'). Ripeti il procedimento sopra per creare uno sprite dell'immagine dei pulsanti di social media. Salva l'immagine come "img / icons / social-media.png".
Infine, crea una nuova immagine 'img / bg / header.png'.
Ora che abbiamo sviluppato la struttura e le risorse immagine, creiamo alcuni CSS per iniziare a definire questa pagina.
Nella parte superiore del file CSS includeremo un reset CSS per garantire che nessun valore predefinito specifico del browser possa rovinare il nostro layout.
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronimo, indirizzo, grande, citare, codice, del, dfn, em, font, img, ins, kbd, q, s, samp, piccolo, strike, forte, sub, sup, tt, var, b, u, i, centro, dl, dt, dd, ol, ul, li, fieldset, form, label, legend margin: 0; padding: 0; confine: 0; contorni: 0; dimensione carattere: 100%; vertical-align: baseline; sfondo: trasparente; body line-height: 1.2em; font-family: arial, sans-serif; ol, ul list-style: none; blockquote, q quotes: none; blockquote: before, blockquote: after, q: before, q: after content: "; content: none;: focus outline: 0; ins text-decoration: none; del text-decoration: line -attraverso;
Quindi creeremo alcuni stili di base per i principali elementi della pagina.
body, html height: 100%; body background: # 0f1219; #page height: 100%; altezza minima: 700 px; posizione: relativa; larghezza minima: 1100 px; overflow: nascosto; h1, h2, p, li, div font-family: "arial", "helvetica", sans-serif; li font-size: 12px;
Successivamente, modificheremo l'intestazione. Useremo il posizionamento assoluto per il logo e altri elementi per facilitare il controllo sul design.
Nota: modelleremo i nostri ancoraggi come elementi a livello di blocco ('display: block') e con text-indent negativo per garantire elementi accessibili ma basati graficamente. Le larghezze e altezze possono essere regolate se i file personalizzati di sprite dell'immagine differiscono nelle loro dimensioni.
Accentsconagua
#header background: url ('? /img/bg/header.png') ripetizione; altezza: 60px; z-index: 1200; overflow: nascosto; posizione: assoluta; fondo: 0; larghezza: 100%; #logo position: absolute; top: 0px; a sinistra: 30 px; #header .inner width: auto; imbottitura: 0 30px; posizione: relativa; altezza: 70 px; #nav position: absolute; a destra: 30 px; top: 14px; altezza: 31px; larghezza: 290 px; #nav a background: url ('? /img/icons/nav.png') no-repeat 0 0; text-indent: -9999px; float: giusto; blocco di visualizzazione; contorni: nessuno; altezza: 31px; Ora definiremo i singoli stili per ciascun pulsante di navigazione mappando le varie posizioni di sprite dell'immagine nella classe di ciascun pulsante.
#nav a.work width: 95px; #nav a.work:hover background-position: 0 -62px; #nav a.about width: 93px; background-position: -188px 0; #nav a.about: hover background-position: -188px -62px; #nav a.workActive width: 95px; background-position: -0px -31px; cursore: predefinito; #nav a.aboutActive width: 93px; background-position: -188px -31px; cursor: default; #nav a.photos width: 93px; background-position: -95px 0; #nav a.photos:hover background-position: -95px -62px; #nav a.photosActive width: 93px; background-position: -95px -31px; cursore: predefinito;
Successivamente faremo lo stesso per i pulsanti dei social media.
#social width: 88px; altezza: 26px; posizione: assoluta; inizio: 17px; a destra: 330 px; #social a display: block; background: url ('? /img/icons/social-media.png') no-repeat 0 0; fluttuare: a sinistra; altezza: 26px; larghezza: 26px; contorni: nessuno; fluttuare: a sinistra; margin-right: 4px; text-indent: -9999px; overflow: nascosto; #social a.fb background-position: 0 0; #social a.fb: hover background-position: 0 -26px; #social a.flickr background-position: -30px 0; #social a .flickr: hover background-position: -30px -26px; #social a.linkedin background-position: -60px 0; margin-right: 0; #social a.linkedin: hover background-position: -60px -26px; OK, ora aggiorna la pagina e dovresti vedere qualcosa di simile all'immagine qui sotto. Passa il cursore sopra i pulsanti per vedere i diversi stati. Se ci sono stranezze negli stati di hover, prova ad aggiustare la proprietà position-position nel tuo CSS.
Prova a ridimensionare la finestra del browser per simulare i display a bassa risoluzione. Le barre di scorrimento dovrebbero apparire una volta che la finestra viene ridotta al di sotto dei valori min-height e min-width definiti per il div '#page'.
Utilizzeremo un effetto luce spot per focalizzare l'attenzione visiva sull'immagine attiva mentre suggeriamo il contenuto circostante. Per creare una separazione di fondo / primo piano più forte applicheremo anche uno schema di trama sottile allo sfondo.
Per raggiungere questo obiettivo, dobbiamo aggiungere un po 'di markup. Crea i seguenti nuovi div nidificati nel div '#main'.
Per prima cosa creiamo l'immagine spotlight ('images_26 / build-an-innovative-portfolio-site-using-alternative-uiux_2.png') che sovrapporrà la galleria. Tornando a Photoshop, seleziona il livello nel gruppo "vignetta". Vai a Seleziona> Tutto e copia la regione selezionata. Crea un nuovo documento (dovrebbe essere almeno 1400 x 900) e incolla gli appunti nel canvas.
Ora, dovremo apportare alcune modifiche alla nostra immagine. In primo luogo, espandi le dimensioni della tela in modo che siano 100 pixel più in alto nella parte superiore.
Quindi, espandi il bordo sinistro di 50 pixel.
Infine, espandi i bordi inferiore e destro in modo che la dimensione totale della tela sia 1600 x 1600.
Ora, prendi lo strumento benna e con l'anti-aliasing 'off' e la tolleranza impostata su '0', riempi la regione trasparente intorno ai bordi con il colore dello sfondo della pagina (# 0f1219). Il risultato finale dovrebbe essere simile all'immagine qui sotto.
Seleziona File> Salva per Web e salva questa immagine come PNG a 24 bit ('images_26 / build-an-innovative-portfolio-site-using-alternative-uiux_2.png') con la trasparenza abilitata.
Ora, tornando alla nostra immagine sorgente originale, seleziona il livello Pattern Fill 1 (questo è il livello delle linee diagonali). Fai clic con il tasto destro e seleziona "Rasterizza livello". Quindi, avvicinare lo zoom e selezionare una regione del livello come sotto. Copia questo (solo le linee - non copiare lo sfondo) e incollalo in un nuovo documento. Salva per il web, di nuovo un PNG a 24 bit con trasparenza con il percorso 'img / bg / lines.png'.
Ora, aggiungiamo il CSS che integrerà le nostre nuove immagini?
#horizon min-height: 700px; larghezza: 100%; overflow: nascosto; #main background: # 0f1219; larghezza: 1300 px; margine: auto; margin-top: -190px; altezza: 1000px; overflow: nascosto; posizione: relativa; #main .inner width: 9000px; altezza: 9000px; overflow: nascosto; posizione: assoluta; inizio: 0; a sinistra: 0; .glowBg background: # 282d3f; altezza: 100%; larghezza: 100%; posizione: assoluta; ripetizione di #glowTexture background: url ('? /img/bg/lines.png'); altezza: 900 px; larghezza: 1300 px; posizione: assoluta; inizio: 0; a sinistra: 0; #glowShadow height: 1600px; posizione: assoluta; larghezza: 1500px; inizio: 00px; overflow: nascosto; z-index: 200; #glowShadow img display: block; position: relative; left: -100px; Salva, aggiorna e ora dovresti vedere il colore di sfondo, la trama e il riflettore. Successivamente inizieremo ad aggiungere alcune immagini.
Per le immagini della galleria inseriremo le immagini per progetto in colonne. Ogni progetto può avere più immagini disposte verticalmente. Si accede a diversi progetti spostando lateralmente le colonne.
Crea una nuova immagine 640x480 e incolla un'istantanea di un sito Web o ritaglia il lavoro che desideri includere. Lo stile più scuro di questo disegno di solito funziona meglio con le immagini che hanno prevalentemente uno sfondo chiaro.
Per iniziare aggiungeremo un po 'di markup.
Noterai che abbiamo aggiunto alcuni stili in linea sui tag. Questo simula ciò che il nostro livello di interazione si applicherà in seguito automaticamente (vedremo come viene fatto nella prossima parte di questo tutorial). Per il momento, tuttavia, eseguiremo un hard-code degli stili. Nota: l'attributo opacità non funzionerà in Internet Explorer 8 e versioni successive.
Aggiungi il seguente CSS per le immagini della galleria:
#gallery left: 285px; posizione: assoluta; larghezza: 100%; altezza: 900 px; #gallery .col position: absolute; superiore: 80 px; larghezza: 640 px; .item height: 480px; larghezza: 640 px; sfondo: # 181a22; posizione: assoluta; margine: auto; superiore: 320 px; z-index: 100; overflow: nascosto;
La proprietà più importante qui è il posizionamento assoluto delle colonne (queste sono le div con la classe 'col'). Con il posizionamento assoluto possiamo muovere ogni colonna indipendentemente o spostare tutte le colonne in sincrono, il che ci consentirà di navigare nella griglia delle immagini una volta applicato il livello di interazione.
Aggiorna la pagina e ora dovresti vedere la galleria con le immagini. Noterai, tuttavia, che la galleria è posizionata staticamente verticalmente. Idealmente vorremmo che il contenuto si concentri su se stesso a seconda delle dimensioni della finestra. Per fare ciò, dobbiamo aggiungere un po 'di scripting.
Crea un nuovo tag script appena prima del tag body di chiusura e inserisci il seguente codice:
Assicurati che jQuery sia stato aggiunto nell'intestazione della pagina altrimenti questo script non funzionerà.
Questo script fa alcune cose. La funzione arrange () rileva l'altezza della finestra e regola le proprietà CSS degli elementi '#main' per centrare verticalmente il contenuto. Lo fa nei casi in cui la finestra dell'utente è più alta di 760 pixel (vedi condizionale alla riga 541), per le altezze della finestra inferiori a questa vengono applicate le proprietà CSS predefinite. Il listener $ (window) .resize () (riga 25) chiama la funzione adjust () ogni volta che la finestra dell'utente viene ridimensionata.
A questo punto aggiungeremo del contenuto testuale relativo al progetto attivo. Per questo abbiamo bisogno di titolo, sottotitolo e un paragrafo di testo da elaborare sul progetto attivo.
Aggiungi il seguente mark-up al div "#leftCol":
Progetto dimostrativo
SITO WEB 2011
Progetto dimostrativo
SITO WEB 2011
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non tellus eget neque tempor adipiscing. Etiam neque augue, tristique eget malesuada et, luctus sed felis. In dignissim lacus eu justo tempus ut tincidunt nisi dapibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non tellus eget neque tempor adipiscing.
Link al progetto qui
Ovviamente, se stai utilizzando un vero lavoro che hai fatto sentiti libero di usare titoli e testo del corpo che descrivono accuratamente il tuo lavoro.
Ora modifichiamo questo contenuto con alcuni CSS aggiuntivi:
#leftCol padding-top: 30px; larghezza: 200 px; altezza: 480 px; a sinistra: 30 px; posizione: assoluta; z-index: 10001; superiore: 270 px; #projectInfo top: 50px; posizione: assoluta; altezza: 350 px; larghezza: 200 px; #leftCol h1 color: #fff; dimensione del font: 28px; margin-bottom: 6px; top: 50px; font-weight: 300; altezza della linea: 30px; #leftCol p.sub color: # 338966; font-size: 11px; text-transform: maiuscolo; letter-spacing: 2px; font-weight: bold; #leftCol p.body, #leftCol p.link color: # 8c8f95; font-family: 'lucida grande', 'arial'; font-size: 12px; altezza della linea: 19px; padding-top: 30px; margin-bottom: 10px; #leftCol p.link padding-top: 10px; #leftCol p.link a color: # 8c8f95; decorazione del testo: sottolineatura; #leftCol p.link a: hover color: #fff; decorazione del testo: sottolineatura;
Ancora una volta, la considerazione più importante qui è il posizionamento assoluto dell'elemento "#leftCol". Dato che questo elemento è collocato all'esterno del tag "#gallery" ancora all'interno del tag "#main", la sua posizione sarà relativa al tag "#main" centrato e indipendente dal movimento nella galleria. Ciò significa che il testo può essere aggiornato quando il progetto attivo cambia senza cambiare posizione. L'altissimo indice z per "#leftCol" (10001) colloca questo contenuto sopra tutti gli altri contenuti della pagina. Ciò significa che il nostro testo non verrà disturbato dall'effetto spotlight. Le altre proprietà sono per lo più stili di testo e formattazione correlati che possono essere regolati come desiderato.
Ora aggiorna la pagina e alcuni testi ben formattati dovrebbero apparire a sinistra dell'immagine attiva come illustrato di seguito.
Ora che abbiamo sviluppato una struttura per il contenuto statico, applicheremo alcuni markup che aggiungeranno elementi che consentono ai nostri utenti di interagire con il sito.
Ritornando al div "#leftCol", aggiungi il seguente codice:
Su giù sinistra destra
L'elemento "#grid" è vuoto; questo verrà popolato da Javascript nella versione finale funzionante. Per il momento, tuttavia, codificheremo solo alcuni elementi figlio per avere un'idea di come apparirà.
Ora useremo ancora un'immagine sprite, questa volta per i nostri tasti freccia. Quindi, tornando a Photoshop, vai al gruppo 'tastiera' e usando lo strumento del righello nota le dimensioni totali.
Ancora una volta, dovremo consentire il doppio dell'altezza del gruppo per l'inclusione di uno stato 'default' e 'hover'. Crea un nuovo documento con uno sfondo trasparente uguale alla larghezza del gruppo "tastiera" e al doppio dell'altezza. Nell'esempio del tutorial questo equivale a 70 x 92.
Trascina il gruppo 'tastiera' nel nuovo documento. Duplica questo gruppo e posizionane uno immediatamente sopra l'altro. Il gruppo di seguito sarà il nostro stato di "passaggio del mouse". Apporta alcune piccole modifiche allo stato di passaggio del mouse aumentando la sovrapposizione, le frecce e il contorno del colore. Le regolazioni fini sono spesso sufficienti per gli stati al passaggio del mouse e gli spostamenti secondari nella luminosità di solito sono facilmente evidenti.
Per l'esempio del tutorial, la modifica del colore di sfondo da # 262a34 a # 2b2f3a e il colore di sfondo tratto / freccia da # 32343f a # 4b4d56 creeranno un effetto ideale.
L'immagine finale dovrebbe apparire come sotto:
Salva questa immagine come 'img / icons / keys.png'.
Ora aggiungeremo dei CSS per mappare l'immagine alle varie classi.
#leftCol #controls width: 200px; altezza: 55 px; posizione: assoluta; fondo: 18px; #grid .line width: 5px; sfondo: # 666; overflow: nascosto; fluttuare: a sinistra; margin-right: 2px; posizione: relativa; cursore: predefinito; #grid height: 55px; larghezza: 200 px; #tracker height: 10px; sfondo: #fff; larghezza: 5px; posizione: assoluta; z-index: 10000; cursore: predefinito; #grid .line width: 5px; sfondo: # 3d424f; overflow: nascosto; fluttuare: a sinistra; margin-right: 2px; posizione: relativa; cursore: predefinito; #keys width: 92px; altezza: 46px; posizione: assoluta; a sinistra: 86 px; fondo: 0; #keys a text-indent: -999px; larghezza: 22 px; altezza: 22px; background: url ('? /img/icons/keys.png') no-repeat 0 0; overflow: nascosto; posizione: assoluta; Gli elementi ".line" secondari formeranno una griglia che rappresenta le altezze delle colonne relative. Questa astrazione sarà un modo ideale per far conoscere all'utente la dimensione del folio, le sue parti e la loro posizione corrente - in qualche modo equivalente al breadcrumb di un sito di contenuto tradizionale.
Ad ogni modo, il prossimo compito è mappare le classi chiave allo sprite dell'immagine:
#keys a.kup left: 24px; text-indent: -999px; inizio: 0; background-position: -24px 0; #keys a.kup: hover, #keys a.hoveru background-position: -24px -46px; #keys a.kdown left: 24px; top: 24px; background-position: -24px -24px; #keys a.kdown: hover, #keys a.hoverd background-position: -24px -70px; #keys a.kleft left: 0px; top: 24px; background-position: 0px -24px; #keys a.kleft: hover, #keys a.hoverl background-position: 0px -70px; #keys a.kright left: 46px; top: 24px; background-position: -46px -24px; larghezza: 24px; #keys a.kright: hover, #keys a.hoverr background-position: -46px -70px;
Prova ad aggiornare il browser e aleggiando gli elementi appena creati. Le nuove chiavi e la nuova griglia dovrebbero apparire come nella figura seguente:
Infine, aggiungeremo la navigazione dinamica che verrà allegata al progetto attivo. Inserisci il seguente markup immediatamente dopo il tag aperto dell'elemento "#leftCol":
Abbiamo utilizzato lo stile inline qui per simulare ciò che verrà raggiunto automaticamente quando avremo aggiunto l'intera interattività Javascript.
Un altro sprite di immagini sarà usato per queste ancore. Ritornando al nostro file Photoshop, apri il gruppo "pulsanti" e seleziona il livello ad angolo retto. Poiché desideriamo un po 'di imbottitura sulla nostra ancora, modelleremo questi elementi con le dimensioni 44 x 44.
Crea un nuovo documento 88 x 176 con uno sfondo trasparente per ospitare 2 serie di 4 icone. Crea un nuovo livello che è nero per aiutarci a vedere le frecce traslucide. Trascina una guida verticale a 44 pixel sull'asse x. (trascina le guide quando i righelli sono abilitati e assicurati che Window> Info sia visibile per vedere la posizione corrente). Quindi trascina tre guide orizzontali a 44, 88 e 132 pixel sull'asse y.
Ora, tornando al PSD originale, trascina la freccia dell'angolo nel nuovo documento e crea 4 copie nella parte sinistra. Questo sarà il nostro stato 'predefinito'. Rendi l'opacità per ogni strato del 12%. Usando Modifica> Trasforma per ruotare le guide in modo tale che l'ordine sia come mostrato di seguito:
Copia questi livelli e sposta ciascuno esattamente di 44 pixel a destra. Regola l'opacità di ciascuno dei nuovi livelli al 20%. Disattiva lo sfondo nero in modo che la tela appaia quasi completamente trasparente e seleziona Salva per Web. Esporta come PNG a 24 bit con trasparenza abilitata a "img / icons / movers.png".
Ora aggiungeremo dei CSS per mappare questa immagine:
a.mover background: url ('? /img/icons/movers.png') no-repeat -44px 0; altezza: 44px; larghezza: 44px; contorni: nessuno! importante; #up, #right, #down, #left display: block; z-index: 300; posizione: assoluta; inizio: 10px; a sinistra: 10px; #right background-position: 0px -44px; #right: hover background-position: -44px -44px; #down background-position: 0 -88px; #down: hover background-position: -44px -88px; #up background-position: 0px -132px; #up: hover background-position: - 44px -132px; Aggiorna il tuo browser e ora dovresti vedere qualcosa di simile al seguente.
E questo è tutto! Per la parte finale di questo tutorial scriveremo il Javascript che gestirà automaticamente il layout delle immagini e introdurrà la navigazione dinamica usando la tastiera o il mouse.
Nel caso in cui tu abbia perso qualcosa, ecco l'ultimo markup HTML:
Il tuo nome - Portafoglio digitale Trovami su Facebook Guarda il mio Flickr Trovami su LinkedInInformazioni sul lavoro fotografico
Progetto dimostrativo
SITO WEB 2011
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non tellus eget neque tempor adipiscing. Etiam neque augue, tristique eget malesuada et, luctus sed felis. In dignissim lacus eu justo tempus ut tincidunt nisi dapibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non tellus eget neque tempor adipiscing.
Link al progetto qui
Su giù sinistra destra
