Pesquisar na Comunidade

Boa noite caros amigos do fórum, Desenvolvi uma ideia diferenciada e quero colocá-la em prática. Basicamente é um site voltado para jogos que mexerá com sorteios de jogos. A ideia grossa seria essa. Preciso de um auxílio com a parte front-end de HTML, aqueles modelos de sites mais elaborados com vários efeitos maneiros. Eu não entendo dessa parte, só do back-end mesmo. Preciso de uma ou mais pessoas interessadas. Isso terá retorno em dinheiro, pois, é um modelo de negócio e é totalmente online, com uma área que engloba a área de jogos, a qual cresce muito a cada dia que passa. Me mande uma mensagem em privado caso tenha interesse de verdade e tenha os conhecimentos de desenvolvimento front-end. Podemos negociar em relação a coparticipação de sócio. Abraços.

Como inserir um vídeo do Youtube com AUTO PLAY em um site Se você precisa inserir um vídeo que inicie automaticamente dentro de um site, é bem simples. Basta você inserir esse código no final do endereço do seu vídeo. ?rel=0&arp;autoplay=1 Por exemplo, imagine que você use um tema do SHOPIFY ou WORDPRESS que exige apenas o LINK do vídeo, basta colocar o endereço e no final do endereço do vídeo usar esse PREFIXO. Fiz isso no site MIMMIC.COM e deu certo - Aperte PLAY dentro no SLIDE. O endereço ficaria assim: https://www.you Autor 403 - Forbiddeen Categoria HTML | CSS | Javascript Enviado 12-03-2019 13:24

