1
00:00:00,000 --> 00:00:01,200
Bem-vindo de volta. 

2
00:00:01,200 --> 00:00:03,800
Vamos continuar
 construindo a página inicial. 

3
00:00:03,795 --> 00:00:05,825
E, como você pode ver,
 voltei para
 a

4
00:00:05,820 --> 00:00:08,730
imagem de
 fundo tradicional. 

5
00:00:08,730 --> 00:00:10,020
Mas, como eu disse, se você quiser

6
00:00:10,020 --> 00:00:11,550
usar o vídeo, tudo bem. 

7
00:00:11,550 --> 00:00:13,800
A próxima seção que
 vamos construir será
 a

8
00:00:13,800 --> 00:00:16,080
seção de duas colunas que terá

9
00:00:16,080 --> 00:00:18,990
alguns textos à esquerda,
 uma imagem à direita. 

10
00:00:18,990 --> 00:00:22,530
E então a terceira seção
 aqui é muito, muito semelhante. 

11
00:00:22,530 --> 00:00:24,450
São apenas as colunas invertidas. 

12
00:00:24,445 --> 00:00:27,325
Na terceira seção,
 temos a imagem à esquerda

13
00:00:27,320 --> 00:00:30,080
e depois o texto à direita. 

14
00:00:30,080 --> 00:00:32,750
Então, como exatamente
 vamos conseguir isso? 

15
00:00:32,750 --> 00:00:34,760
Isso é muito,
 muito, muito direto. 

16
00:00:34,760 --> 00:00:36,650
Vamos para uma página inicial. 

17
00:00:36,650 --> 00:00:38,000
Vamos editar. 

18
00:00:38,000 --> 00:00:39,560
E você pode ver agora que são

19
00:00:39,560 --> 00:00:41,420
basicamente duas colunas, 5050. 

20
00:00:41,420 --> 00:00:44,200
Então, muito facilmente,
 vamos descer aqui,

21
00:00:44,195 --> 00:00:47,455
criar uma nova seção
 com duas colunas, 5050. 

22
00:00:47,450 --> 00:00:48,800
Vou editar a seção,

23
00:00:48,800 --> 00:00:50,600
certificar-me de
 que ela fique toda a largura. 

24
00:00:50,600 --> 00:00:53,780
E então as colunas GAAP
 dirão que não há lacuna. 

25
00:00:53,780 --> 00:00:57,520
Tudo bem, então a
 primeira seção aqui,

26
00:00:57,515 --> 00:00:59,625
vai ter alguns textos. 

27
00:00:59,629 --> 00:01:02,179
Deixe-me desenhar o
 editor de texto aqui. 

28
00:01:02,180 --> 00:01:05,360
Lambda copie o texto fictício de
 Lorem Ipsum

29
00:01:05,360 --> 00:01:06,830
que
 tenho aqui. 

30
00:01:06,830 --> 00:01:09,560
Deixe-me ir em frente
 e colar isso. 

31
00:01:09,560 --> 00:01:12,080
E então também
 temos o cabeçalho. 

32
00:01:12,080 --> 00:01:15,370
Deixe-me largar isso por
 desafio. É um h2. 

33
00:01:15,365 --> 00:01:16,105
Aqui. 

34
00:01:16,100 --> 00:01:17,840
Na verdade, não criei

35
00:01:17,840 --> 00:01:21,830
nenhum cabeçalho real,
 nenhum título real. 

36
00:01:21,830 --> 00:01:25,240
Então deixe-me digitar. 

37
00:01:25,235 --> 00:01:30,915
Adoraríamos viajar. 

38
00:01:30,910 --> 00:01:34,880
Apenas alguma coisa. É isso. 

39
00:01:34,880 --> 00:01:36,940
E então, para a
 segunda coluna aqui,

40
00:01:36,935 --> 00:01:38,905
vamos adicionar a imagem,

41
00:01:38,900 --> 00:01:42,460
e vou adicionar essa
 imagem que tirei em Istambul. 

42
00:01:42,455 --> 00:01:44,455
Este foi um grupo de
 nossos estudantes universitários. 

43
00:01:44,450 --> 00:01:45,710
Eu estava andando por aí
 e disse: Ei,

44
00:01:45,710 --> 00:01:47,480
você
 gostaria que eu tirasse
 uma foto dessa ideia? 

45
00:01:47,480 --> 00:01:48,850
Então eu tirei a foto. 

46
00:01:48,845 --> 00:01:51,785
Portanto, certifique-se de definir
 essa imagem para enganar. 

47
00:01:51,785 --> 00:01:53,755
Porque, novamente, queremos que
 a imagem ocupe

48
00:01:53,750 --> 00:01:57,160
toda
 a largura e a
 altura de sua coluna. 

49
00:01:57,155 --> 00:02:01,105
Mas também precisamos
 adicionar o botão Saiba mais. 

50
00:02:01,100 --> 00:02:02,750
Então o que vou fazer, é claro,

