How to create a Calendar Layout with the help of HTML and well as in this article we will be discuss about create a Calendar Layout…Create Calendar Layout With The Help of HTML And CSS

Program Of Calendar

 <div class="month"> 
    <li class="prev"> </li>
     <li class="next"> </li>
    <li>August<br><span  style="font-size:18px">2018</span></li>

<ul class="weekdays">

<ul class="days"> 
  <li><span class="active">10</span></li>

Create CSS File

list-style-type: none;}
 body {font-family: Verdana, sans-serif;}
 /* Month header */
 .month {
   padding: 70px 25px;
   width: 100%;
   background: #1abc9c;
 /* Month list */
 .month ul {
   margin: 0;
   padding: 0;
 .month ul li {
   color: white;
   font-size: 20px;
     text-transform: uppercase;
   letter-spacing: 3px;
 /* Previous button inside month header */
 .month .prev {
   float: left;
   padding-top: 10px;
 /* Next button */
 .month .next {
   float: right;
   padding-top: 10px;
 /* Weekdays (Mon-Sun) */
 .weekdays {
     margin: 0;
     padding: 10px 0;
 .weekdays li {
     display: inline-block;
     width: 13.6%;
     color: #666;
     text-align: center;
 /* Days (1-31) */
 .days {
     padding: 10px 0;
     background: #eee;
   margin: 0;
 .days li {
   list-style-type: none;
     display: inline-block;
     width: 13.6%;
     text-align: center;
     margin-bottom: 5px;
   color: #777;
 /* Highlight the "current" day */
 .days li .active {
     padding: 5px;
     background: #1abc9c;
   color: white !important


Hey, I'm Deepika a professional blogger, web designer, Android developer and software engineer. I like to gain every type of knowledge that's why i have done many courses in different fields like engineering and technology. I love thrills and travelling to new places and hills.


Leave a Reply

Avatar placeholder

Your email address will not be published.