Search the Community

Showing results for tags 'css'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • Programação & Desenvolvimento
    • ASP
    • PHP
    • .NET
    • Java
    • C, C++
    • Delphi, Kylix
    • Lógica de Programação
    • Mobile
    • Visual Basic
    • Outras Linguagens de Programação
  • WEB
    • HTML, XHTML, CSS
    • Ajax, JavaScript, XML, DOM
    • Editores
  • Arte & Design
    • Corel Draw
    • Fireworks
    • Flash & ActionScript
    • Photoshop
    • Outros Programas de Arte e Design
  • Sistemas Operacionais
    • Microsoft Windows
    • GNU/Linux
    • Outros Sistemas Operacionais
  • Softwares, Hardwares e Redes
    • Microsoft Office
    • Softwares Livres
    • Outros Softwares
    • Hardware
    • Redes
  • Banco de Dados
    • Access
    • MySQL
    • PostgreSQL
    • SQL Server
    • Demais Bancos
  • Segurança e Malwares
    • Segurança
    • Remoção De Malwares
  • Empregos
    • Vagas Efetivas
    • Vagas para Estágios
    • Oportunidades para Freelances
  • Negócios & Oportunidades
    • Classificados & Serviços
    • Eventos
  • Geral
    • Avaliações de Trabalhos
    • Links
    • Outros Assuntos
    • Entretenimento
  • Script Brasil
    • Novidades e Anúncios Script Brasil
    • Mercado Livre / Mercado Sócios
    • Sugestões e Críticas
    • Apresentações

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests

