1
00:00:00,310 --> 00:00:04,590
Benvenuto torna in questa lezione ci concentreremo sullo stile della pagina dello spettacolo.

2
00:00:04,620 --> 00:00:07,080
Quindi adesso la nostra pagina mostra è così.

3
00:00:07,230 --> 00:00:10,710
Abbiamo un piccolo bar naffare qui con i pulsanti che non fanno nulla.

4
00:00:10,710 --> 00:00:12,910
Abbiamo un H-1 con il nome del campeggio.

5
00:00:13,190 --> 00:00:18,060
E abbiamo un'immagine e una descrizione e abbiamo un pulsante per aggiungere un nuovo commento e quindi tutti

6
00:00:18,060 --> 00:00:19,290
i commenti sono visualizzati.

7
00:00:19,410 --> 00:00:21,900
Ognuno un piccolo paragrafo.

8
00:00:21,900 --> 00:00:25,230
Quindi il nostro obiettivo qui è di renderlo un po 'più simile a questo.

9
00:00:25,230 --> 00:00:27,190
Quindi ho una barra laterale qui.

10
00:00:27,270 --> 00:00:31,950
Non avremo ancora la mappa ma faremo spazio alla mappa e poi avremo

11
00:00:31,950 --> 00:00:34,250
il nostro contenuto principale con la descrizione.

12
00:00:34,380 --> 00:00:40,020
Alcuni testi il ​​titolo non abbiamo intenzione di fare ancora le valutazioni, ma poi avremo anche un elenco di

13
00:00:40,020 --> 00:00:41,350
recensioni che assomiglierà a questo.

14
00:00:41,430 --> 00:00:45,360
Il loro piccolo contenitore laggiù avrò un piccolo bottone per farne alcuni.

15
00:00:45,360 --> 00:00:47,240
Generalmente è un po 'più stilizzato.

16
00:00:47,310 --> 00:00:50,210
Possiamo aggiungere questo e quello dice quante recensioni sono state lasciate.

17
00:00:50,280 --> 00:00:51,540
Quindi questo è ciò a cui miriamo.

18
00:00:51,720 --> 00:00:55,170
E per iniziare ci concentreremo solo sulla griglia di bootstrap.

19
00:00:55,350 --> 00:00:58,500
Ricorda che la griglia di bootstrap è di 12 unità.

20
00:00:58,560 --> 00:01:03,540
Abbiamo intenzione di designarne tre su 12 per questa piccola barra laterale e quindi aggiungeremo

21
00:01:03,540 --> 00:01:05,500
nove in per il contenuto principale.

22
00:01:05,760 --> 00:01:10,200
Prima di iniziare a cambiare qualcosa, voglio sottolineare che sto lavorando in v 5 ora.

23
00:01:10,680 --> 00:01:13,710
Quindi se vuoi seguire tutti questi cambiamenti sarà in V 5.

24
00:01:13,800 --> 00:01:17,280
E la ragione per cui sto facendo è che dovremo creare un foglio di stile personalizzato.

25
00:01:17,340 --> 00:01:21,780
Dovremo servire l'elenco pubblico e alcune altre cose che sono cambiamenti sostanziali.

26
00:01:22,020 --> 00:01:24,020
Quindi volevo fare una versione separata.

27
00:01:24,270 --> 00:01:29,070
Ma prima di farlo, la prima cosa che faremo è aggiungere un contenitore attorno a tutto questo

28
00:01:29,070 --> 00:01:30,020
container di bootstrap.

29
00:01:30,150 --> 00:01:38,850
Quindi, mostra che E. J. aggiungerà un div con classe il contenitore proprio così

30
00:01:38,850 --> 00:01:40,290
e metteremo tutto dentro quello.

31
00:01:40,290 --> 00:01:44,850
E inizierò aggiungendo la barra laterale e la riempiremo con alcuni dati fittizi come quelli che abbiamo qui.

32
00:01:45,660 --> 00:01:55,120
in quella riga avremo un altro div in cui una classe è column medium tre proprio così.

33
00:01:55,120 --> 00:02:00,920
Quindi DIVX e questo devono essere class equals pro e

34
00:02:01,080 --> 00:02:06,790
E poi all'interno di qui aggiungeremo un paragrafo e otterremo questo testo che dice Joachim.

