Staff en línea

[html]Tablilla 3.0 básica
Tema iniciado por y Añadir a favoritos

[html]Tablilla 3.0 básica 
el Vie Dic 15, 2017 1:41 pm
staff
[codebox]Distribución de tablilla para cabecera de foro[/codebox]
DEMO
http://www.opensourcephpbb3.com/h36-tablilla3-0

HTML
[hidecode]
Código:
<div class="frame grid">
  <div class="bar">TopBar</div>
  <div class="head">Head</div>
  <div class="main">
    <div class="nav">Nav</div>
    <div class="content">Content</div>
  </div>
  <div class="footer">Footer</div>
</div>
[/hidecode]
CSS
[hidecode]
Código:
.frame {
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  min-height: 100vh;
}

.flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.flex .main {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.bar, .head, .nav, .content, .footer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto 1fr auto;
}

@media (max-width: 800px) {
  .grid {
    grid-template-rows: auto 1fr auto;
  }
}

.bar {
  background: #8E334C;
  height: 30px;
  width: 100%;
}

.head {
  background: #EC9454;
  height: 300px;
  width: 100%;
}

.main {
  background: #F1F08A;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
      justify-content: space-around;
}

.nav {
  width: 300px;
  background: #C6CD78;
  height: 400px;
  margin-right: 15px;
}

.content {
  background: #C6CD78;
  width: 100%;
  max-width: 700px;
  height: 400px;
}

.footer {
  height: 30px;
  width: 100%;
  background: #C6CD78;
}

@media (max-width: 800px) {
  .head, .nav {
    display: none;
  }
}Tu código aquí
[/hidecode]
RinC
avatar

¿Que estoy pensando? :

Ni se te ocurra -_- [table class=fecha_up][td]Se modifico:29/03/18 - 17:44 hrs. [/td][/table]


Banner en temas :

♥♥Open♥♥


Color de titulos :

#DF7401


Sombra titulo :

1px 1px 1px #fff


Mensajes :

789


Puntos :

1147


Me gusta :

198


ingreso :

28/01/2015


Sexo :

Femenino

Plataforma :

PhpBB3


Navegador :

Chrome


Ver perfil de usuario

Volver arriba Ir abajo

 En la misma categoria


Permisos de este foro:
No puedes responder a temas en este foro.