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.
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;
}
