css title decorations part one

EDGE related

by mroncetwice

HTML

<div class="bannr_main posrel wrap_all box-align_center">
  <div class="col scrn-big_col10 box-align_center">
    <h1 class="titleline titleline_topleft">
    GET YOUR TEAM IN GEAR
    </h1>
  </div>
  <div class="col scrn-big_col8 box-align_center">
    <h2 class="titleline titleline_topright">
    Corporate Fitness Success Starts Here
    </h2>
  </div>
  <div class="col scrn-big_col8 box-align_center txt_right">
    <button>
    LEARN MORE
    </button>
  </div>
</div> 
  
<div class="posrel wrap_all box-align_center">  
  <div class="col box-align_center">
    <h1 class="titleline titleline_topleft txt_center">
    START TRAINING, 
START GAINING
    </h1>
  </div>
  
  <div class="col txt_center">
    <h2 class="txt_right adjace">
    Scientifically Researched<br>
  Superlative Results
    </h2>
    <button class="adjace titleline titleline_topright">
    LEARN MORE
    </button>
  </div>
</div>

CSS

@import url(https://fonts.googleapis.com/css?family=Abel);
* { font-family:'Abel', sans-serif; margin:0; padding:0; }
.posrel {position:relative;}
.box-align_center { margin-left:auto; margin-right:auto; }
.wrap_all { width:100%; max-width: 1008px; padding-top:90px; margin-bottom:120px;}
.col { /*border:1px solid grey;*/ position:relative; z-index:0; padding-left:20px; padding-right:20px; }
  .adjace { display:inline-block; margin-right:-3px; vertical-align:middle; }
.scrn-big_col10 { width: 83%; }
.scrn-big_col8 { width: 66%; }

.bannr_main { }
  .bannr_main h1 { font-size:120px; margin-bottom:60px; line-height:1;}
  .bannr_main h2 {font-size:45px; margin-bottom:30px; font-weight:normal; line-height:1.1; text-transform:uppercase;}

h1 { font-size:78px; margin-bottom:60px; line-height:1;}
h2 {font-size:39px; margin-bottom:30px; font-weight:normal; line-height:1.1; text-transform:uppercase; margin-right:10px !important;}

.titleline { position:relative; /*background:yellow;*/ }
.titleline:before { content:""; position:absolute; height:330px; width:1px; transform:rotate(54deg);/**/ background:#26abb5; z-index:0; }
.titleline.titleline_topright:before { top:0; margin-top:-1.5em; right:0; margin-right:37%;}
.titleline.titleline_topleft:before { top:0; margin-top:-1.2em; left:0; margin-left:.875em;}
.titleline.titleline_btmright:before { top:0; margin-top:.15em; right:0; margin-right:1.2em;}
.titleline.titleline_btmleft:before { top:0; margin-top:.26em; left:0; margin-left:-.6em;}
button { width:282px; background:#f36000; color:white; border:0; padding:8px; font-size:24px; }

.txt_right { text-align:right;}
.txt_center { text-align:center;}