1 00:00:01,090 --> 00:00:02,290 ‫Istruttore: Iniziamo ora 2 00:00:02,290 --> 00:00:04,750 ‫a creare davvero il nostro modello di base. 3 00:00:04,750 --> 00:00:07,490 ‫Quindi il modello su cui si baseranno tutti 4 00:00:07,490 --> 00:00:09,360 ‫gli altri modelli in seguito. 5 00:00:09,360 --> 00:00:12,723 ‫Quindi, in pratica, convertiremo un normale file html, che 6 00:00:12,723 --> 00:00:16,163 ‫si trova nei file di avvio, in un modello Pug. 7 00:00:17,840 --> 00:00:19,830 ‫Quindi, in pratica, inizieremo a 8 00:00:19,830 --> 00:00:21,850 ‫creare il layout di questa pagina. 9 00:00:21,850 --> 00:00:26,450 ‫Quindi questa intestazione qui e anche il piè di pagina. 10 00:00:26,450 --> 00:00:28,650 ‫Ok, non il contenuto ovviamente, perché 11 00:00:28,650 --> 00:00:31,710 ‫lo costruiremo in modo più dinamico un po' 12 00:00:31,710 --> 00:00:33,440 ‫più tardi, ok. 13 00:00:33,440 --> 00:00:35,220 ‫Ma lasceremo tutto pronto, 14 00:00:35,220 --> 00:00:38,920 ‫in modo da poter poi iniettare tutto questo contenuto reale 15 00:00:38,920 --> 00:00:41,053 ‫in quel modello di base generale. 16 00:00:43,030 --> 00:00:45,440 ‫Quindi, facciamolo ora. 17 00:00:45,440 --> 00:00:47,650 ‫E iniziamo effettivamente liberandoci di 18 00:00:47,650 --> 00:00:50,090 ‫tutto questo contenuto che avevamo qui. 19 00:00:50,090 --> 00:00:51,810 ‫Quindi questo era davvero 20 00:00:51,810 --> 00:00:54,550 ‫solo per mostrarti le diverse caratteristiche di Pug. 21 00:00:54,550 --> 00:00:58,070 ‫E ora, apriamo questa panoramica. html, in modo 22 00:00:58,070 --> 00:01:01,463 ‫che possiamo praticamente convertirlo qui in Pug. 23 00:01:02,420 --> 00:01:05,370 ‫Ok, questo era il file html originale che 24 00:01:05,370 --> 00:01:08,360 ‫ho creato per progettare la pagina di panoramica che 25 00:01:08,360 --> 00:01:10,610 ‫abbiamo appena visto renderizzata dinamicamente. 26 00:01:10,610 --> 00:01:13,810 ‫Ok, questo è ciò che abbiamo in testa 27 00:01:13,810 --> 00:01:17,950 ‫e in realtà andiamo avanti e copiamo l'intero codice, in modo 28 00:01:17,950 --> 00:01:21,053 ‫da poter convertire ciò che manca qui. 29 00:01:22,610 --> 00:01:26,573 ‫Ok, quindi il contenuto del nostro titolo è 30 00:01:27,420 --> 00:01:29,973 ‫questo, quindi copiamolo, quindi sbarazziamoci, 31 00:01:33,460 --> 00:01:37,980 ‫e quindi questo è il contenuto della pagina principale, giusto. 32 00:01:37,980 --> 00:01:42,150 ‫Allora abbiamo già la favicon, e anche lo stile. 33 00:01:42,150 --> 00:01:44,980 ‫Quindi quello che ci manca è fondamentalmente questa 34 00:01:44,980 --> 00:01:46,990 ‫roba qui, per la risposta 35 00:01:46,990 --> 00:01:51,143 ‫dello sviluppo web, e anche questo collegamento al font di Google, ok. 36 00:01:52,210 --> 00:01:53,563 ‫Quindi, iniziando 37 00:01:58,280 --> 00:02:00,123 ‫da quello, instilla un 38 00:02:02,830 --> 00:02:05,610 ‫foglio di stile, quindi prendiamo questo 39 00:02:09,040 --> 00:02:11,803 ‫riferimento e sostituiamolo con virgolette singole. 40 00:02:13,970 --> 00:02:18,650 ‫Ok, allora voglio anche definire questi due, quindi 41 00:02:18,650 --> 00:02:21,273 ‫tagliamoli qui e 42 00:02:23,890 --> 00:02:28,323 ‫convertiamo semplicemente tutto ciò che abbiamo qui. 43 00:02:40,099 --> 00:02:40,932 ‫Va bene. 44 00:02:42,960 --> 00:02:44,473 ‫Oh e anche le virgolette singole. 45 00:02:50,470 --> 00:02:54,223 ‫Ok, mettiamo questo alla fine, quindi 46 00:02:55,780 --> 00:03:00,730 ‫questo è il nostro cappello per il nostro modello. 47 00:03:00,730 --> 00:03:03,993 ‫Successivamente, diamo un'occhiata all'intestazione. 48 00:03:05,640 --> 00:03:09,143 ‫Ok, quindi in pratica abbiamo questo intero elemento qui, con 49 00:03:10,100 --> 00:03:14,600 ‫solo un'intestazione in modo che la barra grigio scuro che hai visto 50 00:03:14,600 --> 00:03:17,140 ‫lì nella parte superiore della pagina. 51 00:03:17,140 --> 00:03:18,430 ‫E quindi 52 00:03:20,500 --> 00:03:22,530 ‫copiamo questo e mettiamolo qui. 53 00:03:22,530 --> 00:03:24,180 ‫Quindi, questo è un 54 00:03:24,180 --> 00:03:27,800 ‫sacco di codice e vedrai quanto poco codice sarà effettivamente in 55 00:03:27,800 --> 00:03:29,920 ‫seguito, una volta tradotto in Pug. 56 00:03:29,920 --> 00:03:33,480 ‫Ok, e qui ora mettiamo effettivamente 57 00:03:33,480 --> 00:03:37,370 ‫un commento visibile nel nostro html, dicendo HEADER. 58 00:03:37,370 --> 00:03:41,070 ‫Ok, quindi in realtà è senza il trattino. 59 00:03:41,070 --> 00:03:44,020 ‫Quindi, nel codice VS, quando premo il collegamento 60 00:03:44,020 --> 00:03:46,860 ‫al commento, crea automaticamente un commento Pug. 61 00:03:46,860 --> 00:03:49,320 ‫Ma qui, voglio davvero solo 62 00:03:49,320 --> 00:03:51,833 ‫un commento, disponibile anche nell'output html. 63 00:03:53,470 --> 00:03:56,690 ‫Comunque, ora creiamo l'elemento header e 64 00:03:56,690 --> 00:03:59,040 ‫vediamo cosa abbiamo qui. 65 00:03:59,040 --> 00:04:02,120 ‫Quindi abbiamo header con la classe di header. 66 00:04:02,120 --> 00:04:04,680 ‫E tutto ciò che dobbiamo fare per specificare 67 00:04:04,680 --> 00:04:07,330 ‫una classe è DOT e quindi il nome della classe. 68 00:04:07,330 --> 00:04:09,410 ‫Quindi, di nuovo intestazione. 69 00:04:09,410 --> 00:04:12,530 ‫Quindi, lì dentro, abbiamo un elemento nav. 70 00:04:12,530 --> 00:04:17,480 ‫E così, rientro, e poi nav. nav che è di nuovo il nome 71 00:04:17,480 --> 00:04:19,537 ‫della classe qui, e poi 72 00:04:19,537 --> 00:04:22,200 ‫abbiamo anche un altro nome di classe, e 73 00:04:22,200 --> 00:04:23,880 ‫così, un altro punto. 74 00:04:23,880 --> 00:04:24,713 ‫E questo è tutto. 75 00:04:25,850 --> 00:04:28,550 ‫Quindi tour di navigazione. 76 00:04:28,550 --> 00:04:32,290 ‫Quindi, se hai familiarità con l'architettura CSS, forse 77 00:04:32,290 --> 00:04:35,620 ‫stai vedendo che sto usando l'architettura BEM. 78 00:04:35,620 --> 00:04:37,660 ‫E quindi, nav è il blocco 79 00:04:37,660 --> 00:04:40,260 ‫e quindi qui questo tour è un modificatore. 80 00:04:40,260 --> 00:04:42,500 ‫E qui questi underscore sottolineano che questo 81 00:04:42,500 --> 00:04:44,180 ‫è un blocco o in 82 00:04:44,180 --> 00:04:45,560 ‫realtà un elemento. 83 00:04:45,560 --> 00:04:49,293 ‫Quindi blocco, elemento e modificatore. 84 00:04:50,160 --> 00:04:52,290 ‫Ok, quindi non è 85 00:04:52,290 --> 00:04:54,890 ‫molto importante, ma volevo solo menzionarlo. 86 00:04:54,890 --> 00:04:57,120 ‫Ad ogni modo, all'interno della navigazione, 87 00:04:57,120 --> 00:04:59,270 ‫abbiamo un elemento di collegamento. 88 00:04:59,270 --> 00:05:02,920 ‫Quindi, a, con la classe di nav__el. 89 00:05:07,130 --> 00:05:10,330 ‫Quindi qui abbiamo questo attributo href e quindi, 90 00:05:10,330 --> 00:05:12,973 ‫ricorda che usiamo le parentesi, quindi href 91 00:05:14,230 --> 00:05:15,063 ‫e 92 00:05:16,930 --> 00:05:18,890 ‫non lo impostiamo su niente. 93 00:05:18,890 --> 00:05:22,020 ‫Quindi, in pratica, questo è ciò che significa questo hash qui. 94 00:05:22,020 --> 00:05:23,470 ‫E poi, semplicemente il contenuto, quindi 95 00:05:24,690 --> 00:05:25,673 ‫tutti i tour. 96 00:05:27,150 --> 00:05:29,450 ‫Successivamente, abbiamo questo modulo qui, ma 97 00:05:29,450 --> 00:05:31,720 ‫in realtà non lo implementeremo 98 00:05:31,720 --> 00:05:33,240 ‫a questo punto. 99 00:05:33,240 --> 00:05:34,543 ‫Quindi liberiamocene. 100 00:05:36,260 --> 00:05:39,090 ‫Va bene e quindi questa è la nostra navigazione. 101 00:05:39,090 --> 00:05:41,230 ‫Quindi, questo codice 102 00:05:41,230 --> 00:05:44,200 ‫qui è sostanzialmente equivalente a questo. 103 00:05:44,200 --> 00:05:46,993 ‫E così il prossimo, abbiamo questo logo di intestazione. 104 00:05:48,730 --> 00:05:51,350 ‫Quindi, nuova riga, ma un livello indietro, 105 00:05:51,350 --> 00:05:54,100 ‫nel rientro in modo che sia allo stesso 106 00:05:54,100 --> 00:05:55,680 ‫livello della navigazione. 107 00:05:55,680 --> 00:05:58,930 ‫Quindi, proprio come è qui, giusto. 108 00:05:58,930 --> 00:05:59,980 ‫Ora, quando 109 00:05:59,980 --> 00:06:04,980 ‫è un div, non dobbiamo nemmeno dire div. headerlogo, in questo caso. 110 00:06:07,150 --> 00:06:08,350 ‫Quindi, quando si 111 00:06:08,350 --> 00:06:11,820 ‫tratta di un div, che è una specie di elemento block standard 112 00:06:11,820 --> 00:06:13,980 ‫in html, tutto ciò di cui abbiamo bisogno 113 00:06:13,980 --> 00:06:16,873 ‫è il punto e questo creerà automaticamente un elemento div. 114 00:06:18,930 --> 00:06:20,713 ‫Poi lì dentro, abbiamo questa immagine, 115 00:06:22,030 --> 00:06:24,980 ‫e quindi ovviamente ha bisogno di un paio di attributi, che 116 00:06:24,980 --> 00:06:26,693 ‫è il primo, la fonte. 117 00:06:27,560 --> 00:06:31,937 ‫Quindi immagine, logo, bianco. png, e poi 118 00:06:33,850 --> 00:06:36,433 ‫anche il testo alternativo, okay. 119 00:06:40,910 --> 00:06:44,690 ‫Successivamente, abbiamo quest'altra navigazione qui, e quindi di nuovo, è 120 00:06:44,690 --> 00:06:46,820 ‫allo stesso livello della 121 00:06:46,820 --> 00:06:49,293 ‫prima navigazione e di questo div. 122 00:06:51,030 --> 00:06:53,750 ‫Quindi un livello indietro nel 123 00:06:53,750 --> 00:06:57,680 ‫rientro e crea un nuovo elemento nav con il 124 00:06:57,680 --> 00:07:00,763 ‫class nav e l'utente class nav. 125 00:07:02,120 --> 00:07:03,950 ‫Poi lì dentro c'è un 126 00:07:03,950 --> 00:07:05,130 ‫collegamento, molto 127 00:07:05,130 --> 00:07:09,160 ‫simile a questo, quindi copiamolo per risparmiare un po' di tempo. 128 00:07:09,160 --> 00:07:11,293 ‫E poi qui dice: Le mie prenotazioni. 129 00:07:16,170 --> 00:07:20,470 ‫Poi un altro, e in realtà copiamolo di nuovo con la 130 00:07:20,470 --> 00:07:23,380 ‫differenza che non ha questo contenuto, ma 131 00:07:23,380 --> 00:07:27,070 ‫invece ha del contenuto in più al suo interno. 132 00:07:27,070 --> 00:07:28,470 ‫Così questo. 133 00:07:28,470 --> 00:07:30,023 ‫Quindi, di nuovo molto facile, immagine, 134 00:07:31,170 --> 00:07:33,633 ‫con la fonte, . jpg. 135 00:07:42,100 --> 00:07:43,853 ‫E ha anche un nome 136 00:07:45,060 --> 00:07:47,420 ‫di classe, quindi modifichiamo qui con il punto. 137 00:07:47,420 --> 00:07:51,713 ‫Quindi, nav, immagine utente. 138 00:07:53,290 --> 00:07:56,810 ‫E poi semplicemente una spanna dicendo Jonas. 139 00:07:56,810 --> 00:07:58,120 ‫E, come 140 00:07:58,120 --> 00:08:00,960 ‫puoi vedere, questa sarà effettivamente la parte 141 00:08:00,960 --> 00:08:02,350 ‫dinamica di questa intestazione. 142 00:08:02,350 --> 00:08:05,000 ‫E quindi in realtà tutto questo qui 143 00:08:05,000 --> 00:08:06,675 ‫diventerà un punto all'inizio. 144 00:08:06,675 --> 00:08:11,675 ‫Ok, ma comunque, finiamo di codificare questa parte qui. 145 00:08:13,160 --> 00:08:14,620 ‫Quindi, in pratica, questi due 146 00:08:14,620 --> 00:08:17,520 ‫pulsanti, quindi il pulsante di accesso e il pulsante di registrazione. 147 00:08:17,520 --> 00:08:20,120 ‫Quindi, ovviamente, non avrai il login 148 00:08:20,120 --> 00:08:22,920 ‫e il pulsante di registrazione allo stesso 149 00:08:22,920 --> 00:08:25,680 ‫tempo di avere questa navigazione utente qui. 150 00:08:25,680 --> 00:08:29,590 ‫Quindi le mie prenotazioni e poi il nome dell'utente, ok. 151 00:08:29,590 --> 00:08:32,250 ‫Ma di nuovo, mettiamolo qui per ora, e 152 00:08:32,250 --> 00:08:34,553 ‫poi commentiamo cosa non ci serve. 153 00:08:36,860 --> 00:08:41,860 ‫Quindi, pulsante, elemento di navigazione e anche elemento di navigazione 154 00:08:44,440 --> 00:08:49,043 ‫e quindi il modificatore cta per la registrazione. 155 00:08:50,290 --> 00:08:54,847 ‫E in realtà ce n'è anche uno prima di quello per il login, giusto. 156 00:08:56,850 --> 00:08:58,837 ‫Quindi, questo è questo. 157 00:09:03,010 --> 00:09:05,730 ‫Ok e quindi è davvero così. 158 00:09:05,730 --> 00:09:06,940 ‫Quindi questa 159 00:09:06,940 --> 00:09:09,010 ‫è l'intestazione, e vedi che 160 00:09:09,010 --> 00:09:12,550 ‫questo codice qui è equivalente a tutto ciò che abbiamo 161 00:09:12,550 --> 00:09:15,070 ‫qui che sembra molto più confuso, se 162 00:09:15,070 --> 00:09:16,653 ‫almeno me lo chiedi. 163 00:09:18,010 --> 00:09:20,690 ‫Quindi, cancellalo, e come ho detto, 164 00:09:20,690 --> 00:09:22,920 ‫questa navigazione utente qui, questa 165 00:09:22,920 --> 00:09:25,200 ‫parte sarà disponibile solo quando qualcuno 166 00:09:25,200 --> 00:09:27,010 ‫avrà effettuato l'accesso. 167 00:09:27,010 --> 00:09:30,123 ‫E quindi per ora, commentiamo completamente tutto questo. 168 00:09:31,370 --> 00:09:36,370 ‫Bene, quindi ora abbiamo il contenuto e quindi aggiungiamo un altro commento 169 00:09:36,500 --> 00:09:38,350 ‫qui e nel 170 00:09:42,130 --> 00:09:44,050 ‫nostro html, in realtà tutto 171 00:09:44,050 --> 00:09:46,010 ‫ciò che aggiungeremo ora è 172 00:09:46,010 --> 00:09:49,350 ‫questa sezione qui con la classe di panoramica. 173 00:09:49,350 --> 00:09:51,430 ‫Perché poi è lì che abbiamo tutte 174 00:09:51,430 --> 00:09:53,160 ‫queste schede di contenuto, 175 00:09:53,160 --> 00:09:56,070 ‫che ancora una volta, per ora, non includeremo lì. 176 00:09:56,070 --> 00:09:57,400 ‫Quindi, di nuovo, quello che 177 00:09:57,400 --> 00:09:59,623 ‫stiamo facendo ora è davvero solo uno scheletro, per così dire. 178 00:10:00,729 --> 00:10:03,123 ‫Va bene, allora sezione. panoramica. 179 00:10:07,410 --> 00:10:08,243 ‫Panoramica. 180 00:10:09,574 --> 00:10:12,500 ‫E per ora, mettiamo semplicemente un h1 qui 181 00:10:12,500 --> 00:10:16,040 ‫con il nome del tour che sta arrivando come variabile. 182 00:10:16,040 --> 00:10:18,270 ‫Va bene e ovviamente questa 183 00:10:18,270 --> 00:10:22,103 ‫sezione qui deve essere allo stesso livello di questa intestazione, fantastico. 184 00:10:24,130 --> 00:10:26,820 ‫Quindi tutto ciò che ci manca ora è il piè 185 00:10:26,820 --> 00:10:28,700 ‫di pagina alla fine della pagina. 186 00:10:28,700 --> 00:10:32,690 ‫Quindi andiamo lì e ci siamo. 187 00:10:32,690 --> 00:10:35,790 ‫Prendiamo tutto questo. 188 00:10:35,790 --> 00:10:38,040 ‫E questo dovrebbe essere effettivamente un elemento piè di pagina, 189 00:10:39,040 --> 00:10:40,393 ‫non solo un normale div. 190 00:10:45,510 --> 00:10:49,730 ‫Quindi un elemento footer con la classe footer, quindi un div, con 191 00:10:49,730 --> 00:10:52,573 ‫il logo class of footer, e così 192 00:10:53,850 --> 00:10:57,493 ‫di nuovo, non ho nemmeno bisogno di specificare l'elemento div. 193 00:10:58,870 --> 00:11:00,323 ‫Poi abbiamo un'immagine qui,. png e quindi 194 00:11:07,917 --> 00:11:12,810 ‫spero che digitando tutto questo da solo, fondamentalmente a mano, ti faccia mantenere 195 00:11:12,810 --> 00:11:16,820 ‫questa conoscenza su come tutto questo funzioni un po' meglio. 196 00:11:16,820 --> 00:11:20,030 ‫Ok, quindi questo è alt e ora questa navigazione a 197 00:11:20,030 --> 00:11:22,330 ‫piè di pagina, quindi un elenco non 198 00:11:23,560 --> 00:11:26,520 ‫ordinato, e ora lì dentro abbiamo un paio di 199 00:11:26,520 --> 00:11:28,033 ‫elementi dell'elemento dell'elenco. 200 00:11:31,260 --> 00:11:35,483 ‫Quindi elenca gli elementi, e poi lì dentro c'è un collegamento 201 00:11:36,580 --> 00:11:38,620 ‫in ciascuno di essi. 202 00:11:38,620 --> 00:11:41,470 ‫Quindi, fondamentalmente un con l'href del nulla. 203 00:11:41,470 --> 00:11:46,470 ‫E poi, Chi siamo. 204 00:11:48,410 --> 00:11:51,490 ‫Ora, qui in questa situazione, aver bisogno di 205 00:11:51,490 --> 00:11:53,170 ‫questa riga in 206 00:11:53,170 --> 00:11:57,298 ‫più solo per specificare questo li, non è proprio l'ideale. 207 00:11:57,298 --> 00:11:58,640 ‫Quindi quello che possiamo 208 00:11:58,640 --> 00:12:00,010 ‫fare qui è usare i 209 00:12:00,010 --> 00:12:03,310 ‫due punti, in questo modo, e quindi mettere tutto sulla stessa riga. 210 00:12:03,310 --> 00:12:05,840 ‫E quindi funzionerà ancora come se ci fosse una 211 00:12:05,840 --> 00:12:07,730 ‫nuova riga con un rientro, 212 00:12:07,730 --> 00:12:10,570 ‫ma fondamentalmente ci consentirà di fare tutto sulla stessa riga. 213 00:12:10,570 --> 00:12:13,910 ‫Ok, allora per qualche ragione l'evidenziazione della 214 00:12:13,910 --> 00:12:15,810 ‫sintassi smette di 215 00:12:15,810 --> 00:12:19,180 ‫funzionare, ma beh, non è così importante. 216 00:12:19,180 --> 00:12:21,343 ‫Quindi scarica le applicazioni, diventa 217 00:12:22,910 --> 00:12:24,453 ‫una guida, carriere. 218 00:12:26,300 --> 00:12:29,873 ‫Ed è proprio così. 219 00:12:39,630 --> 00:12:41,053 ‫Successivamente, abbiamo questo piè di 220 00:12:43,770 --> 00:12:46,520 ‫pagina, copyright, e quindi qui abbiamo solo un mucchio di testo. 221 00:12:50,540 --> 00:12:53,100 ‫Quindi qui specifica il 222 00:12:53,100 --> 00:12:56,943 ‫simbolo del copyright, ed è di Jonas Schmedtmann. 223 00:12:58,860 --> 00:13:02,670 ‫Quindi, sono io e proprio come in tutti i miei altri 224 00:13:02,670 --> 00:13:06,100 ‫corsi, voglio che tu sappia che sei libero di usare 225 00:13:06,100 --> 00:13:08,290 ‫questo progetto per te stesso. 226 00:13:08,290 --> 00:13:11,120 ‫Quindi fondamentalmente per inserirlo nel tuo portfolio o per 227 00:13:11,120 --> 00:13:13,550 ‫mostrare a chiunque tu voglia, che hai costruito 228 00:13:13,550 --> 00:13:15,270 ‫questo progetto nel mio corso. 229 00:13:15,270 --> 00:13:18,630 ‫Ora quello che non puoi fare è creare il tuo corso 230 00:13:18,630 --> 00:13:20,030 ‫basato su questo progetto. 231 00:13:20,030 --> 00:13:23,310 ‫Ed è triste doverlo dire, ma ovviamente ci sono 232 00:13:23,310 --> 00:13:25,970 ‫state persone che hanno usato il mio 233 00:13:25,970 --> 00:13:28,980 ‫progetto, fondamentalmente per mettere dei corsi gratuiti su 234 00:13:28,980 --> 00:13:32,270 ‫YouTube, dove hanno copiato i miei progetti, uno per uno. 235 00:13:32,270 --> 00:13:35,410 ‫Ok, quindi lascia che lo scriva qui. 236 00:13:35,410 --> 00:13:38,473 ‫Per i tuoi scopi, ad eccezione 237 00:13:42,160 --> 00:13:45,593 ‫della produzione, ovviamente, dei tuoi corsi o tutorial. 238 00:13:49,850 --> 00:13:54,850 ‫Ok e in effetti è così. 239 00:13:59,230 --> 00:14:01,213 ‫Va bene, quindi 240 00:14:06,130 --> 00:14:09,500 ‫questa è fondamentalmente la traduzione dello scheletro 241 00:14:10,990 --> 00:14:14,400 ‫che abbiamo qui, ovviamente eccetto il contenuto. 242 00:14:14,400 --> 00:14:17,560 ‫Ok, quindi non ne abbiamo più bisogno. 243 00:14:17,560 --> 00:14:20,753 ‫E, giusto per finire, diamo una rapida occhiata 244 00:14:21,960 --> 00:14:25,000 ‫e infatti, ecco il nostro contenuto. 245 00:14:25,000 --> 00:14:27,640 ‫Ora questo qui sembra un po' fuori posto perché questo 246 00:14:27,640 --> 00:14:29,650 ‫testo sul copyright qui è così lungo. 247 00:14:29,650 --> 00:14:31,883 ‫Quindi, fondamentalmente questa navigazione a piè di pagina. 248 00:14:33,950 --> 00:14:37,330 ‫Ma poiché questo è un contenitore flessibile, dovremmo essere 249 00:14:37,330 --> 00:14:39,540 ‫in grado di risolverlo 250 00:14:39,540 --> 00:14:42,270 ‫con un contenuto giustificato, flex-end, non questo. 251 00:14:42,270 --> 00:14:47,270 ‫Ok, e non preoccuparti se non hai familiarità con 252 00:14:48,660 --> 00:14:53,660 ‫i CSS, o anche con Flexbox, questo è solo 253 00:14:53,870 --> 00:14:56,180 ‫per risolvere semplicemente visivamente 254 00:14:56,180 --> 00:15:00,200 ‫il piccolo problema che abbiamo avuto qui. 255 00:15:00,200 --> 00:15:01,050 ‫Quindi cerchiamo il footer qui. 256 00:15:02,820 --> 00:15:04,723 ‫Eccoci qui. 257 00:15:08,590 --> 00:15:09,893 ‫Risolvilo qui e se 258 00:15:11,210 --> 00:15:12,303 ‫ora ricarichiamo, 259 00:15:13,690 --> 00:15:15,790 ‫sì, allora siamo a posto, perfetti.