51
00:02:02,750 --> 00:02:04,640
é voltar aqui,

52
00:02:04,640 --> 00:02:07,120
arrastar o botão, soltá-lo aqui. 

53
00:02:07,115 --> 00:02:14,255
E então vou
 dizer aprenda, saiba mais. 

54
00:02:14,255 --> 00:02:17,845
Então este link pode ir para
 talvez a página sobre. 

55
00:02:17,840 --> 00:02:21,840
Então, vou simplesmente dizer barra
 para frente. 

56
00:02:22,030 --> 00:02:24,200
E lá está ele. 

57
00:02:24,200 --> 00:02:25,590
Vou me alinhar
 com o centro. 

58
00:02:25,594 --> 00:02:26,604
Vamos fazer algumas alterações. 

59
00:02:26,600 --> 00:02:28,630
Tipografia de estilo. 

60
00:02:28,625 --> 00:02:32,515
Vou dizer
 transformar-se em maiúsculas. 

61
00:02:32,510 --> 00:02:37,060
A declaração sobre não
 dentro do que uma integração. 

62
00:02:37,055 --> 00:02:39,655
E, em seguida, a cor do texto. 

63
00:02:39,650 --> 00:02:42,490
Vou mudar
 isso para preto. 

64
00:02:42,485 --> 00:02:45,085
Agora, o botão real
 em si vai com

65
00:02:45,080 --> 00:02:48,380
uma cor de fundo de branco. 

66
00:02:48,380 --> 00:02:52,220
digitação de
 fundo aqui será de cor branca. 

67
00:02:52,220 --> 00:02:54,260
Mas então vamos definir uma borda de

68
00:02:54,260 --> 00:02:57,590
sólido para que possamos realmente
 ver o botão. 

69
00:02:57,590 --> 00:02:58,940
E se você quisesse, você poderia

70
00:02:58,940 --> 00:03:00,440
adicionar alguns vídeos de borda também. 

71
00:03:00,440 --> 00:03:02,620
Mas não vou fazer isso. 

72
00:03:02,615 --> 00:03:05,485
Uma última coisa a
 fazer seria

73
00:03:05,480 --> 00:03:08,680
alinhar nosso conteúdo
 no meio. 

74
00:03:08,675 --> 00:03:11,375
Então, vou clicar no
 botão Editar Coluna,
 comentários,

75
00:03:11,375 --> 00:03:13,855
Alinhar Vertical, define o meio. 

76
00:03:13,850 --> 00:03:15,980
E então mais uma coisa que
 fazemos

77
00:03:15,980 --> 00:03:18,200
para ter algum
 espaço à esquerda

78
00:03:18,200 --> 00:03:19,940
e à direita é contra
 agora, o texto não está

79
00:03:19,940 --> 00:03:22,670
exatamente à direita da
 borda da coluna,

80
00:03:22,670 --> 00:03:23,900
então precisamos adicionar algum espaçamento. 

81
00:03:23,900 --> 00:03:25,220
Então, vou voltar aqui. 

82
00:03:25,220 --> 00:03:27,790
O que vamos fazer
 é muito, muito simplesmente,

83
00:03:27,785 --> 00:03:30,305
vamos avançar

84
00:03:30,305 --> 00:03:32,875
para a mesma coluna. Bem aqui. 

85
00:03:32,870 --> 00:03:35,210
Vamos desvincular os
 valores para o padrão. 

86
00:03:35,210 --> 00:03:38,440
E então vou
 dar 50 pixels

87
00:03:38,435 --> 00:03:42,025
por 50 pixels à esquerda. 

88
00:03:42,020 --> 00:03:43,130
E lá está ele. 

89
00:03:43,130 --> 00:03:47,930
Construímos nossa
 segunda seção com muita facilidade,

90
00:03:47,930 --> 00:03:50,390
já que a terceira seção é muito,
 muito

91
00:03:50,390 --> 00:03:51,980
semelhante em design,

92
00:03:51,980 --> 00:03:54,200
o que podemos fazer é
 simplesmente clicar com o botão direito do mouse na

93
00:03:54,200 --> 00:03:57,190
proteína
 da seção de edição
 e depois duplicar. 

94
00:03:57,185 --> 00:03:59,855
E agora o que vou simplesmente fazer

95
00:03:59,855 --> 00:04:02,605
é arrastar esta
 primeira coluna aqui,

96
00:04:02,600 --> 00:04:06,200
arrastá-la até
 aqui, trocar as colunas. 

97
00:04:06,200 --> 00:04:07,490
E agora de forma muito simples,

98
00:04:07,490 --> 00:04:09,290
vamos em frente e
 edite essa imagem. 

99
00:04:09,290 --> 00:04:13,220
Vou escolher este
 que eu peguei na Argentina. 

100
00:04:13,220 --> 00:04:16,670
suporte se encaixa em L, cor gordurosa. 