35
00:02:08,460 --> 00:02:15,960
Quindi questo è un paragrafo in cui la classe è in testa e quindi stiamo per metterti in campo per

36
00:02:15,960 --> 00:02:17,640
ora lo cambieremo alla fine.

37
00:02:17,640 --> 00:02:24,870
Ma sì camp e poi aggiungere questi piccoli elementi di elenco che faremo un div con la classe è il

38
00:02:25,950 --> 00:02:34,670
gruppo dash di elenco e quindi qui aggiungeremo un gruppo di alleati in ogni alleato con una classe di elementi del gruppo di elenchi.

39
00:02:35,610 --> 00:02:41,490
E all'interno aggiungeremo solo alcuni dati fittizi e lo chiameremo semplicemente info 1 e

40
00:02:41,490 --> 00:02:44,530
poi duplicherò queste informazioni in informazioni 3.

41
00:02:44,610 --> 00:02:46,340
E poi vediamo come si presenta ora.

42
00:02:46,500 --> 00:02:52,480
Quindi per aggiornare la pagina abbiamo una barra laterale qui e farò in modo che uno di questi elementi sia selezionato per iniziare.

43
00:02:52,830 --> 00:02:55,480
E tutto ciò che dobbiamo fare è aggiungere un attivo proprio lì.

44
00:02:55,650 --> 00:02:58,900
Se siamo freschi, ora vediamo che uno di loro è attivo.

45
00:02:59,460 --> 00:03:03,900
E questo è davvero solo un segnaposto per avere qualcosa lì, quindi non abbiamo molti

46
00:03:03,900 --> 00:03:07,680
spazi bianchi, ma di nuovo aggiungeremo dati reali e una mappa alla fine.

47
00:03:07,770 --> 00:03:13,710
E solo per indicarlo la mappa andrà proprio qui all'interno di questo tre colonne di media alla fine,

48
00:03:13,710 --> 00:03:14,590
ma non ancora.

49
00:03:14,940 --> 00:03:16,560
OK, questa è una barra laterale.

50
00:03:16,560 --> 00:03:19,050
Ora aggiungeremo il contenuto principale.

51
00:03:19,290 --> 00:03:28,670
Quindi abbiamo bisogno di un'altra colonna e questa è la media della colonna di classe 9.

52
00:03:29,130 --> 00:03:36,120
E invece di là dobbiamo avere l'H-1 di cui abbiamo bisogno per avere l'immagine, ma prima di tutto noterete

53
00:03:36,120 --> 00:03:41,820
che in realtà è tutto in una di queste miniature proprio come abbiamo nella home page.

54
00:03:41,940 --> 00:03:44,150
Ognuna di queste è una miniatura.

55
00:03:44,190 --> 00:03:49,560
Faremo la stessa cosa per l'intera immagine nel titolo, i commenti e tutto il resto.

56
00:03:50,220 --> 00:03:56,930
Quindi aggiungeremo un div e quel div avrà l'anteprima di classe equals.

57
00:03:58,110 --> 00:04:04,620
E poi dentro di noi aggiungeremo l'immagine e io conserverò l'immagine che abbiamo già scritto e

58
00:04:04,620 --> 00:04:06,140
la inserirò proprio lì.

59
00:04:06,180 --> 00:04:08,260
Quindi questa sarà la nostra immagine del campeggio.

60
00:04:08,490 --> 00:04:17,250
E poi vogliamo anche aggiungere una classe a quella che bootstrap ci dà quale immagine è Dasch responsive.

61
00:04:19,560 --> 00:04:20,420
Eccoci.

62
00:04:20,490 --> 00:04:23,270
Salvalo.

63
00:04:23,400 --> 00:04:28,470
E se diamo un'occhiata a ciò che abbiamo ora e aggiorniamo, abbiamo almeno l'immagine e il

64
00:04:28,470 --> 00:04:29,570
contenuto nel posto giusto.

65
00:04:29,610 --> 00:04:33,280
Abbiamo un problema in cui questo non sta prendendo però con quello che vogliamo.

66
00:04:33,320 --> 00:04:37,950
Voglio che tutto finisca e dovremo gestirlo con alcune CS personalizzate alla fine.

67
00:04:38,970 --> 00:04:44,040
E ora torneremo indietro e aggiungeremo questo qui dove abbiamo il nome del campo e poi il

