Edit in JSFiddle


              
<div class="batman">
<header>
<h1>Who is batman?</h1>
    </header>    
<p>A painful experience for you!
They scream and they cry much as you're doing now.
No gun? I'm insulted.
You hung up your cape and your cowl but you didn't move on. You never went to find a life.
Swear to me!</p>
    
<p>Tomorrow, you will be released. If you are bored of brawling with thieves and want to achieve something there is a rare blue flower that grows on the eastern slopes. Pick one of these flowers. If you can carry it to the top of the mountain, you may find what you were looking for in the first place.

I had a vision of a world without Batman. The Mob ground out a little profit and the police tried to shut them down one block at a time. And it was so boring. I've had a change of heart. I don't want Mr Reese spoiling everything but why should I have all the fun? Let's give someone else a chance. If Coleman Reese isn't dead in 60 minutes then I blow up a hospital.</p>
    
html{
    font-size: 16px;
}

.batman{
    background: #34495e;
    padding: 20px;
    font-family: 'Open Sans', Arial;
    color: #fff;
}

header{
   color: #f1c40f;
   font-size: 1.8rem;
}

p:first-of-type {
  font-size: 1.7rem;
}
 
p:first-of-type:first-line {
  font-size: 1.7rem;

}
 
p:first-of-type:first-letter {
  float: left;
  color: #f1c40f;
  font-size: 8rem;
  font-weight: bold;
  margin: -30px 15px 0 0;
}