Überareite UI

main.js

@@ -12,6 +12,12 @@ import * as MOON from '/website/moon/moon.js';
 import * as URANUS from '/website/uranus/uranus.js';
 import { OrbitControls } from '/website/node_modules/three/examples/jsm/controls/OrbitControls.js';
 
+const button = document.querySelector('#steuerungOrbitalButton'); 
+button.addEventListener('click', function() { 
+    console.log("Butten gedrückt");
+    document.querySelector('.content-layer').style.display = "none";
+});
+
 // Die Szenerie erstellen
 const scene = new THREE.Scene();
 const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

style.css

@@ -7,16 +7,23 @@
   justify-content: center;
 }
 
+.menu {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    padding: 20px;
+}
+
 .card {
 	display: inline-block;
 	box-shadow: 0 1px 2px 0 rgba(0,0,0,.15);
 	position: relative;
-	padding: 20px;
+	padding: 2em;
 	display: flex;
 	flex-direction: column;
 	align-items: center;
-	background-color: rgba(5, 220, 227, 0.95);
+    background-color: rgba(0, 140, 145, 0.99);
-	width: 50vw;
+	width: 75vw;
 	min-height: 25vh;
 	border-radius: 25px;
 	overflow-y: auto;
@@ -29,13 +36,10 @@
 
 
 .video-container {
-	width: 85%;
-	overflow-y: auto;
 }
 
 
 .portfoliobackground {
-	background-color:black;
 	width:100%;
 	height:100%;
 	padding:20px;
@@ -55,3 +59,26 @@ html, body {
 	line-height: 1.5;
 	color: #08F7FE;
 }
+
+a {
+    font-family: 'Orbitron', sans-serif;
+	color: #08F7FE;
+    text-decoration: none;
+}
+
+a:hover {
+    text-decoration: underline;
+}
+
+button {
+    font-family: 'Font-Name', sans-serif;
+    color: #08F7FE;
+    background-color: rgba(0, 140, 145, 0.99);
+    border: none;
+	border-radius: 25px;
+}
+
+button:hover {
+    cursor: pointer; 
+
+}