From d38d6d6c33e06d39c374b13eff19760be9bc5e7f Mon Sep 17 00:00:00 2001
From: Kira <iam@kirajiroux.com>
Date: Wed, 15 Feb 2023 13:44:13 -0800
Subject: [PATCH] Photo Banner now presenting correctly with image fitting and
 text in center

---
 PortfolioPage/Shared/NavMenu_v2.razor      |  6 ++++-
 PortfolioPage/Shared/NavMenu_v2.razor.css  | 28 ++++++++++++++++++++++
 PortfolioPage/Shared/PhotoBanner.razor     |  4 ++--
 PortfolioPage/Shared/PhotoBanner.razor.css | 25 +++++++++----------
 4 files changed, 48 insertions(+), 15 deletions(-)

diff --git a/PortfolioPage/Shared/NavMenu_v2.razor b/PortfolioPage/Shared/NavMenu_v2.razor
index 5c253a7..e3c99f9 100644
--- a/PortfolioPage/Shared/NavMenu_v2.razor
+++ b/PortfolioPage/Shared/NavMenu_v2.razor
@@ -1,4 +1,5 @@
-<nav class="navbar">
+
+<nav class="navbar">
 
     <div class="navbar-header">
         <a class="navbar-brand m-3 override-brand" href="\">Kira Jiroux</a>
@@ -38,3 +39,6 @@
 
 </nav>
 
+
+
+
diff --git a/PortfolioPage/Shared/NavMenu_v2.razor.css b/PortfolioPage/Shared/NavMenu_v2.razor.css
index 2e7b6df..3525902 100644
--- a/PortfolioPage/Shared/NavMenu_v2.razor.css
+++ b/PortfolioPage/Shared/NavMenu_v2.razor.css
@@ -44,3 +44,31 @@ a.override-brand {
     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;
+}
diff --git a/PortfolioPage/Shared/PhotoBanner.razor b/PortfolioPage/Shared/PhotoBanner.razor
index db7725a..b582ca3 100644
--- a/PortfolioPage/Shared/PhotoBanner.razor
+++ b/PortfolioPage/Shared/PhotoBanner.razor
@@ -1,6 +1,6 @@
 <div class="container">
-    <img src="@photoUrl" class="photo-banner" />
-    <div class="title">@title</div>
+  <img src="@photoUrl" style="width:100%; height: 600px;">
+  <div class="centered">@title</div>
 </div>
 
 @code {
diff --git a/PortfolioPage/Shared/PhotoBanner.razor.css b/PortfolioPage/Shared/PhotoBanner.razor.css
index d588a89..f1a07e3 100644
--- a/PortfolioPage/Shared/PhotoBanner.razor.css
+++ b/PortfolioPage/Shared/PhotoBanner.razor.css
@@ -1,29 +1,30 @@
 body {
 }
 
-.container{
+.container {
     position: relative;
     text-align: center;
     margin: 0;
     padding: 0;
     top: 0;
-    width: 100%;
-    height: 660px;
-    background-size: cover;
-    background-position: center;
-    background-repeat: no-repeat;
+    max-width: 100vw;
+    
+    
+    border-bottom: 3px solid hotpink;
+    border-top: 3px solid hotpink;
 }
 
-.photo-banner {
-    width: 100vw;
-    max-height: 660px;
-}
 
-.title {
+
+/* Centered text */
+.centered {
     position: absolute;
     top: 50%;
     left: 50%;
-    transform: translate(10%, -50%);
+    transform: translate(-50%, -50%);
     font-size: 100px;
     color: white;
 }
+
+
+