Skip to main content
se eliminaron 8 caracteres en el cuerpo
Origen Enlace
Einer
  • 20.6k
  • 2
  • 17
  • 39

Debes de aplicarle display:inline a los h3 para que ocupen solo el de ellos mismossu espacio. TambienDespues aplicales a los span de los .article display:block para convertirlos en elementos de bloque y empujen a los h3 abajo y quede como lo deseas. Los span los puedes convertir en div para sean elementos de bloque por defecto y asi no tener que especificar la regla css pero ya eso lo dejare a tu decision.

Debes de aplicarle display:inline a los h3 para que ocupen solo el de ellos mismos. Tambien aplicales a los span de los .article display:block para convertirlos en elementos de bloque y empujen a los h3 abajo y quede como lo deseas. Los span los puedes convertir en div para sean elementos de bloque por defecto y asi no tener que especificar la regla css pero ya eso lo dejare a tu decision.

Debes de aplicarle display:inline a los h3 para que ocupen solo su espacio. Despues aplicales a los span de los .article display:block para convertirlos en elementos de bloque y empujen a los h3 abajo y quede como lo deseas. Los span los puedes convertir en div para sean elementos de bloque por defecto y asi no tener que especificar la regla css pero ya eso lo dejare a tu decision.

Origen Enlace
Einer
  • 20.6k
  • 2
  • 17
  • 39

Debes de aplicarle display:inline a los h3 para que ocupen solo el de ellos mismos. Tambien aplicales a los span de los .article display:block para convertirlos en elementos de bloque y empujen a los h3 abajo y quede como lo deseas. Los span los puedes convertir en div para sean elementos de bloque por defecto y asi no tener que especificar la regla css pero ya eso lo dejare a tu decision.

Aqui el codigo. Puse las nuevas reglas css de primero para que puedas identificarlas facilmente:

.article span {
    color: #a9a9a9;
    font-weight: 300;
    display:block;
}
.article h3 {
    display: inline;
}
.article h3:hover {
    text-decoration:undeline;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-size: 16px;
    background-color: #fff;
}

body {
    max-width: 1200px;
    margin: 0 auto;
    font-family: 'Roboto', sans-serif;
}

a {
    color: #333;
}

header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 2rem;
    margin-bottom: 1.5rem;
}

header > a > img {
    width: 120px;
    height: auto;
    border-radius: 50%;
    margin-bottom: 1.2rem;
}

header > a {
    color: #333;
    text-decoration: none;
}

header > a:hover {
    color: #0d0d0d;
    text-decoration: underline;
}

header > a > h1 {
    font-size: 2.7rem;   
}

header > nav {
    border: solid 1px #dedede;
    border-left: none;
    border-right: none;
    padding: 0.2rem 0 0.5rem 0;
    text-transform: uppercase;
    font-weight: 300;
    font-size: 1.6rem;
    letter-spacing: 1px;
}

header > nav > a {
    margin-left: 0.8rem;
    margin-right: 0.8rem;
    color: #858585;
    text-decoration: none;
}

header > nav > a:hover {
    text-decoration: underline;
    color: #333333;
}

#articles {
    width: 50%;
    margin: 0 auto;
}

.article {
    border-bottom: solid 1px #dedede;
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
}

.titular {
    font-size: 1.3rem;
    margin-top: 0.5rem;
}

.article > a {
    text-decoration: none;

}

.article > a:hover {
    text-decoration: underline;
}


footer {
    display: flex;
    flex-direction: column;
    text-align: center;
    color: #333;
    margin: 0 auto;
    width: 50%;
    margin-top: 2.5rem;
}

footer a {
    color: #858585;
    text-decoration: none;
    

}

.iconoSocial {
    font-size: 1.6rem;
    color: #858585;
}

.iconoSocial:hover {
    color: #333333;
}

.contenedorIconos {
    display: flex;
    margin-bottom: 1rem;
}

.espaciado {
    width: 1rem;
    height: 1rem;
    background-color: transparent;
}

#contenedorCreditos {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.iconoCredito {
    font-size: 1.4rem;
}

.html5 {
    color: #f16529;
    margin-left: 0.2rem;
    margin-right: 0.3rem;
}

.css3 {
    color: #1c88c7;
    margin-right: 0.2rem;
}

.corazon {
    color: #d36060;
    margin-left: 0.2rem;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Pedro Fumero</title>
    <link rel="stylesheet" href="css/styles.css">
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,700" rel="stylesheet">
    <link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
</head>
<body>
    <header>
        <a href="/"><img src="img/foto.jpg" alt="Foto del bloguero"></a>
        <a href="#"><h1>Pedro Fumero</h1></a>
        <div class="contenedorIconos">
            <a href="http://google.com"><i class="ion-social-twitter iconoSocial primero"></i></a>
            <div class="espaciado"></div>
            <a href="#"><i class="ion-social-github iconoSocial"></i></a>
        </div>
        <nav>
            <a href="#">Blog</a>
            <a href="#">Talks</a>
            <a href="#">Book</a>
            <a href="#">Newletter</a>
            <a href="#">Podcast</a>
            <a href="#">About</a>
        </nav>
    </header>
    <section id="articles">
        <div class="article">
            <span>August 7, 2017</span>
            <a href="#"><h3 class="titular">CSS Utility Classes and "Separation of Concerns"</h3></a>
        </div>
        <div class="article">
            <span>April 21, 2017</span>
            <a href="#"><h3 class="titular">The $61,392 Book Launch That Let Me Quit My Job</h3></a>
        </div>
        <div class="article">
            <span>April 3, 2017</span>
            <a href="#"><h3 class="titular">Detecting Out of Sync Mocks in Mockery</h3></a>
        </div>
        <div class="article">
            <span>March 2, 2017</span>
            <a href="#"><h3 class="titular">What's KiteTail?</h3></a>
        </div>
    </section>
    <footer>                          
        <div id="contenedorCreditos">
            Creado con 
            <i class="ion-social-html5 iconoCredito html5"></i> 
            <i class="ion-social-css3 iconoCredito css3"></i> 
            y mucho 
            <i class="ion-heart iconoCredito corazon"></i>
        </div>
            <a href="#">Pedro Fumero</a>
            2017
    </footer>
</body>
</html>