<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="main-title">
<h1><span>Alfa <strong>Pricing</strong></span></h1>
</div>
.main-title {
transform: skew(-15deg);
-o-transform: skew(-15deg);
-moz-transform: skew(-15deg);
-webkit-transform: skew(-15deg);
width:250px;
}
h1, h1::before, .timelineFlat.timelineFlatBlog .item .post_date, .timelineFlat .mCS-light-thin > .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, #forms input.send:hover, #comment-form input.send:hover, .navbar-default .navbar-toggle .icon-bar, .bar-color, .team h6, .price-title, .team h6::before, .tooltip-content, .our-testimonials h3, footer .social::before, .color-switcher .color-switcher-title::after, .btn.read-post, .our-testimonials h3::before {
background-color:
#de3926;
}
h1, h1::before, .timelineFlat.timelineFlatBlog .item .post_date, .timelineFlat .mCS-light-thin > .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, #forms input.send:hover, #comment-form input.send:hover, .navbar-default .navbar-toggle .icon-bar, .bar-color, .team h6, .price-title, .team h6::before, .tooltip-content, .our-testimonials h3, footer .social::before, .color-switcher .color-switcher-title::after, .btn.read-post, .our-testimonials h3::before {
background-color:
#de3926;
}
h1::before {
position: absolute;
content: '';
top: 6px;
left: -8px;
width: 60%;
height: 100%;
background-color: #3498db;
z-index: -2;
}
h1::after {
position: absolute;
content: '';
top: 6px;
left: -8px;
width: 60%;
height: 100%;
background:
black;
opacity: 0.5;
z-index: -2;
}
