Jump to content
Ewfc2005

Transformar site em responsivo

Recommended Posts

Eu sou um programador amador, e ainda estou aprendendo programação, comecei um site, mas esqueci de faze-lo para ser responsivo, agora preciso de ajuda

pois nao consigo deixa-lo responsivo

 


Codigo HTML

Quote

 

<!DOCTYPE html>
  <head>
    <title>Sogo Studio</title>
    <link rel="stylesheet" type="text/css" href="sobre.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
    <meta charset="utf-8">
  </head>
  <body>

<div id="all">
    <ul class="menu">
        <a href="site.html"><img class="img-circle" src="sogostudio.png"></a>
        <li><a href="sobre.html">Sobre</a></li>
        <li><a href="servicos.html">Serviços</a></li>
        <li><a href="nossoTime.html">Nosso Time</a></li>
        <li><a href="contato.html">Contato</a></li>
    </ul>
</div>


    <h1 style="white-space:pre-wrap;">Sobre</h1>

    <hr size="1">

<div class="centralizado">

TEXTO

</div>

 

<div class="footer">
  <p class="local">LOCALIZAÇÂO</p>
</div>

<div class="sub">
  <p>local</p>
</div>


<div class="footer2">
  <p class="horas">HORARIO</p>
</div>

<div class="sub2">
  <p>horas</p>
</div>


<div class="footer3">
  <p class="contato">CONTATO</p>  
</div>

<div class="sub3">
  <p>contato</p>
</div>

 

<div class="footer4">
  <p class="social">SOCIAL</p>  
</div>

 

<a href="https://www.instagram.com/sogostudio/" target="_blank"><i class="fab fa-instagram"></i></a>

<a href="https://www.facebook.com/sogostudioararaquara/" target="_blank"><i class="fab fa-facebook-square"></i></a>


  </body>
</html>

 

 

Codigo CSS


 

Quote

 

html {
  overflow: auto;
}

*{

  margin: 10px;padding: 10px;
  }

body {

    font-family: "Times New Roman",Times,serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.25em;
    letter-spacing: 0em;
    font-family: proxima-nova;
    font-weight: 300;
    font-style: normal;
    font-size: 13px;
    line-height: 2.4em;
    letter-spacing: .065em;
    text-rendering: optimizeLegibility;
  }
a{
  text-decoration: none; color: #000;
  }


ul.menu{
      font-family: "Times New Roman",Times,serif;

    text-align: center; /* centraliza na horizontal */
}
ul.menu li{
    display: inline-block; /* centraliza na horizontal */
    margin: 0 5px;
}

}
ul.menu li a:hover{
    background-color: #8BBADC;
}

.img-circle {
width: 200px;
height: 200px;
border-radius: 50%;
position: absolute;
left: 50px;
top: 0;
}

span {


    font-family: sans-serif;
    line-height: 1.25em;
    letter-spacing: 0em;
    text-transform: none;
    font-weight: 100;
    font-style: normal;
    font-size: 50px;
    line-height: 1.4em;
    letter-spacing: .25em;
    text-transform: uppercase;
    color: #222;
    position: absolute;
    top: 330px;
    left: 450px;

}


.titulo{
  position: absolute;
  background-image: url("servico.jpg");
  height: 125px;
  width: 1328px;
  top: 300px;
  left: -10px;
}

.retangulo{
  position: absolute;
  background-color: white;
  height: 90px;
  width: 330px;
  top: 320px;
  left: 450px;
}

.foto1{
  position: absolute;
  top: 500px;
  left: -20px;
  width: 650px;
  height: 320px;
  background: url("servicos1.jpeg") center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.foto1:hover {
  opacity: 0.8
}

.servico1{
font-family: Arial,sans-serif;

line-height: 1.25em;

letter-spacing: .02em;

font-weight: bold;

font-style: normal;

font-size: 32px;

line-height: 1.2em;

letter-spacing: .5em;

text-transform: uppercase;

position: absolute;
top: 600px;
left: 300px;
background: white;
padding: 20px;
}

.foto2{
  position: absolute;
  top: 900px;
  right: -10px;
  width: 650px;
  height: 320px;
  background: url("servicos2.jpeg") center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.foto2:hover{
  opacity: 0.8
}

.servico2{
font-family: Arial,sans-serif;

font-weight: 400;

line-height: 1.25em;

letter-spacing: .02em;

font-weight: bold;

font-style: normal;

font-size: 32px;

line-height: 1.2em;

letter-spacing: .5em;

text-transform: uppercase;

position: absolute;
top: 1030px;
right: 500px;
background: white;
padding: 20px;
}

.foto3{
  position: absolute;
  top: 1300px;
  left: -20px;
  width: 650px;
  height: 320px;
  background: url("servicos3.jpg") center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.foto3:hover{
  opacity: 0.8
}

.servico3{
font-family: Arial,sans-serif;

line-height: 1.25em;

letter-spacing: .02em;

font-weight: bold;

font-style: normal;

font-size: 32px;

line-height: 1.2em;

letter-spacing: .5em;

text-transform: uppercase;

position: absolute;
top: 1400px;
left: 550px;
background: white;
padding: 20px;
}

.foto4{
  position: absolute;
  top: 1700px;
  right: -10px;
  width: 650px;
  height: 320px;
  background: url("servico4.jpg") center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.foto4:hover{
  opacity: 0.8;
}

.servico4{
font-family: Arial,sans-serif;

font-weight: 400;

line-height: 1.25em;

letter-spacing: .02em;

font-weight: bold;

font-style: normal;

font-size: 32px;

line-height: 1.2em;

letter-spacing: .5em;

text-transform: uppercase;

position: absolute;
top: 1850px;
right: 300px;
background: white;
padding: 20px;
}

.foto5{
  position: absolute;
  top: 2100px;
  left: -10px;
  width: 650px;
  height: 320px;
  background: url("servico5.jpeg") center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.foto5:hover{
  opacity: 0.8;
}

.servico5{
font-family: Arial,sans-serif;

font-weight: 400;

line-height: 1.25em;

letter-spacing: .02em;

font-weight: bold;

font-style: normal;

font-size: 32px;

line-height: 1.2em;

letter-spacing: .5em;

text-transform: uppercase;

position: absolute;
top: 2230px;
left: 300px;
background: white;
padding: 20px;
}

 

.footer:not(.index-item-title) {
  position: absolute;
  left: 200px;
  text-align: center;
  top: 2500px;
  font-size: 10px;
  font-family: Arial,sans-serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.25em;
  letter-spacing: 0em;
  text-transform: none;
  font-family: arno-pro;
  font-weight: 700;
  font-style: normal;
  font-size: 9px;
  line-height: 2.1em;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: #222;
}

.footer2{
  position: absolute;
  left: 450px;
  text-align: center;
  top: 2500px;
  font-size: 10px;
  font-family: Arial,sans-serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.25em;
  letter-spacing: 0em;
  text-transform: none;
  font-family: arno-pro;
  font-weight: 700;
  font-style: normal;
  font-size: 9px;
  line-height: 2.1em;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: #222;
}

.footer3{
  position: absolute;
  left: 700px;
  text-align: center;
  top: 2500px;
  font-size: 10px;
  font-family: Arial,sans-serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.25em;
  letter-spacing: 0em;
  text-transform: none;
  font-family: arno-pro;
  font-weight: 700;
  font-style: normal;
  font-size: 9px;
  line-height: 2.1em;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: #222;
}

.footer4{
  position: absolute;
  left: 950px;
  text-align: center;
  top: 2500px;
  font-size: 10px;
  font-family: Arial,sans-serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.25em;
  letter-spacing: 0em;
  text-transform: none;
  font-family: arno-pro;
  font-weight: 700;
  font-style: normal;
  font-size: 9px;
  line-height: 2.1em;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: #222;
}

.sub{
  position: absolute;
  left: 130px;
  text-align: center;
  top: 2530px;
  font-size: 11px;
  font-family: Arial,sans-serif;
  font-size: 19px;
  line-height: 1.25em;
  letter-spacing: 0em;
  font-family: arno-pro;
  font-weight: 400;
  font-style: normal;
  font-size: 13px;
  line-height: 1.2em;
  letter-spacing: .05em;
  text-transform: none;
  color: #222;
}

.sub2{
  position: absolute;
  left: 440px;
  text-align: center;
  top: 2540px;
  font-family: Arial,sans-serif;
  font-size: 19px;
  line-height: 1.25em;
  letter-spacing: 0em;
  font-family: arno-pro;
  font-weight: 400;
  font-style: normal;
  font-size: 13px;
  line-height: 1.2em;
  letter-spacing: .05em;
  text-transform: none;
  color: #222;
}

.sub3{
  position: absolute;
  left: 690px;
  text-align: center;
  top: 2540px;
  font-family: Arial,sans-serif;
  font-size: 19px;
  line-height: 1.25em;
  letter-spacing: 0em;
  font-family: arno-pro;
  font-weight: 400;
  font-style: normal;
  font-size: 13px;
  line-height: 1.2em;
  letter-spacing: .05em;
  text-transform: none;
  color: #222;
}

.fa-facebook-square{
  position: absolute;
  top: 2560px;
  right: 310px;
  font-size: 20px;
}

.fa-instagram{
  position: absolute;
  top: 2560px;
  right: 270px;
  font-size: 20px;
}

.fab:hover {
  opacity: 0.7;
}

@-webkit-keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
@-moz-keyframes fadeIn {
0% { opacity: 0;}
100% { opacity: 1; }
}
@-o-keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}

.fadeIn {
-webkit-animation: fadeIn 3s ease-in-out;
-moz-animation: fadeIn 3s ease-in-out;
-o-animation: fadeIn 3s ease-in-out;
animation: fadeIn 3s ease-in-out;
}

 

 

Ele está mal feito, ainda tenho que arrumar muita coisa, se alguem conseguir me ajudar e dizer como ele pode ficar responsivo

eu Agradeço.

Share this post


Link to post
Share on other sites

Mude o font-size de px para %.

Exemplo:

 

// Seu código

body {

    font-family: "Times New Roman",Times,serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.25em;
    letter-spacing: 0em;
    font-family: proxima-nova;
    font-weight: 300;
    font-style: normal;
    font-size: 13px;
    line-height: 2.4em;
    letter-spacing: .065em;
    text-rendering: optimizeLegibility;
  }

Seu código acima tem dois font-size (font-size: 16px  e font-size: 13px). Não vejo necessidade em ter dois.

 

Não sou bom em sites responsivos, mas o que tu pode fazer é tirar um font-size, e depois trocar o px por % assim:

body {

    font-family: "Times New Roman",Times,serif;
    font-weight: 400;
    font-size: 120%;
    line-height: 1.25em;
    letter-spacing: 0em;
    font-family: proxima-nova;
    font-weight: 300;
    font-style: normal;
    line-height: 2.4em;
    letter-spacing: .065em;
    text-rendering: optimizeLegibility;
  }

 

Resultado no computador:

forum_css.thumb.png.11b4fe13608b7eeb013fec8d3d4ca693.png

 

Possível resultado em um dispositivo mobile:

forum_css2.png.dbcd0b10ddb55d5bc5707294fc0f40a4.png

 

Troque os px das imagens e demais textos. Talvez o resultado te agrade, ou não.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By MEGATRON
      Crie um código em JavaScript que receba 2 palavras, e depois as imprima
      intercaladas. Ex.: “Joao” e “Mary”; a impressão deve ser: “JMoaaroy”. Use uma função
      que receba as duas palavras, e faça a intercalação.
    • By Anonicah
      Olá preciso de ajuda com esse exercício. Montei até a parte de formulário + validação de javascrip no dreamweaver mas buguei com o resto. O que eu fiz:
       

      <html>
      <head>
      <title> Formulário CPF validado com Java Script </title>
          
          <script language="javascript" type="text/javascript">
      function validar() {
      var cpf = form1.cpf.value;
          
      if (cpf == "") {
      alert('Preencha o campo com seu cpf');
      form1.cpf.focus();
      return false;
      }
          
      }
      </script>
          
          
      </head>
      <body>
      <form name="form1" action="enviar.php" method="post">
      CPF:
      <input name="cpf" type="text"><br /><br />
      <input type="submit"  onclick="return validar()">
      </form>
      </body>
      </html>
       
       
      EXERCÍCIO
      Criar um formulário simples em html com um único campo CPF;
      Fazer uma validação em javascript antes de fazer o post;
      Consumir o WS https://bi.vidaclass.com.br/utils para consultar informações do CPF enviado pelo form;
      Do retorno obtido exibir na tela:
      Nome, email, telefone
      Se tem compra em saude: Sim | Não
      Quantas compras: (5) ex.
      Se tem farma: Sim | Não
      Se tem dependente: Sim | Não
      Qtd. de dependentes: (2) ex.

      Obtem o token para consumir os endpoints;
      https://bi.vidaclass.com.br/auth
      {
          "company_id": 1,
          "username": "webmaster@vidaclass.com.br",
          "password": "Teste20170705"
      }
      Endpoint para consultar o CPF
      https://bi.vidaclass.com.br/utils
      {
          "action": 4,
          "key": {
              "cpf": 25383193820
          }
      }
    • By iagomonteiro
      Estou criando um jogo de cartas em web, o jogo é bem estilo HS, e estou tendo problemas para adicionar condições de movimentação no drag and drop. Como vocês podem ver eu tenho uma variável mana, e a movimentação das cartas só seria possível de acordo com ela, porém quando adiciono as condições o D&D acaba nem se movimentando mais, pensei em chamar cada função do d&d dentro de uma condição, mas também não funcionou, alguém pode ajudar?
       
      JS
      // Jogador 1
      const fillplace1 = document.querySelector('#fillplace1');
      const fillplace2 = document.querySelector('#fillplace2');
      const fillplace3 = document.querySelector('#fillplace3');
      var fill;
      const empties = document.querySelectorAll('.empty');
      fillplace1.addEventListener('dragstart', enterstart);
      fillplace2.addEventListener('dragstart', enterstart);
      fillplace3.addEventListener('dragstart', enterstart);
      for (const empty of empties) {
          empty.addEventListener('dragover', dragOver);
          empty.addEventListener('dragenter', dragEnter);
          empty.addEventListener('dragleave', dragLeave);
          empty.addEventListener('drop', dragDrop);
      }
      function enterstart(){
          fill = this;
      }
      function dragOver(e) {
          e.preventDefault();
      }
      function dragEnter(e) {
          e.preventDefault();
          this.className += ' hovered';
      }
      function dragLeave() {
          this.className = 'empty';
      }
      function dragDrop(id) {
          this.className = 'empty';
          this.append(fill);
      }
       
      HTML
      <link rel="stylesheet" href="../css/jogar.css" />
       
      <div id="barraGeneral">
          <img src="../imagens/Campo/barraGeneralalfa.png" id="imggeneral" />
      </div>
       
      <div id="persona">
          <img src="../imagens/Personagem/cucapersonagem.png" id="imgpersonagem" />
      </div>
       
      <button id="btpassar" onclick="cont();">Passar Rodada</button>

      <H1 id="campomana">1</H1>
       
      <!-- Mesa das cartas jogador 1-->
      <div class="empty" id="emptyplace1">
      </div>
      <div class="empty" id="emptyplace2">
      </div>
      <div class="empty" id="emptyplace3">
      </div>
      <div class="empty" id="emptyplace4">
      </div>
      <div class="empty" id="emptyplace5">
      </div>
       
      <!-- Mão do jogador 1 -->
      <div class="emptyhand1">
          <div class="fill" draggable="true" id="fillplace1">
              <img src='../imagens/Sorteio/aa.png' draggable='true'>
          </div>
      </div>
       
      <div class="emptyhand2">
          <div class="fill" draggable="true" id="fillplace2">
              <img src='../imagens/Sorteio/aa2.png' draggable='true'>
          </div>
      </div>
       
      <div class="emptyhand3">
          <div class="fill" draggable="true" id="fillplace3">
              <img src='../imagens/Sorteio/aa2.png' draggable='true'>
          </div>
      </div>
       
    • By Dallas20
      Então pessoal,  estou fazendo um pequeno projeto para me aperfeiçoar em javascript e acabei me deparando com o seguinte problema. Eu queria pegar o valor de um input quando o usuário desse um click em um botão e isso foi simples de fazer, porém ao utilizar conceitos de POO e aplicando classes no javascript não consigo fazer essa ação. Gostaria de saber se isso é possível? E como fazer?
       
      Segue o code HTML:
      <!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <meta name="author" content="Dallas"> <meta http-equiv="refresh" content="1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="../CSS/withdrawal.css" rel="stylesheet"> <script src="../javascript/withdrawal.js"></script> <title>Banco do Brasil</title> </head> <body> <h1>Quanto deseja sacar ?</h1> <input type="number" id="cashInReal"> <button type="button" onclick="alter()"> AQUI</button> </body> </html> code javascript:
      class withdrawal { alter() { alert(document.getElementById('cashInReal').value); } } Desde já muito obrigado.
       
      Att. Dallas
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.