Create A Calendar Using HTML and CSS

In this article, we will create a calendar using HTML, and CSS. First, we need to know a little bit about HTML. If someone does not know HTML and CSS, they will not be able to improve the calendar. The main focus of this article is on HTML tags and how we will use CSS.

We will use a div tag & list tags, which will be used to create the layout of the calendar. This will give us an idea of ​​how the calendar is built using HTML. Later we will use the CSS layout to make the calendar design better.

 

Creating a Layout: In this section, we will first create a calendar layout using the div tag & list tag. So this will help us to find the structure of the calendar.

Add HTML

Creating a Layout: In this section, we will first create a calendar layout using the div tag & list tag. So this will help us to find the structure of the calendar

<!DOCTYPE html>
<html>
   <head>
      <title>CALANDER</title>
   </head>
   <body>
      <h1>Calendar</h1>
      <div class="year">
         <ul>
            <li>
               2021
            </li>
         </ul>
      </div>
      <div class="month">
         <ul>
            <li>
               November<br>
            </li>
         </ul>
      </div>
      <ul class="week">
         <li>Mo</li>
         <li>Tu</li>
         <li>We</li>
         <li>Th</li>
         <li>Fr</li>
         <li>Sa</li>
         <li>Su</li>
      </ul>
      <ul class="days">
         <li>1</li>
         <li>2</li>
         <li>3</li>
         <li>4</li>
         <li>5</li>
         <li>6</li>
         <li>7</li>
         <li>8</li>
         <li>9</li>
         <li>10</li>
         <li>11</li>
         <li>12</li>
         <li>13</li>
         <li>14</li>
         <li>15</li>
         <li>16</li>
         <li>17</li>
         <li>18</li>
         <li>19</li>
         <li>20</li>
         <li>21</li>
         <li>22</li>
         <li><span class="active">23</span></li>
         <li>24</li>
         <li>25</li>
         <li>26</li>
         <li>27</li>
         <li>28</li>
         <li>29</li>
         <li>30</li>
      </ul>
   </body>
</html>

Add CSS

We will use CSS features and attributes to design a calendar

* {
    box-sizing: border-box;
}

ul {
    list-style-type: none;
}

body {
    font-family: Verdana, san

.year {
    width: 100%;
    background: #a11d1d;
    text-align: center;
}

.year ul {
    margin: 0;
    padding: 0;
}

.year ul li {
    color: white;
    font-size: 25px;
}

.month {
    padding: 10px 25px;
    width: 100%;
    background: #ff8080;
    text-align: center;
}

.month ul {
    margin: 0;
    padding: 0;
}

.month ul li {
    color: white;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 3px;
}

.week {
    margin: 0;
    padding: 10px 0;
    background-color: #d9d9d9;
}

.week li {
    display: inline-block;
    width: 13%;
    color: #333;
    text-align: center;
}

.days {
    padding: 10px 0;
    background: #f2f2f2;
    margin: 0;
}

.days li {
    list-style-type: none;
    display: inline-block;
    width: 13.6%;
    text-align: center;
    margin-bottom: 5px;
    font-size: 12px;
    color: #777;
}

.days li .active {
    padding: 5px;
    background: #ff8080;
    color: white !important
}


/* Add media queries for smaller screens */

@media screen and (max-width:720px) {
    .weekdays li,
    .days li {
        width: 12.1%;
    }
}

@media screen and (max-width: 420px) {
    .weekdays li,
    .days li {
        width: 11.5%;
    }
    .days li .active {
        padding: 2px;
    }
}

@media screen and (max-width: 290px) {
    .weekdays li,
    .days li {
        width: 11.2%;
    }
}

Full Code

This code is the combination html & css code

<!DOCTYPE html>
<html>
   <head>
      <title>CALANDER</title>
      <style>
* {
    box-sizing: border-box;
}

ul {
    list-style-type: none;
}

body {
    font-family: Verdana, san

.year {
    width: 100%;
    background: #a11d1d;
    text-align: center;
}

.year ul {
    margin: 0;
    padding: 0;
}

.year ul li {
    color: white;
    font-size: 25px;
}

.month {
    padding: 10px 25px;
    width: 100%;
    background: #ff8080;
    text-align: center;
}

.month ul {
    margin: 0;
    padding: 0;
}

.month ul li {
    color: white;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 3px;
}

.week {
    margin: 0;
    padding: 10px 0;
    background-color: #d9d9d9;
}

.week li {
    display: inline-block;
    width: 13%;
    color: #333;
    text-align: center;
}

.days {
    padding: 10px 0;
    background: #f2f2f2;
    margin: 0;
}

.days li {
    list-style-type: none;
    display: inline-block;
    width: 13.6%;
    text-align: center;
    margin-bottom: 5px;
    font-size: 12px;
    color: #777;
}

.days li .active {
    padding: 5px;
    background: #ff8080;
    color: white !important
}


/* Add media queries for smaller screens */

@media screen and (max-width:720px) {
    .weekdays li,
    .days li {
        width: 12.1%;
    }
}

@media screen and (max-width: 420px) {
    .weekdays li,
    .days li {
        width: 11.5%;
    }
    .days li .active {
        padding: 2px;
    }
}

@media screen and (max-width: 290px) {
    .weekdays li,
    .days li {
        width: 11.2%;
    }
}
      </style 
   </head>
   <body>
      <h1>Calendar</h1>
      <div class="year">
         <ul>
            <li>
               2021
            </li>
         </ul>
      </div>
      <div class="month">
         <ul>
            <li>
               November<br>
            </li>
         </ul>
      </div>
      <ul class="week">
         <li>Mo</li>
         <li>Tu</li>
         <li>We</li>
         <li>Th</li>
         <li>Fr</li>
         <li>Sa</li>
         <li>Su</li>
      </ul>
      <ul class="days">
         <li>1</li>
         <li>2</li>
         <li>3</li>
         <li>4</li>
         <li>5</li>
         <li>6</li>
         <li>7</li>
         <li>8</li>
         <li>9</li>
         <li>10</li>
         <li>11</li>
         <li>12</li>
         <li>13</li>
         <li>14</li>
         <li>15</li>
         <li>16</li>
         <li>17</li>
         <li>18</li>
         <li>19</li>
         <li>20</li>
         <li>21</li>
         <li>22</li>
         <li><span class="active">23</span></li>
         <li>24</li>
         <li>25</li>
         <li>26</li>
         <li>27</li>
         <li>28</li>
         <li>29</li>
         <li>30</li>
      </ul>
   </body>
</html>

Output

Html calander

Leave a Comment

Your email address will not be published.