Galera, boa tarde!
É a primeira vez que abro um tópico neste forum pois já cansei de tentar inúmeras coisas e não conseguir uma solução.
Estou 'programando' um site, entretanto, ele não é responsívo, somente se adapta a resolução dos celulares.
Só que eu to esbarrando em um ÚNICO problema, já tentei de tudo e não consigo resolver.
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="language" content="PT-BR">
<meta name="author" content="Douglas Mion">
<meta name="robots" content="index,follow,all">
<meta name="keywords" content="Menino do Rio, Roupas, Modas, Moda Masculina, Masculina, Camisetas, Fábrica">
<meta http-equiv="X-UA-Compatible" content="IE=9"/>
<link id="favicon" rel="shortcut icon" href="/img/favicon/1x/favicon.png" type="image/png" />
<link rel="stylesheet" id="style" href=" style.css">
<link href="https://fonts.googleapis.com/css?family=Noto+Sans:400,400i,700" rel="stylesheet">
<title>CR6 ARQUITETURA</title>
</head>
<body>
<div id="bgmain">
<div id="barra">
<div id="middlebanner">
<div id="logo">
<img class "logo" src="img/cr6logo.png">
</div>
<nav id="menu">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">NOSSOS TRABALHOS</a></li>
<li><a href="#">QUEM SOMOS</a></li>
<li><a href="#">CONTATO</a></li>
</ul>
</nav>
</div>
</div>
<div id="textomiddle">
<center><h1>POLUDSDÇÃO COMPLETA EM ARQUITETURA</h1>
<div id="botao">
<a class="link" href="contato.html">FAÇA UM ORÇAMENTO</a>
</div>
</div>
</div>
<div id="meiomain">
<div id="linha"><img src="img/line.png"></div>
<center><h3>"Empresa de arquitetura focada em atender as demandas de seu projeto com toda a excelência e qualidade"</h3></center>
<img src="img/line.png">
</div>
<div id="diferencial">
<center><div id="dif1">
<img src="img/garantia-icon.png">
<h4>GARANTIA</H4>
<p class="textomiddle">Nossa empresa oferece garantia de 5 anos para sua obra ou projeto, garantindo total satisfação do cliente e comprometimento da CR6.</p>
</div>
<div id="dif2">
<img src="img/price-icon.png">
<h4 class="teste">CUSTO</H4>
<p class="textomiddle">Juntar a qualidade do nosso serviço com o baixo custo que oferecemos é com certeza a melhor opção para você economizar em sua obra/projeto.</p>
</div>
<div id="dif3">
<img src="img/equipe-icon.png">
<h4>EQUIPE</H4>
<p class="textomiddle">Arquitetos experientes e focados em sempre proporcionar ao cliente final um serviço de excelência e de exímia qualidade.</p>
</div></center>
</div>
<center><img src="img/line.png"></center>
<div id="textos">
<div id="textoesquerdo">
<h1 class="texto">PAISAGISMO</h1>
<p class="texto">Além dos segmentos mais comuns como reformas residenciais, prediais e projetos, nós também trabalhamos e executamos projetos de paisagismo.
Realizamos manutenções de jardins mantendo-os sempre com um aspecto saudável e agradável, escolhendo espécifies corretas para cada ambiente, seja ele aberto ou fechado.
Se é para falar de paisagismo temos de falar de sustentabilidade e a CR6 consegue unir este dois pontos com maestria.</p>
</div>
<div id="textodireito">
<h1 class="texto1">O QUE FAZEMOS</h2>
<p class="texto1">Nós trabalhamos em diversos segmentos, dentre eles, projetos de arquitetura e interiores, reformas residenciais e comerciais, execução de projetos, acompanhamento de obras e outros mais.
Fornecemos um serviço de qualidade, com uma equipe experiente e capacitada para lhe atender da melhor forma possível.
Nós não somos apenas de uma empresa de arquitetura, nós investimos em inovação e atendimento diferenciado para garantir uma excelência no resultado final.</p>
</div>
</div>
<div id="paisapro">
</div>
<center><img class="linharede" src="img/line.png"></center>
<div id="redes">
<div id="redecentro">
<center><h1 class="redes">ESTAMOS CONECTADOS</h1></center>
</div>
<div id="redeesquerda">
<a href="#"><img src="img/facebook.png"></a>
</div>
<div id="redemeio">
<center><a href="#"><img src="img/twitter.png"></a></center>
</div>
<div id="rededireita">
<a href="#"><img src="img/linkedin.png"></a>
</div>
<div id="rededireita2">
<a href="#"><img src="img/insta.png"></a>
</div>
</div>
<div id="rodape">
</div>
</body>
body {
margin: 0 auto;
padding: 0 auto;
font-family: 'Noto Sans', sans-serif;
}
h1 {
font-size: 5.0em;
color:#efc500;
}
h3 {
font-size:2.5em;
color:#000000;
font-weight:normal;
font-style:italic;
}
h4 {
font-size:1.5em;
color:#000000;
font-weight:normal;
position:relative;
bottom:25px;
}
#bgmain {
background: url(img/main.jpg) no-repeat;
background-color:#efc500;
background-position: center center;
background-attachment: fixed;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-ms-background-size: cover;
-o-background-size: cover;
margin: 0 auto;
padding: 0 auto;
width:100%;
height:100%;
}
#barra {
height:130px;
width:100%;
background-color:white;
opacity: 0.8;
filter: alpha(opacity=80%);
}
#logo {
float:left;
margin-left:5px;
}
#menu ul {
margin:0px auto;
margin-top:50px;
list-style:none;
float: right;
margin-right:5px;
}
#menu ul li { display: inline; }
#menu ul li a {
font-size:18px;
color:#efc500;
font-weight:bold;
margin-left: 30px;
text-decoration: none;
}
#menu ul li a:hover {border-bottom:6px solid #efc500;}
#textomiddle {
width:1050px;
margin: 0 auto;
margin-top:150px;
}
#botao {
width:350px;
height:70px;
display:inline-block;
margin-bottom:30px;
background-color:#FFFFFF;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
opacity: 0.8;
filter: alpha(opacity=80%);
}
#botao:hover {
background-color:#FFFFFF;
opacity: 1;
filter: alpha(opacity=100%);
}
a.link {
text-decoration:none;
display: inline-block;
color:#efc500;
font-family: 'Noto Sans', sans-serif;
margin-top:17px;
font-size: 25px;
}
#meiomain {
width:1050px;
margin: 0 auto;
}
#linha {
margin-top:20px;
}
#diferencial {
width:1050px;
height:300px;
margin: 0 auto;
}
#dif1 {
width:300px;
float:left;
margin-top:30px;
margin-left:5px;
}
#dif2 {
width:300px;
margin-left:70px;
float:left;
margin-top:30px;
}
#dif3 {
width:300px;
float:right;
margin-top:30px;
margin-right:5px;
}
p.textomiddle {
text-align:justify;
text-justify: inter-word;
position:relative;
bottom:40px;
}
#textos {
margin: 0 auto;
padding: 0 auto;
width:1050px;
height:380px;
}
#textoesquerdo {
float:left;
width:450px;
margin-left:5px;
}
#textodireito {
float:right;
width:450px;
margin-right:5px;
}
h1.texto {
font-size:3.0em;
float:left;
}
p.texto {
text-align:justify;
float:left;
position: relative;
bottom:30px;
}
h1.texto1 {
font-size:3.0em;
float:right;
}
p.texto1 {
text-align:justify;
float:right;
position: relative;
bottom:30px;
}
#paisapro {
background: url(img/paisapro.jpg) no-repeat;
width:1040px;
height:375px;
margin: 0 auto;
padding: 0 auto;
}
img.linharede {
position:relative;
top:50px;
}
#redes {width:1050px;height:380px; margin: 0 auto; position:relative;top:3.0em;}
#redecentro {
width:1050px;
height:120px;
}
h1.redes {
font-size:4.0em;
}
#redeesquerda {
height: 220px;
width:220px;
margin-top:30px;
float:left;
}
#redemeio {
height: 220px;
width:220px;
margin-top:30px;
float:left;
margin-left:42px;
}
#rededireita {
height: 220px;
width:220px;
margin-top:30px;
float:left;
margin-left:85px;
}
#rededireita2 {
height: 220px;
width:220px;
float:right;
margin-top:30px;
}
A imagem alí em cima não fica 100%, colada na tela.
Qual a solução para resolver? :(
A imagem alí em cima não fica 100%, colada na tela.
Qual a solução para resolver? :(
