Accentsconagua

Costruire un portfolio basato su Instagram con Bootstrap

Web design
Share

In questo tutorial ho intenzione di eseguire il processo di creazione del semplice portfolio basato su Instagram come progettato in un precedente tutorial di Tomas Laurinavicius.

Thomas ha fatto un ottimo lavoro mantenendo il design semplice, spazioso e funzionale, quindi penso che sia giusto che facciamo lo stesso quando lo costruiamo. Per semplificare la nostra vita ci baseremo su alcuni strumenti e librerie, quindi iniziamo dando un'occhiata a loro.

Strumenti del mestiere

Ci sono alcune cose che dobbiamo preparare prima di iniziare la nostra build. Loro sono:

  • insolenza
  • Twitter Bootstrap (versione Sass)
  • Instafeed.js
  • Modernizr

Prima di tutto, devi installare Sass sul tuo computer. Il modo più semplice per farlo è utilizzare una delle eccellenti app disponibili per eseguire tutte le operazioni di visualizzazione e compilazione. Attualmente sto usando Koala che è multipiattaforma e gratuito, quindi è un'ottima opzione per iniziare subito a lavorare. Ci sono alternative come app Scout, Prepros e Compass. Forniscono quasi tutte le stesse funzionalità, quindi la scelta è vostra!

Il prossimo è Bootstrap. Utilizzeremo Bootstrap a un livello molto semplice, per gestire alcuni degli elementi reattivi della pagina. Vogliamo specificamente scaricare il Versione Sass quindi possiamo includerlo nel nostro foglio di stile e utilizzare le variabili disponibili. Vai avanti e scarica l'ultima versione.

Quasi arrivati! Ora abbiamo bisogno di prendere una copia di Instafeed.js che gestirà tutto il lavoro che cattura foto da Instagram. Vale la pena notare che per ottenere qualsiasi cosa da Instagram è necessario fornire il plugin con a Identificativo cliente che può essere generato iscrivendosi a Instagram e compilando il modulo nella sezione sviluppatori.

Infine, dovremmo scaricare l'ultima versione di Modernizr in modo che, se necessario, possiamo mirare a determinate funzionalità del browser e quindi abbiamo anche lo shim HTML5 per i browser più vecchi. Questo non è strettamente necessario, ma mi piace includerlo nei progetti solo per essere sicuro.

Ora abbiamo questi beni possiamo iniziare la nostra costruzione!

Struttura di file e cartelle

Abbiamo bisogno di creare alcuni file e cartelle per il nostro progetto, quindi vai avanti e crea quanto segue nella directory principale del progetto.

  • css /
  • immagini/
  • js /
  • index.html

Questo è il nostro blocco di partenza di base. Successivamente, trova l'archivio Bootstrap scaricato in precedenza ed estrailo da qualche parte facilmente reperibile. All'interno della cartella estratta dovrebbe essere una cartella denominata risorse. Apri questa cartella e vedrai qualcosa di simile al seguente:

Copia il fontdirectory nella root del progetto con le altre cartelle che abbiamo appena creato. Aprire javascript e copia il bootstrap.jsfile nel jscartella del nostro progetto. Infine, apri il fogli di stile directory e copia il bootstrap.scssfile e bootstrapcartella nel css cartella del nostro progetto. I nostri file e cartelle dovrebbero ora assomigliare a questo ...

Buon lavoro! Ora, trova il instafeed.min.js e Modernizr file scaricati in precedenza e copiarli nel jscartella. Abbiamo solo bisogno di impostare alcune altre cose prima di poter iniziare a costruire il layout.

Sass Setup

Ora è il momento di impostare il nostro progetto nell'app Sass che hai scelto di utilizzare. In Koala si tratta di trascinare la cartella nella finestra dell'app. Credo che sia un processo simile anche per gli altri. La prossima cosa che faccio sempre quando si impostano le cose è guardare le opzioni di compilazione di Sass e, se disponibile, selezionare la casella per utilizzare Autoprefixer. Questa pratica aggiunta analizzerà il nostro file Sass e aggiungerà i prefissi dei fornitori di cui abbiamo bisogno, quindi non dobbiamo preoccuparci di scriverli da soli. Sentiti libero di giocare con le impostazioni che l'app Sass ti offre per ottenere il set up migliore per te. Mi piace mantenere le cose semplici e normalmente verificheremo solo su Autoprefix e uno stile di output di allargato (compressa in produzione).

