retro portable new pics and vids
@ -125,6 +125,14 @@
|
|||||||
</div>
|
</div>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
|
<button class="button" onclick="window.location.href='/retro-portable'">
|
||||||
|
<div class="button-inner">
|
||||||
|
<span class="button-text">Retro Portable <br>
|
||||||
|
Build Instructions
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
<br>
|
||||||
<footer><i id="footer-text"></i></footer>
|
<footer><i id="footer-text"></i></footer>
|
||||||
<script>
|
<script>
|
||||||
// Ladeanimation beim Laden der Seite anzeigen
|
// Ladeanimation beim Laden der Seite anzeigen
|
||||||
|
|||||||
@ -72,12 +72,31 @@
|
|||||||
.pre-text {
|
.pre-text {
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.footer-container {
|
||||||
|
border-top: 2px solid #000; /* Eine 1px dicke, durchgezogene schwarze Linie */
|
||||||
|
padding-top: 20px; /* Optional: Abstand zwischen Linie und Inhalt */
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
<br>
|
<br>
|
||||||
<img class="center-img" src="logo.png" alt="Logo" width="15%">
|
<img class="center-img" src="logo.png" alt="Logo" width="15%">
|
||||||
|
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
|
||||||
|
<video controls width="25%" class="center-img" poster="videopic.jpg">
|
||||||
|
<source src="video.mp4" type="video/mp4">
|
||||||
|
</video>
|
||||||
|
|
||||||
|
<br>
|
||||||
|
|
||||||
|
<img src="pic1.jpg" alt="pic of the console" width="25%" class="center-img">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<h2>
|
<h2>
|
||||||
Material:
|
Material:
|
||||||
</h2>
|
</h2>
|
||||||
@ -173,3 +192,20 @@ Instructions:
|
|||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<br>
|
||||||
|
|
||||||
|
<footer class="footer-container">
|
||||||
|
Game played in the video: <a href="https://technik-freak.itch.io/minecraft-game-boy-technik-freak" >Minecraft Fan-Project by Technik Freak</a>
|
||||||
|
|
||||||
|
<br>
|
||||||
|
|
||||||
|
Music used in the video: Music by <a href="https://pixabay.com/de/users/hitslab-47305729/?utm_source=link-attribution&utm_medium=referral&utm_campaign=music&utm_content=270173">HitsLab</a> from <a href="https://pixabay.com/music//?utm_source=link-attribution&utm_medium=referral&utm_campaign=music&utm_content=270173">Pixabay</a>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<br>
|
||||||
|
|
||||||
|
</html>
|
||||||
|
|
||||||
|
Before Width: | Height: | Size: 43 KiB After Width: | Height: | Size: 43 KiB |
BIN
retro-portable/pic1.jpg
Normal file
|
After Width: | Height: | Size: 166 KiB |
|
Before Width: | Height: | Size: 72 KiB After Width: | Height: | Size: 72 KiB |
|
Before Width: | Height: | Size: 1.6 MiB After Width: | Height: | Size: 1.6 MiB |
BIN
retro-portable/video.mp4
Normal file
BIN
retro-portable/videopic.jpg
Normal file
|
After Width: | Height: | Size: 234 KiB |
@ -1,61 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="de">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8" />
|
|
||||||
<title>Retro Portable</title>
|
|
||||||
<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
|
|
||||||
<style>
|
|
||||||
body {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
background-color: #1a1a1a;
|
|
||||||
font-family: Arial, sans-serif;
|
|
||||||
color: white;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
height: 100vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
margin-bottom: 20px;
|
|
||||||
font-size: 2em;
|
|
||||||
color: #f0f0f0;
|
|
||||||
text-shadow: 0 0 5px #666;
|
|
||||||
}
|
|
||||||
|
|
||||||
model-viewer {
|
|
||||||
width: 80vw;
|
|
||||||
height: 80vh;
|
|
||||||
box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
|
|
||||||
border-radius: 12px;
|
|
||||||
background-color: #222;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tooltip {
|
|
||||||
margin-top: 12px;
|
|
||||||
font-size: 0.95em;
|
|
||||||
color: #ccc;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<h1>Retro Portable</h1>
|
|
||||||
|
|
||||||
<model-viewer
|
|
||||||
src="RetroPortable.glb"
|
|
||||||
alt="Retro Portable"
|
|
||||||
auto-rotate
|
|
||||||
camera-controls
|
|
||||||
interaction-prompt="none"
|
|
||||||
ar
|
|
||||||
shadow-intensity="1.5"
|
|
||||||
exposure="0.75"
|
|
||||||
environment-image="neutral"
|
|
||||||
tone-mapping="commerce"
|
|
||||||
></model-viewer>
|
|
||||||
|
|
||||||
<div class="tooltip">🔄 Click and drag to rotate the model. Use the mouse wheel to zoom.</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||