68
00:04:44,040 --> 00:04:46,360
prezzo per notte che non abbiamo nel database.

69
00:04:46,440 --> 00:04:47,830
Quindi saremo appena codificati.

70
00:04:48,150 --> 00:04:49,400
Quindi facciamolo ora.

71
00:04:49,860 --> 00:04:57,250
E questo è un altro div e questo ha una classe di dash caption piena.

72
00:04:57,570 --> 00:05:01,190
E poi dentro di noi aggiungeremo una H per.

73
00:05:01,620 --> 00:05:07,980
E lo tireremo a destra e faremo il tiro di classe pari a destra e poi qualunque cosa

74
00:05:07,980 --> 00:05:09,540
metteremo qui sarà il prezzo.

75
00:05:09,750 --> 00:05:15,300
E comincerò con $ 9 a notte ancora una volta questo verrà dal database alla fine.

76
00:05:15,540 --> 00:05:22,080
Se siamo freschi Ora riceviamo $ 9 a notte sul lato destro e poi vogliamo ottenere il

77
00:05:22,260 --> 00:05:25,610
nome del campeggio che copierò qui sul lato sinistro.

78
00:05:25,650 --> 00:05:30,870
Quindi lo inseriremo subito in basso e se non aggiungiamo il comando a destra, esso andrà automaticamente

79
00:05:31,080 --> 00:05:38,400
a sinistra, anche se è più grande di quello che avevo in mente e lo trasformerò in un H più piccolo e andrò per

80
00:05:38,400 --> 00:05:44,490
aggiungere un tag di ancoraggio all'interno di lì proprio così e inserire il nome del campeggio all'interno del tag di ancoraggio.

81
00:05:46,500 --> 00:05:50,370
E l'idea alla base è che alla fine torno indietro.

82
00:05:50,380 --> 00:05:55,740
Questo dovrebbe essere un link al campeggio effettivo o alla pagina del servizio di parcheggio dove possiamo andare a prenotare qualcosa.

83
00:05:56,130 --> 00:05:58,050
Per ora è solo il link verso il nulla.

84
00:05:58,410 --> 00:05:59,020
OK.

85
00:05:59,160 --> 00:06:00,350
Quindi lo abbiamo dentro

86
00:06:00,360 --> 00:06:01,370
Abbiamo un prezzo

87
00:06:01,470 --> 00:06:03,660
Ora aggiungiamo la descrizione nuovamente.

88
00:06:04,230 --> 00:06:10,950
solo un tag di paragrafo e poi aggiungeremo nella nostra descrizione che è la descrizione del campeggio proprio lì.

89
00:06:13,050 --> 00:06:14,060
Quindi questo sarà

90
00:06:14,640 --> 00:06:20,190
E sarà un po 'deludente perché non abbiamo una sottoscrizione di grandi dimensioni in questo

91
00:06:20,790 --> 00:06:26,100
momento, quindi potremmo voler andare a vedere il database con un po' di Lorem Ipsum

92
00:06:26,100 --> 00:06:29,750
e lo ruberò e copierò e tornare al file seme.

93
00:06:29,940 --> 00:06:34,700
E poi invece del file del nostro seme e cambierò la descrizione su tutti e tre.

94
00:06:34,720 --> 00:06:37,990
Basta fare la stessa cosa piuttosto che blah blah blah.

95
00:06:38,130 --> 00:06:42,380
Ora abbiamo un po 'più di Lorem Ipsum e salveremo.

96
00:06:42,660 --> 00:06:48,070
E quindi per rendere questo in vigore dobbiamo riavviare il server perché questo riceverà il database.

97
00:06:48,720 --> 00:06:52,340
E poi torniamo indietro e andiamo alla pagina dei campeggi.

98
00:06:52,440 --> 00:06:54,090
Abbiamo tre campeggi.

99
00:06:54,090 --> 00:06:58,330
Tuttavia ora hanno una descrizione più legittima del testo.

100
00:06:58,680 --> 00:07:00,050
Ok, bene.

101
00:07:00,060 --> 00:07:02,240
Diamo ora un'occhiata a cosa dobbiamo lavorare.

102
00:07:02,250 --> 00:07:03,730
Ci sono alcune cose minori.

103
00:07:03,880 --> 00:07:08,580
Per ora lasciamo le stelle nel conteggio delle recensioni e passeremo ai commenti.