Aggiunta di file

Apri il progetto in qualsiasi editor che usi per aggiungere alcuni file.

Prima di tutto sotto il cssdirectory aggiungi un file chiamato style.scss. Quindi dentro il js cartella aggiungi un file chiamato app.js.

Assicurati di aggiornare l'app Sass che stai utilizzando in modo che raccolga i nuovi file. Alcuni lo fanno automaticamente ma è meglio controllare e aggiornare manualmente se necessario.

Penso che sia tutto il file impostato per ora. Possiamo andare avanti con la costruzione del layout!

Inizia la costruzione

Aprire index.html e inserisci (o copia / incolla) il seguente codice HTML di base:

    Portfolio di Instagram

Abbiamo il nostro primo pezzetto di codice! Scopriamolo. 

Il la sezione contiene il viewport necessariotag in modo che le nostre query multimediali funzionino correttamente. Successivamente, diamo un titolo alla pagina e includiamo a  tag per i vari tipi di carattere Google che vogliamo utilizzare. I caratteri qui sono basati su quelli utilizzati nel design di Thomas. La prossima linea può sembrare strana perché non abbiamo creato a style.css file ancora, ma la generazione di quel file sarà gestita dal nostro compilatore Sass. Infine, includiamo Modernizr.

Il elemento contiene altri quattro elementi per contenere ciascuna delle bande che appaiono sul disegno. Ho applicato alcune classi descrittive al

elementi in modo che possiamo vedere chiaramente per cosa saranno utilizzati.

Riferimento ai file JavaScript

Aggiungi il seguente snippet sotto il footer-bottom sezione:

Questi > i tag rimandano alle nostre varie librerie JavaScript incluso jQuery dal CDN di Google che è richiesto da Bootstrap.

stili

Abbiamo i nostri elementi costitutivi di base, quindi continuiamo impostando il nostro style.scss file un po '.

/ * * Variabili personalizzate * / $ carattere principale: 'Lato', sans-serif; $ sub-font: 'Montserrat', sans-serif; $ Fancy-font: 'Kaushan Script', corsivo; $ font-size: 16px; $ nero: # 000; $ bianco: #FFF; $ grigio: # 585c65; $ mediumgrey: # 9b9b9b; $ lightgrey: #eeeeee; $ blu: # 3466a1; $ padding: 10px; $ margin: 10px; / * * Sostituisci le variabili Bootstrap * / $ font-family-sans-serif: $ main-font; @import 'bootstrap';

Qui stiamo impostando alcune variabili che possiamo usare nel nostro foglio di stile in seguito. Le prime sono alcune variabili correlate ai font. È qui che inseriamo i caratteri Google che abbiamo incluso in precedenza e offriamo a ciascuno una riserva se per qualche motivo il carattere non viene caricato o lavorato.

Abbiamo quindi alcune variabili di colore che sono state selezionate dal design. Questa è una delle ragioni per cui amo Sass così tanto che possiamo impostare i nostri colori qui e dimenticare di ricordare o copiare valori esadecimali ovunque.

Infine, per le nostre variabili personalizzate, abbiamo un margine e un riempimento semplici. Mi piace includerli anche se non li uso sempre. È bello avere un valore di base con cui lavorare e ci dà la possibilità di apportare modifiche uniformi agli elementi che usano le variabili.

La prossima sezione è dove includiamo Bootstrap, ma prima di procedere dovremmo impostare la variabile del font principale di Bootstrap $ font-family-sans-serif per uguagliare il nostro creato in precedenza $ Main-font variabile. Ciò significa che quando Bootstrap è compilato userà il nostro font principale piuttosto che il suo.

Il @importarela dichiarazione qui non include il .SCSS alla fine del file in quanto non è necessario quando si includono altri file Sass. Sass è abbastanza intelligente da cercare e trovare il file giusto. Salva il file e, si spera, la tua app Sass realizzerà che hai salvato un file Sass e lo compili style.css.

Più stili

Continuiamo ad aggiungere alcuni stili:

* posizione: relativa; dimensionamento della scatola: border-box;  body color: $ gray; font-size: $ font-size;  header altezza massima: 600px; altezza: 600 px; overflow: nascosto;