Como criar um slideshow com HTML, CSS e JS Antes de iniciar, mostraremos no tutorial como criar dois tipos de sliders, veja no exemplo aqui. 1º – Criar a estrutura em HTML Para fazer um slide show, precisamos inicialmente criar uma div que irá armazenar todas as imagens presentes nele. 1 2 3 4 <!-- Elemento que envolve o slideshow --> <div class="caixa-slideshow"> </div> Neste exemplo o nome da classe é “caixa-slideshow”, mas não se esqueça que as classes podem possuir qualquer nome que desejar, contanto que não tenha outra com o mesmo nome que faça algo diferente em seu site, pois isso resultaria em conflitos e devemos evitar sempre. 2º – Adicionar as imagens, suas numerações e descrições Neste exemplo, cada slide de imagem possui 3 (três) informações: imagem, descrição e numeração, para melhorar a codificação, adicionaremos esses três itens dentro de uma div que neste exemplo possui a classe “meus-slides”, essa div será duplicada para cada imagem nova que o slide possuir e dentro dela colocaremos os itens citados acima. Coloque essas divs dentro da div criada acima. 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 <!-- Bloco que contém número do slide, slide e descrição --> <div class="meus-slides fade"> <div class="numero-imagem">1 / 3</div> <img src="img/1.jpg" style="width:100%"> <div class="descricao-imagem">Descrição da primeira imagem</div> </div> <!-- Bloco que contém número do slide, slide e descrição --> <div class="meus-slides fade"> <div class="numero-imagem">2 / 3</div> <img src="img/2.jpg" style="width:100%"> <div class="descricao-imagem">Descrição da segunda imagem</div> </div> <!-- Bloco que contém número do slide, slide e descrição --> <div class="meus-slides fade"> <div class="numero-imagem">3 / 3</div> <img src="img/3.jpg" style="width:100%"> <div class="descricao-imagem">Descrição da terceira imagem</div> </div> 3º – Adicionar os botões de “próximo” e “anterior” Todos os slide show possuem botões em suas laterais para passar para o próximo slide ou voltar ao anterior. Para adicioná-los vamos colocar logo abaixo da última div com a classe “meus-slides” dois elementos “a” com suas respectivas classes, uma para voltar, que vamos chamar de “anterior”, e outra para adiantar, que vamos chamar de “próximo”, e ambas contento o atributo “onclick” chamando o método “controlador_slides()”, que vamos criar no fim do nosso script. Não se esqueça de colocar os parâmetros que estão dentro da chamada do método, mais a frente explicaremos sua função. 1 2 3 <!-- Botões de anterior e próximo --> <a class="anterior" onclick="controlador_slides(-1)">❮</a> <a class="proximo" onclick="controlador_slides(1)">❯</a> 4º – Adicionar controladores para cada slide existente Geralmente os slides possuem logo abaixo das imagens, bolinhas ou qualquer outro ícone que represente qual a imagem que está sendo exibida atualmente e também servem como controladores para que possamos clicar em qual slide queremos ver no momento, assim pulando os outros e indo diretamente ao slide desejado. Para fazer isso vamos adicionar uma nova div, assim que nossa div com a classe “caixa-slideshow” for fechada. Essa div irá possuir todos esses controladores. Para cada slide adicionaremos um novo span com a classe “ponto-indicador-slide” e um atributo “onclick” chamando o método “slide_atual()” passando como parâmetro o número do slide a qual ele se refere. Esse método iremos criar logo logo. Neste exemplo teremos 3 slides, portanto iremos adicionar 3 elementos “span”. 01 02 03 04 05 06 07 08 09 10 <!-- Pontos indicadores de slides --> <div style="text-align:center"> <span class="ponto-indicador-slide" onclick="slide_atual(1)"></span> <span class="ponto-indicador-slide" onclick="slide_atual(2)"></span> <span class="ponto-indicador-slide" onclick="slide_atual(3)"></span> </div> 5º – Adicionar o script principal Se salvarmos o arquivo do jeito que está atualmente e abrimos para ver o que está acontecendo, vamos ver que todas as imagens estão sendo exibidas, porém uma abaixo da outra, de forma desorganizada, sem nenhuma interação com o usuário. Para adicionar essas interações vamos adicionar a tag “script” antes do fechamento da tag “body”. Primeiramente vamos fazer o método principal que será responsável por mostra o slide atual e ocultar os outros slides, neste exemplo vamos chama-lo de “mostrar_slides(n)” e vamos passar a variável “n” como parâmetro do nosso método. 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 <script type="text/javascript"> var indice_slide = 1; //essa variável será usada em todas as nossas funções e será responsável por dizer qual o slide atual mostrar_slides(indice_slide); //aqui já estamos chamando a função para que o slide já comece mostrando o primeiro slide // Função principal que mostra os slides function mostrar_slides(n) { var i; // será usada como um contador dentro de nossa função var slides = document.getElementsByClassName("meus-slides"); //retorna todos os elementos que possuem a classe "meus-slides" var ponto_indicador = document.getElementsByClassName("ponto-indicador-slide"); //retorna todos os elementos que possuem a classe "ponto-indicador-slide" if (n > slides.length) {indice_slide = 1} // caso o número passado como parâmetro seja maior que o número de slides então chama o primeiro if (n < 1) {indice_slide = slides.length} // caso o número passado como parâmetro seja menor que 1 nosso variável "indice_slide" receberá o número total de slides for (i = 0; i < slides.length; i++) { //inicia um loop entre os slides slides.style.display = "none"; //deixa o slide com display none } //encerra o loop for for (i = 0; i < ponto_indicador.length; i++) { //inicia um loop entre os pontos indicadores ponto_indicador.className = ponto_indicador.className.replace(" ativo", ""); // remove a classe "ativo" do indicador } // encerra o loop for slides[indice_slide-1].style.display = "block"; // faz o slide atual aparecer ponto_indicador[indice_slide-1].className += " ativo"; //adiciona a classe "ativo" para o indicador do slide atual } //encerra a função Após criar esse método, nosso slide show já está mais amigável, porém ainda não está usual já que só conseguimos ver o primeiro slide. 6º – Criar os botões de “Próximo” e “Anterior” Neste passo, vamos criar o método que irá controlar os botões de “próximo“ e “anterior”, para que possamos navegar pelos slides. 1 2 3 4 5 6 7 // Função para controlar os botões controladores function controlador_slides(n) { /*quando passamos como parâmetro para os botões “próximo“ e “anterior” eles serão usados nesta função para calcular qual o slide que deverá ser mostrado por isso passamos como parâmetro os valores "1" e "-1" para ir para frente ou para trás*/ mostrar_slides(indice_slide += n); } 7º – Criar os pontos indicadores de cada slide Agora vamos fazer o método que será responsável por controlar os pontinhos que ficarão abaixo das imagens e que serão os representantes de cada slide. Assim como na função criada acima, essa possui quase a mesma estrutura, a diferença é que ao invés de calcularmos um novo valor baseado nos parâmetros passados, vamos atribuir o valor do parâmetro diretamente. 1 2 3 4 // Função que controla o slide atual caso clique no ponto indicador function slide_atual(n) { mostrar_slides(indice_slide = n); } Se executarmos o código agora não iremos achar os pontinhos controladores, isso acontece porque ao contrário dos ícones dos botões “próximo” e “anterior” nossos pontinhos não são ícones e sim elementos “span” que serão estilizados para que possamos vê-los, mas caso queira adicionar um ícone fique à vontade. 8º – Adicionar o CSS O back-end do nosso slide show já está encerrado, mas ainda não está muito amigável em questão de design. Neste último passo iremos adicionar o front-end para que ele fique ainda melhor e mais completo. 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 * {box-sizing:border-box} /* Div que envolve os slides */ .caixa-slideshow { max-width: 1000px; position: relative; margin: auto; } /* Esconde as imagens inicialmente */ .meus-slides { display: none; } /* Botões de próximo e anterior */ .anterior, .proximo { cursor: pointer; position: absolute; background-color: rgba(0,0,0,0.3); top: 50%; width: auto; margin-top: -22px; padding: 16px; color: white; font-weight: bold; font-size: 18px; transition: 0.6s ease; border-radius: 0 3px 3px 0; } /* Posicionando o botão 'próximo' a direita */ .proximo { right: 0; border-radius: 3px 0 0 3px; } /* Preencher o background dso botões com a cor preta no hover */ .anterior:hover, .proximo:hover { background-color: rgba(0,0,0,0.8); } /* Elemento que envolve a descrição das imagens */ .descricao-imagem { color: #f2f2f2; font-size: 15px; padding: 8px 12px; position: absolute; background-color: rgba(0,0,0,0.5); bottom: 4px; width: 100%; text-align: center; } /* Elemento que envolve o número do slide */ .numero-imagem { color: #f2f2f2; font-size: 12px; padding: 8px 12px; position: absolute; top: 0; } /* Pontos indicadores de slides */ .ponto-indicador-slide { cursor: pointer; height: 15px; width: 15px; margin: 0 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; } /* Mudando o background color no hover ou quando ativo */ .ativo, .ponto-indicador-slide:hover { background-color: #717171; } /* Efeito suave para troca de slide */ .fade { -webkit-animation-name: fade; -webkit-animation-duration: 1.5s; animation-name: fade; animation-duration: 1.5s; } @-webkit-keyframes fade { from {opacity: .4} to {opacity: 1} } @keyframes fade { from {opacity: .4} to {opacity: 1} } Você pode estar olhando para o seu slide show e se perguntando “E se eu quiser deixá-lo rodando automaticamente? ”. Se você estiver, não se preocupe, verá isso logo abaixo. 9º – Automatizando o slide show Neste caso, vamos remover os botões de “próximo e anterior” e também os pontos controladores, e iremos alterar o método principal. Nosso método é praticamente igual, a diferença é que agora ele não possui mais parâmetros, ao fim do for onde definimos o “display none” acrescentamos + 1 ao valor do nosso índice e adicionamos uma última linha que serve para chamar nossa função a cada 2 segundos que passará novamente pelo loop adicionando mais 1 ao valor do índice e nos retornando o próximo slide, além disso agora nossa variável indice começa com o valor 0. 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 var indice_slide = 0; mostrar_slides(); function mostrar_slides() { var i; var slides = document.getElementsByClassName("meus-slides"); var ponto_indicador = document.getElementsByClassName("ponto-indicador-slide"); for (i = 0; i < slides.length; i++) { slides.style.display = "none"; } indice_slide++; if (indice_slide > slides.length) {indice_slide = 1} for (i = 0; i < ponto_indicador.length; i++) { ponto_indicador.className = ponto_indicador.className.replace(" ativo", ""); } slides[indice_slide-1].style.display = "block"; ponto_indicador[indice_slide-1].className += " ativo"; setTimeout(mostrar_slides, 2000); } Não se esqueça de remover os botões e os pontos do conteúdo HTML também, já que não estão mais sendo usados. 10º – Adicionando múltiplos slideshows Também é possível criar vários slideshows em uma aplicação, para fazer isso basta substituirmos o script atual pelo código abaixo. Neste caso nossas variáveis passam a se tornar arrays já que possuímos mais de um slide, mas a base é a mesma, a diferença é que agora nossas funções passam a receber 2(dois) parâmetros para que consiga controlar corretamente. 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 var indice_slide = [1,1]; var classe_slides = ["meus-slides","meus-slides-2"]; mostrar_slides(1, 0); mostrar_slides(1, 1); function controlador_slides(n, no) { mostrar_slides(indice_slide[no] += n, no); } function mostrar_slides(n, no) { var i; var x = document.getElementsByClassName(classe_slides[no]); if (n > x.length) {indice_slide[no] = 1} if (n < 1) {indice_slide[no] = x.length} for (i = 0; i < x.length; i++) { x.style.display = "none"; } x[indice_slide[no]-1].style.display = "block"; } Como podemos ver no nosso novo código, nossos métodos ganharam mais um parâmetro, por isso, devemos passar esse novo parâmetro quando chamamos a função para a ação dos botões de “próximo” e “anterior”, assim como no código abaixo: 1 2 <a class="anterior" onclick="controlador_slides(-1, 1)">❮</a> <a class="proximo" onclick="controlador_slides(1, 1)">❯</a> Com esse novo código é possível criar diversos slideshows na mesma aplicação, mas não se esqueça de adicionar um novo parâmetro para cada slideshow adicionado e também adicionar uma nova classe de identificação única para aquele slideshow e adicioná-la no array de identificadores exatamente como fizemos neste último script. Conclusão Agora você já poderá criar quantos slideshows quiser e sem a necessidade de instalar algum plugin. Espero que tenham gostado deste tutorial, qualquer dúvida é só comentar e também não se esqueça de compartilhar se curtiu, isso nos ajuda muito, até a próxima! Autor iBassini Categoria HTML | CSS | Javascript Enviado 06-02-2019 13:40

