Difference between revisions of "Team:AFCM-Egypt"
Aymanshafei (Talk | contribs) |
Aymanshafei (Talk | contribs) |
||
| Line 128: | Line 128: | ||
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12" style="margin-right:50px"> | <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12" style="margin-right:50px"> | ||
<div class="hovereffect"> | <div class="hovereffect"> | ||
| − | <img class="img-responsive" src=" | + | <img class="img-responsive" src="https://static.igem.org/mediawiki/2017/8/80/AFCM-Egypt-logopng.png" alt=""> |
<div class="overlay"> | <div class="overlay"> | ||
<h2>Hover effect 2</h2> | <h2>Hover effect 2</h2> | ||
| Line 137: | Line 137: | ||
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12" style="margin-right:50px"> | <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12" style="margin-right:50px"> | ||
<div class="hovereffects"> | <div class="hovereffects"> | ||
| − | <img class="img-responsive" src=" | + | <img class="img-responsive" src="https://static.igem.org/mediawiki/2017/8/80/AFCM-Egypt-logopng.png" alt=""> |
<div class="overlay"> | <div class="overlay"> | ||
<h2>Hover effect 5</h2> | <h2>Hover effect 5</h2> | ||
| Line 146: | Line 146: | ||
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12" style="margin-right:50px"> | <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12" style="margin-right:50px"> | ||
<div class="hovereffectx"> | <div class="hovereffectx"> | ||
| − | <img class="img-responsive" src=" | + | <img class="img-responsive" src="https://static.igem.org/mediawiki/2017/8/80/AFCM-Egypt-logopng.png" alt=""> |
<div class="overlay"> | <div class="overlay"> | ||
<h2>Effect 13</h2> | <h2>Effect 13</h2> | ||
| Line 187: | Line 187: | ||
<div class="cube-container"> | <div class="cube-container"> | ||
<div class="photo-cube"> | <div class="photo-cube"> | ||
| − | <img class="front" src=" | + | <img class="front" src="https://static.igem.org/mediawiki/2017/8/80/AFCM-Egypt-logopng.png" alt=""> |
<div class="back photo-desc"> | <div class="back photo-desc"> | ||
<h3>test</h3> | <h3>test</h3> | ||
<p>description</p> | <p>description</p> | ||
</div> | </div> | ||
| − | <img class="left" src=" | + | <img class="left" src="https://static.igem.org/mediawiki/2017/8/80/AFCM-Egypt-logopng.png" alt=""> |
| − | <img class="right" src=" | + | <img class="right" src="https://static.igem.org/mediawiki/2017/8/80/AFCM-Egypt-logopng.png" alt=""> |
</div> | </div> | ||
</div> | </div> | ||
| Line 213: | Line 213: | ||
<div class="cube-container"> | <div class="cube-container"> | ||
<div class="photo-cube"> | <div class="photo-cube"> | ||
| − | <img class="front" src=" | + | <img class="front" src="https://static.igem.org/mediawiki/2017/8/80/AFCM-Egypt-logopng.png" alt=""> |
<div class="back photo-desc"> | <div class="back photo-desc"> | ||
<h3>test</h3> | <h3>test</h3> | ||
<p>description</p> | <p>description</p> | ||
</div> | </div> | ||
| − | <img class="left" src=" | + | <img class="left" src="https://static.igem.org/mediawiki/2017/8/80/AFCM-Egypt-logopng.png" alt=""> |
| − | <img class="right" src=" | + | <img class="right" src="https://static.igem.org/mediawiki/2017/8/80/AFCM-Egypt-logopng.png" alt=""> |
</div> | </div> | ||
</div> | </div> | ||
| Line 226: | Line 226: | ||
<div class="cube-container"> | <div class="cube-container"> | ||
<div class="photo-cube"> | <div class="photo-cube"> | ||
| − | <img class="front" src=" | + | <img class="front" src="https://static.igem.org/mediawiki/2017/8/80/AFCM-Egypt-logopng.png" alt=""> |
<div class="back photo-desc"> | <div class="back photo-desc"> | ||
<h3>test</h3> | <h3>test</h3> | ||
<p>description</p> | <p>description</p> | ||
</div> | </div> | ||
| − | <img class="left" src=" | + | <img class="left" src="https://static.igem.org/mediawiki/2017/8/80/AFCM-Egypt-logopng.png" alt=""> |
| − | <img class="right" src=" | + | <img class="right" src="https://static.igem.org/mediawiki/2017/8/80/AFCM-Egypt-logopng.png" alt=""> |
</div> | </div> | ||
</div> | </div> | ||
| Line 244: | Line 244: | ||
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 center"> | <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 center"> | ||
<video width="420" height="340" controls style="border:1px solid #000"> | <video width="420" height="340" controls style="border:1px solid #000"> | ||
| − | <source src=" | + | <source src="https://static.igem.org/mediawiki/2017/8/80/AFCM-Egypt-logopng.png" type="video/ogg"> |
| − | <source src=" | + | <source src="https://static.igem.org/mediawiki/2017/8/80/AFCM-Egypt-logopng.png" type="video/mp4"> |
</video> | </video> | ||
</div> | </div> | ||
Revision as of 13:23, 14 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.
Sponsors
