HTML CSS Calendar
Source code
HTML CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Baloo+Bhaijaan+2:wght@400;500;600;800&display=swap"
rel="stylesheet">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="calender">
<div class="date">
<h1>January</h1>
<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">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 active">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 class="img">
<img src="./img.jpg" alt="">
</div>
</div>
</div>
</body>
</html>
CSS CODE
body {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Baloo Bhaijaan 2', cursive;
}
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.calender {
width: 800px;
height: 450px;
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
box-shadow: 2px 4px 6px rgba(0, 0, 0, .4);
border-radius: 20px;
background-color: #fff;
}
.calender .date {
width: 400px;
padding: 30px;
box-sizing: border-box;
}
.calender .date .days {
display: flex;
flex-wrap: wrap;
}
.calender .date .days .day,
.calender .date .days .number {
width: 45px;
height: 45px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
transition: all .5s ease;
}
.calender .date .days .day {
font-size: 20px;
font-weight: 800;
}
.calender .date .days .number {
font-size: 14px;
}
.calender .date .days .day:hover,
.calender .date .days .number:hover {
background-color: rgba(0, 0, 0, .1);
}
.calender .date .days .day:first-child,
.calender .date .days .number:nth-child(7n+1) {
color: brown;
font-weight: 600;
}
.calender .date .days .active {
background-color: #000;
color: #fff;
}
.calender .date .days .active:hover {
background-color: #000;
color: #fff;
}
.img {
position: absolute;
top: 0;
right: 0;
width: 400px;
height: 100%;
}
.img img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 0 20px 20px 0;
}
Facebook Page: https://web.facebook.com/Code-With-Me-106904145192164
Instagram: https://www.instagram.com/codewithme643/
Youtube: https://youtu.be/KfwGaJWaBf0
0 Comments