Como fazer um efeito de sobreposição de imagem simples com HTML e CSS (Hover Effect) Neste tutorial irei ensinar como fazer isso, clique aqui uma demonstração do efeito. Agora vamos começar e aprender como fazer, vamos lá. 1. Estrutura HTML Pense no seguinte, neste exemplo tanto a imagem quanto o conteúdo oculto devem estar dentro de uma única div, para que quando passar o mouse sobre essa div o conteúdo oculto apareça, então é isso que paremos. Primeiro crie a div que receberá todo o conteúdo, neste exemplo vamos chama-la de ‘caixaImg’, agora dentro dela coloque a imagem que deseja e em seguida crie uma nova div que terá todo o conteúdo oculto dentro dela e coloque nela uma classe para podermos estilizar, chamarei ela de ‘sobreposicao’. Confira abaixo o código completo da estrutura HTML. 1 2 3 4 5 6 7 <div class="caixaImg"> <img src="img/img.jpg" alt="Imagem" class="imagem"> <div class="sobreposicao"> <div class="texto">Conteúdo aqui</div> </div> </div> 2. Estilizar a div principal Para começar precisamos definir a nossa div que contém a classe ‘caixaImg’ como posição relativa, isso é importante para podermos posicionar corretamente o conteúdo oculto, aqui também vamos definir width de 50% e display = inline-block mas é apenas para alinhamento mesmo, não é necessário. 1 2 3 4 5 6 /* div que irá mostrar a imagem, dentro dela terá a imagem e o conteúdo oculto*/ .caixaImg { position: relative; width: 50%; display: inline-block; } 3. Estilizar a imagem Uma coisa muito importante é colocar a imagem com o tamanho completo da div principal, para que não tenha o risco de ela acabar ficando menor ou maior do que o conteúdo oculto, confira o código. 1 2 3 4 5 6 /* deixar a imagem do tamanho da div*/ .imagem { display: block; width: 100%; height: auto; } 4. Posicionando e estilizando o conteúdo oculto Para que o conteúdo oculto seja sobreposto a imagem, precisamos definir sua posição como absoluta, assim ele ficará ‘ligado’ a nossa div principal, além disso precisamos fazer com que ele fique do tamanho da imagem que é o mesmo tamanho da nossa div principal então para deixar do tamanho certo a já posicionar ela no devido lugar basta definirmos as propriedades “top, bottom, left e right = 0” e assim terminamos essas duas etapas. Vamos também definir uma cor de fundo e um transition para melhorar o efeito e é claro o mais importante, definir sua opacidade como 0 para que possamos ver a imagem primeiramente. Código completo deste passo. 01 02 03 04 05 06 07 08 09 10 11 /*conteudo oculto*/ .sobreposicao { position: absolute; top: 0; bottom: 0; left: 0; right: 0; opacity: 0; transition: .5s ease; background-color: #008CBA; } 5. Mostrar conteúdo oculto com o passar do mouse Beleza, já posicionamos o conteúdo e todo o resto agora precisamos fazer esse conteúdo aparecer quando passar o mouse sobre a imagem, mas na verdade vamos fazer essa ação do mouse na nossa div principal, mas a impressão fica sendo que aparece quando passamos o mouse na imagem, basta colocar sua opacidade = 1. Confira. 1 2 3 4 /* exibir o conteudo oculto*/ .caixaImg:hover .sobreposicao { opacity: 1; } 6º – Estilizando o texto oculto Neste exemplo existe um texto dentro da nossa div oculta, então vamos editar ele. Que tal centraliza-lo vertical e horizontalmente? Para isso basta definir sua posição como absoluta e definir as propriedades top e left = 50%, mas ainda não vai ficar centralizado, já que left = 50% faz nosso conteúdo começar a partir da metade de nossa div e não é isso que queremos, para arrumar sua posição e deixa-lo exatamente no centro basta usar a propriedade translate e definir (x,y) como -50%, confira abaixo. 01 02 03 04 05 06 07 08 09 10 11 12 /* estilização do texto oculto*/ .texto { color: white; font-size: 20px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center; } É isso aí, está pronto, agora você já pode espalhar imagens com conteúdo oculto por todo o seu site, divirta-se. Autor iBassini Categoria HTML | CSS | Javascript Enviado 06-02-2019 11:48

Como personalizar o scroll do navegador e deixar nas cores de seu site Clique aqui e veja o que vai aprender a fazer, então chega de enrolação e vamos lá. 1. Personalizar a barra de rolagem Neste exemplo vamos alterar a largura e a altura de nossa barra de rolagem, além de trocar a cor do fundo e também da própria barra. Confira abaixo. 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 /* personalizar a barra em geral, aqui estou definindo 10px de largura para a barra vertical e 10px de altura para a barra horizontal */ ::-webkit-scrollbar { width:10px; height: 10px; } /* aqui é para personalizar o fundo da barra, neste caso estou colocando um fundo cinza escuro*/ ::-webkit-scrollbar-track { background:#333; } /* aqui é a alça da barra, que demonstra a altura que você está na página estou colocando uma cor azul clara nela*/ ::-webkit-scrollbar-thumb { background: #2e9dd8; } 2. Degrade na barra de rolagem Também é possível adicionar degrade em sua barra de rolagem, para isso, ao invés de colocar uma cor chapada, basta utilizar a propriedade ‘linear-gradient’ e definir quais as cores que você deseja usar, mas tem mais uma coisinha que precisa ser alterada. Se você apenas substituir a cor chapada pelo gradiente, a barra de rolagem terá seu degrade na vertical também sendo para barras horizontais é necessário ter um degrade na horizontal, então para isso basta dizer que para barras horizontais você deseja um novo degrade, assim como no código abaixo. 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 /* degrade para a barra vertical */ ::-webkit-scrollbar-thumb { background: #2e9dd8; background: -moz-linear-gradient(top, #333333 0%, #3f69b1 25%, #2e9dd8 50%, #3f69b1 76%, #333333 100%); background: -webkit-linear-gradient(top, #333333 0%,#3f69b1 25%,#2e9dd8 50%,#3f69b1 76%,#333333 100%); background: linear-gradient(to bottom, #333333 0%,#3f69b1 25%,#2e9dd8 50%,#3f69b1 76%,#333333 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#333333',GradientType=0 ); } /* degrade para a barra horizontal com a direção do degrade alterada */ ::-webkit-scrollbar-thumb:horizontal { background: #2e9dd8; background: -moz-linear-gradient(left, #333333 0%, #3f69b1 25%, #2e9dd8 50%, #3f69b1 76%, #333333 100%); background: -webkit-linear-gradient(left, #333333 0%,#3f69b1 25%,#2e9dd8 50%,#3f69b1 76%,#333333 100%); background: linear-gradient(to right, #333333 0%,#3f69b1 25%,#2e9dd8 50%,#3f69b1 76%,#333333 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#333333',GradientType=0 ); } 3. Barra de rolagem personalizada apenas em uma div em específico Para personalizar sua barra de rolagem em determinados lugares sem mexer na barra do site em si, basta dizer qual o elemento que você quer que ela seja estilizada, confira. 01 02 03 04 05 06 07 08 09 10 11 12 .scroll::-webkit-scrollbar { width:10px; height: 10px; } .scroll::-webkit-scrollbar-track { background:#333; } .scroll::-webkit-scrollbar-thumb { background: #2e9dd8; } Bom é isso, é assim que se personaliza a barra de rolagem, simples, não é? Espero que tenham gostado, até a próxima. Autor iBassini Categoria HTML | CSS | Javascript Enviado 06-02-2019 11:30

Como formatar código HTML usando o Dreamweaver Na vida de um desenvolvedor visual FRONTEND é comum pegar códigos bem bagunçados sem formatação, ou seja - conteúdo escrito em uma linha só. Mas é fácil de resolver isso usando o DREAMWEAVER. Estou usando nesse exemplo a versão CS6 do software. Exemplo de código sem formatação: <div class="container" style="margin-top: 50px;"> <div class="sixteen columns"> <div class="homepage_content section clearfix image_with_text image-text--align-center"> <div class="eight columns image_column alpha animate_left animated fadeInLeft"><img src="//cdn.shopify.com/s/files/1/2571/9378/files/loja3.jpg?v=1529098091" alt=" class=" lazyload--fade-in="" lazyautosizes="" lazyloaded="" data-sizes="auto" /></div> <div class="seven columns content_column offset-by-one omega text-align--center"> <h1 style="font-size: 29px; font-weight: 400; line-height: 1em; letter-spacing: 3px; margin-bottom: 3px;">ORLANDO - FLORIDA</h1> <h3 style="font-size: 20px; font-weight: 400; line-height: 1em; letter-spacing: 1px; margin-bottom: 19px;">FLORIDA MALL</h3> <p style="font-size: 18px; margin-bottom: 5px; line-height: 1.5em;">8001 SOUTH ORANGE BLOSSOM TRAIL<br /> UNIT 856 <i>(OPPOSITE GAP)</i><br /> ORLANDO, FL32809<br /> (+1) 321-236-7943<br /> <br />MON - FRI: 10AM - 9PM<br /> SAT: 10AM - 10PM<br /> SUN: 12PM - 8PM</p> </div> </div> </div> </div> Para realizar a formatação de forma automática é simples. Abra seu arquivo HTML no DREAMWEAVER e vá em COMMANDS > APPLY SOURCE FORMATTING. Esse é o resultado. <div class="container" style="margin-top: 50px;"> <div class="sixteen columns"> <div class="homepage_content section clearfix image_with_text image-text--align-center"> <div class="eight columns image_column alpha animate_left animated fadeInLeft"><img src="//cdn.shopify.com/s/files/1/2571/9378/files/loja3.jpg?v=1529098091" alt=" class=" lazyload--fade-in="" lazyautosizes="" lazyloaded="" data-sizes="auto" /></div> <div class="seven columns content_column offset-by-one omega text-align--center"> <h1 style="font-size: 29px; font-weight: 400; line-height: 1em; letter-spacing: 3px; margin-bottom: 3px;">ORLANDO - FLORIDA</h1> <h3 style="font-size: 20px; font-weight: 400; line-height: 1em; letter-spacing: 1px; margin-bottom: 19px;">FLORIDA MALL</h3> <p style="font-size: 18px; margin-bottom: 5px; line-height: 1.5em;">8001 SOUTH ORANGE BLOSSOM TRAIL<br /> UNIT 856 <i>(OPPOSITE GAP)</i><br /> ORLANDO, FL32809<br /> (+1) 321-236-7943<br /> <br /> MON - FRI: 10AM - 9PM<br /> SAT: 10AM - 10PM<br /> SUN: 12PM - 8PM</p> </div> </div> </div> </div> Bem mais fácil de ler né? Autor 403 - Forbiddeen Categoria HTML | CSS | Javascript Enviado 08-10-2018 13:21

inserindo um widget de compra do STEAM em seu site É bem simples. Acesse o título desejado, e localize a opção EMBED. 2. Ao clicar, vai subir um popup, clique em CRIAR, em seguida copie o código HTML - IFRAME. Agora é só colocar na página. Olha o teste em um tópico, ou então o resultado abaixo. Autor 403 - Forbiddeen Categoria HTML | CSS | Javascript Enviado 13-09-2018 11:33

Efeito Neon em HTML e CSS Crie um novo documento html e css (presumindo que você saiba linkar o css no html) dentro do body do html coloque: <div id="container"> <p><a href="https://en.wikipedia.org/wiki/Red"> RED </a></p> <p><a href="https://en.wikipedia.org/wiki/Blue"> BLUE </a></p> <p><a href="https://en.wikipedia.org/wiki/Yellow"> Yellow </a></p> <p><a href="https://en.wikipedia.org/wiki/Green"> GREEN </a></p> <p><a href="https://en.wikipedia.org/wiki/Orange_(colour)"> ORANGE </a></p> <p><a href="https://en.wikipedia.org/wiki/Violet_(color)"> VIOLET </a></p> </div> <div id="linkBack" style="position:absolute;right:0px;top:0px;background-color:#333;margin:0;width:60px;padding:5px"><a href="http://www.f-rilling.com/projects/" target="_blank" style="font-size:14px;text-decoration:none;color:#fff;padding:0 0 0 5px;font-family:sans-serif">My Site</a></div> Agora no CSS coloque: body { background-color: #222222; background: repeating-linear-gradient(45deg, #2b2b2b 0%, #2b2b2b 10%, #222222 0%, #222222 50%) 0 / 15px 15px; } #container { width: 500px; margin: auto; } /*Neon*/ p { text-align: center; font-size: 7em; margin: 20px 0 20px 0; } a { text-decoration: none; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; transition: all 0.5s; } p:nth-child(1) a { color: #fff; font-family: Monoton; -webkit-animation: neon1 1.5s ease-in-out infinite alternate; -moz-animation: neon1 1.5s ease-in-out infinite alternate; animation: neon1 1.5s ease-in-out infinite alternate; } p:nth-child(1) a:hover { color: #FF1177; -webkit-animation: none; -moz-animation: none; animation: none; } p:nth-child(2) a { font-size: 1.5em; color: #228DFF; font-family: Iceland; } p:nth-child(2) a:hover { -webkit-animation: neon2 1.5s ease-in-out infinite alternate; -moz-animation: neon2 1.5s ease-in-out infinite alternate; animation: neon2 1.5s ease-in-out infinite alternate; } p:nth-child(3) a { color: #FFDD1B; font-family: Pacifico; } p:nth-child(3) a:hover { -webkit-animation: neon3 1.5s ease-in-out infinite alternate; -moz-animation: neon3 1.5s ease-in-out infinite alternate; animation: neon3 1.5s ease-in-out infinite alternate; } p:nth-child(4) a { color: #B6FF00; font-family: "Press Start 2P"; font-size: 0.8em; } p:nth-child(4) a:hover { -webkit-animation: neon4 1.5s ease-in-out infinite alternate; -moz-animation: neon4 1.5s ease-in-out infinite alternate; animation: neon4 1.5s ease-in-out infinite alternate; } p:nth-child(5) a { color: #FF9900; font-family: Audiowide; } p:nth-child(5) a:hover { -webkit-animation: neon5 1.5s ease-in-out infinite alternate; -moz-animation: neon5 1.5s ease-in-out infinite alternate; animation: neon5 1.5s ease-in-out infinite alternate; } p:nth-child(6) a { color: #BA01FF; font-family: Vampiro One; } p:nth-child(6) a:hover { -webkit-animation: neon6 1.5s ease-in-out infinite alternate; -moz-animation: neon6 1.5s ease-in-out infinite alternate; animation: neon6 1.5s ease-in-out infinite alternate; } p a:hover { color: #ffffff; } /*glow for webkit*/ @-webkit-keyframes neon1 { from { text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FF1177, 0 0 70px #FF1177, 0 0 80px #FF1177, 0 0 100px #FF1177, 0 0 150px #FF1177; } to { text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FF1177, 0 0 35px #FF1177, 0 0 40px #FF1177, 0 0 50px #FF1177, 0 0 75px #FF1177; } } @-webkit-keyframes neon2 { from { text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #228DFF, 0 0 70px #228DFF, 0 0 80px #228DFF, 0 0 100px #228DFF, 0 0 150px #228DFF; } to { text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #228DFF, 0 0 35px #228DFF, 0 0 40px #228DFF, 0 0 50px #228DFF, 0 0 75px #228DFF; } } @-webkit-keyframes neon3 { from { text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FFDD1B, 0 0 70px #FFDD1B, 0 0 80px #FFDD1B, 0 0 100px #FFDD1B, 0 0 150px #FFDD1B; } to { text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FFDD1B, 0 0 35px #FFDD1B, 0 0 40px #FFDD1B, 0 0 50px #FFDD1B, 0 0 75px #FFDD1B; } } @-webkit-keyframes neon4 { from { text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #B6FF00, 0 0 70px #B6FF00, 0 0 80px #B6FF00, 0 0 100px #B6FF00, 0 0 150px #B6FF00; } to { text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #B6FF00, 0 0 35px #B6FF00, 0 0 40px #B6FF00, 0 0 50px #B6FF00, 0 0 75px #B6FF00; } } @-webkit-keyframes neon5 { from { text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FF9900, 0 0 70px #FF9900, 0 0 80px #FF9900, 0 0 100px #FF9900, 0 0 150px #FF9900; } to { text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FF9900, 0 0 35px #FF9900, 0 0 40px #FF9900, 0 0 50px #FF9900, 0 0 75px #FF9900; } } @-webkit-keyframes neon6 { from { text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de; } to { text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #ff00de, 0 0 35px #ff00de, 0 0 40px #ff00de, 0 0 50px #ff00de, 0 0 75px #ff00de; } } /*glow for mozilla*/ @-moz-keyframes neon1 { from { text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FF1177, 0 0 70px #FF1177, 0 0 80px #FF1177, 0 0 100px #FF1177, 0 0 150px #FF1177; } to { text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FF1177, 0 0 35px #FF1177, 0 0 40px #FF1177, 0 0 50px #FF1177, 0 0 75px #FF1177; } } @-moz-keyframes neon2 { from { text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #228DFF, 0 0 70px #228DFF, 0 0 80px #228DFF, 0 0 100px #228DFF, 0 0 150px #228DFF; } to { text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #228DFF, 0 0 35px #228DFF, 0 0 40px #228DFF, 0 0 50px #228DFF, 0 0 75px #228DFF; } } @-moz-keyframes neon3 { from { text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FFDD1B, 0 0 70px #FFDD1B, 0 0 80px #FFDD1B, 0 0 100px #FFDD1B, 0 0 150px #FFDD1B; } to { text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FFDD1B, 0 0 35px #FFDD1B, 0 0 40px #FFDD1B, 0 0 50px #FFDD1B, 0 0 75px #FFDD1B; } } @-moz-keyframes neon4 { from { text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #B6FF00, 0 0 70px #B6FF00, 0 0 80px #B6FF00, 0 0 100px #B6FF00, 0 0 150px #B6FF00; } to { text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #B6FF00, 0 0 35px #B6FF00, 0 0 40px #B6FF00, 0 0 50px #B6FF00, 0 0 75px #B6FF00; } } @-moz-keyframes neon5 { from { text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FF9900, 0 0 70px #FF9900, 0 0 80px #FF9900, 0 0 100px #FF9900, 0 0 150px #FF9900; } to { text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FF9900, 0 0 35px #FF9900, 0 0 40px #FF9900, 0 0 50px #FF9900, 0 0 75px #FF9900; } } @-moz-keyframes neon6 { from { text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de; } to { text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #ff00de, 0 0 35px #ff00de, 0 0 40px #ff00de, 0 0 50px #ff00de, 0 0 75px #ff00de; } } /*glow*/ @keyframes neon1 { from { text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FF1177, 0 0 70px #FF1177, 0 0 80px #FF1177, 0 0 100px #FF1177, 0 0 150px #FF1177; } to { text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FF1177, 0 0 35px #FF1177, 0 0 40px #FF1177, 0 0 50px #FF1177, 0 0 75px #FF1177; } } @keyframes neon2 { from { text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #228DFF, 0 0 70px #228DFF, 0 0 80px #228DFF, 0 0 100px #228DFF, 0 0 150px #228DFF; } to { text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #228DFF, 0 0 35px #228DFF, 0 0 40px #228DFF, 0 0 50px #228DFF, 0 0 75px #228DFF; } } @keyframes neon3 { from { text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FFDD1B, 0 0 70px #FFDD1B, 0 0 80px #FFDD1B, 0 0 100px #FFDD1B, 0 0 150px #FFDD1B; } to { text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FFDD1B, 0 0 35px #FFDD1B, 0 0 40px #FFDD1B, 0 0 50px #FFDD1B, 0 0 75px #FFDD1B; } } @keyframes neon4 { from { text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #B6FF00, 0 0 70px #B6FF00, 0 0 80px #B6FF00, 0 0 100px #B6FF00, 0 0 150px #B6FF00; } to { text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #B6FF00, 0 0 35px #B6FF00, 0 0 40px #B6FF00, 0 0 50px #B6FF00, 0 0 75px #B6FF00; } } @keyframes neon5 { from { text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FF9900, 0 0 70px #FF9900, 0 0 80px #FF9900, 0 0 100px #FF9900, 0 0 150px #FF9900; } to { text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FF9900, 0 0 35px #FF9900, 0 0 40px #FF9900, 0 0 50px #FF9900, 0 0 75px #FF9900; } } @keyframes neon6 { from { text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de; } to { text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #ff00de, 0 0 35px #ff00de, 0 0 40px #ff00de, 0 0 50px #ff00de, 0 0 75px #ff00de; } } /*REEEEEEEEEEESPONSIVE*/ @media (max-width: 650px) { #container { width: 100%; } p { font-size: 3.5em; } } Feito isso salve, caso queira ver como fica online clique aqui Autor LoadSec Categoria HTML | CSS | Javascript Enviado 23-08-2018 21:46

Endereços Absolutos e Relativos Endereços Absolutos e Relativos URL (de Uniform Resource Locator), em português Localizador de Recursos Universal, é o endereço dos sites. É aquele endereço que todos estamos habituados a colocar na barra de endereços do navegador de internet. Pode-se linkar para outras páginas usando URLs absolutos ou relativos. URL's absolutos Um URL absoluto contém o caminho completo para a localização do ficheiro do site que se pretende. Se por exemplo você quisesse abrir uma página chamada naka.html, que se encontrava no interior de uma pasta chamada "forum", e esta pasta se encontrava na raiz do seu site, então o URL absoluto seria: É preferível o uso de URL's absolutos em páginas que possam mudar de posição na estrutura de pastas do site. Dessa forma se a página que contém os links mudar de pasta, os links vão continuar a funcionar. URLs relativos Um URL relativo indica apenas o caminho a percorrer desde a posição em que estamos. Se por exemplo estivéssemos na página camoes.html (que se encontra dentro da pasta "poetas") e quiséssemos linkar para trás para a página principal (para a página index.html da raiz do site), então o URL relativo seria: os dois pontos, seguidos de uma barra, dizem ao browser para subir um nível na hierarquia na estrutura de pastas do site. O URL relativo permite que o site possa ser testado offline, quando tivermos as pastas e os ficheiros html no disco duro. Desta forma os links vão funcionar se abrirmos as páginas do site a partir do disco Links Âncora (ou Marcadores) Um link âncora (ou marcador) é um link interior, é um link para dentro da própria página. É um link que leva o visitante para outra secção da mesma página (em vez de o levar para outra página ou site). 1- Para fazer um link âncora primeiro você deve ir ao local do seu código HTML para onde você quer que o link aponte. Este é o local para onde o seu visitante será encaminhado quando clicar no link âncora. Nesse local defina o seguinte código de link com o atributo "name": "nome1" é o nome da âncora que você escolhe. 2 - Agora para linkar para aquele local da página, use a tag para links, e no endereço é só colocar cardinal seguido do nome escolhido para a âncora: Link para E-mail Para criar um link que permite que os seus visitantes lhe enviem e-mails basta colocar a função "mailto" na tag de link: Mudar as Cores dos Links Por defeito os links têm a cor azul. Mas você pode alterar as cores usando o código "link" no interior da tag <body> . Exemplo: link - cor dos links, vermelho neste caso vlink - links visitados, verde neste caso alink - links ativos, amarelo neste caso Você pode também usar os códigos HEX para definir estas cores Autor Nakamura Categoria HTML | CSS | Javascript Enviado 14-07-2018 14:20

Noções Basicas HTML - Links/URL #3 Inserir Imagens em Links Para fazer com que os visitantes possam ser levados para outra página ao clicar numa imagem, basta juntar o código HTML para imagem e o código HTML para links (que vamos abordar a seguir): Inserir Links A tag para se inserir links é <a href=https://ggames.com.br">Nome do Link</a>. O resultado deste código seria: O resultado deste código seria: Nakamura Perfil Abrir links em Novas Janelas Se você não quer que as pessoas abandonem o seu site quando clicarem nos links, você pode definir seus links para abrirem numa nova janela com o atributo "target='_blank'": Autor Nakamura Categoria HTML | CSS | Javascript Enviado 14-07-2018 14:17

Noções Basicas HTML - Imagens #2 Imagens de Fundo e Cores de Fundo Cor de Fundo Para usar cores de fundo deve-se procurar uma combinação entre a cor de fundo e a cor do texto que não dificulte a leitura. Normalmente as cores de fundo claras funcionam bem com uma cor de texto escura. Para usar uma cor de fundo na sua página você deve usar o seguinte código dentro da tag <body>: Pode também utilizar os códigos HEX para definir as cores que combinem melhor. Inserir uma Imagem de Fundo Se você quiser definir uma imagem de fundo use o seguinte código: Lembre-se que "fotos/imagem.jpg" é a localização do ficheiro da imagem. Trata-se de um URL relativo que aponta para a pasta "fotos" que está no seu site. Pode também usar um URL absoluto, que pode também apontar para o seu site ou então para outra imagem localizada algures na internet. Um exemplo do código da imagem de fundo com URL absoluto é: Inserir Imagens A tag para se inserir imagens é <img src="imagem.jpg"> . Deve-se ter em atenção que o endereço da imagem a introduzir em "src" deve ter em conta a pasta onde a imagem está arquivada no servidor. Assim se a nossa página estiver na raiz, e a imagem estiver numa pasta chamada "fotos", a nossa tag para aquela imagem deveria ser: Atributo "alt" O atributo "alt" deve ser usado para quando queremos que um texto apareça sempre que passarmos o rato sobre a imagem. Este texto também aparece como texto descritivo quando a exibição das imagens não está ativa. A tag fica: Definir Altura e Largura Para a largura usa-se o atributo "width" e para altura o "height". Podem-se definir os valores em pixels ou em percentagem: Definir Altura e Largura Para a largura usa-se o atributo "width" e para altura o "height". Podem-se definir os valores em pixels ou em percentagem: Múltiplos Atributos Se quisermos definir as dimensões da imagem, um contorno, e um texto "alt", podemos definir a tag com todos esses atributos. A ordem em que os colocamos não é importante: Autor Nakamura Categoria HTML | CSS | Javascript Enviado 14-07-2018 14:16

Noções Basicas HTML #1 Bom como o conteúdo sobre o HTML é muito grande vou dividir esse tópico em partes do básico ate aonde eu souber kk Noções Básicas sobre HTML O código HTML é composto por TAGS (ou comandos), que são usadas no inicio e no final do texto que vai ser afetado pelo código. Uma tag de inicio é por exemplo a tag <b> que é usada para colocar uma porção de texto em negrito. A tag de fecho correspondente será </b> que será usada no final desse texto que queremos formatar. Assim, se quisermos colocar em negrito a palavra "Olá!" na frase abaixo, então o código HTML fica: e o resultado será: Estrutura Básica do Código HTML de um Documento Comece por definir o layout básico do documento. Pode copiar e colar este código no "Bloco de Notas" ou outro editor de texto: As tags <html> e </html> dizem ao navegador de internet aonde começa e aonde acaba o código HTML. As tags <title> e </title> dizem ao browser qual é o título da página. O título pode ser visto identificando o respectivo separador no seu navegador de internet. O texto que for definido entre estas tags também é normalmente o texto que é usado como título pelos motores de busca quando apresentam as páginas nos resultados de uma pesquisa. A tag <meta name="description" ...> é informação que pode ser útil para os motores de busca. Eles podem usar o que você escreveu na descrição para descrever a página quando ela é apresentada nos resultados de uma pesquisa. Ou então, por vezes, os motores de busca usam também uma porção aleatória do que estiver no <body> da sua página. A tag <meta name="keywords" ...> também pode ser usada pelos motores de busca na indexação da página. Coloque as palavras chave separadas por virgulas no interior desta tag. Entre as tags <body> e </body> é colocado o conteúdo da página, que é o que é visualizado no browser. Após inserir os códigos HTML e o conteúdo pretendido, deve-se guardar o ficheiro com a extensão ".html". Ou seja, damos-lhe um nome e acrescentamos a extensão ".html". Ficariamos por exemplo com o ficheiro "index.html". Depois disso, para visualizar a página no browser basta clicar sobre o ficheiro. Tags Básicas para Fonte e Texto Itálico: <i>texto</i> Sublinhado: <u>texto</u> Negrito: <b>texto</b> Texto Riscado: <s>texto</s> Novo Parágrafo: <p>texto</p> Esta tag inicia um novo parágrafo introduzindo uma linha em branco entre o novo parágrafo e o anterior. Quebra de linha: <br> Esta tag faz com que o texto que vier a seguir mude para a linha seguinte. Introduzir esta tag duas vezes seguidas faz o mesmo efeito que a tag de parágrafo. Centrar: <center>texto</center> Alinhar texto à esquerda: <p align="left">texto</p> Alinhar texto à direita: <p align="right">texto</p> Mudar cor do texto: <font color="red">texto</font> Pode também utilizar os códigos HEX para definir as mais variadas cores. Por exemplo para definir vermelho em vez red podia usar o código HEX para o vermelho que seria #FF0000. Mudar a fonte: <font face="Arial">texto</font> Mudar o tamanho: <font size="2">texto</font> (escolher entre 1 e 7) Pode-se formatar um texto usando várias tags em simultâneo. Assim, por exemplo eu posso formatar um texto em negrito, itálico e sublinhado, colocando todas as tags ao mesmo tempo, acumulando os efeitos: Resultado: Nakamura Créditos: Nakamura Autor Nakamura Categoria HTML | CSS | Javascript Enviado 14-07-2018 14:15