diff --git a/src/assets/MapGif.gif b/src/assets/MapGif.gif new file mode 100644 index 0000000..a4a41a6 Binary files /dev/null and b/src/assets/MapGif.gif differ diff --git a/src/assets/RoverGif.gif b/src/assets/RoverGif.gif new file mode 100644 index 0000000..c789247 Binary files /dev/null and b/src/assets/RoverGif.gif differ diff --git a/src/assets/ThermalGif.gif b/src/assets/ThermalGif.gif new file mode 100644 index 0000000..01b089e Binary files /dev/null and b/src/assets/ThermalGif.gif differ diff --git a/src/pages-style/constant.css b/src/pages-style/constant.css index 5975d26..d7fd0ac 100644 --- a/src/pages-style/constant.css +++ b/src/pages-style/constant.css @@ -7,11 +7,35 @@ height: 100vh; } -.subContainer{ +.subContainer { display: flex; - height: 100%; + height: 60%; } +.data { + background: green; + height: 10%; + display: flex; + align-items: center; + justify-content: center; + padding: 5px; + margin: 0; + border-bottom: 1px solid black; +} + +.column.Mission { + position: relative; /* Set the position to relative for absolute positioning within */ +} + +.map-title { + position: absolute; + top: 7%; /* Adjust the top position as needed */ + left: 50%; /* Adjust the left position as needed */ + transform: translate(-50%, -50%); /* Center the title */ + background: rgba(255, 255, 255, 0.5); /* Translucent white background */ + padding: 10px; + font-weight: bold; +} .column { flex: 1; border-left: 1px solid; diff --git a/src/pages/constant.js b/src/pages/constant.js index 00e5f6e..b5e45d2 100644 --- a/src/pages/constant.js +++ b/src/pages/constant.js @@ -1,12 +1,14 @@ import React from 'react'; import './../pages-style/constant.css'; -import LMCCMockup from '../assets/LMCC Mockup.png'; import AstronautGif from '../assets/astronautstream.gif'; - +import RoverGif from '../assets/RoverGif.gif'; +import ThermalGif from '../assets/ThermalGif.gif'; +import MapGif from '../assets/MapGif.gif'; function Constant() { return (
This section will display the following:
-This section will display the following:
-This section will display the following:
-