Found 210 results

  1. Olá, comecei meus estudos em HTML e CSS a pouco tempo, eu começar isso pra mais depois, e aqui estamos enfim...sou bem novato é HTML e CSS então pf paciência porque vão prescisar...vou pular tudo isso e chegar logo na questão, na maioria dos sites tem uma função que quando você coloca o mouse em cima aparece outras coisas, aqui por exemplo se você colocar o mouse em cima da "navegações" e depois por em cima das "atividades" vai aparecer outras informações, como q faço isso?
  2. Tenho um trabalho para entregar amanhã (Curso - sou iniciante), porém estou com um problemas, porque a imagem que eu coloquei no Section está sobrepondo o meu Header quando eu rolo a página. Qual comando posso utilizar para deixar ela em "segundo plano"? A imagem era para estar abaixo da parte preta
  3. Boa tarde, tenho um desafio para cumprir e estou meio perdido, preciso criar uma vitrine semelhante a que está em anexo, porém não posso usar nenhum framework tem que ser tudo na unha, vi algumas coisas sobre carousel para fazer aquele tipo ali de aplicação, porem percebi que ali só conseguir botar imagens, e infelizmente não estou conseguindo fazer algo nem perto de semelhante a imagem anexada. Obs: o retrono do serviço ele é em JSON. Alguma dica de como iniciar essa vitrine? desde já agradeço a atenção de todos.
  4. <!doctype html> <html lang="pt-br"> <head> <title>titulo</title> <meta name="author" content="eu sinho - 17/03/2019"/> <meta name="description" content="Um jogo sobre empreendimento"/> <meta name="keywords" content="jogo, logica, raciocinio, historia"/> <meta charset="utf-8"/> <link rel="stylesheet" type="text/css" href="stilus.css"/> </head> <body> <h1 id="titulus">testanoooo</h1> <hr/> </body> <script type="text/javascript" src="scriptis.js" charset="utf-8"></script> </html> alert("seja bem vindo!!"); @charset "utf-8"; .titulus{ font-weight: bolder; } Quando eu carrego pela primeira vez no browser ele aparece normal, mas quando recarrego ele fica uma tela preta, tentei tirar o alert e resolveu o problema, será que é isso? Porque isso acontece? Sou bem iniciante nessa área web, então toda ajuda é bem vinda.
  5. Boa noite galera! Estou com o seguinte problema, estou criando uma página em que essa página o usuário escolhe um arquivo do pc, que será o layout do seu crachá, o layout aparece na tela sem texto nenhum e o usuário pode colocar tags como: {{nome}} {{funcao}} e etc. Só que não tem idéia de como fazer pra "editar" esse arquivo pela página, ou seja colocar os dados que ele digitar no layout do crachá. Não sei se é possivel editar esse arquivo png(ou psd), já pesquisei muito a respeito e não achei uma solução parar gerar esses crachás. Não precisa me dar algum código pronto, quero pelo menos uma luz, uma ferramenta que seja possível fazer isso. Obrigado!
  6. alguém pra me tirar uma duvida que está incomodando e muito. Bom, trabalhamos com Binario em matriz multinivel, temos uma "Arvore" como exemplo em nosso site, porém ela não fica da mesma forma quando vista do celular e a web já está responsiva, ou seja já está programada pra computador ou celular, tablets etc. Esta é a imagem do computador: no celular, fica assim: Algo está errado, ela fica toda desmontada^^ já tentei colocar barra de rolagem para que possa arrastar pra um lado e para outro, porem no celular não aparece a barra, somente no computador, gostaria de saber se alguém poderia dar essa ajudinha.
  7. Olá a todos do fórum e comunidade web, estou compartilhando aqui com vocês, um vídeo que acabei de produzir como editar arquivos, html, css e JavaScript diretamente do Google Chorme e ainda obter a visualização em tempo real. https://www.youtube.com/watch?v=RUREbXno7oM
  8. Olá pessoal, bom dia. Baixei um layout pronto de um flipbook em html5 (que tá nesse link: http://www.autostar.com.br/book_autostar/) pois não entendo de programação. O arquivo veio com as bibliotecas css e js, além da biblioteca com imagens que estão linkadas dentro do html5. A questão é que esse cliente solicitou que esse flipbook fosse responsivo e até agora, não consegui encontrar solução para esse problema. Poderiam me ajudar? Grato!
  9. Olá, Alguém poderia me instruir passo a passo como adicionar esse MENU do link no meu Blog? já pesquisei bastante sobre o assunto mas não encontrei ninguém explicando onde devo salvar as imagens usadas no MENU do Codigo CSS em questão. Deveria ser fácil já que o Blogger disponibiliza a opção de Add codigo CSS. Link do MENU que eu gostaria de Add: http://www.psdgraphics.com/html-css/psd-web-navigation-html-and-css-menus-set/
  10. Olá, pessoal, boa tarde !! Estudei toda uma apostila sobre CSS, porém não estou conseguindo realizar uma simples tarefa !! Ao passar o mouse no 'button.botao', ativar o movimento do 'div.traco' ! Eis abaixo o 'Código Fonte' que estou tentando: <!DOCTYPE html> <html> <head> <style> button.botao { width: 150px; height: 50px; border: none; background-color: black; color: red; font-size: 23px; } div.traco { width: 20px; height: 10px; background: red; -webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */ transition: width 2s; } button.botao:hover div.traco { width: 150px; } </style> </head> <body> <button class="botao">Botao</button> <div class="traco"></div> </body> </html> Me ajudem por favor ! Obrigado !!
  11. Oi pessoal boa noite, minha duvida é: como eu deixo a li "pedidos de oração" em linha reta? me ajudem estou travado nisso a horas. apenas quero deixar o "pedidos de oração como se fosse numa linha só.
  12. Olá pessoal !! Eu preciso de alguma ajuda para resolver algumas dúvidas !! Se puder me ajudar eu agradeço !! Primeiro visite o link: http://terezanininha.com.br/CSS/Animations/Pagina_1_TryIt_3.html Veja o 'Código Fonte' pelo navegador !! O que estou tentando fazer ?? Eu quero que o elemento div, faça movimento de animation, vindo from {top:200px} to {top:0px} e paralisar no topo !! Neste exemplo, eu encontrei dois erros: - Primeiro Erro: Quando o div automaticamente começa a se movimentar, seu eu colocar o mouse sobre ele, antes de terminar o movimento, o div dá uma pulada direto para o topo !! "Eu não quero isso" !! Eu quero que se eu colocar o ponteiro do mouse sobre o div, que ele não dê esta subida repentina para o topo !! Que faça o movimento para o topo sem interrupção, mesmo se antes eu puser o ponteiro do mouse !! - Segundo Erro: Depois que o div cheguar ao topo, Se eu colocar o mouse nele, o fundo muda de cor, por animation ! Mas após isso, quando eu retiro o ponteiro do mouse, o div novamente cai para top:200px e começa o movimento para top:0px novamente ! O que eu quero é: que o div mova somente "uma vez" and "pare" em top:0px !! Depois de parar em top:0px, que fique intacto pra sempre e apenas faça o movimento de mudar a cor do fundo com o passar do mouse !! I tentei procurar na internet mas não achei algo que resolvesse esses dois problemas descritos acima ! Se possível, alguém poderia me dar uma ajuda testada que realmente funcione ?? Agradecido Carlos
  13. Bom dia! Gostaria de deixar o banner do meu site em Full width (largura total na tela do navegador). Alguém me ajuda? O site é www.bibiencanto.com.br. Veja o código do Slider: <div class="js-home-slider-container row-fluid slider-wrapper m-bottom m-bottom-half-xs "> <div class="js-home-slider-placeholder mobile-placeholder slider-placeholder-container p-relative overflow-none border-box" style="display: none;"> <div class="slider-figures-container full-width border-box overflow-none"> <div class="slider-placeholder-left-col pull-left"> <div class="slider-placeholder-square placeholder-color"> </div> </div> <div class="slider-placeholder-right-col pull-left"> <div class="slider-placeholder-line slider-placeholder-line-1 placeholder-color m-left-half"> </div> <div class="slider-placeholder-line slider-placeholder-line-2 placeholder-color m-left-half m-top-half"> </div> </div> </div> <div class="shine p-absolute full-width full-height"> </div> </div> <div class="js-slider-desktop-placeholder slider-desktop-placeholder" style="display: none;"> </div> <div class="js-home-slider-preloader slider-loading-icon svg-secondary-fill rotate" style="display: none;"> <svg baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" viewBox="-41 164.9 512 512"><path d="M415.4 536.6l-27.8-16a15.9 15.9 0 0 1-6.5-20.6 184.2 184.2 0 0 0-151.6-262.4 16 16 0 0 1-14.6-15.9v-32.1a16 16 0 0 1 17.2-16A248.5 248.5 0 0 1 429.7 297a248.4 248.4 0 0 1 8 232.8 15.8 15.8 0 0 1-22.3 6.8z"></path></svg> </div> <div class="bx-wrapper" style="max-width: 100%; visibility: visible; height: auto;"><div class="bx-viewport" style="width: 100%; overflow: hidden; position: relative; height: 62px;"><ul class="js-home-slider slider" style="visibility: visible; height: auto; width: 715%; position: relative; transition-duration: 0s; transform: translate3d(-654px, 0px, 0px);"><li class="slider-slide bx-clone" style="float: left; list-style: none; position: relative; width: 218px;"><img src="//d26lpennugtm8s.cloudfront.net/stores/888/697/themes/luxury/slide-1539387295325-4202928935-e31b2cdd1995c5eb29d2fee01a0db8181539387366.png?157548447" alt="" class="slider-image" style="visibility: visible;"></li> <li class="slider-slide" style="float: left; list-style: none; position: relative; width: 218px;"><img src="//d26lpennugtm8s.cloudfront.net/stores/888/697/themes/luxury/slide-1539387295324-991022106-04f9444676f8e4d9783e416af6f847201539387359.jpg?157548447" alt="" class="slider-image" style="visibility: visible;"></li> <li class="slider-slide" style="float: left; list-style: none; position: relative; width: 218px;"><img src="//d26lpennugtm8s.cloudfront.net/stores/888/697/themes/luxury/slide-1539387295324-4438799467-05e4203ade50fa79ab3fd3105c3674211539387361.jpg?157548447" alt="" class="slider-image" style="visibility: visible;"></li> <li class="slider-slide" style="float: left; list-style: none; position: relative; width: 218px;"><img src="//d26lpennugtm8s.cloudfront.net/stores/888/697/themes/luxury/slide-1539387295324-7119946929-ff252e28c3a5fec6fdb73deb19bc007c1539387362.jpg?157548447" alt="" class="slider-image" style="visibility: visible;"></li> <li class="slider-slide" style="float: left; list-style: none; position: relative; width: 218px;"><img src="//d26lpennugtm8s.cloudfront.net/stores/888/697/themes/luxury/slide-1539387295324-478245130-af89b1eac01f1971d5a34cc91e431b441539387364.png?157548447" alt="" class="slider-image" style="visibility: visible;"></li> <li class="slider-slide" style="float: left; list-style: none; position: relative; width: 218px;"><img src="//d26lpennugtm8s.cloudfront.net/stores/888/697/themes/luxury/slide-1539387295325-4202928935-e31b2cdd1995c5eb29d2fee01a0db8181539387366.png?157548447" alt="" class="slider-image" style="visibility: visible;"></li> <li class="slider-slide bx-clone" style="float: left; list-style: none; position: relative; width: 218px;"><img src="//d26lpennugtm8s.cloudfront.net/stores/888/697/themes/luxury/slide-1539387295324-991022106-04f9444676f8e4d9783e416af6f847201539387359.jpg?157548447" alt="" class="slider-image" style="visibility: visible;"></li></ul></div><div class="bx-controls bx-has-pager bx-has-controls-direction"><div class="bx-pager bx-default-pager" style="display: block;"><div class="bx-pager-item"><a href="" data-slide-index="0" class="bx-pager-link">1</a></div><div class="bx-pager-item"><a href="" data-slide-index="1" class="bx-pager-link">2</a></div><div class="bx-pager-item"><a href="" data-slide-index="2" class="bx-pager-link active">3</a></div><div class="bx-pager-item"><a href="" data-slide-index="3" class="bx-pager-link">4</a></div><div class="bx-pager-item"><a href="" data-slide-index="4" class="bx-pager-link">5</a></div></div><div class="bx-controls-direction"><a class="bx-prev" href=""><span class="btn btn-primary btn-inverse btn-small"><svg class="svg-inline--fa fa-chevron-left fa-w-10 fa-2x" aria-hidden="true" data-fa-processed="" data-prefix="fa" data-icon="chevron-left" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M34.52 239.03L228.87 44.69c9.37-9.37 24.57-9.37 33.94 0l22.67 22.67c9.36 9.36 9.37 24.52.04 33.9L131.49 256l154.02 154.75c9.34 9.38 9.32 24.54-.04 33.9l-22.67 22.67c-9.37 9.37-24.57 9.37-33.94 0L34.52 272.97c-9.37-9.37-9.37-24.57 0-33.94z"></path></svg><!-- <i class="fa fa-chevron-left fa-2x"></i> --><span></span></span></a><a class="bx-next" href=""><span class="btn btn-primary btn-inverse btn-small"><svg class="svg-inline--fa fa-chevron-right fa-w-10 fa-2x" aria-hidden="true" data-fa-processed="" data-prefix="fa" data-icon="chevron-right" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z"></path></svg><!-- <i class="fa fa-chevron-right fa-2x"></i> --><span></span></span></a></div></div></div> </div>
  14. Boa tarde estou com problemas no mainmenu em monitores pequenos, dependendo do tamanho ele duplica e o menu "atropela" o conteiner abaixo como visto na img abaixo: alguém saberia como resolver??? grato!!
  15. Olá, gostaria de saber se alguém consegue me ajudar. Eu atualizando as informações do site de uma amiga, mas depois de retirar algumas página e mudar algumas coisas no site, ele ficou todo alinhado a esquerda Esse é o site www.carioca-languages.com
  16. Estou com problema somente no Ios onde uma imagem de background não carrega CSS Observação: Carrega normalmente em todos navegadores em Windows, Linux, OS, Android e Windows Phone. No iOs n"ao carrega a imagem do background. Estou batendo cabeça e não vejo o erro. #home { width: 100%; height: 100%; background-color: #151515; background-image: url(../images/hero-bg.jpg); background-repeat: no-repeat; background-position: center 50%; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; background-attachment: fixed; min-height: 804px; position: relative; } #home .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: .2; background-color: #19191b; } .home-content-table { width: 100%; height: 100%; display: table; position: relative; text-align: center; } .home-content-tablecell { display: table-cell; vertical-align: middle; z-index: 500; } .home-content-tablecell .row { position: relative; padding-top: 16.2rem; padding-bottom: 15rem; } .home-content-tablecell h3 { font-family: "montserrat-bold", sans-serif; font-size: 2.2rem; color: white; text-transform: uppercase; letter-spacing: .3rem; margin: 0 0 .9rem 0; } .home-content-tablecell h1 { font-family: "montserrat-bold", serif; font-size: 9rem; line-height: 1.133; color: #FFFFFF; } .home-content-tablecell .more { margin: 4.8rem 0 0 0; } .home-content-tablecell .more .button { border-color: #FFFFFF; color: #FFFFFF; }
  17. Boa tarde, Sou novo em programação web (na verdade aprendi olhando na internet, ou seja sou bem, bem bem novo nisso mesmo) e estou tentando fazer um site para um amigo. Já tenho o esqueleto pronto, porém queria fazer uma coisa para ajudar na "contagem" de acesso. Como é um site relacionado a RPG, queria criar um popup quando o usuário sair da página, abrir uma mensagem dizendo a seguinte expressão: -"Obrigado pela preferencia e ao sair deixe uma moeda com a garçonete!" E ao lado da frase um busto de uma garçonete qualquer, e os 2 botões, o primeiro para dar uma moeda a garçonete e fechar a página e o segundo para fechar a página... Além disso, queria fazer um sistema vinculado ao botão de dar moeda a garçonete, com um contador na página do site, para saber quantas moedas a garçonete recebeu... Estou procurando mas como não sei mexer muito com javascript, css, php e afins... gostaria de uma ajuda de vocês, não faço ideia de onde começar o código... Caso alguém saiba, ficaria muito grato! Desde já agradeço Diego Rocha
  18. Fala pessoal, eu desenvolvi um site de pesquisa de endereços e estou com um problema agora que é o seguinte. Eu exibo uma lista usando ajax vindo do html pro php, dentro do php eu inseri nas linhas da lista dois botões, um para excluir aquela linha e outro caso o usuario(admin) deseje atualizar, mudar aquela linha. Segue o site abaixo:
  19. Fala galera, eu sou bem iniciante mesmo com linguagem html e css, e só utilizo das mesmas por questão de hobby na manutenção de sites etc. Esses dias eu encontrei um site gringo que fornecia códigos para realizar algumas funções, entre elas uma que me agradou bastante que foi o menu vertical. Ele é uma mistura de css e html e achei muito bom no meu site, o problema é o seguinte: além do menu vertical eu gostaria também que ficasse um slide no centro da página, no entanto o que está acontecendo é que o menu vertical meio que está empurrando o slide para baixo, ficando como a imagem abaixo: existiria alguma forma de conciliar os dois códigos de modo que o slide ficasse no centro? Ao lado direito do menu e não abaixo dele? Aqui estão os códigos do menu e do slide, que eu simplesmente copiei e colei na página html: 1. CÓDIGO DO MENU LATERAL <!DOCTYPE html> <html> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <style> body {margin:0} .icon-bar { width: 90px; background-color: #555; } .icon-bar a { display: block; text-align: center; padding: 16px; transition: all 0.3s ease; color: white; font-size: 36px; } .icon-bar a:hover { background-color: #000; } .active { background-color: #4CAF50 !important; } </style> <body> <div class="icon-bar"> <a class="active" href="#"><i class="fa fa-home"></i></a> <a href="#"><i class="fa fa-search"></i></a> <a href="#"><i class="fa fa-envelope"></i></a> <a href="#"><i class="fa fa-globe"></i></a> <a href="#"><i class="fa fa-trash"></i></a> </div> </body> </html> 2. CÓDIGO DO SLIDE <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * {box-sizing: border-box} body {font-family: Verdana, sans-serif; margin:0} .mySlides {display: none} img {vertical-align: middle;} /* Slideshow container */ .slideshow-container { max-width: 1000px; position: relative; margin: auto; } /* Next & previous buttons */ .prev, .next { cursor: pointer; position: absolute; top: 50%; width: auto; padding: 16px; margin-top: -22px; color: white; font-weight: bold; font-size: 18px; transition: 0.6s ease; border-radius: 0 3px 3px 0; } /* Position the "next button" to the right */ .next { right: 0; border-radius: 3px 0 0 3px; } /* On hover, add a black background color with a little bit see-through */ .prev:hover, .next:hover { background-color: rgba(0,0,0,0.8); } /* Caption text */ .text { color: #f2f2f2; font-size: 15px; padding: 8px 12px; position: absolute; bottom: 8px; width: 100%; text-align: center; } /* Number text (1/3 etc) */ .numbertext { color: #f2f2f2; font-size: 12px; padding: 8px 12px; position: absolute; top: 0; } /* The dots/bullets/indicators */ .dot { cursor: pointer; height: 15px; width: 15px; margin: 0 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; } .active, .dot:hover { background-color: #717171; } /* Fading animation */ .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} } /* On smaller screens, decrease text size */ @media only screen and (max-width: 300px) { .prev, .next,.text {font-size: 11px} } </style> </head> <body> <div class="slideshow-container"> <div class="mySlides fade"> <div class="numbertext">1 / 3</div> <img src="img_nature_wide.jpg" style="width:100%"> <div class="text">Caption Text</div> </div> <div class="mySlides fade"> <div class="numbertext">2 / 3</div> <img src="img_fjords_wide.jpg" style="width:100%"> <div class="text">Caption Two</div> </div> <div class="mySlides fade"> <div class="numbertext">3 / 3</div> <img src="img_mountains_wide.jpg" style="width:100%"> <div class="text">Caption Three</div> </div> <a class="prev" onclick="plusSlides(-1)">&#10094;</a> <a class="next" onclick="plusSlides(1)">&#10095;</a> </div> <br> <div style="text-align:center"> <span class="dot" onclick="currentSlide(1)"></span> <span class="dot" onclick="currentSlide(2)"></span> <span class="dot" onclick="currentSlide(3)"></span> </div> <script> var slideIndex = 1; showSlides(slideIndex); function plusSlides(n) { showSlides(slideIndex += n); } function currentSlide(n) { showSlides(slideIndex = n); } function showSlides(n) { var i; var slides = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("dot"); if (n > slides.length) {slideIndex = 1} if (n < 1) {slideIndex = slides.length} for (i = 0; i < slides.length; i++) { slides.style.display = "none"; } for (i = 0; i < dots.length; i++) { dots.className = dots.className.replace(" active", ""); } slides[slideIndex-1].style.display = "block"; dots[slideIndex-1].className += " active"; } </script> </body> </html>
  20. Bom Dia! Tenho a seguinte página <!doctype html> <html> <head> <meta charset="utf-8"> <title>Slider</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="_css/aos.css"> <link rel="stylesheet" type="text/css" href="_css/jquery.cycle2.css"> <script type="text/javascript" src="_js/jquery.js"></script> <script type="text/javascript" src="_js/jquery.cycle2.min.js"></script> <style> @import url('http://fonts.googleapis.com/css?family=Open+Sans'); * { font-family: 'Open Sans'; margin: 0; padding: 0; box-sizing: content-box; } img { border: 0; max-width: 100%; } ul { list-style: none; } ul li { display: inline; } .aos-all { width: 1000px; max-width: 98%; margin: 10vh auto 0 auto; } .aos-item { display: inline-block; float: left; width: 40%; height: 300px; padding: 20px; } .aos-item__inner { position: relative; width: 100%; height: 100%; float: left; background: #1da4e2; line-height: 260px; text-align: center; color: #fff; } @media screen and (max-width: 800px) { .aos-item { width: 50%; } } .logo { width : 432px; -webkit-animation : logo-anim 1s; -moz-animation : logo-anim 1s; -o-animation : logo-anim 1s; animation : logo-anim 1s; } @-webkit-keyframes logo-anim { 0% { opacity : 0; transform : translateY(-50px); -webkit-transform : translateY(-50px); -moz-transform : translateY(-50px); -o-transform : translateY(-50px); -ms-transform : translateY(-50px); } 100% { opacity : 1; transform : translateY(0px); -webkit-transform : translateY(0px); -moz-transform : translateY(0px); -o-transform : translateY(0px); -ms-transform : translateY(0px); } } @-moz-keyframes logo-anim { 0% { opacity : 0; transform : translateY(-50px); -webkit-transform : translateY(-50px); -moz-transform : translateY(-50px); -o-transform : translateY(-50px); -ms-transform : translateY(-50px); } 100% { opacity : 1; transform : translateY(0px); -webkit-transform : translateY(0px); -moz-transform : translateY(0px); -o-transform : translateY(0px); -ms-transform : translateY(0px); } } @-o-keyframes logo-anim { 0% { opacity : 0; transform : translateY(-50px); -webkit-transform : translateY(-50px); -moz-transform : translateY(-50px); -o-transform : translateY(-50px); -ms-transform : translateY(-50px); } 100% { opacity : 1; transform : translateY(0px); -webkit-transform : translateY(0px); -moz-transform : translateY(0px); -o-transform : translateY(0px); -ms-transform : translateY(0px); } } @keyframes logo-anim { 0% { opacity : 0; transform : translateY(-50px); -webkit-transform : translateY(-50px); -moz-transform : translateY(-50px); -o-transform : translateY(-50px); -ms-transform : translateY(-50px); } 100% { opacity : 1; transform : translateY(0px); -webkit-transform : translateY(0px); -moz-transform : translateY(0px); -o-transform : translateY(0px); -ms-transform : translateY(0px); } } .logo-atividades { position : absolute; top : 0; center : 0; width : 100%; height : 500px; text-align : center; overflow : hidden; z-index : 20; } .atividades { color : #FFF; height : 115px; overflow : hidden; position : absolute; top : 80%; margin-top : -176px; width : 100%; pointer-events : none; text-align : center; z-index : 10; } .atividades a { text-decoration : none; } .atividades ul { list-style : none; padding : 0; margin : 10px 0 0; position : relative; height : 100px; font-size : 36px; font-weight : 300; text-align : center; font-family : 'Lato', sans-serif; letter-spacing : 5px; text-transform : uppercase; z-index : 100; } .atividades ul li { width : 100%; text-align : center; position : absolute; opacity : 0; top : 85px; line-height : 100px; -webkit-transition : all 0.5s ease-in-out; -moz-transition : all 0.5s ease-in-out; -o-transition : all 0.5s ease-in-out; transition : all 0.5s ease-in-out; transition-timing-function : ease; -webkit-transition-timing-function : ease; /* Safari and Chrome */ } .atividades ul li.ativa { opacity : 1; top : 0; -webkit-transition : all 1s ease-in-out; -moz-transition : all 1s ease-in-out; -o-transition : all 1s ease-in-out; transition : all 1s ease-in-out; transition-timing-function : ease; -webkit-transition-timing-function : ease; /* Safari and Chrome */ } } </style> </head> <body> <div class="cycle-slideshow" data-cycle-fx=fadeout data-cycle-timeout=5000 data-cycle-pause-on-hover="true" data-cycle-slides="div.slide"> <div class="logo-atividades"> <div style="margin-top: 100px;"> <a href="http://www.funerariasaopedro.net.br"> <img class="logo" src="_img/logoFuneraria.png" alt="Logo"/> </a> <div class="atividades"> <ul> <li class="ativa">Agência Funerária</li> <li>Funerais</li> <li>Cremações</li> <li>Trasladações</li> <li>Tanatopraxias</li> <li>Exumações</li> <li>Artigos Religiosos</li> <li>Atendimento 24h</li> </ul> </div> </div> </div> <!-- prev/next links --> <div class="cycle-prev"></div> <div class="cycle-next"></div> <div class="cycle-pager"></div> <div class="slide"> <img src="_img/_banner/_site/1.png" /> </div> <div class="slide"> <img src="_img/_banner/_site/2.png" /> </div> <div class="slide"> <img src="_img/_banner/_site/3.png" /> </div> <div class="slide"> <img src="_img/_banner/_site/4.png" /> </div> </div> <div class="aos-item" data-aos="fade-right"> <div class="aos-item__inner"> <h3>Esquerda</h3> </div> </div> <div class="aos-item" data-aos="fade-left"> <div class="aos-item__inner"> <h3>Direita</h3> </div> </div> <div class="aos-item" data-aos="fade-up"> <div class="aos-item__inner"> <h3>Baixo Cima</h3> </div> </div> <div class="aos-item" data-aos="fade-down"> <div class="aos-item__inner"> <h3>Cima Baixo</h3> </div> </div> <div class="aos-item" data-aos="fade-in"> <div class="aos-item__inner"> <h3>Baixo Cima</h3> </div> </div> <div class="aos-item" data-aos="fade-in"> <div class="aos-item__inner"> <h3>Cima Baixo</h3> </div> </div> <script> function homeTitleAnimation(){ var interval; var counter = 1; var myFunc = function() { var cur = $('.atividades ul li').length; if(cur == counter) { $('.atividades ul li.ativa').removeClass('ativa'); $('.atividades ul li').first().addClass('ativa'); counter = 1; } else { counter++; $('.atividades ul li.ativa').removeClass('ativa').next().addClass('ativa'); } }; interval = setInterval(myFunc, 4000); } homeTitleAnimation(); </script> <script src="_js/aos.js"></script> <script> AOS.init({ easing: 'ease-in-out-sine' }); </script> </body> </html> Tudo funciona corretamente com exceção do posicionamento da logo e da ul que rodam sobre o Slideshow que não estou conseguindo posiciona-los sobre o Slideshow. <div class="cycle-slideshow" data-cycle-fx=fadeout data-cycle-timeout=5000 data-cycle-pause-on-hover="true" data-cycle-slides="div.slide"> <div class="logo-atividades"> <div style="margin-top: 100px;"> <a href="http://www.funerariasaopedro.net.br"> <img class="logo" src="_img/logoFuneraria.png" alt="Logo"/> </a> <div class="atividades"> <ul> <li class="ativa">Agência Funerária</li> <li>Funerais</li> <li>Cremações</li> <li>Trasladações</li> <li>Tanatopraxias</li> <li>Exumações</li> <li>Artigos Religiosos</li> <li>Atendimento 24h</li> </ul> </div> </div> </div> <!-- prev/next links --> <div class="cycle-prev"></div> <div class="cycle-next"></div> <div class="cycle-pager"></div> <div class="slide"> <img src="_img/_banner/_site/1.png" /> </div> <div class="slide"> <img src="_img/_banner/_site/2.png" /> </div> <div class="slide"> <img src="_img/_banner/_site/3.png" /> </div> <div class="slide"> <img src="_img/_banner/_site/4.png" /> </div> </div> Onde estou errando? Esse código pode ser visto em : http://funerariasaopedro.net.br/novo/ Na página, se derem um ctr+a, poderão notar no canto direito e abaixo do slide, a ul rodando normalmente. Porém a posição correta dela é no meio do slide e ao centro. Com relação à logomarca que está escondida atrás do slide, sua posição é acima do slide e acima da ul
  21. E ae pessoal, então, estou criando um projeto para aprender algumas linguagens de programação mais rápido, por meio de um servidor Discord. Por agora queria algumas pessoas para me ajudar a organizar e modular a ideia, caso tenha interesse segue o link do convite limitado ao servidor: https://discord.gg/DCmkAcg
  22. Aqui uma screenshot detalhada do erro: http://prntscr.com/j5firk Observe que quanto maior for o conteudo da div ao lado, a outra div desce em questão da posição. O que eu queria é que ela ficasse fixa ali. -- Já tentei usar Position: fixed; mas não funciona a div fica com um tamanho desproporcional e sai do tamanho que eu defini. Codigo: <div style="max-width: 100%;"> <div class="card-panel purplemx" style="width:49%; box-shadow: 1px 1px 12px 1px rgba(61,55,128,1); border-radius:3px; display:inline-block;"> <div class="card-content"> <h5 class="card-title white-text"><i class="fas fa-star" style="color:yellow"></i> USUARIO DESTAQUE<hr></hr></h5> <p class="white-text"> <div class="destaque white-text"> conteudo teste <br> conteudo teste <br>conteudo teste <br>conteudo teste <br>conteudo teste <br>conteudo teste <br>conteudo teste <br>conteudo teste <br>conteudo teste <br> </div> </p> </div> </div> <span style="padding-left:1%"></span> <div class="card-panel purplemx" style="width:49%; box-shadow: 1px 1px 12px 1px rgba(61,55,128,1); border-radius:3px; display:inline-block;"> <div class="card-content"> <h5 class="card-title white-text"><i class="pink-text fas fa-gift"></i> PRESENTES<hr></hr></h5> <center> <p class="white-text"> <i class="fas fa-unknown fa-2x"></i> </p> </center> </div> </div> </div>
  23. Fizemos vídeos tutoriais que mostram como desenvolver páginas responsivas. O cronograma dos vídeos: 23/03 - Introdução É introduzido o assunto e um exemplo de site que utiliza essa técnica 24/03 - Janela de Exibição O que deve ser feito para que uma página seja exibida corretamente em dispositivos móveis e os cuidados que se deve ter ao desenvolver páginas responsivas 25/03 - Visão de Grade Como fazer a estrutura de uma página para que ela seja desenvolvida no padrão responsivo 26/03 - Consulta de mídias Como fazer para que a página se ajuste aos tamanhos diferentes dos dispositivos 27/03 - Imagem Como colocar imagem na página e como fundo de forma responsiva e definir uma lista de imagem e qual será utilizada dependendo do tamanho do dispositivo 28/03 - Vídeo Como colocar vídeo na página de forma responsiva 30/03 - Frameworks É apresentado dois frameworks que conhecemos e você poderá escolher sobre qual deles faremos vídeos tutoriais primeiro O horário de lançamento para todos os vídeos serão nos respectivos dias às 12:00 Segue o link da playlist:
  24. Olá pessoal, estamos criando algumas vídeo aulas de programação em HTML5 e CSS e gostaríamos que vocês dessem críticas e sugestões do que podemos estar fazendo para melhorar Segue o link da playlist com 22 vídeos de HTML5 https://www.youtube.com/playlist?list=PLi3qhjm7dbeeC5h0NDfUiRqEvE0v08Pdd 1 - O que é HTML, CSS e JavaScript? É explicado o que é HTML, CSS e JavaScript e porque é necessário conhecer estas 3 linguagens para programar para Web 2 - Programas Necessários É mostrado os programas necessários para começar a programar (estamos fazendo as vídeo aulas no sistema operacional Xubuntu) 3 - Primeiro HTML5 Começamos a mostrar de fato como começar a programar em HTML e como fazer para validar o código 4 - Hierarquia de títulos e linha horizontal Como fazer hierarquia de títulos e colocar linha horizontal Tags: h1 até h6 e hr 5 - Parágrafo, quebra de linha e texto pré-formatado Como fazer parágrafo, quebra de linha e texto pré-formatado Tags: p, br e pre 6 - Formatação de texto Como fazer formatação de texto Tags: b, strong, i, em, mark, small, sub, sup, ins e del Atributos: cite e datetime das tags ins e del 7 - Citações Como fazer citações Tags: q, blockquote, cite, address, abbr e bdo Atributos: title da tag abbr, dir da tag bdo e cite das tags q e blockquote 8 - Comentários e comentários condicionais Como fazer comentário e para que serve 9 - Arquivo Externo Como fazer referência de arquivo externo no HTML 10 - Links | Parte 1 Como fazer links para abrir outros HTML, enviar e-mail, executar JavaScript e direcionar para um local específico Tag: a Atributos: href, hreflang e type 11 - Links | Parte 2 Como criar links para download, diferentes formas de abrir no navegador e vulnerabilidade do target="_blank" Tag: a Atributos: download e target Valores para o target: _self, _blank, _top e _parent 12 - Links | Parte 3 Como resolver vulnerabilidade do target="_blank" e o atributo rel Tag: a Atributo: rel Valores para o rel: alternate, author, bookmark, prev, next, external, help, license, search, tag, nofollow, noreferrer, noopener 13 - Bloco e Linha O conceito de tag de bloco e de linha Tags: div e span 14 - Imagem | Parte 1 Como colocar imagem no HTML Tag: img Atributos: src, alt, width, height, crossorigin, ismap e longdesc Valores para o crossorigin: anonymous e use-credentials 15 - Imagem | Parte 2 Como fazer mapeamento de imagem para colocar link dentro dela Tags: img, map e area Atributo da img: usemap Atributo da map: name Atributos da area: shape, coords e alt Valores para o shape: circle, rect e poly 16 - Imagem | Parte 3 Como definir imagens diferentes para dispositivos com características de tela diferentes Tags: img, picture e source Atributos da img: srcset e sizes Atributos da source: srcset, sizes, media e type 17 - Tabela | Parte 1 Como criar tabela em HTML Tags: table, caption, tr, th e td Atributos da th: abbr, sorted e scope Atributos da th e da td: colspan, rowspan e headers Valores para o scope: col, colgroup, row e rowgroup 18 - Tabela | Parte 2 Como altarar estilo de uma coluna inteira e definir cabeçalho, corpo e rodapé da tabela Tags: colgroup, col, thead, tbody e tfoot Atributo da colgroup e col: span 19 - Lista Como criar lista não-ordenada, ordenada e de descrição Tags: ul, li, ol, dl, dt e dd Atributos da ol: type, reversed e start Atributos da li quando estiver na ol: value Valores para o type: 1, a, A, i e I 20 - Iframe Como colocar uma página dentro de outra em HTML Tag: iframe Atributos: src, srcdoc, width, height, name e sandbox Valores para o sandbox: allow-pointer-lock, allow-scripts, allow-forms, allow-top-navigation, allow-same-origin e allow-popups 21 - Atributo Class Qual a importância do atributo class e como utilizar ele em CSS e JavaScript 22 - Atributo Id Qual a importância do atributo id e como utilizar ele em CSS e JavaScript Segue o link da playlist com 17 vídeos de CSS https://www.youtube.com/playlist?list=PLi3qhjm7dbedkcSwqOrGYHD_E_0H7Nopj 1 - O que é HTML, CSS e JavaScript? É explicado o que é HTML, CSS e JavaScript e porque é necessário conhecer estas 3 linguagens para programar para Web 2 - Programas Necessários É mostrado os programas necessários para começar a programar (estamos fazendo as vídeo aulas no sistema operacional Xubuntu) 3 - Primeiro CSS Como fazer a integração entre HTML e CSS 4 - Cores Como definir cor por nome, hexadecimal, RGB, HSL, RGBA e HSLA 5 - Initial e Inherit Como utilizar os valores initial e inherit para propriedades em CSS 6 - Consulta de mídia Como definir estilos diferentes para tipos de dispositivos diferentes e mesmo tipo de dispositivo com características diferentes 7 - Borda | Parte 1 Como fazer bordas em CSS Propriedades: border, border-color, border-radius, border-style e border-width Valor para border-color: transparent Valores para border-style: none, hidden, dotted, dashed, solid, double, groove, ridge, inset e outset Valores para border-width: medium, thin e thick 8 - Borda | Parte 2 Como alterar as propriedades da borda em cada lado Propriedades: border-bottom, border-bottom-color, border-bottom-style, border-bottom-width, border-left, border-left-color, border-left-style, border-left-width, border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius, border-right, border-right-color, border-right-style, border-right-width, border-top, border-top-color, border-top-style e border-top-width 9 - Largura e Altura Como definir largura e altura em CSS e também valor mínimo e máximo para cada uma Propriedades: width, height, min-width, max-width, min-height e max-height 10 - Margem Como colocar margem em CSS, centralizar conteúdo e um cuidado que deve ter ao utilizar margem Propriedades: margin, margin-top, margin-right, margin-bottom e margin-left 11 - Preenchimento Como colocar preenchimento em CSS Propriedades: padding, padding-top, padding-right, padding-bottom e padding-left 12 - Excesso O que fazer quando o conteúdo de uma tag é maior que a largura e/ou altura Propriedades: overflow, overflow-x e overflow-y Valores para as propriedades: visible, hidden, scroll e auto 13 - Modelo de Caixa Qual é o conceito de modelo de caixa e porque é importante conhecer ele para montar o layout de uma página 14 - Fundo Como alterar a cor de fundo, colocar imagem como fundo e definir a posição da mesma Propriedades: background, background-color, background-image, background-repeat, background-attachment e background-position Valores para background-repeat: repeat, repeat-x, repeat-y, no-repeat, space e round Valores para background-attachment: scroll, fixed e local Valores para background-position: left top, left center, left bottom, right top, right center, right bottom, center top, center center, center bottom 15 - Contorno Como colocar contorno no conteúdo utilizando CSS Propriedades: outline, outline-color, outline-style, outline-width e outline-offset Valor para outline-color: invert Valores para outline-style: none, hidden, dotted, dashed, solid, double, groove, ridge, inset e outset Valores para outline-width: medium, thin e thick 16 - Formatação de Texto | Parte 1 Como fazer formatação de texto utilizando CSS Propriedades: color, direction, unicode-bidi, letter-spacing, line-height, text-align, text-indent, text-transform, word-spacing e text-shadow Valores para direction: ltr e rtl Valores para unicode-bidi: normal, embed, bidi-override, isolate, isolate-override e plaintext Valor para line-height: normal Valores para text-align: left, right, center e justify Valores para text-transform: none, capitalize, uppercase e lowercase Valor para word-spacing: normal 17 - Formatação de Texto | Parte 2 Como fazer formatação de texto utilizando CSS Propriedades: text-decoration-line, text-decoration-color, text-decoration-style, text-decoration, white-space, vertical-align e text-overflow Valores para text-decoration-line: none, underline, overline e line-through Valores para text-decoration-style: solid, double, dotted, dashed e wavy Valores para white-space: normal, nowrap, pre, pre-line e pre-wrap Valores para vertical-align: baseline, sub, super, top, text-top, middle, bottom e text-bottom Valores para text-overflow: clip e ellipsis PS: - Como temos nossos serviços seculares que é como conseguimos o sustento não teremos como responder todos os comentários de imediato, mas de qualquer forma agradecemos desde já a ajuda - Sempre que tiver vídeo novo atualizaremos este tópico
  25. Sou novo aqui, então perdão se eu estiver postando no lugar errado ou coisa do tipo Bom, comecei a estudar programação a um tempo atrás e agora estou estudando PHP, para por em prática oque aprendi decidi criar um site usando html, php e etc, mas logo de cara me deparei com um problema, ao tentar criar uma área que iria permitir ao usuário escolher um tipo de calculo matemático e realiza-lo com os valores desejados, acabei percebendo que ao enviar os formulários para o arquivo php, ele abre e faz os cálculos como deveria, porém não carrega o css do site, então gostaria de saber como posso resolver isso, se tem algum método de carregar o css no arquivo php normalmente, ou se tem a possibilidade de ao invés de ir para o arquivo php, apenas trazer os resultados do arquivo php para o arquivo html.