‫Instrutor: Agora vamos
‫começar a realmente criar nosso template base.
‫Portanto, o modelo no qual todos os outros
‫modelos serão baseados posteriormente.
‫Então, basicamente, estaremos convertendo um arquivo html regular,
‫que está nos arquivos iniciais, em um modelo Pug.
‫Então, basicamente, vamos começar
‫a criar o layout desta página.
‫Portanto, este cabeçalho aqui e também o rodapé.
‫Ok, não o conteúdo, é claro,
‫porque isso iremos construir mais dinamicamente um pouco
‫mais tarde, ok.
‫Mas deixaremos tudo
‫pronto, para que possamos injetar todo esse conteúdo real
‫naquele modelo de base geral.
‫Então, vamos fazer isso agora.
‫E vamos começar nos livrando
‫de todo esse conteúdo que tínhamos aqui.
‫Então, isso foi realmente
‫apenas para mostrar as diferentes características do Pug.
‫E agora, vamos abrir esta visão geral. arquivo html, para
‫que possamos basicamente convertê-lo aqui para Pug.
‫Ok, então esse era o arquivo html original
‫que criei para projetar a página de visão geral
‫que acabamos de ver renderizada dinamicamente.
‫Ok, então isso é o que temos na cabeça e,
‫na verdade, vamos seguir em frente e copiar todo o código, para
‫que possamos converter o que está faltando aqui.
‫Ok, então o conteúdo do nosso título é este,
‫então vamos copiá-lo, então vamos
‫nos livrar, então este é o conteúdo da página principal, certo.
‫Então já temos o favicon e também o estilo.
‫Então, o que está faltando é basicamente esse
‫material aqui, para resposta de
‫desenvolvimento web, e também este link para a fonte do Google, ok.
‫Então, começando
‫com isso, instale uma folha
‫de estilo e, em seguida, vamos pegar
‫essa referência e substituí-la por aspas simples.
‫Ok, então eu também quero definir esses dois,
‫então vamos cortá-los aqui
‫e simplesmente converter tudo o que temos aqui.
‫Tudo bem.
‫Ah, e também as aspas simples.
‫Ok, vamos realmente colocar este no final,
‫e esse é o nosso chapéu para o nosso modelo.
‫A seguir, vamos dar uma olhada no cabeçalho.
‫Ok, basicamente temos todo esse elemento aqui, com
‫apenas um cabeçalho para aquela barra cinza escura que você viu
‫lá no topo da página.
‫E então vamos
‫copiar isso e colocar aqui.
‫Então, isso é muito
‫código e você verá quão pequeno será mais tarde, uma
‫vez que traduzirmos para o Pug.
‫Ok, e aqui vamos colocar um
‫comentário visível em nosso html, dizendo HEADER.
‫Ok, na verdade, isso é sem o traço.
‫Portanto, no código VS, quando eu clico no atalho
‫de comentário, ele cria automaticamente um comentário Pug.
‫Mas aqui, eu realmente quero apenas um
‫comentário, que também está disponível na saída html.
‫De qualquer forma, vamos agora criar o elemento de cabeçalho
‫e ver o que temos aqui.
‫Portanto, temos cabeçalho com a classe de cabeçalho.
‫E tudo o que precisamos fazer para especificar
‫uma classe é DOT e o nome da classe.
‫Portanto, cabeçalho novamente.
‫Então, aí, temos um elemento de navegação.
‫E então, indentação e nav. nav, que é o nome da
‫classe aqui novamente, e então
‫também temos outro nome de classe e,
‫portanto, outro ponto.
‫E é isso.
‫Portanto, tours de navegação.
‫Portanto, se você está um pouco familiarizado com a arquitetura CSS,
‫talvez esteja vendo que estou usando a arquitetura BEM.
‫Então, nav é o bloco
‫e aqui este passeio é um modificador.
‫E aqui esse sublinhado sublinhado significa que
‫este é um bloco ou,
‫na verdade, um elemento.
‫Portanto, bloco, elemento e modificador.
‫Ok, isso não é
‫realmente importante, mas eu só queria mencioná-lo.
‫Enfim, dentro da navegação, temos
‫um elemento de link.
‫Então, a, com a classe de nav__el.
‫Então, aqui, temos este atributo href e, portanto,
‫lembre-se de que usamos parênteses e, em
‫seguida,
‫href, e definimos como nada.
‫Então, basicamente, é isso que esse hash significa.
‫E então, simplesmente o conteúdo, então
‫todos os tours.
‫Em seguida, temos este formulário aqui,
‫mas na verdade não vamos
‫implementá-lo neste momento.
‫Então, vamos nos livrar disso.
‫Tudo bem e essa é a nossa navegação.
‫Portanto, este código
‫aqui é basicamente equivalente a este.
‫E a seguir, temos este logotipo de cabeçalho.
‫Então, nova linha, mas um nível atrás,
‫no recuo para que fique no mesmo
‫nível da navegação.
‫Então, assim como está aqui, certo.
‫Agora, quando
‫é um div, nem precisamos dizer div. headerlogo, neste caso.
‫Então, quando é
‫um div, que é uma espécie de elemento de bloco padrão
‫em html, tudo o que precisamos é
‫o ponto e isso criará automaticamente um elemento div.
‫Então, lá dentro, temos essa imagem,
‫e é claro que precisa de alguns atributos, que
‫são primeiro, a fonte.
‫Então, imagem, logotipo, branco. png, e também
‫o texto alternativo, ok.
‫Em seguida, temos essa outra navegação aqui e, novamente, que
‫está no mesmo nível
‫da primeira navegação e desta div.
‫Portanto, um nível atrás no
‫recuo e crie um novo elemento nav com a
‫classe nav e o usuário classe nav.
‫Então, lá, há um link,
‫muito semelhante
‫a este, então vamos apenas copiá-lo para nos poupar algum tempo.
‫E então aqui diz: Minhas reservas.
‫Em seguida, outro, e na verdade vamos apenas copiá-lo novamente, com a diferença
‫de que ele não tem esse conteúdo, mas
‫ao invés disso, tem um pouco mais de conteúdo dentro dele.
‫Então, é isso.
‫Então, muito fácil de novo, imagem,
‫com a fonte,. jpg.
‫E também tem um nome
‫de classe, então vamos editar aqui com o ponto.
‫Então, nav, imagem do usuário.
‫E então simplesmente um palmo dizendo Jonas.
‫E, como
‫você pode ver, esta realmente será a
‫parte dinâmica deste cabeçalho.
‫E então, na verdade, tudo isso aqui se
‫tornará um ponto no início.
‫Ok, mas de qualquer maneira, vamos terminar de codificar esta parte aqui.
‫Basicamente, esses dois botões
‫são o botão de login e o botão de inscrição.
‫Então, é claro que você não terá
‫o botão de login e o botão de inscrição
‫ao mesmo tempo de ter esse usuário navegando aqui.
‫Então, minhas reservas e o nome do usuário, ok.
‫Mas, novamente, vamos colocar isso aqui por enquanto e,
‫em seguida, comentar o que não precisamos.
‫Então, botão, elemento nav e também elemento nav
‫e o modificador cta para inscrição.
‫E na verdade há também um antes disso para login, certo.
‫Então, é esse aqui.
‫Ok e isso é realmente isso.
‫Então esse é
‫o cabeçalho, e você vê que
‫este código aqui é equivalente a tudo isso que temos aqui,
‫o que parece muito mais confuso, se você
‫me perguntar pelo menos.
‫Então, apague isso, e como eu disse,
‫essa navegação do usuário aqui,
‫essa parte só vai ficar disponível
‫quando alguém estiver logado.
‫E então, por enquanto, vamos comentar completamente tudo isso.
‫Tudo bem, então temos o conteúdo e vamos adicionar outro comentário aqui e
‫em nosso html,
‫na verdade tudo o que
‫vamos adicionar agora é esta
‫seção aqui com a classe de visão geral.
‫Porque aí é onde temos
‫todos esses cartões de
‫conteúdo, que novamente, por enquanto, não incluiremos lá.
‫Então, novamente, o que estamos
‫fazendo agora é apenas um esqueleto, por assim dizer.
‫Tudo bem, então seção. visão global.
‫Visão geral.
‫E por enquanto, vamos simplesmente colocar um h1 aqui
‫com o nome do passeio que está chegando como uma variável.
‫Ok e é claro que esta
‫seção aqui precisa estar no mesmo nível que este cabeçalho, ótimo.
‫Portanto, tudo o que está faltando agora é o
‫rodapé no final da página.
‫Então vamos lá e vamos lá.
‫Vamos pegar tudo isso.
‫E isso deve ser realmente um elemento de rodapé,
‫não apenas um div regular.
‫Portanto, um elemento de rodapé com a classe de rodapé, em seguida,
‫um div, com a classe do logotipo
‫do rodapé e, novamente, nem preciso especificar o elemento div.
‫Então temos uma imagem aqui. png e então
‫eu espero que digitar tudo isso sozinho, basicamente à mão, faça com que você
‫mantenha esse conhecimento de como tudo isso funciona um pouco melhor.
‫Ok, então este é alt e agora esta navegação
‫de rodapé, então uma lista não
‫ordenada, e agora, temos alguns elementos de
‫item de lista.
‫Então, liste o item e, em seguida, haverá um link
‫em cada um deles.
‫Então, basicamente, um com o href do nada.
‫E então, sobre nós.
‫Agora, aqui nesta situação, precisar desta
‫linha extra apenas
‫para especificar este li, não é realmente ideal.
‫E o que
‫podemos fazer aqui é usar
‫dois pontos, como este, e basicamente colocar tudo na mesma linha.
‫E então isso ainda funcionará como se houvesse uma
‫nova linha com um recuo,
‫mas basicamente nos permitindo fazer tudo na mesma linha.
‫Ok, então por algum motivo, o realce de
‫sintaxe para de
‫funcionar, mas bem, isso não é tão importante.
‫Então baixe os aplicativos, torne-se um
‫guia de carreiras.
‫E é isso mesmo.
‫Em seguida, temos este rodapé,
‫direitos autorais e, portanto, aqui temos apenas um monte de texto.
‫Portanto, ele especifica o símbolo
‫de copyright aqui, e isso é de Jonas Schmedtmann.
‫Então, sou eu e, assim como em todos os meus outros
‫cursos, quero que você saiba que está livre para usar
‫este projeto basicamente para você.
‫Então basicamente para colocar no seu portfólio ou mostrar
‫para quem você quiser, que você construiu esse
‫projeto no meu curso.
‫Agora, o que você não pode fazer é criar seu próprio curso
‫com base neste projeto.
‫E é triste que eu tenha que dizer isso,
‫mas é claro que houve pessoas que
‫usaram meu projeto, basicamente para colocar alguns cursos
‫gratuitos no YouTube, onde copiavam meus projetos, um por um.
‫Ok, deixe-me escrever isso aqui.
‫Para seus próprios fins, exceto produzir,
‫é claro, seus próprios cursos ou tutoriais.
‫Ok e é isso mesmo.
‫Tudo bem, então
‫essa é a tradução do esqueleto basicamente
‫que temos aqui, claro, exceto o conteúdo.
‫Ok, então não precisamos mais disso.
‫E, para terminar, vamos dar uma olhada rápida
‫e, de fato, aqui vai nosso conteúdo.
‫Agora, isso aqui parece um pouco fora do lugar porque este
‫texto de copyright aqui é muito longo.
‫Então, essa navegação de rodapé basicamente.
‫Mas como esse é um flex container, devemos
‫ser capazes de consertar
‫isso com conteúdo justificado, flex-end, não este.
‫Ok, e não se preocupe se você não está
‫familiarizado com CSS, ou mesmo Flexbox, isso é
‫apenas para consertar
‫visualmente o pequeno problema que tivemos aqui.
‫Então, vamos pesquisar o rodapé aqui.
‫Aqui estamos.
‫Corrija isso aqui,
‫e se
‫recarregarmos agora, sim, estamos bem, perfeito.