Maquetando un header

Citar

Escrito el 13 Dic 2015 04:40 pm

Buenas buenas buenas,

Estoy dandole a esto del HTML y CSS publique un post anterior explicando mis frustraciones y hoy sigo practicando.

Estoy tratando de hacer el siguiente header me he bajado un monto de psd para practicar y este me pareció el mas sencillo.

Estoy intentando posicionar los elementos pero no logro hacer que queden como el psd dejo el codigo:

[img]http://prntscr.com/9dp1fy[/img]

Código HTML :

<body>
    <header>
        <div class="head-content">
            <h1>This is a Title</h1>
            <h3>This is an awesome headline</h3>
            <hr>
            <section class="autor-segment">
                <p class="pautor">WRITTEN BY</p>
                <p class="autor">Arthur GUILLERMIN HAZAN <span><img src="images/autor-image.png" alt=""></span></p>
            </section>
                <ul class="icons">
                    <li>
                        <a href=""><img src="images/start.png" alt=""></a>
                    </li>
                    <li>
                        <a href=""><img src="images/corazon.png" alt=""></a>
                    </li>
                    <li>
                        <a href=""><img src="images/figura.png" alt=""></a>
                    </li>
                </ul>
        </div>
    </header>

Código CSS :

body {
    
}
header {
    background-image: url(../images/header-bg.jpg);
    max-width: 100%;
    height: 770px;
}

.head-content {
    position: relative;
    top: 554px;    
}

.head-content h1 {
    color: #ffffff;
    font: 400 60px / 24px GentiumBookBasic;
}

.head-content h3 {
    color: #d7d7d7;
    font: italic 30px / 24px GentiumBookBasic;
}

autor-segment {

}

.pautor {
    color: #d7d7d7;
    font: 700 12px / 20px OpenSans;
}

.autor {
    color: #ffffff;
    font: 700 15px / 20px OpenSans;
    height: 12px;
}

.autor span {
    margin-left: 10px;
}

.icons ul {

}

.icons li {
    display: inline-block;
    margin-left: 15px;
    float: right;
}

Espero su ayuda.

Por abrahamp

6 de clabLevel

Envíale un mensaje privado

Citar

Escrito el 11 Ene 2016 06:59 am

Vamos por pasos.

En 1er lugar la maquetación thml, tratemos de reducir lo más posible los elementos. Propongo algo así:

Código :

<header class="fondo">
  <div class="contenido">
    <h2 class="titulo principal">Encabezado</h2>
    <h4 class="titulo secundario">subtitulo</h4>
    <div class="autor">
      <span class="etiqueta">autor</span>
      <b class="nombre">Edgar Gutiérrez</b>
      <img src="#" alt="" class="foto" />
    </div><!--div autor-->
    <div class="enlaces">
      <a href="#" class="enlace icono1">1</a>
      <a href="#" class="enlace icono2">2</a>
      <a href="#" class="enlace icono3">3</a>
    </div><!--div enlaces-->
  </div><!--div contenido-->
</header>

En cuanto al código css así:

Código :

/*reset opcional*/ {
  margin: 0; padding: 0; box-sizing: border-box;
  transition: all .5s ease-in-out;
  background-color: rgba(0, 0, 0, .1);
}
header {
  background-color: #22AABB; min-height: 100vh; 
  position: relative; font-family: georgia, serif;
  font-size: 16px; color: #fff;
}
.contenido {
  position: absolute; bottom: 0; left: 50%;
  transform: translateX(-50%); width: 100%;
  max-width: 30em;  padding: 1em;
}
.titulo.secundario {
  padding: .5em 0 .8em; border-bottom: solid 1px white;
}
.autor, .enlaces {
  display: inline-block;
}
.autor {
  width: 80%; padding-top: .3em;
}
.enlaces {
  width: 18%; text-align: right;
}
.etiqueta, .nombre {
  display: inline-block;
}

.etiqueta {
  width: 80%;  margin: 5px 0 0;
}

a
{  color: #fff;
}

Te quedará algo como esto: http://codepen.io/g3kdigital/pen/LGLprb?editors=110

Por g3kdigital

15 de clabLevel

Genero:Masculino

Envíale un mensaje privado Web

comunicador visual creativo

@g3kdigital

Maquetando un header

Escribe una respuesta rapida