tornar um item responsivo

monteirof7 · Fevereiro 2, 2015

Olá pessoal, tudo bem?

Encontrei no CODEPEN uma forma muito legal para deixar Depoimentos nos sites. Porém, estou fazendo um site totalmente responsivo, e esse item não é... Para implementar este item ao meu site gostaria de deixa-lo responsivo, mas como um iniciante tenho muitas duvidas, e gostaria da ajuda de vcs para me ajudarem a deixa-lo respondivo.

Ele ficara assim:

http://codepen.io/criarsitewix/pen/KzJfd

O HTML:

<!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>Untitled Document</title>
</head>

<body>


<div class="container">
  <input type="radio" name="nav" id="first" checked/>
  <input type="radio" name="nav" id="second" />
  <input type="radio" name="nav" id="third" />
  
  <label for="first" class="first"></label>
<label for="second"  class="second"></label>
<label for="third" class="third"></label>
 
  <div class="one slide">
    <blockquote>
      <span class="leftq quotes">“</span> 
      
      <!--Insira o depoimento aqui -->
      
      Fiquei totalmente satisfeito com o trabalho realizado de forma online, excelente atendimento e prontidão, a nossa empresa é de Portugal e queremos continuar com esta excelente parceria.
      
      <span class="rightq quotes">„ </span>
    </blockquote>
    <!--Insira uma imagem do depoimento -->
    <img src="https://lh6.googleusercontent.com/-sLY7eMiRhwE/UzRRRNHuAzI/AAAAAAAACKI/jRqpjJcR4AE/w275-h183-no/download.jpg" width="170" height="130" />
    
    <!--Insira o nome do cliente -->
    
    <h2>Rubem Silveira</h2>
    <h6>CEO em Woof Galaxy Studio</h6>
  
  </div>
  <!--Faça o memso para os demais depoimentos -->
  <div class="two slide">
    <blockquote>
      <span class="leftq quotes">“</span>
      
      Excelente o trabalho da Agência! Conseguiram integrar dois aspectos de extrema importância para mim enquanto cliente: o primeiro foi o resultado visual do site, que ficou limpo e...
      
      <a href="SEU_LINK_AQUI" target="_top"> leia mais</a><span class="rightq quotes">„ </span>
      
    </blockquote>
    <img src="https://lh3.googleusercontent.com/-mlrSOCJ36oY/UzRVVF8gcMI/AAAAAAAACLE/qUI9rk4kNqI/w200-h133-no/carlos.jpg" width="170" height="130" />
    
    <h2>Carlos Henrique Lima</h2>
    
    <h6>Publicidade em Atitude Psicologia e Coaching</h6>
    
  </div>
  
  <div class="three slide">
    <blockquote>
      <span class="quotes leftq"> “</span>
      
      Tivemos uma boa impressão do nosso trabalho com vossa empresa. Fomos tratados com agilidade, atenção e carinho, da mesma forma que procuramos atender nossos clientes. 
      
      <span class="rightq quotes">„ </span>
    </blockquote>
    <img src="https://lh5.googleusercontent.com/-M4R6-GpDjIU/UzRVjo4-B5I/AAAAAAAACLo/-Gs21CB6L3I/w200-h133-no/mario.jpg" width="170" height="130" />
    
    <h2>Mario Couto</h2>
    
    <h6>Viva Mais Assessoria & Fitness</h6>
  </div>
  
  
</div>


</body>
</html>

</spoiler>

