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 Priscila Sena
      Boa noite, tudo bem?

      Me chamo Priscila e estou com um pequeno problema.

      Usamos um sistema que gera template de e-mail marketing aqui na empresa que eu trabalho e o disparo é feito por um sistema de disparo de e-mails, mudaram agora quem dispara e estamos com alguns problemas. As imagens ficam enormes em alguns navegadores (principalmente quando abrem pelo Outlook), o TI, que foi quem fez o template está batendo um pouco a cabeça para tentar resolver o problema para os próximos, o código eu acho que está mais ou menos e creio que o problema seja que ele não reconhece a tag style que puxa pelo td, mas não tenho certeza. 

      Podem me ajudar para algumas melhorias para os próximos? Para evitar quebra?

      Eu vou deixar o código aqui para vocês darem uma olhada, é o código de uma campanha mais antiga.

      "
      <!DOCTYPE html>
      <html>
          <head>
              <meta name="generator" content="">
              <link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,700,700i,900,900i" rel="stylesheet">
              <meta http-equiv="content-type" content="text/html; charset=utf-8">
          </head>
          <body style="font-family: 'Roboto', Myriad-pro, Arial, Helvetica, sans-serif;background-color: #eee;color: #666;">
                              <div class="container 1" style="width: 100%;max-width: 700px;min-width: 320px;margin: 0 auto;background-color: white;">
                              <table cellpadding="0" cellspacing="0" class="imgTopo" style="margin: 30px 0 10px;border-spacing: 0;width: 100%;max-width: 700px;height: auto;">
                      <tr>
                          <td>
                              <a href="https://www.walmart.com.br/" target="_blank" style="text-decoration: none;"><img style="width: 100%;" src="https://template.casavaticano.com.br//templates/testeira_pais_emkt-walmart.png"></a>
                          </td>
                      </tr>
                  </table>
                              <table style="width: 100%;max-width: 700px;min-width: 320px;text-align: center;margin: 0 auto;border-spacing: 0;" cellspacing="0" cellpadding="0">
                      <tbody>
                                              <tr>
                                                                                          <tr>
                                                                     <td valign="bottom" align="centered">
                                                                              <table class="toda_categoria_a_com_x_de_desconto_na_compra_da_y_unidade" style="width: 210px;display: inline-block;margin: 0 auto 30px;border-spacing: 0;" cellspacing="0" cellpadding="0">
          <tbody>
              <tr>
                  <td><table style="margin: 0 auto;border-spacing: 0;" cellspacing="0" cellpadding="0">
          <tbody>
              <tr>
                  <td>
                      <img class="imgBox" src="https://template.casavaticano.com.br//templates/6953202.jpeg" style="max-width: 200px;max-height:200px; top: 0px;vertical-align: top;">
                  </td>
              </tr>
          </tbody>
      </table>
                      <table class="boxRed" style="margin: 0 auto;border-spacing: 0;width: 210px;background-color: #dd1a3a;border-radius: 10px;" cellspacing="0" cellpadding="0">
                          <tbody>
                              <tr>
                                  <td>
                                      <table class="boxYellow" style="margin: 4px auto 0px;border-spacing: 0;width: 200px;background-color: yellow;border-radius: 6px;padding: 0px;" cellspacing="0" cellpadding="0"><tbody><tr>
                  <td><table style="width: 170px;margin: 0 auto;border-spacing: 0;"><tbody><tr>
                  <td class="txtPorcDesc" style="text-transform: uppercase;color: #dd1a3a;font-weight: 700;font-size: 38px;">
                      <table style="margin: 0 auto;border-spacing: 0;" cellspacing="0" cellpadding="0"><tbody><tr><td>
                      <span>50</span><span class="txtPorcSinal" style="text-transform: uppercase;color: #dd1a3a;font-weight: 900;font-size: 20px;">%</span>
                      </td></tr></tbody></table>
                  </td>
                  <td class="txtDescUnid" style="text-transform: uppercase;color: black;font-weight: 900;font-size: 14px;line-height: 100%;position: relative;left: 5px;text-align: left;">
                      <table style="width: 120px;text-align: left;margin: 0 auto;border-spacing: 0;" cellspacing="0" cellpadding="0"><tbody><tr><td>
                      <span>de desconto </span><br><span>na 2ª unidade**</span>          
                      </td></tr></tbody></table>
                  </td>
                  </tr></tbody></table></td>
              </tr></tbody></table>
              <table style="max-width: 95%;height: 50px;margin: 0 auto;border-spacing: 0;" cellspacing="0" cellpadding="0">
                  <tbody>
                      <tr>
                          <td class="txtBoxRed" style="text-transform: uppercase;color: white;font-weight: 400;font-size: 14px;">
                              <span>TODOS OS PAPÉIS HIGIÊNICOS</span>
                          </td>
                      </tr>
                  </tbody>
                  </table>
                      </td>
              </tr>
              </tbody>
              </table>
                  </td>
              </tr>
          </tbody>
      </table>
                                      </td>
                                                                                                                                                      <td valign="bottom" align="centered">
                                                                               <table class="toda_categoria_a_com_x_de_desconto_na_compra_da_y_unidade" style="width: 210px;display: inline-block;margin: 0 auto 30px;border-spacing: 0;" cellspacing="0" cellpadding="0">
          <tbody>
              <tr>
                  <td><table style="margin: 0 auto;border-spacing: 0;" cellspacing="0" cellpadding="0">
          <tbody>
              <tr>
                  <td>
                      <img class="imgBox" src="https://template.casavaticano.com.br//templates/6722944.jpeg" style="max-width: 200px;max-height:200px; top: 0px;vertical-align: top;">
                  </td>
              </tr>
          </tbody>
      </table>
                      <table class="boxRed" style="margin: 0 auto;border-spacing: 0;width: 210px;background-color: #dd1a3a;border-radius: 10px;" cellspacing="0" cellpadding="0">
                          <tbody>
                              <tr>
                                  <td>
                                      <table class="boxYellow" style="margin: 4px auto 0px;border-spacing: 0;width: 200px;background-color: yellow;border-radius: 6px;padding: 0px;" cellspacing="0" cellpadding="0"><tbody><tr>
                  <td><table style="width: 170px;margin: 0 auto;border-spacing: 0;"><tbody><tr>
                  <td class="txtPorcDesc" style="text-transform: uppercase;color: #dd1a3a;font-weight: 700;font-size: 38px;">
                      <table style="margin: 0 auto;border-spacing: 0;" cellspacing="0" cellpadding="0"><tbody><tr><td>
                      <span>50</span><span class="txtPorcSinal" style="text-transform: uppercase;color: #dd1a3a;font-weight: 900;font-size: 20px;">%</span>
                      </td></tr></tbody></table>
                  </td>
                  <td class="txtDescUnid" style="text-transform: uppercase;color: black;font-weight: 900;font-size: 14px;line-height: 100%;position: relative;left: 5px;text-align: left;">
                      <table style="width: 120px;text-align: left;margin: 0 auto;border-spacing: 0;" cellspacing="0" cellpadding="0"><tbody><tr><td>
                      <span>de desconto </span><br><span>na 2ª unidade**</span>          
                      </td></tr></tbody></table>
                  </td>
                  </tr></tbody></table></td>
              </tr></tbody></table>
              <table style="max-width: 95%;height: 50px;margin: 0 auto;border-spacing: 0;" cellspacing="0" cellpadding="0">
                  <tbody>
                      <tr>
                          <td class="txtBoxRed" style="text-transform: uppercase;color: white;font-weight: 400;font-size: 14px;">
                              <span>TODOS AS FRALDAS HUGGIES</span>
                          </td>
                      </tr>
                  </tbody>
                  </table>
                      </td>
              </tr>
              </tbody>
              </table>
                  </td>
              </tr>
          </tbody>
      </table>
                                      </td>
                                                                                                                                                      <tr>
                                                                      <td valign="bottom" align="centered">
                                                                              <table class="toda_categoria_a_com_x_de_desconto_na_compra_da_y_unidade" style="width: 210px;display: inline-block;margin: 0 auto 30px;border-spacing: 0;" cellspacing="0" cellpadding="0">
          <tbody>
              <tr>
                  <td><table style="margin: 0 auto;border-spacing: 0;" cellspacing="0" cellpadding="0">
          <tbody>
              <tr>
                  <td>
                      <img class="imgBox" src="https://template.casavaticano.com.br//templates/8134526.jpeg" style="max-width: 200px;max-height:200px; top: 0px;vertical-align: top;">
                  </td>
              </tr>
          </tbody>
      </table>
                      <table class="boxRed" style="margin: 0 auto;border-spacing: 0;width: 210px;background-color: #dd1a3a;border-radius: 10px;" cellspacing="0" cellpadding="0">
                          <tbody>
                              <tr>
                                  <td>
                                      <table class="boxYellow" style="margin: 4px auto 0px;border-spacing: 0;width: 200px;background-color: yellow;border-radius: 6px;padding: 0px;" cellspacing="0" cellpadding="0"><tbody><tr>
                  <td><table style="width: 170px;margin: 0 auto;border-spacing: 0;"><tbody><tr>
                  <td class="txtPorcDesc" style="text-transform: uppercase;color: #dd1a3a;font-weight: 700;font-size: 38px;">
                      <table style="margin: 0 auto;border-spacing: 0;" cellspacing="0" cellpadding="0"><tbody><tr><td>
                      <span>60</span><span class="txtPorcSinal" style="text-transform: uppercase;color: #dd1a3a;font-weight: 900;font-size: 20px;">%</span>
                      </td></tr></tbody></table>
                  </td>
                  <td class="txtDescUnid" style="text-transform: uppercase;color: black;font-weight: 900;font-size: 14px;line-height: 100%;position: relative;left: 5px;text-align: left;">
                      <table style="width: 120px;text-align: left;margin: 0 auto;border-spacing: 0;" cellspacing="0" cellpadding="0"><tbody><tr><td>
                      <span>de desconto </span><br><span>na 2ª unidade**</span>            
                      </td></tr></tbody></table>
                  </td>
                  </tr></tbody></table></td>
              </tr></tbody></table>
              <table style="max-width: 95%;height: 50px;margin: 0 auto;border-spacing: 0;" cellspacing="0" cellpadding="0">
                  <tbody>
                      <tr>
                          <td class="txtBoxRed" style="text-transform: uppercase;color: white;font-weight: 400;font-size: 14px;">
                              <span>TODOS OS VINHOS OU ESPUMANTES</span>
                          </td>
                      </tr>
                  </tbody>
                  </table>
                      </td>
              </tr>
              </tbody>
              </table>
                  </td>
              </tr>
          </tbody>
      </table>
                                      </td>
                                                                                                                                                      <td valign="bottom" align="centered">
                                                                              <table class="simples" style="width: 210px;display: inline-block;margin: 0 auto 30px;border-spacing: 0;" cellspacing="0" cellpadding="0">
          <tbody>
              <tr>
                  <td>
                      <table style="width: 100%;margin: 0 auto;border-spacing: 0;" cellspacing="0" cellpadding="0">
                          <tbody>
                              <tr>
                                  <td style="vertical-align: bottom;">
                                      <table style="margin: 0 auto;border-spacing: 0;" cellspacing="0" cellpadding="0">
          <tbody>
              <tr>
                  <td>
                      <img class="imgBox" src="https://template.casavaticano.com.br//templates/7281902.jpeg" style="max-width: 200px;max-height:200px; top: 0px;vertical-align: top;">
                  </td>
              </tr>
          </tbody>
      </table>
       
                                  </td>
                              </tr>
                          </tbody>
                      </table>
                      <table style="margin: 0 auto;border-spacing: 0;" cellspacing="0" cellpadding="0">
                          <tbody>
                              <tr>
                                  <td style="line-height: 80%;text-align: center;" width="210px" height="70px">
                                          <span class="txtInfo" style="text-transform: uppercase;">
                                          <span class="txtNome" style="font-weight: 900;color: black;font-size: 9pt;">Café Pilão</span><br>
                                          <span class="txtDesc" style="font-weight: 400;font-size: 8pt;">Extraforte Almofada 500g</span>
                                      </span>
                                  </td>
                              </tr>
                          </tbody>
                      </table>
                                      <table style="margin: 0 auto;border-spacing: 0;" cellspacing="0" cellpadding="0">
          <tbody>
              <tr>
                  <td class="txtPreco" style="min-width: 130px;padding: 4px 0;text-align: center;border-radius: 6px;font-weight: 900;line-height: 1;background-color: #dd1a3a;">
                      <a class="btnPreco" href="http://www.walmart.com.br/" style="text-decoration: none;padding: 20px 20px 0;">
                          <span class="txtCurrency" style="color: yellow;">R$</span> 
                          <span class="txtInteger" style="color: yellow;font-size: 32pt;">7</span>
                          <span class="txtCents" style="color: yellow;yellow;font-size: 16pt">,44</span>
                      </a>
                  </td>
              </tr>
          </tbody>
      </table>
       
                  </td>
              </tr>
          </tbody>
      </table>
                                      </td>
                                                                                                                                                      <tr>
                                                                      <td valign="bottom" align="centered">
                                                                              <table class="simples" style="width: 210px;display: inline-block;margin: 0 auto 30px;border-spacing: 0;" cellspacing="0" cellpadding="0">
          <tbody>
              <tr>
                  <td>
                      <table style="width: 100%;margin: 0 auto;border-spacing: 0;" cellspacing="0" cellpadding="0">
                          <tbody>
                              <tr>
                                  <td style="vertical-align: bottom;">
                                      <table style="margin: 0 auto;border-spacing: 0;" cellspacing="0" cellpadding="0">
          <tbody>
              <tr>
                  <td>
                      <img class="imgBox" src="https://template.casavaticano.com.br//templates/7465255.jpeg" style="max-width: 200px;max-height:200px; top: 0px;vertical-align: top;">
                  </td>
              </tr>
          </tbody>
      </table>
       
                                  </td>
                              </tr>
                          </tbody>
                      </table>
                      <table style="margin: 0 auto;border-spacing: 0;" cellspacing="0" cellpadding="0">
                          <tbody>
                              <tr>
                                  <td style="line-height: 80%;text-align: center;" width="210px" height="70px">
                                          <span class="txtInfo" style="text-transform: uppercase;">
                                          <span class="txtNome" style="font-weight: 900;color: black;font-size: 9pt;">Cerveja Brahma</span><br>
                                          <span class="txtDesc" style="font-weight: 400;font-size: 8pt;">Lata 350ml cada Pack com 18 unidades</span>
                                      </span>
                                  </td>
                              </tr>
                          </tbody>
                      </table>
                                      <table style="margin: 0 auto;border-spacing: 0;" cellspacing="0" cellpadding="0">
          <tbody>
              <tr>
                  <td class="txtPreco" style="min-width: 130px;padding: 4px 0;text-align: center;border-radius: 6px;font-weight: 900;line-height: 1;background-color: #dd1a3a;">
                      <a class="btnPreco" href="http://www.walmart.com.br/" style="text-decoration: none;padding: 20px 20px 0;">
                          <span class="txtCurrency" style="color: yellow;">R$</span> 
                          <span class="txtInteger" style="color: yellow;font-size: 32pt;">34</span>
                          <span class="txtCents" style="color: yellow;yellow;font-size: 16pt">,02</span>
                      </a>
                  </td>
              </tr>
          </tbody>
      </table>
       
                  </td>
              </tr>
          </tbody>
      </table>
                                      </td>
                                                                                                                                                      <td valign="bottom" align="centered">
                                                                              <table class="parcelado" style="width: 320px;display: inline-block;margin: 0 auto 30px;border-spacing: 0;" cellspacing="0" cellpadding="0">
          <tbody>
              <tr>
                  <td>
                                      <table style="margin: 0 auto;border-spacing: 0;" cellspacing="0" cellpadding="0">
          <tbody>
              <tr>
                  <td>
                      <img class="imgBox" src="https://template.casavaticano.com.br//templates/8931023.jpeg" style="max-width: 200px;max-height:200px; top: 0px;vertical-align: top;">
                  </td>
              </tr>
          </tbody>
      </table>
       
                                      <table style="width: 100%;height: 70px;margin-bottom: 2px;margin: 0 auto;border-spacing: 0;" cellspacing="0" cellpadding="0">
                          <tbody>
                              <tr>
                                  <td style="vertical-align: bottom;">
                                      <table style="text-align: left;width: 110px;margin: 0 auto 4px;border-spacing: 0;" cellspacing="0" cellpadding="0">
                                          <tbody>
                                              <tr>
                                                  <td style="line-height: 80%;">
                                                      <span class="txtInfo">
                                                          <span class="txtNome" style="font-weight: 900;color: black;font-size: 9pt;line-height: 80%;text-transform: uppercase;">Smart TV 49&quot; LG</span>
                                                          <br>
                                                          <span class="txtDesc" style="font-weight: 400;font-size: 8pt;line-height: 80%;">Com acesso à internet</span>
                                                      </span>
                                                  </td>
                                              </tr>
                                          </tbody>
                                      </table>
                                  </td>
                                  <td style="vertical-align: bottom;">
                                                                      <table style="text-align: left;width: 190px;font-weight: 900;margin: 0 auto;border-spacing: 0;" cellspacing="0" cellpadding="0">
                                          <tbody>
                                              <tr>
                                                  <td>
                                                      <table style="width: 190px;text-align: left;margin: 0 auto;border-spacing: 0;" cellspacing="0" cellpadding="0">
                                                          <tbody>
                                                              <tr>
                                                                  <td>
                                                                      
                                                                      <table style="margin: 0 auto;margin-right: 10px;border-spacing: 0;">
                                                                          <tbody>
                                                                              <tr>
                                                                                  <td style="line-height:1.1;">
                                                                                      <table style="margin: 0 auto;border-spacing: 0;text-align: right;" width="32px" cellspacing="0" cellpadding="0">
                                                                                          <tbody>
                                                                                              <tr>
                                                                                                  <td>
                                                                                                      <span style="color:#dd1a3a;font-weight: 700;font-size: 7pt;">À vista</span>
                                                                                                      <span style="color: #dd1a3a;font-size: 14pt;">R$</span>
                                                                                                  </td>
                                                                                              </tr>
                                                                                          </tbody>
                                                                                      </table>
                                                                                  </td>
                                                                                  
                                                                                  <td>
                                                                                      <table style="margin: 0 auto;margin-right: 0px;border-spacing: 0;">
                                                                                          <tbody>
                                                                                              <tr>
                                                                                                  <td>
                                                                                                      <span style="color: #dd1a3a;font-size: 30pt;">2.199</span>
                                                                                                  </td>
                                                                                              </tr>
                                                                                          </tbody>
                                                                                      </table>
                                                                                  </td>
                                                                                  <td style="text-align: right;line-height: 0.7">
                                                                                      <span style="color: #dd1a3a;font-size: 18pt;">,00</span>
                                                                                      <span style="color:#dd1a3a;font-weight: 700;font-size: 7pt;">cada</span>
                                                                                  </td>
                                                                                  
                                                                              </tr>
                                                                          </tbody>
                                                                      </table>
                                                                      
                                                                  </td>
                                                              </tr>
                                                          </tbody>
                                                      </table>
                                                  </td>
                                              </tr>
                                          </tbody>
                                      </table>
                                  </td>
                              </tr>
                          </tbody>
                      </table>
                                      <table style="text-align: left;width: 320px;height: 60px;font-weight: 900;border-radius: 6px;border-style: solid;border-width: 1px;background-color: #29417f;margin: 0 auto;border-spacing: 0;" cellspacing="0" cellpadding="0">
                          <tbody>
                              <tr>
                                  <td>
                                      <table style="width: 320px;margin: 0 auto;border-spacing: 0;" cellspacing="0" cellpadding="0">
                                          <tbody>
                                              <tr>
                                                  <td>
                                                      <table style="display: inline-block;width: 100px;line-height: 23px;margin-left: 5px;margin: 0 auto;border-spacing: 0;" cellspacing="0" cellpadding="0">
                                                          <tbody>
                                                              <tr>
                                                                  <td>
                                                                      <table style="margin: 0 auto;border-spacing: 0;margin-left: 5px;" cellspacing="0" cellpadding="0">
                                                                          <tbody>
                                                                              <tr>
                                                                                  <td style="width:100px;">
                                                                                      <span style="font-size: 6pt;color: white;text-transform: uppercase;">nos nossos cartões</span>
                                                                                  </td>
                                                                              </tr>
                                                                          </tbody>
                                                                      </table>
                                                                  </td>
                                                              </tr>
                                                              <tr>
                                                                  <td>
                                                                      <table style="margin: 0 auto;border-spacing: 0;" cellspacing="0" cellpadding="0">
                                                                          <tbody>
                                                                              <tr>
                                                                                  <td style="width:100px;">
                                                                                      <img style="width: 50px;margin-left: 5px;" src="http://template.casavaticano.com.br/resources/cartoes.png">
                                                                                  </td>
                                                                              </tr>
                                                                          </tbody>
                                                                      </table>
                                                                  </td>
                                                              </tr>
                                                          </tbody>
                                                      </table>
                                                                                                      <table style="display: inline-block;width: 200px;margin: 0 auto;border-spacing: 0;" cellspacing="0" cellpadding="0">
                                                          <tbody>
                                                              <tr>
                                                                  <td>
                                                                      <table style="width: 200px;color: yellow;margin: 0 auto;border-spacing: 0;" cellspacing="0" cellpadding="0">
                                                                          <tbody>
                                                                              <tr>
                                                                                  <td>
                                                                                      
                                                                                      <table style="margin: 0 auto;margin-right: 0px;border-spacing: 0;">
                                                                                          <tbody>
                                                                                              <tr>
                                                                                                  <td style="line-height: 1;">
                                                                                                      <table style="text-align: right;margin: 0 auto;border-spacing: 0;" width="20px" cellspacing="0" cellpadding="0">
                                                                                                          <tbody>
                                                                                                              <tr>
                                                                                                                  <td>
                                                                                                                      <span style="font-size: 14pt;">R$</span>
                                                                                                                  </td>
                                                                                                              </tr>
                                                                                                              <tr>
                                                                                                                  <td style="color:black;">
                                                                                                                      <span style="font-size: 18pt;"></span>
                                                                                                                      <span style="font-size: 18pt;color:white">15X</span>
                                                                                                                  </td>
                                                                                                              </tr>
                                                                                                          </tbody>
                                                                                                      </table>
                                                                                                  </td>
                                                                                                  
                                                                                                  <td>
                                                                                                      <table style="margin: 0 auto;margin-right: 0px;border-spacing: 0;">
                                                                                                          <tbody>
                                                                                                              <tr>
                                                                                                                  <td>
                                                                                                                      <span style="font-size: 38pt;">146</span>
                                                                                                                  </td>
                                                                                                              </tr>
                                                                                                          </tbody>
                                                                                                      </table>
                                                                                                  </td>
                                                                                                  <td style="margin: 0 auto;border-spacing: 0;line-height: 0.8;text-align: center;">
                                                                                                      <span style="font-size: 20pt;">,60</span>
                                                                                                      <br>
                                                                                                      <span style="font-weight: 700;font-size: 8pt;color: white;">sem juros</span>
                                                                                                  </td>
                                                                                              </tr>
                                                                                          </tbody>
                                                                                      </table>
                                                                                      
                                                                                  </td>
                                                                              </tr>
                                                                          </tbody>
                                                                      </table>
                                                                  </td>
                                                              </tr>
                                                          </tbody>
                                                      </table>
                                                  </td>
                                              </tr>
                                          </tbody>
                                      </table>
                                  </td>
                              </tr>
                          </tbody>
                      </table>
                  </td>
              </tr>
          </tbody>
      </table>

                                      </td>
                                                                                                              </tr>
                      </tbody>
                  </table>
                  
                            <table cellpadding="0" cellspacing="0" style="width: 100%;height: 40px;margin: 0 0 10px;text-align: center;border-spacing: 0;">
                      <tr>
                          <td>
                              <a class="btnConfira" href="https://www.walmartbrasil.com.br" target="_blank" style="text-decoration: none;text-transform: uppercase;font-size: 10pt;font-weight: 900;color: #007DC3;background-color: #f7c02b;padding: 12px 32px;border-radius: 24px;letter-spacing: 1px;">
                              Confira mais ofertas &gt;</a>
                          </td>
                      </tr>
                  </table>   
                  <table cellpadding="0" cellspacing="0" style="width: 100%;height: 20px;margin: 2 0 0 10px;text-align: center;border-spacing: 0;">
                      <tr>
                          <td>
                   <img style=" width: 500px; margin:0;"src="https://template.casavaticano.com.br/TEXTOS%20LEGAIS/LT.BEBIDAS-2.png">
                  </table>   
                  <div style="height: 16px"><table style="margin: 0 auto;border-spacing: 0;"><tr>
                  <td style=";display: inline-block;margin: 0;border-spacing: 0;border-radius: 6px 0 0 6px;padding: 14px 2px 8px 10px;background-color: #f7c02b;"><span style="color:#dd1a3a;font-style: italic;font-weight:900;font-size: 14pt;margin-right: 6px;line-height: 1;">Passa no</span></td>
                  <td style=";display: inline-block;margin: 0;border-spacing: 0;border-radius: 0 6px 6px 0;background-color: #027dc2;">
                      <img style="height: 35px;" src="https://template.casavaticano.com.br/bandeiras/WALMART.png">
                  </td>
                  </tr></table></div>
              <div style="width: 100%;max-width:700px;height: 12px;background-color: #f7c02b;margin: 0;border-spacing: 0;">
              </div>
                                <table cellpadding="0" cellspacing="0" class="txtBompreco" style="margin: 0 0 0;border-spacing: 0;width: 100%;height: 64px;font-size: 12pt;font-weight: 700;background-color: #007cc9;letter-spacing: 1px;">
          <tr>    
              <td>
                 
                  <table cellpadding="0" cellspacing="0" style="margin: 15px auto;border-spacing: 0;">
                      <tr>
                          <td>
                          </td>
                          <td align="center"><img style="height:40px;margin: 0 10px;" src="https://template.casavaticano.com.br/icons/Localizacao-novo.png"></td>
                                              <td>
                              <a href="https://tabloide.walmartbrasil.com.br/" target="_blank" style="text-decoration: none;"><span style="color: #f7c02b; margin-top:" >CLIQUE AQUI</span> <span style="color: white;">E VÁ ATÉ A LOJA MAIS PRÓXIMA</span></a>
                      </td>
                  </tr>
              </table>
                      <table cellpadding="0" cellspacing="0" class="txtSigaFacebook" style="margin: 0;border-spacing: 0;width: 100%;height: 74px;font-size: 12pt;font-weight: 700;background-color: #49aee9;letter-spacing: 1px;color: white;">
                  <tr>
                      <td>
                          <table cellpadding="0" cellspacing="0" style="margin: 0 auto;border-spacing: 0;">
                              <tr>
                                  <td><span>Siga a gente nas redes sociais:</span><img src=""></td>
                                                              <td align="center">
                                      <a href="https://www.facebook.com/walmartbrasil/" target="_blank" style="text-decoration: none;"><img style="height:36px;margin: 0 10px;" src="https://template.casavaticano.com.br/icons/facebook-novo.png"></a>
                                       <a href="https://www.instagram.com/walmartbrasil" target="_blank" style="text-decoration: none;"><img style="height:36px;margin: 0 10px;" src="https://template.casavaticano.com.br/icons/instagram-novo.png"></a>
                                       <a href="https://www.youtube.com/user/walmartinstitucional" target="_blank" style="text-decoration: none;"><img style="height:36px;margin: 0 10px;" src="https://template.casavaticano.com.br/icons/youtube-novo.png"></a>
                                  </td>
                                                          </tr>
                          </table>
                      </td>
                  </tr>
              </table>
                  </td>
              </div>
      </table>
      <table style="width: 100%;max-width: 700px;margin: 20px auto;padding: 0 30px;text-align: center;font-size: 9pt;line-height: 1.2;border-spacing: 0;" cellspacing="0" cellpadding="0">
          <tbody>
              <tr>
                  <td><pre>Material vigente para 09/08/2019 ou enquanto durarem os estoques. Nem
      todos os produtos estão disponíveis nas lojas Walmart, podendo variar de acordo
      com o estoque ou sortimento de cada loja. Consulte a loja mais próxima. Para
      melhor atender nossos clientes, não vendemos por atacado e reservamo-nos o
      direito de limitar a quantidade de 12un./kg por cliente dos produtos anunciados.
      Nas lojas participantes garantimos a quantidade mínima de 12un./kg por loja dos
      produtos anunciados na data de início do anúncio. Fotos meramente ilustrativas.</span></td>
              </tr>
          </tbody>
      </table>
                              </body>
      </html>"

      Obrigada
    • By Arthur Ritter
      Olá a todos do fórum, sou novo aqui.
       
      Então, comecei recentemente a estudar sobre HTML e em um dos exercícios que estou fazendo é criar type=radio para cartões (Visa, Master). E pelo que estou aprendendo, o type=radio cria um botão de escolha única, não sendo permitido mais de uma escolha, mas não é o que esta acontendo. Segue abaixo o código:
       
      <html>
      <head>
      <title>Campo Senha</title>
      </head>
      <body>
      <form action="email@email.com" method="get">
      <p><font face="Calibri">Nome: <input type=text name="Nome" size="25" maxlenght="50"></p>
      <p>Nº do Cartão de credito <input type=text name="cartao" size="16"></p>
      <p>Senha: <input type=password name="senha" size="6"></p>
      <p>Selecione a bandeira do cartão de crédito:<br>
      <input type=radio name="visa" checked>Visa<br>
      <input type=radio name="master">Mastercard<br>
      </font></p>
      </form>
      </body>
      </html>
       
       

       
      Desde já agradeço a todos pela ajuda.
       
       
      Edit: O problema foi resolvido. Eu estava esquecendo de por o VALUE.
      <input type=radio name="cartao" value="cartao" checked>Visa<br>
      <input type=radio name="cartao" value="cartao">Mastercard<br></p>
    • By proflupin
      Estou com a seguinte dificuldade, possuo um <a> que busca uma id numa tabela do banco de dados, conforme abaixo:
       
      <a href="self_service.php?id=<?php echo $row_produto['id_categoria_chamado']?>" class="btn btn-primary"data-toggle="collapse" data-target="#subcategoria" aria-expanded="false" aria-controls="collapseExample">Visitar</a> A consulta é realizada, pois vejo que um novo link é mostrado no rodapé da página:

       
      Esta página self_service.php mostrada acima, é minha página principal, onde tudo é trabalhado. Se por exemplo eu mudar para outro arquivo php, teste.php por exemplo, uma nova página é aberta e consigo exibir os resultados normalmente.
       
      O problema é: quero abrir este ID na mesma página, dentro de um collapse. Exemplo:
       
      Cliquei em visitar na categoria Totvs...
       
       
      Um collapse abre-se logo abaixo:

       
      O que não consigo fazer é resgatar o ID passado pelo botão VISITAR em meu collapse, se eu tenter o $_GET['id'], não vai retornar nenhum valor, pois a URL não muda quando trabalhamos com collapse.
    • By lamorim1904
      Caros, boa tarde!
       
      Primeiramente me desculpem se estou abrindo tópico repetido ou de maneira errada, procurei aqui no fórum mas talvez a forma que estou procurando ou a minha falta de conhecimento sobre a área não está me permitindo encontrar a solução.
      Não entendo quase NADA de programação e estou realizando um projeto que me cobra um pouco neste sentido, vou tentar explicar:
       
      Estou criando um hotspot inteligente onde o próprio cliente se cadastra, ele preenche um formulário e posterior a isso eu libero a conexão dele.
      O meu problema está depois que ele cria o seu cadastro, as informações vão para meu banco de dados mas nao retornam ao cliente, portanto a conexão não é liberada.
       
      Eu encontrei uma solução mas não estou conseguindo usa-la da maneira que gostaria, após usuário se cadastrar, eu direciono ele para a pagina de login e senha e caso ele digite os dados que ele acabou de preencher, a conexão é liberada. 
       
      Eu gostaria de automatizar esse processo, identificar a variavel X que eu usei para escrever no meu banco de dados e inseri-la no campo de usuario e senha e se possivel submeter a informação para o usuario nem ver essa tela de login e senha. Sabem me dizer se tem como?
       
      Para ficar mais claro, vou postar os codigos;
       
      <NESTE PONTO O CLIENTE JA PREENCHEU O CADASTRO E EU USO AS VARIAVEIS PARA ESCREVER NO MEU BANCO DE DADOS>
      <EU GOSTARIA DE USAR A VARIAVEL $MOBILE COMO USUARIO E SENHA NA PARTE DE JAVA ABAIXO>

      $sql = "INSERT INTO radcheck (UserName, Attribute, op, Value) VALUES ";
      $sql .= "('$MOBILE', 'Cleartext-Password', ':=', '$MOBILE')";
      mysqli_query($strcon,$sql) or die("Erro ao tentar cadastrar registro");

      $sql = "INSERT INTO radreply (UserName, Attribute, op, Value) VALUES ";
      $sql .= "('$MOBILE', 'Mikrotik-Rate-Limit', ':=', '512k/1024k')";
      mysqli_query($strcon,$sql) or die("Erro ao tentar cadastrar registro");
      mysqli_close($strcon);
      echo "Cliente cadastrado com sucesso!";
      ?>
      <html>
      <head><title>...</title></head>
      <body>
      $(if chap-id)
      <noscript>
      <center><b>JavaScript required. Enable JavaScript to continue.</b></center>
      </noscript>
      $(endif)
      <center>If you are not redirected in a few seconds, click 'continue' below<br>
      <form name="redirect" action="http://201.82.110.3/mkloginteste2.php" method="post">
      <input type="hidden" name="mac" value="$(mac)">
      <input type="hidden" name="ip" value="$(ip)">
      <input type="hidden" name="username" value="$MOBILE">
      <input type="hidden" name="link-login" value="$(link-login)">
      <input type="hidden" name="link-orig" value="$(link-orig)">
      <input type="hidden" name="error" value="$(error)">
      <input type="hidden" name="chap-id" value="$(chap-id)">
      <input type="hidden" name="chap-challenge" value="$(chap-challenge)">
      <input type="hidden" name="link-login-only" value="$(link-login-only)">
      <input type="hidden" name="link-orig-esc" value="$(link-orig-esc)">
      <input type="hidden" name="mac-esc" value="$(mac-esc)">
      <input type="submit" value="continue">
      </form>
      <script language="JavaScript">
      <!--
         document.redirect.submit();
      //-->
      </script></center>
      </body>
      </html>
×

Important Information

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