Ir ao conteúdo
  • Cadastre-se

Carlos Alexandre 399

Membro Júnior
  • Posts

    13
  • Cadastrado em

  • Última visita

Tudo que Carlos Alexandre 399 postou

  1. <!DOCTYPE html> <html> <head> <style> .main-timeline{ font-family: 'Roboto', sans-serif; position: relative; } .main-timeline:after{ content: ''; display: block; clear: both; } .main-timeline .timeline{ width: 50%; margin: 0 10px 30px 0; float: left; } .main-timeline .timeline-content{ color: #222; background: linear-gradient(to right,#d62053,#AF2850); text-align: center; padding: 75px 30px 30px; display: block; position: relative; z-index: 1; } .main-timeline .timeline-content:hover{ text-decoration: none; } .main-timeline .timeline-content:before{ content: ''; background: #fff; border-radius: 40px 0 60px 0; position: absolute; left: 10px; top: 10px; bottom: 10px; right: 10px; z-index: -1; } .main-timeline .timeline-icon{ color: #fff; background: linear-gradient(125deg, #d62053 50%, #AF2850 51%); font-size: 25px; line-height: 50px; height: 60px; width: 60px; position: absolute; top: 10px; left: 30px; z-index: 1; clip-path: polygon(100% 0, 100% 100%, 50% 80%, 0 100%, 0 0); } .main-timeline .title{ font-size: 22px; font-weight: 700; text-transform: uppercase; margin: 0 0 7px; } .main-timeline .description{ font-size: 14px; letter-spacing: 1px; margin: 0; } .main-timeline .timeline:nth-child(even){ float: right; margin: 0 0 30px 10px; } .main-timeline .timeline:nth-child(even) .timeline-content:before{ border-radius: 0 40px 0 60px; } .main-timeline .timeline:nth-child(even) .timeline-icon{ left: auto; right: 30px; } .main-timeline .timeline:nth-child(4n+2) .timeline-content{ background: linear-gradient(to right,#fc8d44,#fc7114); } .main-timeline .timeline:nth-child(4n+2) .timeline-icon{ background: linear-gradient(125deg, #fc8d44 39%, #fc7114 40%); } .main-timeline .timeline:nth-child(4n+3) .timeline-content{ background: linear-gradient(to right,#1071b2,#0A5C96); } .main-timeline .timeline:nth-child(4n+3) .timeline-icon{ background: linear-gradient(125deg, #1071b2 39%, #0A5C96 40%); } .main-timeline .timeline:nth-child(4n+4) .timeline-content{ background: linear-gradient(to right, #3fb1ea,#3DA6DC); } .main-timeline .timeline:nth-child(4n+4) .timeline-icon{ background: linear-gradient(125deg, #3fb1ea 39%, #3DA6DC 40%); } @media screen and (max-width:767px){ .main-timeline .timeline, .main-timeline .timeline:nth-child(even){ width: 100%; float: none; margin: 0 0 30px; } } @media screen and (max-width:567px){ .main-timeline .title{ font-size: 18px; } } </style> </head> <body> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="main-timeline"> <div class="timeline"> <a href="#" class="timeline-content"> <div class="timeline-icon"> <i class="fa fa-globe"></i> </div> <h3 class="title">Web Designing</h3> <p class="description"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer males uada tellus lorem, et condimentum neque commodo Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer males uada tellus lorem, et condimentum neque commodo </p> </a> </div> <div class="timeline"> <a href="#" class="timeline-content"> <div class="timeline-icon"> <i class="fa fa-users"></i> </div> <h3 class="title">Web Development</h3> <p class="description"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer males uada tellus lorem, et condimentum neque commodo Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer males uada tellus lorem, et condimentum neque commodo </p> </a> </div> </div> </div> </div> </div> </body> </html> Usei esse script de timeline no laytou de pc ela fica 50% pra direita e 50% pra esquerda como ilustrado na imagem, se baseando no tamanho do play de vídeo no pc ela usa o espaço todo, no celular deveria usar 100% da tela e não ta usando, no celular ta menor não ta tipo usando 100% igual o play de vídeo
  2. eu vi em um artigo mais revirei tudo a net histórico mais n consigo encontra novamente , e um ferramenta na internet que coloca uma palavra chave tipo Clube do Hardware e essa ferramentas vai mostra os site mais acessados sobre as palavras clube o hardware
  3. vdd , mais quem saber n teria algo para minha alegria kkk @bngomes
  4. Alguem saber alguma ferramenta que você coloca tipo uma palavra chave nele por exemplo (Clube do Hardware) ai esse ferramenta faz uma pesquisa sobre a palavra Clube do Hardware e fazer uma resumo sobre a determinada palavra
  5. marquei na imagem de vermelho a palavra (paw) que seria pata tem alguma forma deu criar algo tipo aquelas classes a cima que aumenta fonte e muda a cor de todas de uma vez, ao invés de muda de uma por uma tipo queria saber se existe maneira de cria algo tipo <i class="pata fa-li fa fa-paw fa-spin"></i> ai subistuiar a palavra paw por exemplo por home <i class="pata fa-li fa fa-home fa-spin"></i> ai substituiria de todas ao mesmo ao invés de muda a palavra paw manualmente uma por vez Exemplo: <i class="pata fa-li fa fa-paw fa-spin"> <i class="pata fa-li fa fa-paw fa-spin"> <i class="pata fa-li fa fa-paw fa-spin"> <i class="pata fa-li fa fa-paw fa-spin"> <i class="pata fa-li fa fa-paw fa-spin"> <i class="pata fa-li fa fa-paw fa-spin"> Ai quando substituir a palavra paw por home. <i class="pata fa-li fa fa-home fa-spin"> Iria muda de muda a palavra home de todas. <i class="pata fa-li fa fa-home fa-spin"> <i class="pata fa-li fa fa-home fa-spin"> <i class="pata fa-li fa fa-home fa-spin"> <i class="pata fa-li fa fa-home fa-spin"> <i class="pata fa-li fa fa-home fa-spin"> O script da imagem https://jsfiddle.net/f1twn608/
  6. Na imagem 1 estou usando um código criado por um moderador : link do funcionamento >> https://jsfiddle.net/61mb5ad0/ <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <style> .container{ display: table; } .pata{ color: #ff9800; } .texto{ display: table-cell; padding-left: 5px; } </style> </head> <h2>Antes de começar falando para quem este programa é perfeito, precisamos ser 100% claros sobre para quem ele NÃO É:</h2> <body> <div class="container"> <i class=" pata fa fa-paw fa-spin"></i> <p class="texto"> Não É para quem não se importa com a saúde de seu cão e quer continuar dando as tóxicas rações industrializadas </p> </div> <div class="container"> <i class=" pata fa fa-paw fa-spin"></i> <p class="texto"> Não É para quem não se importa com a saúde de seu cão e quer continuar dando as tóxicas rações industrializadas </p> </div> <div class="container"> <i class=" pata fa fa-paw fa-spin"></i> <p class="texto"> Não É para quem não se importa com a saúde de seu cão e quer continuar dando as tóxicas rações industrializadas </p> </div> </body> </html> Na imagem 2 eu estava testando : link do funcionamento >> https://jsfiddle.net/ft789vja/ <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <h4><span style="font-size: 16pt;">Antes de começar falando para quem este programa é perfeito, precisamos ser 100% claros sobre <strong>para quem ele NÃO É:</strong></span></h4> <p> </p> <p> </p> <span style="font-size: 12pt;"> <p><i class="fa fa-paw fa-spin" style="color:#ff9800"></i> NÃO É para quem NÃO TEM cachorro </p> <p> </p> <p><i class="fa fa-paw fa-spin" style="color:#ff9800"></i> NÃO É para quem não se importa com a saúde de seu cão e quer continuar dando as tóxicas rações industrializadas </p> <p> </p> <p><i class="fa fa-paw fa-spin" style="color:#ff9800"></i> NÃO É para quem ainda acredita que a ração é a melhor forma de alimentar seu cão. </p> <p> </p> <p><i class="fa fa-paw fa-spin" style="color:#ff9800"></i> NÃO É para quem não está disposto a tomar uma ação imediata para: melhorar a saúde, comportamento e a felicidade de seu cachorro </p> </span> </body> </html> na primeira imagem ta usando css, eo css ta bugando o site queria que ficasse o desenho da pata com o texto sempre a frente dela sem usa css sadasdad asdadadad sadasdada ao invés do texto fica assim asdadas asdadasasda asdasdadadaa preciso muito de ajuda pra esse projeto já pesquisei toda forma de fazer isso mais só conseguir essa do css mais ela ta bugando o site Se ate o mesmo moderador estive vendo isso se tive uma solução por favor
  7. então essa imagem foi editada só para demostra uma situação, na primeira seta esta apontada pro nome "industrializadas" e ele começa na borda da pagina, tem como coloca a palavra "industrializadas" seguindo a borda da palavra de cima "NÃO" mesmo usando o simbolo awesome font
  8. fui pesquisando melhor ai acabei encontrando esse banco de dados
  9. Existe alguma forma de cria tipo um "banco de dados" para cria tipo um site de vídeo tipo esse https://pt.videezy.com/ ou alguma hospedagem pra cria um site de vídeo com armazenamento ilimitado, alguém tem uma sugestão

Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas comunidades sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×
×
  • Criar novo...