Profile page CSS fix

This commit is contained in:
femsci 2023-09-30 21:01:32 +02:00
parent 554228e917
commit 563ed5ffe3
Signed by: femsci
GPG key ID: 08F7911F0E650C67
3 changed files with 48 additions and 20 deletions

View file

@ -1,15 +1,20 @@
@page "/userprofile"
@page "/user/{username}"
@code {
private string UserName = "John Doe";
[Parameter]
public string Username { get; set; } = "johndoeUwU";
private string FullName = "meow uwu";
private string Bio = "Software Developer";
private List<string> Skills = new List<string> { "C#", "ASP.NET Core", "Blazor" };
}
<div class="profile">
<div class="user-profile">
<img class="background" src="images/background.jpg" alt="Background" />
<img class="userprofileimage" src="images/kuba.jpg" alt="Profile Picture" />
<h1>@UserName</h1>
<img class="profile-img" src="images/kuba.jpg" alt="Profile Picture" />
<div class="profile-names">
<h1 class="profile-username">@($"@{Username}")</h1>
<h3 class="profile-fullname">(@FullName)</h3>
</div>
<p>@Bio</p>
<h2>Skills</h2>
<ul>
@ -19,6 +24,3 @@
}
</ul>
</div>

View file

@ -8,12 +8,22 @@
}
},
"profiles": {
"http": {
"commandName": "Project",
"dotnetRunMessages": true,
"launchBrowser": true,
"inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
"applicationUrl": "http://localhost:5162",
"environmentVariables": {
"ASPNETCORE_ENVIRONMENT": "Development"
}
},
"https": {
"commandName": "Project",
"dotnetRunMessages": true,
"launchBrowser": true,
"inspectUri": "{wsProtocol}://catboy.men/_framework/debug/ws-proxy?browser={browserInspectUri}",
"applicationUrl": "http://0.0.0.0:2137",
"inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
"applicationUrl": "https://localhost:7047;http://localhost:5162",
"environmentVariables": {
"ASPNETCORE_ENVIRONMENT": "Development"
}

View file

@ -87,16 +87,6 @@ a,
animation-timing-function: linear;
}
.userprofileimage {
position: absolute;
top: 22rem; /* Adjust as needed */
left: 15rem; /* Adjust as needed */
z-index: 1; /* Place the profile picture above the background image */
max-width: 200px;
max-height: 200px;
border-radius: 200px;
}
@keyframes spin {
0% {
transform: rotate(0deg);
@ -106,3 +96,29 @@ a,
transform: rotate(360deg);
}
}
.profile-img {
position: absolute;
top: 22rem; /* Adjust as needed */
left: 15rem; /* Adjust as needed */
z-index: 1; /* Place the profile picture above the background image */
max-width: 200px;
max-height: 200px;
border-radius: 200px;
}
.profile-names {
width: fit-content;
margin-top: 0.5rem;
}
.profile-username {
font-size: 2.5rem;
margin-bottom: 0;
}
.profile-fullname {
font-size: 1.2rem;
margin-top: 0;
color: gray;
}