modify header

debbieyuen · Oct 11, 2023 · fc50049 · fc50049
1 parent f404389
commit fc50049
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 34 deletions.
diff --git a/my-app/public/index.html b/my-app/public/index.html
@@ -3,6 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="stylesheet" href="https://use.typekit.net/gnm8veh.css">
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta

diff --git a/my-app/src/App.css b/my-app/src/App.css
@@ -1,5 +1,10 @@
 .App {
   text-align: center;
+  align-items: center;
+  align-content: center;
+  display: block;
+  margin: auto;
+  justify-content: center;
 }
 
 .App-logo {
@@ -17,11 +22,15 @@
   background-color: #282c34;
   min-height: 100vh;
   display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
+  width: 100%;
+  font-family: "gigalypse", sans-serif;
+  font-weight: 800;
+  font-style: normal;;
+  flex-direction: row;
+  /* align-items: horizontal; */
+  /* justify-content: horizontal; */
   font-size: calc(10px + 2vmin);
-  color: white;
+  /* color: white; */
 }
 
 .App-link {
@@ -36,3 +45,27 @@
     transform: rotate(360deg);
   }
 }
+
+.HeaderBar {
+  /* width: 80%; */
+  background-color: rgba(255, 255, 255, .6);
+  z-index: 1;
+  padding: 3px;
+  margin: 20px;
+  margin-left: 200px;
+  margin-right: 200px;
+  border-radius: 50px;
+}
+.Unity {
+  width: 100%;
+  /* height: 100%; */
+  position: fixed;
+  padding: 0;
+  /* padding-top: -50px; */
+  margin: 0;
+  align-items: center;
+  justify-content: center;
+  z-index: -1;
+  top: 0;
+  /* margin-top: -10px; */
+}
diff --git a/my-app/src/App.js b/my-app/src/App.js
@@ -16,45 +16,28 @@ const unityContext = new UnityContext({
 function App() {
   return (
     <div className="App">
-      {/* <h1>hi debbie</h1> */}
-      {/* <div>
-        <header>Octocat</header>
-        <button>Page 1</button>
-      </div> */}
-
-
       <div className ="Unity">
         <Unity unityContext={unityContext} 
         style= {{
-          width: "100%",
+          height: "100vh",
+          // width: "100%",
+          position: "absolute",
+          top: 0,
+          left: 0,
           justifySelf: "center",
           alignSelf: "center",
-          ovrflow: "hidden",
+          overflow: "hidden",
         }}/>  
       </div>
+
+      {/* <h1>hi debbie</h1> */}
+      <div className="HeaderBar">
+        <h2>Octocat World</h2>
+        {/* <div className="Button">Hi</div> */}
+        {/* <button>Page 1</button> */}
+      </div>
     </div>
   );
 }
-// function App() {
-//   return (
-//     <div className="App">
-//       <header className="App-header">
-//         <img src={logo} className="App-logo" alt="logo" />
-//         <Unity unityProvider={unityProvider} />
-//         <p>
-//           Edit <code>src/App.js</code> and save to reload.
-//         </p>
-//         <a
-//           className="App-link"
-//           href="https://reactjs.org"
-//           target="_blank"
-//           rel="noopener noreferrer"
-//         >
-//           Learn React
-//         </a>
-//       </header>
-//     </div>
-//   );
-// }
 
 export default App;