kira
/
PortfolioPage
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Photo Banner now presenting correctly with image fitting and text in center

This commit is contained in:
Kira 2023-02-15 13:44:13 -08:00
parent 81bc26368e
commit d38d6d6c33
4 changed files with 48 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
PortfolioPage/Shared/NavMenu_v2.razor
View File

@ -1,4 +1,5 @@
<nav class="navbar"> 
<nav class="navbar">
<div class="navbar-header"> <div class="navbar-header">
<a class="navbar-brand m-3 override-brand" href="\">Kira Jiroux</a> <a class="navbar-brand m-3 override-brand" href="\">Kira Jiroux</a>
@ -38,3 +39,6 @@
</nav> </nav>

28
PortfolioPage/Shared/NavMenu_v2.razor.css
View File

@ -44,3 +44,31 @@ a.override-brand {
background-color: white; background-color: white;
} }
.container {
position: relative;
text-align: center;
margin: 0;
padding: 0;
top: 0;
max-width: 100vw;
height: 660px;
/*
background-size: cover;
background-position: center;
background-repeat: no-repeat;
*/
border-bottom: 3px solid hotpink;
border-top: 3px solid hotpink;
}
.center {
margin: auto;
text-align: center;
width: 50%;
padding: 70px 0;
font-size: 100px;
color: white;
border: 1px dashed hotpink;
}

4
PortfolioPage/Shared/PhotoBanner.razor
View File

@ -1,6 +1,6 @@
<div class="container"> <div class="container">
<img src="@photoUrl" class="photo-banner" /> <img src="@photoUrl" style="width:100%; height: 600px;">
<div class="title">@title</div> <div class="centered">@title</div>
</div> </div>
@code { @code {

25
PortfolioPage/Shared/PhotoBanner.razor.css
View File

@ -1,29 +1,30 @@
body { body {
} }
.container{ .container {
position: relative; position: relative;
text-align: center; text-align: center;
margin: 0; margin: 0;
padding: 0; padding: 0;
top: 0; top: 0;
width: 100%; max-width: 100vw;
height: 660px;
background-size: cover;
background-position: center; border-bottom: 3px solid hotpink;
background-repeat: no-repeat; border-top: 3px solid hotpink;
} }
.photo-banner {
width: 100vw;
max-height: 660px;
}
.title {
/* Centered text */
.centered {
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(10%, -50%); transform: translate(-50%, -50%);
font-size: 100px; font-size: 100px;
color: white; color: white;
} }