WQbKEZ

index.html

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div id="wrapper">
    <header class="clearfix">
        <div class="j-logo-bar">
            <div class="container">
                <div class="j-bar-left j-bar"></div>
                <div class="j-logo"></div>
                <div class="j-bar-right j-bar"></div>
            </div>
        </div>
    </header>
    <div id="main">
        <div class="container">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, iure fugiat mollitia consequuntur adipisci veritatis distinctio omnis quo doloremque unde repudiandae aut eos esse vero consectetur optio temporibus alias ipsa.</p>
            <p>Eos, sunt, numquam ex ipsam accusamus illum molestiae maiores! Necessitatibus, reiciendis, molestias, beatae, mollitia totam tempora saepe inventore dolore fugiat odit a in repellendus eaque sit cupiditate accusamus adipisci earum.</p>
            <p>Perferendis, quas, suscipit, inventore porro libero ducimus earum vero eveniet nemo assumenda facere voluptatum error repellat iste delectus et rerum quod sed ex aliquid! Explicabo, at eveniet cumque sunt sed.</p>
            <p>Quidem unde ipsa officiis! Iusto, eius, possimus, quasi nam est fugit ratione sunt cupiditate veniam nulla debitis eveniet dolor hic amet explicabo. Ullam, quas, laudantium cumque fugiat culpa unde id.</p>
            <p>Laudantium, earum saepe praesentium eveniet esse libero assumenda a porro deleniti possimus ipsa id iure ex aut ducimus magni sint dolore repellendus sunt natus iste suscipit in distinctio totam consequuntur.</p>
            <p>Repellendus, in tempore beatae modi commodi debitis eaque. Ducimus, facere, a quasi odio dignissimos non porro sapiente maiores blanditiis excepturi. Atque mollitia reiciendis ipsa iusto delectus iure enim nihil illum.</p>
            <p>Corrupti, minima, itaque deserunt debitis ut totam esse officiis est expedita error earum dignissimos illo labore ratione odio repellat officia dicta sit ex aspernatur cupiditate temporibus similique vel ipsa ipsam!</p>
            <p>Expedita, impedit, architecto deleniti adipisci quasi ratione tenetur a. Dolorum, esse, quaerat, sunt impedit enim rerum quidem deserunt error architecto aliquam facilis sequi odit mollitia eum unde! Molestias, possimus, sit.</p>
            <p>Deserunt, inventore, laboriosam, harum, nostrum a soluta sit laudantium praesentium recusandae qui quod repellendus obcaecati at accusamus provident odit optio voluptatibus reiciendis amet quam quae fuga cum eveniet dolor reprehenderit!</p>
            <p>Quasi, magnam, dolorem eveniet id eius tempore quos officiis accusantium asperiores iure beatae inventore omnis. Quidem, nostrum, similique cupiditate earum eveniet dolorum eius minus minima mollitia delectus aut debitis eum?</p>
        </div>
    </div>
</div>

style.css

header,
header .j-logo-bar,
header .j-bar,
header .j-logo {
  height: 90px;
}

header {
  margin-top: 30px;
  position: relative;
  overflow: hidden;
  
  .container {
    position: relative;
  }
  
  .j-logo {
    width: 140px;
    background: #C3000F;
  }
  
  .j-bar {
    position: absolute;
    top: 0;
    
    width: 1500px;
    background: rgba(0,0,0,0.6);
  }
  
  .j-bar-left {
    left: -1490px;
  }
  
  .j-bar-right {
    left: 160px;
  }
}

#main {
  margin-top: 50px;
}

WQbKEZ.markdown

WQbKEZ

A Pen by Cornell Campbell on CodePen.

License.