Profile page CSS fix
This commit is contained in:
parent
554228e917
commit
563ed5ffe3
3 changed files with 48 additions and 20 deletions
|
@ -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>
|
||||
|
||||
|
||||
|
||||
|
|
|
@ -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"
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue