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 thailangodoy
      Boa tarde amigos,
       
      Quero copiar o efeito hover, que aparece na foto de perfil do login, o qual consiste em uma borda externa, que não influencia no tamanho.
       
      Tentei atribuiu o box-sizing:border-box; // ele diminui a imagem e traz a borda para dentro.
       


    • By leandro123456789
      <div id="direito">
             
             <?php 
                      
                 $link = filter_input(INPUT_GET, 'link');
                 
                 $pag[1] = "../admin/home.php";
                 $pag[2] = "../admin/classes/Lista.php";
                 
              
              
                 if(!empty($link)){
                     
                     if(file_exists($pag[$link]))
                        
                      {
                         include $pag[$link];
                      
                      }
                        
                      else
                      { 
                         
                          include "home.php";
                      
                      }
                     
                 }else{
                     include "home.php";
                 }
              
              ?>
             
          </div>
       
       
      Estou tentando colocar a paginação do meu banco em $ pag [2] na minha página: ../admin/classes/Lista.php tem o seguinte código de paginação:

      <? php
          
          include_once ("../ admin / classes / ClassConexao.php");
          
          
          // verifique a página atual se informado no URL, caso contrário, ela será atribuída como 1ª página
          $ pagina = (isset ($ _ GET ['link = 2']))? $ _GET ['link = 2']: 1;
       
          // seleciona todos os itens da tabela
          $ cmd = "selecione * da categoria";
          $ produtos = mysqli_query ($ conn, $ cmd);
          
          // conta o total de itens
          $ total = mysqli_num_rows ($ produtos);
       
          // seta o número de itens por página, neste caso, 2 itens
          $ registros = 2;
       
          // calcula o número de páginas arredondando o resultado
          $ numPaginas = teto ($ total / $ registros);
       
          // variável para calcular o início da visualização com base na página atual
          $ inicio = ($ registros * $ pagina) - $ registros;
       
          // seleciona itens por página
          $ cmd = "selecione * da categoria limite $ inicio, $ registros";
          $ produtos = mysqli_query ($ conn, $ cmd);
          $ total = mysqli_num_rows ($ produtos);
           
          // exibe produtos selecionados
          while ($ produto = mysqli_fetch_array ($ produtos)) {
              echo $ produto ['id_categoria']. "-";
              echo $ produto ['categoria']. "-";
              echo $ produto ['ativo_categoria']. "<br />";
          }

      // Não sei como consertar esta parte para mostrar a paginação nesse $ pag [2] = "../admin/classes/Lista.php";
           
          // exibe paginação
          para ($ i = 1; $ i <$ numPaginas + 1; $ i ++) {
              
             echo "<a href='?pagina=$i'>". $ i. "</a>";
          }
                  
      ?>
      Meu menu fica assim:

      <div id = "sessao"> Categoria </div>
         <ul>
             
            
             <li> <a href="index.php?link=3"> Cadastro </a> </li>
             <li> <a href="index.php?link=2"> Listar / Editar </a> </li>
         
        </ul>
    • By Camilavip
      Oi, tenho um flip para virar a imagem, bem pequeno e funcional, mas ao colocar um rodapé, ele simplesmente invade esse rodapé
      Creio que tem haver alguma coisa com o position: absolute, mas não entendo nada de css
       
      <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"> </head> <body> <!-- CSS DO FLIP --> <style> .flip-container:hover .flipper{ transform: rotateY(180deg); /* se quiser uma animação na vertical, troque por rotateX(180deg) */ } .flipper{ width: 100%; height: 100%; transition: transform 0.8s; transform-style: preserve-3d; } .front, .back{ position: absolute; width: 100%; height: 100%; } .back{ transform: rotateY(180deg); } </style> <center> <div class="flip-container"> <div class="flipper"> <div class="front"> <img src="https://d3mwk3f7r8fv9u.cloudfront.net/images/zohO24tyN2WB8etR3nhZPvhf.png" /> </div> <div class="back"> <img src="https://d3mwk3f7r8fv9u.cloudfront.net/images/XkAkTVqVPbLB3cK5njqdun66.png" /> </div> </div> </div> <!-- AQUI COMEÇA O RODAPÉ --> <!-- CSS DO RODAPÉ --> <style> @import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap'); *{ margin: 0; padding: 0; color: #d9d9d9; box-sizing: border-box; font-family: 'Poppins', sans-serif; } .content1{ position: relative; margin: 130px auto; text-align: center; padding: 0 20px; } .content1 .text{ font-size: 2.5rem; font-weight: 600; color: #202020; } .content1 .p{ font-size: 2.1875rem; font-weight: 600; color: #202020; } footer{ position: fixed; bottom: 0px; width: 100%; background: #111; } .main-content{ display: flex; } .main-content .box{ flex-basis: 50%; padding: 10px 20px; } .box h2{ font-size: 1.125rem; font-weight: 600; text-transform: uppercase; } .box .content{ margin: 20px 0 0 0; position: relative; } .box .content:before{ position: absolute; content: ''; top: -10px; height: 2px; width: 100%; background: #1a1a1a; } .box .content:after{ position: absolute; content: ''; height: 2px; width: 15%; background: #f12020; top: -10px; } .left .content p{ text-align: justify; } .left .content .social{ margin: 20px 0 0 0; } .left .content .social a{ padding: 0 2px; } .left .content .social a span{ height: 40px; width: 40px; background: #1a1a1a; line-height: 40px; text-align: center; font-size: 18px; border-radius: 5px; transition: 0.3s; } .left .content .social a span:hover{ background: #f12020; } .center .content .fas{ font-size: 1.4375rem; background: #1a1a1a; height: 45px; width: 45px; line-height: 45px; text-align: center; border-radius: 50%; transition: 0.3s; cursor: pointer; } .center .content .fas:hover{ background: #f12020; } .center .content .text{ font-size: 1.0625rem; font-weight: 500; padding-left: 10px; } .center .content .phone{ margin: 15px 0; } .right form .text{ font-size: 1.0625rem; margin-bottom: 2px; color: #656565; } .right form .msg{ margin-top: 10px; } .right form input, .right form .msgForm{ width: 100%; font-size: 1.0625rem; background: #151515; padding-left: 10px; border: 1px solid #222222; } .right form input:focus, .right form .msgForm:focus{ outline-color: #3498db; } .right form input{ height: 35px; } .right form .btn{ margin-top: 10px; } .right form .btn button{ height: 40px; width: 100%; border: none; outline: none; background: #f12020; font-size: 1.0625rem; font-weight: 500; cursor: pointer; transition: .3s; } .right form .btn button:hover{ background: #000; } .bottom center{ padding: 5px; font-size: 0.9375rem; background: #151515; } .bottom center span{ color: #656565; } .bottom center a{ color: #f12020; text-decoration: none; } .bottom center a:hover{ text-decoration: underline; } @media screen and (max-width: 900px) { footer{ position: relative; bottom: 0px; } .main-content{ flex-wrap: wrap; flex-direction: column; } .main-content .box{ margin: 5px 0; } } </style> <div class="content1"> <div class="text"> Fully Responsive Footer Section</div> <div class="p"> HTML and CSS (Flexbox)</div> </div> <footer> <div class="main-content"> <div class="left box"> <h2> About us</h2> <div class="content"> <p> CodinNepal is a YouTube channel where you can learn web designing, web development, ui/ux designing, html css tutorial, hover animation and effects, javascript and jquery tutorial and related so on.</p> <div class="social"> <a href="https://facebook.com/coding.np"><span class="fab fa-facebook-f"></span></a> <a href="#"><span class="fab fa-twitter"></span></a> <a href="https://instagram.com/coding.np"><span class="fab fa-instagram"></span></a> <a href="https://youtube.com/c/codingnepal"><span class="fab fa-youtube"></span></a> </div> </div> </div> <div class="center box"> <h2> Address</h2> <div class="content"> <div class="place"> <span class="fas fa-map-marker-alt"></span> <span class="text">Birendranagar, Surkhet</span> </div> <div class="phone"> <span class="fas fa-phone-alt"></span> <span class="text">+089-765432100</span> </div> <div class="email"> <span class="fas fa-envelope"></span> <span class="text">abc@example.com</span> </div> </div> </div> <div class="right box"> <h2> Contact us</h2> <div class="content"> <form action="#"> <div class="email"> <div class="text"> Email *</div> <input type="email" required> </div> <div class="msg"> <div class="text"> Message *</div> <!-- NOTE: Due to more textarea tag I got an error. So I changed the textarea name to changeit. Please change that changeit name to textarea --> <changeit id=".msgForm" rows="2" cols="25" required></changeit> <!-- replace this changeit name to textarea --> <br /> <div class="btn"> <button type="submit">Send</button> </div> <div class="bottom"> <center> <span class="credit">Created By <a href="https://youtube.com/c/codingnepal">CodingNepal</a> | </span> <span class="far fa-copyright"></span> 2020 All rights reserved. </center> </div> </body> </html>  
    • By Kemily
      Eu preciso de ajuda para poder publicar meu site.
      O professor mandou faze-lo em HTML e CSS e eu fiz mas eu não sei postar e manter as imagens.
      Quando consegui postar as imagens não foram junto.
      O link q consegui fazer sem as imagens ficou assim:
       
      http://hyundai.droppages.com/
×

Important Information

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