Pesquisar na Comunidade

Bom dia galera, Tenho um site que é muito pesado, não tem muito o que fazer pois ele possui muitas imagens obrigatórias e de boa qualidade. Pensando nisso gostaria de saber como faço para quando alterar entre os menus alterar apenas a div de conteúdo e não o site todo. Fico no aguardo vlw!!

Iae galera, criei uma conta aqui no fórum para ver se alguém pode me ajudar. É o seguinte: http://www.dotazoneapp.com/site/pt/ este site, tem um efeito bem interessante de scroll, que quando desce o scroll o background-image do elemento muda de poisção e desce também numa velocidade maior. E com isso gostaria de saber como fazer um efeito desse ou semelhante, pois não faço ideia de como seja feito. E também como o efeito de transição para cima do botão pode ser feito. Bem, é isso, desculpem-me por ter criado um tópico somente para isso. Obrigado desde já

Boa tarde galera Alguém sabe se é possível mudar a forma do cursor que fica dentro da input piscando? Preciso transformar ele disso --> | para um quadrado vermelho em volta da letra de onde ele está. Eu consegui um script em js para pegar a posição de onde ele está no texto mas não sei como mudar o css dele.

Olá estou com uma duvida sera que alguém pode me dar uma dica? Estou desenvolvendo um site ONE PAGE Dentro dele tenho varias seções, dentre umas delas tenho imagem com links posicionados dentro dela. ------- <div class="section" id="secondPage"> <section> <header> <img name="lupas" src="images/1_header.jpg" width="1343" height="726" id="lupas" usemap="#m_lupas" alt="lupa" /> <map name="m_lupas" id="m_lupas"> <area shape="rect" coords="469,418,511,461" href="images/paralax/marinheiro/index.html" target="None" alt="" title="Quarto Marinheiro" /> <area shape="rect" coords="229,349,271,392" href="images/paralax/tropical/index.html" target="None" alt="" title="Quarto Tropical" /> <area shape="rect" coords="223,235,265,278" href="images/paralax/branco/index.html" target="None" alt="" title="Quarto Branco" /> <area shape="rect" coords="477,298,519,341" href="images/paralax/safari/index.html" target="None" alt="" title="Quarto Safari" /> <area shape="rect" coords="912,397,954,440" href="images/paralax/pescador/index.html" target="None" alt="" title="Quarto Pescador" /> </map> </header> </section> </div> ---- Cada link é uma referencia a uma nova galeria, devera estar escondida. Ao clicar em um link, logo apos essa div acima, devera surgir um div que esta escondida(que é o problema) Onde terá uma galeria para mostrar as imagens referentes ao link. Deve criar uma galeria para cada link com a imagens e deixas escondida? tem alguma maneira de posicionar todas as galerias no mesmo local, para que usuário tenha a impressão ao clicar em outro link, apenas as imagens da galerias tenha si alterado. -O usuário pode fechar e abrir essa aba, logo abaixo da imagem. Qual a melhor maneira para criar? desenvolver essa gallery? (css, html e php ou javascrip, ajax)

Olá pessoal, andei pesquisando aqui no fórum uma solução para meu problema, mas as alternativas que tentei não resolveram o caso. Poderiam me dar uma ajudinha aqui? Quero criar um terceiro nível em meu menu, especialmente no marcador "Download", para que eu possa, por exemplo, dar categorias de downloads como "material acadêmico, etc...". <div class='top-nav'> <div id='menu-dropdown'> <ul id='topmobilemenu'> <li><a expr:href='data:blog.homepageUrl'><span><i class='icon-home'/></span></a></li> <li class='has-sub'> <a href='#'><span>Tecnologia</span></a> <ul> <li><a href='#'><span>Notícias</span></a></li> <li><a href='#'><span>Downloads</span></a></li> <li class='last'><a href='#'><span>Products</span></a></li> </ul> </li> <li class='has-sub'> <a href='#'><span>Negócios</span></a> <ul> <li><a href='#'><span>Marketing</span></a></li> <li class='last'><a href='#'><span>Location</span></a></li> </ul> </li> <li class='last'><a href='#'><span>Fashion</span></a></li> <li class='last'><a href='#'><span>Lifestyle</span></a></li> </ul> </div> <ul class='social-icons float-right'> <li class='facebook'><a href='http://facebook.com' target='_blank' title='Facebook'> <i class='icon-facebook'/> </a></li> <li class='twitter'><a href='https://twitter.com' target='_blank' title='Twitter'> <i class='icon-twitter'/> </a></li> <li class='gplus'><a href='https://plus.google.com' target='_blank' title='Google plus'> <i class='icon-google-plus'/> </a></li> </ul> </div> <div class='clear'/> E o CSS pra ele é: (Vou colando a medida que eu for localizando no template) #menu-dropdown { max-width: 650px; float: left; } #menu-dropdown { border: 0px; margin: 0px auto; padding: 0px; font-size: 14px; font-weight: bold; width:100%; max-width:750px; float:left; } #menu-dropdown ul { background: #333333; height: 45px; list-style: none; margin: 0; padding: 0; } #menu-dropdown li { float: left; padding: 0px; } #menu-dropdown li a { background: #333333 url('http://4.bp.blogspot.com/-eRuYGIJ6kZU/Un8xjrEuaUI/AAAAAAAABto/rEx77zt-lr4/s1600/seperator.gif') center right no-repeat; display: block; font-weight: 400; line-height: 45px; margin: 0px; padding: 0px 15px; text-align: center; text-decoration: none; font-family: Oswald, arial, Georgia, serif; text-transform: uppercase; font-size:15px; } #menu-dropdown > ul > li > a { color: #cccccc; } #menu-dropdown ul ul a { color: #cccccc; } #menu-dropdown li > a:hover, #menu-dropdown ul li:hover > a { background: $(primary.color) url('http://2.bp.blogspot.com/-OIz_gMAJc6M/Un8xjibyHrI/AAAAAAAABt8/cJcD57RyXXY/s1600/hover.png') bottom center no-repeat; color: #FFFFFF; text-decoration: none; } #menu-dropdown li > a i{ color: #FFFFFF; } #menu-dropdown li ul { background: #333333; display: none; height: auto; padding: 0px; margin: 0px; border: 0px; position: absolute; width: 225px; z-index: 200; /*top:1em; /*left:0;*/ } #menu-dropdown li:hover ul { display: block; } #menu-dropdown li li { background: url('http://2.bp.blogspot.com/-62RZ4E3cHS8/Un8xkLqHRaI/AAAAAAAABt0/RqGVZ3Xy1Hs/s1600/sub_sep.gif') bottom left no-repeat; display: block; float: none; margin: 0px; padding: 0px; width: 225px; } #menu-dropdown li:hover li a { background: none; } #menu-dropdown li ul a { display: block; height: 35px; line-height:35px; font-size: 12px; font-style: normal; margin: 0px; padding: 0px 10px 0px 15px; text-align: left; } #menu-dropdown li ul a:hover, #menu-dropdown li ul li:hover > a { background: $(primary.color) url('http://1.bp.blogspot.com/-xW_sOqCx39k/Un8xjlYSKqI/AAAAAAAABts/LJqXWuWTJME/s1600/hover_sub.png') center left no-repeat; border: 0px; color: #ffffff; text-decoration: none; } #menu-dropdown p { clear: left; } Em anexo segue um print do menu atual.

Olá, O MelhorEscola.Net é um site que ajuda os pais a escolherem a escola para os filhos e tem um papel social que é o de dar mais transparência às informações de escolas do país. Desde 2013 mais de 1 milhão de pessoas já buscaram informações de escolas no site e em julho de 2014 o site foi aprovado no programa Startup Brasil, que incentiva startups promissoras no país. Estamos buscando um desenvolvedor para ter uma participação no negócio, além de ganhar uma bolsa de R$ 3 mil/mês do Startup Brasil e receber aceleração pela Pipa. As características que estamos buscando nessa pessoa são as seguintes: · Comprometimento com a causa social do MelhorEscola.Net (mais transparência às informações de escolas do país). · Perfil empreendedor e interessado pelas novidades e inovações no ambiente web (tendências, ferramentas, SEO etc) · Dominar linguagem PHP, Framework Codigniter e MySQL, ter conhecimento em CSS, HTML e JQuery e conhecer (ou ter interesse em aprender) Node e Mongo DB, · Disponibilidade para dedicação integral e conseguir comprovar no mínimo 2 anos de experiência profissional (exigência do Startup Brasil) Interessados devem enviar e-mail se apresentando para contato@melhorescola.net. Obrigado, Juliano Souza

Sou iniciante no assunto, porém tenho quer fazer algumas alterações num e-commerce, já consegui algumas coisas, agora preciso de deixar o nome do produto na página inicial mais comprido, fica esticando na vertical, já fiz de tudo, mas sem saber acabamos fazendo cagada, o link do site é http://www.shopdias.com.br , vou colocar um trecho do css para ver se alguém pode dar algumas dicas: #DSL_HomeGeral {padding:0 5px;} #DSL_BannerCentral {text-align:center;} #DSL_ContainerProdutos {display:inline-block; margin-left:auto; padding:10px 0; width:100%;} #DSL_ContainerProdutos ul li {float:left; width:25%; margin-bottom:10px; padding-bottom:10px; border-bottom:1px solid #e9e9e9;} .DSL_BlocoProdutos {width:25%; display:block; margin:120px; height:240px; float:right;} .DSL_Lancamento {text-align:center; height:21px;} .DSL_FotoProduto {width:170px; border:0px; height:auto; padding-top:10px; overflow:hidden; background:#fff; text-align:center; position:relative;} .DSL_NomeProduto a {font-size:12px; line-height:11px; color:#4b4b4b; font-weight:bold;} .DSL_ValorPor {font-size:13px; font-weight:bold; display:block; color:#363636; text-align:center;} .DSL_ValorDe {font-size:12px; margin:7px 0 0 0; color:#363636; text-decoration:line-through; text-align:center;} .DSL_BlocoProdutos .DSL_SubProduto {display:none; text-align:center;} .DSL_Espiar {text-align:center; padding:5px 0px;} .DSL_FreteGratis {text-align:center;} .DSL_ValorParcelado {font-size:12px; color:#4b4b4b;} .DSL_ValorParcelado span {color:#ff6800; font-weight:bold;} .DSL_CarrinhodeCompras {padding:2px 0 0 0;}

