Calendar Card UI Design

<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Calendar Card UI Design </title>
    <link rel="stylesheet" href="style.css">
    
    <style>
    
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

body{
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #051320;
}

.calendar{
  position: relative;
  width: 260px;
}

.calendar:before{
  content: '';
  position: absolute;
  width: 80px;
  height: 80px;
  box-shadow: 206px 208px #ffc300, -35px 70px #FF5733;
  border-radius: 50%;
}

.calendar .calendar-body{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(15px);
  border-bottom: 6px solid #4285F4;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  box-shadow: 0 5px 25px rgb(1 1 1 / 15%);
}

.calendar .calendar-body .month-name{
  color: #fff;
  background: #4285F4;
  width: 100%;
  font-size: 1.6em;
  text-align: center;
  font-weight: 400;
  padding: 5px 0;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.calendar .calendar-body .day-name{
  color: #fff;
  font-size: 1.2em;
  font-weight: 400;
  margin-top: 20px;
}

.calendar .calendar-body .date-number{
  color: #fff;
  font-size: 6em;
  font-weight: 600;
  line-height: 1.2em;
}

.calendar .calendar-body .year{
  color: #fff;
  font-size: 1.2em;
  font-weight: 400;
  margin-bottom: 20px;
}
          
    
    </style>
  </head>
  <body>

<div class="calendar">
      <div class="calendar-body">
        <span class="month-name">Month</span>
        <span class="day-name">Day</span>
        <span class="date-number">00</span>
        <span class="year">0000</span>
      </div>
    </div>

document.querySelector(".month-name").innerHTML = monthName;
    document.querySelector(".day-name").innerHTML = dayName;
    document.querySelector(".date-number").innerHTML = dayNumber;
    document.querySelector(".year").innerHTML = year;
    </script>

</body>
</html>

demo

Code Preview

Popular Posts

Pages

Calendar Card UI Design