Jump to content

Renan Leite

Members
  • Content count

    28
  • Joined

  • Last visited

Everything posted by Renan Leite

  1. Renan Leite

    Grunt + Babel Dinâmico

    Fala pessoal, Estou utilizando grunt + babel para compilar meu código, acontece que minhas pastas estão organizadas da seguinte maneira. - pasta1 - amd -src - arquivo.js - pasta2 - amd -src - arquivo.js - pasta3 -subpasta3 - amd - src -arquivo.js E eu só consigo usar o babel de uma forma muito específico, por exemplo: grunt.initConfig({ babel: { options: { sourceMap: false, presets: ['env'] }, dist: { files: [{ expand: true, cwd: './pasta1/amd/src', // aqui so especifico a pasta1 src: ['*.js'], dest: '.pasta1/amd/babel/' // aqui so especifico a pasta1 }] } } Eu queria que ele rodasse em todas as pastas amd/src e gerasse dentro da propria pasta src/ os arquivos compilados pelo babel, já tentei o seguinte: grunt.initConfig({ babel: { options: { sourceMap: false, presets: ['env'] }, dist: { files: [{ expand: true, cwd: '**/amd/src', src: ['*.js'], dest: '**/amd/babel/' }] } } CWD: Não sei porque nao funciona, a ideia era pegar todas as pastas que contem as pastas amd/src e tornar isso a base DEST: nessa parte eu não faço ideia de como deixar o dest (pasta babel/ gerada) exatamente dentro da pasta que está o src, por exemplo... dentro de pasta1/src criar a pasta babel/ com todos arquivos .js compilados da pasta1, dentro de pasta2/src criar a pasta babel/ com todos arquivos .js compilados da pasta2
  2. Renan Leite

    botstrap erro com imagem

    Manda o código aeee XD
  3. Renan Leite

    class

    @Biel. Boa sorte cara, se quiser ajudar me marca aee, tmjj
  4. Renan Leite

    Dificuldades com FlexBox e UL

    @Carcleo Boa irmão, que bom que resolveu, tmj!!
  5. Renan Leite

    Texto que aparece e oculta

    1) Para permanecer o mesmo nome ao clicar no link, ou seja "Topico 1 - Já fez sua oração hoje?" ao ser clicado permanecer "Topico 1 - Já fez sua oração hoje?" Você precisa deletar do código javascript o que faz essa mudança, vou te mostrar aonde: $(document).ready(function(){ $('.tgl').before('<span>Revelar conteúdo</span>');  $('.tgl').css('display', 'none') $('span', '#box-toggle').click(function() { $(this).next().slideToggle('slow') .siblings('.tgl:visible').slideToggle('fast'); //$(this).toggleText('Revelar','Esconder') //.siblings('span').next('.tgl:visible').prev() //.toggleText('Revelar','Esconder') }); }) Onde está escrito com // no começo, você pode deletar, ou seja você pode deletar isso = Que resolverá esse problema. $(this).toggleText('Revelar','Esconder') .siblings('span').next('.tgl:visible').prev() .toggleText('Revelar','Esconder') 2) Os sub-tópicos são HTML, então basta você elimitar no seu código HTML... exemplo <div class="tgl"> <h2>Conteúdo três</h2> <!-- ELIMINE ESSE TAG <h2>Conteúdo três ou mude para o que quiser.</h2> --> <p>jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery</p> </div> Enfim cara, espero ter ajudado! Abraços e bons estudos!
  6. Renan Leite

    Criador de site tipo wix.com

    @lucianfpaula Ola!, não sei exatamente como fazer, mas posso te elucidar um pouco sobre a ideia. O Wix atualmente só utiliza HTML, CSS e JavaScript em seus Layouts padrões, e se possuem Back-end, com certeza deve ser o NodeJS. Enfim. o Wix não tem suporte a outras linguagens server-sides (back-end)... PHP, C# etc... Então a ideia do Wix é basicamente você escolhe um layout, esse layout você pode modificar por vários cliques, modificar HTML, CSS, JS via código etc... e por fim você pode está subindo ele. Parece simples, mas você vai precisar de bastante JavaScript para fazer isso. Mas a ideia básica é criar um site com uma vitrine (tipo e-commerce), mas com os produtos sendos vários layouts que as pessoas possam editar, cada layout desse vai ser primeiramente uma imagem que você deve fazer em um editor de imagem, exemplo: Photoshop. Ao clicar em um link da vitrine (um layout), levará o cliente ao site CODIFICADO! ou seja, além de você fazer o design dele no photoshop, você precisa codificar ele em HTML, CSS, JS para pessoa ter acesso a ele em um site, enfim. Com isso, você já vai ter o cliente no site que ele pretende modificar ou montar.. Agora você precisa de alguma forma fazer com que o cliente consiga editar o código HTML, CSS E O JS desse site! (Essa parte que não sei fazer) E não é parando por ai, aquelas partes de você só clicar e arrasta parece ser bem simples, mas é um javascript bem obscuro por trás disso, porque cada vez que você arrasta um item para outro canto do site, você modifica o código HTML, CSS E JS. (você pode começar estudando drag and drop no javascript e html)... Enfim, boa sorte nessa sua ideia! Espero ter ajudado de alguma forma =)
  7. Renan Leite

    Menu JavaScript

    @wesleyexee Fala wesley, poderia mandar o html também. pelo menos a parte aonde se refere? Valeu, abraços
  8. Renan Leite

    class

    @Biel. Cara, eu entendi o que você quer, mas infelizmente você está sobrescrevendo um código sobre outro, então é impossível você fazer isso com mesmos nomes e mesmas classes. Por exemplo: Botão 01 ao ser clicado é pra adicionar a classe .class2 { cor:orage; } Mas lá em baixo, tem um estilo falando que a classe . class2 { cor: purple } Então no final das contas, a class2 vai ter a cor purple sempre, porque foi a última a ser definida. Enfim, se você quiser ajuda pra seu problema, só falar que eu posso te ajudar, mas sem deixar os mesmo nomes e classes rsrsrs =) Abraços!
  9. Renan Leite

    Ocultar DIV por id dentro de um IFRAME

    @Henrique Flausino Por gentileza, poderia mandar o HTML também, pelo menos a parte onde está se referindo.
  10. Renan Leite

    Dificuldades com FlexBox e UL

    Fala irmão, beleza? 1) Isso acontece porque as UL por padrão vem com essas propriedade aqui. display: block; list-style-type: disc; margin-block-start: 1em; margin-block-end: 1em; margin-inline-start: 0px; margin-inline-end: 0px; padding-inline-start: 40px; Perceba a última propriedade: padding-inline-start: 40px; É justamente ela que está dando esse espaçozinho dos inferno rsrs... 1.1) obs: Se quiser, crie uma ul qualquer e inspecione ela que você verá essas props padrões delas. 2) Para resolver isso diretamente, você pode tirar o padding dessa ul: ul.cabecalhoVertical{ padding: 0; display: flex; height: 200px; border: .1px rgb(0,0,0) solid; } Ou posso te passar uma prática minha, que eu gosto de fazer, que é resetar todos os paddings e margins de todos os elementos, e só adiciono padding e margin quando eu necessito, Então fazendo o reset = * { margin: 0; padding: 0; } 2.1) O * faz referências a todos os elementos do seu HTML, assim aplica o estilo que esta la dentro para todos os elementos. Valeu irmão, abraços! Bons estudos
  11. Renan Leite

    Como fazer o texto sair da vertical

    @RodrigoRitta Posta o código HTML e CSS
  12. Renan Leite

    Submit com return false; sendo enviado T.T

    @HwapX Foi exatamente isso kkkk, tinha acabado de ver esse erro, mas obrigadão mano
  13. Fala galera, estou com um formulário e ao apertar o submit ele está sendo enviado, sendo que não gostaria que acontecesse isso, pois estou dando return false; quais possiveis soluções? Meu jquery: $('form#form1').submit(function(){ var nome = $('input[name=nome]').val(); var telefone = $('input[name=telefone').val(); var email = $('input[name=email]').val(); if(nome.split(' ').length >= 2){ console.log('temos pelo menos 1 espaço'); } return false; }); Meu html <div class="bg"> <div class="form" id="form1"> <form> <input type="text" name="nome" placeholder="Nome completo"> <input type="text" name="telefone" placeholder="telefone"> <input type="text" name="email" placeholder="Email*"> <input type="submit" name="acao" value="cadastrar"> </form> </div> </div>
  14. O que vocês acham de fazer o layout/interface do site no Photoshop para depois passar para as linguagens web? Qual opinião de vocês? Existe uma ferramenta melhor?
  15. Renan Leite

    Não consigo centralizar input search

    Fala galera, alguém me ajuda a centralizar esse bendito search? Por algum motivo eu não estou conseguindo... Meu resultado é esse: Esse é meu html: Esse é meu css:
  16. Renan Leite

    Não consigo centralizar input search

    Legal, eu não conhecia esse display: flex; O que você adicionou foi isso? #pesquisa { width: 100% display: flex; justify-content: center; e #pesquisa input { width: 20%; border: 2px solid gray; } E você pode me explicar por que dessa forma ficará mais estável?
  17. Renan Leite

    Não consigo centralizar input search

    @Aphrodi Olá, eu consegui alinhar... Mas não sei se da forma correta rs Você ou alguém sugere algo? A barra em laranja é só para mostrar onde fica a #area HTML: <body> <div id="navegacao"> <div id="area"> <div id="logo"> <img src="img/logo.png"> </div> <div id="pesquisa"> <input type="search" name="buscar" placeholder="Buscar no site..."> </div> </div> </div> </body> CSS: * { margin: 0; padding: 0; } #navegacao { width: 100%; height: 58px; background: blue; } #area { width: 80%; margin: 0 auto; position: relative; border: 3px solid orange; } #logo { display: inline-block; width: 20%; float: left; margin-left: -20px; } #pesquisa { position: absolute; width: 20%; border: 2px solid gray; float: left; margin-left: 40%; top: 16px; } #pesquisa input { width: 100%; }
  18. Renan Leite

    Projeto HTML - Dúvida

    Cara, tem como você resolver isso de boa. Pra você dar espaço no seu código html, tu tem que usar: &nbsp; Mas o problema é para cada espaço é necessario colocar um &nbsp. Por exemplo: F &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Dm /*ISSO DARIA 5 ESPAÇOS ENTRE OS ACORDES*/ Outro jeito e o mais fácil pra ocasião é utilizar a tag span com padding Por exemplo: F <span style="padding-left:60px"> Dm /*ISSO DARÁ UM ESPAÇO DE 60px, NO CASO VOCÊ TERIA QUE IR AUMENTANDO OU DIMINUINDO O ESPAÇO ATÉ ACHAR QUE FICOU LEGAL*/
  19. Renan Leite

    Sites responsivos = bootstrap?

    Fala galera do IMaster, Eu estou montando um site/projeto mas ainda não sei deixa-lo responsivo, Alguem poderia me indicar algo para estudar? Dei uma pesquisada e uma ferramenta que mais indicam é o Bootstrap, os sistemas grandes também utilizam bootstrap ou fazem tudo manualmente? E assim... eu não sei por que ele usa apenas 12 colunas, eu to querendo fazer um menu horizontal que ocupe 100% do width e com um menuzinho na ponta esquerda... como por exemplo o site do YouTube. Isso teria mais de 12 colunas, entende? E tipo, quando eu clico no menu lateral do youtube, espreme a "main" da página (ela também se redimensiona...)
  20. Renan Leite

    <input type="search"> com defeito visual

    @Aphrodi valeu! deu certo
  21. Fala galera deem uma olhada nesse sistema de busca, eu coloquei border-radius: 10px no CSS mas quando eu clico aparece uma leve seleção retangular envolta!! Como posso resolver isso ? Os meus códigos estão assim: --------- HTML ------------ <div class="pesquisa"> <input type="search" name="busca" placeholder="Buscar no site" id="textoBusca"> </div> ----------- CSS ------------- #textoBusca{ display: inline-block; text-align: center; margin-left: 600px; margin-top: 18px; border-radius: 10px; border: solid 0.5px; background-color:white; font-size:14px; height:24px; width:400px; }
  22. Fala galera, de boas? Eu fiz um menu no photoshop e estou tentando passar para HTML5 e CSS, mas estou enfrentando problemas =( Esse é o link de como ficou no photoshop: https://ibb.co/kyY03G -------------------------------------------------------------------------------------------- Esse é o link de como está ficando no HTML5 e CSS: https://ibb.co/daff3G Eu até conseguiria centralizar esse input(buscar no site) mas teria que usar margin negativa... Eu queria que tudo ficasse dentro do meu Header que será meu menu Horizontal... (Estou fazendo da forma mais correta?) Meu código html está assim: <!DOCTYPE html> <html> <head> <title>WorLoc</title> <link rel="stylesheet" type="text/css" href="_css/style.css"> </head> <body> <header> <img src="_img/logo.png" id="logo"> <div id="divBusca"> <input type="text" id="textoBusca" placeholder="Buscar no site"> </div> </header> </body> </html> E o meu css: body { margin: 0; padding: 0; } header { position: absolute; width: 1600px; height: 58px; background: #1884e0; } header img#logo { margin-left: 170px; margin-top: 10px; } #divBusca{ position: relative; background-color:white; border:solid .5px; border-radius:15px; width:150px; height: 30px; margin-top: 0px; margin-left: 340px; } #textoBusca{ float:center; background-color:transparent; padding-left:5px; font-style:italic; font-size:15px; border:none; height:32px; width:150px; }
  23. Renan Leite

    transição No fundo do botão

    @João Vitor Ferreira , Qual o problema mais especificamente?
  24. Renan Leite

    Background

    @Lucas Vasconcellos, 1º Você tem que ter a imagem que você queira no seu background salva na pasta do seu projeto. 2º Criar dois arquivos index.html e style.css e salvar na pasta do projeto. 3º Colocar a estrutura básica do index.html e chamar o arquivo style.css <!DOCTYPE html> <html> <head> <title>Seu projeto</title> <link rel="stylesheet" type="text/css" href="style.css"> ///// <- Vai chamar as configurações do arquivo .css </head> <body> </body> </html> 4º Configurar seu arquivo style.css chamando sua imagem de background para o <body> do html body { background: url(seu_background.jpg) no-repeat; } Obs: Lembrando que sua imagem já deve estar com tamanho ideal... Obs²: Talvez você tenha algum problema de margin, então terá que manipular ela através do style.css Também estou aprendendo, qualquer dúvida só falar!
  25. Fala galera, tranquilo? Vocês poderiam me ajudar nessas dúvidas por favor? 1º Estou com uma ideia de criar um site que ele terá um sistema de cadastro em 2 partes... A primeira será apenas com os dados básicos da pessoa e após uma aprovação, ela terá o direito de concluir o cadastro terminando de personalizar o perfil dela... ////// (Nesse caso a melhor linguagem de programação será PHP?) 2º A segunda dúvida vou explicar como um exemplo para ficar melhor: A pessoa se cadastra. ///// (Colocar um sistema de qualificação é feito com PHP?) 3º Essa é minha dúvida principal: Eu já construi o site utilizando HTML e CSS... Está praticamento de jeito que eu quero o Layout. Mas não tem nada de interação com o usuário, não possui sistema de cadastro, o sistema de busca não está funcionando.... etc //// Como o PHP entrará nesse código? Criando por exemplo um arquivo externo.php e conectando ao HTML igual eu faço com o CSS ? Ou No próprio código HTML eu vou adicionar códigos em PHP ? Ou Apagar todo código HTML e fazer tudo em PHP ? Ou De que forma ? rs
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.