In this article how to create mat calendar design template design simple using HTML, CSS and easy to understand and recreate the template has you can and instead of old look and create look classy save you some time and our template satisfaction And download button below.

html calendar design template

Here, we can create two empty file

  • Index.html
  • Style.css

HTML and CSS calendar design are started code here, Just copy the codes and paste on your code editor and before create the above empty file or download the code below and recreate the code.

Index.html



<html>
<head>
</head>
<body>
<div class="calendar">
<div class="date">
<h3>July</h3>
<div class="days">
   <div class="day">Sun</div>
   <div class="day">Mon</div>
   <div class="day">Tue</div>
   <div class="day">Wed</div>
   <div class="day">Thu</div>
   <div class="day">Fri</div>
   <div class="day">Sat</div>
   <div class="number"></div>
   <div class="number">1</div>
   <div class="number">2</div>
   <div class="number">3</div>
   <div class="number">4</div>
   <div class="number">5</div>
   <div class="number">6</div>
   <div class="number active">7</div>
   <div class="number">8</div>
   <div class="number">9</div>
   <div class="number">10</div>
   <div class="number">11</div>
   <div class="number">12</div>
   <div class="number">13</div>
   <div class="number">14</div>
   <div class="number">15</div>
   <div class="number">16</div>
   <div class="number">17</div>
   <div class="number">18</div>
   <div class="number">19</div>
   <div class="number">20</div>
   <div class="number">21</div>
   <div class="number">22</div>
   <div class="number">23</div>
   <div class="number">24</div>
   <div class="number">25</div>
   <div class="number">26</div>
   <div class="number">27</div>
   <div class="number">28</div>
   <div class="number">29</div>
   <div class="number">30</div>
   <div class="number">31</div>
</div>
<div class="image">
<img src="img/3.jpg">
</div>
<div>
</div>
</body>
</html>
  

style.css



  body{
margin:0;
padding:0;
display:flex;
justify-content:center;
align-items:center;
height:100vh;
background:#352b48;
font-family:'poppins',sans-serif;
}
.calendar
{
position:relative;
background:#fff;
width:800px;
height:450px;
display:flex;
justify-content:space-between;   
align-items:center;
border:15px solid #fff;
box-shadow:0 15px 35px rgba(0,0,0,.5);    
}
.calendar .date{
width:400px;
padding:30px;
box-sizing:border-box;
}
.calendar .image{
position:absolute;
top:0;
right:0;
width:400px;
height:100%;
background:#000;
}
.calendar .image img{
width:400px;
height:100%;
background-position:contain;
} 

.calendar .date h3{
margin:0 0 20px;
padding:0;
font-size:24px;
font-weight:500;
text-align:center;
}

.calendar .date .days{
display:flex;
flex-wrap:wrap;
}
.calendar .date .days .day,
.calendar .date .days .number
{
width:48px;
height:48px;
display:flex;
justify-content:center;
align-items:center;
}
.calendar .date .days .day:first-child,
.calendar .date .days .number:nth-child(7n+1)
{
color:red;
}
.calendar .date .days .number.active{
background:#352b48;
color:#fff;
border-radius:50%;
cursor:pointer;
}
  

html calendar design template



Post a Comment

Previous Post Next Post