Manickchand (Talk | contribs) |
Manickchand (Talk | contribs) |
||
Line 1: | Line 1: | ||
− | |||
{{UFAM-UEA_Brazil/CSS}} | {{UFAM-UEA_Brazil/CSS}} | ||
+ | {{UFAM-UEA_Brazil/FPCSS}} | ||
+ | {{UFAM-UEA_Brazil/menu-css}} | ||
<html> | <html> | ||
<head> | <head> | ||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | ||
− | |||
+ | |||
+ | <style> | ||
+ | |||
+ | .sectionL{ | ||
+ | text-align:center; | ||
+ | } | ||
+ | |||
+ | .sectionL{ | ||
+ | background-size: cover; | ||
+ | } | ||
+ | |||
+ | h1{ | ||
+ | font-size: 4em; | ||
+ | font-family: arial,helvetica; | ||
+ | color: #fff; | ||
+ | margin:0; | ||
+ | padding:0.5em; | ||
+ | |||
+ | } | ||
+ | |||
+ | #myVideo{ | ||
+ | position: absolute; | ||
+ | right: 0; | ||
+ | bottom: 0; | ||
+ | top:0; | ||
+ | right:0; | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | background-size: 100% 100%; | ||
+ | background-color: black; /* in case the video doesn't fit the whole page*/ | ||
+ | background-image: /* our video */; | ||
+ | background-position: center center; | ||
+ | background-size: contain; | ||
+ | object-fit: cover; /*cover video background */ | ||
+ | z-index:3; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | /* Layer with position absolute in order to have it over the video | ||
+ | * --------------------------------------- */ | ||
+ | #sectionL0 .layer{ | ||
+ | position: absolute; | ||
+ | z-index: 4; | ||
+ | width: 100%; | ||
+ | left: 0; | ||
+ | top: 43%; | ||
+ | } | ||
+ | |||
+ | /*solves problem with overflowing video in Mac with Chrome */ | ||
+ | #sectionL0{ | ||
+ | overflow: hidden; | ||
+ | |||
+ | #sectionL0 .layer{ | ||
+ | position: absolute; | ||
+ | z-index: 4; | ||
+ | width: 100%; | ||
+ | left: 0; | ||
+ | top: 43%; | ||
+ | |||
+ | } | ||
+ | |||
+ | #sectionL0 .layer h1{background: rgba(25,25,25,0.5)}; | ||
+ | |||
+ | |||
+ | </style> | ||
+ | |||
+ | |||
+ | </head> | ||
<body> | <body> | ||
<header> | <header> | ||
− | <a href=" | + | <a href="#" class="logo" style =" text-decoration: none;line-height: 55px; padding: 0 10px; color: #fff;">Ingles</a> |
− | <a href=" | + | <a href="#" class="logo" style =" text-decoration: none;line-height: 55px; padding: 0 10px; color: #fff;">Portugues</a> |
<nav class="nav-collapse"> | <nav class="nav-collapse"> | ||
<ul> | <ul> | ||
− | + | <li class="menu-item" id="menu-project"><a href="2016.igem.org/Team:UFAM-UEA_Brazil/Project" data-scroll>Project</a></li> | |
− | <li class="menu-item" id="menu-project"><a href="2016.igem.org/Team:UFAM-UEA_Brazil/Project">Project</a></li> | + | <li class="menu-item" id="menu-judging"><a href="2016.igem.org/Team:UFAM-UEA_Brazil/Judging" data-scroll>Judging</a></li> |
− | <li class="menu-item" id="menu-judging"><a href="2016.igem.org/Team:UFAM-UEA_Brazil/Judging">Judging</a></li> | + | <li class="menu-item" id="menu-humanPractice"><a href="2016.igem.org/Team:UFAM-UEA_Brazil/HumanPractices" data-scroll>Human Practices</a></li> |
− | <li class="menu-item" id="menu-humanPractice"><a href="2016.igem.org/Team:UFAM-UEA_Brazil/HumanPractices">Human Practices</a></li> | + | <li class="menu-item" id="menu-mathModeling"><a href="#" data-scroll>Math Modeling</a></li> |
− | <li class="menu-item" id="menu-mathModeling"><a href="#">Math Modeling</a></li> | + | <li class="menu-item" id="menu-team"><a href="#" data-scroll>Team</a></li> |
− | <li class="menu-item" id="menu-team"><a href="#" >Team</a></li> | + | |
</ul> | </ul> | ||
</nav> | </nav> | ||
</header> | </header> | ||
+ | |||
+ | <div id="fullpage"> | ||
+ | |||
+ | <div class="sectionL " id="sectionL0"> | ||
+ | |||
+ | <video autoplay loop muted id="myVideo"> | ||
+ | <source src=" | ||
+ | https://static.igem.org/mediawiki/2016/5/5c/UFAM_UEA_Brazil_Puddle.mp4" type="video/mp4"> | ||
+ | </video> | ||
+ | |||
+ | <div class="layer"> | ||
+ | <h1>UFAM-UEA Brazil</h1> | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | <div class="sectionL" id="sectionL1"> | ||
+ | <div class="intro"> | ||
+ | <h1>Abstract</h1> | ||
+ | <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Ut enim ad minim veniam, quis nostrud exercitation ullamco. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Ut enim ad minim veniam, quis nostrud exercitation ullamco. | ||
+ | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Ut enim ad minim veniam, quis nostrud exercitation ullamco. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Ut enim ad minim veniam, quis nostrud exercitation ullamco. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Ut enim ad minim veniam, quis nostrud exercitation ullamco. | ||
+ | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Ut enim ad minim veniam, quis nostrud exercitation ullamco.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Ut enim ad minim veniam, quis nostrud exercitation ullamco. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Ut enim ad minim veniam, quis nostrud exercitation ullamco. | ||
+ | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Ut enim ad minim veniam, quis nostrud exercitation ullamco. </p> | ||
+ | |||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | <div class="sectionL" id="sectionL2"> | ||
+ | |||
+ | <div class="intro"> | ||
+ | <video id="videoAbstract" width="840" height="360" controls> | ||
+ | <source src="img/v.mp4" type="video/mp4"> | ||
+ | </video> | ||
+ | <div class="backTop"><a id="backTop" href="#">Back to top</a></div> | ||
+ | </div> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | |||
+ | </body> | ||
+ | |||
+ | <script type="text/javascript" src="https://2016.igem.org/Template:UFAM-UEA_Brazil/js/scroll?action=raw&ctype=text/javascript"></script> | ||
+ | |||
+ | <script type="text/javascript" src="https://2016.igem.org/Template:UFAM-UEA_Brazil/js/jquery.min?action=raw&ctype=text/javascript"></script> | ||
+ | |||
+ | <script type="text/javascript" src="https://2016.igem.org/Template:UFAM-UEA_Brazil/js/jquery-ui.min?action=raw&ctype=text/javascript"></script> | ||
+ | |||
+ | <script type="text/javascript" src="https://2016.igem.org/Template:UFAM-UEA_Brazil/js/fullpage?action=raw&ctype=text/javascript"></script> | ||
+ | |||
+ | <script type="text/javascript" src="https://2016.igem.org/Template:UFAM-UEA_Brazil/js/homeJs?action=raw&ctype=text/javascript"></script> | ||
+ | |||
+ | <script type="text/javascript" src="https://2016.igem.org/Template:UFAM-UEA_Brazil/js/settings_home?action=raw&ctype=text/javascript"></script> | ||
<script type="text/javascript" src="https://2016.igem.org/Template:UFAM-UEA_Brazil/js/fastclick?action=raw&ctype=text/javascript"></script> | <script type="text/javascript" src="https://2016.igem.org/Template:UFAM-UEA_Brazil/js/fastclick?action=raw&ctype=text/javascript"></script> | ||
Line 28: | Line 149: | ||
ctype=text/javascript"></script> | ctype=text/javascript"></script> | ||
− | |||
− | |||
<script type="text/javascript" src="https://2016.igem.org/Template:UFAM-UEA_Brazil/js/fixed-responsive-nav?action=raw&ctype=text/javascript"></script> | <script type="text/javascript" src="https://2016.igem.org/Template:UFAM-UEA_Brazil/js/fixed-responsive-nav?action=raw&ctype=text/javascript"></script> | ||
</html> | </html> |
Revision as of 22:19, 15 September 2016
UFAM-UEA Brazil
Abstract
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Ut enim ad minim veniam, quis nostrud exercitation ullamco. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Ut enim ad minim veniam, quis nostrud exercitation ullamco. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Ut enim ad minim veniam, quis nostrud exercitation ullamco. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Ut enim ad minim veniam, quis nostrud exercitation ullamco. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Ut enim ad minim veniam, quis nostrud exercitation ullamco. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Ut enim ad minim veniam, quis nostrud exercitation ullamco.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Ut enim ad minim veniam, quis nostrud exercitation ullamco. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Ut enim ad minim veniam, quis nostrud exercitation ullamco. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Ut enim ad minim veniam, quis nostrud exercitation ullamco.