O CSS:

  @import url(http://fonts.googleapis.com/css?family=Open+Sans);

*{
  box-sizing:border-box;
}
html, body{
  height:100%;
  font: normal 1em/1.5 "Open Sans";
  background-size:cover;
  background-color: transparent;
    overflow-y: hidden;
    
  
}
a{
  color:#ccc;
}
.container{
  width:500px;
  min-height:315px;
  margin:0 auto;
  position:relative;
  padding-bottom:30px;
  overflow:hidden;
}
h1{
  text-align:center;
  text-shadow:0 1px white;
  color:#02303F;
}
h2{
  color:#736861; 
  margin:15px 0 5px;
  text-shadow:0 1px rgba(255,255,255,0.5);
}
h6{
  color:#928566; 
  margin:0;
}
input[type="radio"] {
position: absolute;
width: 1px; /* Setting this to 0 make it invisible for VoiceOver */
height: 1px; /* Setting this to 0 make it invisible for VoiceOver */
padding: 0;
margin: -1px;
border: 0;
clip: rect(0 0 0 0);
overflow: hidden;
}
label{
  display:block;
  width:32%;
  border: 4px solid #e0e0e0;
  position:absolute;
  bottom:5px;
  cursor: pointer;
  transition: border-color 0.3s linear;
}

label.second{
  left:34%;
}
label.third{
  left:68%;
}

blockquote{
  margin:0;
  padding:30px;
  width:500px;
  background-color: black;
  color:white;
  box-shadow: 0 5px 2px rgba(0,0,0,0.1);
  position:relative;
  transition: background-color 0.6s linear;
}

blockquote:after { 
  content: " "; 
  height: 0; 
  width: 0; 
  position: absolute; 
  top: 100%; 
  border: solid transparent; 
  border-top-color: black;
  border-left-color:black;
  border-width: 10px; 
  left: 10%; 
} 
#second:checked ~ .two blockquote {
  background-color:black;
}
.two blockquote:after{
  border: solid transparent; 
  border-top-color: black;
  border-left-color: black;
  border-width: 10px;
}
#third:checked ~ .three blockquote{
  background-color:black;
}
.three blockquote:after{
  border: solid transparent; 
  border-top-color: black;
  border-left-color: black;
  border-width: 10px;
}
.quotes{
  position:absolute;
  color:rgba(255,255,255,0.5);
  font-size:5em;
}
.leftq{
  top:-25px;
  left:5px;
}
.rightq{
  bottom:-10px;
  right:5px;
}
img{
  float:left;
  margin-right: 20px;
}
.slide{
  position:absolute;
  left:-100%;
  opacity:0;
  transition: all 0.6s ease-in;
}

#first:checked ~ label.first {
  border-width:6px;
  border-color:black;
}
#second:checked ~ label.second {
  border-width:6px; border-color:black;
}
#third:checked ~ label.third {
  border:6px solid black;
}

#first:checked ~ div.one {
  left:0;
  opacity:1;
}
#second:checked ~ div.two {
  left:0;
  opacity:1;
}
#third:checked ~ div.three {
  left:0;
  opacity:1;
}

</spoiler>

Agradeço desde já!

reebr · Fevereiro 2, 2015

E como deveria ficar?

rikaschmitt · Fevereiro 2, 2015

Comece trocando todos os valores fixos de largura para %.

Lucas Medina · Fevereiro 2, 2015

Olá!

Você deve trocar os valores relativos de largura e altura por uma porcentagem específica.

Ou então, você pode fazer isso através de media queries:

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

Assim você configura os valores para determinadas resoluções, e acima/abaixo, conforme for precisando.
Boa sorte!

william.carriello · Fevereiro 4, 2015

4 coisas que eu faria...

1º: Não notei o uso de viewport no site

2º: Trabalhe com as mediaqueries

3º: Use medidas em % (porcentagem) e nos textos recomento REM como medida

4º: Use um framework para o CSS. Recomendo 2: Bootstrap ou Foudation, porém tenho gostado mais do Foudation

Entrar

Arquivado

tornar um item responsivo

Recommended Posts

monteirof7 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

reebr 94

Compartilhar este post

Link para o post

Compartilhar em outros sites

rikaschmitt 54

Compartilhar este post

Link para o post

Compartilhar em outros sites

Lucas Medina 17

Compartilhar este post

Link para o post

Compartilhar em outros sites

william.carriello 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

editor quill configuração

PHP - Orientação com UPDATE

BelogsTo do laravel

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante