Heading with full width bars

Heading with full width bars.markdown

Heading with full width bars

Heading with a separator bar that expands to the full width

A Pen by Vinteractive on CodePen.

License.

index.html

<div class="fluid-container">
  <div class="container">
    <div class="col-lg-6">
      <h1 class="heading"><span>Heading</span></h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Si qua in iis corrigere voluit, deteriora fecit. Stoicos roga. Indicant pueri, in quibus ut in speculis natura cernitur. Cur fortior sit, si illud, quod tute concedis, asperum et vix ferendum putabit? Duo Reges: constructio interrete. Itaque his sapiens semper vacabit. Primum divisit ineleganter;</p>
    </div>
    <div class="col-lg-6">
      <h1 class="heading"><span>Heading</span></h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Si qua in iis corrigere voluit, deteriora fecit. Stoicos roga. Indicant pueri, in quibus ut in speculis natura cernitur. Cur fortior sit, si illud, quod tute concedis, asperum et vix ferendum putabit? Duo Reges: constructio interrete. Itaque his sapiens semper vacabit. Primum divisit ineleganter;</p>
    </div>
  </div>
</div>

<div class="fluid-container footer">
	<footer class="container">
		
		<div class="col-lg-4">
			<h1 class="heading"><span>About</span></h1>
			  <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliter homines, aliter philosophos loqui putas oportere? Ne amores quidem sanctos a sapiente alienos esse arbitrantur. Primum in nostrane potestate est, quid meminerimus? Non est igitur voluptas bonum. Duo Reges: constructio interrete. Quid de Platone aut de Democrito loquar? An tu me de L. Beatus sibi videtur esse moriens. Non minor, inquit, voluptas percipitur ex vilissimis rebus quam ex pretiosissimis. Non est enim vitium in oratione solum, sed etiam in moribus.
    </p>
		</div>
		
		<div class="col-lg-4">
			<h1 class="heading"><span>Address</span></h1>
<p class="address">
    Line One <br />
    line two <br />
    line 3 with P03T C0DE        
			</p>

			<p class="address">
				Tell: 0207 374 6141 <br>	
				Email: <a href="">enquiries@mycompany.com</a>
			</p>
		</div>

		<div class="col-lg-4">
			<h1 class="heading"><span>Connect</span></h1>
			<img src="img/social-media.png" width="186" height="46">

			<h1>Payment Options</h1>
			<img src="img/payment-cards.png" width="267" height="56">
		</div>
	</footer>
</div>

style.scss

$golden-black: #151605;
$light-gold: #BFA170;
$main-text: #A4A4A1;

body {
  background-color: $golden-black;
  color: $main-text;
}

h1.heading {
	color: $light-gold;
	text-transform: uppercase;
	font-size: 32px;
	font-weight: 300;
	line-height: 40px;

	span {
		background-color: $golden-black;
		display: inline-block;
		z-index: 1;
		padding-right: 10px;
	}
}

h1.heading:before {
	content: "";
	background-color: $light-gold;
	display: block;
	position: relative;
	top: 23px;
	width: 100%;
	height: 6px;
	z-index: -1;
}

styles

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />