Difference between revisions of "Team:AFCM-Egypt"
Aymanshafei (Talk | contribs) |
Aymanshafei (Talk | contribs) |
||
| Line 11: | Line 11: | ||
<body> | <body> | ||
<div id="globalWrapper"> | <div id="globalWrapper"> | ||
| − | <header | + | <header id="js-header"> |
| − | < | + | <nav> |
| − | < | + | <ul id="menu"> |
| − | < | + | <li class="active"><a href="home.html">HOME</a> </li> |
| − | < | + | <li> |
| − | < | + | <a>TEAM <span class="caret"></span></a> |
| − | < | + | <ul> |
| − | < | + | <li><a href="meettheteam.html">Meat The Team</a></li> |
| − | + | <li><a href="collaborations.html">Collaborations</a></li> | |
| − | < | + | </ul> |
| − | + | </li> | |
| − | + | <li> | |
| − | + | <a>PROJECT <span class="caret"></span></a> | |
| − | + | <ul> | |
| − | </ | + | <li><a href="description.html">Descreption</a></li> |
| + | <li><a href="experiment.html">Experiment</a></li> | ||
| + | <li><a href="result.html">Result</a></li> | ||
| + | <li><a href="proofofconcept.html">Proof of concept</a></li> | ||
| + | </ul> | ||
| + | </li> | ||
| + | <li class="dropdown"> | ||
| + | <a>PARTS <span class="caret"></span></a> | ||
| + | <ul> | ||
| + | <li><a href="design.html">Design</a></li> | ||
| + | <li><a href="parts.html">Parts</a></li> | ||
| + | <li><a href="basicpart.html">Basic Part</a></li> | ||
| + | <li><a href="compositepart.html">Composite Part</a></li> | ||
| + | </ul> | ||
| + | </li> | ||
| + | <li><a href="modeling.html">MODELING</a></li> | ||
| + | <li><a href="safety.html">SAFETY</a></li> | ||
| + | <li><a href="humanpractice.html">HUMAN PRACTICE</a></li> | ||
| + | <li><a href="attributions.html">ATTRIBUTIONS</a></li> | ||
| + | <li><a href="medalcriteria.html">MEDAL CRITERIA</a></li> | ||
| + | </ul> | ||
| + | </nav> | ||
| + | <div class="img-responsive"> | ||
| + | <img src="asset/image/gene.png" style="float: right;margin-top:-90px" /> | ||
</div> | </div> | ||
| − | <div class="header- | + | <div class="header-limiter"> |
| − | <div class=" | + | <div class="stage"> |
| − | <div class=" | + | <div class="cubespinner"> |
| − | < | + | <div class="face1"><img id="loading" src="https://static.igem.org/mediawiki/2017/8/80/AFCM-Egypt-logopng.png" alt="logo"></div> |
| − | + | <div class="face2"><img id="loading" src="https://static.igem.org/mediawiki/2017/8/80/AFCM-Egypt-logopng.png" alt="logo"></div> | |
| − | + | <div class="face3"><img id="loading" src="https://static.igem.org/mediawiki/2017/8/80/AFCM-Egypt-logopng.png" alt="logo"></div> | |
| − | + | <div class="face4"><img id="loading" src="https://static.igem.org/mediawiki/2017/8/80/AFCM-Egypt-logopng.png" alt="logo"></div> | |
| − | + | <div class="face5"><img id="loading" src="https://static.igem.org/mediawiki/2017/8/80/AFCM-Egypt-logopng.png" alt="logo"></div> | |
| − | + | <div class="face6"><img id="loading" src="https://static.igem.org/mediawiki/2017/8/80/AFCM-Egypt-logopng.png" alt="logo"></div> | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
</div> | </div> | ||
</div> | </div> | ||
| Line 75: | Line 71: | ||
<img class="afcmslide" src="https://static.igem.org/mediawiki/2017/3/39/AFCM-Egypt-home4.jpeg" alt="Third Slide" style="width:100%"> | <img class="afcmslide" src="https://static.igem.org/mediawiki/2017/3/39/AFCM-Egypt-home4.jpeg" alt="Third Slide" style="width:100%"> | ||
</div> | </div> | ||
| − | <button class="afcmcontrols" id="afcmcontrols-left"> | + | <button class="afcmcontrols" id="afcmcontrols-left"><i class="fa fa-chevron-left" aria-hidden="true"></i></button> |
| − | <button class="afcmcontrols" id="afcmcontrols-right"> | + | <button class="afcmcontrols" id="afcmcontrols-right"><i class="fa fa-chevron-right" aria-hidden="true"></i></button> |
</div> | </div> | ||
</div> | </div> | ||
| Line 377: | Line 373: | ||
var next = document.getElementById('afcmcontrols-left'); | var next = document.getElementById('afcmcontrols-left'); | ||
var previous = document.getElementById('afcmcontrols-right'); | var previous = document.getElementById('afcmcontrols-right'); | ||
| − | |||
for (var i = 0; i < slides.length; i++) { | for (var i = 0; i < slides.length; i++) { | ||
slides[i].style.position = 'absolute'; | slides[i].style.position = 'absolute'; | ||
| Line 418: | Line 413: | ||
previousSlide(); | previousSlide(); | ||
}; | }; | ||
| + | function resizeHeaderOnScroll() { | ||
| + | const distanceY = window.pageYOffset || document.documentElement.scrollTop, | ||
| + | shrinkOn = 200, | ||
| + | headerEl = document.getElementById('js-header'); | ||
| + | |||
| + | if (distanceY > shrinkOn) { | ||
| + | headerEl.classList.add("smaller"); | ||
| + | } else { | ||
| + | headerEl.classList.remove("smaller"); | ||
| + | } | ||
| + | } | ||
| + | window.addEventListener('scroll', resizeHeaderOnScroll); | ||
| + | |||
window.onscroll = function () { scrollFunction() }; | window.onscroll = function () { scrollFunction() }; | ||
function scrollFunction() { | function scrollFunction() { | ||
Revision as of 19:15, 13 October 2017
Navbar example
This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.
Heading
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
Donec id elit non mi porta gravida at eget metus.
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
Heading
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
Donec id elit non mi porta gravida at eget metus.
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
Heading
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
Donec id elit non mi porta gravida at eget metus.
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
Donec id elit non mi porta gravida at eget metus.
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
test
description
test
description
test
description
test
description
Heading
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
Heading
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
Heading
Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa.
