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