|
|
| Line 1: |
Line 1: |
| | <html> | | <html> |
| − | <style>#canvas,header{position:fixed;top:0}#h_wrapper,body,html{height:100%}#h_logo,.menu{font-weight:700}#h_logo,.menu li{line-height:80px}.m_logo,.m_team{background-position:center;background-size:100%;background-repeat:no-repeat}body{margin:0;font-family:Roboto;overflow-x:hidden}a{text-decoration:none}#canvas{left:0;z-index:-1}header{min-width:300px;width:100%;height:80px;background-color:rgba(170,170,170,.9);box-shadow:0 0 50px 0 rgba(0,0,0,.35);text-align:center;z-index:10}#h_wrapper{display:inline-block}#h_logo{position:absolute;height:100%;width:167px;color:#fff;font-size:32px;animation:logo_fadeIn 1s ease-in-out}.menu,.menu li{position:relative;height:100%}@keyframes logo_fadeIn{from{opacity:0;margin-left:-50px}to{opacity:1;margin-left:0}}.menu{margin:0 0 0 250px;padding:0;font-size:18px}.menu li{float:left;list-style-type:none;transition:background-color .2s ease-in-out}.menu li a{display:block;color:#000;padding:0 15px}.menu li:hover{background-color:rgba(165,255,55,.5)}.menu li:hover ul{visibility:visible;max-height:700px;opacity:1}.menu li ul{visibility:hidden;max-height:0;opacity:0;font-weight:400;position:absolute;left:0;padding:0;background-color:rgba(200,200,200,.87);text-align:left;overflow:hidden;box-shadow:0 9px 20px 0 rgba(0,0,0,.2),inset 0 35px 45px -35px rgba(0,0,0,.5);transition:all .3s ease-in-out}.m_logo,section{text-align:center;width:100%}.menu li ul li{display:block;padding:0;width:100%;min-width:250px;line-height:55px;white-space:nowrap}.menu li ul li:hover{background-color:unset}.menu li ul li a{transition:background-color .17s ease-in-out}.menu li ul li a:hover{background-color:rgba(165,255,55,.5)}main{width:100%;min-height:100%}section{margin-top:190px}section:not(:last-child){border-bottom:10px solid #dcdcdc}.m_wrapper{max-width:900px;display:inline-block}.m_logo{position:relative;height:510px;background-image:url(file:///D:/Sonstiges/Webdev/wiki/img/m_logo.png);animation:ml_fadeIn 1.5s ease-in-out;margin:-80px auto 50px}#f_wrapper,.m_txt{display:inline-block;text-align:left}@keyframes ml_fadeIn{from{opacity:0}to{opacity:1}}.m_team{width:100%;height:700px;border-radius:30px;background-image:url(file:///D:/Sonstiges/Webdev/wiki/img/team.jpg)}.m_txt{width:100%;font-size:24px;margin-bottom:40px;padding:10px}footer{width:100%;min-height:100px;background-color:#b4b4b4;text-align:center}#f_wrapper{position:relative;width:900px;height:100px}.f_l,.f_m,.f_r{position:relative;height:100%;float:left}.f_l{width:30%}.f_m{width:40%}.f_r{width:30%}footer img{float:left;width:50px;opacity:.5;margin:27px 8px 0;transition:all .2s ease-in-out}footer img:hover{margin:22px 8px 0;opacity:1}
| |
| − | </style>
| |
| | | | |
| − |
| |
| − |
| |
| − | <header>
| |
| − | <div id="h_wrapper">
| |
| − | <div id="h_logo"><span style="color:black">VIBRI</span><span style="color:rgb(155,255,0)">GENS</span></div>
| |
| − | <div id="burger"></div>
| |
| − | <ul class="menu">
| |
| − | <li><a href="#">Team ▾</a>
| |
| − | <ul>
| |
| − | <li><a href="#">Team Members</a></li>
| |
| − | <li><a href="#">Collaborations</a></li>
| |
| − | </ul>
| |
| − | </li>
| |
| − | <li><a href="#">Project ▾</a>
| |
| − | <ul>
| |
| − | <li><a href="#">Description</a></li>
| |
| − | <li><a href="#">Design</a></li>
| |
| − | <li><a href="#">Experiments</a></li>
| |
| − | <li><a href="#">Notebook</a></li>
| |
| − | <li><a href="#">InterLab</a></li>
| |
| − | <li><a href="#">Model</a></li>
| |
| − | <li><a href="#">Results</a></li>
| |
| − | <li><a href="#">Demonstrate</a></li>
| |
| − | <li><a href="#">Improve</a></li>
| |
| − | <li><a href="#">Attributions</a></li>
| |
| − | </ul>
| |
| − | </li>
| |
| − |
| |
| − | <li><a href="#">Parts ▾</a>
| |
| − | <ul>
| |
| − | <li><a href="#">Parts Overview</a></li>
| |
| − | <li><a href="#">Basic Parts</a></li>
| |
| − | <li><a href="#">Composite Parts</a></li>
| |
| − | <li><a href="#">Part Collection</a></li>
| |
| − | </ul>
| |
| − | </li>
| |
| − |
| |
| − | <li><a href="#">Safety</a></li>
| |
| − |
| |
| − | <li><a href="#">Human Practices ▾</a>
| |
| − | <ul>
| |
| − | <li><a href="#">Human Practices</a></li>
| |
| − | <li><a href="#">Education & Engagement</a></li>
| |
| − | </ul>
| |
| − | </li>
| |
| − | <li><a href="#">Awards ▾</a>
| |
| − | <ul>
| |
| − | <li><a href="#">Applied Design</a></li>
| |
| − | <li><a href="#">Entrepreneurship</a></li>
| |
| − | <li><a href="#">Hardware</a></li>
| |
| − | <li><a href="#">Measurement</a></li>
| |
| − | <li><a href="#">Model</a></li>
| |
| − | <li><a href="#">Plant</a></li>
| |
| − | <li><a href="#">Software</a></li>
| |
| − | </ul>
| |
| − | </li>
| |
| − | </ul>
| |
| − | </div>
| |
| − |
| |
| − | </header>
| |
| | </html> | | </html> |
