diff --git a/main.js b/main.js index 4283bea..08ccbd9 100644 --- a/main.js +++ b/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); diff --git a/style.css b/style.css index 5b320cf..e3e650b 100644 --- a/style.css +++ b/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); - width: 50vw; + background-color: rgba(0, 140, 145, 0.99); + 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; + +}