Calendar Card UI Design | Glassmorphism - HTML, CSS & Javascript | Coding Snow | Creative Web Design Tutorials

Description

Hello everyone! In this video, you will learn how to design an awesome working glassmorphism calendar card UI design with current month name, day name, day number, and year using HTML, CSS, and Vanilla Javascript. Hope this video will be helpful.

Source Codes

index.html

<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Glassmorphism Calendar Card UI Design - HTML, CSS & Javascript</title>
    <link rel="stylesheet" href="style.css">
  </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>

style.css

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

Download Source Files

If the download didn't start automatically, click here.

Monday, March 29, 2021

Calendar Card UI Design | Glassmorphism - HTML, CSS & Javascript

Description

Source Codes

index.html

style.css

Post a Comment

Featured Post

Complete Responsive Personal Portfolio Website - Using Html, CSS & Javascript

Popular Posts

Tags

Contact Form

Monday, March 29, 2021

Calendar Card UI Design | Glassmorphism - HTML, CSS & Javascript

Description

Source Codes

index.html

style.css

Post a Comment

Follow Us on

Featured Post

Complete Responsive Personal Portfolio Website - Using Html, CSS & Javascript

Popular Posts

Tags

Contact Form