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">
<h1>Hello, world!</h1>
<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>
<div class="blurb">
<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>

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

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