104
00:07:08,970 --> 00:07:15,150
Torniamo allo spettacolo che E. J. che sia nella stessa colonna qui.

105
00:07:15,150 --> 00:07:21,660
Sì, possiamo chiudere i semi, per ora quello che faremo è aggiungere una buona lezione all'interno della colonna medium 9

106
00:07:21,900 --> 00:07:22,630
perché vogliamo

107
00:07:22,680 --> 00:07:24,350
Prendendo la stessa quantità di spazio.

108
00:07:24,750 --> 00:07:31,440
Quindi per farlo basta andare proprio qui dopo la miniatura quindi questa e la didascalia proprio qui questa è la miniatura.

109
00:07:31,880 --> 00:07:34,770
Quindi a destra stanno per aggiungere la classe div.

110
00:07:34,870 --> 00:07:37,060
È uguale a

111
00:07:37,410 --> 00:07:42,870
E poi all'interno di quella intenzione di aprirlo e questo è dove farà il loop through per aggiungere

112
00:07:42,880 --> 00:07:43,560
i commenti.

113
00:07:43,680 --> 00:07:49,600
Ma inizierò aggiungendo nel pulsante la leva del pulsante e faremo un semplice div

114
00:07:50,750 --> 00:07:55,150
e questo div avrà una classe di trattini a destra.

115
00:07:55,320 --> 00:08:01,760
E poi dentro di noi aggiungeremo il nostro tag di ancoraggio qui che dobbiamo già creare

116
00:08:01,770 --> 00:08:02,940
un nuovo commento.

117
00:08:03,300 --> 00:08:05,090
Mettilo qui.

118
00:08:05,820 --> 00:08:11,520
È lunga, ma ricorda che è un tag di ancoraggio che ha una classe di successo del pulsante Button che

119
00:08:11,520 --> 00:08:12,350
lo rende verde.

120
00:08:12,490 --> 00:08:14,620
Ma l'arbitro è una parte davvero lunga.

121
00:08:14,790 --> 00:08:22,290
I campeggi affollano i commenti della barra ID del campeggio, ma salvano e aggiornano.

122
00:08:22,680 --> 00:08:23,030
OK.

123
00:08:23,040 --> 00:08:27,750
Quindi puoi vedere che ora abbiamo il pozzo che ci dà il bello sfondo grigio sul bordo.

124
00:08:27,750 --> 00:08:29,960
Questo è dove aggiungeremo nei commenti.

125
00:08:30,120 --> 00:08:34,170
Quindi abbiamo bisogno di fare il prossimo è scorrere i commenti e abbiamo già fatto.

126
00:08:34,170 --> 00:08:38,500
Ma piuttosto che creare un paragrafo per ognuno di noi, in realtà creeremo una riga separata.

127
00:08:38,760 --> 00:08:42,880
Quindi ti mostrerò come appare quando lo copia o lo taglia.

128
00:08:43,020 --> 00:08:49,140
E possiamo cancellare questo paragrafo in più e lo metteremo dopo il testo giusto.

129
00:08:49,440 --> 00:08:51,850
E facciamo questo correttamente.

130
00:08:52,090 --> 00:08:57,280
Quindi abbiamo il nostro ciclo e quindi passeremo in rassegna ogni commento e

131
00:08:57,270 --> 00:09:03,830
aggiungeremo all'interno di qui una riga di classe div per ogni classe div uguale alla riga.

132
00:09:04,750 --> 00:09:14,040
E poi all'interno di ciascuno aggiungeremo un'altra classe div uguale alla colonna medium 12 e la salviamo.

133
00:09:14,110 --> 00:09:20,820
E se diamo un'occhiata a cosa abbiamo qui finiamo con il nome utente email slash username

134
00:09:20,830 --> 00:09:21,850
che chiamiamo l'autore.

135
00:09:22,090 --> 00:09:29,070
E poi a destra c'è questa volta 10 giorni fa, che sarà solo hard code per ora e poi

136
00:09:29,080 --> 00:09:30,760
il commento effettivo verrà dopo.

137
00:09:30,750 --> 00:09:36,790
Quindi per fare quel lavoro abbiamo bisogno di fare un po 'di testo e poi fare qualcosa sul

