Difference between revisions of "Team:AFCM-Egypt"
Aymanshafei (Talk | contribs) |
Aymanshafei (Talk | contribs) |
||
| Line 8: | Line 8: | ||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| + | <style> | ||
| + | </style> | ||
</head> | </head> | ||
<body> | <body> | ||
| − | < | + | <header id="js-header" style="margin-bottom:25px"> |
| − | < | + | <img src="https://static.igem.org/mediawiki/2017/d/d0/AFCM-Egypt-home_background.png" style="float: right;margin-top:-100px" /> |
| − | <nav> | + | <div class="stage"> |
| + | <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 class="header-limiter"> | ||
| + | <nav style="width: 100%;"> | ||
<ul id="menu"> | <ul id="menu"> | ||
<li class="active"><a href="home.html">HOME</a> </li> | <li class="active"><a href="home.html">HOME</a> </li> | ||
| Line 47: | Line 61: | ||
</ul> | </ul> | ||
</nav> | </nav> | ||
| − | + | </div> | |
| − | + | </header> | |
| − | + | ||
| − | + | <div id="globalWrapper"> | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
<div class="container"> | <div class="container"> | ||
<div class="allcontain" style="position: relative;margin-bottom: 20px"> | <div class="allcontain" style="position: relative;margin-bottom: 20px"> | ||
| Line 83: | Line 85: | ||
<p> | <p> | ||
<div class="svg-wrapper"> | <div class="svg-wrapper"> | ||
| − | <svg height="40" width="150 | + | <svg height="40" width="150"> |
<rect id="shape" height="40" width="150"></rect> | <rect id="shape" height="40" width="150"></rect> | ||
</svg><div id="text"> | </svg><div id="text"> | ||
| Line 283: | Line 285: | ||
<p> | <p> | ||
<div class="svg-wrapper"> | <div class="svg-wrapper"> | ||
| − | <svg height="40" width="150 | + | <svg height="40" width="150"> |
<rect id="shape" height="40" width="150"></rect> | <rect id="shape" height="40" width="150"></rect> | ||
</svg><div id="text"> | </svg><div id="text"> | ||
| Line 296: | Line 298: | ||
<p> | <p> | ||
<div class="svg-wrapper"> | <div class="svg-wrapper"> | ||
| − | <svg height="40" width="150 | + | <svg height="40" width="150"> |
<rect id="shape" height="40" width="150"></rect> | <rect id="shape" height="40" width="150"></rect> | ||
</svg><div id="text"> | </svg><div id="text"> | ||
| Line 309: | Line 311: | ||
<p> | <p> | ||
<div class="svg-wrapper"> | <div class="svg-wrapper"> | ||
| − | <svg height="40" width="150 | + | <svg height="40" width="150"> |
<rect id="shape" height="40" width="150"></rect> | <rect id="shape" height="40" width="150"></rect> | ||
</svg><div id="text"> | </svg><div id="text"> | ||
| Line 322: | Line 324: | ||
<footer class="footer-distributed"> | <footer class="footer-distributed"> | ||
<div class="footer-left"> | <div class="footer-left"> | ||
| − | <h3><img src=" | + | <h3><img src="asset/image/gene.png" style="max-height:70px;max-width:70px;border: 1px solid #fff;border-radius: 50px;background-color: #fff;box-shadow: 2px -1px 9px 9px #f5f2f2;" alt="logo"></h3> |
<p class="footer-links"> | <p class="footer-links"> | ||
<a href="#">Home</a> | <a href="#">Home</a> | ||
| Line 413: | Line 415: | ||
previousSlide(); | previousSlide(); | ||
}; | }; | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
window.onscroll = function () { scrollFunction() }; | window.onscroll = function () { scrollFunction() }; | ||
function scrollFunction() { | function scrollFunction() { | ||
Revision as of 21:06, 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.
