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