Desenvolvimento Web com Front-End - Aprendendo do Zero" HTML, CSS e JS - Como Criar uma Barra de Pesquisa com HTML e CSS -Tutorial para Iniciantes

#barraparatexto #FrontEnd #Css3 #Html5 📚 Muito Obrigado por Assistir! SAIBA MAIS 📌https://www.youtube.com/c/WebOnlineDesenvolve 📌https://github.com/WebOnlineDesenvolve Olá, neste vídeo vamos falar sobre como criar um formulário simples em HTML com um campo de entrada de texto e dois botões, um para enviar o formulário e outro para executar uma ação. Vamos dar uma olhada no código HTML para ver como ele é estruturado e como podemos estilizá-lo com CSS. No código HTML, temos uma div com a classe "input-container" que envolve todo o contêiner de entrada de texto. Dentro desta div, temos dois botões: o primeiro é um botão de envio com o tipo "submit", que enviará o formulário quando pressionado, e o segundo é um botão de microfone com o tipo "button", que pode ser usado para executar outra ação. Ambos os botões contêm ícones que são inseridos usando a tag "i" com classes "fa fa-search" e "fa fa-microphone". O campo de entrada de texto é do tipo "text" e tem um atributo "placeholder" com um texto de ajuda para o usuário. O formulário tem um atributo "action" com o valor "#" que define para onde os dados serão enviados quando o formulário for enviado (neste caso, não para lugar nenhum). O ícone do microfone é definido pela classe i, que é usada em conjunto com a propriedade margin: 0 2px para definir suas margens. A cor do ícone é definida pela propriedade color: #70757a. A classe button[type="submit"] é usada para definir o estilo do botão de envio do formulário de pesquisa. As propriedades background-color, color e padding definem a aparência do botão, enquanto border: none remove sua borda. border-radius: 25px define as curvas do botão, e cursor: pointer define o cursor do mouse ao passar sobre ele. transition: all 0.3s ease define a animação que ocorre quando o botão é clicado. A classe input-container define o estilo do contêiner de entrada de pesquisa. width: 50% define a largura do contêiner como 50% da largura total do formulário, e overflow: hidden esconde qualquer conteúdo que ultrapasse os limites do contêiner. margin-right: 10px define a margem direita do contêiner como 10 pixels, enquanto background-color: #fff define sua cor de fundo. O campo de entrada de pesquisa é definido pela tag input[type="text"], que ocupa toda a largura disponível do contêiner. As propriedades padding: 15px e border: none definem o preenchimento do campo de entrada e removem sua borda, respectivamente. Finalmente, a classe fa-microphone é usada para definir o estilo do ícone do microfone. A propriedade display: inline-block define o ícone como um elemento em linha. font-size: 24px define o tamanho da fonte do ícone, enquanto background-image, -webkit-background-clip e -webkit-text-fill-color definem a cor gradiente do ícone. Com essas propriedades CSS, podemos personalizar o formulário de acordo com as necessidades do nosso projeto. Espero que este tutorial tenha sido útil para você. Obrigado por assistir! link da Amazon: https://www.amazon.com.br/b?_encoding=UTF8&tag=19560601-20&linkCode=ur2&linkId=3326b64fa5c136f80236a3fd2c901bd7&camp=1789&creative=9325&node=16339926011 Os Mais Vendidos na Amazon em Computadores e Informática: https://amzn.to/3nWnCbr Mais Vendidos em Games e Consoles: https://amzn.to/3ufq8ed Mais Vendidos em Dispositivos Amazon e Acessórios: https://amzn.to/3EEfulQ Mais Vendidos em Apps e Jogos: https://amzn.to/39whbU9 Notebook: https://amzn.to/3EJk5TK Pcs: https://amzn.to/3zrgaas 🎵 Música: Back to the Future - Ofshane ✨IDE: ( Integrated Development Environment )Microsoft Visual Studio. ✨IDE: ( Integrated Development Environment ) Visual Studio Code. EXTENSÕES VISUAL STUDIO CODE: LIVE SERVER: Carrega a página automaticamente. BEAUTIFY : Padroniza a formatação do código COLOR HIGHLIGHT : Mostra as cores que você está criando no arquivo css. INTELLISENSE FOR CSS: Fornece o auto completo da classe que você escreveu no seu código. ✨Tema do VS Code: Escuro+ (Escuro padrão) ✨Software Editor de videos: Shotcut. ✨Software para gravar a tela do computador: OBS Studio. Google Fontes: https://fonts.google.com/ ⭐ Biblioteca JavaScript https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js Fontes de ícones 🔎https://fontawesome.com/v5.15/icons?d=gallery&p=2 🔎https://fontawesome.com/ Ambiente de Desenvolvimento: codepen.io HTML E CSS: 🔎https://www.w3schools.com/default.asp Site de verificação de erro: 🔎https://validator.w3.org/ Tabelas de cores: 🔎https://www.flextool.com.br/tabela_cores.html Imagem para baixar: 🔎https://pixabay.com/pt/ Site para criar Thumbnails: 🔎https://www.canva.com/