Transformar site em responsivo
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.Discussão (3)
Carregando comentários...