E aí [Música] o Olá pessoal não sabe nem fique E hoje nós vamos montar o nosso template o nosso modelo base que ser utilizado em todas as aulas deste curso Beleza então Acabei de abrir aqui o modelo que será construído na hora de hoje e também será utilizado nas demais aulas esse curso né Vejam Só que bacana que bonito essas cores essa adivinha amarelo com esses dois textos Aqui nós temos exercício e 1 número do exercício deixei zero Pois é sal alguns apenas construir esse modelo temos logo após um povo Gustavo neles que e Aqui nós temos essa div centralizada onde nós vamos colocar a questão nós temos um input e um botão aqui com essa animação bem bacana então para começar colocar a mão na massa eu vou utilizar aqui o visual Studio code mais conhecida converse Cold que o meu editor de código então caso você não tem nenhum editor Eu recomendo utilizar aqui o vs code e também Já criei esse arquivo modelo o que será o modelo que nós vamos trabalhar em cima e também já conheci meu modelo poderia ter ml aqui no Browser aqui no Chrome Então vai ser nessa página que nós vamos trabalhar e vamos ter esse modelo aqui como referência Então hoje eu posso começar abrindo a minha estrutura básica HTML e Vejam Só que bacana ele já tava aqui também o doctype HTML que é uma declaração que define que esse aqui vai ser um documento do tipo HTML temos as nossas terras aqui HTML abrir aqui em cima e fechando aqui embaixo temos aqui no Ride algumas metas informações temos o nosso título da página e temos aqui embaixo o bode onde vai ficar todo nosso conteúdo que define o corpo aqui do nosso documento eu faço para vocês aqui parece ser um Pouquinho complicado no início mas basta vocês irem acompanhando as aulas que não dará coragem e isso aqui vai ficar cada vez mais claro então podemos começar a trabalhando com essa 1ª div que está em amarelo que agrupa esses dois textos Beleza então tá E aí basta simplesmente chamar uma tag div dessa maneira aqui ou se eu já quero definir uma classe para ela eu posso eles mente colocar um botão Box nave que é o nome da minha Class e dessa maneira ele já cria para mim uma div com a classe que eu acabei de definir Tá mas o Gustavo O que que é uma div e o que que é uma classe me perdi total agora muito bem uma div é usada como um container para agrupar elementos então vejo que nessa devia aqui que está em amarelo nós temos esses dois e lentos tranquilo e uma Class essa classe eu dei o nome que de box nave para ela poderia ser qualquer outra coisa pois são Gustavo Gustavo poderia ser um YouTube qualquer coisa mas eu prefiro o nome aqui de box e sem nave e uma classe ela é usada para especificar uma classe para um elemento HTML e Vejam Só que bacana vários elementos HTML podem compartilhar a mesma classe e essa que e classes divs vai ficar um pouquinho mais claro com a gente chegar a parte do CSS então Aguarda um pouquinho que nessa aula mesmo a gente vai trabalhar com isso então dentro dessa Diva aqui eu vou colocar esses dois textos então o primeiro é exercício hashtag 00 vou colocar dentro de uma tag H1 beleza Posso salvar Vejam Só que eu já tenho aqui meu exercício hashtag zero zero hora só que bacana posso colocar logo após esse Prof Gustavo neles que dentro de um H2 H2 dessa maneira aqui já tem o meu Prof Gustavo né esqui e agora a gente já sinalizou à parte da 1ª div Já podemos partir para a próxima div que essa aqui que está centralizada onde elas temos essa questão esse input e esse botãozinho aqui então eu vou criar uma outra div palavra o par esses elementos Então essa Di vai ter uma classe Box então eu posso criar dessa maneira aqui e qual o primeiro elemento o primeiro elemento vai ser a questão o que que essa questão Gustavo é uma tag p é um parágrafo então vejam só nós temos aqui já Nossa questão. . .
E aqui nesse lugar onde nós vamos colocar aqui estão de cada aula então por exemplo na aula umas vamos ter uma questão para resolver na hora dois as vamos ter outra questão para resolver então alguns colocaram aqui essa questão agora próximo elemento é esse input aqui como é que eu queria sim curtir o sabo esse boot eh para entrada de informações e eu posso deixar o tipo o texto por enquanto existem tipo número tipo data tipo e meio assim por diante Mas você não precisa preocupar com isso aqui agora e já posso definir também para ele o placeholder Gustavo o que que é esse Place Order Vejam Só que não input foi criado mas eu não tenho nenhum texto dentro dele aqui eu tenho esse texto Digite o valor então isso que é o place of Olha só pressione enter e Digite o valor seu salvar vier aqui tem um saco já tem o Meu Precioso dígito 1 Oi e o último elemento HTML que eu preciso definir é esse botãozinho com o valor enviar então vou abrir esse botão botão muito bem Enviar show de bola e Vejam Só que eu já tenho esse botão ao lado aqui de cinco ti só que aqui tem uma questão que o botão não fica ao lado do input ele fica abaixo Então eu preciso quebrar uma linha e para quebrar uma linha basta colocar uma tag BR dessa maneira aqui Vejam Só que já quebrou uma linha até posso quebrar duas linhas estão br br muito bem agora ficou bacana E para finalizar essa parte do HTML Basta apenas definir o título vejo que aqui em cima tem um gnp f00 que é o número do exercício e aqui nessa outra página Eu tenho um document Então vou colocar aqui no título 1gn GN 1gb FIPE estimular no teclado pe-001 muito bem Agora sim está exatamente igual eu já posso parte o estilo para o CSS Então logo após a nossa tag taitou eu vou abrir uma outra tag Style e é que dentro que nós vamos definir todo estilo do nosso documento da nossa página Então a primeira coisa que eu vou fazer eu vou definir aqui para o nosso corpo aqui para essa tag Body Vejam só abre aqui em cima e fecha embaixo eu vou definir uma um background-color ou seja uma cor de fundo pode ser esse aqui mesmo Korn flower Blue veja só que seu salvar e volta lá eu já tenho a mesma cor de fundo aqui do meu modelo Vejam Só que bacana que essa cor de fundo aqui a próxima coisa que eu vou fazer vai ser trabalhar com a família da fonte Vejam Só que a família da fonte está diferente então eu vou falar aqui que é font-family. Family do nossa página Nossa documento vai ser um Carrier New essa aqui mesmo Vejam Só a diferença já mudou um pouquinho já ficou melhor e também já posso centralizar esses elementos ao centro é centralizar ao centro bom então vou passar um teste text-align-center muito bem a parte aqui do bode já está finalizada e vamos trabalhar agora na primeira div nessa primeira Diva aqui que está em amarelo então vejam só que bacana essa Diva que nós queremos colocar em amarelo ela tem aqui uma classe Box nave Então como é que eu faço para chamar essa minha diva eu posso chamar ela pela sua classe então eu coloco um ponto e o nome da classe que no meu caso é box enfim nave muito bem e dessa maneira seu definir aqui ó um background color Gold vejam dessa maneira eu já consigo passar uma cor de fundo para essa div Só chamando a sua classe olha só que bacana e também já está começando a ficar bem parecido aqui os nossos dois modelos e dando continuidade nós podemos definir agora um espaçamento e entre os elementos e a borda Vejam Só eu posso fazer isso atrás I said in heading 5 pixels muito bem Vejam Só diferença que agora nós temos já um espaço aqui entre o elemento e a borda eu tô vendo que a única diferença que existe aqui entre uma diva e outra é que aqui nesse modelo as bordas estão redondas E aqui nessa me mal estamos trabalhando está bem Quadradão mesmo então para arredondar as bordas eu posso passar um border radius border-radius pode ser de 15 pixels mesmo então vejam só que agora através desse border-radius 15 pixels nós temos essas bordas arredondadas e está perfeitamente igual essas duas divs em amarelo e feito isso já Podemos trabalhar com essa outra div centralizada com essa cor de fundo bem bacana então vejam que essa outra div ela tem uma classe Box então para chamar essa classe basta passar um ponto Box que é o nome essa classe já posso definir aqui ó 1D o rgba Gustavo o que que é srgb a ou para qualquer GB mas é RGB a beleza uma cor ela composta por um RGB que é Red Green e blue Então esse Alpha vai ser a transparência se eu fazer o seguinte eu colocar o 0 para o Red usar for ruim e usar por Blue e deixar um aqui para o alfa desde que ele vai ficar sem por cento Preto olha só a tem que salvar a gente vai viver a faltou tirar aqui um parentes muito bem agora sim desde que ele ficou sem por cento Preto você definir o alfa agora como 10 ele vai ficar sem por cento transparente mas eu colocar 10. 6 para esse Alfa desde que ele vai ficar meio termo aí ficou meio transparente ficou bem bacana que agora nós podemos centralizar essa dívida igual nós temos no modelo então eu posso passar Primeiramente um position Absolute e se você já viu e deixe nos comentários a diferença o seguinte que agora Advil através desse position Absolute passou a ocupar apenas o espaço dela mesma então agora vou passar aqui um top em cinquenta por cento é muito bem Posso passar um left cinquenta por cento também e Vejam Só que agora o centro aqui dessa minha página está exatamente nesse vértice aqui então para centralizar a div eu tenho que voltar um pouquinho a esquerda para cima porque na diagonal aqui essa minha div eu posso fazer isso até mais um Transform translate -50% no eixo X e -50% no eixo Y muito bem e agora dessa maneira nós já temos a nossa div centralizada com sucesso então para conseguir finalizar o estilo dessa div eu vou passar simplesmente um pede que é o espaço como eu já fiz naturalmente é o espaço entre os itens é a borda o passar um peidinho pode ser de 15 pixels mesmo beleza já melhorou possa arredondar essas bordas E lembra que eu utilizei o border-radius então eu vou arredondar as bordas como border-radius pode ser 15 pixels também a beleza vejo só tá ficando bem parecido e por último a última coisa eu vou fazer é colocar mudar a cor da fonte para Branco tão aqui estava preto já mudou para branco e já podemos partir agora para o estilo do meu input e agora para trabalhar com meu input vejo que ele não tem nenhuma classe mas então Gustavo como é que eu faço para chamar ele eu posso chamar ele aqui dentro no estilo através da sua tag mesmo que é input Então você definir aqui um background color red ele já entendi que eu estou me referindo a esse input E é claro né que eu não vou deixar essa cor de fundo posso retirar daqui e eu vou começar a definir aqui um tédio e 10 pixels veio que a gente está começando a repetir aqui os comandos lembro que o pede é o espaço entre os elementos e a borda posso tirar as bordas e se impute através um border: nononi muito bem já retirou as bordas só que agora quando eu clico dentro ele gera essa linha ali fora e eu posso retirar esse áudio lá em nome outline Kelinha de fora agora quando eu clico dentro ele não gera Mas aquela linha posso já também arredondar essas bordas olha só tá começando ficar bem parecido para regular as bordas que você já conhece esse comando border-radius posso passar um 10 pixels para ele beleza tá ficando bem show posso também aumentar o tamanho dessa fonte para Font size tamanho da fonte para 10 fique seus ou 15 pixels né 15 pixels agora fica um pouquinho mais bacana e também vou trabalhar agora com a largura desse meu input atravessa aqui nesse comandinho Willys cinquenta por cento beleza e agora que esse nosso dois impulsos estão exatamente iguais a última coisa que falta de ir trabalhar é esse meu botãozinho com essa animação então para chamar ele eu posso fazer a mesma coisa que eu fiz aqui com o boot basta chamar a sua tag que é bom então beleza e já posso começar a passando é bem um prédio de 10 pixels assim como eu fiz aqui para o meu input beleza Vejam Só a diferença posso também fazer o seguinte tirar essas bordas até mais um border None muito bem Posso também tirar aquela linha de fora com o outline None Beleza agora eu vou definir uma largura para ele cinquenta por cento assim como eu fiz para o meu input aqui em cima beleza posso definir também um background color background color Light Blue se eu não me engano Leite Blues não é slate Blue Agora sim Olha só pessoal tá começando a ficar bem parecido aqui eu tenho essa fonte em branco só que dá preto então eu posso mudar a isso através um color White muito bem Vejam Só que já mudou aqui e por último a última coisa que falta fazer é trabalhar com essas bordas arredondadas Então você já conhece o o border radius nosso amigo border-radius eu vou definir para ele e um border radius de 10 pixels muito bem Vejam Só que agora está exatamente igual os nossos dois modelos Só que tem uma pequena diferença que aqui quando eu passo Mouse ele muda o cursor e ele também muda a cor de fundo Então já posso mudar aqui o cursor passar um cursor Pointer para ele agora quando eu passar o mouse por cima Vejam Só que ele já muda o cursor e também posso trabalhar com essa animaçãozinha aqui para mudar a cor de fundo posso fazer isso através um batom: over bom então quando eu passar o mouse por cima ele vai chegar aqui nesse botão: ou ver e eu quero que ele mude a cor de fundo parece Korn flower Blue então agora quando eu passar o mouse por cima aqui ele não só aquele já muda a cor de fundo só que tá bem seco né tá bem rápido aqui eu tenho uma transição tá bem suave então para aplicar essa transição basta eu passar aqui nessa tag botão aqui dentro um transition transition.
Zero.
