In this article how to create a Glass cool effect calendar design template design using HTML, CSS, and simple easy to understand and modify the template as can and glassy look and create look class saves 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 modify as you can.
Index.html
<html>
<head>
<title>Glass cool effect calendar design template using HTML and CSS</title>
</head>
<body>
<div class="calendar">
<div class="date">
<div class="h3color">
<h3>Jul<br/>'21</h3>
</div>
<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
<style>
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@700&display=swap');
body{
margin:0;
padding:0;
display:flex;
justify-content:center;
align-items:center;
height:100vh;
background-image:url(img/10.jpg);
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
font-family:'Lato',sans-serif;
}
.calendar
{
position:relative;
background:rgba(255,255,255,0.7);
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{
width:100px;
background-color:#363636;
margin:0 0 20px;
padding:10px;
font-size:30px;
font-weight:700;
text-align:center;
}
.h3color
{
text-align:center;
color:#fff;
}
.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;
}
</style>
