1
00:00:00,730 --> 00:00:05,820
Tudo bem, é hora de outro exercício e é possível ver aqui, vamos construir um site

2
00:00:05,880 --> 00:00:07,450
de blog simples e minimalista.

3
00:00:07,590 --> 00:00:12,930
E este exercício realmente vai se concentrar em praticamente tudo o que cobrimos, mas realmente vai bater

4
00:00:12,930 --> 00:00:19,110
em muitas coisas do modelo de caixa, de modo a preencher e margem e bordas, bem como escrever poligrafia, obter

5
00:00:19,350 --> 00:00:21,920
uma nova fonte do Google e algumas outras coisas.

6
00:00:22,080 --> 00:00:25,050
Então, vamos construir isso. Vou dar-lhe algumas instruções.

7
00:00:25,050 --> 00:00:30,120
Se você quer tentar isso sozinho primeiro e depois vamos passar por cima como sempre começando

8
00:00:30,120 --> 00:00:31,890
do zero no próximo vídeo.

9
00:00:32,430 --> 00:00:34,020
Então, vou dar-lhe algumas sugestões.

10
00:00:34,020 --> 00:00:37,200
A primeira coisa que você provavelmente notará é esta caixa cinza.

11
00:00:37,860 --> 00:00:44,850
E essa é realmente uma borda que está ao redor do corpo para que o corpo tenha essa beira de 20 pixels que seja todo

12
00:00:44,850 --> 00:00:45,470
o caminho.

13
00:00:45,480 --> 00:00:50,670
E isso significa que o corpo tem um explícito com o fato de que não está indo todo o

14
00:00:50,700 --> 00:00:52,900
caminho pela tela, mas vai daqui a lá.

15
00:00:53,310 --> 00:00:57,790
Então, outra coisa que vou mencionar aqui são algumas das cores.

16
00:00:58,440 --> 00:01:00,730
Então você não precisa adivinhar as cores.

17
00:01:00,750 --> 00:01:05,370
Seria um bom exercício para você realmente usar um seletor de cores e tentar descobrir isso por

18
00:01:05,370 --> 00:01:05,920
conta própria.

19
00:01:06,270 --> 00:01:11,640
Mas porque não tenho certeza de como a qualidade será transmitida por meio de vídeo e isso

20
00:01:11,640 --> 00:01:12,450
mudará algumas coisas.

21
00:01:12,480 --> 00:01:16,340
Eu só vou te dar as cores, então eu as escrevi aqui.

22
00:01:16,560 --> 00:01:21,510
Você pode se referir a isso ou pode sentir-se livre para usar suas próprias cores, mas a cor da

23
00:01:21,510 --> 00:01:24,500
borda em torno do corpo aqui é essa tonalidade de cinza.

24
00:01:24,630 --> 00:01:28,720
A cor da data é azul e esta é essa sombra de azul aqui.

25
00:01:28,920 --> 00:01:34,300
E então a cor do título para os títulos do blog é essa sombra de cinza azulado.

26
00:01:34,740 --> 00:01:40,160
E então, uma outra coisa é que você precisará ter uma fonte incluída aqui e essa fonte.

27
00:01:40,380 --> 00:01:43,410
Eu definitivamente não esperaria que você adivinasse o topo da sua cabeça.

28
00:01:43,410 --> 00:01:50,280
É chamado Source sense pro e está disponível nas fontes do Google, então você terá que usar as fontes do Google.

29
00:01:50,730 --> 00:01:51,950
Baixe.

30
00:01:51,950 --> 00:01:52,600
Inclua-o.

31
00:01:52,600 --> 00:01:56,830
Nós temos que baixá-lo, mas incluí-lo corretamente no seu envelhecer ou seu arquivo CSSA.

32
00:01:57,180 --> 00:02:00,760
Então, algumas outras coisas desta quarta-feira aqui.

33
00:02:01,170 --> 00:02:04,650
Esse efeito é apenas um limite esquerdo que foi ativado.

34
00:02:04,800 --> 00:02:07,580
Então, é a mesma cor cinza que temos aqui, é apenas mais fino.

35
00:02:07,680 --> 00:02:09,410
Então essa é a fronteira da aleft.

36
00:02:09,570 --> 00:02:14,190
Uma coisa em que eu preciso prestar atenção é garantir que todos estejam alinhados exatamente o mesmo.

37
00:02:15,060 --> 00:02:19,410
Observe que há uma pequena margem ou preenchimento ou algo aqui.

38
00:02:19,410 --> 00:02:25,410
A próxima coisa que vou apontar aqui é que a data está em todos os limites.

39
00:02:25,560 --> 00:02:27,600
Então, há uma maneira de fazer isso com seu sucesso.

40
00:02:27,660 --> 00:02:28,730
Torná-lo em maiúscula.

41
00:02:29,070 --> 00:02:33,720
E também que há um pouco de espaçamento de letras aqui.

42
00:02:33,720 --> 00:02:37,790
Portanto, isso não está no espaçamento de letras normal, eles estão espaçados um pouco mais distantes.

43
00:02:38,400 --> 00:02:41,900
E então uma última coisa entre os posts.

44
00:02:41,910 --> 00:02:47,370
Há esta linha e este é um elemento H R representa uma regra horizontal.

45
00:02:47,370 --> 00:02:53,100
E assim você pode adicionar um H R e, na medida em que se destaque isso para obter essa linha fina, esse tipo de encolher.

46
00:02:53,820 --> 00:02:54,910
Eu encontrei algo online.

47
00:02:54,930 --> 00:02:56,560
Eu vou mostrar para você no próximo vídeo.

48
00:02:56,670 --> 00:03:03,030
nossos estilos e há tantos ótimos artigos e canetas de código que você pode simplesmente copiar um dos.

49
00:03:03,030 --> 00:03:03,950
Mas basta pesquisar

50
00:03:04,020 --> 00:03:08,490
Então eu não espero que você obtenha isso exatamente além disso.

51
00:03:08,640 --> 00:03:11,580
Sinta-se livre para usar qualquer texto que você deseja.

52
00:03:11,670 --> 00:03:15,720
Eu usei, acho que isso é bacon ipsum, mas coloque qualquer texto que você deseja.

53
00:03:15,720 --> 00:03:20,460
Sinta-se livre para ter mais de duas postagens e então também enlouquecer com cores e fontes e

54
00:03:20,460 --> 00:03:20,990
torná-la sua.

55
00:03:21,330 --> 00:03:22,730
OK, então eu vou ver você no próximo vídeo.

56
00:03:22,740 --> 00:03:23,960
Começaremos do zero.