Untitled

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>dublaBlog</title>
    <link rel="stylesheet" href="css/folhaDeEstilos.css">
</head>
<body>
    <header>
        <h1><span style="color: red">dubla</span>Blog</h1>
        <nav class="menuDaPagina">
            <ul class="listaMenu">
                <li class="itemMenu"><a href="">Home</a></li>
                <li class="itemMenu"><a href="">Anime</a></li>
                <li class="itemMenu"><a href="">Cartoons</a></li>
                <li class="itemMenu"><a href="">Filmes</a></li>
            </ul>
        </nav>
    </header>
    <article>
        <section class="postagem">
            <h4>Entrevista com Wendel Bezerra</h4>
            <span style="color: red; font-size: 12px; display: block">Postado por Rafael Boeno</span>
            <figure>
                <img src="imagens/wendel-bezerra-goku-300.png">
                <figcaption>
                    <p>Maecenas in placerat urna. Proin velit ipsum, imperdiet sit amet lorem id, malesuada pellentesque
                        risus. Duis porttitor justo sit amet malesuada varius. Nulla dignissim eros nec lectus suscipit
                        imperdiet. Vivamus tristique quis odio sed tempor. Sed pulvinar, urna a tempor sodales, purus m
                        etus mollis lectus, in congue enim nisl ut dui. Suspendisse interdum urna nec elit tincidunt por
                        ta. Duis venenatis risus in semper sodales. Praesent feugiat rutrum fermentum. Nullam luctus aug
                        ue sit amet ultrices cursus. Curabitur tristique ex at ante pharetra, quis scelerisque eros rutr
                        um. Donec commodo nibh ligula, ut elementum risus ullamcorper quis. Nunc ut nunc sem. Mauris ut
                        varius lorem, a tempor nibh. Donec iaculis aliquet est, vitae feugiat turpis porttitor vel. Duis
                        rhoncus lorem orciDonec iaculis aliquet est, vitae feugiat turpis porttitor vel. Duis dois tres
                        rhoncus lorem orc Donec iaculis aliquet est, vitae feugiat turpis porttitor vel. Duis teste um
                        rhoncus lorem orc.
                        Maecenas in placerat urna. Proin velit ipsum, imperdiet sit amet lorem id, malesuada pellentesque
                        risus. Duis porttitor justo sit amet malesuada varius. Nulla dignissim eros nec lectus suscipit
                        imperdiet. Vivamus tristique quis odio sed tempor. Sed pulvinar, urna a tempor sodales, purus m
                        etus mollis lectus, in congue enim nisl ut dui. Suspendisse interdum urna nec elit tincidunt por
                        ta. Duis venenatis risus in semper sodales. Praesent feugiat rutrum fermentum. Nullam luctus aug
                        ue sit amet ultrices cursus. Curabitur tristique ex at ante pharetra, quis scelerisque eros rutr
                        um. Donec commodo nibh ligula, ut elementum risus ullamcorper quis. Nunc ut nunc sem. Mauris ut
                        varius lorem, a tempor nibh. Donec iaculis aliquet est, vitae feugiat turpis porttitor vel. Duis
                        rhoncus lorem orciDonec iaculis aliquet est, vitae feugiat turpis porttitor vel. Duis dois tres
                        rhoncus lorem orc Donec iaculis aliquet est, vitae feugiat turpis porttitor vel. Duis teste um
                        rhoncus lorem orc.
                    </p>
                </figcaption>
            </figure>
        </section>
    </article>
    <footer>

    </footer>
</body>
</html>

body{
    background-color: #CCC5CD;
}

header{
    background-color: white;
    width: auto;
    height: 50px;
    margin: auto 200px;
    border-bottom:  1px solid;
}
a{
    text-decoration: none;
    color: inherit;
}


header h1{
    display: inline;
    position: absolute;
    margin-left: 20px;
    width: 141px;
    margin-top: 7px;
}

nav.menuDaPagina{
    float: right;
    position: relative;
}

ul.listaMenu{
    position: relative;
    list-style: none;
}

li.itemMenu{
    position: relative;
    display: inline-block;
    padding: 7px;
    margin-top: -15px;
    margin-right: 30px;
}

li:hover{
    background-color: red;
    color: white;
    padding: 15px;
}

article{
    margin: auto 200px;
    padding-top: 10px;
}


section.postagem{
    width: 600px;
    height: 275px;
    background-color: white;
    position: relative;
}

section h4{
    display: inline;
}

figure{
    margin: 0px;
}

figure img{
    float: left;
    margin-right: 5px;
    margin-bottom: 5px;
}

figcaption p{
    text-align: justify;
    overflow: inherit;
    text-overflow: ellipsis;
}