Node JS: crie seu site de comércio eletrônico.

1. Introdução: Olá e bem-vindos a uma nova turma. Isto é construir um site de comércio eletrônico com fones de ouvido. Então, em primeiro lugar, o que vamos usar para esta aula? Vamos usar Node.js e JavaScript. E para o front-end vamos usar Bootstrap, EJS, HTML e CSS. Então nesta classe vamos criar tudo o que é front-end. E vamos visualizá-lo agora. Então este é o projeto que vamos criar. Temos a integridade da nossa marca doméstica e entre em contato conosco. Nós também temos o método de login e inscrição. E, claro, esta é a página inicial. Temos algumas características do site, algumas marcas, alguns best-sellers. E, claro, as categorias. Em seguida, seguido por um rodapé que nós vamos tê-lo aqui mesmo. Então este é basicamente para o site como uma página inicial. E é claro que vamos criar muito mais do que isso. Vamos criar as categorias de marcas sobre nós e entrar em contato conosco juntos enquanto aprendemos cada passo no caminho. E, claro, vamos terminar nosso site com um pequeno projeto que você vai criar e, claro, deixá-lo na seção do projeto. Então, com isso sendo dito, esta é a introdução deste vidro. Vejo você no primeiro vídeo. 2. Servidor de configuração: Tudo bem, então agora estamos em nosso site de e-commerce. Esta é uma pasta na nossa área de trabalho. E vamos dividir o projeto em duas partes principais. O primeiro é projetar o front-end do nosso projeto, depois trabalhar com o back-end. Mas, por enquanto, vamos começar com nosso arquivo JavaScript. Vamos usar Node.JS e exigir algumas das poucas coisas, como Express, BodyParser, EJS e mangusto. E claro, não se preocupe se você não sabe nada sobre eles. Você pode realmente acompanhar-nos desde que vamos explicar alguns deles em nosso projeto. Então, primeiro de tudo, vamos criar nosso app.js. Então vamos chamá-lo, e este é o arquivo de pasta JavaScript. E então vamos para NodeJS, baixe a versão que é para nós. Então eu estou usando o Windows, então eu não sei a dispersão. E depois disso, passe pelo feiticeiro do isolamento. E então estamos prontos para ir. Então é para cima e prompt de comando, CMD. E eu. Digamos que nota, vamos pegar NodeJs. É comerciante 14.15.5. E isso significa que baixamos NodeJS com sucesso. Então agora vamos para a nossa área de trabalho. E eu sinto muito, vamos voltar CD Desktop e depois entrar em nosso site de e-commerce. Então, como dissemos, é site de comércio eletrônico e site de comércio. E vamos em frente e instalar. Alguns estão exigindo algumas das coisas que precisamos ter para completar nosso projeto. Então a primeira coisa que precisamos fazer é escrever npm install express. E como você pode ver, ele vai baixar express e alguns segundos. E este é o processo de download. E precisamos baixar algumas coisas também, tais como BodyParser, EJS, e mangusto. Então o banco de dados que vamos usar é um MongoDB. E esta é a primeira coisa. Isso é expresso baixado. E nós podemos realmente dizer, Eu disse de instalado. E podemos baixar BodyParser, EJS, mangusto e sessão expressa tudo ao mesmo tempo. Então, se formos em frente e apertarmos Enter, você pode ver que eles estão sendo baixados. Então, por enquanto, por que eles estão sendo baixados, podemos voltar para o nosso código e começar por exigir é baixado. Um arquivo. Então a primeira coisa que precisamos fazer é criar nossa primeira constante. E esta será a constante Express. E vamos usá-lo para exigir o Express. E como podem ver, não tínhamos este pacote. Sorte que JSON antes. Uma vez que exigimos algumas coisas, percebemos que temos algo como, vejamos. Temos aqui o BodyParser. Nós também temos, por exemplo, o nome da cor e todos esses arquivos ou requisitos que precisamos usar em nosso projeto. Eles estão sendo baixados automaticamente apenas baixando esses quatro ou cinco requisitos. Então, por enquanto, isso é expresso e, em seguida, precisamos BodyParser. Por isso, temos de o exigir também. Então, analisador de corpo, e como de costume, este é apenas um nome. Podemos dar o nome que quisermos, mas é mais fácil se o nomearmos assim. E é claro que precisamos escrever o mesmo nome de download daqui. Como você pode ver, usamos BodyParser com um traço no meio. E isso é expresso e BodyParser por enquanto, vamos continuar EJS para exigir EJS, depois Mangusto. Então isso é mangusto exigir. E, claro, precisamos usar a sessão. Então esta é a sessão da sessão expressa que baixamos. E acho que por agora estamos bem. A última coisa que precisamos fazer é criar nosso aplicativo real. Então isso será expresso assim. Então, por enquanto, podemos começar com o nosso projeto. Então vamos verificar se tudo está funcionando. E uma maneira de fazer isso é simplesmente criar a porta que vamos usar. Então usarei a porta 3000 e veremos isso em um minuto. E é claro que precisamos ouvir esse quadro usando essa lição. Então vamos usar as pessoas que acabamos de criar. E, claro, podemos criar uma função. E vamos console.log. E vamos digitar Server started ou 3000. E isso é para implantação. E agora podemos enviar algo. Por exemplo, vamos supor que sempre que entramos em nosso navegador, precisamos escrever Olá mundo. Então precisamos obter, vamos usar o método get. E a página padrão será esta, a barra. E é claro que precisamos criar uma função. Temos o pedido e a resposta. E então, dentro disso, vamos areia da resposta, descansar aquela areia. E vamos mandar o “Hello World”. Então é isso, basicamente, esta é a nossa configuração. Agora podemos ir em frente e digitar nosso CMD Node JS. E é assim que podemos instanciar. Então, quando temos aqui temos um erro, não é possível acessar o aplicativo antes da visualização. E como podemos ver, usamos o comprimento de aptidão. Desculpe, aqui precisamos usar App que você recebe. E, claro, esta é a inicialização do aplicativo, deve ser antes do uso dele. E, claro, agora, se você voltar e escrever app.js. E como podemos ver, temos isso para permitir que NodeJs funcionem. Então eu vou simplesmente permitir o acesso. E podemos ver a mensagem que escrevemos. Esl começou em 0,3 mil. Isso indica que tudo funciona bem. Se formos em frente e ir para localhost 3000, podemos ver Hello World indicando que conseguimos construir nosso navegador nó ou aplicativo Node. Então é isso para este vídeo e o próximo vídeo vamos começar com o front-end do nosso projeto. Então, vejo você então. 3. Cabeçalho: Tudo bem, Agora que acabamos de configurar o nosso app.js, podemos realmente começar com o nosso front-end. Mas uma coisa antes disso é usar algo disponível para nós no nó. E isto chama-se Norman. E como você pode notar, se eu for para o nosso cmd e vamos digitar o nó app.js. E, claro, ir para localhost 3000. Podemos ver que temos “Olá mundo”. No entanto, se mudarmos algo aqui, vamos supor que eu mude HelloWorld, HelloWorld como pesado. E neste caso, se eu voltar e tiver que ser fresco, nada vai acontecer. Então, uma maneira de lidar com isso é realmente instalar o Node 1. E o que não homens, como é usado, é realmente para criar algo que sempre que mudamos alguma coisa, nosso código é automaticamente alterado e nosso navegador. Então vamos em frente e sólido. E uma maneira de fazer isso é simplesmente escrever MPI e BMI dash g para global e precisamos instalá-lo. O Haldeman. Agora, um velho está sendo instalado. E depois de terminar a instalação, podemos simplesmente usá-lo dizendo nó app.js em vez de nó app.js. Então isso é basicamente para Rodman. E depois que a digitalização é feita com isso, podemos começar com o nosso front-end. Então vamos esperar, vamos esperar um pouco. Talvez. Feche esta janela por enquanto. E dentro do nosso site de comércio eletrônico, precisamos criar os pontos de vista. E dentro deste USE, eles vão criar todos os nossos arquivos EJS. Assim, as vistas internas são criadas as parciais da pasta. Dentro das parciais temos o cabeçalho e o rodapé. Então vamos voltar e ver se Norman ainda está preso em alguma coisa. Então vamos começar com o nosso cabeçalho. Então, dentro do cabeçalho, por simplesmente foi para Bootstrap. E neste projeto vamos usar o Bootstrap. Então, comece, vá para o modelo Iniciado, basta copiá-lo e colá-lo aqui. Então eu fui para Font Awesome para usar os ícones. Então vá para Font Awesome. E, claro, pegue seu próprio kit. Se você não tiver uma inscrição por e-mail. E então vai conseguir algo assim. Entra, faz com que ele gangue para conseguir este. Pode criar qualquer kit que você quiser. Meu telefone agora, eu vou usar este aqui então eu vou apertar Enter e depois voltar para o básico aqui. Então eu já colei no corpo. E agora vamos criar o cabeçalho. E depois de terminar do outro, podemos simplesmente mover esta parte, talvez tudo isso até aqui, e colá-la dentro do nosso rodapé. Então, isso é basicamente vamos voltar. E como você pode ver, quando vendido Tuckman e, em seguida, escrevemos Norman app.js para instanciar o aplicativo, a pasta JavaScript ou arquivo. E neste caso, o servidor está sendo executado na porta 3000. Se eu voltar aqui e vamos voltar para a localhost, temos “Olá mundo”, está indo. Se eu mudar alguma coisa aqui. Então vamos supor que eu fui e adicionei isso, voltar, atualizar. E como você pode ver, vamos ver. Tudo bem, então está começando, e agora temos isso aqui. Então isso é basicamente para nochmal. E como dissemos, temos aqui o nosso cabeçalho. E dentro deste cabeçalho vamos criar a barra de navegação que vamos usar. Então temos cabeçalho. Dentro do cabeçalho, temos os nervos e temos algumas aulas aqui. Temos navbar, navbar expandir grande, menu nav e BJ escuro. E você pode realmente copiar sua própria barra de navegação do Bootstrap, mas eu prefiro criá-lo por conta própria. Então isso é para a barra de navegação e, claro, precisamos adicionar o botão. Então o primeiro botão seria da classe navbar, criança. E então temos o botão de navegação. E então, é claro, precisamos ser um tipo D deste botão para ser o botão real. E, em seguida, dados VS alternado para alternar entre os itens sempre que temos um lapso e, claro, o alvo. Então dados BAS alvo, e estes são métodos de adição simples apenas para usar a barra de navegação. Então meu, agora para eu limitar minha rede por enquanto. Vá em frente e crie as subdivisões aqui. Então, dentro do nosso botão e vá aqui e abra. Mas por enquanto, vamos voltar para o nosso app.js e realmente tentar enviar esse cabeçalho que EJS para o nosso navegador. Então, quando eu estou pensando é simplesmente criar casa. E dentro da soma, podemos usar o cabeçalho e rodapé. Então vamos aprender a fazer isso. Podemos simplesmente criar um novo arquivo em exibições, e isso será home.html. Dentro desta casa, precisamos incluir o cabeçalho e o rodapé. Então, para fazer isso, podemos simplesmente escrever esta linha de código para comandante, traço, e, em seguida, incluir o que devemos incluir como parciais e, em seguida, attr. Então agora nós simplesmente fechamos a tag como fizemos antes, e este é o nosso cabeçalho. E é claro que podemos digitar o que quisermos aqui. Então, por exemplo, vamos escrever olá de casa, e vai funcionar muito bem. Mas, por enquanto, precisamos renderizá-lo usando o aplicativo dot JS. Aqui. Então vamos voltar para cima e para dentro. Precisamos usá-lo como app.get. Então, na lacuna, precisamos renderizar para casa como de costume. Agora vamos voltar, refrescar. E como podemos ver, temos a nossa barra de navegação. É muito pequeno por enquanto, mas conseguimos do cabeçalho. E nós realmente usá-lo dentro de nossa casa simplesmente incluindo dentro de nossa casa que DJ S. Então agora nós chamamos o Home para o arquivo JS e também o cabeçalho simplesmente referindo-se a ele dentro aqui. Então isso é basicamente para transferir o cabeçalho de um arquivo para outro. Esta é a linha simples de código que precisamos usar. Então vamos em frente agora e continuar esse cabeçalho aqui. E, claro, precisamos começar criando alguns itens. E alguns deles são a casa, por exemplo, precisamos ter uma página inicial. E a primeira coisa que estou pensando em fazer é criar alguns, algum ícone aqui. Então vamos descobrir isso mais tarde. Mas, por enquanto, eu simplesmente escrevo a referência. E esta referência não apontará para nada por enquanto. Mas temos algumas aulas, como marca navbar, que slide. E, em seguida, texto em maiúsculas. Se precisarmos adicionar qualquer escrita aqui, deve ser maiúscula e x g2. E então Amex auto para simplesmente fazê-lo no meio de um deficiente. Mas, por enquanto, é isso que temos de acrescentar aqui o nosso elemento. Vou simplesmente adicioná-lo dentro do espaço. A classe será H2, e podemos adicionar nosso ícone. Então vamos em frente e escolher o ícone que queremos de Font. Incrível. Então vamos voltar aos ícones. E vamos rolar para baixo. Como podemos ver, temos tantos itens que você pode usar. Vamos escolher este, este, por exemplo. Por agora. Então, pressione Enter e aguarde um pouco até que a página seja carregada. E você pode realmente usar este ícone com esta linha simples de código. Então, se você for aqui, vá para o site usando este ícone e copie isso. Agora vamos voltar ao nosso código. E em vez de eu, eu colo isso. Agora, se voltarmos ao nosso site de comércio eletrônico, está aqui. Então este é basicamente este é o nosso Eigen que vamos usar por enquanto. Então agora, depois de criar o item, podemos realmente começar com a criação de nossos elementos dentro desta barra de navegação. Então, para fazer isso, precisamos criar a nova divisão. E esta divisão terá várias aulas, como de costume. A classe será desmoronada, a primeira classe, e esta é a classe mais importante e veremos o porquê daqui a pouco. Mas, por enquanto, navbar para laboratórios. E depois disso, justifique o conteúdo centrado. E, claro, texto, maiúsculas e, em seguida, SW, negrito. E claro, uma vez que usamos os dados como alvo para apontar na minha barra de navegação, precisamos nomeá-lo como antes. Então, minha barra de navegação, e isso é na verdade para a divisão, isso é divisão de demanda. Dentro desta divisão, precisamos criar a primeira coluna e será uma coluna Dan, e, claro, um grupo também. Então este é um grupo de coluna 10. E é claro que precisamos criar a lista não ordenada. E dentro da nossa lista não ordenada terá navbar, nav e algum preenchimento ou margem em todos os lados. Então, isso é, nós podemos criar nosso primeiro item de lista. E como de costume, a classe será item nav. Já que estamos trabalhando com a rede, o link não vai apontar para nada por enquanto. E, claro, a identificação. Descobriremos isso mais tarde. Mas, por agora, para ser a classe ativa. E as aulas serão link nav, uma caixa talvez para mais tarde e m2. Então acho que estamos bem por enquanto. Então vamos em frente e verificar. Se eu me atualizar, não vimos nada porque não tentamos. A página inicial. Então, esta é a nossa casa. E como podem ver, temos a nossa casa por enquanto. Então este é o primeiro item da lista. Vamos em frente e criar os outros. Então aqui dentro, deixe-me copiar isso algumas vezes. 1, 2, 3, 4 e 5. Agora pensando em fazer isso como uma marca e, em seguida, este produto. E é claro que precisamos de uma página para o, sobre nós. E então isso é sobre, e isso é Fale Conosco. Então este é basicamente quatro. E o romance, a primeira parte da barra de navegação, se eu voltar, deixa-me mudar para a categoria, é melhor. E se eu voltar, atualizar, como podemos ver, temos a categoria de marca em casa sobre contato e todos concordamos que precisamos ajustá-los, talvez mudar as cores. E é claro que precisamos adicionar algumas coisas no final deste nabla. Talvez um simples login e botão de inscrição ele irá verificá-los mais tarde, mas por agora é isso. Então, no próximo vídeo, vamos criar nosso arquivo CSS para o nosso cabeçalho. E só algumas coisas aqui. E, claro, continuar, mas acho que o nosso cabeçalho, a inscrição, botões de inscrição. E nós vamos realmente criar este sinal como um modelo. E vamos ver como vai ser construído. E o próximo vídeo. Então, este é o fim para este vídeo. Aqui. O próximo. 4. Navbar 1: Tudo bem, então agora que terminamos com nossa primeira parte da barra de matemática, podemos começar com uma partida dos animais. E uma maneira de fazer isso é criar um estilo ou um arquivo CSS. E neste arquivo CSS, vamos vinculá-lo ao nosso cabeçalho. E, claro, podemos chamar os itens por ID ou pelo nome da classe, ou mesmo pela etiqueta. E podemos alterar ou modificar qualquer coisa que não estávamos, como cor, tamanho e assim por diante. Então, primeiro de tudo, precisamos criar uma pasta pública. E dentro desta pasta, vamos criar uma pasta CSS. E, em seguida, crie o arquivo CSS. E eu dei o nome de style.css. Pode dar o nome que quiser. Mas você deve prestar atenção que ele deve terminar com dot css, indicando que este é o arquivo SCSS. Então este é o meu arquivo por enquanto. E é claro que precisamos ligá-lo ao nosso cabeçalho. Então volte aqui. E como podem ver, adicionei esta linha de código. E é simplesmente dizer que queremos vincular esta herança EJS a um arquivo chamado style.css é uma pasta CSS. E, claro, para voltar, não se esqueça que estamos agora em parciais. Então precisa voltar aqui e, em seguida, ir para a pasta CSS, style.css, e deve funcionar muito bem. Então agora para ter certeza de que podemos simplesmente ir, e digamos que eu preciso do corpo com a cor de fundo de vermelho. Então, agora, se eu voltar e atualizar, podemos ver que temos o fundo vermelho como queríamos. Então isso indica que nosso arquivo CSS funciona muito bem. Então, a primeira coisa que vamos modificar a família de fontes de todo o corpo. Então, família da fonte. E, claro, vamos torná-lo san-serif e isso deve ser importante, então nós simplesmente adicionamos S como importante. Agora volte fresco e agora estamos bem. Então vamos começar com elementos de estilo p da nossa barra de navegação. E esses elementos estão dentro do cabeçalho. Então eu crio esses comentários para indicar que este é um cabeçalho. Então, e adulto. E, claro, se precisarmos chamar os elementos por ID ou pelo nome da classe. E vamos voltar ao cabeçalho. Role para baixo. E como podemos ver, temos essa classe navbar, nav e nav item. Então vamos usar esses dois para alterar e modificar o banner desses itens. E, claro, vamos voltar e começar com o primeiro. Então Navbar, Nav. E este será um ator. Então, sempre que esta classe está ativa, o a dentro da barra de navegação deve ser de cor 31. 31, 8, f ser cinco. Mas esta é uma, basicamente esta é a corrente que queremos usar por enquanto. E digamos que sempre que passarmos o mouse sobre algo, precisamos que a cor seja também essa. Então, precisamos mudar o item nav sempre que temos o elemento pairar sobre. E a cor deve ser a mesma hashtag, 31, 8, f, v5. E agora vamos voltar a refrescar. E sempre que eu passar o mouse sobre esse elemento, você pode ver que ele muda para o que queremos. Agora, se reduzirmos o tamanho disso, como podemos ver, ele desmorona. No entanto, deixe-me torná-lo maior. Então, temos a categoria de marca da casa e contato. No entanto, se o tornarmos menor, ele colapsa e não há nada que possamos pressionar para visualizar esses itens. Então vamos construí-lo e, claro, mudar o estilo desses itens para torná-los mais bonitos. Então a primeira coisa que precisamos fazer é criar nossas divisões aqui. Então deixei um espaço vazio para criá-los. E agora, então a primeira coisa que precisamos para criar uma nova divisão de classe, luz de fundo e linha anêmica um. Copie cole mais duas vezes. E esta é a linha 2, linha 3. Agora vamos voltar ao nosso style.css e vamos adicionar alguns elementos de estilo aqui. Por exemplo, podemos adicionar o, as três linhas no mesmo. Então, linha um e essa linha dois. E, claro, essa linha 3. Vamos abrir as chaves, então darei uma largura de 23 pixels. Você pode mudá-lo e talvez tentar sozinho. Mas, por enquanto, eu dou o mesmo. A largura de 23 pixels, a altura para ser talvez, vamos fazer três. Acho que é para ser bom. E, em seguida, a margem de cinco pixels. E, claro, precisamos adicionar uma transição. Assim, a transição deve ser antiga, um 0,4 segundos. E veremos o porquê daqui a pouco. Mas, por enquanto, podemos chamar a mudança. E isso será, como dissemos, a Transformar Girar menos 45 graus. Então vou simplesmente escrevê-lo e depois explicá-lo. Então, isso é tarde. De menos cinco pixels e seis pixels. E, claro, para a linha 2. Esta será a nossa capacidade, 0. E então a última será a mudança. Essa linha 3 e transforme. Gire 45 graus e traduza. Menos cinco pixels, menos seis pixels. Então é basicamente isso. E se você enfrentar algumas dificuldades escrevendo esta linha de código, o CSS, você sempre pode verificar de volta o curso de valor antigo e no qual eu expliquei HTML e CSS. E temos uma explicação muito detalhada sobre alguns tópicos muito importantes. E, por enquanto, estas são as linhas. Vamos em frente e continuar então. Volte para eles. Então, depois de mudar as linhas, precisamos do botão de navegação. E sempre que nos concentrarmos nisso, vamos mudar o raio, o raio da fronteira para não ser nenhum. E isto é importante. Claro, e vamos dar um ponto-e-vírgula aqui. Agora, para o item do menu, eu simplesmente nomeando, nomeá-los depois. Então este item de menu, Vamos mudar o tamanho. Assim, o tamanho será de 16 pixels. E então o espaçamento de letras e dar-lhe um pixel e a cor e torná-lo talvez apenas entre o branco e cinza, então o peso da fonte será mais leve. E, finalmente, a transição será toda n, ou talvez a cor e 0,5 segundos. Então é isso para o estilo da barra de navegação. Então vamos mudar o nome deles. Então, dentro do cabeçalho, temos aqui a criança navbar, a luz de fundo 123. E, claro, precisamos adicionar o item de menu a todos esses. Então item de menu. E sempre que você quiser adicionar a mesma coisa para mais de um item, você pode simplesmente pressionar e, em seguida, escolher todos os lugares que você deseja escrever e, em seguida, escrever item de menu. E agora estamos bem. Então temos nossos itens de menu, itens navegação, barra de navegação, tudo deve funcionar bem. Vamos em frente e correr. Como podemos ver, temos nossa categoria de marca doméstica e contato. E sempre que passamos o mouse sobre eles, você pode ver que ele muda a cor. Agora, o que fizemos realmente transições é criar isso. A primeira coisa é criar este. E sempre que pressionamos, temos isto aqui. Então, o que fizemos? Cancele, volte ao estilo. E como podemos ver, fizemos a transição em 4,4 segundos para os leões. E, claro, traduzimos menos 5 menos 45 graus e menos cinco pixels para seis pixels para a linha 1, menos cinco pixels, e menos seis pixels para a linha 3 e linha 2, teremos um Bassett é 0. E, claro, todos os itens de menu têm o mesmo tamanho de fonte, espaçamento entre letras, cor, peso da fonte e transição. Então isso é basicamente para os estilos. Agora, se voltarmos, veremos mais uma vez. Se pressionarmos aqui, temos todos os nossos elementos aqui. Torná-lo maior. Nós os pegamos bem aqui. Então, talvez no próximo vídeo, possamos adicionar esses botões de inscrição e login. E é claro que podemos reduzir o tamanho aqui. Acho que parece. Talvez eu possa mover isto um pouco para a direita e torná-lo maior. E sim, estamos bem por enquanto. Então, este é o fim para este vídeo. O próximo vídeo vamos finalizar a nossa barra de navegação, em seguida, começar com o nosso rodapé e vê-lo em seguida. 5. Navbar 2: Olá e bem-vindo de volta. Neste vídeo, vamos continuar construindo nossa barra de navegação e depois vamos para a foto. Então, antes de tudo, precisamos criar dois botões. O primeiro que diremos inscrever-se, e o segundo seria fazer login se você já tiver uma conta. Então, com isso dito, vamos continuar. Construímos nossa lista desordenada. Temos esta divisão, e dentro deste colapso, podemos adicionar a nossa nova divisão. E esta divisão só aparecerá se a tela for lodo. Então, inscreva-se só aparecerá se tivermos uma tela grande. Então, para fazer isso, vamos usar a coluna grande dois. E a lista desordenada será de classes navbar. E para indicar que queremos que isto adicione, sinto muito, navbar-nav no carro flutuante. E assim flutua. E estamos bem. Podemos começar com a criação do item de navegação. E é claro que precisamos criar o HRF. As classes serão link nav. Em seguida, temos a luz de texto e, claro, talvez adicionar a classe de inscrição para mais tarde. Então, isso é um cadastro. Se eu voltar e atualizar, vamos receber este botão de inscrição que aparece aqui. Agora, como dissemos, queremos que essa inscrição apareça somente quando estivermos usando uma tela grande. Então, se eu talvez torná-lo menor, podemos ver que a inscrição aparece aqui. Então, estamos bem por enquanto. E, claro, precisamos adicionar o login, mas estou pensando em fazer a inscrição desaparecer. No entanto, se tivermos uma pequena tela como esta, vamos ter este e o logotipo. E então aqui temos seno. E para fazer isso, podemos simplesmente escrever nosso código abaixo de nossa divisão. Então, onde fica esta divisão? É isso, este é o colapso. E esta divisão, e então criar uma nova divisão. E esta divisão terá várias aulas. Nós já usamos dez de riqueza aqui. Então vamos usar os dois restantes. E, claro, eu dou retrata px 1, coluna 2. E se a tela for grande, talvez uma seja suficiente. Então agora vamos criar nossa lista. Como de costume, a classe será barra de navegação e, em seguida, o item de lista do item de navegação classe. E é claro que precisamos criar nosso elemento. aponte para nada. Por agora. Esta é de comprimento, como de costume. E dentro deste link de navegação. Podemos criar o nosso espaço. E neste caso, o que eu estou pensando é criar um modelo e isso vai aparecer. Então, por exemplo, suponha que eu tenha este botão aqui. Sempre que eu pressionar, pressione no sine n, algo vai aparecer aqui para preencher o nome de usuário e senha. Então vamos em frente e construí-lo agora dentro do link aqui. Então, temos barra branca suficiente, item de navegação e link de navegação. Então vamos pular isso por enquanto. Vamos criar nosso ícone mais tarde. Mas, por enquanto, vamos pegar o modelo real. Por isso, será uma ligação para nada por enquanto. E será marca navbar. Como de costume dados ser luta. E isso seria modelar saga apenas para túnel o alvo de dados do modelo BAS. Eu vou nomeá-lo sine n. Então eu vou simplesmente escrever hashtag sign-in. Dentro desta camada, eu vou criar um botão, a, classe B, o fim, o tipo será botão. E o estilo que estou pensando em ter a cor de fundo como de costume. Passo 3 um, 8, f, v5. Então, agora estamos bem. Se eu apenas digitar seu sinal e vamos voltar, atualizar, indo para obter este botão como sinal aqui. Agora o que queremos fazer é criar este modelo. Então, sempre que pressionarmos isso vai aparecer, aqui fora. E antes disso, vamos adicionar esta pequena coisa aqui. Então estamos sempre pensando em adicionar um carrinho de compras. E dentro deste link de navegação, então talvez apenas adicione o ícone I de Font Awesome. E as aulas serão FAS como um carrinho de compras e torná-lo duas vezes maior. Então eu tenho um dois x. E claro que precisamos de alguns estilos, então eu estou pensando em torná-lo branco, tão colorido branco. Então agora estamos bem Refresh, vamos trazer este carrinho de compras aqui. E queremos mostrar o carrinho de compras e a inscrição ao mesmo tempo. Então, sempre que o usuário não está se conectando, vamos mostrar sine n e se inscrever. Talvez tenhamos mostrado este carrinho de compras aqui. Mas descobriremos isso mais tarde. Por enquanto, vamos ter o login de inscrição. E, claro, o botão de sair. Então vamos em frente e criado como, como este na verdade. Então temos aqui o botão de sair. Então vamos simplesmente mudar o sinal aqui mesmo. E, claro, vamos verificar cada marca navbar eixo, modal, classe tipo seno n. Tudo parece bom. No entanto, precisamos realmente remover os itens, este e este. Então acho que estamos bem agora. Temos a barra de navegação da classe. E precisamos adicionar uma ação. Então desclique, vou fazer alguma coisa, mas por enquanto, vou deixá-lo vazio. E nós vamos enfrentá-lo na verdade enquanto montamos o backend. Por enquanto, é isso. Então, se eu voltar e atualizar, vou obter o login, sair, inscrever-se e proteger. Então agora, antes de seguir em frente, vamos apenas comentar isso. Então estes dois e nós vamos estar tendo se inscrever e assinar n categoria de marca casa. E tudo parece bom por enquanto. Então, isso é basicamente para a inscrição e login. E agora vamos criar o modelo real aqui. Então, para fazer isso, vamos em frente e voltar para o nosso cabeçalho. Dentro deste cabeçalho, Vamos sair deste cabeçalho navbar, criar uma nova divisão. E esta divisão será um modelo de classe, e será desaparecer também o id, como dissemos cada ponto para fora neste, então vamos copiá-lo. Então id igual ao seno n dentro desta divisão, vamos criar a forma. A ação será decidida mais tarde. Por enquanto, vou deixá-lo vazio. E, claro, precisamos adicionar método, mas por enquanto, podemos ir sem ele. Assim, a divisão desta classe será diálogo modal. E vamos criar várias divisões dentro deste diálogo modal. Então o primeiro será mais do que conteúdo. Dentro deste conteúdo vamos ter o cabeçalho e título, em seguida, corpo. Então, a primeira coisa que vamos criar um modelo desse conteúdo. E dentro disso, vamos ter o cabeçalho modal. Então temos o bar H. Este será o título modal. E então aqui vamos ter assinado. Por agora. Se eu voltar e atualizar presente, assim, o seno n iria aparecer aqui. Então o que vamos fazer é adicionar um rótulo, em seguida, uma entrada, em seguida, um rótulo para a entrada de senha, e o botão de login. Volte para trás. E, claro, depois de criar este H4, talvez crie o botão para descartar. Por exemplo. Aqui vamos ter o corpo modal e eu estou pensando em criar um grupo de formulários. E, claro, vamos ter alguma proibição. A primeira etiqueta será para um e-mail. A classe será rotulada. E então temos o endereço de e-mail. E, claro, depois de obter a etiqueta me para ter uma entrada do tipo e-mail. E as classes serão formadas controle. Então temos MY para ser dois e isso é uma entrada. E o nome, vamos usar esse nome mais tarde, mas por agora vamos nomeá-lo nome de usuário. Então este é o primeiro. Vou em frente e atualizar a imprensa. Temos um endereço de e-mail e a entrada. Então vamos voltar e vamos realmente copiar isso para não repetir muitas vezes. Temos o endereço de e-mail, depois temos a senha. Então vamos simplesmente mudar isso para senha. E é claro que precisamos mudar isso também. Então, tipo de senha, também senha. E, finalmente, o nome também será a senha. Então é isso para o endereço de e-mail e senha. Verifique-os. Temos a senha de e-mail, e é claro que precisamos adicionar o botão de login. Então, vamos voltar para aqui. E dentro da nossa divisão. Este é para o corpo. Nós, nós terminamos com o corpo para criar o rodapé. Então isso será modelado. E vamos justificar o centro de conteúdo. Dentro desta foto, eu vou criar o botão e este será do tipo enviar e a classe será btn. E estou pensando na mesma cor de fundo que antes. Sinto muito, cor de fundo. E seria 318, F, B5. Então, 31. Isso é b5. Vamos voltar a refrescar. Nós vamos pegar este pequeno botão, mas nós esquecemos de adicionar aqui seno n. Voltar, atualizar seno n. E como você pode ver, nós temos este botão de entrada bem aqui. Então, agora podemos inserir nosso endereço de e-mail e senha, em seguida, clicar em entrar. E se estivermos conectados, se tivermos uma conta neste site, isso nos levará de acordo. No entanto, se não temos, talvez vamos adicionar algo como um alerta ou algo assim para simplesmente glorificar que este endereço de e-mail ou senha ou não, correto. Então isso é basicamente para o front-end do cabeçalho. Acho que isso talvez seja claro o suficiente para entrar em e-mail, endereço e senha. Talvez mais tarde possamos adicionar um login com o Google, onde o usuário pode optar por entrar com um já criar a conta do Google. E você também pode fazer isso com o Facebook. Mas para simplificar por enquanto, usaremos o botão de login. E talvez mais tarde possamos adicionar outro botão aqui e talvez dizer entrar com o Google. Então é isso para o cabeçalho. E no próximo vídeo vamos criar nosso rodapé. Então, vejo você então. 6. Rodapé: Olá e bem-vindo de volta. Neste vídeo, vamos criar nosso rodapé. Então vamos começar com a criação do congelado. Temos o EJS fotossintetizado. No entanto, antes de emocionante, Vamos copiar todos estes e, em seguida, adicioná-los ao nosso rodapé. Então este é o fim dos nossos quatro lá. Então temos os scripts e o corpo do que o HTML. Então, por enquanto, vamos criar o rodapé. As classes serão escuras como o cabeçalho, o X5 e vazio cinco. Então agora podemos criar nosso fluido de contêiner e, em seguida, criar a linha. E o texto será leve. E, claro, precisamos de algum preenchimento no eixo y, então talvez quatro. E agora depois de criar a linha, precisamos criar a cor. Então, algas de canhão para e para pequenas, eu faço seis. Agora, talvez aos cinco anos. Então este é o Sobre Nós. E o parágrafo será um líder de classe. E vamos adicionar um pouco de Lauren, Lauren, eu acho que é bom. Então, agora, se você voltar e atualizar, nada acontecerá, já que não adicionamos a foto à nossa página inicial. Então, aqui, vamos copiar isso e adicioná-lo aqui. Mas antes disso, vamos adicionar algumas linhas. Então talvez 20 seja bom. E agora, em vez de cabeçalho, precisamos adicionar o rodapé. Então, agora vamos voltar e atualizar. E como podemos ver, temos aqui estes Sobre Nós e algum parágrafo Lorem Ipsum. No entanto, se voltarmos, vamos ver o que está acontecendo. Então aqui temos o, cada cinco imagens sobre nós. E então nós temos a classe talvez mudou este chumbo para pequeno, uma vez que eles são iguais em tamanho 10. Vamos checá-los agora. Se eu voltar e ficar melhor. Então temos o “Sobre Nós”. Agora vamos criar mais alguns. Obrigado. Então eu estava pensando em dividir a página em quatro categorias. O primeiro é sobre nós do que vamos pedir, talvez adicione tudo isso aqui. E então nós vamos ter o e-mail para nós ou precisamos de ajuda ou algo assim, então eles se conectaram. Então este é o plano. Vamos em frente aqui. Então temos a coluna, então vamos criar outra. Então, depois de terminar com a primeira coluna, para usá-la para dois agora, e claro para pequenos, eu estava pensando o mesmo que antes. Então, coluna pequena seis. Dentro desta coluna, vamos criar a visita. E depois temos a lista desordenada. Vamos deixá-lo sem estilo para obter os pontos de bala. E é claro que podemos criar nossos itens de lista. O elemento será classe, rodapé, link. E, claro, precisa adicionar casa. E, na verdade, vamos copiar isso algumas vezes. Este ponto da lista 123. Então temos em casa talvez marcas e produtos. Então, se eu voltar e atualizar nada para obter visitantes casa marcas e produtos. E sempre que estamos indo para, uh, talvez, talvez, o usuário pressione em marcas, ele vai levá-lo automaticamente fazer a categoria de marca aqui. Então é isso. E, na verdade, vamos mudar esses produtos em categorias, já que já os nomeamos antes. Então isso é basicamente para a segunda divisão. Vamos começar com o terceiro. E aqui vamos perguntar ao usuário se ele precisa de ajuda. Então, coluna 2 e coluna pequena seis. E, em seguida, vai criar um H5 e classe será Pb três. E aqui vamos perguntar, se precisar de ajuda. Este é o caso. Temos uma lista desordenada diz antes da classe será lista eo item da lista será um H ref e talvez adicionar o contato aqui. Então classe seria rodapé, link, Fale Conosco. E, claro, podemos copiar este item da lista para talvez adicionar nosso endereço de e-mail. Então aqui vamos ter nosso endereço de e-mail, talvez isso em e-commerce em example.com. E, claro, podemos realmente adicionar isso agora. Então, sempre que queremos enviar um e-mail ou fazer o usuário enviar um e-mail, podemos abrir a caixa de correio usando o e-mail para e, em seguida, enviado para e-commerce e exemplo.com. Então, agora, se você voltar e atualizar, vamos ter o Fale Conosco e e-commerce e exemplo atrás. E este entre em contato conosco que levará o usuário para uma página totalmente nova onde temos uma mensagem que o usuário pode enviar. E este e-commerce vai realmente para cima na caixa de correio do usuário e fazê-lo realmente enviar um e-mail para nós. Então esta é basicamente a ideia de precisar de ajuda. Temos duas opções. Entre em contato conosco através do site ou vá via e-mail. Finalmente, temos o ficar conectado, e isso será usado para fazer com que o usuário digite seu e-mail se ele quiser receber ofertas exclusivas ou novas atualizações. Então vamos voltar ao nosso código. E aqui dentro, crie uma nova divisão. As aulas serão coluna grande ou coluna pequena, 685, talvez. Sim. E a turma será V3. Então temos a manter-se conectada. E então temos um parágrafo. O parágrafo será pequeno. E talvez algo como inserir seu endereço de e-mail para receber ofertas exclusivas e novas atualizações. Então é isso. Vamos criar o formulário que o usuário deve enviar. A ação estará vazia por enquanto. E é claro que precisamos adicionar alguma classe, talvez apenas os três margin-bottom por enquanto. E então precisamos criar uma divisão de classe. Grupo de entrada. Dentro desta entrada terá a entrada macho ea classe será formado controle. E, claro, o nome seria e-mail. Isso é para espaço reservado posterior, seria o endereço de e-mail. Então eu acho que isso é bom. Talvez só adicionar o botão para enviar. Então isso seria input, group append, anexá-lo à entrada acima dele. E nós temos o botão e o tipo será enviado. Então temos as aulas. Temos várias aulas. Eu estava pensando em adicionar um fundo de perigo. Então demos perigo. E então temos o texto, texto branco, maiúsculas. E, claro, talvez deixe o peso da fonte em negrito. Sim, então é isso basicamente, se eu ir em frente e atualizar, vamos receber digite seu endereço de e-mail para receber ofertas exclusivas e novas atualizações. Temos o endereço de e-mail e este botão. No entanto, esquecemos de acrescentar algo, talvez em vê-lo aqui. Então, se eu voltar e atualizar, vou obter este endereço de e-mail e o CU anexado a ele. Agora, se vemos agora, temos uma pequena diferença. Talvez. Vamos ajustar isto. Então, em vez de, vamos contá-los. Então temos aqui 4268. E nós também temos aqui para sim, eu acho que estamos bem por agora. No entanto, este endereço de email ponto b2 longo. E estar na mesma linha, talvez no espaço de dividendos. Vamos verificar. Sim, é porque este endereço de e-mail é muito longo. Podemos torná-lo diferente disso, então vamos torná-lo eco em example.com, atualizar. E agora estamos bem. Você tem o e-mail Fale Conosco. E se ele quiser entrar em seu próprio ele e atlas para receber alphas exclusivas e novas atualizações que ele pode a partir daqui. E clique em Enviar, até você. E então isso será usado mais tarde em nosso banco de dados onde podemos manter esses e-mails e, em seguida, enviar ofertas exclusivas para esses usuários. Então é isso para o rodapé. Acabamos de criar nosso cabeçalho e rodapé. E, na verdade, eu acredito que eles parecem bonitos e nós temos o nosso pairado aqui. E é claro que podemos ajustar esses dois botões, mas por enquanto, vamos deixá-lo como está. E os próximos vídeos vamos começar com a criação da página sobre nós e entre em contato conosco. E então passaremos para nossas últimas três páginas, que são a marca e a categoria da casa. Dito isto, este é o fim deste vídeo. Vejo você na próxima. 7. Sobre e contato: Olá e bem-vindo de volta. Neste vídeo, vamos criar nossa página Sobre Nós. E vamos começar a criar esta página dentro da página inicial. Então, depois de terminá-lo, podemos criar nosso próprio arquivo EJS e mover todo o código lá. Mas, por enquanto, vamos começar com a criação aqui mesmo. Então a primeira coisa que precisamos fazer é criar a seção com algumas classes. A primeira classe seria B5 e eu daria um M4 talvez. Sim. E precisamos criar nosso fluido de contêiner. Então podemos criar nossa divisão. E esta divisão será o cabeçalho, o About Us, o título. E nós somos criados, talvez um centro de texto. E depois cada um. Estou pensando em ter uma cor. Então eu uso este azulejo. Será atraso de cor. E então podemos criar Sobre Nós. Então temos um parágrafo. Vou adicionar um pouco de preenchimento no eixo y e, em seguida, alguns aprendem. Graças a Deus. E se voltarmos e nos atualizarmos, teremos isso sobre nós do que temos algumas falas. Depois disso, podemos criar talvez algo visual. E eu estava pensando em talvez escrever para nós e depois listar algumas de nossas características ou o que somos especiais? E talvez depois de criar esta divisão, possamos criar uma nova divisão. E este será o texto rho branco e centro fiscal. Então vamos ter a coluna na página antiga e eu sou branco cair dentro disso. Vou perguntar porquê. E, claro, precisamos adicionar algumas classes aqui, então exiba para elas antes. E a cor também será preta. Então isso é basicamente para os fios e agora podemos talvez adicionar alguns sublinhados aqui. Então, o persa. E isso vai levar uma classe de sublinhado e talvez março e botão de folha após o sublinhado. Então, se eu voltar e como você pode ver, nós temos isso, como dissemos. E aqui podemos adicionar as características ou nossas especialidades. Então eu estava pensando em adicionar mais rápido, muito melhores preços e alta qualidade, e então também adicionar alguns ícones para indicar o que estamos dizendo. Então, depois de terminar desta divisão, que está aqui, podemos ir em frente e criar uma nova linha com a MINHA vida. E cada coluna seria MD4. E, claro, o centro fiscal. Então agora podemos criar nosso primeiro ícone. E este ícone será FASFA, envio rápido, para indicar a entrega rápida e torná-lo cinco sacos. E o texto será perigoso. Então agora estou antes, e agora estamos bem. Vamos adicionar entrega rápida aqui. E se eu voltar, atualize agora para obter este ícone e, em seguida, entrega rápida. Se quisermos adicionar algo aqui, podemos adicionar um parágrafo. Então, talvez em torno de cinco a sete dias. Vamos voltar e refrescar-nos. E como podemos ver, temos entrega rápida, geralmente em torno de cinco a sete dias. Ainda temos dois. Então isso é entrega rápida. Não temos os melhores preços. Vamos em frente e implementado. Podemos simplesmente copiar esta coluna, mais dois tipos, 1 e 2. Em vez de entrega rápida, podemos escrever os melhores preços. E aqui podemos adicionar a qualidade superior. Agora, eu já procurei os ícones, então eu sei que em vez de FAS, ter um envio, Vamos remover isso. E eu pensei sobre os melhores preços fazer usar a mão-segurando USD. Então, como ajuda e segurando USD e detecta será o inter, também a brincadeira que é vermelho. E aqui uma flecha e, em seguida, círculo para cima. Então é isso. Mas em vez de FAS, vamos usar FHIR. Então estas são aulas simples e Font de 4 pés, Incrível, e não temos que nos preocupar com elas. Simplesmente não podemos copiá-los de lá e implementá-los. Agora, vamos em frente e atualizar. Temos os melhores preços, qualidade superior e entrega rápida. Então vamos mudar esses parágrafos. Em vez de geralmente cerca de cinco a sete dias. Talvez. Não sei, talvez Lauren, oito anos. E então temos aqui de alta qualidade. E também aprendeu. Então vá em frente e atualize, considere nosso Y AS rápido em um preço muito melhor e qualidade. E nós temos uma pequena definição aqui. Oh, introdução aos nossos produtos ou empresa. Então isso é basicamente para a página Sobre Nós. Acho que parece agradável e simples. E é claro que podemos ir em frente e criar nossa página Fale Conosco. Não. Então, antes disso, podemos simplesmente remover tudo isso e adicioná-los na ciência, nosso sobre nós. Tudo bem. Então vamos em frente e criar aqui um novo arquivo chamado sobre EJS. E isso conterá toda essa seção. Então vamos copiá-lo e colá-lo aqui, mas certifique-se de incluir o cabeçalho e o rodapé. Então eu vou copiar este aqui incluído. E então nós vamos ter o rodapé também. Então, por favor, aqui. E agora estamos bem. Voltámos à nossa primeira posição. Temos um “olá “de casa. E estas linhas aqui. Então isso é basicamente para o Sobre Nós. E sempre que quisermos implementar ou você trabalhar com o back-end, podemos ajustar isso. Assim que pressionarmos isso, leve-nos para o, sobre o JS. Então vamos deixar isso para mais tarde. Mas, por enquanto, vamos em frente e criar uma página de contato. Então vamos voltar aqui. E, claro, precisamos, ou também precisamos criar o contato com o EJS. Mas como eu fiz antes, eu vou primeiro trabalhar com a casa para o EJS e então eu movê-lo de volta para outro arquivo. Então, por enquanto, vamos criar aqui uma nova divisão, e este será o contêiner. E eu vou adicionar algumas classes também viu será formulário de contato e BJ escuro. E eu estava pensando em adicionar a classe de imagem de contato. E essas classes vamos usar discussões no arquivo CSS Ionic, mas por agora eu vou adicioná-los aqui. Então a aula será um bebê, um slide fiscal do Rocket Chat. E então temos um 5 x pD D3. Então é isso, basicamente, se eu voltar e atualizar, indo para obter isso e nós temos esta mensagem, eu poderia. E vamos colocá-lo no meio. Então vamos ter uma caixa aqui, que dirá para digitar seu endereço de e-mail e sua mensagem. E se você for designado, então talvez possamos alterá-lo para inserir a mensagem apenas porque já sabemos o endereço de e-mail. Então esta é a ideia geral. Então vamos em frente e implementá-lo agora. Agora para dentro. Então, talvez crie um formulário. E temos o método e a ação. Vamos deixar isso para mais tarde. Dentro deste formulário, temos os três anos de idade onde vamos salvar. Você adoraria receber seu feedback. E alquilar o slide de texto da classe. Volte e atualize. E como podemos ver, cortamos isso. Gostaríamos muito de ouvir o seu feedback. Agora, vamos iniciá-los e colá-los no meio daqui a pouco. Mas, por enquanto, vamos simplesmente adicioná-los aqui. Então este é o h3 que podemos adicionar. Nossa divisão deve ser uma fila. Dentro desta fileira vamos ter o sexo de vidro médio, a coluna, desculpe, e então temos o grupo de formulários como de costume. E você quer ter a entrada do texto do tipo. E talvez o nome seja X. E então temos o controle do formulário de classe, e então o titular do lugar, e talvez o seu nome. E agora adicionamos o valor, mas por enquanto e deixamos até. Então isso é basicamente para a entrada. Então vamos copiar isso mais duas vezes. Para o telefone de e-mail e, em seguida, a mensagem, a mensagem real. Então vamos ver. Temos aqui o nosso e-mail e, em seguida, temos texto. E-mail. O tipo deve ser e-mail. Então temos o telefone. Então, o texto do texto está bem. Nós simplesmente precisamos mudar isso para o telefone e, em seguida, para o seu telefone. E vamos ver o que construímos e agora atualizamos, temos essas quatro entradas e elas estão todas abaixo umas das outras. Então nós vamos corrigi-los em nosso arquivo CSS. Por agora. Vamos apenas criá-los. Vamos apagar isto. E agora que temos o nosso nome, e-mail, número de telefone. Novamente, adicione a mensagem de envio. Então vamos criá-lo aqui. E na verdade, seria o mesmo texto do tipo de entrada. Talvez aqui seja submeter. E em vez de etiquetas. E então nós temos aqui, em vez do nome, eu sou o nome do texto, homem de negócios, submeter. E então vamos adicionar algo sobre Clegg. Espaço reservado. Talvez apenas excluir o espaço reservado e a classe será btn conjunto de contato de controle de formulário. Então contato BTN, o valor seria enviar mensagem. Então enviamos uma mensagem. E agora estamos bem. Se eu voltar e atualizar, temos este botão aqui que diz Enviar mensagem. E se quisermos ajustá-lo, podemos simplesmente adicionar o btn aqui, atualizar. E desapareceu, já que não usamos o slide Texto. Então, se eu usar texto, talvez perigo. Vamos ver, Refresh. Nós temos este botão aqui, mas por enquanto eu vou deixá-lo como antes, da maneira original, e então eu vou ajustá-lo usando estilo CSS. Então este é um basicamente para a mensagem de envio e estes estão na mesma coluna. E agora vamos criar outra coluna onde vamos adicionar nossa mensagem real. Então, coluna md 6. E esta coluna vamos criar um grupo de formulários como de costume. E então vamos criar a área de texto. O nome deve ser texto. Mensagem. A aula será para o controle. E acho que estamos bem. Temos tudo o que precisamos. Talvez estilo, a largura para ser 100 por cento, ea altura para ser também talvez 150 pixels é ok. E agora estamos bem. Temos a nossa área de texto. Finalmente, precisamos adicionar o botão enviar mensagem neste caso. Então vamos em frente e criá-lo aqui mesmo. Ou talvez estejamos bem por enquanto. Na verdade, eu estava pensando em mudar isso para aqui ou vamos ver. Mas volte e se refresque. Temos a nossa área de texto e temos a nossa mensagem. Acho que fica melhor assim. Então esta é a ideia geral. E no próximo vídeo vamos estilizar estes, este formulário e fazer com que pareça melhor simplesmente colocando estes no meio, tendo algum preenchimento e margem aqui e ali. E mudar o estilo deste botão de envio de mensagem. Dito isso, este é o fim deste vídeo. Vejo você na próxima. 8. Marca: Tudo bem, então agora terminamos com a nossa casa para cerca de e entre em contato conosco e betas, podemos continuar com a página da marca. Então vamos voltar para localhost 3000, e esta é a página que temos. Vamos apenas movê-los para a página de feedback ou para a página de contato. Então aqui eu vou criar um novo arquivo e nomeá-lo, entrar em contato com o EJS e, em seguida, ir para Início, copiar tudo isso e simplesmente colado dentro do contato. Não se esqueça de adicionar o cabeçalho e o rodapé a cada arquivo EJS criado. Então aqui temos cabeçalho, copie isso e adicione uma lágrima e rodapé. Então, agora eu estou configurado aqui, nós temos estava lá e agora nós estamos bem. Se eu voltar, salve, vamos voltar aqui e refrescar-me. Esta é a página inicial até agora. E nós já criamos o sobre e contatamos nossos discursos e podemos usá-los sempre que quisermos. Assim, por exemplo, se o usuário pressionar sobre sobre, ele deve automaticamente levá-lo para a página sobre em vez desta hashtag. Agora, vamos entrar na página da marca. E neste caso eu vou construí-lo como de costume e a página inicial. Então, sempre que fizemos, podemos simplesmente removê-lo e colocá-lo na marca que arquivo EJS. Então, por enquanto, vamos começar com a criação da divisão. E será um texto centrado e o fundo, Vou dar-lhe o nome marcas de fundo vendidos, usá-lo no CSS mais tarde. Mas, por enquanto, é isso. O H1 será talvez marcas. E eu estou pensando em ter um pouco de estofamento. Anos de aula serão BT cinco. E, claro, vai escrever um parágrafo com o líder da classe Pb. Eu também, e estou pensando, escolhi seu produto da marca que você gosta. Então esta é uma pequena introdução. Se eu voltar e atualizar, teremos marcas e escolher seu produto da marca que você gosta. E, claro, podemos querer adicionar um plano de fundo aqui pode ser uma imagem ou uma cor de fundo, e vamos descobrir isso mais tarde. Mas, por enquanto, esta é a ideia principal. E dentro disso e pensando em adicionar uma entrada de pesquisa para que o usuário possa procurar a sonda ou a marca que ele quer. E então, uh, talvez o botão aqui. Então vamos em frente e fazê-lo. Então, ele estará dentro do formulário e o formulário realmente vazio por enquanto. E a divisão será uma margem de grupo de entrada, na parte inferior três. E, em seguida, um máximo automático. Acho que isto é bom. E então temos a entrada. Assim, a entrada do texto do tipo, a classe será formada controlada como de costume. E, é claro, precisamos de um suporte de lugar. Então procure por sua marca. E então temos o nome que vamos usar mais tarde. Estou pensando em marca. E então temos talvez adicionar o botão e ele estará na mesma linha da entrada. Então eu vou usar a classe de anexação input-group. E, em seguida, adicione o botão de classe , btn, BTN outline, secundário. E só para torná-lo cinza e depois E5. Claro, o tipo será submetido. E então temos o botão real que é procurar. Então, agora, se voltarmos e apertarmos Atualizar, conhecido por ter o botão Pesquisar, mas parece muito grande. Leva toda a página, então talvez possamos ajustá-la. Temos o botão Pesquisar aqui. Então, em vez disso, sempre que criamos essa entrada, em vez disso esta e esta divisão, podemos criar realmente o estilo que queremos e queremos que a largura máxima seja talvez 35 REM. Vamos verificar. Agora, se voltarmos a atualizar. Sim, acho que é bom. Mas também podemos fazer a altura. Então, neste caso, talvez adicione aqui. Sim, então deletamos essa margem, inferior cinco e ela voltará como podemos ver, temos nossa barra de pesquisa com o botão Pesquisar aqui. Então é isso para a marca. Escolha o seu produto da marca que você gosta e a barra de pesquisa. Agora, vamos passar para as cartas reais, onde teremos as cartas. Então, o usuário tem duas opções. Ou escolha a marca procurando por ela, ou temos aqui algumas marcas listadas e você pode escolher qualquer uma delas. Então vamos voltar e ouvir. Depois de terminar com o formulário e a divisão, podemos começar com a nossa nova divisão, que será linha. E eu sou atos auto. E, claro, dentro desta linha, precisamos criar a coluna, então sexo em coluna e um Max Auto. Também dentro desta linha, eu vou criar outra linha. E veremos por que em um minuto. Mas, por enquanto, vamos levá-lo para a fábrica. Então, coluna seis, ou talvez no meio mais sexy. Então talvez sexo médio e tipo de puxar grande será quatro. E MY para adicionar um pouco de preenchimento em todos os lados. Então P1. Agora temos nossa estrutura e nós dividi-lo realmente hora, talvez nossa página e 2. Duas colunas sempre que temos um meio para telas de tamanho menor e em três colunas. E sempre que temos telas grandes e como sabemos que são dois ou três. Então, a tela é dividida em 12. E aqui estamos usando seis e médio e pequeno. Então, 6 vezes 2. Então, temos duas colunas para telas médias ou menores. E ele terá quatro vezes três, que é 12. Então temos três colunas sempre que temos telas grandes. E veremos isso em um minuto. Mas, por enquanto, vamos criar o nosso cartão. Então nós ouvimos e eu vou dar a ele a marca Deus. Isto é, vamos usar o NCSS. E, claro, vamos criar nosso formulário e teremos uma ação mais tarde. Mas, por enquanto, vamos continuar com isso para o MD. E nós vamos ter uma imagem, vamos escolher uma imagem em um minuto. Mas, por enquanto, vamos ter a imagem do cartão. E, claro, eu vou para o estilo porque eu quero que a imagem tenha uma altura máxima de cinco REM. E agora terminamos com a imagem. Podemos criar o cabeçalho do cartão. Então eu vou criar uma nova divisão na qual eu vou talvez para a classe, que é o nome da marca. Então eu vou ter um parágrafo com uma classe de liderança. E aqui vamos ter o nome da marca. E então vamos voltar aqui. E vamos criar a outra divisão, que levará o botão enviar. E vamos criá-lo usando o centro de texto e algum preenchimento na parte superior. E este botão será do tipo enviar. Então tipos de matemática. E então temos classe btn, btn primária. E então temos talvez explorar. E agora estamos bem. Se eu voltar e apertar a atualização, você receberá a primeira carta. Então temos a imagem aqui, mas ainda não adicionamos a fonte da imagem. Não faça isso. Mais tarde. Temos o nome da marca e explorar. Então pensei em torná-lo simples. E sempre que o usuário é interessante, está interessado na marca. Ele sempre pode pressionar na próxima terça-feira para a marca real com os produtos listados. Uma outra página. Talvez você crie uma página de produto onde o usuário possa ver todos os produtos desta marca específica. E então podemos criar também uma página de produto para o produto específico que o usuário escolhe. Então, isso é basicamente, vamos copiar isso mais algumas vezes. Então talvez tenhamos essa linha e pegamos essa coluna e temos outra linha. Talvez você possa copiar isso. Então vamos ver, termina aqui. Copie isso algumas vezes. E volte, aperte Refresh, e agora estamos bem. Temos o nome da nossa marca, imagens e o botão explorador. E agora vamos em frente e adicionar algumas imagens aqui. Então, sempre que você quiser imagens, você pode ir em frente para pixels.com. E essas imagens são completamente gratuitas para que você possa escolher qualquer imagem que quiser. Talvez eu leve este por enquanto. E você pode pressionar este botão para baixá-lo. E, claro, você pode doar ou tanques no Twitter ou Instagram, o fabricante desta imagem. Vou pular por enquanto. Ir para estrangulamento show na pasta e, em seguida, talvez levá-lo a partir daqui. Apareceu, cortá-lo e, em seguida, colá-lo dentro de uma nova pasta que entramos em Criar, Estou pensando em nomeá-lo imagens e talvez adicionado à vista ou pasta pública. Então vamos ver. Estou pensando em trazer isso aqui, talvez chamado de temperatura. E dentro desta pasta de imagens, vamos criar o real ou talvez colar isso primeiro. E depois vamos voltar. E, claro, podemos sempre levar esta pasta e um conjunto e o público aqui. Tudo bem, então agora dentro do público temos CSS e imagens dentro da pasta pública. Então é isso, basicamente, escolhemos uma imagem. Se quisermos, também podemos escolher este. E agora temos nossas duas imagens. Vamos renomeá-los. E eu estou pensando na imagem um e na imagem dois, e sempre procurar o arquivo ponto. E, claro, vamos ver isso em um minuto, mas você precisa ter certeza de que sempre que você está escrevendo no arquivo fonte aqui, Esta é a nossa imagem. E sempre que estamos escrevendo aqui que queremos a imagem, por exemplo, isto e imagens públicas. Queremos este. Precisamos ter certeza de que escrevemos o arquivo dot, correto, caso contrário a imagem não aparecerá. Então é isso. Podemos agora talvez adicionar as imagens aqui. Vamos adicionar essas duas imagens. Durante isso, eu vou adicioná-lo como imagens ponto-ponto e, em seguida, a imagem real, imagem um que PPG. E agora, se eu voltar para o site de e-commerce, vamos ver se temos a imagem aqui. E, claro, vamos apagar tudo isso porque não precisamos deles por enquanto. Vou copiar os outros. Então mudamos a imagem da primeira, que é esta. Então eu vou apagar tudo isso. E vamos copiar essas duas vezes e mudar a segunda imagem. Então agora estamos bem. Podemos mudar esta imagem 21 mais tempo. Esta é também a Imagem 2. Vamos voltar e atualizar. E como podemos ver, temos nossas imagens. Talvez você possa ajustá-los, mas por enquanto, estamos bem com isso. Temos marca nomeada a imagem e explorar. E esta é a página da marca. Talvez você possa adicionar a cor de fundo aqui. Então vamos verificar se temos antecedentes. E se esperarmos, vamos levar talvez este. Então, agora temos aqui. Vamos mudar o nome. Esta é a marca da imagem de fundo. Não sei se vai ficar bonito, mas vamos tentar. Então nós realmente não adicionamos isso aqui. Precisamos adicioná-lo no arquivo CSS. Então, no próximo vídeo, vamos para o CSS do arquivo de pasta da marca. E, claro, vamos continuar com a categoria e, em seguida, os produtos, os produtos reais. E precisamos também criar a página de administração onde o administrador do site pode mudar, adicionar ou fazer qualquer coisa que ele quiser dentro deste site. Dito isto, este é o fim deste vídeo. Vejo você na próxima. 9. Produtos: Certo, agora que criamos nossa página da marca, vamos copiar tudo isso para o arquivo EJS real. Então vamos em frente aqui e criar um novo arquivo. Vou nomeá-lo um subsídio que EJS. E, claro, vamos voltar, copiar tudo isso e colá-lo dentro desta marca. E precisamos absolutamente adicionar o cabeçalho e rodapé. Então este é o cabeçalho. E, claro, precisamos adicionar o rodapé. E agora estamos bem. Então temos a nossa marca pronta. E agora vamos criar a página da categoria. Então o que eu estou pensando é criar aqui uma marca e categorias. Então, sempre que o usuário clicar na marca, ele irá levá-lo para esta página onde temos as marcas e, claro, temos a imagem bem aqui. E a mesma coisa para categoria. Sempre que o usuário clicar na categoria, ele irá levá-lo para as categorias e ele procurou a categoria que deseja. E eu acho que é isso, mas nós também precisamos adicionar o fundo aqui. E nós dissemos que vamos fazer isso em CSS. Mas por agora eu vou copiar tudo isso novamente e colá-los e a página inicial ou a categoria. Então, será o mesmo, mas com uma pequena mudança de categorias em vez de marcas. Então vamos voltar. E dentro de casa. Vou colá-los de novo. E aqui, em vez de marcas, vou escrever categorias e escolher o seu produto da categoria que você gosta. E então temos pesquisa, pesquisa e nome da marca, nome da categoria. E, claro, vamos mudar tudo isso ao mesmo tempo, alguma marca, marca. E também temos aqui. Sim, então é isso. Vamos a partir daqui. Temos também marca e marca. Então vamos excluir todos estes e tipo categoria, o próprio nome. Então, se você voltar e clicar em Atualizar, temos o nome da categoria, o nome da categoria, e perdemos um aqui. Então este é o nome da biblioteca. E agora estamos bem. Temos nossas categorias. Temos as categorias de produtos espremedor da categoria como temos a pesquisa. E nós também temos esses guias para o. E tudo isso vai ser alterado assim que trabalharmos com o back-end e os bancos de dados. Então, por enquanto, vou deixá-los assim, mas é claro que precisamos mudá-los para o nome real da categoria. E eu estava pensando em adicionar um pouco de estofamento aqui. Então vamos voltar para a divisão de discos. E dentro deste nós temos o formulário e talvez adicionar alguns estofamento inferior cinco, talvez. Vamos voltar e clicar em Refresh. E agora temos o nosso preenchimento de cinco pixels. E agora esqueça, vamos adicionar o fundo real aqui. Então, como você pode ver dentro deste, nós adicionamos um nome de classe bem aqui. Então nós temos a marca de fundo e deixá-la como marca para ambas as categorias e marcas, já que não vai mudar, eu vou escolher o mesmo fundo para ambos. E, claro, vamos fazer isso no termo deles quando você terminar com eles. E agora no style.css, podemos adicionar nossa imagem de fundo real. Então eu vou chamar o plano de fundo de uma marca e, em seguida, usar a imagem de fundo como, desculpe, URL da imagem de fundo. E é claro que as imagens, então temos uma imagem de fundo, marca o GPG. E agora estamos bem. Se eu voltar e apertar Refresh, vai ter este fundo, podemos mudá-lo se não gostarmos, mas por enquanto, vou deixá-lo como está. E, claro, este olá de casa um b e nosso site real. Então vamos em frente e excluí-lo daqui. E agora estamos bem. Refresque. Agora você pode ver que temos nossas categorias. Escolha o seu produto a partir da categoria que você gosta, e a pesquisa, e também as categorias que temos em nossa loja. Então este é basicamente para as categorias e este é o mesmo que para a marca também. Então vamos em frente agora e pegar tudo isso e colocá-los no arquivo de categorias. Então eu vou criar um novo arquivo. Vou nomeá-lo categoria. O EJS. Em seguida, volte para o Início, copie tudo isso e colado dentro desta categoria. E como de costume, não queremos esquecer o rodapé e o cabeçalho daqui. Então isso é que basicamente temos nossa categoria, marca e sobre e entre em contato conosco. Todos eles estão prontos para agora, se eu apertar atualizar, nós não temos eles na página inicial. Então isso é basicamente para a categoria e marca. Agora, tudo o que precisamos fazer é criar uma nova página de produto onde vamos listar todos os produtos que temos, seja na marca ou na categoria. E isso depende do usuário. Então o que vamos fazer é na parte de trás e filtro S2. Todos os itens de acordo com a marca ou a categoria. E se o usuário quer. Talvez se clicarmos na marca e isso o leva para a marca, marca Thrive. E então, é claro, ele escolhe a marca que ele quer. Então precisamos filtrar todos os itens que temos de acordo com a marca que o usuário escolhe. Então esta é a ideia. Então vamos em frente e criar a página de produtos. Em seguida, crie uma página de produto para os próprios produtos. E eu acho que parece um pouco complicado, mas acredite, não é, é como criar um arquivo de categoria ou marca. Então vamos em frente agora e criar uma nova pasta para os produtos que o JS e outra pasta para o produto real. Vou dar o nome de produto. Então os produtos aqui nós vamos ter todos os produtos que temos de acordo com o talvez o que o usuário escolhe, qualquer categoria de marca e sempre que você quiser realmente. E então sempre que estamos na página do produto e o usuário gosta de um produto específico, então ele irá redirecioná-lo para a página do produto onde temos os detalhes explicativos do produto. Então, com isso sendo dito, vamos em frente e começar com a página do produto dentro da nossa página inicial como de costume, e depois tapetum para o produto. Então, os JS. Então agora, como de costume, como temos nos produtos, todas as categorias e marcas, vamos copiar esta primeira divisão porque eu acho que parece bom. Então vamos colá-lo aqui. E agora só temos este. Então vamos escolher, talvez mudar categorias para produtos e, em seguida, escolher o seu, um produto de talvez uma categoria que você gosta. Acho que isso também parece bom. Se você quiser removê-lo novamente, vá em frente. Mas, por enquanto, manteremos como está. Mas aqui temos os produtos e, em seguida, também temos a barra de pesquisa como de costume. E agora vamos começar com o produto real. Então eu vou criar uma nova seção com o fundo pode ser leve. E então vamos começar com a linha, então temos a Irlanda. E dentro destes eu vou criar a nossa lista desordenada. E isso levará produtos de vidro. Não use isso. Na verdade, arquivo CSS. E então nós temos os itens da lista real. Assim, o primeiro item da lista terá a divisão do produto. E, em seguida, dentro desta divisão de produtos vai ter o link. E, claro, neste link, ele não apontará para nada por enquanto. Então temos o estilo. Eu vou fazer a decoração do texto para Nenhum. E agora, dentro deste link, vamos colocar duas coisas. O primeiro é a imagem e depois temos. O título, preço, marca e categoria do produto. Então vamos em frente e criar antes de tudo a imagem. E dentro desta imagem vamos adicionar imagens, talvez imagem uma equipe. E depois de adicionar esta imagem, podemos adicionar o título. Mas antes disso, vamos criar uma classe de imagem de produto que não usamos mais tarde. E então temos a nova divisão, que será linha, talvez margem superior dois. E então temos o bloco central e, em seguida, coluna. E agora estamos bem. Podemos criar nosso espaço e vamos nomeá-lo. Talvez para entrada e estilo de dança como de costume, decoração de texto para nenhum. E então, depois disso, podemos criar a classe de nome do produto com H6 como o título. E dentro do espaço podemos ter o item vital para agora voltar e clicar em Atualizar, vai ter o título do item com uma luz de fundo. E é claro que temos essa lista desordenada e vamos ajustá-los um pouco, NCSS. Então agora se eu voltar aqui e adicionar algumas coisas, então quando eu estou pensando é ter as imagens e então nós temos o título. E essas são as únicas coisas a acrescentar. Ou talvez o usuário possa clicar em para ser redirecionado para o produto especial. E temos também o nome da marca, categoria, nome e tamanho. Não vou incluí-los dentro do link. Vou escrevê-las, adicioná-las a elas. Agora, se eu voltar e atualizar, nós temos nossa imagem e, em seguida, nós também temos o título do item talvez. Então agora precisamos ajustar o título do item de imagem e adicionar algumas coisas. Então, primeiro de tudo, vamos criar uma nova divisão que será do texto da coluna de classe. E então eu sou atos cinco, bloco central H5 e preço do produto para mais tarde. E nisso, eu vou adicionar o preço do produto. Então preço do item, talvez eu adicionar um exemplo como $10. Então isso é para o preço do produto, e eu vou adicionar o produto, marca e categoria. Então, uma nova divisão com a marca do produto como o nome da classe. E dentro deste eu vou escrever marca e em seguida, seguido por um intervalo com algumas classes. Talvez seja só ousado. Então, peso da fonte, negrito. E então a marca pode ser. Vamos tentar o Google por enquanto. E então temos outro para as categorias. Então categoria de produto. Ou talvez você possa trabalhar com marcas já que é o mesmo. Então, e aqui vamos adicionar uma padaria. E, em seguida, seguido pela extensão seria também divertido maneira ambos. Então temos a categoria. Eu simplesmente adiciono um diploma porque eu não tenho nenhum topo de minha mente. E estamos bem agora temos a marca e a categoria. Ainda temos uma coisa que é o tamanho. E eu estou pensando em adicioná-lo dentro desta divisão. Então temos aqui produto, marca também. Então temos o tamanho seguido por um span com a fonte da classe, peso, negrito. E também temos o tamanho, talvez para 100 mililitros, e aqui talvez mudou a planta e torná-la Johnson. Então, agora estamos bem se eu bater em Refresh. Então vamos parecer marca Google categoria Johnson tamanho para 100 mililitros. E este é o fim para este vídeo. No próximo vídeo, vamos ajustá-lo usando CSS. Então vejo você. 10. Produto: Tudo bem, então agora que terminamos com o primeiro produto, vamos em frente e ajustados usando CSS. Então, dentro do nosso CSS, style.css, vamos criar aqui um novo mas para os produtos. E, claro, vamos começar com os produtos. Como podem ver, se eu voltar ao Lar, temos aqui a classe de produtos. Então eu vou comentar em CSS. Então eu vou exibir sinalizadores e, em seguida, justificar o início do conteúdo. E, claro, os itens alinhados vão torná-lo flexível isso. Então temos o envoltório flexível. Então, agora, se voltarmos e atualizarmos, podemos ver que saímos dos itens do lado esquerdo. Eles já estavam à esquerda. Mas agora, para quaisquer mudanças que possam ocorrer, eles ainda estarão no lado esquerdo da imagem aqui. Então agora vamos ajustar os itens, os itens reais. Então, dentro dos produtos, temos o item da lista de aliados. Então, todos os itens da lista dentro do produto, precisamos list-style-type para nenhum. Nós não queremos o tipo de estilo e preenchimento será 0. Então temos flutuador. Talvez eu faça 0, 1, 34, sim. E depois temos a altura. Então, a altura máxima será de 25. E então nós também temos o botão de borda, inferior. E, claro, sólido 0,1 REM. A cor será como de costume, 31, oito, V5. E finalmente, vou adicionar algumas margens em todos os lados. Então, 15 pixels, dez pixels de 15 pixels e, finalmente, dez pixels. Então, agora, se voltarmos e apertarmos a atualização, você vai ter isso como nosso passado. E, claro, precisamos ajustar algumas das características. Vamos voltar e ver dentro dos produtos que temos agora a divisão que é produto. Agora ajustamos o item da lista. Vamos em frente e, e torná-lo um pouco menor, mas na verdade muito menor. Nós realmente queríamos assim. Então vamos voltar para Stein e trabalhar com a classe de produtos. Então arpanet produto, em seguida, exibido carece. Então temos direção flexível, que é estar na coluna. E, finalmente, a largura será talvez 15 RAM. E, claro, precisamos ajustar o nome do produto. Então, peso da fonte, negrito. Então temos a cor. Como de costume. 31, ATF me 5. Então, agora vamos voltar e atualizar. E como podemos ver, esta é a nossa imagem e podemos concordar que ela parece muito grande, então precisamos ajustar a imagem. Então vamos voltar aqui e ajustado usando a imagem do produto que criamos anteriormente em vez de Arpanet. E precisamos ajustá-lo usando o máximo seria, bem, apressar altura máxima para ser também bem, eu sou. Agora, se você voltar e clicar em atualizar, você vai ver que temos nossa primeira imagem seguida pelo item intitulado marca, tamanho da categoria e também o preço aqui. Agora vamos ajustar alguns destes também. Se voltarmos à nossa página inicial, temos aqui o nome do produto, preço do produto e a marca do produto para todos eles. E, claro, a imagem do produto para a imagem que acabamos de modificar agora. E vamos ajustá-los chamando a marca do produto. Talvez fazer a cor um pouco. Como 880, 880. Acho que vai ficar bonito. 88 ATM coisa descoberto é bom para a marca e tamanho e, claro, o preço do produto. Agora, vamos trabalhar com isso. Talvez só torná-lo ousado. Vamos ver. E então nós também temos talvez a categoria de produto. E dissemos que é o mesmo que a marca, então estamos bem por enquanto. Vamos voltar e atualizar. E como podemos ver, agora temos o nosso barco. Isso é ousado e estes são um pouco como, ótimo. E também temos o título do item e a mesma cor que pairar sobre esses itens. Então este é o primeiro item que temos. Temos a imagem, temos a informação de qualidade por enquanto. E, claro, o que precisamos fazer agora é criar outra página de produto onde o usuário, se ele quer saber detalhes extras sobre este produto ou para realmente comprá-lo, Ele pode clicar na imagem ou no título. E ele irá levá-lo automaticamente para a página do produto onde ele pode adicioná-lo ao descarte, ver alguns detalhes sobre este produto. E talvez você possa adicionar uma classificação no final. Vamos ver o que vamos fazer mais tarde. Mas, por enquanto, esta é a idéia geral sobre o produto, sua página de produtos. Vamos adicionar alguns produtos aqui. Então volte para casa. Temos dentro desta linha, temos esta coluna. Então vamos em frente e copiá-lo algumas vezes. E vamos ver o que vai acontecer. - Sim. Então aqui, 12345. Se eu voltar e atualizar, vamos pegar esses produtos. Temos seis produtos por enquanto. E, claro, talvez possamos remover essas descobertas mais tarde. Mas, por enquanto, é bom. E mesmo se mudarmos o tamanho. Então, em tamanho médio nós vamos ter que, e em patrocinadores nós vamos ter um. E, claro, talvez você possa ajustar isso para estar no centro sempre que tivermos uma tela pequena como esta, talvez seja uma boa idéia colocar as imagens e as seguintes informações no meio da tela. E, claro, sempre que tivermos um meio de algo maior, vamos tê-los no lado esquerdo. Assim, a construção adicional de poço ou modificações que você pode fazer é realmente fazê-lo no meio da tela. E, claro, sempre que tivermos tela grande, torná-los talvez quatro ao mesmo tempo em vez de três. Sim, parece melhor. Então, por exemplo, este é o primeiro 1, segundo, terceiro, quarto ano. Então talvez pareça melhor, mas por enquanto, vamos ficar com isso. Esta é a página do produto. Vamos em frente e copiar tudo isso e colá-lo e os produtos que EJS classe ou arquivo. Então é isso. Sim, vamos em frente e copiar toda esta seção em produtos para o JS, e claro não se esqueça de adicionar seu rodapé aqui. E, em seguida, o cabeçalho no início do arquivo. Então estes são os produtos são as cadeiras. E agora, se atualizarmos nossa página inicial, vamos obter essas linhas rodapé e cabeçalho como queremos. Então agora o próximo passo é realmente imprimir a página do produto real. Então dissemos que temos vários produtos de uploader. E sempre que o usuário quiser verificar um produto 11 ou um item específico que ele gosta. Ele quer ver mais detalhes, por exemplo. Então ele clica no elétron, a imagem do produto ou um título, e então ele deve fazer direcioná-lo automaticamente para a página do produto com explicação extra. E talvez você possa adicionar algo na parte inferior da página que diz, talvez você também possa gostar e, em seguida, alguns produtos extras da mesma categoria ou da mesma marca que ele está verificando. Então esta é a ideia geral. Vamos em frente e começar com ele dentro de nossa página inicial como de costume, em seguida, copiá-lo para o produto. Então, para fazer isso, vamos começar com a criação do. Então esta é a seção. E dentro desta seção vamos criar nosso contêiner. fluido deve ser e o final do recipiente abaixado. E, em seguida, dentro deste vai criar a primeira linha. Talvez adicionar uma linha de 0 para tela de tamanho pequeno ou qualquer coisa menos a tela grande e um. E veremos isso em um momento. E isto vai ficar vazio. Então vamos fazer sexo em coluna. E para telas grandes de quatro. E alinhe itens, no centro. E é aqui que vamos adicionar a imagem. Então vamos adicionar imagem. A fonte será como imagens padrão usuais, image1, mas GBG. E é claro que não precisamos adicionar algum estilo, que é a largura máxima desta imagem para ser de 300 pixels. E acho que somos bons para a imagem. Agora. Vamos criar outra coluna para telas grandes. E isso será também estar vazio. E então seguido por outra coluna 6 onde vamos adicionar a informação, eu sou sexo e para telas grandes como vai ser quatro. E, claro, dentro deste painel, para baixo para criar o formulário para enviar ou adicionar ao carrinho. E dentro disso eu vou ter o título. Então este será de texto de classe para torná-lo azul. E então temos o título do item, e depois seguido por um parágrafo com a classe H5 como Título 5. Então, dentro deste título, vamos adicionar o preço. Então, preço. E, em seguida, dentro do intervalo, vai ter o preço com dados secundários de texto. Você pode ver se eu adicionar preço, por exemplo , $34, Vamos voltar e atualizar. E como podemos ver, temos a imagem seguida pelo título do item e, em seguida, o preço que é 34. Então, esta é uma ideia geral. Esta é a imagem real. Agora, aqui podemos adicionar informações extras. Vamos em frente e fazê-lo aqui mesmo. Temos o preço que temos antes, e então precisamos adicionar marca. Então vamos voltar aqui e adicionar uma nova classe ou ser um novo parágrafo. E então temos o span, que será ter a fonte da classe, peso, negrito. Então temos a marca. E, claro, vamos adicionar a marca real, como Johnson, neste caso. E esta marca, desculpe, Johnson deve estar entre este parágrafo pai. Agora terminamos com a marca. Vamos pular linha e, em seguida, criar uma nova linha para os tamanhos. Então o que eu estava pensando é obter uma nova linha dentro desta linha vai ter a coluna de dois e a margem de cima de dois também dentro do SRO vai criar este tamanho. E, claro, a classe deve ser tributada secundária. E, claro, talvez eu consiga fazer sexo. E depois seguido por outra coluna. E esta coluna seria a mesma de antes, então coluna 2. E aqui vamos ter o tamanho real dentro de um parágrafo da liga de classes. Então talvez o tamanho seja de 200 mililitros. E, claro, se eu voltar e atualizar, você vai obter o preço do título do item, tamanho da marca Johnson para 100 mililitros. E agora vamos continuar com quantas peças o usuário uma vez. Ou talvez vamos copiar isso mais uma vez para a categoria. Hoje vamos ter categoria. E depois seguido de talvez, digamos xampu. E agora, como um acabamento desta linha é criar outro com coluna de sexo. E dentro desta coluna eu vou criar o grupo de entrada. E aqui o usuário vai adicionar a quantidade real, quantas peças ele quer. Então MP3. E dentro disso eu vou criar a entrada real do nome do texto do tipo. Vou dar um nome para uma aula mais tarde. Estou desenhando. E, em seguida, o espaço reservado será a quantidade. E então temos a divisão de peças para abranger grupo de entrada de classe. Então, agora, se apertarmos a atualização, vamos obter este tamanho para uma quantidade de 100 mililitros e pedaços. Então, este é o fim para este vídeo. E o próximo vai adicionar o adicionar ao carrinho e talvez a descrição deste item. Então, vejo você então. 11. Casa 1: Olá e bem-vindo de volta. Neste vídeo, vamos continuar nossa página do produto. Então, ainda temos o botão Adicionar ao carrinho. Vamos em frente e editar aqui. Esta é a nossa linha para outra linha aqui. E eu estava pensando em dar a ele uma classe do moire três apenas para depender do eixo y. Então eu vou adicionar o nosso cartão, que é o botão. E o tipo seria, como de costume, submeter. E eu estou pensando em dados, a alternância para mais tarde. Vou construí-la por enquanto, assim. E o estilo será display bloco inline. Finalmente, temos as classes reais e vamos usar classes Bootstrap e btn e btn escuro, em seguida, Adicionar ao carrinho. Então isso é basicamente para o nosso botão por ir em frente e atualizá-lo. Vamos pegar esse botão e está escuro. E é suposto redirecionar-nos para o talvez para a página de produtos onde temos todos os produtos que o usuário escolheu para agora. E, claro, se o usuário não está assinado e conectado ainda, ele deve realmente levá-lo para o modelo de login onde ele deve colocar seu endereço de e-mail e senha. E, claro, se ele ainda não tem uma conta, ele também pode se inscrever para se inscrever com uma nova conta. Em seguida, volte aqui e adicione este item como corte. Como dissemos, este é o nosso jardim. Vamos voltar. E eu estava pensando em adicionar uma descrição aqui atrás do item Titan. Então, talvez façamos isso. Temos um título. Vamos adicionar um gráfico de barras onde temos Lauren. E, claro, podemos sempre escolher algumas aulas para o nosso Biograph. Não escolha o modo de classe para tornar o parágrafo pequeno. E como podemos ver, este é o nosso parágrafo. E então temos o preço, marca, categoria, tamanho, quantidade, e, em seguida, adicionar Deus, e, claro, nossa imagem. Então, se eu diminuir o tamanho disso, vamos ver o que está acontecendo. Vamos aumentá-lo de ambos os lados. Então, como podemos ver, temos nossa imagem e as informações na mesma linha. Então isso é para os produtos, a página do produto. Vamos em frente e mover todos estes para o produto que arquivo EJS. Então aqui, vamos ver. Este é o começo desta seção do caminho até o fim aqui. Vamos levá-los aqui. Em seguida, volte e pegue estes cabeçalho e rodapé. Então este é o cabeçalho. Vamos tomar. E coloque-o na página do produto. E então vamos descer e adicionar nosso rodapé. Está lá há muito tempo. Então eu acho que agora somos bons para o produto e página do produto. Então, até agora, se verificarmos, o que fizemos? Fizemos a página inicial. Eu sinto muito. Fizemos a categoria da marca sobre entrar em contato conosco. E fizemos duas páginas que não são visíveis para o visualizador dentro da barra de navegação. E eles são os produtos e a página do produto. Então, por enquanto, estamos bem. Vamos continuar aqui e salvar. E volte para trás. Se nos refrescarmos, esta é a nossa casa. Então agora começamos a construir nossa página inicial. Então, é claro, vamos construir a página Pedidos onde o usuário pode ver todos esses pedidos, pedidos anteriores e itens atuais em seu cartão. E também precisamos criar as páginas Admin. Então vamos começar com a página inicial. E eu estava pensando em adicionar um carrossel bem aqui para talvez visualizar diferentes marcas e depois adicionar um best-seller. Temos os produtos mais vendidos. Em seguida, também adicionar outro querosene onde podemos visualizar as diferentes categorias. E, claro, podemos adicionar alguns produtos no final. Então vamos ver. Vamos voltar e ouvir “obrigado “para começar. Certo. Então aqui, porém, para criar a primeira divisão. E eu vou ter uma estratégia de imagem de fundo em algum estilo ruim. A imagem de fundo será igual ao URL da nossa imagem. Verifique mais tarde. Mas, por enquanto, o tamanho do fundo eu estou pensando para cobri-lo. E, claro, a posição de fundo seria centrada. E então, finalmente, nós também temos a altura. Estou pensando em 35, talvez 38 H. E então temos antecedentes, repito, não repita. E, finalmente, a margem será 0. Então isto é para a imagem e vamos verificar mais tarde. Mas vamos criá-lo. E quando estou construindo aqui é na verdade uma imagem, uma imagem de fundo. E então temos algo como bem-vindo ao site de e-commerce e um parágrafo na parte inferior para, então, por exemplo, vamos ter vidro com p ou lados superiores e talvez Bem-vindo ao site de comércio e. E então, finalmente, vamos ter talvez sexo e check-out. Itens antigos, talvez de alta qualidade e ofertas exclusivas. Sim, acho que será isso. E, claro, sabemos que precisamos adicionar agora a imagem real. Então vamos para pixels. E vamos ver o que temos alguns antecedentes. Isso é um simples, talvez adicionar um símbolo de terra e essa busca. E como podemos ver, temos tantas opções, mas por enquanto, vou escolher a mais simples. Então talvez eu possa ir com este baixado. E agora temos isso aqui como pano de fundo. E eu terminei aqui. Então, se voltarmos, temos a imagem e talvez precisemos centralizar essa informação. Então vou adicionar uma coluna. E eu estava pensando na coluna para médio e acima para ser seis. E então você precisa para o centro de texto. Então, centro de texto. E, claro, vai ter a foto máxima. Então é isso que colocou esses títulos aqui e voltar e atualizar. E como podemos ver, temos um site bem-vindo ao site de comércio eletrônico, checkout, itens de alta qualidade e buffers exclusivos. Talvez agora possamos adicionar algo aqui como um fundo de, vamos, uh, vamos ver. Então esta é a nossa primeira divisão. Vamos criar outro com o centro de linha. Então temos alguma margem, sabe talvez 0 e alguns acolchoamentos e também luz de fundo. E então vamos criar a coluna de quatro. Dentro desta coluna vamos ter um parágrafo de vidro, chumbo, talvez de alta qualidade. E depois copie isto mais duas vezes. Então de alta qualidade, entrega rápida e melhores preços. Então, agora, se voltarmos e apertarmos Refresh, vamos conseguir algo assim. Então temos a página de boas-vindas, checkout, itens de alta qualidade e ofertas exclusivas. Então temos algumas das nossas características. Por exemplo, qualidade superior, entrega rápida e melhores preços. Então isso é basicamente para a página de boas-vindas, e vamos começar com os best-sellers. Então, se voltarmos e criarmos nossa seção aqui. Então, esta seção terá várias classes, talvez leve do que texto. E um pouco de estofamento. Vamos abri-lo e depois criar nosso fluido de contêiner. E, claro, precisamos criar o título onde temos os melhores caixas. E, em seguida, o parágrafo que diz confira alguns dos nossos best-sellers. Então vai ter a primeira linha e algumas classes, como texto. Então temos o centro de texto. E isso é para o crescimento e Fantasma com uma margem de quatro. E dentro desta coluna, pensando em adicionar aqui best-sellers. E, claro, adicionar algumas classes, como exibir para e, em seguida, MB ou. Então. Agora, se voltarmos e apertarmos a atualização, vamos conseguir algo assim. Temos os nossos best-sellers. Vamos fazer um parágrafo aqui. Então, depois do nosso título, talvez você possa adicionar o parágrafo real aqui. Então, a aula será liderada. E então temos de conferir alguns dos itens mais vendidos para 2020, por exemplo. Vamos voltar e refrescar-nos. E é basicamente isso. E agora podemos adicionar três dos mais vendidos itens. E podemos adicioná-los usando talvez cartões. Então vamos voltar ao nosso código. E este é o final do pergaminho estava dizendo o fluido do recipiente. E agora vamos criar outra linha. Claro que precisamos adicionar itens de alinhamento, centro, texto, centro, e então temos um máximo ou dois. E então vamos abrir. Agora vamos criar a coluna. Então coluna para telas grandes é quatro, e para telas pequenas é 10. Então temos um max auto. E isso é basicamente para a coluna. E agora podemos criar nosso cartão real. Então eu vou criar o cartão com o cartão um para CSS. Use esta classe para CSS. E então temos texto escuro MY para fotos endêmicas. Vamos abri-lo e começar com a criação da imagem. Assim, a fonte da imagem será imagens ponto-ponto. Então temos a imagem real. Vamos supor que vamos usar muito. E vamos adicionar algumas aulas aqui. Então a primeira aula será um outono máximo. E, claro, não nos esquecemos do módulo no eixo y. Quanto ao estilo, vou ter a altura máxima com 100 pixels. E o mesmo para largura máxima de 100 pixels. Agora, se você voltar e atualizar, como podemos ver, temos nossa imagem sem nada até agora podemos adicionar algumas informações no final. Vamos ver. Vamos voltar. E, claro, podemos adicionar o nome e, em seguida, talvez adicionar um botão que diz Ver detalhes. E se o usuário clicar neste botão, irá redirecioná-lo automaticamente para a página do produto deste item específico. Então é isso. Vamos voltar. Este é o fim do Deus. Temos a imagem. E, claro, dentro do cartão podemos criar o guarda Buddy, Buddy. E então temos o primeiro título, que é o título. E ainda temos o título e o botão. E vamos adicionar mais dois que isso. Claro, vamos fazê-las no próximo vídeo. Então, vejo você então. 12. Casa 2: Olá e bem-vindo de volta. Nós ainda temos o título e claro, o botão para ver detalhes deste produto best-seller. Então vamos em frente e começar com o título que diz talvez o título. Então eu adiciono um título cinco. E, em seguida, subclasses como texto, maiúsculas. Então também nos divertimos, peso, ousado, e, claro, MB, três. Item da lista. Isto é para o CSS e eu vou adicionar o título real, Vamos supor Johnson. E depois disso, vou adicionar um formulário para enviar. Então, a firma não terá nenhuma ação por enquanto. E, claro, o botão, o botão real com o tipo enviar. E então algumas aulas como PTEN, alguns acolchoados e todos os lados. Talvez texto, maiúsculas ou talvez não. Vamos adicionar o botão de preço e o CS4 ou posterior. E eu vou torná-lo amarelo. Então eu estou adicionando o BDI e querendo classe e vôo fiscal. Então vamos ver os detalhes. E, claro, se voltarmos e acertarmos Refresh, vamos buscar o Johnson e ver os detalhes. E isso é basicamente para este cartão, podemos também talvez ter a largura no cartão padrão. Então, vamos voltar. Vamos ver. Então, em vez de especificar a largura máxima para 100 pixels, vou dizer largura igual a 100 por cento do cartão. E em vez de ter alguma margem, vamos ver, em vez de ter alguma margem no topo como este e botão, eu vou especificar que a margem deve estar apenas no botão. Então, em vez de MEU app.use MB. Assim podemos ver que temos nossa imagem. E, claro, este título não é apenas uma palavra. É basicamente, por exemplo, shampoo Johnson, 400 mililitros. E acho que parece bom por enquanto. E, claro, todos os detalhes devem estar dentro da página do produto que criamos anteriormente. Então esta é apenas a definição do produto e uma imagem, o título. E se o usuário estiver interessado neste item específico, ele sempre pode ir para a página do produto clicando em Ver detalhes. Então este é o primeiro produto. Vamos adicionar mais dois. Vamos voltar, copiar tudo isso e colar mais duas vezes. Talvez mudar a imagem. Talvez este para imagem dois e o último, e mantê-lo como imagem um. E vamos ver. E como podem ver, temos o nosso produto best-sellers. Temos três produtos e podemos alterá-los sempre que quisermos. Então, no final do nosso projeto, vamos construir talvez uma parte específica onde podemos mudar esses produtos aqui mesmo. Então isso é basicamente para os best-sellers. Vamos ver o que vamos fazer com as, talvez as marcas e categorias. Então o que eu estou pensando, pensando, é ter as marcas aqui primeiro, antes disso, os best-sellers, em seguida, adicionar as categorias aqui. E é claro que vamos fazer isso usando carrossel. Então, se voltarmos para bootstrap seus dois componentes e, em seguida, carrossel, vamos ver vários tipos de carrossel. E vamos usar este aqui. Então este com indicadores, temos ambos os agentes e estes podem escolher entre eles. E este é o código disto. E, claro, talvez você queira adicionar o título e algumas informações definitivas sobre este produto ou esta marca. Podemos facilmente fazer isso adicionando a legenda de largura aqui. Então vamos em frente e copiar tudo isso e voltar ao nosso código. Vá para a qualidade superior antes da seção best-seller, eu vou colá-lo. Vamos ver o nosso site agora. E como podemos ver, você tem o primeiro slide. E se voltarmos, então eu adicionei aqui alguns títulos para o primeiro. E, claro, adicionei as imagens como podemos ver aqui. E agora, se voltarmos para a França, vais receber isto. E eu sei que é muito grande para a tela e você pode consertá-lo. Mas esta é a ideia. Se pressionarmos os indicadores, eles devem nos levar automaticamente para. Este terceiro não está disponível, e este é o primeiro. Então vamos voltar e ajustar isso. Temos imagens. Esqueci-me de adicionar a barra. E isso é basicamente, podemos sempre torná-lo menor. Então, por exemplo, se eu quiser fazê-lo no meio da tela, eu posso adicionar uma nova linha, depois Adicionar Coluna 3, 4, certo? Sexo de coluna, para adicionar o nosso carrossel. E coluna 3 para a esquerda. E agora abra isso aqui, e então copie tudo isso daqui até a seção, e então cole bem aqui. E então talvez se voltarmos para atualizar, podemos ver que temos nossa taxa de marca aqui. E como você pode ver, ele muda. O talvez a altura da imagem muda de acordo com a imagem em si. Então eu estava pensando em adicionar uma altura máxima para as imagens. Então, aqui. Altura máxima de Einstein. E eu estava pensando em talvez 400 pixels. E agora vou copiar isto mais duas vezes aqui e depois aqui. E se voltarmos ao fresco, vamos conseguir isto. Então, como podemos ver, parece melhor agora. E também temos aqui o título e algumas legendas. Sim, sobre o produto. O usuário pode verificar todos os produtos a partir daqui. E, claro, precisamos adicionar talvez o primeiro talvez o título das marcas. Então eu estava pensando em adicionar fluido de contêiner e, em seguida, adicionar aqui a primeira linha e, em seguida, o caminho para as marcas. E então também vou adicionar texto centrado. E é claro que vou adicionar o parágrafo com o líder da classe que diz: “ Fechar fora, talvez nosso checkout, nossas marcas”. Agora, se você voltar para atualizar, ir para obter marcas, verificar nossas marcas. E, claro, podemos talvez fazer isso em outra cor , como um peso ou talvez textos secundários. Então vamos voltar aqui e adicionar a este imposto de classe secundário. Agora, se você voltar e apertar Refresh, vai pegar este. Então temos marcas, confira nossas marcas. E aqui temos todas as marcas. E, claro, se não gostarmos assim, podemos sempre nos ajustar. Então, por exemplo, eu posso mover isso para aqui, vai ser assessor. E finalmente aqui eu vou também colocar melodia. Agora, se voltarmos, acho que ficará um pouco melhor. - Sim. Então é isso para as marcas. Fará a mesma coisa para o produto. Então eu vou copiar tudo isso e colá-lo logo após os bestsellers. E, claro, podemos adicionar alguma margem aqui. E eu esqueci de adicionar tudo isso, toda essa linha ao fluido real do recipiente. Então, esta fila deixa-me fechá-la. Pegue tudo. Vamos ver. Sim. Então é isso que vai levar eles se sentam bem aqui. E se eu voltar e me atualizar, vou ter a mesma coisa. Então estamos bem e talvez adicionar alguma margem em ambos os lados. Então, meus cinco, e eu acho que agora estamos bem. Eu me refresco. Este é o checkout da marca, nossas marcas e alguma margem na parte inferior, e, claro, no primeiro aqui. Então isso é para as marcas. Vamos em frente e copiá-lo. Então eu vou fechar este fluido de contêiner. Não ser tudo isso. Em seguida, abra depois desta. Então estes são os melhores centros o mais perto que eu posso criar aqui. Vamos abri-lo novamente e verificar nossas categorias. E, em seguida, dentro dessas categorias, podemos adicionar também aqui em vez de categorias de marcas para que o concorda. E acho que não, estamos bem. Esta é a nossa página inicial. Se percorrermos todo o caminho para baixo, podemos ver as categorias. Nós temos. O rodapé, temos o nosso cabeçalho. Temos algumas, talvez algumas informações sobre o nosso afiado e, claro, os best-sellers bem aqui. E o back-end. Claro que vamos adicionar a direita aqui. Nós vamos adicionar um, por exemplo, se o usuário quiser clicar sobre esta marca específica, você sempre pode clicar nela e ele irá levá-lo para as marcas aqui, e claro para as marcas específicas que você quer também. Então é isso. E a partir deste best-seller, se o usuário escolher este produto, ele irá levá-lo diretamente para o próprio produto. E esta é a ideia da página inicial. Vamos apagar estes aqui. E acho que acabamos por isso. Vamos refrescar. E é isso. Esta é a nossa página inicial. No próximo vídeo, vamos criar os pedidos de lugar e o local, talvez o pagamento. E, claro, depois disso, vamos acabar em nossa frente e um design com a página de administração onde vamos deixar o administrador mudar tudo o que ele quiser. Talvez marcas, categorias, adicionar novos itens, novos produtos e modificá-los. Os preços, a descrição como ele quer. Mas este é o fim para este vídeo. Vejo-te no próximo. 13. Ordem 1: Olá e bem-vindo de volta. Neste vídeo, vamos criar a página Encomendar. E eu estava pensando, vamos voltar primeiro. Então, sempre que estamos aqui e isso e vamos supor que eu estou olhando para um item específico. Então eu estou na página do produto onde eu também tenho o adicionar ao carrinho aqui. Então, como podemos ver, se o usuário clicar neste Adicionar ao carrinho, ele deve levá-lo diretamente para a página Fazer pedido, onde ele pode ver todos os pedidos anteriores. E você também pode ver o cartão em si. E ele pode remover itens, adicionar itens, e verificar o total, em seguida, fazer o pedido real. E eu estava pensando que antes disso, se o usuário não inseriu seu endereço de entrega ou método de pagamento, ele deve realmente adicioná-los e eles também aparecerão na página Fazer pedido. Então, vamos voltar aqui. E vamos criar um novo aqui. Então, novo arquivo. E eu vou chamá-lo de transporte, Deus. Mas EJS. Então este é o primeiro. E neste arquivo, como sempre, precisamos incluir o cabeçalho e rodapé. Então vamos voltar, pegar esse básico aqui, e então talvez mudar isso para rodapé. E agora podemos começar. Então a primeira coisa que eu estava pensando em fazer é criar talvez o fluido do recipiente. E vamos fazer isso agora mesmo. Então fluido recipiente, e, em seguida, também a linha. E, claro, vamos criar alguns P13. E eu estava pensando que a primeira em telas grandes, a primeira divisão com quatro, estará vazia. Então eu vou adicionar outra divisão com grande avanço também dentro desta divisão. Vamos criar outro bem ali, e então algum preenchimento no eixo y. E é claro que aqui precisamos adicionar as barras de progresso que vamos usar. Então o que eu estava pensando é adicionar aqui uma barra de progresso que será atualizada toda vez que terminarmos uma tarefa. Por isso, consiste em duas ou três tarefas. O primeiro será adicionar o endereço de envio e, em seguida, descansar em completo. E depois de concluir esta tarefa, temos o método de pagamento. Portanto, esta barra de progresso será atualizada toda vez que terminamos com uma tarefa. Então vamos criá-lo agora mesmo. E para adquirir um profissional, criar uma barra de progresso, você pode levá-la do Bootstrap ou criado por você mesmo. Então será de progresso de classe e talvez bg secundário. E o que eu estava pensando em adicionar uma margem, três de baixo. E, claro, preciso criar o progresso. Bunda. E depois deixa-me deslocar para a direita. Então esta é a barra de progresso, talvez aviso de fundo. E depois o estilo. Vamos ter a largura igual a 25%. Então, agora, se voltarmos oh, desculpe, nós construímos no transporte. Deus. E é um caso. Deixe-me removê-lo e colocá-lo em casa depois de algumas linhas da Terra vezes 20. E vamos tentar aqui, atualizar. E como podemos ver, temos nossa barra de progresso bem aqui. Então este é o primeiro. E se voltarmos agora e mudarmos isso para 50%, podemos ir e perceber que agora é 50% em vez de 25. Então esta largura para alterar a barra de progresso do secundário para o aviso. E parece que você está conseguindo algo. Então é isso para a barra de progresso. Vamos continuar. Então esta é a divisão e esta é a economia. E claro, eu vou pegar isso e começar a partir daqui. Então a segunda divisão será o seno n está enviando o pagamento e esta ordem. E estes estarão aqui depois da barra de progresso. Então vamos criar uma segunda linha com PDE5 e, em seguida, também criar algumas colunas. Assim, o primeiro seria seno n e a divisão é segundo deficiente seria de classe talvez Coluna 3. Também. Nós vimos e, neste caso, vamos ter transporte. Em seguida, a coluna três ele com o pagamento. E, claro, finalmente, o lugar. Então, como podemos ver, estamos agora na disposição, talvez vamos mudar isso para 25 novamente. E como podemos ver, temos sine n frete com base pagamento e ordem lugar. E agora estamos nesta posição onde assinamos final e estamos no crepúsculo de envio. Então, neste caso, nossa parte traseira e nós vamos cuidar de verificar se o usuário está conectado. Se for esse o caso, ele vai levá-lo automaticamente a este. E, claro, se ele não está assinado, ele também pode entrar e, em seguida, voltar para este envio adicionando as informações de envio. Então este é o pagamento de transporte seno n e estamos bem por enquanto. Vamos em frente e criar nossa caixa real onde vamos ter as informações de envio. Então a primeira coisa que vamos fazer é criar o código e Tax Center, então também arquivo PY e talvez texto luz. E nós vamos adicionar a coluna 1 apenas para ter algum espaço à esquerda. E, claro, vai ter o bronzeado coluna com fundo escuro e texto. Começa. E vamos adicionar um pouco de estilo. Então o estilo será a altura. E, neste caso, a altura será 28 REM como abri-lo e criar formulário padrão estará vazio por enquanto. E é claro que vamos criar as entradas. Então eu estou pensando em adicionar várias caixas de entrada e vamos criá-las usando o grupo de formulários. Então, para o grupo, e então nós temos o rótulo. E esta gravadora será da classe B. Por que R0? E talvez o endereço completo. Então temos a entrada real do texto do tipo. Então temos algumas classes como controle de formulário. E talvez seja isso, esse é o nome e endereço. E, claro, espaço reservado, talvez na aldeia. E então eu acho que é isso. Vamos copiar esta rivalidade mais vezes. Vamos nos dirigir. Então vamos mudar isso para cidade. E talvez aqui. E você está sentado e, claro, o número de telefone. Então, aqui o número. E, finalmente, temos talvez vamos adicionar o próximo botão onde o usuário pode prosseguir para a próxima tarefa sempre que ele terminar com essas informações. Então vamos fazer isso usando talvez um grupo de entrada. Ou vamos supor, digamos que vamos usar os botões simples. Então, Centro de Impostos, depois B13. E isso é basicamente no tipo de botão enviar. E então temos classes como btn, btn-primary. E então temos centro de texto, e este é o botão Próximo. E agora, se voltarmos, vamos nos refrescar. E como você pode ver, temos nossa ordem de pagamento sine n envio. Esta é a barra, barra de progresso, e agora estamos em 25%. Temos de preencher isto. E depois de imprimi-los, podemos ir para o próximo. E, claro, depois do próximo, teremos o método de pagamento. Então nós vamos atualizar esta barra de navegação e criar um método de pagamento exatamente como este. Então vamos voltar e criar uma grande queda. Agora temos a barra de navegação, temos a barra de progresso, e temos tudo para o endereço. Vamos copiar isto. E, claro, vamos colá-lo aqui em baixo, mas vamos ter algumas linhas. E aqui vamos nós. Agora a barra de progresso estará em 50%. E, claro, vamos remover estes. E agora estamos bem. Então este é o nosso O segundo em que temos o método de pagamento real e temos que assinar tudo o que precisamos. Vamos apagar isto e começar uma nova divisão aqui. Então, depois de fazer pedidos e ter essas divisões, talvez vamos adicionar aqui um novo texto de linha centrado o Wi-Fi. Ok, então estamos bem por enquanto. Vamos ter a coluna um 10. E, claro, precisamos mudar esse grupo de formulários. Então, aqui vamos nós. Vamos alimentar tudo isso. E isso começa com a criação de uma coluna 2 e coluna 1. E então vamos ter o centro de texto. E, claro, vamos ter deformado que vamos nos submeter. E então temos a divisão e vamos ter algumas aulas, como o cartão. Então teríamos texto branco, então teríamos centro de texto. Então este método de pagamento, já que não temos apenas um método de pagamento, que é o dinheiro na entrega por enquanto, vamos criá-lo como um cartão. Então é isso, margem inferior. E, claro, vamos adicionar algum estilo, como margem 0. Então também não temos nenhum. E então a largura máxima de 18 está em m. E, finalmente, o botão de margem, dez pixels. E este é o fim para esta divisão. Vamos abri-lo e começar a criar algum conteúdo aqui. Assim, o primeiro seria o cabeçalho cortado, que será Pagamento 2. Eu vou simplesmente criar ou pagamento de tempo aqui. E então vamos criar o corpo do cartão. E aqui vamos ter as diferentes opções, mas por enquanto vamos ficar com apenas uma opção. Então será um telefone. Vamos usá-lo como uma caixa de seleção. Então os textos começam e p53. E agora estamos bem. Podemos começar com a entrada do tipo caixa de seleção. E, em seguida, vamos adicionar algumas classes para controle de verificação. E finalmente, talvez adicione o ID. Então vamos usá-lo para mais tarde, o que é talvez eu faça um exemplo. E vamos apagar isto. Agora somos bons para a entrada. Vamos criar o rótulo. E este rótulo será, por exemplo, verificar. E então nós também temos a etiqueta de verificação do formulário. E finalmente temos o trabalho real, que é dinheiro na entrega. E, claro, depois de tudo isso, precisamos do botão Submeter ou do botão seguinte. Então vamos criá-lo aqui mesmo. Nós vamos criar o botão e o tipo, ou ele vai ser enviado. E, claro, as classes serão btn e btn aviso. E é isso. Vamos voltar e refrescar-nos. Como podemos ver, temos nosso método de pagamento. Temos como dinheiro na entrega, mas esquecemos de digitar a próxima greve aqui. Agora, fresco, como podemos ver, nós conseguimos. Agora, o que eu estava pensando em ter este próximo como desativado, sempre que nós não escolhemos qualquer método de pagamento e sempre que escolhermos, ele vai ser e desativado. E, claro, o usuário pode ir para a próxima tarefa, que é a colocação real da ordem. Então, com isso sendo dito, este será o fim deste vídeo e o próximo vídeo, vamos colocá-los nos arquivos específicos. E é claro que vamos fazer isso, vamos ter um desativado a não marcar nenhuma caixa aqui. E nós também vamos criar uma página de ordem de lugar definido. E com isso dito, este é o fim deste vídeo. Vejo-te no próximo. 14. Ordem 2: Tudo bem, então olá e bem-vindo de volta. Neste vídeo, vamos continuar o método de pagamento. Nós dissemos que queremos desativar este botão. E sempre que clicarmos em um método de pagamento, por exemplo, se conversarmos com este, e então este próximo deve estar disponível para nós para que possamos pressionar sobre ele. Vamos em frente e fazê-lo. Agora mesmo. Temos o dinheiro na entrega. E, claro, o próximo, no entanto, o que vamos fazer é adicionar um clique à direita aqui. Então, dentro da entrada, esta é a caixa de bate-papo. E desclique indo para retornar um método que vamos criar em JavaScript. Então talvez eu dê o nome de termos mudados e dê isso a ele. E, claro, nós vamos fazer o que você vai fazer é desativar este botão. Então, se voltarmos agora e clicarmos em Atualizar, podemos ver que ele está desativado. E o que precisamos fazer agora é talvez mudá-lo assim que pressionarmos isso. Então vamos voltar e criar um script aqui. E neste script vamos criar nossa função. Vamos em frente e criar o script. Dentro do script temos a função que acabamos de nomear, termos alterados. E vai levar o chatbox, vamos limitar o chatbox. E ele vai verificar se caixa de seleção o bate-papo. Então, se for verificado, vamos chamar o elemento por ID. Então documento ponto obter elemento por ID. E vamos verificar o ID deste elemento. E como podemos ver, não temos ideia. Então, sem nome, eu vou dar-lhe um ID de próxima e, em seguida, ir para obter o elemento por ID próximo e, em seguida, mudar desabilitado para ser igual a false. Então, se a caixa de seleção estiver marcada, vamos fazer com que isso seja falso. No entanto, este não é o caso. Nós vamos obter o elemento por ID e, em seguida, simplesmente torná-lo verdadeiro. Então é isso. Agora um figo, volte e pressione Atualizar, vai ter este botão desativado. No entanto, uma vez que clicarmos sobre isso, nós vamos tê-lo. Podemos usá-lo e se removê-lo, o mesmo que antes. Então, agora que criamos o envio e o método de pagamento, vamos em frente e começar com o pedido de lugar real. Pêssego. Então agora vamos em frente e mover tudo isso para suas páginas específicas. Então, aqui, vamos em frente e criar uma nova página e que vamos nomeá-lo talvez um cartão de pagamento e Node.js. E é claro que vamos remover tudo isso aqui. Então vamos removê-los, adicioná-los aqui. E, claro, vamos adicionar rodapé e cabeçalho. Então este é o rodapé. Vou fazer a mesma coisa por aqui. Então aqui temos o cabeçalho e estamos bem por enquanto. Claro que ainda temos este, que é o método de envio. Então vamos em frente e removê-lo também e colocá-lo em sua posição apropriada. Neste caso, está no corte de transporte. Então, agora, se voltarmos à nossa página inicial e clicarmos em Atualizar, vamos ter alguns espaços vazios, já que temos essas linhas. Agora vamos refrescar-nos e estamos bem. Então é isso para as duas primeiras páginas. Agora vamos criar a página de pedido de lugar real. Então vamos em frente e adicionar algumas linhas, talvez dn. E agora vamos começar com a criação do fluido do contêiner. Então eu vou criar a linha com algum preenchimento no eixo y. Então eu estava pensando em deixar, como de costume, algum espaço à esquerda e então começar com a caixa real. E neste caso, mas estou pensando em adicionar uma linha. Então teríamos o nosso DOM. E dentro desta linha, eu vou criar como de costume. Talvez eu tenha copiado. Sim, então como é o mesmo, vamos copiar tudo isso do tópico anterior, vá para o pagamento. Deus, como podemos ver, isso é deficiente e não precisamos de tudo isso na verdade, só precisamos desses dois. Então vamos copiá-los. Certo? E vamos voltar para a nossa página inicial deles aqui. E é claro que precisamos adicionar o globo com algum preenchimento, como dissemos. E vamos remover isso. E nós temos, então é isso. Vamos colocá-lo aqui. E talvez a divisão que está desaparecida. E agora estamos bem. E este é o transporte ou a barra de progresso, como podemos ver aqui nós temos. Agora vamos criar o pedido de lugar, mas antes disso, vamos ajustar isso. Então agora temos 75 por cento em vez de 50. E se voltarmos, estamos agora a 75%. Ainda temos apenas a Ordem Local. Então agora vamos começar com a criação da página real. Então o que eu vou fazer é criar um novo. Reme neste caso aqui. E eu vou ter a primeira coluna com talvez sete em tamanho médio. E então temos que ir com algum preenchimento e, claro, a coluna real. E o que eu estava pensando é adicionar a localização. Então a primeira coisa que vamos mostrar é a localização real da pessoa com a informação que ele inseriu do transporte. E, claro, talvez um botão de edição para que ele possa voltar ao envio e localização dos editores. Então, para fazer isso, vamos usar um carrinho como de costume. Então cartão com um pouco de fundo, luz, botão de margem três. E podemos começar com o cabeçalho do cartão. E, em seguida, vai adicionar talvez endereço, e, em seguida, seguido pelo endereço real. Então talvez, vamos supor aldeia, talvez Street, construção. E depois disso vamos ter o corpo do cartão. Vamos, vamos mostrar a cidade. Então, em H5 e eu vou fazer isso como ket chamado título. E depois vamos ter a cidade. E depois disso podemos criar o telefone ou o número de telefone. E neste caso, eu estava pensando em adicionar o número de telefone à esquerda e o botão de edição à direita. Então vamos criar uma nova linha. Cientistas roubaram fazer sexo para o primeiro. E o parágrafo será de texto. E talvez o número de telefone. Vamos supor que 4, 4, 4, 4, 4, 4, 4, 4, 4, 4. E depois disso vamos criar uma nova coluna, também sexo. E neste caso vamos ter o botão que terá várias classes, como BTN, flutuar até o fim. E, claro, esboço BTN, primário. E, claro, a edição real. Agora, se voltarmos e acertarmos Refresh, vamos conseguir algo assim. Temos o endereço, a cidade, o número de telefone e o botão Editar para editar tudo isso. Então, no backend, não queremos criar este botão. Nós nos direcionamos para a página de envio onde o usuário pode editar todos estes e, em seguida, voltar, voltar para a página do titular do lugar. Então este é o primeiro. E vamos continuar com a criação do método de pagamento. Então eu acho que é a mesma coisa. E vamos criar uma nova linha aqui. E neste caso, vou ter apenas uma coluna. E, em seguida, o cartão com os padrões de fundo da luz. E, claro, a margin-bottom três. Vamos abrir e começar por aqui. Então é isso dentro desta divisão, vamos ter o cabeçalho da carta como de costume. E neste caso, ele só dirá pagamento. E uma vez que só temos um pagamento, vou adicioná-lo simplesmente usando o título 5. Neste caso, como de costume, é chamado de título e, em seguida, dinheiro na entrega. Então é isso. Agora, se voltarmos para o parágrafo e aderiu classe chamada Texto, vai ter talvez entrega gratuita em pedidos antigos acima talvez $15. Então é isso. E agora terminamos com a segunda moeda. Se voltarmos e atualizar para ter algo como isto, mas eu estava pensando em adicioná-lo sob a coluna que está em sete médias. Então, vamos voltar. Vamos ver o que fizemos de errado? Se eu voltar para aqui temos a coluna e aqui deveríamos ter acrescentado este papel. Então, vamos removê-lo e colocá-lo aqui. Agora, se voltarmos e apertarmos atualizar, vamos obter o endereço e depois o método de pagamento. E ainda temos alguns espaços aqui. E neste espaço vazio, eu estou realmente pensando em adicionar o botão Fazer pedido e onde o usuário também pode ver seus pedidos reais. Então, mas antes disso, eu vou adicionar um novo personagem aqui. E este cartão irá exibir todos os itens que estão no cliente Scott. Então vamos em frente e começar com isso. Vamos voltar. E como de costume, vamos tê-lo dentro desta divisão. E vamos fazer isso aqui por nós. Vamos criar nossa coluna, então, sinto muito, superar e depois nossa coluna. E, claro, o fundo soma com luz e muito e inferior três como de costume. E nós temos o cabeçalho do cartão. Neste caso, vai ter o parágrafo com alguns estilos, como exibição, talvez inline-block. E é claro que temos que ter suas ordens ou cura. Sim, acho que todos esses itens são seus. Soa melhor. Então temos outro parágrafo com o flutuador da classe. E neste caso vamos ter estilo. E nós também vamos exibir bloco inline. E neste caso vamos ter preços. Então os itens estão na mão esquerda, os preços à direita. Então isso é para o cabeçalho. E neste caso vamos começar com o amigo frio. Vamos em frente e criar uma nova divisão com corpo e justificar o centro de conteúdo. E como sabemos, começamos com a criação do E4 para enviar. E depois temos uma fileira. E neste caso vamos ter a coluna três. E no final desta coluna, eu estou pensando em adicionar a imagem, os itens para que suponha que ele escolha o item imagem buffet 1 e talvez adicionar alguns estilos. Vamos ver. Primeiro vamos exibir bloco inline-e, em seguida, vamos ter a altura de cinco Barry. E finalmente largura de também muito final. Então é isso para a imagem. Agora vamos criar outra coluna. E, neste caso, teremos a coluna 9. E dentro desta coluna eu vou ter o parágrafo para o título. Então, como de costume estilo inline bloco, eu sinto muito. É isto. Temos dentro deste bloco de exibição telha inline. E então nós temos o título real que suponha que escolhemos Chanson, e então nós vamos ter outro parágrafo para o preço. E desta vez será pode estar exibindo e também inline-block. E é claro que agora vamos ter a carga da classe e, e vamos supor que temos 25 dólares. Então, agora, se você voltar para atualizar, ver algo assim, ainda temos algumas modificações para isso e vamos fazê-las no próximo vídeo. Então, vejo você então. 15. Ordem 3: Tudo bem, então agora que pena, vamos adicionar o resto da informação para que ainda temos, nós já adicionamos o título e o preço. Talvez nós vamos adicionar isso, adicionar a quantidade, na verdade. Então vamos adicionar um parágrafo que diz quantidade. E, em seguida, seguido pela quantidade real. Eu vou tê-lo em um espaço. Neste caso, suponhamos que o usuário comprou três. E depois disso vamos criar uma nova linha depois desta divisão. E neste caso, vamos tê-lo para a demo. Então talvez a coluna 6 e isso seria esvaziado e nós temos coluna e sexo. E neste caso, vamos ter o botão “remover”. Então vamos adicionar o botão. E o botão real terá algumas classes como PTEN, videogame changer, e então flutuar, certo? E, claro, o tipo submete. Então, sim, acho que é isso. Vamos voltar e atualizar. E como podem ver, temos a quantidade aqui. Talvez vamos adicionar a quantidade realmente a este. Então vamos fazer isso. Vamos ter aqui a cor, e vamos adicioná-la realmente dentro desta coluna. Mas já que estamos usando display inline-block, vou ter uma nova divisão aqui. Dentro desta divisão, vamos ter estes dois parágrafos e depois seguidos por esta quantidade. E, claro, botão cientistas, vamos adicionar controle remoto. Então eu acho que isso é basicamente, se nós atualizá-lo, nós vamos ter a quantidade 3 e o botão removido para realmente remover este item. Então, agora, para tudo isso, vamos adicionar uma linha. E neste caso, depois da d4 aqui, vou adicionar cada parte. E se eu apertar Refresh, quero ter esta linha. E, claro, se tivermos vários, talvez vários itens, eles ficarão assim. Então vamos em frente e temos este corpo do cartão. E dentro deste corpo vamos criar várias formas para vários itens. Então eu vou copiar tudo isso algumas vezes. E agora, se voltarmos e apertarmos a atualização, você receberá vários itens. E, claro, cada item consiste em imagem específica, título do Pacífico, a quantidade que o usuário comprou e, claro, o preço do item. E também temos o botão remover para remover todos os itens que o usuário não deseja. Então é isso para os itens. E, neste caso, ainda temos o contrato de encomenda de lugar real aqui. Então, se você se lembra, nós realmente criamos uma coluna bem aqui, que é esta aqui. Então, se você quiser ter talvez aqui, sim, então é isso. Temos a coluna do meio. Sete. Então, depois das sete, eu estou pensando que a partir do 7012 nós vamos ter a Ordem Local. Então vamos rolar para baixo. Temos que esta divisão é criar uma nova divisão bem aqui. E neste caso, vamos ter uma nova coluna a meio de cinco. E neste caso nós vamos ter, como de costume, uma nova linha com algum preenchimento no eixo y e, em seguida, outra coluna, depois o Deus real. E neste caso nós vamos ter, como de costume, seca ruim, luz e assistir o botão três. E então também temos o formulário que vamos enviar para o pedido de colocação. Então é isso. Vamos ter o cabeçalho da carta, como de costume. Dentro deste cabeçalho de cartão, ter um centro asteca. E nós vamos ter o botão com alguns estilos. Então eu estou pensando que a largura deste botão deve ser 65 por cento do nosso cartão. E então ainda temos as classes de btn, VT e talvez amarelo, então aviso. E então temos talvez, vamos adicionar o onclick e retornar Primeira Ordem e este método que usá-lo mais tarde, mas por enquanto eu ainda adicionei. E é claro que o tipo deve ser um botão, e então ainda temos o nome, talvez ação. E, claro, a Ordem de Lugar bem aqui. Então faça o pedido. E agora, se voltarmos a atualizar, vamos ter este cartão com apenas um cabeçalho que diz lugar tudo. Então é isso para o cabeçalho. Vamos continuar criando o corpo. Então, vamos voltar. Ainda temos o corpo do cartão, e neste caso vou criá-lo aqui mesmo. Tão bom corpo. E ainda temos o título do cartão. Neste caso. Vou emitir um resumo do cartão. E vamos começar com uma nova linha. E esta linha vai ter os itens, então coluna 6. E, em seguida, dentro disso e ir para colocar itens. Então vamos ter a, talvez a soma. Então, no sexo da coluna, o segundo, vamos adicionar talvez por agora 70. E, claro, quando terminarmos e projetarmos e equipararmos o ato. Na verdade, o programa deve talvez adicionar todos os itens aos preços de todos os itens e, em seguida, exibi-lo sob o resumo do pedido. Mas, por enquanto, vamos adicionar $70. E depois de ficar tonelada com o esforço vai criar uma nova linha. Neste caso, vamos fazer um novo sexo de coluna. Isto é para a entrega. E então vamos adicionar outra coluna, sexo. Que é 3, talvez. E depois disso vamos criar uma nova linha com alguns B13. E neste caso vamos ter o total do pedido ou talvez o preço total. Então isso é o sexo da coluna. E neste caso, ou o total, e depois seguido pela quantidade real. Então vamos fazer um traço aqui, equilibrado seis. E digamos que também é alguém em dólares, já que a entrega é grátis. Então eu acho que é isso. Talvez você também pode realmente adicionar talvez um parágrafo que diz que você não tem itens em seu cartão. Se não tivermos nenhum item em nosso código. Mas por enquanto vamos ficar com isso e onde quer que estejamos fazendo o back-end, também podemos adicioná-lo. Então vamos atualizar e como você pode ver, temos os outros itens de resumo, entrega tem alguns preenchimentos, e também o outro total com o total real. Agora, eu acho que este é o fim para o, este aqui. E, claro, podemos adicionar também um novo cartão aqui para ver todas as suas compras antigas. E neste caso, eu vou criá-lo aqui mesmo depois disso. Então, dentro desta coluna, vai ter uma nova linha. E neste caso vamos ter como de costume, a coluna com luz. E, claro, a margem inferior verde. Então cabeçalho do cartão, como de costume. E então, claro, vamos ter o parágrafo. E neste caso, vamos torná-lo uma nova linha e estilo. Talvez exibir bloco inline. E, em seguida, é claro, temos a carga de classe de compras, e então tivemos o bloco de exibição estilo inline como de costume. E, neste caso, temos o recebido. Então o que estamos mostrando aqui são as ordens reais do usuário e se ele é recebido ou não. Então eu acho que é isso para o cabeçalho do cartão. Vamos voltar e ver como refrescá-lo. Sim, acho que parece bom. Temos suas compras e se ele é recebido no não. E depois Daniel vai criar o corpo do cartão com justificar centro de conteúdo. E depois disso vamos ter a fila. E depois, podemos começar com a criação do parágrafo, talvez quatro. Talvez remova esta aula por enquanto, vou adicionar alguns estilos. Então, neste momento seria exibir bloco inline. E então, então, eu tenho a data do pedido. Então data e talvez vamos supor 26 a 2021. E depois seguido por talvez o preço. Mas antes vamos em frente e atualizar. E como podemos ver, temos a data do pedido. E eu estava pensando em adicionar o botão real de receber ou dobrar bem aqui. E, claro, o total ou o preço aqui. Então, em vez de adicionar o preço aqui, eu vou ter o botão que diz Pendente ou Recebido. Então vamos fazer os dois. E o Andrew diferente vai exibir um deles de acordo com se o item é recebido ou não. Então inundação botão e BD e BD e sucesso se for recebido. E talvez sucesso, eu sinto muito. E, claro, o estilo que é exibir bloco inline. Então este é o primeiro botão e eu vou escrever recebido. E depois disso, depois desta divisão, vamos ter uma nova divisão. E neste caso, eu vou ter o total é e talvez $120. Agora, se voltarmos e atualizarmos, como podemos ver, esse total como e este botão deve estar aqui. Então vamos em frente e corrigi-lo. Dentro deste botão temos o estilo de exibição inline-block. No entanto, eu acho que temos provavelmente vamos apenas apagar isso. Eu fiz de novo. Então nós temos aqui o bloco inline-e nós esquecemos de criar uma nova divisão. Nós vamos armazenar tudo isso, então vamos em frente e fazê-lo aqui. Então vamos nos refrescar. E como podem ver, temos o botão recebido bem aqui. E talvez também possamos ter isso como um para pequenos. E vamos refrescar-nos. E como podemos ver, temos isso como um total atrás ou depois da data do pedido. Então, este é o primeiro. Vamos adicionar talvez vamos em frente e adicionar outra linha. Então HR e, em seguida, copiar tudo isso, em seguida, colado mais algumas vezes. Então este é o Atlas. Vá em frente e atualize. E como podemos ver, temos ordens diferentes. Mas isso não é o que eu estava pensando. Eu estava pensando em tê-los todos dentro do cartão. Então vamos voltar e ver o problema. Então aqui, um conjunto de ter este aqui. Vou tê-lo logo após este. E tudo isso deve estar no corpo do cartão. Então eu vou copiar tudo isso e colado mais algumas vezes. Vamos voltar e atualizar. E como podemos ver, recebemos nossos pedidos com a data Euler, a quantidade total dela, e se ela é recebida ou não. E pelo bem deste exemplo, vou mudar isto para pendente só para que saibam como vão fazê-lo se o pedido ainda não foi entregue. Então eu vou ter aqui, em vez de btn-sucesso, btn perigo. E em vez de receber, vou ter flexão. Então este é o Atlas. Vá em frente e refresque-o. E como podemos ver, temos o botão que diz pendente bem aqui. E, no entanto, todos os outros itens são recebidos. Então é isso para este vídeo que criamos. Para encerrá-lo, criamos esses pequenos cartões onde temos o pagamento do endereço. Então temos todos os itens que estão no cartão do usuário e, claro, suas compras antigas. E também temos o total ou os resumos. Então temos o total aqui. E esta deve ser a soma de todos os itens multiplicados pela quantidade que o usuário encomendou. Então isso é basicamente para este vídeo. O próximo vídeo vamos começar com a construção da página de administração. E ainda temos a página de inscrição onde o usuário se foi. Agora, inscreva-se neste site. Dito isso, este é o fim deste vídeo. Vejo-te no próximo. 16. Admin: Olá e bem-vindo de volta. Neste vídeo, vamos criar a página de administração. E, na verdade, a página de administração consistirá em duas páginas. O primeiro que vamos construir juntos, e o segundo será o seu projeto que você vai criar. Então vamos começar com o primeiro em que vamos ter várias categorias, marcas e itens que podemos adicionar. Então vamos voltar para Deus. E antes de tudo, já que ainda temos tudo isso aqui, vamos talvez adicioná-los ao pedido de lugar. Então aqui, sempre que tivermos este, que é o fluido do recipiente, vamos levar tudo. E eles disseram e o pedido de lugar, eu acredito que nós não criamos um novo arquivo, Place Order, EJS. E neste caso eu vou adicionar tudo isso aqui. E como de costume, não se esqueça do cabeçalho e do rodapé. Então é isso para o rodapé. E vamos rolar para cima no cabeçalho bem aqui. E terminamos para a Ordem de Lugar. Agora estamos na casa que EJS e vamos criar a primeira página de administração. Então, como dissemos, talvez precisamos de uma caixa onde possamos adicionar nossas categorias. Então vamos em frente e começar com a criação do fluido do recipiente. E então dentro desta e ir para Criá-la crescer com antes. E, claro, coluna, sexo grande, fundo, luz e ser três. Então, este é o primeiro. Vamos criar o formulário. E, claro, dentro deste formulário eu vou ter a categoria adicionar. Então vamos adicioná-lo aqui e, em seguida, seguido por um rótulo. E este será o nome da categoria. E, claro, uma divisão que é input-group. E dentro deste grupo de entrada vai ter a adição real da categoria. Então vamos ter uma entrada de texto tipo e a classe será formado controle. E então o espaço reservado, talvez nome da categoria ou nome, simplesmente um nome. E eu acho que é isso. Se voltarmos e atualizarmos, teremos algo parecido com isso. Então nós temos a academia, você tem o nome da categoria, e nós também temos o nome real. Agora, quando pensar é adicionar a imagem desta categoria. Então vamos voltar e talvez copiar tudo isso e colá-lo aqui. Então imagem categoria, e nós não vamos adicionar um link para a imagem. Nós realmente vamos adicionar o baixo, então eu vou deixá-lo como texto. E o que vamos fazer é adicionar todas as imagens à nossa pasta de imagens. E então podemos escolher entre isso. Já que vamos entrar no caminho. Então é isso para a imagem. Vamos apenas, talvez, mal. E se voltarmos e atualizarmos e então eu tenho o nome e a imagem da categoria. Então este é o fim para a categoria Adicionar. Vamos fazer exatamente a mesma coisa para a marca e colocá-la aqui. Então agora vamos voltar e pegar tudo isso, que é sexo de coluna. Copie-o e coloque-o aqui e aqui temos a marca, o nome da marca. E então temos a imagem da marca. E como podem ver, se voltarmos e apertarmos a atualização, teremos algo parecido com isso. No entanto, ainda temos que adicionar talvez, talvez torná-lo escuro. Então conjunto de luz de fundo que é nua escuro e CO2 acontecer. Vamos refrescar. E, claro, não precisamos esquecer de adicionar o imposto como. Então este é o Atlas. Volte e atualize. E como podemos ver, temos a categoria add e as caixas de marca onde temos, podemos inserir a categoria e a imagem. E, claro, não queremos esquecer o botão real enviar. Então vamos criar outra divisão. Vamos adicionar o botão. E isso será da classe btn, btn, talvez aqui, escuro. E então temos que nos submeter. E nós vamos ter a mesma coisa aqui. Então, botão. E, em seguida, algumas classes como btn, btn luz desta vez, já que estamos usando o fundo do escuro e enviar, atualizar. E como podemos ver, temos o envio e envio para a nossa marca e categoria. Agora que terminamos com nossa marca e categoria, o próximo passo é realmente criar a adição de um item. Então, vamos voltar. E aqui temos o formulário, ainda temos divisão, e isso é para a linha. Vamos criar uma nova linha. E neste caso, vamos ter a medalha de seis coluna e o fundo escuro. E também deslizamento fiscal com algum preenchimento de todos os lados. E agora podemos criar nossa forma. E, em seguida, dentro deste formulário, vamos começar com a criação do H3, que é adicionar item. E, claro, temos que segui-lo com o primeiro rótulo para o nome do item. Rótulo para nome. E este será ItemName, em seguida, seguido por uma divisão do grupo de entrada como de costume. Então grupo de entrada. E então ainda temos margem inferior três. E é claro que precisamos adicionar a entrada real. Então eu adiciono um texto de entrada e, em seguida, temos controle de formulário de classe. E também temos o nome, que é o nome real, e talvez item de espaço reservado, nome ou nada. Eu acho que talvez você vai fazer isso como nome. E isso é basicamente para a primeira divisão. Agora, ainda temos. Algumas coisas. Então vamos copiar isso e colá-lo mais algumas vezes. Então temos o nome do item pode ser a descrição do item, e então nós também temos o item. Vamos adicionar aqui a categoria, em seguida, seguido pela marca do item. E, claro, ainda temos o preço, quantidade e a imagem e também o tamanho. Então item, marca, item, imagem, digamos. E depois disso, vamos ter a quantidade do item. Então esta é a quantidade disponível em nosso estoque. E depois disso, vamos acabar com a imagem do item, óleo. Ok, então nós adicionamos aqui a imagem para que ainda tenhamos o preço. Basicamente temos tudo o que precisamos, ainda temos o tamanho. Então, vamos adicioná-lo bem rápido aqui. Então é isso, este é o lado. E finalmente, vamos ter o botão de enviar. E eu estava pensando em adicionar talvez um botão para ver todos os itens que temos. Então vamos fazer isso muito bem. Aqui. Temos este tamanho de item. Vamos criar uma nova linha aqui, o sexo da coluna para o botão enviar. Então, o tipo deve ser Enviar. E depois dessa classe, btn, VT e luz como de costume, eo botão Enviar real. E depois disso vamos criar as colunas x. E neste caso, vamos tê-lo. Certo? Então flutua, certo, ou flutua e o metal. E este formulário será o formulário que vamos enviar botão será btn, btn carga luz, e, em seguida, ver todos os itens. Então, basicamente, se eu ir em frente e atualizar, podemos ver que temos todos os itens em folk. Então temos o nome, descrição, categoria, marca, imagem, quantidade, preço e tamanho. Então isso é basicamente para o item. E agora precisamos criar outra divisão talvez. E esta divisão consiste em todas as ordens que os usuários encomendaram agora. E, claro, precisamos criar uma nova, talvez uma nova página para ver todos os itens e talvez alterar qualquer um deles se quisermos. Então, este é o fim para este. Vamos em frente e criar a próxima divisão. Então vamos voltar ao nosso código. E neste caso, eu vou rolar todo o caminho até aqui e começar com as ordens reais. Então, depois de terminar com este formulário, este é para a coluna e ainda na mesma linha. Então aqui, vamos criar uma nova coluna, sexo do meio e nosso pensamento para fazê-la rolar. E veremos o que significa pergaminho de pontuação em um minuto. Então isso é para as ordens e. Claro que teremos a divisão tão fria quanto criar nossa forma. E, em seguida, dentro deste formulário eu vou ter o cabeçalho do cartão como de costume com algum aviso de fundo e o texto deve estar escuro. Então vamos em frente e abri-la. Dentro disso, vamos ter o número do pedido neste caso. Talvez eu escreva como um. E, claro, seguido por outro parágrafo com o cartão de classes, texto e flutuador. E neste caso, isto é para o preço total e seguido por talvez, digamos US $75. Então é isso. Se você voltar e atualizar, teremos algo parecido com isso. Estas são as ordens e dentro das ordens temos a primeira ordem com um preço total de uma. Agora podemos adicionar talvez algumas informações sobre isso. E é claro que não vamos adicionar todos os itens que o usuário comprou. Nós só vamos adicionar talvez sua localização, o preço total que já adicionamos, e talvez alguns botões. E sempre que o usuário, o administrador pressiona este botão, ele irá levá-lo para a ordem real com todos os detalhes deste pedido. Então é isso. Vamos continuar criando o corpo do cartão, o chamado coelho. E neste caso dentro do corpo temos o título do carro como de costume, que será talvez o usuário de cuja ordem é esta? Então, talvez eu dê o nome dele. E neste caso, eu vou ter a localização e o texto do cartão, assim chamado x. e neste caso vai ter talvez Líbano. E depois disso, vamos ter a data. Assim também outro contexto com a data pode ser 26 para 2021 e, em seguida, seguido pelo número de telefone e outro contexto. Então é isso, talvez mais de 4, 4, 4. Então, se você voltar e clicar em atualizar, você vai ter isso. Temos o nome, Líbano, a data e o número de telefone. E claro que vou adicionar talvez o botão de vista aqui. Então vamos em frente e criar o botão para ver a ordem completa. E eu estava pensando em adicioná-lo bem aqui. E é claro que aqui eu esqueci de tê-los como o parágrafo em vez de texto em vez de divisão. Então vamos guiá-los e consertá-los. Certo, então agora que os consertamos, vamos criar o botão com o tipo de envio. E então temos as classes que são o btn, btn-primary. E eu acho que nós terminamos ainda temos que nos ver. Agora vamos voltar e refrescar-nos. E como podemos ver, temos a ordem real. E talvez porque isso não está pegando a página inteira para toda a divisão, vamos fazer o pedido de frutos do mar aqui. Então eu vou fazer é ter essas tags de título e todas essas novas linhas e coluna 6. Vamos ter tudo isto dentro desta coluna. E então eu vou criar outra coluna que também é sexo. E neste caso, vou ter o botão de submissão. Então, agora, se voltarmos e apertarmos a atualização, você vai ter algo parecido com isso. E, claro, podemos adicionar as classes, como carregar. E, como você pode ver, está no final bem aqui. Então é isso. Podemos sempre adicionar, talvez pegar tudo isso e copiá-lo mais algumas vezes, e vamos atualizá-lo. E como podemos ver, temos nossas ordens, várias ordens. E, claro, este é o fim para esta página. Criamos todas as páginas de administração ou recursos de administração mencionados, e é isso para a primeira página de administração. Vejo você no próximo vídeo. 17. Itens: Tudo bem, então bem-vindo de volta. Neste vídeo vamos criar o discurso do item onde se o administrador clicar nesta vista todos os itens que ele vai ser direcionado para todos os itens com todas as informações que ele pode editar. Então vamos em frente e começar com isso. Mas primeiro, antes de fazer qualquer coisa que seja apenas a cor deste e colocá-lo, coloque-o na página de administração real. Então eu vou criar um novo arquivo. E esta será a página de administração ou o, sim, então eu acho que faz sentido admin para o EJS. E, neste caso, vamos ter estes. E, claro, vamos começar a construir os itens aqui. Então a primeira coisa que vamos criar é um formulário. E depois disso teremos que criar o fluido do contêiner. E depois seguido por talvez a fila. E depois, claro, o cânone. Mas antes disso, vamos adicionar um pouco de preenchimento, então talvez B5. E agora estamos bem. Podemos começar com a criação do cartão. E eu estava pensando em simplesmente criar um corpo frio. E dentro do Skype, amigo, eu vou ter o fundo, luz e justificar o centro de conteúdo. E agora vamos começar construindo a primeira linha, depois a coluna grande três. E a primeira coisa que vamos adicionar é a imagem. Então talvez imagens ou imagens de barra. E mencionar um que você Vg, dpi JPEG. E, claro, vai ter que adicionar o estilo. Assim, a exibição deve ser inline-block. A altura. Talvez 15 pixels seja bom. Sinto muito, 15 da manhã. E a largura também será de 15 RT m. E isso é basicamente para a imagem. Vamos criar outra divisão para o texto. E neste caso, eu vou ter algum planejamento antes e detecta o centro. E então vamos começar criando a linha. Então temos o sexo da coluna. E, claro, vamos ter a entrada para editar. Então este tipo deve ser Button. E, claro, a idéia que é necessário nisso e a classe btn, btn aviso. E depois PY dois. E finalmente, depois de terminar com esta entrada, vai ter que criar outra coluna de código de seis, que irá conter o botão real do tipo enviar. E neste caso, vamos desativá-lo por enquanto. Talvez eu limite no próximo verão. Só para os roteirizados, vamos criar. Então seja o n, ser dois btn aviso e, em seguida, claro, ser maneira também. Então, este é o primeiro. Se avançarmos e atualizarmos, teremos algo parecido com isso, mas esquecemos de adicionar os botões. Então aqui precisamos adicionar, primeiro lugar, temos o primeiro botão, que é este. E neste caso, vou ter o botão Enviar. Se voltarmos e atualizarmos, vou ter algo parecido com isso. Mas, no entanto, ainda temos este botão. E neste caso, sinto muito, precisamos fazer isso como um botão bem aqui. Então, o tubo deve ser submetido. E como de costume, talvez id. Nós vamos torná-lo adicionado e, em seguida, declara o BD final e aviso. Como de costume e PGY2. Vamos apagar isto e dentro deste botão vamos ter que editar. Então este é um basicamente nós temos o editar e enviar. E, claro, a edição não está desativada, mas no entanto, o botão enviar está desativado porque não alteramos nada para enviar. E isso é o que parece que a imagem, e agora precisamos adicionar a informação aqui. Então vamos em frente e começar com eles. Ainda temos, já criamos a coluna grande três. Então o que vamos fazer é criar a coluna grande 9 para vender ter nove. E neste caso um sal com o fluxo. Então temos sexo em coluna. E, claro, vamos ter o rótulo para o nome, talvez o nome do produto. E, em seguida, seguido pela divisão que é o grupo de entrada e MV3. E, em seguida, é claro, a entrada real do texto do tipo. É claro que o nome deve ser nomeado e o deve ser desativado no início. E, claro, a classe deve ser formada, controlada. E depois seguido pela identificação do próximo semestre. E esta é a idéia de que podemos usar JavaScript. E isso é, basicamente é ir em frente e boa sorte. Como você pode ver, temos o nome do produto e ele está desativado por enquanto. Então este é o nome do produto. Vamos em frente e copiá-lo várias vezes. Ou a outra informação. Então produto, talvez a imagem. E então temos a categoria do produto. E então, claro, temos a marca do produto. E vamos copiá-lo mais uma vez. Então aqui temos o produto, talvez a quantidade. E agora, se você voltar e apertar a atualização, você vai ver algo assim. Vamos remover esta quantidade de produto daqui e colocá-lo aqui. Então vamos remover isso. E sabemos que em uma nova estrada é criar uma nova cor. E dentro disso vamos ter a quantidade do produto. E talvez tenhamos adicionado o nome da imagem. Talvez vamos adicionar o preço e o tamanho. Então vamos basear o preço do produto e o tamanho do produto. E acho que estas são todas as informações de que precisamos. Temos quatro por quatro. Oh, ok, então esquecemos a descrição. Então está pensando em remover esta base aqui. E, em seguida, é claro, adicione a descrição do produto aqui. Então é isso. Se eu voltar e atualizar, podemos ter algo parecido com isso. E isso é basicamente para os itens, vamos ter vários itens que se parecem, que, se parece com isso. E o que vamos fazer é adicionar alguns valores. Por exemplo, temos o nome do produto dentro disso, há o valor, que é talvez Johnson, talvez a descrição do produto que tem valor profundo de lorem, ipsum, e então a categoria do produto pode ser shampoo. Então valorize shampoo, produto, marca, valor, Johnson. E, claro, produto por quantidade que temos talvez vamos ter 20. O preço do produto será talvez $15, e o tamanho do produto será de 200 mililitros a imagem. Portanto, o valor deve ser danos dimensão 1 a GBG. E agora, se eu voltar e atualizar, vou ter todos os valores aqui. No entanto, ainda temos que criar o botão Editar. Então, onde quer que pressionemos adicionado, todos estes, uma das entradas deve virar para não ser desativado e, em seguida, podemos alterá-los. E sempre que pressionamos enviar, todos eles devem mudar em nosso banco de dados. No entanto, esta tarefa deve ser uma saída de volta e, e tarefas de banco de dados. E por enquanto ainda temos que torná-los não desativados sempre que passarmos este botão de edição. Então, com isso, vamos em frente e criar um descritor que vamos usar. Então vamos até aqui. E depois do formulário, vamos ter o roteiro, que talvez seja o tipo. Então, aqui, vamos adicionar o tipo que é texto JavaScript. E vamos começar com a criação do documento e pronto para, pronto para cima nesta função, que é o outro caso. Então temos a edição, que é o ID do nosso botão de edição. E, claro, no clink, vai ter que abrir esta nova função. Que irá alterar ou remover o atributo deste habilitado de todas as informações que temos. Mas esquecemos de adicionar essa aula aqui. Então eu estava pensando em adicioná-lo bem aqui. Vamos adicionar todas as informações de uma só vez. Então vamos em frente controle estrangeiro e abri-lo e adicionar a letra F. E esta é a classe que vamos usar. Então aqui vamos ter a classe F, e vamos remover este atributo de desabilitado desta classe. Então este é basicamente para este e, claro, para a classe ou o ID enviar. Se clicarmos em Enviar, ele deve desativá-los e realmente adicionar o atributo disabled. Então vamos em frente e fazê-lo agora, e eu vou explicar quando eu fizer isso. Então submeta e, claro, DoubleClick. Nós temos a função e, em seguida, nós também temos que ponto, ou este é o ID. Então, na próxima cúpula e esse atributo, vamos adicionar deficientes. Este Abel. E isso deve ser desativado. Então isso não é basicamente para este. E, claro, se voltarmos e atualizarmos, se eu pressionar nesta edição e estes estiverem abertos agora. No entanto, sempre que pressionarmos a submissão, devemos ser capazes de pressionar a submissão. Voltar aqui notamos que não adicionamos a classe F. Agora vamos voltar e atualizar. E como podemos ver, se eu clicar em editar, tenho todas as informações que posso editar. E uma vez que eu mudá-lo, digamos Johnson shampoo bebê e clique em enviar. Podemos ver que mudamos. No entanto, por enquanto, já que estamos usando, não estamos usando back-end. Ele não será alterado uma vez que o, uma vez que a página é atualizada. Então este é basicamente para este. E vamos usar este item por Deus para vários itens, na verdade para todos os nossos itens assim que terminarmos nosso site. Então agora vamos em frente e colocá-los no item, que os itens EJS, mas EJS. Agora vamos voltar para casa. Volte para a nossa forma. Vamos pegá-lo. E é claro que vamos ter este guião. Então vamos copiar tudo isso básico aqui e, em seguida, excluídos daqui. E é claro que vamos ter que adicionar o cabeçalho aqui. Então aqui temos nosso cabeçalho e agora nossos itens são DJ como arquivo está pronto. Então isso é, na verdade é para o item, então EJS. No próximo vídeo teremos que criar o método de inscrição. E esta é, na verdade, a última coisa que vamos criar. E, claro, nós não sabemos, eu tenho que esquecer nosso projeto que será apresentado após o valor de inscrição. Então, com isso sendo dito, este é o fim deste vídeo. Vejo você no próximo. 18. Inscreva-se: Olá e bem-vindo de volta. Neste vídeo, vamos criar a página de inscrição. Então vamos em frente e começar com isso aqui. A primeira coisa que vamos criar é a seção. E neste caso, vou ter que adicionar algumas aulas. Então, se o primeiro é contato apenas para mais tarde e algum preenchimento. E, em seguida, é claro, o fluido do recipiente , seguido pelo primeiro título, que é o nome real do nosso site. Então eu vou adicionar algumas classes, como texto escuro, talvez texto, maiúsculas e margem, inferior quatro e centro de texto. Então estas são as nossas aulas e talvez adicionar um site de comércio. Então é isso para o título. Agora vamos começar com a nossa primeira fila. E eu vou adicionar o centro de conteúdo justificativo como de costume, e talvez começar com a criação da primeira coluna. E neste caso, levará a coluna grande para a frente e a coluna média 54 pequena. Vou ter que fazer uma soma de seis. Talvez. Alguns estofamento na parte inferior para a rota, chão é escuro. E eu vou adicionar a caixa e isso é para o CSS mais tarde. Então esta é a nossa coluna. Vou ter que adicionar um formulário. E então dentro deste formulário eu vou criar uma linha com uma margem superior de três. Então agora vamos voltar e ver o que você criou para agora, se atualizarmos nossa página, vamos ter uma pequena caixa com o título do site de comércio eletrônico e decidir essa caixa. Nós vamos ter que adicionar a, B, o nome, sobrenome, endereço de e-mail, senha e, claro, o botão de inscrição. Então é isso, basicamente, vamos em frente e começar com o endereço de e-mail. Então, para meio de coluna de sexo e algum preenchimento no eixo y, vamos ter que criar o rótulo para o primeiro nome. E então a classe será rotulada primeiro nome. E então temos que criar a entrada do texto do tipo, seguido por algumas classes, como controle estrangeiro. Temos também MY para ser dois e esta é a entrada para CSS e talvez Nome, FirstName. Então vamos voltar e refrescar-nos. E como podemos ver, temos este primeiro nome com este deste lado, ou logo após o primeiro nome. No entanto, precisamos do nosso FirstName para ter o slide de texto. Então o que vamos fazer é usar tudo isso dentro do CSS. Por enquanto, vamos copiar isto e talvez mais algumas vezes. Primeiro nome, talvez outro talvez este para o sobrenome. Sim, acho que isso faria sentido. E sobrenome. E aqui vamos ter que adicionar nome L em vez de caminho. E como você pode ver, temos FirstName, LastName. Vamos apagar este nome aqui. E acho que estamos bem por enquanto. Vamos criar outra linha. E neste caso, esta linha estará ajudando uma divisão com um grupo de formulários e algum preenchimento como de costume. Nesse caso, vou ter que adicionar um rótulo para o e-mail. Então isso é para e-mail e classe será rotulado. E isso terá a etiqueta como endereço de e-mail. E nós temos o e-mail do tipo, a entrada do tipo e-mail, a classe, seria para controle como de costume? E então temos alguma margem em y2, b2, e entrada e nome, talvez nome de usuário. E isso é basicamente para o endereço de e-mail real. E vamos copiar isso, colá-lo mais uma vez para a senha. Então aqui, em vez de endereço de e-mail, eu vou ter que adicionar senha. E, claro, o tipo deve estar aqui, senha. E finalmente, o nome. Esses seriam os mesmos. Então isso é basicamente vamos em frente e atualizá-lo. E como podemos ver, temos nosso nome, sobrenome, e-mail, endereço e senha. No entanto, vamos apenas ajustá-los usando a luz de texto aqui. Tão leve, vamos voltar e refrescar. E como podemos ver, temos nossa página de inscrição. E a última coisa que vamos criar é o botão real para se inscrever. Então vamos voltar. Depois de criar esta divisão, eu vou ter que criar outra divisão com algumas classes como a grade. E então a lacuna deve ser Y2. E agora estamos bem. Podemos criar o nosso botão real do tipo enviar. Então nós temos os óculos, nós temos DBT, e talvez nós vamos criar B2. Vamos fazer um texto em negrito, maiúsculas. E então temos o botão enviar, e isso é para o CSS. Então temos luz de texto. E é claro que vamos ter que acrescentar. Então é isso, basicamente, se eu ir em frente e atualizá-lo, então tenho algo que se parece com isso. Então eu estava pensando por enquanto nós não vamos usar CSS. Vamos fazer isto como amarelo. Então btn, btn aviso. E acho que estamos bem. Vamos voltar e verificar. Se atualizarmos, temos este botão para se inscrever. Ou talvez você possa torná-lo em perigo. E vamos voltar, refrescar. E sim, acho que parece melhor. Então é isso para a página de inscrição. Isto é tudo consiste. Só temos este e o rodapé. Então vamos voltar e adicionar tudo isso em nossa inscrição que arquivo EJS. Então esta é a seção. Então tenho que acrescentar isto. E vamos criar um novo arquivo. E isso será inscrito que o JS e meio de tudo isso. E agora terminamos esse projeto. Ainda temos um passo. E este será o projeto real que você vai para Criar. E vamos dar uma olhada no próximo vídeo. Então vejo você então. 19. PROJETO: Olá e parabéns se chegou até aqui. Neste vídeo, vamos discutir nosso projeto. Então, o projeto é sobre a criação da página do pedido. Quando criamos o Euler ou a praia de administração, tínhamos algo parecido com isto. Temos o preço total das encomendas, título. Este é o nome do usuário. Então temos a localização, a data ou um número. E você também tem algo onde podemos clicar nele para ver o Euler completo. Neste caso, sempre que pressionarmos esta ordem Hippel, ela deve nos levar a esta. E como você pode ver nesta página, temos a ordem completa de um usuário específico. Nesse caso, o nome do usuário é como essa é a data de localização de um número? E aqui temos os itens. E aconteceu que eu pedi que você encomendasse apenas itens do bebê Johnson e seus preços são 12. E como podemos ver, 3 vezes 12 temos 36 aqui. Então esta é a ideia. A idéia deste projeto é apenas criar. Este pode ser um guia para exibir as informações do usuário e a ordem do usuário também. E você também pode adicionar esta citação que criamos na página de administração aqui apenas para visualizá-la também. E, claro, se eu pressionar isso, ele deve me levar automaticamente para o próximo usuário, que é o número do pedido 2. No entanto, tudo isso, vamos fazê-los na próxima aula quando, onde vamos trabalhar com o backend deste site. Então, com isso dito, este é o fim do nosso projeto por enquanto. Espero que você goste e boa sorte criando essa parte dele. Então, se você tiver alguma dúvida, não hesite em me perguntar na parte de discussão e por favor não se esqueça de adicionar seus projetos na seção do projeto para lhe dar meu feedback. Espero que tenham gostado deste projeto e boa sorte.