Pessoal, tudo certo? Estou desenvolvendo um site com 3 colunas principais de conteúdo. As 3 colunas são divs dentro de um div main. Usei o esquema de float right, float left e a div do meio com margin: 0 auto. Abaixo dessas 3 divs tem mais 3 outras divs, que são botões, mas o texto está pulando fora. :( Fiz o esquema de usar o display:table na div main e também de usar uma div com clear both, mas não funcionou. Vocês possuem alguma dica? Deixo a imagem do site, o código html e o css. Agradeço desde já, pessoal. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="estilo.css" rel="stylesheet" type="text/css"> <title>NeoTass - Eventos</title> </head> <body> <div id="topo"> <div id="logo"> </div> </div> <div id="topo_baixo"> </div> <div id="titulo"> TELA INICIAL </div> <div id="main"> <div id="explicacao"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> <div id="texto_index"> Escolha a quantidade de pessoas: </div> <div id="menu_esquerda_index"> <ul> <li><a href="#">Item 01</a></li> </ul> </div> <div id="menu_direita_index"> <ul> <li><a href="#">Item 07</a></li> </ul> </div> <div id="menu_meio_index"> <ul> <li><a href="#">Item 13</a></li> </ul> </div> <div id="cont_dir"> <div id="seta_dir"> </div> <div id="avancar"> <a href="#">Começar</a> </div> </div> </div> </body> </html> *{ margin:0; padding:0; } body{ background:#303030; } ul{ list-style:none; } li{ font-family:"Trebuchet MS", Arial, Tahoma; font-size:15px; border-bottom:1px solid #f35900; padding:15px; padding-left:30px; } li a{ color:#FFF; text-decoration:none; } #topo{ background: #FFF; height:94px; width:100%; } #logo{ background-image:url(images/logo.jpg); background-repeat:no-repeat; position:absolute; height:85px; width:935px; left:50%; ; } #topo_baixo{ background: #f36e21; height:5px; width:100%; } #titulo{ background: #303030; height:80px; width:100%; margin-top:30px; color:#FFF; font-family:"Trebuchet MS", Arial, Tahoma; font-size:50px; text-align:center; } #texto_index{ height:20px; width:100%; padding-top:130px; padding-bottom:20px; color:#f36e21; font-family:"Trebuchet MS", Arial, Tahoma; font-size:20px; } #texto{ height:20px; width:100%; padding-bottom:20px; color:#f36e21; font-family:"Trebuchet MS", Arial, Tahoma; font-size:20px; } #main{ position:absolute; margin-top:15px; width:935px; background:#303030; left:50%; ; } #explicacao{ position:absolute; height:400px; width:700px; color:#fff; font-family:"Trebuchet MS", Arial, Tahoma; font-size:16px; left:50%; ; } #menu_esquerda{ float:left; width:245px; background:#f36e21; height:288px; } #menu_direita{ float:right; width:245px; background:#f36e21; height:288px; } #menu_meio{ margin:0 auto; width:245px; background:#f36e21; height:288px; } #menu_esquerda_index{ border-right:1px solid #f35900; float:left; width:311px; background:#f36e21; height:48px; } #menu_direita_index{ float:right; width:312px; background:#f36e21; height:48px; } #menu_meio_index{ border-right:1px solid #f35900; margin:0 auto; width:310px; background:#f36e21; height:48px; } #cont_esq{ background:#f36e21; float:left; height:48px; width:245px; margin-top:48px; } #seta_esq{ background-image:url(images/seta_esq.jpg); height:48px; width:55px; } #voltar{ padding-top:10px; text-align:center; color:#fff; font-family:"Trebuchet MS", Arial, Tahoma; font-size:20px; font-weight: normal; } #voltar a{ color:#fff; text-decoration:none; } #cont_dir{ background:#f36e21; float:right; height:48px; width:245px; margin-top:48px; } #avancar{ padding-top:10px; text-align:center; color:#fff; font-family:"Trebuchet MS", Arial, Tahoma; font-size:20px; font-weight: normal; } #avancar a{ color:#fff; text-decoration:none; } #seta_dir{ margin-left:190px; background-image:url(images/seta_dir.jpg); height:48px; width:55px; } #cont_meio{ background:#f36e21; margin:0 auto; height:48px; width:245px; margin-top:48px; } #total{ padding-top:10px; text-align:center; color:#fff; font-family:"Trebuchet MS", Arial, Tahoma; font-size:20px; font-weight: normal; }

É o seguinte galera... Estou desenvolvendo um site... Peguei um código css na internet para que o background ficasse 100% em qualquer navegador, mas isso não acontece, ele fica na metade da tela. Veja o site: http://testerhecia.ec.cx/ CÓDIGO DO BACKGROUND: background-image: url('../images/background.png'); background-repeat: no-repeat; background-size: 100% 100%; CÓDIGO DO CSS DO SITE: /* reset */ html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,dl,dt,dd,ol,nav ul,nav li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;} article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {display: block;} ol,ul{list-style:none;margin:0;padding:0;} blockquote,q{quotes:none;} blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;} table{border-collapse:collapse;border-spacing:0;} /* start editing from here */ a{text-decoration:none;} .txt-rt{text-align:right;}/* text align right */ .txt-lt{text-align:left;}/* text align left */ .txt-center{text-align:center;}/* text align center */ .float-rt{float:right;}/* float right */ .float-lt{float:left;}/* float left */ .clear{clear:both;}/* clear float */ .pos-relative{position:relative;}/* Position Relative */ .pos-absolute{position:absolute;}/* Position Absolute */ .vertical-base{ vertical-align:baseline;}/* vertical align baseline */ .vertical-top{ vertical-align:top;}/* vertical align top */ .underline{ padding-bottom:5px; border-bottom: 1px solid #eee; margin:0 0 20px 0;}/* Add 5px bottom padding and a underline */ nav.vertical ul li{ display:block;}/* vertical menu */ nav.horizontal ul li{ display: inline-block;}/* horizontal menu */ img{max-width:100%;} /*end reset*/ .wrap { width: 80%; margin: 0px auto; } /* start header */ .header_bg{ background-image: url('../images/header.png'); background-repeat: no-repeat; -moz-background-size: 100% 100%; -webkit-background-size: 100% 100%; background-size: 100% 100%; text-align: center; } .header{ padding: 0% 0%; } .logo{ width:185px; margin-top:1.1%; float: left; margin-left:0px; } .logo h1 a{ display: block; } .h_right{ position:relative; float: right; } .menu{ float: left; margin-right: 50px; margin-top: 3.4%; } .menu li{ float: left; margin-right: 10px; } .menu li.active a,.menu li a:hover{ color: #fdcf1c; } .menu li a{ font-size: 0.96em; color: #ffffff; font-family: 'Roboto', sans-serif; margin:0px 15px; font-weight: 300; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } /*start search*/ .sb-search { position: absolute; top:-12px; right:0px; width: 0%; min-width: 45px; font-family: 'Roboto', sans-serif; height: 42px; float: right; overflow: hidden; -webkit-transition: width 0.3s; -moz-transition: width 0.3s; transition: width 0.3s; -webkit-backface-visibility: hidden; } .sb-search-input { position: absolute; top: 0; left: 0px; border: none; outline: none; background: #313338; width: 100%; height: 46px; font-family: 'Roboto', sans-serif; margin: 0; z-index: 10; padding: 5px 20px; font-size: 13px; color: #ffffff; } .sb-search-input::-webkit-input-placeholder { color: #ffffff; } .sb-search-input:-moz-placeholder { color: #ffffff; } .sb-search-input::-moz-placeholder { color: #efb480; } .sb-search-input:-ms-input-placeholder { color: #ffffff; } .sb-icon-search,.sb-search-submit { width: 45px; height: 45px; display: block; position: absolute; right: 0; top: 0; padding: 0; margin: 0; line-height: 45px; text-align: center; cursor: pointer; } .sb-search-submit { background: #fff; /* IE needs this */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE 8 */ filter: alpha(opacity=0); /* IE 5-7 */ opacity: 0; color: transparent; border: none; outline: none; z-index: -1; -webkit-appearance: none; } .sb-icon-search { color: #fff; background: #313338 url('../images/search.png') no-repeat 13px 13px; z-index: 90; } /* Open state */ .sb-search.sb-search-open,.no-js .sb-search { width: 100%; } .sb-search.sb-search-open .sb-icon-search,.no-js .sb-search .sb-icon-search { background: #313338 url('../images/search.png') no-repeat 13px 13px; color: #fff; z-index: 11; } .sb-search.sb-search-open .sb-search-submit,.no-js .sb-search .sb-search-submit { z-index: 90; } /*-- start-smartphone_nav --*/ .nav { display:none; } .nav-item { float:left; *display:inline; zoom:1; } .nav-item a { display:block; } .nav-item a:hover { background: #18BD9B; color: #FFFFFF; } .nav-mobile { display: none; cursor: pointer; position: absolute; top: 5px; left: 5px; background: url(../images/nav_icon.png) 60% 60% no-repeat #313338; height:32px; width: 32px; } .nav-mobile { display:block; } .nav { margin-top:44px; width:100%; } .nav-list { display:none; } .nav-item { width:100%; float:none; } .nav-item a { font-weight:400; background: #313338; padding: 10px; text-transform:uppercase; color:#FFF; -webkit-transition: color .2s linear,background .2s linear; -moz-transition: color .2s linear,background .2s linear; -o-transition: color .2s linear,background .2s linear; transition: color .2s linear,background .2s linear; font-size: 0.8725em; } .nav-inner { display: none; } .nav-active, .nav-active-inner .nav-inner { display:block; } /***************start-service************/ #services{ background:#282A2E; padding:5% 0; } .service-grids{ background:#282A2E; } .service-grids h2{ text-align:center; margin: 0 0 4%; font-size: 1.8em; color: #ffffff; text-transform: uppercase; font-weight: 400; } .middle-grids { margin: 2em 0; } .section { clear: both; padding: 0px; margin: 0px; } .images_1_of_4{ display: block; float:left; margin-left:3%; text-align: center; } .images_1_of_4:first-child { margin-left: 0; } .images_1_of_4 { width: 21.6%; } .images_1_of_4 img{ max-width: 100%; margin-bottom: 23px; border-radius: 30em; -webkit-border-radius: 30em; -o-border-radius: 30em; -moz-border-radius: 30em; padding: 45px; background: #313338; cursor: pointer; transition: 0.5s all; -webkit-transition: 0.5s all; -moz-transition: 0.5s all; -o-transition: 0.5s all; } .images_1_of_4 img:hover{ background: #30554E; } .images_1_of_4 h3 a{ color:#ffffff; font-size:1.5em; font-weight :400; transition: 0.5s all; -webkit-transition: 0.5s all; -moz-transition: 0.5s all; -o-transition: 0.5s all; } .images_1_of_4 h3 a:hover{ color:#25BEA0; } .images_1_of_4 h3 { padding: 0em 0em 0em 0em; } .images_1_of_4 p { padding: 0em 0em 1.5em 0em; } .images_1_of_4 p { font-size:0.875em; color:#C0BEBE; line-height: 1.8em; } .images_1_of_4 .button a{ padding:7px 10px; font-size:0.9em; background:#49CBCD; color : #fff; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; transition: 0.5s all; -webkit-transition: 0.5s all; -moz-transition: 0.5s all; -o-transition: 0.5s all; } .images_1_of_4 .button a:hover{ background: #296E6F; text-decoration:none; } /***************end-servivice************/ .message { background: url("../images/banner2.jpg") no-repeat; background-size: 100%; padding: 12% 0; text-align: left; } .message h3{ color:#7C7C7C; font-size:4em; font-weight :400; } .message li{ display: inline-block; } .message li a{ color:#ffffff; display:block; font-size:1.5em; font-weight :400; padding: 15px 20px; } /*--- buttons ---*/ body > div.message > div > div { margin-top: 4%; } .span1 { margin: 1% 2% 0 0; float: left; } .span1 i { position:relative; border-left:solid 1px #B0D553; font-size: 1.1em; color: #fff; background:#B0CD3B; padding: 15px 76px; border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; -webkit-border-radius: 5p; -webkit-box-shadow: inset 0px 1px 0px #B0CD3B, 0px 5px 0px 0px #95B643, 2px 10px 5px #757575; -moz-box-shadow: inset 0px 1px 0px #B0CD3B, 0px 5px 0px 0px #95B643, 2px 10px 5px #757575; -o-box-shadow: inset 0px 1px 0px #B0CD3B, 0px 5px 0px 0px #95B643, 2px 10px 5px #757575; box-shadow: inset 0px 1px 0px #B0CD3B, 0px 5px 0px 0px #95B643, 2px 10px 5px #757575; } .span1 i:active { top:3px; background:#B0CD3B; -webkit-box-shadow: inset 0px 1px 0px #B0CD3B, 0px 2px 0px 0px #95B643, 2px 10px 5px #757575; -moz-box-shadow: inset 0px 1px 0px #B0CD3B, 0px 2px 0px 0px #95B643, 2px 10px 5px #757575; -o-box-shadow: inset 0px 1px 0px #B0CD3B, 0px 2px 0px 0px #95B643, 2px 10px 5px #757575; box-shadow: inset 0px 1px 0px #B0CD3B, 0px 2px 0px 0px #95B643, 2px 10px 5px #757575; } .span2 { float: left; margin-top: 1%; } .span2 i { position:relative; border-left:solid 1px #25BEA0; font-size: 1.1em; color: #fff; background:#1BBC9D; padding: 15px 76px; border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; -webkit-border-radius: 5px; -webkit-box-shadow: inset 0px 1px 0px #1BBC9D, 0px 5px 0px 0px #18A291, 2px 10px 5px #6D6D70; -moz-box-shadow: inset 0px 1px 0px #1BBC9D, 0px 5px 0px 0px #18A291, 2px 10px 5px #6D6D70; -o-box-shadow: inset 0px 1px 0px #1BBC9D, 0px 5px 0px 0px #18A291, 2px 10px 5px #6D6D70; box-shadow: inset 0px 1px 0px #1BBC9D, 0px 5px 0px 0px #18A291, 2px 10px 5px #6D6D70; } .span2 i:active { top:3px; -webkit-box-shadow: inset 0px 1px 0px #1BBC9D, 0px 2px 0px 0px #18A291, 2px 10px 5px #6D6D70; -moz-box-shadow: inset 0px 1px 0px #1BBC9D, 0px 2px 0px 0px #18A291, 2px 10px 5px #6D6D70; -o-box-shadow: inset 0px 1px 0px #1BBC9D, 0px 2px 0px 0px #18A291, 2px 10px 5px #6D6D70; box-shadow: inset 0px 1px 0px #1BBC9D, 0px 2px 0px 0px #18A291, 2px 10px 5px #6D6D70; } /*--- portfolio ---*/ /***************start portfolio**********/ .container { position: relative; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } #filters { margin:3% 1%; padding:0; list-style:none; } #filters li { float:left; } #filters li span { display: block; padding: 10px 30px; text-decoration: none; color: #B9B9B9; cursor: pointer; font-size: 0.85em; text-transform: capitalize; -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; } #filters li span:hover{ background:#EA5A4B; color:#fff; } #filters li span.active { background:#EA5A4B; color:#fff; } #portfoliolist .portfolio { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; width:23%; margin:1%; margin-bottom: 4%; display:none; float:left; overflow:hidden; } .portfolio-wrapper { overflow:hidden; position: relative !important; cursor:pointer; } .portfolio img { width:100%; position: relative; transition: all 300ms!important; -webkit-transition: all 300ms!important; -moz-transition: all 300ms!important; } .portofolio-item h1{ padding: 20px 25px; color: #E8603C; font-size: 1.5em; margin: 1% 0%; } .portfolio-wrapper a{ display:block; } .portfolio-wrapper a span { position: absolute; width: 100%; height: 72%; top: 0px; left: 0px; text-align: center; line-height: 7em; color: #FFF; font-family: 'fontleroybrownregular'; text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.6); font-size: 2em; opacity: 0; filter: alpha(opacity=0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=0)"; background: rgba(0, 0, 0, 0.61); -moz-transition: opacity 0.3s linear; -o-transition: opacity 0.3s linear; -ms-transition: opacity 0.3s linear; transition: opacity 0.3s linear; -webkit-appearance: none; text-transform: capitalize; -webkit-transition: 0.9s; -moz-transition: 0.9s; -o-transition: 0.9s; transition: 0.9s; } .portfolio-wrapper a:hover span{ opacity: 1; } .portfolio-wrapper a span img{ width:40px; height:40px; } .gallerylist-wrapper a{ display:block; } .gallerylist-wrapper a span { position: absolute; width: 100%; height: 71%; top: 0px; left: 0px; text-align: center; line-height: 6.5em; color: #FFF; font-family: 'fontleroybrownregular'; text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.6); font-size: 2em; opacity: 0; filter: alpha(opacity=0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=0)"; background: rgba(0, 0, 0, 0.61); -moz-transition: opacity 0.3s linear; -o-transition: opacity 0.3s linear; -ms-transition: opacity 0.3s linear; transition: opacity 0.3s linear; -webkit-appearance: none; text-transform: capitalize; -webkit-transition: 0.9s; -moz-transition: 0.9s; -o-transition: 0.9s; transition: 0.9s; } .gallerylist-wrapper a:hover span{ opacity: 1; } .gallerylist-wrapper a span img{ width:40px; height:40px; } /* #Mobile (Portrait) - Note: Design for a width of 320px */ @media only screen and (max-width: 767px) { #portfoliolist .portfolio { width:48%; margin:1%; } #ads { display:none; } } /* #Mobile (Landscape) - Note: Design for a width of 480px */ @media only screen and (min-width: 480px) and (max-width: 767px) { #ads { display:none; } } /* #Clearing */ .white-btn { border-color:#fff; color:#fff; border: 2px solid #FFF; text-decoration: none; } .white-btn:hover { background-color:#fff; color:#2cbdb5; } /* ========================================================= **************************Portfolio************************* ============================================================ */ .typo1 { position:relative; width:100%; height:100%; padding: 5% 0; } .portfolio-bg { position: absolute; height: 100%; width: 100%; z-index:0; } #portfolio .section-title .small-caption, #portfolio .section-title .big-caption { color:#fff; font-size:20px; margin:0 0 10px; text-align:center; } /* Start: Recommended Isotope styles */ /**** Isotope Filtering ****/ .isotope-item { z-index: 2; list-style:none; } .isotope-hidden.isotope-item { pointer-events: none; z-index: 1; } /**** Isotope CSS3 transitions ****/ .isotope, .isotope .isotope-item { -webkit-transition-duration: 0.8s; -moz-transition-duration: 0.8s; -ms-transition-duration: 0.8s; -o-transition-duration: 0.8s; transition-duration: 0.8s; } .isotope { -webkit-transition-property: height, width; -moz-transition-property: height, width; -ms-transition-property: height, width; -o-transition-property: height, width; transition-property: height, width; } .isotope .isotope-item { -webkit-transition-property: -webkit-transform, opacity; -moz-transition-property: -moz-transform, opacity; -ms-transition-property: -ms-transform, opacity; -o-transition-property: -o-transform, opacity; transition-property: transform, opacity; } /**** disabling Isotope CSS3 transitions ****/ .isotope.no-transition, .isotope.no-transition .isotope-item, .isotope .isotope-item.no-transition { -webkit-transition-duration: 0s; -moz-transition-duration: 0s; -ms-transition-duration: 0s; -o-transition-duration: 0s; transition-duration: 0s; } /* End: Recommended Isotope styles */ /* disable CSS transitions for containers with infinite scrolling*/ .isotope.infinite-scrolling { -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; } #container { margin:0 auto 40px; } .element { width: 280px; height: 252px; float: left; overflow: hidden; position: relative; margin:7.5px; } /**** Example Options ****/ #options { text-align:center; margin:20px 0; } #options ul { margin: 0; list-style: none; display:inline-block; } #options li { float: inline-block; } #options li a { display: block; color: #ffffff; font-size: 1em; font-weight: 300; cursor: pointer; text-align: center; padding: 10px 15px; margin-right: 5px; background: #313338; transition: 0.5s all; -webkit-transition: 0.5s all; -moz-transition: 0.5s all; -o-transition: 0.5s all; } #nivo-lightbox-demo a { padding: 5px 10px; border: 2px solid #ffffff; border-radius: 2em; color: #fff; } #options li a:hover { background: #1BBC9D; } #options li.active { background: #1BBC9D; } .grid figure { margin: 0; position: relative; text-align:center; } .grid figure img { width: 100%; display: block; position: relative; } .grid figcaption { position: absolute; top: 0; left: 0; background: #37bdb5; color: #fff; } .grid figcaption h3 { margin: 20px 0 5px; padding: 0; color: #fff; font-size:16px; line-height:18px; } .grid figcaption h3 a { color:#fff; } .grid figcaption .meta-box { color:#fff; } .grid figcaption span a { font-size:14px; color:#fff; } .grid figcaption span a:hover { color:#fff; } .grid figcaption footer { position:absolute; bottom: 46px; text-align:center; width:100%; } .grid figcaption a.link-gallery, .grid figcaption a.link-p-detail { padding: 6px 10px; border-radius: 25px; -moz-border-radius: 25px; -webkit-border-radius: 25px; min-width: 60px; border: 2px solid #FFF; color: #FFF; margin-right: 13px; } .cs-style-5 figure img { z-index: 10; -webkit-transition: -webkit-transform 0.4s; -moz-transition: -moz-transform 0.4s; transition: transform 0.4s; } .no-touch .cs-style-5 figure:hover img, .cs-style-5 figure.cs-hover img { -webkit-transform: scale(0.4); -moz-transform: scale(0.4); -ms-transform: scale(0.4); transform: scale(0.4); } .cs-style-5 figcaption { height: 100%; width: 100%; opacity: 0; filter: alpha(opacity=0); -webkit-transform: scale(0.7); -moz-transform: scale(0.7); -ms-transform: scale(0.7); transform: scale(0.7); -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: -webkit-transform 0.4s, opacity 0.4s; -moz-transition: -moz-transform 0.4s, opacity 0.4s; transition: transform 0.4s, opacity 0.4s; } .no-touch .cs-style-5 figure:hover figcaption, .cs-style-5 figure.cs-hover figcaption { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); transform: scale(1); opacity: 1; filter: alpha(opacity=100); } #portfolio .load-more { font-size:20px; padding:15px 25px 18px; border-radius:30px; -moz-border-radius:30px; -webkit-border-radius:30px; } .heading { color: #ffffff; font-size: 2.5em; font-weight: 400; text-align: center; } #cbp-so-scroller { background: #282A2E; } .span_1_of_4{ display: block; float:left; margin-left:2%; text-align: center; } .span_1_of_4:first-child { margin-left: 0; } .span_1_of_4 { width: 23.5%; } .span_1_of_4 img{ width:100%; cursor: pointer; } /*--- message1 ---*/ .message1 { background: url("../images/banner3.jpg") no-repeat; background-size: 100%; padding: 12% 0; text-align: left; } .message1 h3{ color:#ffffff; font-size:4em; font-weight :400; } .message1 p{ color:#ffffff; font-size:2.5em; font-weight :400; } /*--- message2 ---*/ .message2 { background: url("../images/pic.jpg") no-repeat; background-size: 100%; padding: 11% 0; text-align: left; } .message2 h3{ color:#ffffff; font-size:4em; font-weight :400; } .message2 p{ color:#ffffff; font-size:2.5em; font-weight :400; } /*--- message3 ---*/ .message3 { background: url("../images/banner4.jpg") no-repeat; background-size: 100%; padding: 11% 0; text-align: left; } .message3 h3{ color:#ffffff; font-size:4em; font-weight :400; } .message3 p{ color:#ffffff; font-size:2.5em; font-weight :400; } /*--- pricing ---*/ #pricing > div > h3 { color: #fff; font-size: 2.5em; text-align: center; margin-bottom: 3%; } .span3 { margin: 1% 2% 0 0; float: left; } .span3 i { position:relative; border-left:solid 1px #B0D553; font-size: 1.1em; color: #fff; background:#B0CD3B; padding: 10px 25px; border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; -webkit-border-radius: 5p; -webkit-box-shadow: inset 0px 1px 0px #B0CD3B, 0px 5px 0px 0px #95B643, 2px 10px 5px #3A3838; -moz-box-shadow: inset 0px 1px 0px #B0CD3B, 0px 5px 0px 0px #95B643, 2px 10px 5px #3A3838; -o-box-shadow: inset 0px 1px 0px #B0CD3B, 0px 5px 0px 0px #95B643, 2px 10px 5px #3A3838; box-shadow: inset 0px 1px 0px #B0CD3B, 0px 5px 0px 0px #95B643, 2px 10px 5px #3A3838; } .span3 i:active { top:3px; background:#B0CD3B; -webkit-box-shadow: inset 0px 1px 0px #B0CD3B, 0px 2px 0px 0px #95B643, 2px 10px 5px #3A3838; -moz-box-shadow: inset 0px 1px 0px #B0CD3B, 0px 2px 0px 0px #95B643, 2px 10px 5px #3A3838; -o-box-shadow: inset 0px 1px 0px #B0CD3B, 0px 2px 0px 0px #95B643, 2px 10px 5px #3A3838; box-shadow: inset 0px 1px 0px #B0CD3B, 0px 2px 0px 0px #95B643, 2px 10px 5px #3A3838; } .span3 j { position: relative; border-left: solid 1px #FDFDFD; font-size: 1.1em; color: #5A5A5A; background: #E4E4E4; padding: 10px 25px; border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; -webkit-border-radius: 5p; -webkit-box-shadow: inset 0px 1px 0px #D6D6D6, 0px 5px 0px 0px #C5C5C5, 2px 10px 5px #929292; -moz-box-shadow: inset 0px 1px 0px #D6D6D6, 0px 5px 0px 0px #C5C5C5, 2px 10px 5px #929292; -o-box-shadow: inset 0px 1px 0px #D6D6D6, 0px 5px 0px 0px #C5C5C5, 2px 10px 5px #929292; box-shadow: inset 0px 1px 0px #D6D6D6, 0px 5px 0px 0px #C5C5C5, 2px 10px 5px #929292; } .span3 j:active { top:3px; background:#E4E4E4; -webkit-box-shadow: inset 0px 1px 0px #D6D6D6, 0px 2px 0px 0px #C5C5C5, 2px 10px 5px #929292; -moz-box-shadow: inset 0px 1px 0px #D6D6D6, 0px 2px 0px 0px #C5C5C5, 2px 10px 5px #929292; -o-box-shadow: inset 0px 1px 0px #D6D6D6, 0px 2px 0px 0px #C5C5C5, 2px 10px 5px #929292; box-shadow: inset 0px 1px 0px #D6D6D6, 0px 2px 0px 0px #C5C5C5, 2px 10px 5px #929292; } .span3 k { position: relative; border-left: solid 1px #74B0A4; font-size: 1.1em; color: #fff; background: #74B0A4; padding: 10px 25px; border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; -webkit-border-radius: 5p; -webkit-box-shadow: inset 0px 1px 0px #A3C3B3, 0px 5px 0px 0px #A0C3BC, 2px 10px 5px #929292; -moz-box-shadow: inset 0px 1px 0px #A3C3B3, 0px 5px 0px 0px #A0C3BC, 2px 10px 5px #929292; -o-box-shadow: inset 0px 1px 0px #A3C3B3, 0px 5px 0px 0px #A0C3BC, 2px 10px 5px #929292; box-shadow: inset 0px 1px 0px #A3C3B3, 0px 5px 0px 0px #A0C3BC, 2px 10px 5px #929292; } .span3 k:active { top:3px; background:#74B0A4; -webkit-box-shadow: inset 0px 1px 0px #A3C3B3, 0px 2px 0px 0px #A0C3BC, 2px 10px 5px #929292; -moz-box-shadow: inset 0px 1px 0px #A3C3B3, 0px 2px 0px 0px #A0C3BC, 2px 10px 5px #929292; -o-box-shadow: inset 0px 1px 0px #A3C3B3, 0px 2px 0px 0px #A0C3BC, 2px 10px 5px #929292; box-shadow: inset 0px 1px 0px #A3C3B3, 0px 2px 0px 0px #A0C3BC, 2px 10px 5px #929292; } .span3 l { position: relative; border-left: solid 1px #B6C380; font-size: 1.1em; color: #fff; background: #B6C380; padding: 10px 25px; border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; -webkit-border-radius: 5p; -webkit-box-shadow: inset 0px 1px 0px #C0D178, 0px 5px 0px 0px #A2AF69, 2px 10px 5px #929292; -moz-box-shadow: inset 0px 1px 0px #C0D178, 0px 5px 0px 0px #A2AF69, 2px 10px 5px #929292; -o-box-shadow: inset 0px 1px 0px #C0D178, 0px 5px 0px 0px #A2AF69, 2px 10px 5px #929292; box-shadow: inset 0px 1px 0px #C0D178, 0px 5px 0px 0px #A2AF69, 2px 10px 5px #929292; } .span3 l:active { top:3px; background:#B6C380; -webkit-box-shadow: inset 0px 1px 0px #C0D178, 0px 2px 0px 0px #A2AF69, 2px 10px 5px #929292; -moz-box-shadow: inset 0px 1px 0px #C0D178, 0px 2px 0px 0px #A2AF69, 2px 10px 5px #929292; -o-box-shadow: inset 0px 1px 0px #C0D178, 0px 2px 0px 0px #A2AF69, 2px 10px 5px #929292; box-shadow: inset 0px 1px 0px #C0D178, 0px 2px 0px 0px #A2AF69, 2px 10px 5px #929292; } .span3 m { position: relative; border-left: solid 1px #424242; font-size: 1.1em; color: #fff; background: #424242; padding: 10px 25px; border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; -webkit-border-radius: 5p; -webkit-box-shadow: inset 0px 1px 0px #8A8181, 0px 5px 0px 0px #5D5555, 2px 10px 5px #929292; -moz-box-shadow: inset 0px 1px 0px #8A8181, 0px 5px 0px 0px #5D5555, 2px 10px 5px #929292; -o-box-shadow: inset 0px 1px 0px #8A8181, 0px 5px 0px 0px #5D5555, 2px 10px 5px #929292; box-shadow: inset 0px 1px 0px #8A8181, 0px 5px 0px 0px #5D5555, 2px 10px 5px #929292; } .span3 m:active { top:3px; background:#424242; -webkit-box-shadow: inset 0px 1px 0px #8A8181, 0px 2px 0px 0px #5D5555, 2px 10px 5px #929292; -moz-box-shadow: inset 0px 1px 0px #8A8181, 0px 2px 0px 0px #5D5555, 2px 10px 5px #929292; -o-box-shadow: inset 0px 1px 0px #8A8181, 0px 2px 0px 0px #5D5555, 2px 10px 5px #929292; box-shadow: inset 0px 1px 0px #8A8181, 0px 2px 0px 0px #5D5555, 2px 10px 5px #929292; } .client{ margin-top: 6%; width: 100%; text-align:center; } .client h3 i { color: #ffffff; font-size: 1.4em; width: 100%; font-weight: 400; text-align: center; margin: 0% 14% 0 17% } .client h3 img { vertical-align: middle; } .img{ float: left; margin: 4% 11% 0 13%; } .img1{ float: right; margin: 4% 14% 0 0; } .data{ float: left; width: 40%; margin-top: 4%; } .data p{ font-size: 0.92355em; color:#C0BEBE; line-height: 1.9em; margin-bottom:3%; } .data p a{ color:#95AC38; transition: 0.5s all; -webkit-transition: 0.5s all; -moz-transition: 0.5s all; -o-transition: 0.5s all; } .data p a:hover{ color:#999; } .background{background-image: url('../images/about.'); background-repeat: no-repeat; -moz-background-size: 100% 100%; -webkit-background-size: 100% 100%; background-size: 100% 100%; text-align: center; } /*--- about ---*/ .body { } .about{ } .about h4{ } /* GRID OF Four ============================================================================= */ .group:before, .group:after { content:""; display:table; } .group:after { clear:both; } .group { zoom:1; } .label_1_of_4{ display: inline-block; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .label_1_of_4:first-child { } .about_1_of_4 { margin: 0 auto; margin-top: 5%; padding: 1%; } .about_1_of_4 img{ cursor: pointer; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .about_1_of_4 img:hover{ -webkit-transform: scale(1.1); transform: scale(1.1); } /************start-clock*********/ *, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } html, .body { background-image: url('../images/background.png'); background-repeat: no-repeat; background-size: 100%; text-align: center; color: #444; font-size: 16px; font-family: 'Roboto', sans-serif; } .pie-wrapper { display: inline-block; height: 200px; margin: 5% 1% 1%; position: relative; width: 200px; } .pie-wrapper .pie { clip: rect(0, 200px, 200px, 100px); height: 200px; position: absolute; width: 200px; } .pie-wrapper .pie .half-circle { border: 20px solid #3498db; border-radius: 50%; clip: rect(0, 100px, 200px, 0); height: 200px; position: absolute; width: 200px; } .pie-wrapper .label { background: #34495e; border-radius: 50%; color: #ecf0f1; cursor: default; display: block; font-size: 3em; height: 160px; left: 10%; line-height: 3em; position: absolute; text-align: center; top: 10%; width: 160px; } .pie-wrapper .label .smaller { color: #bdc3c7; font-size: .45em; padding-bottom: 20px; vertical-align: super; } .pie-wrapper.style-2 .shadow { border: 20px solid #bdc3c7; border-radius: 50%; height: 100%; width: 100%; } .pie-wrapper.style-2 .label { background: none; color: #7f8c8d; } .pie-wrapper.style-2 .label .smaller { color: #bdc3c7; } .pie-wrapper.progress-30 .pie .right-side { display: none; } .pie-wrapper.progress-30 .pie .half-circle { border-color: #3498db; } .pie-wrapper.progress-30 .pie .left-side { -webkit-transform: rotate(108deg); -moz-transform: rotate(108deg); -ms-transform: rotate(108deg); -o-transform: rotate(108deg); transform: rotate(108deg); } .pie-wrapper.progress-60 .pie { clip: rect(auto, auto, auto, auto); } .pie-wrapper.progress-60 .pie .right-side { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } .pie-wrapper.progress-60 .pie .half-circle { border-color: #9b59b6; } .pie-wrapper.progress-60 .pie .left-side { -webkit-transform: rotate(216deg); -moz-transform: rotate(216deg); -ms-transform: rotate(216deg); -o-transform: rotate(216deg); transform: rotate(216deg); } .pie-wrapper.progress-90 .pie { clip: rect(auto, auto, auto, auto); } .pie-wrapper.progress-90 .pie .right-side { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } .pie-wrapper.progress-90 .pie .half-circle { border-color: #e67e22; } .pie-wrapper.progress-90 .pie .left-side { -webkit-transform: rotate(324deg); -moz-transform: rotate(324deg); -ms-transform: rotate(324deg); -o-transform: rotate(324deg); transform: rotate(324deg); } .pie-wrapper.progress-45 .pie .right-side { display: none; } .pie-wrapper.progress-45 .pie .half-circle { border-color: #1abc9c; } .pie-wrapper.progress-45 .pie .left-side { -webkit-transform: rotate(162deg); -moz-transform: rotate(162deg); -ms-transform: rotate(162deg); -o-transform: rotate(162deg); transform: rotate(162deg); } .pie-wrapper.progress-75 .pie { clip: rect(auto, auto, auto, auto); } .pie-wrapper.progress-75 .pie .right-side { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } .pie-wrapper.progress-75 .pie .half-circle { border-color: #8e44ad; } .pie-wrapper.progress-75 .pie .left-side { -webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); -ms-transform: rotate(270deg); -o-transform: rotate(270deg); transform: rotate(270deg); } .pie-wrapper.progress-95 .pie { clip: rect(auto, auto, auto, auto); } .pie-wrapper.progress-95 .pie .right-side { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } .pie-wrapper.progress-95 .pie .half-circle { border-color: #e74c3c; } .pie-wrapper.progress-95 .pie .left-side { -webkit-transform: rotate(342deg); -moz-transform: rotate(342deg); -ms-transform: rotate(342deg); -o-transform: rotate(342deg); transform: rotate(342deg); } #about > div > div.client > div:nth-child(3) > h3 { color: #fff; padding-top: 11%; } #about > div > div.client > div:nth-child(4) > h3 { color: #fff; padding-top: 11%; } #about > div > div.client > div:nth-child(5) > h3 { color: #fff; padding-top: 11%; } #about > div > div.client > div:nth-child(6) > h3 { color: #fff; padding-top: 11%; } #about > div > div.client > div:nth-child(7) > h3 { color: #fff; padding-top: 11%; } /************start-contact*********/ .contact{ background:#282A2E; padding-bottom: 4%; } .form{ float: left; width: 71%; margin: 2% 4% 0 0; display: block; } .form h3{ color: #C5C5C5; font-size: 1.4em; border-bottom: 5px solid #393A3B; margin-bottom: 1%; padding-bottom: 2%; } .para-contact { float:left; display: block; margin: 2% 0; width:25%; } .para-contact h4{ color:#C5C5C5; font-size:1.4em; border-bottom: 5px solid #393A3B; margin-bottom: 6%; padding-bottom: 6%; } .para-contact p{ font-size:0.990em; color:#999999; line-height:2em; margin-top:0.5em; width: 89%; } .contact-form { padding: 2em 0 1em; } .contact h2{ color:#F2F2F2; font-size:2.5em; padding: 2em 0em 0.7em 0em; text-align: center; } .get-intouch-left-address p,.get-intouch-left-address p a{ color: #999999; font-size: 0.95em; line-height:2.3em; transition:0.5s all; -webkit-transition:0.5s all; -moz-transition:0.5s all; -o-transition:0.5s all; } .image img { border-radius: 2px; } .get-intouch-left-address p a:hover{ color:#fff; } .contact input[type=text],.contact textarea{ padding: 7px; width: 48%; margin: 2% 2% 0 0; background: #222327; outline: none; color: #959595; font-size:0.92355em; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; -o-border-radius: 3px; -webkit-appearance: none; font-family: 'Roboto', sans-serif; border:1px solid #222327; -webkit-appearance: none; } .contact input[type=text]:nth-child(2) { margin-right: 0em; } .contact form textarea{ padding: 7px; display: block; width: 100%; background: #222327; border: none; outline: none; color: #999999; font-size:1em; -webkit-appearance: none; margin-top: 1em; } .contact form textarea{ resize:none; height:180px; } #contact > div > div > div.con > form > div.con-button a:hover{ text-decoration:none; background:#45BDBE; } #contact > div > div.contact-form > div > div.social-icons > p{ font-size: 0.980em; color: #6B598C; font-family: 'Roboto', sans-serif; line-height:2px; margin-top: 3em; } .span4 { float: left; margin-top: 2%; } .span4 i input[type=submit]{ font-family: 'Roboto', sans-serif; position: relative; border: solid 1px #25BEA0; font-size: 1.1em; outline: none; color: #fff; cursor:pointer; background: #1BBC9D; padding: 15px 25px; border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; -webkit-border-radius: 5px; -webkit-box-shadow: inset 0px 1px 0px #1BBC9D, 0px 5px 0px 0px #18A291, 2px 10px 5px #252525; -moz-box-shadow: inset 0px 1px 0px #1BBC9D, 0px 5px 0px 0px #18A291, 2px 10px 5px #252525; -o-box-shadow: inset 0px 1px 0px #1BBC9D, 0px 5px 0px 0px #18A291, 2px 10px 5px #252525; box-shadow: inset 0px 1px 0px #1BBC9D, 0px 5px 0px 0px #18A291, 2px 10px 5px #252525; } .span4 i input[type=submit]:active { top:3px; -webkit-box-shadow: inset 0px 1px 0px #1BBC9D, 0px 5px 0px 0px #18A291, 2px 10px 5px #252525; -moz-box-shadow: inset 0px 1px 0px #1BBC9D, 0px 5px 0px 0px #18A291, 2px 10px 5px #252525; -o-box-shadow: inset 0px 1px 0px #1BBC9D, 0px 5px 0px 0px #18A291, 2px 10px 5px #252525; box-shadow: inset 0px 1px 0px #1BBC9D, 0px 5px 0px 0px #18A291, 2px 10px 5px #252525; } #toTop { display: none; text-decoration: none; position: fixed; bottom: 10px; right: 10px; overflow: hidden; width: 44px; height: 44px; border: none; text-indent: 100%; background: url(../images/top_move.png) no-repeat right top; } /***********end-contact*************/ /*--- social ---*/ .social { background: url("../images/banner5.jpg") no-repeat; background-size: 100%; padding: 10% 0; text-align: left; } .social h3{ color:#ffffff; font-size:4em; font-weight :400; } .social p{ color:#ffffff; font-size:2.5em; font-weight :400; } /*---startr-social-icons-set----?*/ .social-icons-set{ float: left; width: 34%; margin: 1.5em 0em 0 0; } .social-icons-set ul li{ display:inline-block; padding: 3px; } .social-icons-set ul li:nth-child(3),.social-icons-set ul li:nth-child(6){ margin-right:0px; } .social-icons-set ul li a{ position: absolute; top:0px; right:0px; width: 0%; min-width: 0px; font-family: 'Roboto', sans-serif; height: 42px; float: right; overflow: hidden; height:40px; width:40px; display:block; background:url(../images/social-icons.png) no-repeat; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .social-icons-set ul li a.facebook{ margin-right:0px; background: url(../images/image-sprit.png) no-repeat -246px 9px #727272; border-radius: 3em; border: 5px solid #transparent; margin-top:2.0%; display: inline-block; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-animation-name: buzz-out; animation-name: buzz-out; -webkit-animation-duration: 0.75s; animation-duration: 0.75s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } .social-icons-set ul li a.facebook:hover{ background: url(../images/image-sprit.png) no-repeat -246px 9px #3c599b; display: inline-block; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-animation-name: buzz-out; animation-name: buzz-out; -webkit-animation-duration: 0.75s; animation-duration: 0.75s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } .social-icons-set ul li a:hover { display: inline-block; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-animation-name: buzz-out; animation-name: buzz-out; -webkit-animation-duration: 0.75s; animation-duration: 0.75s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } .social-icons-set ul li a.twitter{ background: url(../images/image-sprit.png) no-repeat 10px 9px #333; border-radius: 3em; border: 5px solid #333; } .social-icons-set ul li a.twitter:hover{ background: url(../images/image-sprit.png) no-repeat 10px 9px #fdcf1c; } .social-icons-set ul li a.vimeo{ background: url(../images/image-sprit.png) no-repeat -33px 8px #333; border-radius: 3em; border: 5px solid #333; } .social-icons-set ul li a.vimeo:hover{ background: url(../images/image-sprit.png) no-repeat -33px 8px #fdcf1c; } .social-icons-set ul li a.rss{ background: url(../images/image-sprit.png) no-repeat -77px 10px #333; border-radius: 3em; border: 5px solid #333; margin-left: 4px; } .social-icons-set ul li a.rss:hover{ background: url(../images/image-sprit.png) no-repeat -77px 10px #fdcf1c; } .social-icons-set ul li a.gplus{ background: url(../images/image-sprit.png) no-repeat -118px 8px #333; border-radius: 3em; border: 5px solid #333; } .social-icons-set ul li a.gplus:hover{ background: url(../images/image-sprit.png) no-repeat -118px 8px #fdcf1c; } .social-icons-set ul li a.pin{ background: url(../images/image-sprit.png) no-repeat -161px 8px #333; border-radius: 3em; border: 5px solid #333; } .social-icons-set ul li a.pin:hover{ background: url(../images/image-sprit.png) no-repeat -161px 8px #fdcf1c; } /*---start-tooltips----*/ /* GRID OF THREE ============================================================================= */ .footer-top{ background: #282A2E; padding:5% 0; } .group:before, .group:after { content:""; display:table; } .group:after { clear:both; } .group { zoom:1; } .col_1_of_3{ display: block; float:left; margin: 1% 0 1% 1.6%; } .col_1_of_3:first-child { margin-left: 0; } .span_1_of_3 { width: 32%; padding:1.5%; } .span_1_of_3 h5{ color:#ffffff; font-size:1.5em; border-bottom: 1px solid #525252; padding-bottom: 3%; margin-bottom: 6%; } .span_1_of_3 h6 span{ color: #999999; font-size: 1em; padding: 0 4% 2%; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .span_1_of_3 h6 span:hover{ color: #ffffff; } .span_1_of_3 h6.a{ color: #999999; font-size: 1em; padding: 0 0% 2%; } .span_1_of_3 h6 img{ vertical-align: middle; cursor: pointer; } .span_1_of_3 p { font-size:0.8755em; padding: 6% 0; color: #999999; line-height: 1.9em; } .span_1_of_3 li { display: inline-block; width: 23%; margin:1% 1% 1% 0; cursor: pointer; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .span_1_of_3 li:hover { opacity: 0.6; } .rodape { position:absolute; bottom:0; width:100%; height:55px; /* Mesma Altura do Rodapé */ background-image: url('../images/header.png'); background-repeat: no-repeat; -moz-background-size: 100% 100%; -webkit-background-size: 100% 100%; background-size: 100% 100%; } } .image{ float: left; } .end { float:left; margin-top: 1%; margin-right: 2%; } .end p { font-size:0.92355em; color:#FFFFFF; } .escrever { float:center; margin-top: 5%; margin-right: 0%; color:#FFFFFF; font-size:1.5em; } .copy-right { float:center; margin-top: 0%; margin-right: 2%; } .copy-right p { font-family: 'Roboto', sans-serif; font-size:0.8em; color:#FFFFFF; } .copy-right p a { color:#fdcf1c; -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out; } .copy-right p a:hover { color: #ffffff; } /*---start-media-queries---*/ @media only screen and (max-width: 1366px){ .wrap{ width:95%; } #fwslider .title { font-size: 4em; } .sb-search { top: -10px; right: 8px; } .sb-search-input { height: 45px; } .message { padding: 11% 0; } .message2 { padding: 10% 0; } .social { padding: 8.9% 0; } } @media only screen and (max-width: 1280px){ .wrap{ width: 95%; } .message h3 { font-size: 3.5em; } .message { padding: 11% 0; } .span_1_of_4 img { width: 92%; } .span_1_of_4 { width: 23%; } .client h3 i { margin: 0% 10% 0 17%; } #portfoliolist .portfolio { width: 22.9%; } } @media only screen and (max-width: 1024px){ .wrap{ width: 95%; } .sb-search { top: -9px; } .sb-search-input { height: 45px; width: 60%; } .service-grids h2,.portfolio h3,#pricing > div > h3,.heading,.contact h2{ font-size: 1.3em; } .images_1_of_4 h3 a { font-size: 1.2em; } .images_1_of_4 img { padding: 28px; } .message h3,.message1 h3,.message2 h3,.message3 h3 { font-size: 2.5em; } .span1 i { padding: 10px 30px; } .span2 i { padding: 10px 30px; } .portfolio li a { font-size: 0.8755em; } .span_1_of_4 img { width:100%; margin-left: 0%; } .message1 p,.message2 p,.message3 p { font-size: 1.5em; } .client h3 i { margin: 0% 6% 0 6%; font-size: 1em; } .about h4 { font-size: 1.3em; } .about_1_of_4 h3 { font-size: 1em; } .pie-wrapper { height: 140px; width: 140px; } .pie-wrapper .label { font-size: 2em; left: 6%; top: 14%; width: 124px; } .pie-wrapper .pie .half-circle { height: 140px; width: 140px; } .form h3,.para-contact h4 { font-size: 1.2em; } .span4 i input[type=submit] { font-size: 1em; padding: 8px 18px; } .social h3 { font-size: 2.5em; } .social p { font-size: 1.5em; } .social-icons-set { width: 38%; } .social { padding: 9% 0; } #portfoliolist .portfolio { width: 22.3%; } .span3 j { font-size: 0.82355em; padding: 6px 12px; } .span3 k { font-size: 0.82355em; padding: 6px 12px; } .span3 l { font-size: 0.82355em; padding: 6px 12px; } .span3 m { font-size: 0.82355em; padding: 6px 12px; } } @media only screen and (max-width: 768px){ .wrap{ width: 95%; } .h_right { width: 100%; background: #313338; } .logo { padding-bottom: 0%; } .sb-search { top: 0px; } .span_1_of_4 img { width: 100%; margin-left: 4%; } .span_1_of_4 { width: 23%; } #portfoliolist .portfolio { width: 21.5%; } .grid-block { width: 163px; } .client h3 img { width: 34%; } .client h3 i { margin: 0% 4% 0 4%; } .img { margin: 4% 6% 0 13%; } .message2 { padding: 9% 0; } .form { width: 61%; } .para-contact { width: 35%; } .span_1_of_3 h5 { font-size: 1.1em; } .social-icons-set { width: 66%; } .social { padding: 6% 0; } .pie-wrapper { height: 100px; width: 100px; } .pie-wrapper .label { font-size: 2em; left: -10%; top: 0%; width: 124px; } .pie-wrapper .pie .half-circle { height: 100px; width: 100px; } .message { padding: 10% 0; } .sb-search-input { height: 45px; width: 100%; } .menu { display: none; } .nav { display: block; } } @media only screen and (max-width: 640px){ .wrap{ width:95%; } .span1 i { padding: 6px 10px; } .span2 i { padding: 6px 10px; } .message h3, .message1 h3, .message2 h3, .message3 h3 { font-size: 1.5em; } .grid-block { width: 284px; } .span_1_of_4 { width: 50%; } .span_1_of_4 img { margin-bottom: 4%; } .img { margin: 100% 100% 0 100%; } .message1 p, .message2 p, .message3 p { font-size: 1em; } .about_1_of_4 { margin: 0 auto; padding: 1%; } .grid_1_of_4{ margin: 0% 0 0% 0%; } .about_1_of_4 { margin: 0 auto; } #portfoliolist .portfolio { width: 20.7%; } #filters li span { font-size: 0.82355em; padding: 7px 10px; } } @media only screen and (max-width: 480px){ .wrap{ width:95%; } .images_1_of_4 { width: 45.6%; } #options li a { font-size: 0.82355em; padding: 6px 5px; } .service-grids h2, .content-middle h2 , #pricing > div > h3 { font-size: 1.1em; margin-bottom: 5%; } .images_1_of_4 h3 a { font-size: 1.1em; } .message h3, .message1 h3, .message2 h3, .message3 h3,.contact h2 { font-size: 1.2em; } .span1 i { padding: 6px 10px; font-size: 0.82355em; } .span2 i { padding: 6px 10px; font-size: 0.82355em; } .message { padding: 10% 0; } .portfolio li a { padding: 6px 7px; } .grid-block { width: 209px; } .grid_1_of_4{ margin: 2% 0 -1% 0%; } .about_1_of_4 { width: 49%; } .span_1_of_4 img { margin-left: 3%; } .img { margin: 4% 4% 0 6%; } .img1 { margin: 4% 6% 0 0; } .social h3 { font-size: 1.3em; } .social p { font-size: 1em; } .form { width: 100%; } .para-contact { margin: 5% 0; width: 100%; } .para-contact h4 { margin-bottom: 0%; padding-bottom: 3%; } .get-intouch-left-address p, .get-intouch-left-address p a { line-height: 1.5em; } .span4 i input[type=submit] { font-size: 0.82355em; padding: 6px 15px; } .social-icons-set { width: 84%; } .social { padding: 3% 0; } .span_1_of_3 { width: 100%; } .col_1_of_3 { margin: 1% 0 0% 0.6%; } .span_1_of_3 p { padding: 1% 0; } #about > div > div.client > div:nth-child(3) > h3,#about > div > div.client > div:nth-child(4) > h3,#about > div > div.client > div:nth-child(5) > h3,#about > div > div.client > div:nth-child(6) > h3,#about > div > div.client > div:nth-child(7) > h3 { font-size: 0.82355em; } #portfoliolist .portfolio { width: 44.2%; } .portfolio img, .portfolio1 img { margin-bottom: 12%; } } @media only screen and (max-width: 320px){ .wrap{ width:95%; } .message { padding: 8% 0; } .about_1_of_4 { width: 100%; } #about > div > div.section.group > div:nth-child(3) { margin-right: 0; float: right; } #filters li span { padding: 7px 1px; } .images_1_of_4 { width: 95%; } .span_1_of_4 { width: 100%; } .grid-block { width: 274px; } .caption { top: 38px; left: 37px; } .client h3 img { width: 23%; } .img { margin: 4% 4% 0 0%; } .img1 { margin: 4% 0% 0 0; } .cart1 { padding: 2% 31% 22%; } .message1 { padding: 10% 0; } .message2 { padding: 7% 0; } .social-icons-set { display: none; } .image { float: none; text-align: center; margin: 2%; } .copy-right { float: none; text-align: center; } #portfoliolist .portfolio { width: 46.2%; margin-right:11px; } .message3 { padding: 10% 0; } }

Galera, alguém conseguiria me ajudar a colocar os botoes de compartilhamento ali abrindo em uma popup? acho muito estranho o jeito que abrem. Valeu http://www.cantodosclassicos.com/todas-mortes-dos-filmes-de-tarantino-em-um-video/

Fiz o background do meu site em degradê e funciona bem no Google Chrome, e Mozila Firefox; entretanto no Internet explorer aparece com o fundo branco, distorcido e não sei como arrumar pois não sou uma web designer experiente. Fiz um curso, mas me perco ainda em detalhes;Também gostaria de saber como deixar minha página adaptável a diferentes máquinas . Agradeço qualquer ajuda neste sentido.

Criei um blog para expor o meu trabalho e ando tendo alguns problemas. Primeiro, excluí o menu default do blogger e criei um próprio utilizando html e css. Antes de finalizá-lo tive alguns problemas para clicar nos links do menu e acabei descobrindo que existia alguma div transparente sobre o menu, e isso me impedia de clicar nos links. Para resolver isso, utilizei a propriedade do z-index. Até então estava tudo perfeito até que eu clico em cima de uma imagem para maximizá-la e quando a imagem aparece, uma parte dela está sendo obstruída pelo próprio menu, como nessa página: http://nossofeudo.blogspot.com.br/p/blog-page_4.html (clique em alguma imagem) Desde então tentei resolver de várias formas esse problema de sobreposição e ainda não consegui. Conto muito com a ajuda de vocês.

Boa tarde, tudo bem? Sou colaborador em um blog literário e fui dar uma fuçada no html do mesmo para tentar dar uma melhorada em seu visual. Encontrei um menu drop down por aí, e resolve adaptar e inseri-lo pra ver se funcionava. Deu certo e ficou uma maravilha. Até que descobri que só está sendo exibido no Google Chrome! No Firefox e Internet Explorer está aparecendo em texto comum com hiperlinks. Vejam vocês mesmo: brihodasestrelas.com.br Vocês sabem me dizer alguma forma de corrigir isso? Agradeço muitíssimo desde já! Até logo.

Ola Eu to Querendo um Script Assim o No ShoutCast tem a Opção que ele te mostrar todas as musicas já tocadas (So O Nome das Musicas) E Eu Sei que existe esse Script Pois eu vi Numa Web Radio Ele mais não sei se seria o song History mais creio que é Mais o que Importa e que quero ele alguém Poderia Me Ajudar

Olá pessoal, eu criei um menu seguindo um tuto, até aí sem problemas. Só que agora quero fazer um dropdown no menu portfólio e não estou sabendo solucionar. Será que alguém pode me dar uma luz? Segue meu CSS #menu { width:100%; height:30px; background-image:url(../imagens/bg_menu.jpg); background-repeat:repeat-x; } #dentromenu { width:950px; height:22px; margin:0 auto; padding-top:8px; } #dentromenu h2 { color:#705932; font-family:Arial, Helvetica, sans-serif; font-size:20px; text-align:center; } .links { color:#705932; font-family:Arial, Helvetica, sans-serif; font-size:18px; text-decoration:none; padding:22px; } .links:hover { color:#FFFF00; font-family:Arial, Helvetica, sans-serif; font-size:18px; background-image:url(../imagens/bg_menu_hover.jpg); background-repeat:repeat-x; padding-top:9px; } E o menu em HTML <div id="menu"> <div id="dentromenu"> <a href="index.html" class="links"> Home </a> <a href="chita.html" class="links"> Chita </a> <a href="quem.html" class="links"> Quem sou eu </a> <a href="produto.html" class="links"> Portfólio </a> <a href="contato.html" class="links"> Faça Contato </a> </div> </div> No aguardo de uma luz para minha dúvida....

Ola pessoal estou fazendo um modelo para um site simples meu mesmo. Mas o rodape ta me quebrando a cabeça.... já tentei de tudo mas ele sempre fica em cima das outras divs. vejam e se puderem me mostrem uma solução. De ante mão obrigado!! Olha as divs: <div id="topo"> <div id="img_topo"> <img src="imagens/dom.gif" width="100px" height="110px"/> </div> <div id="txt_topo"> <h1>Base Aérea de Brasília</h1><br /> <h2>Sexto Esquadrão de Transporte Aéreo</h2><br /> <h3>Seção de Informática</h3> </div> </div> <div id="geral_conteudo"> <div id="menu"> </div> <div id="conteudo"> <div> <div id="clear"></div> </div> <div id="rodape"> <h1> rodape</h1> </div> Vejam agora o css: * {margin: 0px; padding:0px;} div#topo{ margin:0px auto; width:800px; height:150px; border:#009 1px solid; text-align:center; background-color:#93FF93; } div#img_topo{ width:110px; height:120px; border:#009 0px solid; margin: 5px 0px 0px 5px; text-align:center; float:left; } div#txt_topo{ width:650px; height:120px; border:#009 0px solid; margin: 10px 0px 0px 5px; text-align:center; float:left; } div#txt_topo h1 { font-family:Verdana, Geneva, sans-serif; font-size:20px; text-transform:uppercase; font-weight:bold; font:Verdana, Geneva, sans-serif; } div#txt_topo h2 { font-family:Verdana, Geneva, sans-serif; font-size:16px; text-transform:uppercase; font:Verdana, Geneva, sans-serif; } div#txt_topo h3 { font-family:Verdana, Geneva, sans-serif; font-size:14px; text-transform:uppercase; text-decoration:underline; font:Verdana, Geneva, sans-serif; } div#geral_conteudo{ margin:0px auto; width:800px; height:450px; border:#F00 1px solid; text-align:center; margin-top: 5px; } div#menu{ width:790px; height:40px; border:#F00 1px solid; margin:5px 5px 5px 5px; text-align:center; background-color:#006; margin-top: 5px; /* sup dir inf esq*/ } div#conteudo{ width:790px; height:390px; border:#90F 1px solid; margin: 5px 0px 0px 5px; text-align:center; background-color:#93FF93; } div#clear { clear:both; } div#rodape{ position:absolute; margin: 0px auto; width:800px; height:85px; border:#FF0 1px solid; text-align:center; margin-bottom: 5px; margin-top:5px; margin-bottom:5px; } VAleu pessoal conto com a ajuda de vocês!!

Esse é o código em javascript da função que estou fazendo: <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> jQuery.fn.toggleText = function(a,b) { return this.html(this.html().replace(new RegExp("("+a+"|"+b+")"),function(x){return(x==a)?b:a;})); } $(document).ready(function(){ $('.tgl1').before('<span class="perguntas"> Porque devo atodar essa categoria de site?</span>'); $('.tgl1').css('display', 'none') $('span', '#box-toggle1').click(function() { $(this).next().slideToggle('slow') .siblings('.tgl1:visible').slideToggle('fast'); $(this).toggleText('Revelar','Esconder') .siblings('span').next('.tgl1:visible').prev() .toggleText('Revelar','Esconder') }); }) </script> Aqui a outra parte em html: <div id="box-toggle1"> <div class="tgl1"> <p>Teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste</p> </div> </div> Essa função faz com que um link oculte um texto ao clicar, mas quando eu passo o mouse na palavra que oculta o texto não aparece a "mãozinha" do mouse, o que fazer?

Boa tarde galera, sou novato aqui. Então, faz algum tempo que estou tendo problemas em centralizar o menu do meu blog, gostaria de pedir a ajuda de vocês... Segue o codigo: <!-- Start - Navigation --> <div class='nav'> <ul class='menu' id='menu'> <li><a expr:href='data:blog.homepageUrl'>home</a></li> <li><a href='http://edgargd.blogspot.com.br/p/about.html'>Sobre</a></li> <li><a href='http://edgargd.blogspot.com.br/p/servicos.html'>Serviços</a></li> <li><a class='drop-ctg' href='#'>Galeria</a> <ul> <li><a href='http://edgargd.blogspot.com.br/search/label/masculino?max-results=6'>Masculinos</a></li> <li><a href='http://edgargd.blogspot.com.br/search/label/feminino?max-results=6'>Femininos </a></li> <li><a href='http://edgargd.blogspot.com.br/search/label/Casais?max-results=6'>Casamentos</a></li> </ul> </li> <li><a href='http://edgargd.blogspot.com.br/p/contato_03.html'>Contato</a></li> </ul> </div> <!-- End - Navigation Menu --> CSS /* ============================= Navigation ============================= */ *{ margin:0; padding:0; outline:0; } .nav { width:940px; height:0 auto; border-bottom:1px solid #eee; margin:10px auto 5px; display:inline-block; } .menu { width:auto; list-style:none; font:$lisnavifont; text-align:center; margin:0 auto; } .menu a { position:relative; float:center; color:#999; text-decoration:none; text-transform:uppercase; width:auto; line-height:36px; padding:0 60px; } .menu a:hover,li.menuhover a{ color:#111; } .menu li { position:relative; float:left; width:auto; } .menu li:last-child { background:none; } .menu ul{ display:none; position:absolute; top:36px; left:0 ; background:#fbfbfb; display:none; list-style:none; } .menu ul li{ float:none; border-top:1px solid #e3e3e3; border-right:1px solid #e3e3e3; border-left:1px solid #e3e3e3; width:auto; background:none; } .menu ul li:last-child { border-bottom:1px solid #e3e3e3 } .menu ul li a{ float:none; display:block; background:none; line-height:36px; min-width:137px; width:auto; text-align:center; padding-left:10px; color:#444; } .menu ul li a:hover{ background:#fdfdfd; color:#777; } /* ============================= Wrapper ============================= */ #total-wrapper { margin: 0 auto; padding 0 10px; background:#fff; width:1000px; } #outer-wrapper{ width:940px; margin:0; padding:5px 20px 0; text-align:$startSide; font:$bodyfont; } #main-wrapper { width:680px; float:$endSide; word-wrap:break-word; overflow:hidden; } #sidebar-wrapper{ width:240px; float:$startSide; word-wrap:break-word; overflow:hidden; }

E aee galerinha!!! Bom, estava fazendo alguns testes com a janela popup que consigo abrir com javascript, mas não consegui fazer uma coisa, gerar a janela em tela cheia ( redimensionada ), me ajudem galera, como posso fazer isso??? Att: Tales.

Pessoal, estou enfrentando um problema que de primeiro momento me pareceu simples, mas não estou conseguindo resolver, é o seguinte: Tenho uma página que será a home de um site, onde ela é dividida somente em dois link e cada um ocupa 50% da página, porém eu preciso ter uma imagem flutuando sobre esse dois links, mas a imagem está atrapalhando a ação do hover, então eu preciso fazer com que a imagem fique alí mas não interfira nos links, lembrando que a imagem precisa ficar sobre os links em primeiro plano. Segue exemplo para explicar melhor a ideia: https://dl.dropboxusercontent.com/u/21498092/exemplo.jpg Aguardo a ajuda de alguém. Obrigado.

Olá pessoal, Preciso da ajuda dos senhores. É o seguinte: estou construindo um site ilhasexy.sitepx.com. No painel do sistema da Site Px não tem a opção de remover o menu, cabeçalho e rodapé de uma única página, mas o suporte me orientou dizendo que eu posso criar uma regra CSS para remover o menu, o cabeçalho e o rodapé somente da home, visto que eu preciso que a home fique limpa, sem menu, sem cabeçalho e sem rodapé, uma página limpa só para colocar uma figura e um texto. Por favor, quem pode me passar um código com regra CSS que possa ser usado para remover o cabeçalho, o menu e o rodapé somente da home, sem que sejam removidos das demais páginas? Aguardo resposta, Grato!

Tenho o seguinte código <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Edita</title> </head> <body> <?php require("../conexao.php"); $id=$_GET['id']; $servico=$_POST['servico']; $cliente=$_POST['cliente']; $data=$_POST['data']; $descricao=$_POST['descricao']; $stringSQL = "UPDATE `walldivi_walldivi`.`portfolio` SET `servico` = '$servico', `cliente` = '$cliente', `data` = '$data', `descricao` = '$descricao' WHERE `portfolio`.`id` = $id;"; $ativaQuery = mysql_query($stringSQL); if ($ativaQuery) { echo "<div class='alerta_verde'>"; echo "<h1>Portfolio alterado com sucesso.</h1>"; echo '</div>'; } else { echo "<div class='alerta_vermelho'>"; echo "<h1>Não foi possível alterar o portfolio, tente novamente.</h1>"; echo '</div>'; echo "<br />Dados sobre o erro:" . mysql_error(); } ?> <script type="text/javascript"> setTimeout('location.href="../../portfolio-admin.php";',2250); </script> </body> </html> e assim ele funciona.. porém se eu adiciono o css como no exemplo abaixo ele para de funcionar.. POR QUEEEEE ? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Edita</title> <style type="text/css"> .alerta_verde{ margin:20% auto; width:300px; height:auto; padding:10px; border:1px solid #060; background:#090; text-align:center; } .alerta_verde h1{ color:white; font-family:Verdana, Geneva, sans-serif; font-size:12px; } .alerta_vermelho{ margin:20% auto; width:300px; height:auto; padding:10px; border:1px solid #900; background: #F00; text-align:center; } .alerta_vermelho h1{ color:white; font-family:Verdana, Geneva, sans-serif; font-size:12px; } </style> </head> <body> <?php require("../conexao.php"); $id=$_GET['id']; $servico=$_POST['servico']; $cliente=$_POST['cliente']; $data=$_POST['data']; $descricao=$_POST['descricao']; $stringSQL = "UPDATE `walldivi_walldivi`.`portfolio` SET `servico` = '$servico', `cliente` = '$cliente', `data` = '$data', `descricao` = '$descricao' WHERE `portfolio`.`id` = $id;"; $ativaQuery = mysql_query($stringSQL); if ($ativaQuery) { echo "<div class='alerta_verde'>"; echo "<h1>Portfolio alterado com sucesso.</h1>"; echo '</div>'; } else { echo "<div class='alerta_vermelho'>"; echo "<h1>Não foi possível alterar o portfolio, tente novamente.</h1>"; echo '</div>'; echo "<br />Dados sobre o erro:" . mysql_error(); } ?> <script type="text/javascript"> setTimeout('location.href="../../portfolio-admin.php";',2250); </script> </body> </html>

Oi galera, minha grande dúvida é sobre o que um programador front-end precisa saber sobre php e mysql. Procurei na internet mas achei respostas muitos superficiais, quero saber o que realmente é tratado no dia a dia, até que ponto o front-end interfere no back-end? E de preferencia citem o que é preciso saber como: sistemas de cadastro e login, paginação de dados, manipulação de banco de dados e por ai vai. Sejam o mais específico possíveis.

Gostaria de sabe se tem como enclementar no meu site um botão que fique em todos os posts, e quando clico fique marcado visto, pra que a pessoa chegue e veja que já foi visto... na vdd quero colocar no meu site feito em wordpress e é de videos e quando a pessoa já viste o anime clique no botão para noa se perder a voltra a ver novamente e saiba onde parou sakas?? ou fico meio bolado essa minha explicação... espero que alguém tenha entendido e tenha como resolver :)

Oi pessoal, Estou com uma duvida um pouco "complicada" no wordpress, mas é basicamente css. Eu fiz os posts usando o "WP Post Formats" é deu tudo certo, eu fiz com que cada formato ficasse de um tamanho (height) diferente, e deu certo. Sendo que eu não sei como fazer os posts se "encaixarem" um em baixo do outro, vi um site wordpress que fez isso que eu estou tentando fazer, segue o print: http://kdesigner.com.br/print2.jpg Como vocês podem ver no print cada noticia é um "WP Post Formats" diferente, isso ai eu consegui fazer no meu tema, porem não ficam um em baixo do outro de forma "encaixada", como fica ai no print desse site. Segue o print do meu: http://kdesigner.com.br/printcaio.jpg entenderam? O meu não fica "encaixado" um em baixo do outro, ficam como se o espaço do bottom fosse padrão (tipo isso saca) alguém sabe como resolver? OBRIGADOOOO!!!