exergue v1

by toubia95

HTML

<p>Texte principal, texte principal, texte principal, texte principal, texte principal, texte principal, texte principal, texte principal, texte principal, texte principal, texte principal, texte principal, texte principal, texte principal, texte principal, texte principal, texte principal, texte principal, texte principal, texte principal, texte principal
<span class="focus">Focus, focus, focus, focus, focus, focus, focus, focus, focus, focus</span>
Texte principal, texte principal, texte principal, texte principal, texte principal, texte principal, texte principal, texte principal, texte principal, texte principal, texte principal, texte principal, texte principal, texte principal, texte principal, texte principal, texte principal, texte principal, texte principal, texte principal, texte principal</p>

CSS

body {
    font-family: arial, sans-serif;
    text-align: justify;
    font-size: 1em;
}
p {
    display: block;
    float: left;
    width: 75%;
    padding: 5%;
}
.focus {
    display: block;
    float: right;
    font-size: 1.2em;
    border-top : 2px solid black;
    border-bottom : 2px solid black;
    padding : 5px 10px;
    margin : 3%;
    width: 72%;
    margin-right: -25%;
}
@media (max-width: 600px) {
    p {
        float: none;
        width: 90%;
    }
    .focus {
    display: block;
    float: none;
    font-size: 1.2em;
    border-top : 2px solid black;
    border-bottom : 2px solid black;
    padding : 5px 2%;
    margin : 20px 0px;
    width: 96%;
    }
}