<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col-md-6"> <div class="area-title"> <h1 data-after-text="News" class="vertival-heading"></h1> <h4>Latest</h4> <h2>Blog</h2> </div> <div class="hidding-content"> <p>Wasn't a dream. His room, a proper human room although a little too small, lay Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae neque maiores, molestiae fugit incidunt consequuntur <span class="heading-text">voluptatem soluta minus enim est. Similique veniam quidem velit rem nulla tenetur, eum optio dicta.</span> </p> </div> </div> </div> </div>

@import url('https://fonts.googleapis.com/css?family=Montserrat:300,300i,400,400i,500,500i,600,600i,700,700i'); .vertival-heading[data-after-text]:after { content: attr(data-after-text)""; z-index: -1; text-align: left; position: absolute; color: rgb(238, 238, 238); text-transform: uppercase; font-size: 80px; transform: rotate(270deg); top: 100px; line-height: 1.554; left: -90px; overflow-wrap: break-word; word-wrap: break-word; -ms-word-break: break-all; word-break: break-all; word-break: break-word; z-index: 9; } .area-title { display: inline-block; margin-bottom: 40px; } .area-title h4 { font-size: 30px; margin-bottom: 15px; font-weight: 600; } .area-title h2 { color: #ffbd34; font-size: 50px; font-weight: 800; line-height: 1; margin-bottom: 0; position: relative; text-transform: uppercase; z-index: 9; } .hidding-content { padding-left: 100px; }