<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flumina</title>
<link rel="stylesheet" type="text/css" href="css/all.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" href="css/media.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@300&display=swap" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<style>
@font-face {
font-family: myFirstFont;
src: url(../fonts/Ubuntu-Th.ttf);
}
html, body{
margin: 0;
padding: 0;
background-color: #fff;
overflow-x: hidden;
}
body{
font-family: myFirstFont;
font-weight: 100;
}
.noscroll{
overflow: hidden;
}
.overlay{
position: fixed;
overflow-y: scroll;
}
[aria-hidden="true"] { display: none; }
[aria-hidden="false"] { display: block; }
#particleCanvas {
position: fixed;
top: 8vmin;
left: 0;
height: calc(100% - 16vmin);
width: 100%;
opacity: 1;
z-index: 5;
}
#particleCanvas::before {
animation-name: enlighten;
animation-fill-mode: forwards;
animation-duration: 2s;
}
.alert-light{
background-color: transparent !important;
border-color: transparent !important;
}
.top-bar-link{
text-align: right;
z-index: 10;
}
.top-bar span{
font-size: 18px;
padding: 15px 20px;
font-family: myFirstFont;
}
.top-bar span a{
color: inherit;
text-decoration: none;
}
.logo img{
position: absolute;
float: left;
margin: 0px 46px;
width: 103px;
height: 103px;
left: 67px;
top: 0px;
margin-top: -40px;
margin-left: 100px;
}
nav {
position: absolute;
width: 100%;
line-height: 60px;
z-index: 6;
}
nav ul {
line-height: 60px;
list-style: none;
overflow: hidden;
padding: 0;
text-align: center;
margin: 0;
padding-right: 40px;
transition: 1s;
cursor: pointer;
}
nav ul li {
display: inline-block;
padding: 0px 40px;;
}
nav ul li a {
text-decoration: none;
color: #010A2D;
font-size: 24px;
font-weight: lighter;
font-family: myFirstFont;
}
nav ul li.active a:after{
text-decoration: none;
color: #C01466;
content: '';
background: #C01466;
display: block;
height: 3px;
width: calc(100%);
margin: -5px auto 5px;
transition: height 250ms;
transform-origin: bottom right;
transition: transform 0.25s ease-out;
}
nav ul li a:hover:after{
text-decoration: none;
color: #C01466;
content: '';
background: #C01466;
display: block;
height: 3px;
width: calc(100%);
margin: -5px auto 5px;
transition: height 250ms;
transform: scaleX(1);
transform-origin: bottom left;
}
.menu-icon {
line-height: 60px;
width: 100%;
background: #000;
text-align: right;
box-sizing: border-box;
padding: 15px 24px;
cursor: pointer;
color: #fff;
display: none;
}
#mainBackground{
position: absolute;
min-width: 75vmax !important;
min-height: 75vmax !important;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: radial-gradient(transparent,rgba(175, 222, 237, 1),rgb(255, 255, 255),transparent, transparent, transparent, transparent);
animation: lightUp 3s cubic-bezier(0, 12, 0.6, 0.91) forwards;
}
@keyframes lightUp {
0% {
height: 0;
width: 0;
}
100% {
height: 100vmax;
width: 100vmax;
}
}
#particleCanvas {
position: fixed;
top: 8vmin;
left: 0;
height: calc(100% - 16vmin);
width: 100%;
opacity: 1;
z-index: 5;
}
#particleCanvas::before {
animation-name: enlighten;
animation-fill-mode: forwards;
animation-duration: 2s;
}
.banner{
z-index: 6;
align-items: center;
display: flex;
text-align: center;
padding-top: 30vh;
padding-left: 60vh;
padding-right: 60vh;
width: 100%;
line-height: 1;
height: 50vh;
background-color: transparent;
justify-content: center;
pointer-events: none;
}
.inner{
position: absolute;
z-index: 6;
height: 511px;
width: 511px;
text-align: center;
align-items: center;
}
.inner h1{
font-size: 48px;
font-weight: 1000;
font-style: normal;
line-height: 55px;
font-family: myFirstFont;
}
.inner p{
font-size: 18px;
line-height: 21px;
align-items: center;
font-family: myFirstFont;
}
#customerReferences{
margin-top: 5vh;
}
.references{
padding: 15vmin 1vmin;
position: absolute;
width: 100%;
pointer-events: none;
max-height: 30vh;
}
#referencesHolder{
display: grid;
grid-template-columns: 7vw 7vw 7vw;
height: 7vw;
grid-column-gap: 3vw;
justify-content: center;
}
.referenceImageHolder{
width: 100%;
height: 100%;
border: 2px solid #C4C4C4;
background-color: transparent;
border-radius: 50%;
z-index: 100;
animation: enlighten;
animation-duration: 1s;
animation-fill-mode: forwards;
opacity: 0;
position: relative;
}
@keyframes enlighten {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes enlightenScale {
from {
opacity: 0;
height: 0%;
}
to {
opacity: 1;
height: 100%;
}
}
.referenceImage{
max-height: 65%;
max-width: 65%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
#refTrumpf img{
max-width: 55%;
max-height: 55%;
}
#refSchunk{
animation-delay: 0.2s;
}
#refIngun{
animation-delay: 0.4;
}
#awardReferences{
bottom: 5vmin;
padding: 0 1vmin;
}
#sealsHolder{
position: absolute;
display: grid;
grid-template-columns: 76vw 9vw 9vw;
height: 9vw;
grid-column-gap: 3vw;
justify-content: center;
bottom: 5vh;
}
#refSmig{
animation-delay: 0.6s;
}
#refExz{
animation-delay: 0.8s;
}
.sealImageHolder{
width: 100%;
height: 100%;
text-align: center;
writing-mode: horizontal-lr;
animation: enlighten;
animation-duration: 1s;
animation-fill-mode: forwards;
opacity: 0;
position: relative;
}
.sealImage{
max-height: 80%;
max-width: 80%;
display: -webkit-inline-box;
margin-top: 4vh;
position: absolute;
left: 100%;
top: 50%;
transform: translate(-50%, -50%);
}
#refSchunk {
animation-delay: 0.2s;
}
#refIngun{
animation-delay: 0.4s;
}
#footer{
color: #000;
width: 100%;
height: 7vmin;
position: absolute;
bottom: 0;
}
.innerContent{
margin: 0 auto;
}
#footer .content{
display: grid;
justify-content: right;
line-height: 7vmin;
font-size: 2vmin;
grid-column-gap: 1vw;
grid-template-columns: 11vw 6vw 7vw;
}
.footer-column{
margin-right: 3vw;
text-align: center;
}
#footer a{
color: #000;
text-decoration: none;
font-family: myFirstFont;
}
#allCategorySection{
height: 100%;
width: 100%;
}
#div1{
position: absolute;
background-color: #fff;
width: 100%;
z-index: 500;
justify-content: center;
bottom: 0;
}
.is-closeBtn{
display: block;
cursor: pointer;
position: absolute;
right: 200px;
top: 48px;
}
.is-closeBtn:hover{
color: #C01466;
}
.is-closeBtn p{
font-size: 12px;
text-transform: uppercase;
font-family: myFirstFont;
display: inline-block;
margin: 3px 10px 0 0;
transition: color 250ms;
}
.productCategoryHeader{
display: flex;
justify-content: center;
align-items: center;
background-color: #fff;
padding-top: 150px;
}
.productCategoryHeaderImg img{
width: 33px;
height: 33px;
margin-right: 0px;
left: 934px;
top: 53px;
margin-bottom: 8px;
}
.productCategoryHeaderOne{
margin-right: 500px;
font-family: myFirstFont;
}
.productCategoryHeaderOne h2{
font-size: 18px;
font-weight: bold;
}
.productCategoryHeaderTwo{
margin-right: 30px;
}
.productCategoryHeaderTwo h4{
font-size: 14px;
}
.productCategory{
display: flex;
justify-content: center;
align-items: center;
height: 100%;
overflow: hidden;
background-color: #fff;
padding-top: 100px;
padding-bottom: 100px;
font-family: myFirstFont;
}
.childZero{
align-items: left;
padding-right: 10px;
padding-top: 10px;
}
.childOne{
padding-right: 50px;
padding-left: 50px;
}
.childTwo{
padding-left: 50px;
}
#div2{
position: absolute;
display: none;
background-color: #fff;
width: 100%;
z-index: 500;
justify-content: center;
bottom: 0;
}
@-moz-document url-prefix() {
#div1, #div2, #div3, #div4, #div5{
top: 120px;
}
.productCategory{
padding-top: 0px;
padding-bottom: 150px;
}
}
@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) {
#div1, #div2, #div3, #div4, #div5{
top: 120px;
}
.productCategory{
padding-top: 0px;
padding-bottom: 150px;
}
}
#div3{
position: absolute;
display: none;
background-color: #fff;
width: 100%;
z-index: 500;
justify-content: center;
bottom: 0;
}
#div4{
position: absolute;
display: none;
background-color: #fff;
width: 100%;
z-index: 500;
justify-content: center;
bottom: 0;
}
#div5{
position: absolute;
display: none;
background-color: #fff;
width: 100%;
z-index: 500;
justify-content: center;
bottom: 0;
}
.h{
width: 55%;
height: 2px;
border: 0 none;
margin-bottom: 0px;
margin-top: 0px;
background-color: #CBCBCB;
align-items: center;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<!-------------top bar---------------->
<header id="header" class="active">
<section class="alert alert-light" style="margin-bottom: 0px">
<div class = "container">
<div class="row top-bar">
<div class="col top-bar-link">
<span>
<a href="#">class="fas fa-search" href="#"__^
Contact</a>
</span>
<span>
<a href="#">^__i class="fas fa-globe-africa"__^</i__^
EN</a>
</span>
<span>
<a href="#" class="top-bar-login">^__i class="fas fa-user-circle"__^
Login</a>
</span>
</div>
</div>
</div>
</section>
</header>
<!-------------top bar---------------->
<!-------------nav bar---------------->
<header id="header" class="active">
<section class="top-nav-bar">
<div class="wrapper">
<nav>
<div class="logo">
<a href="index.html"><img src="img/SignetColored.svg"></a>
</div>
<div class="menu-icon">
^__i class="fa fa-bars fa-2x" style="color: rgba(0, 0, 0, 1)"__^
</div>
<div class="menu">
<ul class="showing">
<li data-li="products" id="btn" class="open-overlay"><a>Products</a></li>
<li data-li="solutions" id="btn" class="open-overlay"><a>Solutions</a></li>
<li data-li="company" id="btn" class="open-overlay"><a>Company</a></li>
<li data-li="careers" id="btn" class="open-overlay"><a>Careers</a></li>
<li data-li="partners" class="five" id="btn" class="open-overlay"><a>Partners</a></li>
</ul>
</div>
</nav>
</div>
</section>
</header>
<!-------------nav bar---------------->
<header>
<section id="allCategorySection" class="hidden">
<!-------------product category------------>
<div id="div1" class="item products overlay" style="display: none; overflow-y: hidden;" aria-hidden="true">
<div class="is-closeBtn close-overlay">
<p>Close</p>
^__i class="fas fa-window-close"__^
</div>
<div class="productCategoryHeader">
<div class="productCategoryHeaderOne">
<h2>Products</h2>
</div>
<div class="productCategoryHeaderTwo">
<h4 style="font-weight: 100;">ENTIRE OVERVIEW PRODUCTION</h4>
</div>
<div class="productCategoryHeaderImg">
<img src="img/parquet.png">
</div>
</div>
<hr class="h">
<div class="productCategory">
<div class="childZero" style="align-items: left; padding-right: 50px; padding-top: 0px; padding-bottom: 130px;">
<p>Anwendungsfälle</p>
<br>
<p>Branchen</p>
</div>
<div class="childOne">
<h3>Virtual machine > </h3>
<p>Use the power of machines</p>
<h3>Digital assistants > </h3>
<p>Empower humans with algorithms & ai</p>
<h3>ETL processors > </h3>
<p>Connect, structure & calculate</p>
</div>
<div class="childTwo">
<h3>Online services > </h3>
<p>Enterprise analysis at the push of a button</p>
<h3>digital twins > </h3>
<p>Visualization of complex systems</p>
<h3>Libraries > </h3>
<p>Methods, Knowledge & Simulation</p>
</div>
</div>
</div>
<!-------------product category------------>
<!-------------solutions category------------>
<div id="div2" class="item solutions overlay" style="display: none;" aria-hidden="true">
<div class="is-closeBtn close-overlay">
<p>Close</p>
^__i class="fas fa-window-close">
</div>
<div class="productCategoryHeader">
<div class="productCategoryHeaderOne">
<h2>Solutions</h2>
</div>
<div class="productCategoryHeaderTwo">
<h4 style="font-weight: 100;">ENTIRE OVERVIEW PRODUCTION</h4>
</div>
<div class="productCategoryHeaderImg">
<img src="img/parquet.png">
</div>
</div>
<hr class="h">
<div class="productCategory">
<!-- <div class="childZero" style="align-items: left; padding-right: 50px; padding-top: 0px; padding-bottom: 130px;">
<p>Anwendungsfälle</p>
<br>
<p>Branchen</p>
</div> -->
<div class="childOne">
<h3>Plattform > </h3>
<p>Connect, transform & visualize</p>
<h3>Smart Factory ></h3>
<p>Data is power</p>
<h3>Simulation ></h3>
<p>What would you do</p>
</div>
<div class="childTwo">
<h3>Value Stream Analysis ></h3>
<p>At the push of a button</p>
<h3>Cockpit ></h3>
<p>Always see everything</p>
<h3>KPI system > </h3>
<p>All your key performance indicators</p>
</div>
</div>
</div>
<!-------------solutions category------------>
<!-------------company category------------>
<div id="div3" class="item company overlay" style="display: none;" aria-hidden="true">
<div class="is-closeBtn close-overlay">
<p>Close</p>
^__i class="fas fa-window-close">
</div>
<div class="productCategoryHeader">
<div class="productCategoryHeaderOne">
<h2>Company</h2>
</div>
<div class="productCategoryHeaderTwo">
<h4 style="font-weight: 100;">ENTIRE OVERVIEW PRODUCTION</h4>
</div>
<div class="productCategoryHeaderImg">
<img src="img/parquet.png">
</div>
</div>
<hr class="h">
<div class="productCategory">
<!-- <div class="childZero" style="align-items: left; padding-right: 50px; padding-top: 0px; padding-bottom: 130px;">
<p>Anwendungsfälle</p>
<br>
<p>Branchen</p>
</div> -->
<div class="childOne">
<h3>Company profile > </h3>
<p>About us and what we do.</p>
<h3>Now ></h3>
<p>Who are we today</p>
<h3>Milestones ></h3>
<p>Experience and sucess</p>
</div>
<div class="childTwo">
<h3>Coming ></h3>
<p>Where we are coming from</p>
<h3>Where to ></h3>
<p>Who will we be</p>
<h3>Values > </h3>
<p>Be yourself</p>
</div>
</div>
</div>
<!-------------company category------------>
<!-------------careers category------------>
<div id="div4" class="item careers overlay" style="display: none;" aria-hidden="true">
<div class="is-closeBtn close-overlay">
<p>Close</p>
^__i class="fas fa-window-close">
</div>
<div class="productCategoryHeader">
<div class="productCategoryHeaderOne">
<h2>Careers</h2>
</div>
<div class="productCategoryHeaderTwo">
<h4 style="font-weight: 100;">ENTIRE OVERVIEW PRODUCTION</h4>
</div>
<div class="productCategoryHeaderImg">
<img src="img/parquet.png">
</div>
</div>
<hr class="h">
<div class="productCategory">
<!-- <div class="childZero" style="align-items: left; padding-right: 50px; padding-top: 0px; padding-bottom: 130px;">
<p>Anwendungsfälle</p>
<br>
<p>Branchen</p>
</div> -->
<div class="childOne">
<h3>Item > </h3>
<p>Text</p>
<h3>Item ></h3>
<p>Text</p>
<h3>Item ></h3>
<p>Text</p>
</div>
<div class="childTwo">
<h3>Item ></h3>
<p>Text</p>
<h3>Item ></h3>
<p>Text</p>
<h3>Item > </h3>
<p>Text</p>
</div>
</div>
</div>
<!-------------careers category------------>
<!-------------Partners category------------>
<div id="div5" class="item partners overlay" style="display: none;" aria-hidden="true">
<div class="is-closeBtn close-overlay">
<p>Close</p>
^__i class="fas fa-window-close">
</div>
<div style="background-color: transparent;" class="productCategoryHeader">
<div class="productCategoryHeaderOne">
<h2>Partners</h2>
</div>
<div class="productCategoryHeaderTwo">
<h4 style="font-weight: 100;">ENTIRE OVERVIEW PRODUCTION</h4>
</div>
<div class="productCategoryHeaderImg">
<img src="img/parquet.png">
</div>
</div>
<hr class="h">
<div class="productCategory">
<!-- <div class="childZero" style="align-items: left; padding-right: 50px; padding-top: 0px; padding-bottom: 130px;">
<p>Anwendungsfälle</p>
<br>
<p>Branchen</p>
</div> -->
<div class="childOne">
<h3>Item > </h3>
<p>Text</p>
<h3>Item ></h3>
<p>Text</p>
<h3>Item ></h3>
<p>Text</p>
</div>
<div class="childTwo">
<h3>Item ></h3>
<p>Text</p>
<h3>Item ></h3>
<p>Text</p>
<h3>Item > </h3>
<p>Text</p>
</div>
</div>
</div>
<!-------------Partners category------------>
</section>
</header>
<div id="mainBackground" class="mainBackground"></div>
<!-- Animation -->
<canvas id="particleCanvas" class="particleCanvas" width="1848" height="949"></canvas>
<!------------banner section---------->
<section class="banner">
<div class="inner">
<h1 style="padding-top: 100px;">Wertströme</h1>
<h1>im <span style="color: #C01466">Licht</span> mit digitalen</h1>
<h1>Assistenzsystemen.</h1>
<p>Ergebnisse am Puls der</p>
<p>Zeit für Kosten,</p>
<p>Durchlaufzeiten und</p>
<p>Bestände.</p>
</div>
</section>
<!------------banner section---------->
<!------------references-------------->
<section id="customerReferences" class="references">
<div id="referencesHolder">
<a id="refTrumpf" class="referenceImageHolder" href="#">
<img class="referenceImage" src="img/trumpf-logo.svg">
</a>
<a id="refSchunk" class="referenceImageHolder" href="#">
<img class="referenceImage" src="img/schunk-logo.png">
</a>
<a id="refIngun" class="referenceImageHolder" href="#">
<img class="referenceImage" src="img/ingun-logo.png">
</a>
</div>
</section>
<!------------references-------------->
<!------------award references-------------->
<section id="awardReferences" class="references">
<div id="sealsHolder">
<div id="refSmig" class="sealImageHolder">
<img class="sealImage" src="img/SMiG.png">
</div>
<div id="refExz" class="sealImageHolder">
<img class="sealImage" src="img/exzellenzpreis.png">
</div>
</div>
</section>
<!------------award references-------------->
<!------------footer------------------------->
<footer id="footer">
<div class="innerContent">
<div class="content">
<div class="footer-column">
<a class="footer-link" href="#">Impressum</a>
</div>
<div class="footer-column">
<a class="footer-link" href="#">Datenschutz</a>
</div>
</div>
</div>
</footer>
<!------------footer------------------------->
<script src="js/main.js"></script>
<script src="js/nav.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script>
var body = document.body,
overlay = document.querySelector('.overlay'),
overlayBtts = document.querySelectorAll('button[class$="overlay"]');
[].forEach.call(overlayBtts, function(btt) {
btt.addEventListener('click', function() {
var overlayOpen = this.className === 'open-overlay';
overlay.setAttribute('aria-hidden', !overlayOpen);
body.classList.toggle('noscroll', overlayOpen);
overlay.scrollTop = 0;
}, false);
});
</script>
<script>
<pre>
var li_elements = document.querySelectorAll(".menu ul li");
var item_elements = document.querySelectorAll(".item");
for (var i = 0; i < li_elements.length; i++) {
li_elements[i].addEventListener("click", function() {
li_elements.forEach(function(li) {
li.classList.remove("active");
});
this.classList.add("active");
var li_value = this.getAttribute("data-li");
item_elements.forEach(function(item) {
item.style.display = "none";
});
if (li_value == "products") {
document.querySelector("." + li_value).style.display = "block";
} else if (li_value == "solutions") {
document.querySelector("." + li_value).style.display = "block";
} else if (li_value == "company") {
document.querySelector("." + li_value).style.display = "block";
} else if (li_value == "careers") {
document.querySelector("." + li_value).style.display = "block";
} else if (li_value == "partners") {
document.querySelector("." + li_value).style.display = "block";
} else {
console.log("");
}
});
}
var closebtns = document.getElementsByClassName("is-closeBtn");
var i;
for(i=0; i<closebtns.length; i++){
closebtns[i].addEventListener("click", function(){
this.parentElement.style.display='none';
$( '.menu .showing' ).find( 'li.active' ).removeClass( 'active' );
});
}
$(document).ready(function() {
$(".menu-icon").on("click", function() {
$("nav ul").toggleClass("showing");
});
});
function openModal(){
document.getElementById('div1').style.display = "block";
document.body.style.overflow = "hidden";
}
function closeModal(){
document.getElementById('div1').style.display = "none";
document.body.style.overflow = "auto";
}
What I have tried:
Please check whether you can solve it