Qui usiamo il selettore universale * per impostare tutto come posizione: relativaquindi non ci sono sorprese quando si utilizzano elementi posizionati in modo assoluto. È anche utile per impostare universalmente il box-sizing proprietà a border-box in modo che possiamo usare le larghezze percentuali e non preoccuparci di eventuali padding l'elemento ha influenzato il layout.

Quindi impostiamo un colore e una dimensione di carattere predefiniti per il nostro corpo e diamo il elemento un po 'di altezza.

Per ora è tutto per il nostro file Sass. Torna indietro nel index.html file in modo che possiamo iniziare a lavorare sull'intestazione.

Sparando l'intestazione

L'intestazione di questo design non è complicata nella progettazione, il che rende più facile la costruzione. Il markup con cui lavoreremo è il seguente:

Montagne 
 Jonathan 
 
 
Ciao! Sono Jonathan
 
Amo viaggiare in tutto il mondo e progettare cose bellissime
 
 
 Facebook Twitter Instagram

Questo dovrebbe andare tra il nostro  tag. Noterai che il tag dell'immagine fa riferimento innanzitutto a un'immagine che non esiste. Dovremo tagliare questa immagine fuori dal PSD. Non andrò nei dettagli su come farlo in questo tutorial ma se hai bisogno di aiuto con il processo controlla questo suggerimento rapido.

Il resto del codice di intestazione comprende tre div elementi contenenti il ​​nome, i titoli e i link sociali. Ho applicato alcune classi a questi elementi che verranno utilizzati successivamente nel nostro file Sass.

Stili di intestazione

Iniziamo aggiungendo alcune righe di codice all'interno del nostro intestazione dichiarazione.

img position: fixed; inizio: 0px; a sinistra: 50%; margin-left: -600px; larghezza: 1200px; @media screen e (min-width: $ screen-lg) top: auto; a sinistra: auto; margine: 0; larghezza: 100%;

Questo dovrebbe essere annidato dentro il intestazione sezione del nostro file Sass proprio sotto le dichiarazioni per l'intestazione stessa.

Immagine fissa

Vedrai qui che abbiamo impostato la posizione del imgtag a fisso. Ciò significa che l'immagine rimarrà in posizione quando l'utente scorre, creando così una sensazione di profondità. L'idea è che il contenuto scorra sopra l'immagine nell'intestazione. Poiché adottiamo una prima metodologia mobile, i nostri stili di base danno all'immagine una larghezza e la posizionano al centro applicando un margine sinistro negativo esattamente a metà larghezza. Funziona perché il punto di trasformazione dell'immagine in CSS è l'angolo in alto a sinistra, quindi quando diamo un a sinistra: 50%dichiarazione che posizionerà il bordo sinistro dell'elemento al centro dello schermo. Il piccolo trucco marginale negativo ci aiuta elementi centrati correttamente con posizionamento assoluto o fisso.

Media Query

Abbiamo quindi il primo utilizzo di una delle nostre variabili di dimensioni dello schermo. Stiamo dicendo qui: su grandi dimensioni delle finestre, l'immagine riempie la larghezza del browser e la posiziona nell'angolo in alto a sinistra. È importante sottolineare che dobbiamo ripristinare il margine in modo che l'immagine non venga trascinata leggermente a sinistra.

Diamo una prima occhiata al nostro lavoro nel browser!

Continuiamo ... 

.name font-size: 21px; posizione: assoluta; top: 50px; a sinistra: 50 px; colore: $ bianco;  .titles position: absolute; fondo: 40%; larghezza: 100%; allineamento del testo: centro; @media screen e (min-width: $ screen-lg) bottom: 50%;  h1, h2 larghezza: 100%; colore: $ bianco; margine: 0;

Qui impostiamo il nomee titoli posizione degli elementi e stili dei caratteri. Dobbiamo utilizzare una query multimediale su titolielemento per spingerlo un po 'di più su schermi di grandi dimensioni. Facciamo un rapido aggiornamento nel browser.

Sembra già meglio! Riordiniamo un po 'di più questi titoli.

h1 text-transform: maiuscolo; font-weight: 700; font-size: 36px; letter-spacing: 0.06em; margin-bottom: $ margin; span display: block; @media screen e (min-width: $ screen-md) display: inline;  h2 font-size: 16px; larghezza: 70%; margine: 0 auto; @media screen e (min-width: $ screen-lg) width: 100%; margine: 0;

