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