-
Similar Content
-
By Anderson Ronilson Xavier
Olá a todos gostaria da ajuda dos colegas estou em um projeto de site landing page usando o plugin construtor de sites chamado themify ultra e não estou conseguindo uma galeria de imagens igual ao cliente está me pedindo que responsiva e com um menu que tenha as opções por exemplo "todas maçã banana laranja " se eu clicar em maçã a galeria ocultaria as bananas e Laranja e se eu clicar em todas e voltaria a apresentar todas as frutas ... Desculpa o jeito de explicar ... Mas galeria não estou conseguindo achar nada que me ajude a opção do themify ultra foi do próprio cliente que já tinha e acabei topando por fazer usando ele mesmo mas no site do themify não achei nenhum pluguin interessante a galeria deles é a padrão do WordPress será que teria como eu usar alguma outra os colegas tem alguma sugestão?
Vou deixar um site que o cliente deixou de modelo de como ele gostaria de que dele ficasse
www.levelmont.com.br
Grato pelo ajuda dos colegas.
-
By chuxi
<div class="fab"> <button class="main"> </button> <ul> <li> <label for="opcao1">Opção 1</label> <button id="opcao1"> ⎈ </button> </li> <li> <label for="opcao2">Opção 2</label> <button id="opcao2"> ⎗ </button> </li> <li> <label for="opcao3">Opção 3</label> <button id="opcao3"> ☏ </button> </li> </ul> </div> body{ font-family: sans-serif; } .fab{ position: fixed; bottom:10px; right:10px; } .fab button{ cursor: pointer; width: 48px; height: 48px; border-radius: 30px; background-color: #cb60b3; border: none; box-shadow: 0 1px 5px rgba(0,0,0,.4); font-size: 24px; color: white; -webkit-transition: .2s ease-out; -moz-transition: .2s ease-out; transition: .2s ease-out; } .fab button:focus{ outline: none; } .fab button.main{ position: absolute; width: 60px; height: 60px; border-radius: 30px; background-color: #5b19b7; right: 0; bottom: 0; z-index: 20; } .fab button.main:before{ content: '⏚'; } .fab ul{ position:absolute; bottom: 0; right: 0; padding:0; padding-right:5px; margin:0; list-style:none; z-index:10; -webkit-transition: .2s ease-out; -moz-transition: .2s ease-out; transition: .2s ease-out; } .fab ul li{ display: flex; justify-content: flex-start; position: relative; margin-bottom: -10%; opacity: 0; -webkit-transition: .3s ease-out; -moz-transition: .3s ease-out; transition: .3s ease-out; } .fab ul li label{ margin-right:10px; white-space: nowrap; display: block; margin-top: 10px; padding: 5px 8px; background-color: white; box-shadow: 0 1px 3px rgba(0,0,0,.2); border-radius:3px; height: 18px; font-size: 16px; pointer-events: none; opacity:0; -webkit-transition: .2s ease-out; -moz-transition: .2s ease-out; transition: .2s ease-out; } .fab button.main:active, .fab button.main:focus{ outline: none; background-color: #7716ff; box-shadow: 0 3px 8px rgba(0,0,0,.5); } .fab button.main:active:before, .fab button.main:focus:before{ content: '↑'; } .fab button.main:active + ul, .fab button.main:focus + ul{ bottom: 70px; } .fab button.main:active + ul li, .fab button.main:focus + ul li{ margin-bottom: 10px; opacity: 1; } .fab button.main:active + ul li:hover label, .fab button.main:focus + ul li:hover label{ opacity: 1; } Como faço pra movimentar meu botão flutuante pra qualquer lado da tela igual o messenger?
-
By gbilibio
Olá, estou montando um layout para uma atividade da faculdade, o layout está pronto, mas está com um problema na estrutura, quando diminui o tamanho do
navegador o página fica mais uma margem a direita e as div's não ficam fixas, segue o código html e css:
Página HTML
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8"/>
<title>Aula 07</title>
<link rel="stylesheet"
type="text/css" href="style.css"/>
<meta name="viewport"
content="width=device-width,
initial-scale=1.0"/>
</head>
<body>
<header>
<div class="contatos">
<div class="cont">
<p> <img src="Icones/telefone.png" width="20" height="20"> (41) 3019-7838</p>
</div>
<div class="cont">
<p> <img src="Icones/email.png" width="20" height="20"> contato@email.com</p>
</div>
<div class="cont">
<p> <img src="Icones/locationmarker.png" width="20" height="20"> R. Rua, 00 - Curitiba </p>
</div>
</div>
</header>
<div class="topo">
<div class="contatos2">
<div class="cont2">
<img align="right" src="logo.png">
</div>
<div class="cont2">
<p> HOME </p>
</div>
<div class="cont2">
<p> EMPRESA </p>
</div>
<div class="cont2">
<p> SERVIÇOS </p>
</div>
<div class="cont2">
<p> HOSPEDAGEM </p>
</div>
<div class="cont2">
<p> PORTIFÓLIO </p>
</div>
<div class="cont2">
<p> CONTATO </p>
</div>
</div>
</div>
<div class="banner">
</div>
<div class="banner2">
<div class="banneresq">
<h1> <font color="#2B47AE">BEM-VINDO AO</font> <br> <font color="#A11606">NOSSO SITE</font> </h1>
<div class="linhatexto">
</div>
<p>
Especialista em desenvolvimento de sites o Projeto Web oferece oque há de melhor<br>
no mercado para construção de site, tecnologia avançada e modernismo nos Layouts<br>
são as principais caracteristicas de nossos Layouts, com a Metodologia de Atender<br>
Bem para Atender Sempre.<br>
</p>
<div class="botaoentrar" >
<h1>Entrar</h1>
</div>
</div>
<div class="bannerdir">
<img src="Imagens/bannerdireita2.jpg" width="320" height="280">
</div>
</div>
<div class="banner3">
<div class="caixamaior">
<div class="caixa1">
<img src="Imagens/box1.jpeg" width="250" height="200">
<div align="center">
<p> CRIAÇÃO DE SITES </p>
</div>
<div class="caixa1texto">
<h1>
Temos desde sites simples de 1 página,<br>
modelos padrões e personalizados<br>
com páginas internas. Confira nossos<br>
modelos ou solicite um.<br>
</h1>
</div>
<div class="botaosaibamais">
<h1>Saiba Mais</h1>
</div>
</div>
<div class="caixa2">
<img src="Imagens/box2.jpg" width="250" height="200">
<div align="center">
<p> HOSPEDAGEM DE SITES </p>
</div>
<div class="caixa2texto">
<h1>
Hospede um site em um servidor<br>
confiável e de qualidade, que sempre<br>
lhe dê suporte necessário. Deixe seu<br>
site 100% online.<br>
</h1>
</div>
<div class="botaosaibamais">
<h1>Saiba Mais</h1>
</div>
</div>
<div class="caixa3">
<img src="Imagens/box3.jpg" width="250" height="200">
<div align="center">
<p> MANUTENÇÃO DE SITES </p>
</div>
<div class="caixa3texto">
<h1>
Mantenha seu site sempre atualizado,<br>
passando credibilidade aos seus<br>
clientes e ganhando ponto com o<br>
Google e outros buscadores.<br>
</h1>
</div>
<div class="botaosaibamais">
<h1>Saiba Mais</h1>
</div>
</div>
</div>
</div>
</body>
</html>
PÁGINA CSS
@import url('https://fonts.googleapis.com/css?family=Muli:300,400,700');
@import url('https://fonts.googleapis.com/css?family=Cabin:400,500,600,700');
@import url('https://fonts.googleapis.com/css?family=Oxygen:300,400,700');
@import url('https://fonts.googleapis.com/css?family=Roboto:100,400,500,700');
@import url('https://fonts.googleapis.com/css?family=Scada:400,400i,700');
@import url('https://fonts.googleapis.com/css?family=Karla:400,700');
header{
width: 100%;
height: auto;
overflow: hidden;
background-color: #023180;
margin: auto;
}
body{
margin: 0px;
}
.contatos{
width: 100%;
max-width: 900px;
height: auto;
overflow: hidden;
margin: auto;
}
.cont{
width: 33.3%;
height: 40px;
float: left;
}
.cont p{
color:#ffffff;
font-family: 'Muli';
font-weight: 400;
}
.topo{
width:80%;
height:120px;
float:right;
}
.cont2{
font-family:'Cabin';
color:#023180;
width:13.3%;
height:40px;
float:left;
}
.cont2 p{
font-size:15px;
margin-left:100px;
margin-top:30px;
}
.logo{
margin-left:350px;
margin-top:10px;
}
.banner{
width:100%;
height:500px;
background:url(Imagens/banner.jpg);
float:left;
margin-top:30px;
}
.banner3{
width:100%;
height:500px;
background-color:#083875;
float:left;
margin-top:50px;
vertical-align: middle;
}
.caixamaior{
width:100%;
height:auto;
}
.caixamaior p{
color:#FFFFFF;
font-family:'Scada';
}
.caixa1texto h1{
font-size:12px;
font-family:'Karla';
text-align:center;
color:#FFFFFF;
}
.caixa2texto h1{
font-size:12px;
font-family:'Karla';
text-align:center;
color:#FFFFFF;
}
.caixa3texto h1{
font-size:12px;
font-family:'Karla';
text-align:center;
color:#FFFFFF;
}
.botaosaibamais{
width:150px;
height:50px;
background-color:#21588E;
text-align:center;
vertical-align: middle;
line-height: 3;
margin-left:45px;
margin-top:20px;
}
.botaosaibamais h1{
font-family:'Scada';
font-size:15px;
color:#ffffff;
vertical-align: middle;
}
.caixa1{
margin-left:15%;
margin-top:5%;
float:left;
}
.caixa2{
margin-left:10%;
margin-top:5%;
float:left;
}
.caixa3{
margin-left:10%;
float:left;
margin-top:5%;
}
.banneresq{
float:left;
margin-left:120px;
margin-top:65px;
}
.banneresq h1{
font-family: 'Oxygen';
}
.banneresq p{
color:#3F3B3B;
font-family: 'Oxygen';
font-size:16px;
}
.linhatexto{
width:75px;
height:4px;
background-color:#A11606;
margin-top:-5px;
}
.botaoentrar{
width:150px;
height:50px;
background-color:#800000;
text-align:center;
vertical-align: middle;
line-height: 3;
}
.botaoentrar h1{
font-family:'Oxygen';
font-size:15px;
color:#ffffff;
vertical-align: middle;
}
.bannerdir{
float:left;
margin-top:60px;
margin-left:70px;
}
@media only screen and (max-width: 600px){
.cont{
width: 100%;
}
.cont p{
text-align: center;
}
.banner{
width:100%;
}
}
-
By Magalha
Boa noite amigos,
Primeiramente queria dizer que sou iniciante e sei muito pouco de programação (quase 0). Estou me virando para colocar um site no ar sozinho. Fiz algumas alterações usando css em meu site (fui introduzindo uma a uma e testando em diversos dispositivos).
Porem tem uma que esta me dando dor de cabeça! Alterei apenas a cor do backgroun e do texto na minha barra de navegação da seguinte forma:
"body .main-navigation, .navigation-container .site-title, .navigation-container ul li a, .navigation-container .icon-search {
background: #ffffff;
color: #d83200;
}"
Porem, quando acesso o site via dispositivo móvel os ícones e o texto da barra de navegação principal estão na cor branca (ou seja backgroun branco e letras + ícones brancos). Já tentei de tudo e não consigo achar a classe que altera isso, tenho 03 dias revirando a net e nada! Se for algo complexo estou disposto a pagar pelo serviço.
o site é www.naviagemdeviajar.com.br
-
By Matt_Engler
Por favor, preciso de ajuda para meu TCC onde terei que criar um site. Eis o problema, utilizei o CSS para estilizar os links do site, dessa maneira:
a{
color: white;
text-decoration: none;
padding: 5px 10px;
}
a:link{
color: white;
}
a:visited{
color: white;
}
a:hover{
color: black;
background-color: white;
}
Essa estilização foi aplicada a todos os links do site, porém, quero aplicá-la a apenas alguns links específicos (no caso, os links do top). Como faço para "isolar" a estilização de cada link?!
Abaixo disponibilizo o HTML e o CSS do site, desde já agradeço!
<!DOCTYPE html>
<html>
<head>
<title>Anything</title>
<link rel="stylesheet" type="text/css" href="css/Stil.css">
</head>
<body>
<!-- Inicio do Menu -->
<div class="haus">
<div class="area">
<h1 class="logo"> <span class="yellow"> <img src="Logo.png" width="325" height="50"></span> </h1>
<div class="menu">
<a href="Haus.html">Haus</a>
<a href="#">Nachrichten</a>
<a href="#">Kino</a>
</div>
</div>n
</div>
<!-- Fim do menu -->
<!-- Inicio do Conteúdo -->
<br>
<div class="area-principal">
<div class="postagem">
<h2><a href="#"> Título da Notícia:</a></h2>
<span class="data-postagem">Data da postagem:</span>
<img src="img/imagem1.png" class="img-postagem">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<span>Postado por: Fulano</span>
</div>
</div>
</body>
</html>
================================================================================================================================================================
*{
margin: 0px;
padding: 0px;
}
body{
background-color: lightgray;
font-size: 16px;
font-family: "Trebuchet MS", Helvetica, sans-serif;
color: black;
}
.haus{
font-size: 25px;
color: yellow;
background-color: black;
border-bottom: 7px solid gold;
height: 50px;
position: fixed;
width: 100%;
top: 0px;
}
.area{
width: 720px
margin: 0 auto;
}
.menu{
float: right;
padding: 10px 100px;
}
.logo{
float: left;
}
.yellow{
color: gold;
}
a{
color: white;
text-decoration: none;
padding: 5px 10px;
}
a:link{
color: white;
}
a:visited{
color: white;
}
a:hover{
color: black;
background-color: white;
}
.area-principal{
width: 720px;
margin: 55px auto 10px auto;
}
.postagem{
margin: 10px;
background-color: darkgray;
margin-bottom: 10px;
}
h2{
color: gold;
text-decoration: none;
}
.data-postagem{
display: block;
font-size: 14px;
border-bottom: 1px solid #f4f4f4;
padding-bottom: 10px;
margin-bottom: 10px;
}
.img-postagem{
float: left;
margin: 0px 10px 10px 0px;
}
p{
text-align: justify;
padding: 10px;
}
-
