Date Style

by Muhammad Hassaan

HTML

<div class="custom-entry-date">
  <span>Oct</span>
  <span>17</span>
</div>

CSS

*, *::before, *::after { box-sizing: border-box;}
.custom-entry-date{ width:75px; height:75px}
.custom-entry-date span{ display:block;}
.custom-entry-date span:first-child{ background: #253b80; color: #ffffff; font-size: 14px; font-weight: bold; line-height: 12px; padding: 8px 22px; text-transform: uppercase;}
.custom-entry-date span:last-child{ font-size: 38px; line-height: 26px; padding: 12px 0 22px; background: #179bd7; font-weight: bold; text-align:center; color: #fff; overflow: hidden; text-shadow: #505ba0 1px 1px, #505ba0 2px 2px, #505ba0 3px 3px, #505ba0 4px 4px, #505ba0 5px 5px, #505ba0 6px 6px, #505ba0 7px 7px, #505ba0 8px 8px, #505ba0 9px 9px, #505ba0 10px 10px, #505ba0 11px 11px, #505ba0 12px 12px, #505ba0 13px 13px, #505ba0 14px 14px, #505ba0 15px 15px, #505ba0 16px 16px, #505ba0 17px 17px, #505ba0 18px 18px, #505ba0 19px 19px, #505ba0 20px 20px, #505ba0 21px 21px, #505ba0 22px 22px, #505ba0 23px 23px, #505ba0 24px 24px, #505ba0 25px 25px, #505ba0 26px 26px, #505ba0 27px 27px, #505ba0 28px 28px, #505ba0 29px 29px, #505ba0 30px 30px, #505ba0 31px 31px, #505ba0 32px 32px, #505ba0 33px 33px, #505ba0 34px 34px, #505ba0 35px 35px, #505ba0 36px 36px, #505ba0 37px 37px, #505ba0 38px 38px, #505ba0 39px 39px, #505ba0 40px 40px, #505ba0 41px 41px, #505ba0 42px 42px, #505ba0 43px 43px, #505ba0 44px 44px, #505ba0 45px 45px, #505ba0 46px 46px, #505ba0 47px 47px, #505ba0 48px 48px, #505ba0 49px 49px, #505ba0 50px 50px, #505ba0 51px 51px, #505ba0 52px 52px, #505ba0 53px 53px, #505ba0 54px 54px, #505ba0 55px 55px, #505ba0 56px 56px, #505ba0 57px 57px, #505ba0 58px 58px;}