101
00:04:16,669 --> 00:04:20,029
E então, é claro,
 para os textos aqui,

102
00:04:20,030 --> 00:04:21,560
eu
 adicionei qualquer coisa viajada para

103
00:04:21,560 --> 00:04:23,300
os melhores lugares como
 o cabeçalho, ok,

104
00:04:23,300 --> 00:04:27,350
então deixe-me trocar
 esse cabeçalho aqui e

105
00:04:27,350 --> 00:04:34,210
dizer viajar para os melhores lugares. 

106
00:04:34,205 --> 00:04:38,035
Lá vai você. Tudo bem,
 vamos em frente agora atualizações. 

107
00:04:38,030 --> 00:04:41,610
Digamos como a
 página se parece. 

108
00:04:41,920 --> 00:04:45,180
Vamos, vamos. 

109
00:04:46,210 --> 00:04:49,780
Tenha paciência comigo. 
Infelizmente, esses são

110
00:04:49,775 --> 00:04:54,485
os riscos ocupacionais de
 um instrutor, um professor. 

111
00:04:54,485 --> 00:04:57,205
Às vezes, o incidente começa

112
00:04:57,200 --> 00:05:00,320
a bagunçar e
, finalmente, ele é atualizado. 

113
00:05:00,320 --> 00:05:03,560
Certo, obrigado. Agora,
 vamos ver a página. 

114
00:05:03,560 --> 00:05:07,310
Vamos rolar para baixo
 e lá está. 

115
00:05:07,310 --> 00:05:08,920
Certo, mais uma coisa. 

116
00:05:08,915 --> 00:05:10,285
Assim como um bônus,

117
00:05:10,280 --> 00:05:11,960
poderíamos adicionar alguma animação

118
00:05:11,960 --> 00:05:13,130
para que as imagens talvez gostem,

119
00:05:13,130 --> 00:05:14,690
você sabe, este slide
 da esquerda e da direita. 

120
00:05:14,690 --> 00:05:17,000
Então, o que podemos fazer
 é simplesmente
 voltar

121
00:05:17,000 --> 00:05:21,160
e verificar essa alegoria
 para
 a primeira imagem,

122
00:05:21,155 --> 00:05:22,915
aquela com os
 alunos aqui,

123
00:05:22,910 --> 00:05:24,460
vou editar a imagem. 

124
00:05:24,455 --> 00:05:26,635
Vá para o isqueiro avançado,

125
00:05:26,630 --> 00:05:27,740
você tem efeitos de movimento. 

126
00:05:27,740 --> 00:05:29,800
Vou dizer animação de
 entrada. 

127
00:05:29,795 --> 00:05:32,425
Vamos deslizar das luzes. 

128
00:05:32,420 --> 00:05:33,740
Ok, tão ligeiramente
 da direita,

129
00:05:33,740 --> 00:05:35,150
então cortando da direita. 

130
00:05:35,150 --> 00:05:37,010
E então para esta
 imagem era simplesmente fazer

131
00:05:37,010 --> 00:05:39,750
o slide
 oposto da esquerda. 

132
00:05:39,745 --> 00:05:41,545
Efeitos de movimento. 

133
00:05:41,540 --> 00:05:44,700
Diminuiu, informa ou amou. 

134
00:05:46,240 --> 00:05:49,940
Certo, isso foi meio estranho. 

135
00:05:49,940 --> 00:05:50,930
Não sei exatamente
 o que eles fizeram. 

136
00:05:50,930 --> 00:05:53,180
Deixe-me fazer isso de novo. 

137
00:05:53,180 --> 00:05:53,660
Certo. 

138
00:05:53,660 --> 00:05:55,280
Por algum motivo, a janela da
 imagem

139
00:05:55,280 --> 00:05:56,420
para a segunda coluna. 

140
00:05:56,420 --> 00:05:57,530
Não sei por que isso aconteceu,

141
00:05:57,530 --> 00:06:00,570
mas tudo bem, vou apenas
 ir em frente e atualizar. 

142
00:06:00,790 --> 00:06:02,180
Lá vamos nós. 

143
00:06:02,180 --> 00:06:05,620
Vamos ver a página. 
Vamos rolar para baixo. 

144
00:06:05,615 --> 00:06:07,235
Faz deslizar da esquerda,

145
00:06:07,235 --> 00:06:09,805
enganado e deleite,
 e lá está. 

146
00:06:09,800 --> 00:06:12,090
E assim, nossa página inicial

147
00:06:12,094 --> 00:06:14,274
está começando a entrar em vigor. 

148
00:06:14,270 --> 00:06:16,490
Então, junte-se a mim no próximo
 vídeo, onde agora
 vamos

149
00:06:16,490 --> 00:06:17,660
dar uma olhada em como vamos
 construir a

150
00:06:17,660 --> 00:06:19,150
próxima seção,

151
00:06:19,145 --> 00:06:23,795
que seria o design de viagem
 exclusivo.