La cosa principale da notare qui sarebbe il stile per il campataelemento. Stiamo usando il campatatag nel nostro codice per racchiudere una parte dell'intestazione principale. Questo ci permette di indirizzarlo nel CSS e, come abbiamo fatto qui, cambiarne il layout. Sul cellulare abbiamo bisogno che sia un elemento a livello di blocco in modo che si impili al di sotto, ma su schermi più grandi va bene per farlo funzionare come un normale testo. Questo dovrebbe apparire molto meglio ora ...

Fancy Font

Uno stile veloce che dovremmo aggiungere è il nome nell'angolo in alto a sinistra. Inserire il seguente codice alla fine del file Sass, al di fuori del intestazione bloccare.

.fancy-font font-family: $ fancy-font;

Stiamo applicando il nostro carattere di fantasia a qualsiasi elemento con questa classe. Questo è così che possiamo riutilizzarlo ogni volta che è necessario e non è limitato a nessun elemento particolare.

Icone sociali

Dovremmo attirare l'attenzione sulle icone sociali che, in questo caso, comporteranno la creazione di sprite per display a risoluzione normale e display ad alta risoluzione (Retina).

Vai su Iconfinder e afferra ognuna delle icone nel design. È meglio scegliere una dimensione maggiore di quella necessaria, quindi non ci sono problemi nel ridimensionarli. Ho sempre optato per la dimensione 256 px.

Nel tuo software di editing grafico (come Photoshop) crea un nuovo file di 152px per 52px. Trascina in ciascuna delle icone e ridimensiona ciascuna a 48px per 48px. Le icone diventano nere, ma abbiamo bisogno che siano bianche, quindi applica un filtro a ciascuna di esse.

Ora dobbiamo posizionarli. Avremo due pixel di spazio attorno a ciascuno, quindi sposta il primo a sinistra e spostalo di due pixel. Allo stesso modo allontanalo dal bordo superiore di due pixel. Posiziona le icone successive di due pixel dal bordo superiore e due pixel di distanza l'una dall'altra. Dovresti finire con questo:

Questa sarà la nostra versione di Retina. Ignora lo sfondo nero qui, l'ho aggiunto solo in modo che potessimo effettivamente vedere le icone nell'immagine.

Utilizzando Photoshop Salva per Web funzione (o equivalente nella tua applicazione) salva questa immagine con il nome del file [email protected]. Assicurati di metterlo nella cartella delle immagini del nostro progetto. Ora abbiamo bisogno di ridimensionare l'immagine sprite per rendere la risoluzione standard. Possiamo farlo in Photoshop direttamente nel Salva per Web la finestra di dialogo. L'importante è che l'immagine debba essere ridimensionata a 76 px per 52 px. Salva questa dimensione come socio-Spritee posizionarlo anche nella cartella delle immagini.

Con questo, abbiamo i nostri sprite, quindi scriviamo un codice per usarli! Inserisci il seguente codice all'interno di intestazionesezione subito dopo gli stili per il h1e h2.

.social position: absolute; inizio: 55 px; a destra: 50 px; overflow: nascosto; a float: left; larghezza: 26px; altezza: 26px; margine: 0 5px; text-indent: -9999px; background: url (... /images/social-sprite.png) no-repeat; opacità: 0.8; &: hover opacity: 1.0;  @media screen e (-webkit-min-device-pixel-ratio: 2), schermo e (-min-device-pixel-ratio: 2) background: url (... /images/[email protected] ) no-repeat; dimensione di sfondo: 76px 26px;  & .facebook background-position: 0px 0px;  & .twitter background-position: -25px 0px;  & .instagram background-position: -50px 0px;

Wow, sembra complicato, anche se non è davvero, onesto! Per cominciare, posizioniamo la confezione .sociale elemento nell'angolo in alto a destra.

Successivamente, applichiamo alcuni stili al tag per impostare l'altezza e la larghezza di ciascuno e per rimuovere il testo dalla vista usando un grande indentatura del testo. Abbiamo anche impostato la base opacitàa 0.8 che cambiamo a 1.0 al passaggio del mouse. Questo dà un semplice effetto di rollover.

La prossima sezione è per i nostri folletti. Abbiamo bisogno di lasciare che i dispositivi con schermi DPI alti sappiano dove trovare la risorsa a più alta risoluzione che la query sui media gestisce bene. Dobbiamo sicuramente impostare il background-size proprietà in modo che l'immagine si riduca alla dimensione "corretta". Ora abbiamo bisogno di impostare il background-positionper ogni icona. Salva, salva, salva e aggiorna!

