I would like help in my code to make the "content" columns of the footer responsive. Here is the code below:
*{
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
margin:0;
padding: 0;
}
*.*:before, *:after{
box-sizing: border-box;
font-family: sans-serif;
font-size: 14px;
line-height: 1.5;
}
body,html{
width:100%;
height:100%;
}
footer{
bottom: 0px;
width: 100%;
color: #000000;
height: 200px;
margin-bottom: 20px;
background-color:#000;
color:#fff;
clear: both;
padding: 40px;
position:absolute;
z-index: 10;
}
footer:after{
content: '<footer>
<div class="endereco">
<h1>Nosso endereço:</h1>
<br>
<br>
<h1>Rua blalal, 132 - Irajá</h1>
<h2>Rio de Janeiro Cidade - RJ.</h2>
<h2>Cep: 21300-630</h2>
</div>
<div class="telefone">
<h1>Consulte-nos:</h1>
<br>
<br>
<h2>Telefone: (21)9999-9999</h2>
<h2>Horário de Atendimento</h2>
<h2>de Seg a Sexta: 08:00 as 17:00</h2>
</div>
<div class="redes-sociais">
<td><h1>Fale conosco nas Redes Sociais</h1></td>
<br>
<br>
<a href="#"><img src="imagens/facebook.png"></a>
<a href="#"><img src="imagens/twitter.png"></a>
<a href="#"><img src="imagens/youtube.png"></a>
<a href="#"><img src="imagens/google.png"></a>
</div>
<div>
<br>
<br>
<h1>Email:</h1>
<h2>[email protected]</h2>
</div>
</footer>
a9 Infogyba Soluções em Ti ';
position: absolute;
width: 100%;
color: #8c8c96;
line-height: 40px;
font-size:1em;
font-weight:600;
font-family:'Arial',sans-serif;
text-align: left;
bottom:0;
display: block;
}
.endereco,.telefone{
float:left;
width: 33.33%;
border-right: 1px;
margin-right:15px;
border-right-style: outset;
}
.redes sociais{
float:left;
width: 33.33%;
}
@media only screen and (max-width: 480px) {
.endereco, .telefone, .redes-sociais {
float: none;
width: 100%;
}
}
footer h1,h2{
font-size:1em;
font-weight:600;
font-family: 'Arial',sans-serif;
text-align:center;
display:inline-block;
}
footer .redes-sociais a:hover{
display: inline-block;
position: relative;
-webkit-animation-name: rotacao; /* Chrome, Safari, Opera (nome da animação)*/
-webkit-animation-duration: 2s; /* Chrome, Safari, Opera (Duração da animação)*/
animation-name: rotacao; /* nome da animação */
animation-duration: 2s; /* Duração da animação */
}
@keyframes rotacao {
from {transform: rotate(1deg);}
to {transform: rotate(360deg);}
}
@media screen and(max-width:768){
footer{
padding-bottom: 3em;
}
}*{
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
margin:0;
padding: 0;
}
*.*:before, *:after{
box-sizing: border-box;
font-family: sans-serif;
font-size: 14px;
line-height: 1.5;
}
body,html{
width:100%;
height:100%;
}
footer{
bottom: 0px;
width: 100%;
color: #000000;
height: 200px;
margin-bottom: 20px;
background-color:#000;
color:#fff;
clear: both;
padding: 40px;
position:absolute;
z-index: 10;
}
footer:after{
content: '<footer>
<div class="endereco">
<h1>Nosso endereço:</h1>
<br>
<br>
<h1>Rua blalal, 132 - Irajá</h1>
<h2>Rio de Janeiro Cidade - RJ.</h2>
<h2>Cep: 21300-630</h2>
</div>
<div class="telefone">
<h1>Consulte-nos:</h1>
<br>
<br>
<h2>Telefone: (21)9999-9999</h2>
<h2>Horário de Atendimento</h2>
<h2>de Seg a Sexta: 08:00 as 17:00</h2>
</div>
<div class="redes-sociais">
<td><h1>Fale conosco nas Redes Sociais</h1></td>
<br>
<br>
<a href="#"><img src="imagens/facebook.png"></a>
<a href="#"><img src="imagens/twitter.png"></a>
<a href="#"><img src="imagens/youtube.png"></a>
<a href="#"><img src="imagens/google.png"></a>
</div>
<div>
<br>
<br>
<h1>Email:</h1>
<h2>[email protected]</h2>
</div>
</footer>
a9 Infogyba Soluções em Ti ';
position: absolute;
width: 100%;
color: #8c8c96;
line-height: 40px;
font-size:1em;
font-weight:600;
font-family:'Arial',sans-serif;
text-align: left;
bottom:0;
display: block;
}
.endereco,.telefone{
float:left;
width: 33.33%;
border-right: 1px;
margin-right:15px;
border-right-style: outset;
}
.redes sociais{
float:left;
width: 33.33%;
}
@media only screen and (max-width: 480px) {
.endereco, .telefone, .redes-sociais {
float: none;
width: 100%;
}
}
footer h1,h2{
font-size:1em;
font-weight:600;
font-family: 'Arial',sans-serif;
text-align:center;
display:inline-block;
}
footer .redes-sociais a:hover{
display: inline-block;
position: relative;
-webkit-animation-name: rotacao; /* Chrome, Safari, Opera (nome da animação)*/
-webkit-animation-duration: 2s; /* Chrome, Safari, Opera (Duração da animação)*/
animation-name: rotacao; /* nome da animação */
animation-duration: 2s; /* Duração da animação */
}
@keyframes rotacao {
from {transform: rotate(1deg);}
to {transform: rotate(360deg);}
}
@media screen and(max-width:768){
footer{
padding-bottom: 3em;
}
}