Christmas Banner

Well, it's that time of the year - Christmas time! This time last year, I was on a website on a different domain and decided to do nothing for Christmas (website related - that is), a few years prior, I added snow - which promptly bricked that Wordpress install (leading to a fun Christmas-Eve-Eve where I had to rebuild my entire site).

This year, 2020, I've decided I'm just going to add a nice little message banner that works with Bootstrap and that you yourself can add! I've also added an optional version which uses PHP if/elseif/else statement that means it automatically comes on.

Notice: The photos used are licenced under creative commons.

What it looks like

Press the corresponding button to see an example of the version.

Version 1

Merry Christmas!

Version 2

Merry Christmas!

Version 3

Merry Christmas!

Put it on your site!

Required! For this project, you'll need a PHP page that uses Bootstrap 4.5.

Version 1 Tutorial

First of all, you'll need to call this project's CSS file. To do this, place the following code inbetween your <head> and </head> tags:

<link ref="stylesheet" href="https://cdn.080820.xyz/projects/xmas2020/style1.css" >

Now all you have to do is add the actual code. Place the following code where-ever you'd like the banner to go:

<?php
if(date("d/m/y") === "25/12/21"){
?>
<div class="jumbotron jumbotron-fluid xmasjum">
    <div class="container">
        <h1 class="display-4 text-center">Merry Christmas!</h1>
    </div>
</div>
<?php
}else{}
?>

That's it - done!

Version 2 Tutorial

First of all, you'll need to call this project's CSS file. To do this, place the following code inbetween your <head> and </head> tags:

<link ref="stylesheet" href="https://cdn.080820.xyz/projects/xmas2020/style2.css" >

Now all you have to do is add the actual code. Place the following code where-ever you'd like the banner to go:

<?php
if(date("d/m/y") === "25/12/21"){
?>
<div class="jumbotron jumbotron-fluid xmasjum">
    <div class="container">
        <h1 class="display-4 text-center">Merry Christmas!</h1>
    </div>
</div>
<?php
}else{}
?>

That's it - done!

Version 3 Tutorial

First of all, you'll need to call this project's CSS file. To do this, place the following code inbetween your <head> and </head> tags:

<link ref="stylesheet" href="https://cdn.080820.xyz/projects/xmas2020/style3.css" >

Now all you have to do is add the actual code. Place the following code where-ever you'd like the banner to go:

<?php
if(date("d/m/y") === "25/12/21"){
?>
<div class="jumbotron jumbotron-fluid xmasjum">
    <div class="container">
        <h1 class="display-4 text-center">Merry Christmas!</h1>
    </div>
</div>
<?php
}else{}
?>

That's it - done!

7th December, 2020