Pesquise na Comunidade

estou responsavel por fazer banners animados no site em que faço estágio mais não estou sabendo como fazer download em vídeo desses banners eles são feitos em html, css e javascrip

você pode me dizer o porque esta dando erro o Select?

html Salvar CPF Nome Data de Nascimento Idade É maior de Idade Vaga javascript class Pessoas { salvar(){ let pessoas = this.FuncaoPrincipal(); if(this.ValidaCampos(pessoas)) { this.adicionar(pessoas) } this.ListaTabela(); } FuncaoPrincipal() { // função pra criar o json let pessoas = {} pessoas.id = this.id; pessoas.CPF = document.getElementById('CPF').value; pessoas.nome = document.getElementById('nome').value; pessoas.Sobrenome = document.getElementById('Sobrenome').value; pessoas.DataDeNascimento = document.getElementById('data').value; pessoas.Idade = document.getElementById('idade').value; pessoas.ÉMaiorDeIdade = document.getElementById('exampleRadios1').value; pessoas.EMaiorDeIdade = document.getElementById('exampleRadios2').value; pessoas.Vaga = document.getElementById('vaga').value; return pessoas; } constructor(){ this.id = 1; this.arrayPessoas = []; } adicionar(pessoas) { //função que pega o array de pessoas this.arrayPessoas.push(pessoas); this.id++; } ValidaCampos(pessoas){ // função que da uma olhada se os campos estão corretos ai da um alerta let msg = ''; if(pessoas.nome == '') { msg += '- Informe seu nome \n'; } if(pessoas.CPF == '') { msg += '- Informe seu CPF \n'; } if(pessoas.Sobrenome == '') { msg += '- Informe seu Sobrenome \n'; } if(pessoas.DataDeNascimento == '') { msg += '- Informe sua Data de Nascimento \n'; } if(pessoas.Idade == '') { msg += '- Informe sua Idade \n'; } if(pessoas.ÉMaiorDeIdade == '') { msg += '- Informe se você é maior de Idade ou não \n'; } if(pessoas.EMaiorDeIdade == '') { msg += '- Informe se você é maior de Idade ou não \n'; } if(pessoas.Vaga == '') { msg += '- Informe sua Vaga desejada \n'; } if(msg != '') { alert(msg); return false } return true; } ListaTabela() { let tbody = document.getElementById('tbody'); tbody.innerText = ''; for (let i = 0; i aplicação.rar

html CPF * Tudo certo! Vaga Estágio em TiHelp DeskDesenvolvedor Front-EndDesenvolvedor Back-EndDesenvolvedor Full Stack Salvar javascript class Pessoas { salvar(){ let pessoas = this.FuncaoPrincipal(); if(this.ValidaCampos(pessoas)) { this.adicionar(pessoas) } this.ListaTabela(); } FuncaoPrincipal() { // função pra criar o json let pessoas = {} pessoas.id = this.id; pessoas.CPF = document.getElementById('CPF').value; pessoas.nome = document.getElementById('nome').value; pessoas.Sobrenome = document.getElementById('Sobrenome').value; pessoas.DataDeNascimento = document.getElementById('data').value; pessoas.Idade = document.getElementById('idade').value; pessoas.ÉMaiorDeIdade = document.getElementById('exampleRadios1').value; pessoas.EMaiorDeIdade = document.getElementById('exampleRadios2').value; pessoas.Vaga = document.getElementById('vaga').value; return pessoas; } constructor(){ this.id = 1; this.arrayPessoas = []; } adicionar(pessoas) { //função que pega o array de pessoas this.arrayPessoas.push(pessoas); this.id++; } ValidaCampos(pessoas){ // função que da uma olhada se os campos estão corretos ai da um alerta let msg = ''; if(pessoas.nome == '') { msg += '- Informe seu nome \n'; } if(pessoas.CPF == '') { msg += '- Informe seu CPF \n'; } if(pessoas.Sobrenome == '') { msg += '- Informe seu Sobrenome \n'; } if(pessoas.DataDeNascimento == '') { msg += '- Informe sua Data de Nascimento \n'; } if(pessoas.Idade == '') { msg += '- Informe sua Idade \n'; } if(pessoas.ÉMaiorDeIdade == '') { msg += '- Informe se você é maior de Idade ou não \n'; } if(pessoas.EMaiorDeIdade == '') { msg += '- Informe se você é maior de Idade ou não \n'; } if(pessoas.Vaga == '') { msg += '- Informe sua Vaga desejada \n'; } if(msg != '') { alert(msg); return false } return true; } ListaTabela() { let tbody = document.getElementById('tbody'); tbody.innerText = ''; for (let i = 0; i aplicação.rar

o problema é o seguinte, eu estava treinando meu primeiro projeto quando eu me deparo com um erro no código onde eu tento utilizar este: .redes-sociais ul li{ text-indent: -99999px; width: 20%; } ul{ list-style: none; float: right; } ul li{ display: inline; } .redes-sociais{ width: 20%; } e os ícones das redes sociais não alinham como desejado obs, o resultado deveria ser esses ícones do linkedin alinhas com a logo e um pouco espaçado entre eles

Frameworks CSS Durante o desenvolvimento de aplicações web, independente do framework ou biblioteca utilizado, a estilização é, para muitos, uma das etapas mais trabalhosas e complicadas de se fazer, devido ao famoso CSS, que é amado por alguns e odiado por outros. Gostando ou não de escrever CSS, a verdade é que é necessário investir um tempo considerável do desenvolvimento a fim de obter o resultado desejado para o visual da aplicação. Com esse problema em mente, diversos desenvolvedores e designers construíram diversas ferramentas e frameworks para auxiliar nesse processo como, por exemplo, o Bootstrap, que é (provavelmente) o mais conhecido e utilizado de todos. A maioria desses frameworks funcionam por meio das classes HTML e realizam a estilização do elemento em questão de acordo com a classe inserida. A maior desvantagem desse tipo de framework é que grande parte deles são, na realidade, uma coleção de componentes prontos que mudam a estilização completa de um elemento com apenas uma classe e, muitas vezes, não possuem simples maneiras de customizá-lo diretamente, o que faz com que os desenvolvedores ainda tenham que escrever um código CSS adicional caso queiram mudar parte do design de um componente e torná-lo diferente do padrão. Há quem goste dessa abordagem, contudo, eu gostaria de mostrar uma outra abordagem de frameworks CSS, denominada “utility-first”, que, na prática utilizam classes para estilizar propriedades específicas de um elemento e não mudam o estilo dele por inteiro de uma única vez. Essa abordagem é ótima para quem não quer perder a liberdade de estilizar cada aspecto de um elemento individualmente, e também não deseja ter uma interface semelhante a várias outras, como acontece na maioria das interfaces que usam Bootstrap, por exemplo. E dentre os frameworks que utilizam essa abordagem, gostaria de destacar um deles em específico: o Tailwind CSS. Tailwind CSS O Tailwind CSS é um framework CSS utility-first e mobile-first que vem se destacando por ser simples, leve, responsivo, amplamente configurável e extremamente fácil de usar até para quem não domina CSS. Atualmente ele está disponível para diversos frameworks e bibliotecas como: React, Vue.js, Next.js, Nuxt.js, Vite, Laravel, Gatsby, e até para projetos com JavaScript puro, e seu processo de instalação é bem simples. Uma vez instalado, basta escrever as classes correspondentes às propriedades CSS desejadas no “class” (ou “className”, no React) do elemento em questão, seguindo as classes da documentação oficial, e o estilo será aplicado a ele instantaneamente. Outra vantagem é que o Tailwind CSS realiza o “purge” de classes, ou seja, classes não utilizadas não são incluídas no build da aplicação, reduzindo o tamanho dos arquivos finais e melhorando a performance. É possível testar o Tailwind CSS por meio do link: https://play.tailwindcss.com/ A seguir seguem alguns exemplos práticos da utilização do Tailwind CSS em comparação com CSS puro. 1 - Flexbox: HTML e CSS puro <div class="element"> ... </div> .element { display: flex; flex-direction: column; align-items: center; justify-content: center; } Utilizando Tailwind CSS <div class="flex flex-col items-center justify-center"> ... </div> 2 - Grid, quebra de linha e text-overflow: HTML e CSS puro <div class="container"> <div class="first"> ... </div> <div class="second"> ... </div> </div> .container { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); } .first { grid-column: span 3 / span 3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .second { grid-column: span 1 / span 1; } Utilizando Tailwind CSS <div class="grid grid-cols-4"> <div class="col-span-3 truncate"> ... </div> <div class="col-span-1"> ... </div> </div> 3 - Responsividade, cores, padding e border-radius: HTML e CSS puro <div class="element"> ... </div> .element { width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2rem; padding: 1rem; background-color: #2563eb; color: #4b5563; border-radius: 0.5rem; @media (min-width: 768px) { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); } } Utilizando Tailwind CSS <div class=" w-full flex flex-col items-center justify-center gap-8 p-4 bg-blue-600 text-gray-600 rounded-lg md:grid md:grid-cols-4 " > ... </div> Conclusão: Por fim, espero que tenha sido possível perceber as diversas vantagens na utilização do Tailwind CSS em seu projeto front-end e que, embora não seja perfeito, ele pode proporcionar um grande aumento na produtividade de desenvolvedores front-end, reduzindo o tempo gasto em estilização, especialmente para aqueles que são muito fãs de escrever CSS. Existem também diversas outras ferramentas para melhorar a forma de lidar com estilização, como Styled Components, Sass, dentre outros. Qual o seu favorito? O que achou do Tailwind CSS? Gostaria de unir o Tailwind CSS com uma biblioteca de componentes como o Bootstrap? Dê uma olhada no Tailwind UI.