Entry page of this genre [closed]

Question

Entry page of this genre [closed]

Navigation

#1 by (15 votes)

0

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

html5

asked by anonymous 15.04.2016 / 12:52

1 answer

What is the correct MVC concept to be addressed? How to create a popup that flashes on the screen? [closed]

score 15 · Accepted Answer

As you have not given much detail of the problem or part of the layout that is difficult, follow a CSS and HTML with just about everything you might need:

(Click Run, then "ALL PAGE" for a better view)

    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>