Come puoi vedere il nostro fancy-font lo stile sta funzionando sul nome e le nostre icone sociali sono carine. Buon lavoro!

La prossima sezione tratterà il contenuto principale in cui utilizzeremo Instafeed.js per collegarci all'API di Instagram e utilizzare alcune immagini per la nostra pagina.

Feed di Instagram

Inizieremo aggiungendo qualche markup ai nostri index.htmlpagina, quindi aprilo e copia / incolla quanto segue all'interno di

etichetta:

 
 
 
 
Ultime foto
 
  
  
 
 
  
309 Mi piace
 
 
 Architettura fantastica #architecture #testing 
16 settembre 2014

Vedrai qui che ho segnato ogni sezione di cui avremo bisogno per le foto di Instagram. Il codice per questo non verrà effettivamente caricato dalla pagina HTML, ma invece dal JavaScript scriveremo per Instafeed.js. Non preoccuparti di questo per ora, stiamo solo cercando di ottenere lo stile giusto in questa fase.

Bootstrap's Grid

Una cosa che potresti notare, se hai già usato Bootstrap, è che stiamo usando alcune classi Bootstrap per la prima volta. Noi facciamo uso di Col-XS-xx, col-sm-xx, col-md-xx, col-lg-xx classi per regolare gli elementi a diverse dimensioni dello schermo. Il modo in cui la griglia Bootstrap funziona, in poche parole, è attraverso contenitori, righe e colonne. Ogni rigadeve essere all'interno di a contenitore e tutti colonna deve essere all'interno di a riga. Ci devono essere anche un totale di dodici colonnein ogni riga. Questo è dove piacciono le classi Col-xs-12vieni dentro A dimensione dello schermo xs questo elemento dovrebbe comprendere dodici colonne che, visivamente sullo schermo, appare come un'unica grande colonna. 

Allo stesso modo, se lo mettessimo col-xs-12 col-sm-6 col-md-3come classi su un elemento, istruirà quell'elemento per avere un layout a larghezza intera xsdimensione dello schermo, due colonnea sm dimensione dello schermo e quattro colonne a md dimensione dello schermo. All'inizio è un po 'confuso, ma se capisci come vengono denominate le classi e cosa rappresenta ciascuna sullo schermo diventerà piuttosto intuitivo da usare alla fine. 

Scopri di più su Bootstrap nel corso gratuito di Tuts + Bootstrap 3 per Web Design.

Un altro punto da menzionare è l'uso di test_img.jpgche non esiste ancora. Questa è un'immagine segnaposto che ho creato per utilizzare nel markup. Sentiti libero di crearne uno o di usare quello nei file sorgente forniti, assicurati di averlo inserito nel file immagini elenco.

Stili di Instagram

Ora, abbiamo il markup aggiungiamo alcuni stili:

.instagram-wrap background: $ lightgrey;  .instagram-content h3 text-transform: uppercase; letter-spacing: 0.5em; font-size: 12px; font-weight: 700; allineamento del testo: centro; padding: $ padding * 5 0; colore: scurire ($ lightgrey, 20%);

Dovrai inserire questo codice subito dopo l'intero intestazione blocco nel file principale di Sass. Applica alcune proprietà del colore di sfondo e stili di carattere. Salva il file Sass e dai un'occhiata nel browser.

Quella piccola quantità di codice ha fatto una differenza sostanziale. Dobbiamo renderlo ancora migliore, quindi, nel file Sass, aggiungi il seguente codice:

.fotolibro margine: 0 0 $ margine * 3 0; .image-wrap img width: 100%;  .likes position: absolute; fondo: 5px; a sinistra: 15px; padding: $ padding / 2; sfondo: $ nero; background: rgba ($ black, 0.4); colore: $ bianco;  .description font-family: $ sub-font; font-size: 12px; sfondo: $ bianco; colore: $ medio grigio; letter-spacing: 1px; padding: $ padding * 1.5; altezza: 75 px; overflow: nascosto; white-space: nowrap; overflow del testo: ellissi;

