Entry page of this genus

Asked

Viewed 153 times

0

Does anyone know where I can enter an entry page with this shape or something similar?

inserir a descrição da imagem aqui

html5
  • 3

    Prototyping level "what"?

  • That this guy haha

  • 2

    -1 For not making any sense

  • 1

    Do you want a site that looks like a cardboard box? Rs. Now seriously, you want an opening page for your site with this format?

  • Yes I wanted an opening page with that format

  • this is not a prototype just to test a script for an input page and I don’t know much about css is why I asked for help

  • 5

    Need to be with this blue and brown? In case, the squares would be retinhos right? Or you want to simulate the effect of the pen? What I liked is that you applied the concept of "Thinking outside the box"

  • You don’t need to have color I just wanted to help to create a structure like that. Thank you.

Show 3 more comments

1 answer

15


Since you haven’t given many details of the problem or the difficult part of the layout, follow a CSS and HTML with just about everything you might need:

(Click Run, and then "WHOLE PAGE" to view better)

    body, html {
      width:100%;
      height:100%;
    }
    
    body, html, div {
      position:relative;
      box-sizing:border-box; /* importante */
      padding:0;
      margin:0;
    }
    
    #page {
      width:590px;
      height:960px;
      margin: 0 auto;
    }
    
    #escadaazul {
      background:#0d7fa9;
      /* demonstração do poder dos Gradients em design: */
      background:linear-gradient(-4deg,
        #1097c5, #0c81ad 32%,
        #062f33 36%,
        #1a5a74 39%, #1a5a74 45%,
        #0e9fcc 49%, #087faf 59%,
        #062f33 62%,
        #1a5a74 64%, #1a5a74 66%,
        #12b7e3 70%, #02bbe9
      );
      height:20%;
      /* "embaçado" entre a escadinha azul e o papelão */
      box-shadow:0 2px 6px #0d7fa9;
      /* pro box-shadow ficar por cima do papelao */
      z-index:1;
    }
    
    #papelao {
      background-color:#cb9b5c;
      background:linear-gradient(2deg,
        #72502e,
        #825731 51%,
        #c99655 60%,
        #ca9a59
      );  
      width:100%;
      height:80%;
      /* espaço desocupado do papelão: */
      padding:28% 5px 44% 2px;
    }
    
    .quadrado {
      width:50%;
      height:100%;
      /* determina tamanho do de dentro: */
      padding:100px 80px; 
    }
    
    .quadrado.direita {
      float:right;
      /* quadradinho da direita é menor: */
      padding-bottom:130px;
      /* inclinação: */
      transform:skew(1deg);
    }
    
    .quadrado.esquerda {
      float:left;
      /* inclinação: */
      transform:translate(2px,0) skew(-1deg);
    }
    
    .quadradinho {
      width:100%;
      height:100%;
    }
    
    .quadrado, .quadradinho {
      /* borda escura dos quadrados: */
      border: 4px solid #212419;
      /* "embaçado" no risco: */
      box-shadow:0 0 3px #212219,inset 0 0 3px #212219;
    }
<div id="page">
  <div id="escadaazul">
  </div>
  <div id="papelao">
    <div class="quadrado esquerda">
      <div class="quadradinho">
      </div>
    </div>
    <div class="quadrado direita">
      <div class="quadradinho">
      </div>
    </div>
  </div>
</div>

  • This is not how you enter an entry page!! 1! Even more one of this genre or something similar.

  • @bfavaretto at least has to put a different color on the step, to avoid accidents.

Browser other questions tagged html5

You are not signed in. Login or sign up in order to post.