mirror of
https://github.com/Alvin-Zilverstand/school.git
synced 2026-09-12 09:54:37 +02:00
Alvin-Zilverstand
113 lines
4.4 KiB
HTML
113 lines
4.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Einstein Academy homepage</title>
|
|
<link rel="icon" type="image/x-icon" href="./assets/favicon.ico">
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
|
|
<link rel="stylesheet" href="./css/style.css">
|
|
</head>
|
|
|
|
<body>
|
|
<div class="container">
|
|
<header
|
|
class="d-flex flex-wrap justify-content-center py-3 mb-4 border-bottom"
|
|
>
|
|
<a
|
|
href="#"
|
|
class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-body-emphasis text-decoration-none"
|
|
>
|
|
<img src=./assets/EinsteinAcademy_Logo_Blauw_Transparant.png width="40" height="32" aria-hidden="true">
|
|
<span class="fs-4">Einstein Academy</span>
|
|
</a>
|
|
<ul class="nav nav-pills">
|
|
<li class="nav-item"><a href="#" class="nav-link blue">Home</a></li>
|
|
<li class="nav-item"><a href="./html/projects.html" class="nav-link blue">Projects</a></li>
|
|
<li class="nav-item"><a href="./html/about.html" class="nav-link blue">About</a></li>
|
|
<li class="nav-item"><a href="./html/contact.html" class="nav-link blue">Contact</a></li>
|
|
</ul>
|
|
|
|
<div class="nav slider-text">
|
|
<h5>Nederlands</h5>
|
|
|
|
<label class="switch">
|
|
<input type="checkbox" id="langToggle">
|
|
<span class="slider round"></span>
|
|
</label>
|
|
|
|
<h5>English</h5>
|
|
</div>
|
|
|
|
</header>
|
|
</div>
|
|
|
|
<div class="page-banner-left" data-pdf="./docs/EinsteinAcademy_Roll-up-Banner_1_100x200cm.pdf">
|
|
<img src="./assets/EinsteinAcademy_Logo_Blauw_Transparant.png" alt="Einstein Academy banner left">
|
|
</div>
|
|
<div class="page-banner-right" data-pdf="./docs/EinsteinAcademy_Roll-up-Banner_2_100x200cm.pdf">
|
|
<img src="./assets/EinsteinAcademy_Logo_Blauw_Transparant.png" alt="Einstein Academy banner right">
|
|
</div>
|
|
|
|
<section class="home" id="Home">
|
|
<p data-i18n="description1"></p>
|
|
<p data-i18n="description2"></p>
|
|
<p data-i18n="description3"></p>
|
|
<p data-i18n="description4"></p>
|
|
<p data-i18n="description5"></p>
|
|
<div class="filler-block" style="text-align:center; margin-top:1rem;">
|
|
<hr class="thin-line">
|
|
<div id="measureText" style="visibility:hidden; width:80%; margin:0 auto;">
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
|
|
</div>
|
|
|
|
<div class="video-wrapper">
|
|
<video id="fillerVideo" src="./assets/Aftermovie Startschot Einstein Academy (1).mp4" controls playsinline></video>
|
|
</div>
|
|
|
|
<hr class="thin-line">
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function(){
|
|
var measure = document.getElementById('measureText');
|
|
var vid = document.getElementById('fillerVideo');
|
|
if (measure && vid) {
|
|
var height = measure.offsetHeight;
|
|
var factor = 8.0; // increase video height to ~800%
|
|
var newHeight = Math.round(height * factor);
|
|
vid.style.height = newHeight + 'px';
|
|
vid.style.maxWidth = '100%';
|
|
vid.style.display = 'block';
|
|
vid.style.margin = '0 auto';
|
|
}
|
|
});
|
|
</script>
|
|
</div>
|
|
</section>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
|
|
<script src="./js/script.js"></script>
|
|
</body>
|
|
<footer>
|
|
<div class="container">
|
|
<footer class="py-3 my-4">
|
|
<ul class="nav justify-content-center border-bottom pb-3 mb-3">
|
|
<li class="nav-item">
|
|
<a href="#" class="nav-link px-2 text-body-secondary">Home</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="./html/projects.html" class="nav-link px-2 text-body-secondary">Projects</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="./html/about.html" class="nav-link px-2 text-body-secondary">About</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="./html/contact.html" class="nav-link px-2 text-body-secondary">Contact</a>
|
|
</li>
|
|
</ul>
|
|
</footer>
|
|
</div>
|
|
</footer>
|
|
|
|
</html>
|