Maquetando un header

aepm83 · #1 (**permalink**) 13/12/2015, 11:02

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:

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>

JoeMx · #2 (**permalink**) 27/01/2016, 14:58

Hola, aparentemente el codigo no tiene ningun error, si lo que buscas es maquetar a partir de un archivo .psd debes trabajar con CSS como según lo estas haciendo, lo idelal seria que nos mostraras la imagen (en jpg de a donde quieres llegar) y el CSS que estas usando para darte mejores pistas de que pueda estar ocurriendo.

Saludos.

g3kdigital · #3 (**permalink**) 27/01/2016, 17:04

La verdad sí lo que quieres es validar que el HTML este bien, pues lo esta, pero hasta ahí no podemos ayudarte con más nada, faltaría ver el código en CSS que estas usando para ver como llegas a ese resultado en la imagen. Por cierto, yo envés de insertar imágenes de iconos como hiciste tú, lo manejaría con una fuente de iconos tipo fontawesome.