-
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%;
}
}
-