Questo deve andare subito dopo h3dichiarazione interna .instagram-content.Passiamo rapidamente a questo, un po 'alla volta. Diamo il nostro .photo-boxun margine inferiore in modo che ognuno sia ben distanziato. Non è necessario preoccuparsi della spaziatura destra e sinistra in quanto viene gestita da Bootstrap. Ci assicuriamo quindi qualsiasi immagine nel nostro .immagine-wrap sono larghi al 100% in modo che si adattino al browser. Il .piace l'elemento deve essere posizionato assolutamente nell'angolo in basso a sinistra della casella dell'immagine e ha testo bianco su sfondo nero semitrasparente. 

Infine, gli stili per .descrizione. Le ultime quattro proprietà consentono al riquadro di nascondere qualsiasi testo traboccante in modo aggraziato fornendo un'ellissi alla fine. La cosa buona di fare questo in CSS è che quando le caselle cambiano dimensione verrà rivelato più o meno contenuto, ma i puntini di sospensione continueranno a fare il loro lavoro se necessario. Anche il supporto del browser è molto completo.

Tempo di nuovo per salvare il file e aggiornare il browser:

Ora è adorabile! Penso che il prossimo passo dovrebbe essere la sostituzione del nostro HTML con le reali immagini dei feed di Instagram con l'aiuto di Instafeed.js.

Utilizzando Instafeed.js

Il modo in cui funziona questo plugin rende semplice per chiunque aggiungere un feed Instagram al proprio sito web. Tuttavia, avrai bisogno di un ID cliente da Instagram per utilizzarlo. Puoi ottenerne uno registrandoti su un account Instagram e andando alla sezione sviluppatori per configurare il tuo ID cliente.

Una volta che hai impostato tutto ciò, dobbiamo aggiungere il seguente codice al app.js file:

$ (function () // Configura instafe var feed = new Instafeed (clientId: '97ae5f4c024c4a91804f959f43f2635f', destinazione: 'instafeed', ottieni: 'tagged', tagName: 'photographyportfolio', links: true, limit: 8, sortBy: risoluzione "più recente": "standard_resolution", modello: "
likes Mi piace
didascalia
 Model.date
'); feed.run (); );

Lasciami correre quello che sta succedendo qui:

Innanzitutto, alcuni jQuery. Inizia con una funzione pronta per il documento (versione abbreviata), quindi niente funziona finché non siamo pronti.

In secondo luogo, dichiarare a alimentazionevariabile e imposta il suo valore su una nuova istanza di Instafeed.

Prossima fornitura Instafeed con alcune opzioni per controllare ciò che restituisce:

  • Identificativo cliente - L'ID cliente che hai ottenuto da Instagram.
  • bersaglio - L'ID dell'elemento sulla pagina che desideri popolare con le immagini.
  • ottenere - La modalità Instafeed sta funzionando. Usando 'tagged' qui, Instafeed sa che stiamo cercando per tagname.
  • tagName - Il nome del tag da cercare.
  • link - Sia per avvolgere le immagini nei collegamenti a Instagram
  • limite - Limita la quantità di immagini restituite. Utile per l'impaginazione.
  • ordina per - Come ordinare le immagini restituite. Impostato piu recente per il nostro progetto.
  • risoluzione - La dimensione delle immagini restituite.
  • modello - L'HTML da utilizzare per il rendering delle immagini sulla pagina. Useremo il markup che abbiamo creato in precedenza. Instafeed utilizza parentesi graffe per indicare dove verranno inserite le varie proprietà dell'immagine.

Infine, esegui il feed!

Se salvi il file e aggiorni il browser dovresti vedere qualcosa di simile a questo:

Se hai problemi, assicurati che il tuo ID cliente sia corretto e che il codice sia tutto OK. Se si utilizza ciò che viene fornito nei file di origine, tutto dovrebbe andare bene. Dovresti vedere otto immagini restituite da Instagram con il Piace e descrizioni mostrando.

Riordinare

Ora dobbiamo riordinare il nostro codice HTML poiché abbiamo ancora il modello iniziale che abbiamo codificato in precedenza. Torna a index.htmle trova il seguente codice ... 

 
 
  
309 Mi piace
 
 
 Architettura fantastica #architecture #testing 
16 settembre 2014

Rimuovere o commentare questo fuori. Ho deciso di commentarlo in modo da poter fare riferimento ad esso più tardi, se necessario.

Il piè di pagina

Di nuovo dentro index.html aggiungi il seguente codice all'interno del

×