updated css

css/card.css

@@ -9,15 +9,18 @@
     border-radius: 10px;
 }
 
-.cardicon>img {
+.cardicon > img {
     width: 100%;
     height: 100%;
 }
 
 .card {
-    position: absolute;
+    /* position: absolute;
     top: 10px;
-    right:10px;
+    right: 10px; */
+    position: relative;
+    /* top: 10px; */
+    /* right: 10px; */
     padding: 10px;
     border-radius: 10px;
     overflow: hidden;
@@ -28,7 +31,7 @@
     z-index: 10;
 }
 
-.card>.text>.mail {
+.card > .text > .mail {
     position: relative;
     font-size: 17px;
     line-height: 20px;
@@ -37,14 +40,14 @@
     text-decoration: none;
 }
 
-.card>.text>.username {
+.card > .text > .username {
     position: relative;
     margin: 0;
     font-size: 32px;
     line-height: 36px;
 }
 
-.card>.text>.mail::after {
+.card > .text > .mail::after {
     content: "";
     position: absolute;
     bottom: 0;
@@ -55,7 +58,7 @@
     transition: 0.3s;
 }
 
-.card>.text>h2::after {
+.card > .text > h2::after {
     content: "";
     position: absolute;
     bottom: 0;
@@ -66,7 +69,7 @@
     transition: 0.3s;
 }
 
-.card>.text {
+.card > .text {
     opacity: 0;
     position: absolute;
     bottom: 30px;
@@ -81,26 +84,29 @@
     }
 
     .card:hover {
+        position: absolute;
+        top: 10px;
+        right: 10px;
         width: 300px;
         height: 300px;
     }
 
-    .card:hover>.cardicon {
+    .card:hover > .cardicon {
         top: 30px;
         right: 30px;
         width: 150px;
         height: 150px;
     }
 
-    .card>.text>.username:hover::after {
+    .card > .text > .username:hover::after {
         width: 50%;
     }
 
-    .card>.text>.mail:hover::after {
+    .card > .text > .mail:hover::after {
         width: 100%;
     }
 
-    .card:hover>.text {
+    .card:hover > .text {
         opacity: 1;
     }
-}
+}

css/header.css

@@ -4,38 +4,16 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 10px 70px 10px 10px;
+    padding: 10px;
+    /* padding: 10px 70px 10px 10px; */
+    background-color: red;
 }
 
 .header-text {
-    /* width: 100%; */
     text-align: center;
     text-shadow: white 0 0 30px;
 }
 
-.usericon {
-    width: 60px;
-    height: 60px;
-    overflow: hidden;
-    border-radius: 100%;
-    transition: 0.3s;
-}
-
-.usericon > img {
-    width: 100%;
-    height: 100%;
-}
-
-.user {
-    display: flex;
-    align-items: center;
-}
-
-.username {
-    text-shadow: white 0 0 30px;
-    margin: 0 10px;
-}
-
 .time {
     cursor: pointer;
     transition: 0.3s;
@@ -48,12 +26,6 @@
 }
 
 @media (hover: hover) {
-    .usericon:hover {
-        border-radius: 10px;
-        transform: translateY(-10px);
-        box-shadow: white 0 0 30px;
-    }
-
     .time:hover {
         text-shadow: white 0 0 20px;
     }

index.html

@@ -15,7 +15,7 @@
         <div class="header">
             <h1 class="header-text">Dashboard</h1>
             <h1 class="time"></h1>
-            <div class="user">
+            <div style="width: 60px; height: 60px; position: relative">
                 <div class="card" tabindex="0">
                     <span class="cardicon">
                         <img src="img/user.jpeg" alt="" />

js/time.js

@@ -1,38 +1,55 @@
-const timeblock = document.querySelector('.time')
+const timeblock = document.querySelector(".time");
 
-let intervalid = true
+let intervalid = true;
+
+const renderTime = () => {
+  intervalid
+    ? (timeblock.innerHTML = getTimeNow())
+    : (timeblock.innerHTML = [getDateNow(), getWeekDayNow()].join("  "));
+};
 
 setInterval(() => {
-    intervalid?timeblock.innerHTML = getTimeNow():timeblock.innerHTML = [getDateNow(), getWeekDayNow()].join('  ')
-}, 1000)
+  renderTime();
+}, 1000);
 
 const getTimeNow = () => {
-    let date = new Date()
-    let hours = date.getHours()
-    if (hours < 10) hours = '0'+hours
-    let minutes = date.getMinutes()
-    if (minutes < 10) minutes = '0'+minutes
-    let seconds = date.getSeconds()
-    if (seconds < 10) seconds = '0'+seconds
-    return [hours, minutes, seconds].join(':')
-}
+  let date = new Date();
+  let hours = date.getHours();
+  if (hours < 10) hours = "0" + hours;
+  let minutes = date.getMinutes();
+  if (minutes < 10) minutes = "0" + minutes;
+  let seconds = date.getSeconds();
+  if (seconds < 10) seconds = "0" + seconds;
+  return [hours, minutes, seconds].join(":");
+};
 
 const getDateNow = () => {
-    let date = new Date()
-    let year = date.getFullYear()
-    let month = date.getMonth()
-    if (month < 10) month = '0'+month
-    let day = date.getDate()
-    if (day < 10) day = '0'+day
-    return [day, month, year].join('.')
-}
+  let date = new Date();
+  let year = date.getFullYear();
+  let month = date.getMonth();
+  if (month < 10) month = "0" + month;
+  let day = date.getDate();
+  if (day < 10) day = "0" + day;
+  return [day, month, year].join(".");
+};
 
 const getWeekDayNow = () => {
-    let date = new Date()
-    let weekdays = ['monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']
-    return weekdays[date.getDay()-1]
-}
+  let date = new Date();
+  let weekdays = [
+    "monday",
+    "Tuesday",
+    "Wednesday",
+    "Thursday",
+    "Friday",
+    "Saturday",
+    "Sunday",
+  ];
+  return weekdays[date.getDay() - 1];
+};
 
-timeblock.addEventListener('click', () => {
-    intervalid = !intervalid
-})
+timeblock.addEventListener("click", () => {
+  intervalid = !intervalid;
+  renderTime();
+});
+
+renderTime();