im fixed the profile and add files

MritAsid · Jul 14, 2024 · 11128f3 · 11128f3
1 parent 5a5d546
commit 11128f3
Show file tree

Hide file tree

Showing 3 changed files with 561 additions and 12 deletions.
diff --git a/css/files.css b/css/files.css
@@ -0,0 +1,61 @@
+/* Start Files Page */
+.files-page {
+    flex-direction: row-reverse;
+    align-items: flex-start;
+  }
+  @media (max-width: 767px) {
+    .files-page {
+      flex-direction: column;
+      align-items: normal;
+    }
+  }
+  .files-page .files-stats {
+    min-width: 260px;
+  }
+  .files-page .files-stats .icon {
+    width: 40px;
+    height: 40px;
+    margin-left: 10px;
+  }
+  .files-page .files-stats .size {
+    margin-right: auto;
+  }
+  .files-page .files-stats .blue {
+    background-color: rgb(0 117 255 / 20%);
+  }
+  .files-page .files-stats .green {
+    background-color: rgb(34 197 94 / 20%);
+  }
+  .files-page .files-stats .red {
+    background-color: rgb(244 67 54 / 20%);
+  }
+  .files-page .files-stats .orange {
+    background-color: rgb(245 158 11 / 20%);
+  }
+  .files-page .files-stats .upload {
+    margin: 15px auto 0;
+    padding: 10px 15px;
+    transition: 0.3s;
+  }
+  .files-page .files-stats .upload:hover {
+    background-color: var(--blue-alt-color);
+  }
+  .files-page .files-stats .upload:hover i {
+    animation: go-up 0.8s infinite;
+  }
+  .files-page .files-content {
+    flex: 1;
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  }
+  .files-page .files-content img {
+    width: 64px;
+    height: 64px;
+    transition: 0.3s;
+  }
+  .files-page .files-content .file:hover img {
+    transform: rotate(5deg);
+  }
+  .files-page .files-content .info {
+    border-top: 1px solid #eee;
+  }
+  /* End Files Page */
diff --git a/css/profile.css b/css/profile.css
@@ -46,26 +46,34 @@
   }
   /* End overview */
   .stiging {
-    display: flex;
-    /* justify-content: space-between;
-    align-items: center; */
-    margin: 0 5px 20px;
-    background-color: white;
-    padding: 20px;
-    border-radius: 10px;
-    flex-direction: column;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin: 0 5px 20px;
+      background-color: white;
+      padding: 20px;
+      border: 2px solid #00fffc ;
+      border-radius: 10px;
+
   }
  .stiging .sts {
   font-size: 30px;
-    color: var(--blue-color);
+    color: #00fffc;
+    margin-right: 10px;
  }
   .stiging .rond {
     border-radius: 20px;
-    width: 80%;
+    /* width: 300px; */
+    min-width: 300px;
+    max-width: 400px;
     overflow: hidden;
     display: flex;
-    border: 4px solid black;
+    border: 2px dashed #00fffc;
     margin: 0 auto 10px;
+    align-items: center;
+    justify-content: center;
+    max-height: 250px;
+    /* background-color: black; */
 
   }
 
@@ -77,12 +85,17 @@
 @media (max-width: 767px) {
   .stiging {
     padding: 10px;
+    flex-direction: column;
   }
 .stiging .rond {
-width: 100%;
+width: 98%;
+max-height: 90%;
 }
 .stiging .sts {
   font-size: 20px;
+  margin-top: 0px;
+  margin-bottom: 5px;
+  margin-right: 0px;
 }
 }
 /* Start Avatar-box  */