3

Gostaria de fazer um site com o modelo da imagem abaixo. Iniciei o código e consegui formular a primeira coluna, porém não estou conseguindo fazer adicionar a segunda coluna no topo do site. O código que fiz até agora é o seguinte:

     <header>
          <div id="parte1">
               <h1><img src="logo.png" alt="Logo do site"></h1>
               <p><a href="#"/a><img src="almox%20menu.png" alt="Botão menu almox"></a></p>
               <p><a href="#"/a><img src="GPI%20menu.png" alt="Botão menu GPI"></a></p>
               <p><a href="#"/a><img src="embalagem%20menu.png" alt="Botão menu embalagem"></a></p>
               <p><a href="#"/a><img src="menu%20backoffice.png" alt="Botão menu backoffice"></a></p>
               <p><a href="#"/a><img src="restrito%20menu.png" alt="Botão menu restrito"></a></p>
               <h2><img src="logo%20rodape.png" alt="Logo rodape"></h2>     

         </div>

         <div id="parte2">
              <p><a href="#"></a><img src="livro%20fiscal%20menu.png" alt="Botão menu livro fiscal"></p>
         </div>

     </header>
</body>
</html>
#parte1{
    width: 390px;
    margin: 0;
    background: rgb(8,8,8);
}

header h1{
    padding: 30px 50px 50px 50px;
}

header p{
    padding: 0px 50px 50px 50px;

}
header h2{

padding: 0px 60px 20px 110px;

}

#parte2{
   width: 430px;
   margin: 410px;
   background: rgb(8,8,8);

}

inserir a descrição da imagem aqui

2 Respostas 2

2

Fiz esse modelo com Flex, mas eu na verdade indicaria o Grid, só que o Flex tem um suporte melhor e é mais fácil de ajustar caso precise.

Ficou bem responsivo até, mas sugiro fazer uns @media para tratar telas pequenas.

inserir a descrição da imagem aqui

Segue o código da imagem acima, fiz na correria, pode ser otimizado com certeza, mas vou deixar isso por sua conta!

* {
  box-sizing: border-box;
  text-align: center;
}
html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
div {
  border: 1px solid #000;
}
.container {
  height: 100%;
  display: flex;
}
.b1 {
  width: 20%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.b1 * {
  margin: auto;
}
.b2 {
  width: 30%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.b3 {
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.pai {
  /* align-self: flex-end; */
  /* margin-top: auto; */
  display: flex;
  flex-wrap: wrap;
  margin: auto 0 0;
  height: 50%;
}
.pai:first-child {
  flex-direction: column;
}

.d4 {
  min-width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.img1 {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* max-height: 200px; */
}
img{
  display: block;
  margin: auto;
}
.box.bg {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
}
.g {
  height: 60%;
}
.p {
  height: 40%;
}

  
<div class="container">
  <div class="b1">
    <div class="logo">logo</div>
    <img src="https://placecage.com/100/100"><br>
    <img src="https://placecage.com/100/100"><br>
    <img src="https://placecage.com/100/100">
    <div class="logo2">logo2</div>
  </div>
  <div class="b2">
    <div class="box bg">
      <img src="https://placecage.com/100/100">
    </div>
    <div class="box">
      <img class="img1" src="https://placecage.com/100/100">
    </div>
  </div>
  <div class="b3">
    <div class="pai">
      <div class="box bg">
        <img src="https://placecage.com/100/100">
      </div>
      <div class="box p">
        <img class="img1" src="https://placecage.com/100/100">
      </div>
    </div>
    <div class="box pai">
      <div class="d4 g">
        <img src="https://placecage.com/100/100">
      </div>
      <div class="d4 g">
        <img src="https://placecage.com/100/100">
      </div>
      <div class="d4">
        <img class="img1" src="https://placecage.com/100/100">
      </div>
      <div class="d4">
        <img class="img1" src="https://placecage.com/100/100">
      </div>
    </div>
  </div>
</div>

2
  • Obrigada pela ajuda!!
    – Ketlyn
    26/04/2019 às 19:22
  • 1
    @Ketlyn se vc achar que a resposta responde a pergunta lembre-se de marcar o ao lado das Setinhas no lado esquerdo no topo da minha resposta ;)
    – hugocsl
    26/04/2019 às 19:23
0

Nessa sua estrutura eu utilizaria flex e grid com a seguinte estrutura:

  • Uma div principal (display: flex) É mais simples para posicionar

  • 3 divs (lado esquerdo, centro e lado direito) (display: grid) Cada div utilizaria grid para posicionar os elementos de maneira mais precisa digamos assim.

Para mais informações sobre grid:

Guia CSS Grid Layout

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .