ProfileDoneForNow

2024-09-19 10:28:04 +02:00
parent 4a90dbe25b
commit d68ed9d5c5
6 changed files with 244 additions and 3 deletions
--- a/css/profile.css
+++ b/css/profile.css
@ -0,0 +1,91 @@
+/* Base styles */
+body {
+    font-family: Arial, sans-serif;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    height: 100vh;
+    background-color: var(--background-color); /* Általános háttérszín */
+    color: var(--text-color); /* Általános szövegszín */
+  }
+  
+  /* Root variables */
+  :root {
+    --background-color: #f0f0f0; /* Általános háttérszín */
+    --text-color: #000; /* Általános szövegszín */
+    --card-bg-color: var(--color-white); /* Profilkártya háttérszín */
+    --profile-bg-color: #ffffff; /* Profilkártya háttérszín */
+    --profile-image-border: #ffffff; /* Profilkép keret színe */
+    --profile-background-image: url('../banner_example.jpg'); /* Háttérkép URL */
+  }
+  
+  /* Konténer a profilkártyához */
+  .container {
+    width: 100%;
+    max-width: 800px;
+    margin-top: 20px; /* Tér a tetején a filterhez */
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-bottom: 20px;
+  }
+  
+  /* Profilkártya stílusok */
+  .profile-card {
+    width: 100%;
+    border-radius: 1rem;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    overflow: hidden;
+    background-color: var(--color-white); /* Profilkártya háttérszín */
+    margin-top: 20px; /* Tér a kártya tetején */
+  }
+  
+  /* Háttér stílusok */
+  .background {
+    position: relative;
+    height: 200px; /* Háttér magasság */
+    background-color: var(--profile-bg-color); /* Háttér szín */
+    background-image: var(--profile-background-image); /* Háttérkép URL */
+    background-size: cover;
+    background-position: center;
+  }
+  
+  /* Profilkép stílusok */
+  .profile-image {
+    position: absolute;
+    bottom: -50px; /* Profilkép elhelyezése */
+    left: 50%;
+    transform: translateX(-50%);
+    width: 100px; /* Profilkép átmérő */
+    height: 100px; /* Profilkép átmérő */
+    border-radius: 50%; /* Kör alak */
+    overflow: hidden;
+    border: 5px solid var(--profile-image-border); /* Keret a profilkép körül */
+  }
+  
+  .profile-image img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+  
+  /* Profil információk stílusok */
+  .profile-info {
+    text-align: center;
+    padding: 70px 20px 20px; /* Tér a profilkép alatt */
+  }
+  
+  .name {
+    font-size: 1.5rem;
+    font-weight: 600;
+    color: var(--text-color); /* Név szín */
+  }
+  
+  .description {
+    font-size: 1rem;
+    color: var(--text-color); /* Leírás szín */
+    margin-top: 10px;
+  }
+