138
00:09:37,120 --> 00:09:41,350
giusto testo destro e poi dobbiamo aggiungere un paragrafo per il commento stesso.

139
00:09:41,350 --> 00:09:43,890
Quindi proviamoci e andiamo qui.

140
00:09:43,950 --> 00:09:45,900
Abbiamo la nostra colonna media 12.

141
00:09:46,290 --> 00:09:49,800
E all'interno di questo inizieremo con l'aggiunta dell'autore del commento.

142
00:09:50,130 --> 00:09:51,770
Quindi aggiungiamolo proprio lì.

143
00:09:52,200 --> 00:09:57,520
E poi sotto che andremo ad aggiungere in un intervallo e questo sarà sulla destra.

144
00:09:57,580 --> 00:09:59,770
Quindi aggiungeremo il classico pull a destra.

145
00:09:59,970 --> 00:10:03,340
E poi qui aggiungiamo solo dieci giorni fa per ora.

146
00:10:03,510 --> 00:10:05,300
Bene, solo il codice rigido in

147
00:10:05,400 --> 00:10:09,520
E poi l'ultima cosa che vogliono fare è mostrare il testo del commento.

148
00:10:09,680 --> 00:10:15,000
Quindi ho intenzione di ottenere questo testo di commento qui e lo inseriremo all'interno del suo paragrafo

149
00:10:15,000 --> 00:10:21,340
che abbiamo già qui proprio così, tranne che vogliamo spostarlo all'interno della colonna qui, proprio come abbiamo l'autore e i

150
00:10:21,660 --> 00:10:22,770
10 giorni successivi .

151
00:10:22,770 --> 00:10:29,680
Vogliamo che siano nella stessa colonna insieme e ora ma salvano e tornano indietro.

152
00:10:29,700 --> 00:10:31,340
Guarda cosa otteniamo.

153
00:10:31,360 --> 00:10:31,980
Tutto ok.

154
00:10:31,980 --> 00:10:33,050
Quindi abbiamo un commento.

155
00:10:33,070 --> 00:10:33,930
Questo è tutto.

156
00:10:33,930 --> 00:10:36,580
Ma puoi vedere che abbiamo un pulsante per aggiungere un nuovo commento.

157
00:10:36,580 --> 00:10:37,980
Assicurati che funzioni.

158
00:10:38,770 --> 00:10:40,450
E i commenti sono visualizzati qui.

159
00:10:40,470 --> 00:10:41,600
Ci manca la valutazione.

160
00:10:41,670 --> 00:10:44,460
Quindi sembra un po 'strano ma per ora va bene.

161
00:10:44,700 --> 00:10:48,460
Quello che vorremmo fare è aggiungere uno o due ulteriori commenti.

162
00:10:48,450 --> 00:10:52,600
Quindi torna qui e usiamo ancora un po 'di lorem ipsum.

163
00:10:52,600 --> 00:10:57,100
Quindi ho intenzione di copiare parti di questo e aggiungerle come commenti.

164
00:10:57,270 --> 00:11:02,440
Basta usare un po 'di quello e l'autore qui sarà in campeggio.

165
00:11:02,520 --> 00:11:03,600
Nonno.

166
00:11:03,820 --> 00:11:05,000
Sottoscrivi.

167
00:11:05,720 --> 00:11:06,090
OK.

168
00:11:06,100 --> 00:11:08,420
Quindi ora stiamo ottenendo i nostri commenti qui bene.

169
00:11:08,430 --> 00:11:09,550
Funziona.

170
00:11:09,540 --> 00:11:11,610
Ho uno spazio che vogliamo aggiungere.

171
00:11:11,610 --> 00:11:16,560
Se dai un'occhiata a quello che abbiamo qui, c'è una linea davvero debole che non so se ti

172
00:11:16,570 --> 00:11:17,520
farai vedere sullo schermo.

173
00:11:17,520 --> 00:11:22,500
C'è una linea molto debole che aggiunge un po 'di spaziatura e tutto ciò che dobbiamo fare per rendere quel

174
00:11:22,530 --> 00:11:23,890
lavoro è aggiungere un h.

175
00:11:24,370 --> 00:11:31,260
Quindi, subito dopo questo testo, che è il pulsante, aggiungiamo una regola orizzontale e, se aggiorniamo, ora abbiamo

