nen exec banner w date

by mrjordy

HTML

<div class="BannerContainer">
  <div class="Banner">
    <div class="column20">
      <div class="BannerLogo">LOGO</div>
    </div>
    <div class="column80">
      <div class="BannerTitle"> NEN Executive Plan of the Day</div>
      <div class="BannerSubTitle">Oversight &amp; QA</div>
    </div>
  </div>
</div>
<div class="BannerDate" id="TodaysDate"></div>
<div class="BannerBottom"></div>

CSS

.column20 {
  display: inline-block;
  width: 20%;
}

.column80 {
  display: inline-block;
  width: 79%;
}

.BannerContainer {
  font-family: kalinga;
}

.Banner {
  height: 68px;
  position: relative;
}

.BannerTitle {
  font-size: 30px;
  color: #006a92;
  line-height: 25px;
  padding-top: 10px;
  font-weight: bolder;
}

.BannerSubTitle {
  padding-left: 5px;
}

.BannerBottom {
  height: 4px;
  background: #006a92 linear-gradient(to right, rgb(0, 106, 146) 0%, #319ec2 53%, rgb(0, 106, 146) 84%);
  width: 100%;
}

.BannerDate {
  background: rgb(0, 106, 146);
  color: white;
  width: 120px;
  height: 15px;
  padding-top: 4px;
  padding-right: 10px;
  text-align: right;
  margin-left: calc(100% - 146px);
  font-family: kalinga;
  border-top-left-radius: 14px;
  line-height: 18px;
  font-size: 16px;
  position: absolute;
  margin-top: -18px;
}

.BannerDate:before {
  content: '';
  width: 6px;
  height: 6px;
  background: rgba(0, 0, 0, 0);
  position: absolute;
  margin-left: -126px;
  margin-top: 8px;
  border-bottom: 2px solid #006a92;
  border-right: 2px solid #006a92;
  border-bottom-right-radius: 7px;
}

.BannerDate > div {
  position: absolute;
  right: 20px;
}

.BannerLogo {
  height: 60px;
  width: 60px;
  background: #006a92 linear-gradient(to right, rgb(0, 106, 146) 50%, #007197 50%);
  border-radius: 50px;
  margin-left: 20px;
  line-height: 60px;
  text-align: center;
  font-family: kalinga;
  color: white;
  font-size: 20px;
  position: absolute;
  top: 0;
}

JavaScript

var today = new Date();
var dd = today.getDate();
var mm = today.getMonth();
var yy = today.getFullYear() - 2000;

if (mm == 0) {
  mm = 'Jan'
};
if (mm == 1) {
  mm = 'Feb'
};
if (mm == 2) {
  mm = 'Mar'
};
if (mm == 3) {
  mm = 'Apr'
};
if (mm == 4) {
  mm = 'May'
};
if (mm == 5) {
  mm = 'Jun'
};
if (mm == 6) {
  mm = 'Jul'
};
if (mm == 7) {
  mm = 'Aug'
};
if (mm == 8) {
  mm = 'Sep'
};
if (mm == 9) {
  mm = 'Oct'
};
if (mm == 10) {
  mm = 'Nov'
};
if (mm == 11) {
  mm = 'Dec'
};

//var monthArray = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];

today = dd + ' ' + mm + ' ' + yy;

var insertDatePls = document.createElement("div");
insertDatePls.innerHTML = today;
document.getElementById("TodaysDate").appendChild(insertDatePls);