diff --git a/banner_example.jpg b/banner_example.jpg new file mode 100644 index 0000000..01ff5cb Binary files /dev/null and b/banner_example.jpg differ diff --git a/css/feedback.css b/css/feedback.css index e2f9d45..c10bd18 100644 --- a/css/feedback.css +++ b/css/feedback.css @@ -12,7 +12,7 @@ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); padding: 20px; width: 100%; - max-width: 600px; + max-width: 800px; margin-bottom: 20px; } @@ -112,7 +112,8 @@ button:active { flex-direction: column; gap: 20px; width: 100%; - max-width: 600px; + max-width: 800px; + margin-bottom: 20px; } .card { diff --git a/css/profile.css b/css/profile.css new file mode 100644 index 0000000..5bc26a4 --- /dev/null +++ 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; + } + \ No newline at end of file diff --git a/pages/profile.html b/pages/profile.html new file mode 100644 index 0000000..45ec8e3 --- /dev/null +++ b/pages/profile.html @@ -0,0 +1,149 @@ + + + + + + + Saját Profil + + + + + + + + + +
+
+
+
+ Profilkép +
+
+
+

Felhasználó Neve

+

Itt található a felhasználó rövid leírása, amely bemutatja a profil tulajdonosát.

+
+
+
+ +
+
+ Profile + +
+
+ + +
+
+ + + +
+
+
+ Profile + +
+

Ez egy példa szöveg a kártyán belül.

+
+ + +
+
+
+ + +
+
+
+ Profile + +
+

Ez egy példa szöveg a kártyán belül.

+
+ + +
+
+
+
+
+
+ Profile + +
+

Ez egy példa szöveg a kártyán belül.

+
+ + +
+
+
+
+
+
+ Profile + +
+

Ez egy példa szöveg a kártyán belül.

+
+ + +
+
+
+ + + + + + diff --git a/profile_example.png b/profile_example.png new file mode 100644 index 0000000..f104909 Binary files /dev/null and b/profile_example.png differ diff --git a/src/navbar.html b/src/navbar.html index 767f921..4a0c01c 100644 --- a/src/navbar.html +++ b/src/navbar.html @@ -38,7 +38,7 @@ Ismerősök
  • - + Profil