<body>
  <div class="container">
    <div class="content">

      <h3 id="greeting"></h3>
      <div class="day-month-flex">
        <h1 id="day"></h1>
        <h1 id="month"></h1>
      </div>
      <h1 id="date"></h1>
    </div>

</body>
*,
::before,
::after {
  box-sizing: border-box;
  margin: 0;
  font-family: sans-serif;
}

body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: -1;
  background-image: url("https://images.unsplash.com/photo-1647975930947-f5be714a1932?q=80&w=1374&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.container {
  margin: auto;
  width: 80%;
  color: white;
  flex-direction: column;
  margin-top: 6rem;
  /* border: 1px solid red; */
}

.day-month-flex {
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
}
h1,
h3 {
  text-align: center;
  border: 1px solid white;
  text-shadow: 2px 2px rgba(0, 0, 0, 0.4);
  padding: 2rem;
  
 
    background-color: rgba( 0, 100, 0, .3);
      &:hover{
          background-color: rgba( 0, 100, 0, .5)  
  }
}
h1 {
  width: 50%;
}
#date {
  width: 100%;
  border-top: 0;
  font-size: 120px;
}
#greeting {
  border-bottom: 0;
}
#day {
  border-right: 0;
}
.content {
  margin-bottom: 1rem;
}

// Greetings

const time = new Date().getHours();
let greeting;
if (time < 12) {
  greeting = "Good morning";
} else if (time < 18) {
  greeting = "Good Afternoon";
} else {
  greeting = "Good evening";
}
document.getElementById("greeting").innerHTML = greeting + ", today is...";

// ------------------------------
// Create a current date app
// ------------------------------
// create a varible that holds current date
const today = new Date();

//Get current month in words(not number)
 const month = today.toLocaleString("default", { month: "short" });
console.log(month);  //verify output 

//Get current day of the week in words
const currentDay = today.toLocaleString("default", { weekday: "short" });
console.log(currentDay);//verify output

const dateNumber = today.getDate(); // Get current date
console.log(dateNumber); // verify output


// Display data into the HTML page
document.getElementById("day").innerHTML = currentDay;
document.getElementById("month").innerHTML = month;
document.getElementById("date").innerHTML = dateNumber;

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.