Content block with custom header

by Alexey Zuev

HTML

<div class="content">
    <h3 class="head">
        <span class="title">About us</span>
    </h3>
    <div class="body">
        <p class="text">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam quisquam eligendi delectus ex pariatur porro praesentium aliquam officia id quidem numquam ipsum aliquid omnis inventore expedita reiciendis modi consequuntur ut repudiandae aspernatur adipisci maiores illo voluptatem iure tempore nostrum esse harum sint eaque voluptatibus dignissimos minima itaque beatae possimus molestiae.
        </p>
    </div>
</div>

CSS

body {
    background: #AEA174;
}

.content {
    margin: 2em 2em 0;
    text-align: center;
}

.head {
    overflow: hidden;
    margin: 0;
    color: #948960;
    font: 1.4em/1 Arial;
    text-transform: uppercase;
}

.title {
    position: relative;
}

.title:before, .title:after {
    position: absolute;
    content: " ";
    border-top: 2px solid #948960;
    margin-top: -1px;
    top: 50%;
    width: 3000px;
}
.title:before {
    margin-right: 10px;
    right: 100%;
}
.head span:after {
    left: 100%;
    margin-left: 10px;
}

.body {
    border-left: 2px solid #948960;
    border-right: 2px solid #948960;
    border-bottom: 2px solid #948960;
    margin: -.7em 0 0;
}

.text {
    padding: 2em;
    margin: 0;
    color: #3F3F3F;
}