ProfileDoneForNow
This commit is contained in:
BIN
banner_example.jpg
Normal file
BIN
banner_example.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 MiB |
@ -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 {
|
||||
|
||||
91
css/profile.css
Normal file
91
css/profile.css
Normal file
@ -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;
|
||||
}
|
||||
|
||||
149
pages/profile.html
Normal file
149
pages/profile.html
Normal file
@ -0,0 +1,149 @@
|
||||
<!doctype html>
|
||||
<html lang="hu">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Saját Profil</title>
|
||||
<link rel="stylesheet" href="../css/profile.css">
|
||||
<link rel="stylesheet" href="../css/navbar.css">
|
||||
<link rel="stylesheet" href="../css/feedback.css">
|
||||
<link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet"/>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="navbar-container"></div> <!-- Oldalsáv helye -->
|
||||
|
||||
<div class="container">
|
||||
<div class="profile-card">
|
||||
<div class="background">
|
||||
<div class="profile-image">
|
||||
<img src="../profile_example.png" alt="Profilkép">
|
||||
</div>
|
||||
</div>
|
||||
<div class="profile-info">
|
||||
<h1 class="name">Felhasználó Neve</h1>
|
||||
<p class="description">Itt található a felhasználó rövid leírása, amely bemutatja a profil tulajdonosát.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Bejegyzés létrehozás kártya -->
|
||||
<div class="create-post-card">
|
||||
<div class="profile-section">
|
||||
<img src="../profile_example.png" alt="Profile" class="profile-img" />
|
||||
<input type="text" placeholder="Mit szeretnél megosztani?" id="postInput" />
|
||||
</div>
|
||||
<div class="input-container">
|
||||
<!-- Új küldés gomb -->
|
||||
<button id="submitPostBtn">
|
||||
<div class="svg-wrapper-1">
|
||||
<div class="svg-wrapper">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
height="24"
|
||||
>
|
||||
<path fill="none" d="M0 0h24v24H0z"></path>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M1.946 9.315c-.522-.174-.527-.455.01-.634l19.087-6.362c.529-.176.832.12.684.638l-5.454 19.086c-.15.529-.455.547-.679.045L12 14l6-8-8 6-8.054-2.685z"
|
||||
></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<span>Küldés</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Példa bejegyzés kártya -->
|
||||
<div class="card-container">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<img src="../profile_example.png" alt="Profile" class="card-profile-img" />
|
||||
<div class="card-user-info">
|
||||
<h2>Áron</h2>
|
||||
<p>2 órája</p>
|
||||
</div>
|
||||
</div>
|
||||
<p>Ez egy példa szöveg a kártyán belül.</p>
|
||||
<div class="post-actions">
|
||||
<button class="like-btn" onclick="toggleLike(this)">
|
||||
<i class="bx bx-like"></i> Like
|
||||
</button>
|
||||
<button class="comment-btn">
|
||||
<i class="bx bx-comment"></i> Komment
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- MÉGTÖBB Példa bejegyzés kártya -->
|
||||
<div class="card-container">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<img src="../profile_example.png" alt="Profile" class="card-profile-img" />
|
||||
<div class="card-user-info">
|
||||
<h2>Áron</h2>
|
||||
<p>2 órája</p>
|
||||
</div>
|
||||
</div>
|
||||
<p>Ez egy példa szöveg a kártyán belül.</p>
|
||||
<div class="post-actions">
|
||||
<button class="like-btn" onclick="toggleLike(this)">
|
||||
<i class="bx bx-like"></i> Like
|
||||
</button>
|
||||
<button class="comment-btn">
|
||||
<i class="bx bx-comment"></i> Komment
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-container">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<img src="../profile_example.png" alt="Profile" class="card-profile-img" />
|
||||
<div class="card-user-info">
|
||||
<h2>Áron</h2>
|
||||
<p>2 órája</p>
|
||||
</div>
|
||||
</div>
|
||||
<p>Ez egy példa szöveg a kártyán belül.</p>
|
||||
<div class="post-actions">
|
||||
<button class="like-btn" onclick="toggleLike(this)">
|
||||
<i class="bx bx-like"></i> Like
|
||||
</button>
|
||||
<button class="comment-btn">
|
||||
<i class="bx bx-comment"></i> Komment
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-container">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<img src="../profile_example.png" alt="Profile" class="card-profile-img" />
|
||||
<div class="card-user-info">
|
||||
<h2>Áron</h2>
|
||||
<p>2 órája</p>
|
||||
</div>
|
||||
</div>
|
||||
<p>Ez egy példa szöveg a kártyán belül.</p>
|
||||
<div class="post-actions">
|
||||
<button class="like-btn" onclick="toggleLike(this)">
|
||||
<i class="bx bx-like"></i> Like
|
||||
</button>
|
||||
<button class="comment-btn">
|
||||
<i class="bx bx-comment"></i> Komment
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="../js/navbar.js"></script> <!-- Oldalsáv JS -->
|
||||
<script src="../js/profile.js"></script> <!-- Profil oldal JS -->
|
||||
</body>
|
||||
|
||||
</html>
|
||||
BIN
profile_example.png
Normal file
BIN
profile_example.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 173 KiB |
@ -38,7 +38,7 @@
|
||||
<span class="tooltip">Ismerősök</span>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<a href="profile.html">
|
||||
<i class="bx bx-user-pin"></i>
|
||||
<span class="title">Profil</span>
|
||||
</a>
|
||||
|
||||
Reference in New Issue
Block a user