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

PhotoBanner isn't working quite as I would like it; the text isn't explicitly centered in the image due to the 100vw set on the image. It's good enough for now, but I would like to have it be centered. 

Added a little container for the landing page to encompass the blurb.
This commit is contained in:
Kira 2022-12-12 13:17:12 -08:00
parent 37381d86f2
commit 81bc26368e
3 changed files with 16 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
PortfolioPage/Pages/Index.razor
View File

@ -4,8 +4,11 @@
<div class="page-layout"> <div class="page-layout">
<h1>Hello, world!</h1> <div class="blurb">
<h5>Welcome to my corner of the internet! My name is Kira Jiroux. I am a graduate of Oregon State University, with a Bachelor of Science in Computer Science, with an emphasis on VR/AR and Computer Graphics.</h5> <h1 style="color: #3d8361;">Hello, World!</h1>
<h5>Welcome to my corner of the Internet! </h5>
<h5>My name is Kira Jiroux. I am a graduate of OSU - Oregon State University - with a Bachelor of Science in Computer Science, with an emphasis on VR/AR and Computer Graphics.</h5>
</div>
</div> </div>

8
PortfolioPage/Pages/Index.razor.css
View File

@ -8,4 +8,12 @@
padding: 10px; padding: 10px;
margin-top: 60px; margin-top: 60px;
margin-bottom: 60px; margin-bottom: 60px;
}
.blurb {
width: 60%;
background-color: #eef2e6;
padding: 15px;
border-radius: 25px;
border: 2px solid #3b5249;
} }

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

@ -4,7 +4,7 @@
.container{ .container{
position: relative; position: relative;
text-align: center; text-align: center;
margin: auto; margin: 0;
padding: 0; padding: 0;
top: 0; top: 0;
width: 100%; width: 100%;
@ -12,11 +12,10 @@
background-size: cover; background-size: cover;
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
border: 1px solid red;
} }
.photo-banner { .photo-banner {
width: 100%; width: 100vw;
max-height: 660px; max-height: 660px;
} }
@ -24,9 +23,7 @@
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(10%, -50%);
font-size: 100px; font-size: 100px;
color: white; color: white;
width: 100vw;
} }