176
00:11:31,770 --> 00:11:33,210
un po 'di spazio.

177
00:11:33,260 --> 00:11:38,680
Hai un pulsante e abbiamo tutti i nostri commenti visualizzati a breve termine.

178
00:11:38,730 --> 00:11:40,310
Perché non costruiamo il nome utente.

179
00:11:40,620 --> 00:11:46,770
Quindi torneremo qui e abbiamo già avuto questo e se ne sono sbarazzati, ma torneremo indietro

180
00:11:46,890 --> 00:11:52,950
e aggiungeremo nuovamente un tag forte con l'autore e renderanno il tutto più semplice da vedere.

181
00:11:52,950 --> 00:11:53,770
Eccoci.

182
00:11:53,830 --> 00:11:57,470
Ancora non eccezionale ma abbastanza buono per ora.

183
00:11:57,540 --> 00:12:00,060
Quindi questo è in realtà tutto il bootstrap che dobbiamo fare per ora.

184
00:12:00,240 --> 00:12:01,390
Ma non abbiamo ancora finito.

185
00:12:01,470 --> 00:12:07,680
Se torniamo indietro e daremo un'occhiata alla versione di ish finita, vedremo che l'immagine occupa l'intera

186
00:12:07,680 --> 00:12:09,900
miniatura e semplicemente non lo fa.

187
00:12:10,050 --> 00:12:15,000
Anche se ho fatto un punto per usare la stessa identica immagine, non riguarda l'immagine stessa.

188
00:12:15,120 --> 00:12:16,820
Il problema si riduce al nostro stile.

189
00:12:17,080 --> 00:12:22,890
E quello che vogliamo fare è entrare e dire a questa immagine di occupare il 100 percento del container.

190
00:12:23,160 --> 00:12:29,150
Quindi ti mostrerò che possiamo ispezionarlo e questo è un ottimo uso per l'ispettore qui.

191
00:12:29,350 --> 00:12:36,260
Possiamo selezionarlo qui e poi qui possiamo aggiungere uno stile al 100 percento.

192
00:12:36,270 --> 00:12:37,060
E noi andiamo.

193
00:12:37,120 --> 00:12:39,540
Questa è una cosa che vorremmo fare.

194
00:12:39,610 --> 00:12:44,400
C'è ancora una piccola differenza che c'è un piccolo spazio lì che non

195
00:12:44,400 --> 00:12:45,320
abbiamo su questo.

196
00:12:45,470 --> 00:12:50,980
E per eliminare tutto ciò che vogliamo fare è andare nella miniatura attuale

197
00:12:50,970 --> 00:12:56,670
e selezionare la miniatura che è proprio qui e daremo quel padding zero.

198
00:12:57,580 --> 00:13:02,230
E ora, se guardiamo, sembra il modo in cui vogliamo che appaia o che quasi guardi in quel modo

199
00:13:02,220 --> 00:13:02,700
quando guardare.

200
00:13:02,730 --> 00:13:05,350
Aggiungiamo anche qualche spaziatura qui.

201
00:13:05,350 --> 00:13:09,740
Puoi vedere che c'è qualche spaziatura qui e possiamo aggiustarlo subito.

202
00:13:09,820 --> 00:13:15,180
Inoltre, esaminandolo e ricordando che non lo stiamo effettivamente risolvendo, lo stiamo solo testando nel browser

203
00:13:15,390 --> 00:13:19,560
e poi torneremo indietro e apporteremo queste modifiche nel nostro foglio di stile.

204
00:13:19,570 --> 00:13:24,760
Quindi quello che vogliamo fare è aggiungere un po 'di padding sul puledro didascalia che è questa scatola qui.

205
00:13:24,990 --> 00:13:31,220
E il Padam che vogliamo è in alto a sinistra a destra e in basso e sarà di nove o 10 pixel.

206
00:13:31,230 --> 00:13:35,370
Quindi faremo solo padding nove x.

207
00:13:35,760 --> 00:13:36,510
E noi andiamo.

208
00:13:36,540 --> 00:13:38,240
Finiamo con una bella spaziatura lì.

209
00:13:38,520 --> 00:13:43,090
Non è quello che vogliamo fare è prendere quello stile e in realtà aggiunto in un foglio di stile che stiamo andando

210
00:13:43,090 --> 00:13:43,450
a scrivere