1 00:00:03,260 --> 00:00:08,650 É hora de passar para a segunda tarefa neste curso. 2 00:00:08,650 --> 00:00:13,599 Esta semana tivemos cobertos botões, formulários, 3 00:00:13,599 --> 00:00:20,095 tabelas, cartões, imagens e mídia e, finalmente, cobrimos emblema. 4 00:00:20,095 --> 00:00:23,870 Então, esta tarefa vamos olhar 5 00:00:23,870 --> 00:00:29,780 para tentar explorar sua compreensão de todos esses tópicos. 6 00:00:30,010 --> 00:00:33,920 Sua segunda tarefa consiste em três tarefas. 7 00:00:33,920 --> 00:00:37,120 Vamos passar por cada um deles passo a passo. 8 00:00:37,120 --> 00:00:44,160 Sua primeira tarefa é criar um formulário no campo da tabela de estratégia de índice. 9 00:00:44,160 --> 00:00:48,110 Então, isso é logo após as descrições que temos para 10 00:00:48,110 --> 00:00:53,345 usar outra linha com o conteúdo da linha lá. 11 00:00:53,345 --> 00:00:57,850 Crie um cartão lá com um título. 12 00:00:57,850 --> 00:01:01,065 Reserve uma mesa e, em seguida, dentro desse cartão, 13 00:01:01,065 --> 00:01:04,460 no bloco de cartas, inclua um formulário. 14 00:01:04,460 --> 00:01:08,095 O formulário conterá botões de opção. 15 00:01:08,095 --> 00:01:13,280 Você pode verificar a documentação para obter formulários para entender como criar botões de opção. 16 00:01:13,280 --> 00:01:14,620 Eles são bastante simples. 17 00:01:14,620 --> 00:01:19,100 Então, temos botões de rádio inline todo o caminho variando de um a 18 00:01:19,100 --> 00:01:25,400 seis e você permitirá que o usuário selecione qualquer um desses botões de opção. 19 00:01:25,400 --> 00:01:26,780 Então, clicando em um deles, 20 00:01:26,780 --> 00:01:29,455 permitirá que você selecione o número de convidados. 21 00:01:29,455 --> 00:01:32,900 E o segundo pedaço de informação é data, 22 00:01:32,900 --> 00:01:35,055 e o terceiro pedaço de informação é tempo. 23 00:01:35,055 --> 00:01:40,480 Então, a data e hora vão ser suportados por dois campos de entrada 24 00:01:40,480 --> 00:01:44,040 aqui e, em seguida, temos um botão enviar aqui chamado 25 00:01:44,040 --> 00:01:47,955 “reserve” com o botão sendo na cor azul. 26 00:01:47,955 --> 00:01:52,855 Então, lembre-se de todos esses detalhes diferentes aqui e isso está em um cartão. 27 00:01:52,855 --> 00:01:59,980 Agora, este cartão se estiver em um tamanho de tela pequeno a extra grande, 28 00:01:59,980 --> 00:02:08,000 ele será centralizado nesta linha e ocupará oito colunas. 29 00:02:08,000 --> 00:02:11,180 Então você tem duas colunas restantes aqui e duas colunas esquerda lá. 30 00:02:11,180 --> 00:02:14,915 Estas são algumas pistas sobre como você vai posicionar isso. 31 00:02:14,915 --> 00:02:17,020 Para tamanhos de tela extra pequenos, 32 00:02:17,020 --> 00:02:20,900 você ocupa toda a largura da tela, 33 00:02:20,900 --> 00:02:25,670 caso contrário seu formulário não pode ser acomodado de forma significativa. 34 00:02:25,670 --> 00:02:31,505 Então, essa é a primeira tarefa na sua segunda tarefa. 35 00:02:31,505 --> 00:02:38,285 Se você se lembra, a esquerda o segundo sorteio de nosso conteúdo sem estilo, 36 00:02:38,285 --> 00:02:41,980 você vai usar o objeto de mídia agora para estilizar este conteúdo. 37 00:02:41,980 --> 00:02:43,790 Observe em particular que, 38 00:02:43,790 --> 00:02:47,460 para o objeto de mídia, sua imagem aparecerá no lado direito, 39 00:02:47,460 --> 00:02:50,365 então use o conjunto direito de 40 00:02:50,365 --> 00:02:55,800 classes para fazer com que sua imagem apareça no lado direito do conteúdo, 41 00:02:55,800 --> 00:03:00,275 ao contrário dos outros em que a imagem aparece no lado esquerdo. 42 00:03:00,275 --> 00:03:02,930 E tem que ser centrado verticalmente aqui. 43 00:03:02,930 --> 00:03:08,665 Além disso, observe que você precisa incluir um emblema aqui com a palavra “novo”. 44 00:03:08,665 --> 00:03:11,530 E assim já vimos isso 45 00:03:11,530 --> 00:03:15,025 no exercício antes, então isso não deve ser muito difícil de alcançar. 46 00:03:15,025 --> 00:03:16,780 Então, sua segunda tarefa, novamente, 47 00:03:16,780 --> 00:03:21,030 é usar o objeto de mídia para estilizar isso através. 48 00:03:21,030 --> 00:03:24,545 A tarefa final na segunda tarefa, 49 00:03:24,545 --> 00:03:27,455 é criar um botão aqui. 50 00:03:27,455 --> 00:03:29,735 Isso seria um botão de bloqueio. 51 00:03:29,735 --> 00:03:32,635 Então, classe de bloco de botões que você vai usar. 52 00:03:32,635 --> 00:03:38,430 Agora, o que você pode fazer é você pode reposicionar este conteúdo 53 00:03:38,430 --> 00:03:41,170 aqui para ocupar metade da tela e 54 00:03:41,170 --> 00:03:44,770 , em seguida, esses dois vão gostar da parte restante da tela. 55 00:03:44,770 --> 00:03:47,910 E use a mesa de reserva de palavras lá. 56 00:03:47,910 --> 00:03:50,815 Não só isso, quando você clicar neste botão, 57 00:03:50,815 --> 00:03:55,085 você será levado para o formulário na parte inferior da página, 58 00:03:55,085 --> 00:03:57,340 que permite que você faça a reserva. 59 00:03:57,340 --> 00:04:01,150 Então, é aqui que você precisa usar as formas HTML de 60 00:04:01,150 --> 00:04:05,695 especificar IDs para alcançar essa ação. 61 00:04:05,695 --> 00:04:12,940 Então, voltando novamente, este botão deve ser posicionado verticalmente na 62 00:04:12,940 --> 00:04:21,610 tabela e deve compartilhar a metade do espaço da tela com o seu logotipo aqui. 63 00:04:21,610 --> 00:04:25,550 As palavras aqui podem ocupar a metade restante dos scripts. 64 00:04:25,550 --> 00:04:30,930 Então você pode usar as classes de coluna para ajustar essas coisas.