Web Tutorial: LKY's Memorial

We interrupt your regular broadcast to bring you this message.

Lee Kuan Yew, a.k.a Harry Lee (who shall, in this web tutorial, be known as "LKY" for the sake of brevity), arguably Singapore's most famous personality, has passed on, at 3:18 am in the morning, at the ripe old age of 91.

I wouldn't call myself a fan, per se. But boy, this old geezer was one badass dude. Tough, dedicated and uncompromising, the likes of which will probably never be seen on our fair shores again. And his passing will be felt.

Now, with that out of the way, some of you might want to put your website at "half-mast" as a show of respect. The code is simple. No CSS classes. All CSS will be inline, so as not to interfere with the workings of your site. Just put this anywhere right after the body tag of your page.

<div style="background-color:rgba(0,0,0,0.5);width:100%;height:100%;left:0px;top:0px;position:fixed;color:#FFFFFF;text-align:center;z-index:900">

</div>

Here's an obligatory explanation as to what the CSS means.
background-color: rgba(0,0,0,0.5) - Set overlay background to black, with 50% opacity.
width: 100%, height: 100% - covers the entire screen.
left: 0px, top: 0px - Blackened screen overlay starts from top left corner
position: fixed - overlay moves with the page if there's scrolling.
color: #FFFFFF - text in overlay set to white for contrast.
text-align: center - all content in the overlay to be dead center.
z-index: 900 - This ensures that the overlay is on top of everything else. You may need to adjust this to a bigger number.

Now add some text in the div. Feel free to elaborate!

<div style="background-color:rgba(0,0,0,0.5);width:100%;height:100%;left:0px;top:0px;position:fixed;color:#FFFFFF;text-align:center;z-index:900;">
    Lee Kuan Yew, 1923 - 2015
</div>

Now we're going to add a picture. It's a memorial, right? Normally we'd use a nice dignified black-and-white picture of the grand old man, but to hell with that. Let's use my favorite picture, the one that captures him in all his majestic badassery. Credit to the phenomenally talented Samantha Lo of SKL0.

lky.jpg

So add this image into the content. Feel free to use your own image! I've set the margin-top property to 10% so that there's a decent amount of space between the top of the page and the image.

<div style="background-color:rgba(0,0,0,0.5);width:100%;height:100%;left:0px;top:0px;position:fixed;color:#FFFFFF;text-align:center;z-index:900;">
    <img src="lky.jpg" style="margin-top:30%">
    <br /> <br />
    Lee Kuan Yew, 1923 - 2015
</div>

And there you are, a nice memorial to mark the day LKY left us! This is what it should look like, using a sample Lorem Ipsum background.

But that leaves my site non-functional!

Sweat not! Just alter the code as follows:

<div style="background-color:rgba(0,0,0,0.5);width:100%;height:100%;left:0px;top:0px;position:fixed;color:#FFFFFF;text-align:center;z-index:900" onclick="this.style.display='none';">

This basically ensures that while the memorial to LKY will obediently pop-up whenever somebody accesses the site, it will vanish as soon as it is clicked. Problem solved! Keep calm and Harry on, folks!

What are you expecting here, me to sign off with a pun? This is a very grave occasion, OK?
T___T