Ola pessoal estou há mais de uma semana tentando resolver o layout de um site que estou fazendo. É o seguinte a div class="informacoes-abaixo" deve aparece abaixo da imagem class="corte-longo-castanho" e ficar posicionada ali abaixo do site. Assim a cada imagem que eu coloque na class="container" vai aparecer abaixo da "corte-longo-castanho" e acima das "informacoes-abaixo". Porém com no meu código por mais que eu altere SEMPRE fica a div class="informacoes-abaixo" aparece no canto extremo esquerdo superior e nem dá para vê-la. Eu a descobri com o CRTL+SHIFT+i no chrome. Seguem meus códigos:
<body>
<main>
<div>
<img class="logoStudioPlatinum" src="img/logo.jpg" alt="logo do Studio Platinum">
</div>
<h1>Studio Platinum</h1>
<aside class="navegacao-site">
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="servicos.html">Serviços</a></li>
<li><a href="produtos.html">Produtos</a></li>
<li><a href="videos.html">Videos</a></li>
<li><a href="contato.html">Contato</a></li>
</ul>
</nav>
</aside>
<section class="container">
<img class="corte-longo-castanho" src="img/cabeloEncaracolado.jpg" alt="corte longo castanho" >
<div class="informacoes-abaixo">
<div class="secao-rodape secao-informacoes">
<h2>Informações</h2>
<a href="#/contato.html">Nossa Equipe</a>
<a href="#/index.html">Horario de Funcionamento</a>
<a href="#/contato.html">Fale Conosco</a>
</div>
<div class="secao-rodape secao-localizacao">
<h2>Localização</h2>
<p>Studio Platinum</p>
<p>Rua do Senhor do Roubado, n15</p>
<p>Telefone: 215 689 752</p>
</div>
<div class="secao-rodape secao-saiba-mais">
<p>Studio Platinum de Odivelas</p>
<p>O salão com mais likes</p>
<p>do facebook desta zona</p>
<button class="button-saiba-mais">Saiba Mais</button>
</div>
<div class="secao-rodape secao-facebook">
<h2>Siga-nos no facebok:</h2>
<img class="logo-facebook" src="img/Facebook.png" alt="siga a pagina do Studio Platinum no facebook">
</div>
</div>
</section>
</main>
<footer>
<div class="rodape">
<P>Copyright © 2018 Studio Platinum | <cite>por <a href="https://www.linkedin.com/in/salatielaizza">Salatiel Aizza</a></cite></P>
</div>
</footer>
</body>
</html>.logoStudioPlatinum{
width: 300px;
height: 300px;
border: 1em solid #b106ff;
transform: scale(0.5, 0.5);
position: absolute;
left: 0;
top: 0;
padding: 0%;
margin: 0%;
}
body{
position: relative;
background-color: rgb(252, 252, 252);
}
h1{
font-size: 8em;
font-style: italic;
font-weight: bold;
color: #000;
text-shadow: 3px 3px #7C3D99;
position: absolute;
top: 0;
left:45%;
box-sizing: border-box;
}
.navegacao-site li {
box-sizing: border-box;
background-color: #7C3D99;
border: 2px solid #b106ff;
margin: .4em;
padding: .5em;
text-align: center;
width: 90%;
font-family: "Open Sans Condensed", sans-serif;
text-decoration-line: none;
}
.navegacao-site{
color: #FFF;
display: block;
position: absolute;
box-sizing: border-box;
left: 0%;
top: 300px;
height: 450px;
width: 15%;
/*background-color: #7C3D99;*/
}
.corte-longo-castanho{
position: absolute;
left: calc(33%);
top: 150px;
transform: scale(.70);
}
.informacoes-abaixo{
box-sizing: border-box;
width: 100%;
height: 13em;
margin-bottom: 5em;
background-color: aqua;
position: absolute;
bottom: 20%;
display: flex;
}
.secao-localizacao, .secao-saiba-mais, .secao-facebook, secao-informacoes{
display: flex;
align-items: center;
}
.secao-localizacao p , .secao-saiba-mais p, secao-informacoes a{
flex-wrap: wrap;
align-items: center;
}