Search the Community
Showing results for tags 'background'.
Found 11 results
-
Boa tarde amigos, estou batendo a cabeça em uma questão de css, que não é nem de longe o meu forte... quero colocar umas bandeirinhas de backgroudo de uma div, porem não consigo faze-las ficarem lado a lado... background: url("be.png") no-repeat , url("us.png") no-repeat, url("au.png") no-repeat, url("br.png") no-repeat, url("ca.png") no-repeat, url("de.png") no-repeat, consigo repetir, mas quando é para colocar lado a lado ão funciona, o que devo substituir o no-repeat ali? muito obrigado!
-
Galera eu tava tentando fazer um banner para o youtube, e queria usar um fundo tipo esse, alguém ai pode me ajudar, pois eu não sei o nome dele, é aquele usado como fundo padrão de conversa do whatsapp.
-
(Ajuda) Alterando imagem de fundo conforme o horário
gui.demiranda posted a question in HTML, XHTML, CSS
Oi a todos, bom dia! Gostaria de ajuda a respeito disso, estou querendo colocar 2 fundos no meu site conforme o horário vai passando. a imagem fica estática mas passando das 18:00 gostaria de impor outro fundo para não ficar igual sem precisar alterar no ftp é possivel isso? Att. -
deleta
-
background Background full e adaptável a desktop e mobile
abstein posted a question in HTML, XHTML, CSS
E aí galera... Estou com um problema (bobo) mas está me travando em um trabalho. Eu queria elaborar uma página de entrada para um site, pode ser uma página de home, tipo uma pop up apenas com imagem (e texto oculto, se possível) que aparecesse full (tanto no desktop quanto mobile) no primeiro acesso a página principal. Essa imagem, quando clicada, a de dar acesso a outra página, mas isso é detalhe. Espero terem compreendido. Se alguém puder me dar uma mão agradeço, pois já tentei html e não consegui embutir o css no html. O site é hospedado no Wordpress. Valeu. Se tiverem uma solução, tipo uma página inicial de loading, algo assim, é bem vindo, pois quero apenas uma página de entrada. -
Seguinte, estou criando um site e tudo mais, mas por algum motivo, não estou conseguindo colocar um background. O caminho da pasta está correto, o nome, o código, já revisei de cima à baixo e não acho o por quê de eu não estar conseguindo. Basicamente, mesmo eu colocando no CSS o background-image: url(img/back4.jpg); não acontece nada, o site permanece com a cor padrão. Alguém sabe resolver este problema? HTML <html> <head> <meta charset="UTF-8"> <title> Massacre de Realengo </title> <link rel="stylesheet" type="text/css" href="CSS/layout.css"> </head> <body> <!--Banner--> <div class="container"> <div class="BannerP"> <img src="IMG/banner.jpg" /> </div> <!-- Menu --> <div class="Menu"> <ul class="Menu-Top"> <li><a href="#"> INÍCIO </a></li> <li><a href="Sobre.html"> SOBRE </a></li> <li><a href="Fotos.html"> FOTOS </a></li> <li><a href="Documentários.html"> DOCUMENTÁRIOS </a></li> <li><a href="Curiosidades.html"> CURIOSIDADES </a></li> <li><a href="Contato.html"> CONTATO </a></li> </ul> </div> <!-- Main --> <div class="Main"> <div class="Box-Left"> <img src="IMG/wellington.jpg" /> </div> <div class="Box-Right"> <img src="IMG/welpistola.jpg" /> </div> <div class="Box-text1"> <p> Texto Aqui </p> <a href="#" id="Continue"> Continue lendo... </a> </div> <div class="Box-text2"> <p> Texto Aqui </p> <a href="#" id="Continue"> Continue lendo... </a> </div> </div> <!-- Rodapé --> <div class="Footer"> <div class="Footer-Box"> <ul> <li><h4> MENU </h4></li> <li><a href="#"> INÍCIO </a></li> <li><a href="#"> SOBRE </a></li> <li><a href="#"> FOTOS </a></li> <li><a href="#"> DOCUMENTÁRIOS </a></li> <li><a href="#"> CURIOSIDADES </a></li> <li><a href="#"> CONTATO </a></li> </ul> </div> <div class="Footer-Box"> <ul> <li><h4> SOBRE O SITE </h4></li> <li><a href="#"> MEMBROS </a></li> <li><a href="#"> FINALIDADE </a></li> </ul> </div> <div class="Footer-Box"> <ul> <li><h4> REDES SOCIAIS </h4></li> <li><a href="#"> FACEBOOK </a></li> <li><a href="#"> TWITTER </a></li> </ul> </div> <div class="copyright"> Copyright © 2015 Massacre de Realengo. Todos os direitos reservados. </div> </div> </div> </body> </html> CSS (externo) *{ margin: 0; padding: 0; } body { background-image: url(img/back4.jpg); font-family: Verdana, Century, Arial; font-size: 15px; margin-left: 0px; padding-top: 30px; color: #000; } a { text-decoration: none; color: #000; } ul { list-style: none; margin-top: 0px; padding-top: 8px; padding-left: 0px; } /***------------------------------------------------------------- Container do site -------------------------------------------------------------***/ .container { margin: auto; width: 850px; height: auto; } /***------------------------------------------------------------- Banner do site -------------------------------------------------------------***/ .Banner .BannerP img { float: left; width: 850px; height: 180px; margin-left: 335px; } /***------------------------------------------------------------- menu do site -------------------------------------------------------------***/ .menu { background: #CCC; width: 850px; height: 35px; margin: 70px 0px 0px 0px; padding: 0px; } .menu li { display: inline; } .menu-top li a { width: 50px; height: 15px; padding: 8px 24px; text-shadow: 0px 2px 3px #666; margin-right: 12px; } .main { width: 850px; height: auto; float: left; margin: 15px 0 15px 0; } .main .box-left { width: 350px; height: 190px; float: left; background: #FFFFF0; } .main .box-right { width: 350px; height: 190px; float: right; margin-right: 15px; background: #FFFFF0; } .main .box-right img { width: 365px; height: 325px; } .main .box-left img { width: 365px; height: 325px; } .main .box-text1 { width: 335px; height: 125px; margin-top: 150px; float: left; background: #FFFFF0; padding: 15px; text-align: justify; } .main .box-text2 { width: 335px; height: 125px; margin-top: 150px; margin-right: 0px; float: right; background: #FFFFF0; padding: 15px; text-align: justify; } /***------------------------------------------------------------- Rodapé do site -------------------------------------------------------------***/ .Footer { width: 850px; height: 200px; float: left; background: #393939; color: #FFFFE0; margin-left: 0px; margin-top: 0px; } .Footer-box { width: 245px; height: 180px; float: left; } .Footer-box ul { margin-left: 55px; padding-left: 55px; } .Footer-box ul li { color: #FFF; } .Footer-box ul li a { color: #BBB; } .copyright { margin-top: 180px; margin-left: 148px; }
-
Estou precisando de ajuda para colocar um fundo em .swf (flash) no meu site. Atualmente é .gif, mas pesa muito! Pesquisando na internet vi que tem que fazer o fundo do arquivo .swf transparente e colocar por cima de um objeto, envolvendo uma div ou algo do tipo, mas não sei fazer isso. Estudei HTML 5 anos atrás e não lembro muito. Se puderem me ajudar, agradeço. *Cliquem em exibir código fonte no meu site para ver o html. www.eloplane.com
-
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á
-
É 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; } }
-
Preciso colocar um vídeo como background em determinada div na header de um blog em wordpress, este vídeo será o background da Logo da página preciso fixá-lo no topo com a dimensão de 1200 x 175. Já consegui em um teste colocá-lo no fundo do site todo, mas na header não consegui. Alguém poderia me ajudar.
-
Boas pessoal, eu não sou muito de pedir logo ajuda sem tentar resolver eu primeiro, e agora bati num problema que não sou capaz de resolver por nada muito menos o que posso usar, a situacao é a seguinte: tenho uma tabela (mysql) com centenas de registos e tenho uma hora noutra tabela e gostava que o servidor executa-se todos os dias aquela hora um script que por exemplo escolhe 90% dos registos mas sem que fosse o cliente a lançar o evento ou seja mesmo sem visitantes, o servidor auto executar. alguém tem alguma ideia para eu me poder guiar por favor? já tenho um countdown no cliente a avisar que falta x minutos para o site ficar em manutencao $tempo = date("F j, Y ") . $this->inicio_model->get_time($base); $time = str_replace('"', "", $tempo); $agora = strtotime(date("H:i:s")); $bdTime = strtotime($time); if ($agora > $bdTime) { $data['offline'] = true; $tomorrow = mktime(0, 0, 0, date("m"), date("d") + 1, date("Y")); $amanha = date("F j, Y ", strtotime(date("Y/m/d", $tomorrow))); $tempo = $amanha . $this->inicio_model->get_time($base); } else { $data['offline'] = false; $tempo = date("F j, Y ") . $this->inicio_model->get_time($base); } tipo auto executar if($data['offline']==true) $this->escolherMembros(); mas dai para a frente não consigo avancar mais. obrigado desde já
