usercard

css/user.css

@@ -0,0 +1,40 @@
+.usercard {
+    width: 300px;
+    height: 300px;
+    background: linear-gradient(rgb(109, 107, 107), rgb(177, 175, 175));
+    border-radius: 16px;
+    padding: 0 30px 30px;
+    transition: 0.3s;
+    display: grid;
+    text-align: start;
+    align-items: center;
+}
+
+.usercard:hover {
+    transform: scale(1.03);
+}
+
+.usercard>.avatar {
+    block-size: 185px;
+    display: grid;
+    align-items: center;
+}
+
+.usercard>.avatar>.usericon {
+    width: 100px;
+    height: 100px;
+}
+
+.usercard>.username {
+    margin: 0;
+    font-size: 32px;
+    line-height: 36px;
+}
+
+.usercard>.mail {
+    font-size: 17px;
+    line-height: 20px;
+    font-weight: 400;
+    color: inherit;
+}
+

index.html

@@ -7,6 +7,7 @@
     <link rel="stylesheet" href="css/icons.css">
     <link rel="stylesheet" href="css/header.css">
     <link rel="stylesheet" href="css/search.css">
+    <link rel="stylesheet" href="css/user.css">
     <title>Dashboard</title>
 </head>
 <body>
@@ -14,9 +15,9 @@
         <h1 class="header-text">Dashboard</h1>
         <h1 class="time"></h1>
         <div class="user">
-            <h2 class="username">Tola Mironcenko</h2>
+            <h2 class="username">Tola</h2>
             <div class="usericon">
-                <img src="img/user-icon.jpg" alt="usericon">
+                <img src="img/user.jpeg" alt="usericon">
             </div>
         </div>
     </div>
@@ -24,11 +25,6 @@
         <input type="text" name="search-in-google" id="search-in-google" placeholder="Search in Google">
     </div>
     <div class="icons">
-        <!-- <div class="icon">
-            <a href="https://google.com">
-                <img src="img/google-icon.png" alt="google-icon">
-            </a>
-        </div> -->
         <div class="icon">
             <a href="https://web.telegram.org/k/">
                 <img src="img/telegram-icon.jpeg" alt="telegram-icon">
@@ -60,6 +56,16 @@
             </a>
         </div>
     </div>
+    <div class="usercard">
+        <div class="avatar">
+            <div class="usericon">
+                <img src="img/user.jpeg" alt="usericon">
+            </div>
+        </div>
+        <h2 class="username">Tola</h2>
+        <h2 class="mail">tolamironcenko@icloud.com</h2>
+        <h2 class="mail">tolamironcenko@gmail.com</h2>
+    </div>
     <script src="js/time.js"></script>
     <script src="js/search.js"></script>
 </body>