In this article how to create Classic Mountain left side calendar design template design simple using HTML, CSS and easy to understand and modify the template as you can and classic look and 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 classic Mountain left side image code below just copy and paste on your code editor and recreate the code want you want.

Index.html



<html>
<head>
<title>Classic Mountain Calendar Design Template</title>
</head>
<body>
<div class="calendar">
<div class="calendar-bd">
<div class="image">
<img src="img/5.jpg">
</div>
 <div class="date">
  <h3>July</h3>
 <div class="days">
   <div class="day">S</div>
   <div class="day">M</div>
   <div class="day">T</div>
   <div class="day">W</div>
   <div class="day">T</div>
   <div class="day">F</div>
   <div class="day">S</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>
</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);
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:relative;
top:0;
left:0;
width:400px;
height:100%;
background:#000;
border-radius:8px;
}
.calendar-bd .image img{
width:400px;
height:100%;
background-position:contain;

} 

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

.calendar-bd .date .days{
display:flex;
flex-wrap:wrap;
color:#363636;
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:#363636;
color:#fff;
border-radius:50%;
cursor:pointer;
}
  

html calendar design template



Post a Comment

Previous Post Next Post