added star background and infocard container

src/components/InfoCard/InfoCard.css

@@ -0,0 +1,17 @@
+.info-card {
+  position: absolute;
+  right: 2%;
+  background: #13080e;
+  border: 2px solid #e8ab8c;
+  height: 70vh;
+  width: 340px;
+  z-index: 1;
+  border-radius: 10px;
+  box-shadow: 1px 1px 10px #e8ab8c inset;
+}
+
+.infocard-title {
+  margin: 20px;
+  font-size: 20px;
+  color: #e8ab8c;
+}

src/components/InfoCard/index.js

@@ -0,0 +1,14 @@
+import "./InfoCard.css"
+
+const InfoCard = ( {planet} ) => {
+
+  return (
+    <section className="info-card">
+      <div className="infocard-title">
+        {planet.name}
+      </div>
+    </section>
+  )
+}
+
+export default InfoCard

src/components/Navigation/Navbar.css

@@ -2,7 +2,7 @@
   position: absolute;
   top: 0;
   width: 20%;
-  background: linear-gradient(black, darkgrey);
+  background: linear-gradient(black, rgb(92, 92, 92));
   height: 100vh;
   display: flex;
   flex-direction: column;
@@ -13,11 +13,12 @@
 
 .planet-selector {
   text-decoration: none;
-  color: yellow;
-  font-size: 24px;
+  color: rgb(225, 225, 117);
+  font-size: 20px;
   font-weight: bold;
+  margin-right: 50px;
 }
 
 .active {
-  color: green;
+  color: whitesmoke;
 }

src/components/Viewport/Viewport.css

@@ -4,11 +4,29 @@
   height: 100vh;
   top: 0;
   right: 0;
-  background-color: black;
+  background-image: url('../../../public/stars.jpg');
+  background-size: cover;
 }
 
 .title {
   color: yellow;
   font-size: 48px;
   text-align: center;
+  animation: fadeIn 3s;
+}
+
+@keyframes fadeIn{
+  0% {
+    opacity: 0.1;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+.creator {
+  color: white;
+  font-size: 12px;
+  text-align: center;
+  animation: fadeIn 5s;
 }

src/components/Viewport/index.js

@@ -1,12 +1,16 @@
 import { useEffect, useState } from 'react'
+import InfoCard from '../InfoCard'
 import "./Viewport.css"
 
 const Viewport = () => {
+
+  let planet = { name: "Mercury" }
 
   return (
     <div className="main-page-container">
-      <div className="title">Welcome to Solarium</div>
-      <canvas width={150} height={150}></canvas>
+      <div className="title">Solarium v0.1</div>
+      <div className="creator">Made by Christo Grabowski</div>
+      <InfoCard planet={planet}/>
     </div>
   )
 }