In this article how to create glassmorphism calendar design template design simple using HTML, CSS and easy to understand and recreate the template as you can and instead of glassy look and create look class 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

Here, the code below just copy and paste on your code editor and recreate the code want you want.

Index.html



<html>
<head>
<title>GlassMorphism Calendar Design Template</title>
</head>
<body>
<div class="calendar">
<div class="calendar-bd">
 <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>
</div>
</div>
</div>
</body>
</html>

style.css



  body{
margin:0;
padding:0;
display:flex;
justify-content:center;
align-items:center;
height:100vh;
background:#1C2833 ;
font-family:'poppins',sans-serif;
}

.calendar-bd
{
position:relative;
background:rgba(255,255,255,0.1);
width:800px;
height:450px;
display:flex;
justify-content:space-between;   
align-items:center;
box-shadow:0 15px 35px rgba(0,0,0,.5); 
border-bottom:5px solid #3498DB;  
border-radius:8px;
backdrop-filter:blur(15px);

}
.calendar:before{
content: '';
position: absolute;
width:100px;
height:100px;
box-shadow:170px 220px #D0D3D4;
opacity:0.5;
border-radius:50%;

}
.calendar-bd .date{
width:400px;
padding:30px;
box-sizing:border-box;
}
.calendar-bd .image{
position:absolute;
top:0;
right:0;
width:400px;
height:100%;
background:#000;
}
.calendar-bd .image img{
width:400px;
height:100%;
background-position:contain;
border-radius:8px;
} 

.calendar-bd .date h3{
width:100%;
background:#3498DB;
margin:0 0 20px;
color:#fff;
padding:0;
font-size:24px;
font-weight:700;
text-align:center;
}

.calendar-bd .date .days{
display:flex;
flex-wrap:wrap;
color:#fff;
font-weight:600;

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

html calendar design template



Post a Comment

Previous Post Next Post