|
|
(215 intermediate revisions by 2 users not shown) |
Line 1: |
Line 1: |
− | | + | </div></div><html lang="en"> |
− | <html lang="en">
| + | |
− | </div></div></div><!-- iGEM code bug? Makes our content not under iGEM CSS code --> | + | |
| <head> | | <head> |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script> | | <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script> |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | | <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
− | <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
| |
| <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> | | <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> |
− | <script type="text/javascript">
| |
− | if (typeof jQuery == 'undefined') {
| |
− | document.write(unescape("%3Cscript src='js/jquery-1.10.2.min.js' type='text/javascript'%3E%3C/script%3E"));
| |
− | }
| |
− | </script>
| |
| <link href='https://fonts.googleapis.com/css?family=Exo|Lora' rel='stylesheet' type='text/css'> | | <link href='https://fonts.googleapis.com/css?family=Exo|Lora' rel='stylesheet' type='text/css'> |
− | <title>2nd Annual Mid-Atlantic Meet-up</title> | + | |
| + | <link href='https://fonts.googleapis.com/css?family=Raleway:400,200,300' rel='stylesheet' type='text/css'> |
| + | <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"> |
| </head> | | </head> |
| <body> | | <body> |
− | <nav>
| + | <script> |
− | <img src="https://static.igem.org/mediawiki/2016/e/e3/16UMD-logoTemp.png" id="img-logo">
| + | /* Hiding stupid stuff*/ |
− | <a href="https://2016.igem.org/Main_Page">
| + | |
− | <img src="https://static.igem.org/mediawiki/2016/3/3d/T--UMaryland--igemlogo.png" id="img-igemlogo">
| + | |
− | </a>
| + | |
− | <ul>
| + | |
− | <a style="opacity: 0">Fix</a>
| + | |
− | <li><a href="#div-title">Meet-Up</a></li>
| + | |
− | <li><a href="#information">Information</a></li>
| + | |
− | <li><a href="#schedule">Schedule</a></li>
| + | |
− | <li><a href="#speakers">Speakers</a></li>
| + | |
− | </ul>
| + | |
− | </nav>
| + | |
− | <img src="https://static.igem.org/mediawiki/2016/e/e5/T--UMaryland--more.png" id="img-more">
| + | |
− | <!-- Nav bar when more button is clicked -->
| + | |
− | <div id="div-navResized">
| + | |
− | <a href="https://2016.igem.org/Main_Page">
| + | |
− | <img src="https://static.igem.org/mediawiki/2016/3/3d/T--UMaryland--igemlogo.png" id="img-igemlogoResized">
| + | |
− | </a>
| + | |
− | <img src="https://static.igem.org/mediawiki/2016/e/e3/16UMD-logoTemp.png" id="img-logoResized">
| + | |
− | <ul>
| + | |
− | <li><a href="#div-title">Meet-Up</a></li>
| + | |
− | <li><a href="#information">Information</a></li>
| + | |
− | <li><a href="#schedule">Schedule</a></li>
| + | |
− | <li><a href="#speakers">Speakers</a></li>
| + | |
− | </ul>
| + | |
− | </div>
| + | |
− | <!-- For nav bar scrolling + hovering + window resize effects-->
| + | |
− | <script>
| + | |
− | // Animation over top nav bar when mouse hovers | + | |
− | $('nav').mouseover(
| + | |
− | function () {
| + | |
− | $('#img-logo').css('transition', '.35s ease-in');
| + | |
− | $('#img-logo').css('opacity', '1');
| + | |
− | $('#img-igemlogo').css('transition', '.35s ease-in');
| + | |
− | $('#img-igemlogo').css('opacity', '1');
| + | |
− | $('nav ul').addClass("hover");
| + | |
− | }
| + | |
− | ),
| + | |
− | $('nav').mouseout(
| + | |
− | function () {
| + | |
− | var scroll = $(window).scrollTop();
| + | |
− | if (scroll > 0 && $(window).width() >= 980 && !$('body').hasClass('pushed')) {
| + | |
− | $('#img-logo').css('transition', '.25s ease');
| + | |
− | $('#img-logo').css('opacity', '0');
| + | |
− | $('#img-igemlogo').css('transition', '.25s ease');
| + | |
− | $('#img-igemlogo').css('opacity', '0');
| + | |
− | $('nav ul').removeClass("hover");
| + | |
− | $('nav').css('transition', '.5s ease');
| + | |
− | }
| + | |
− | }
| + | |
− | ),
| + | |
− | // Window width effect on top nav bar
| + | |
| $(document).ready(function() { | | $(document).ready(function() { |
− | function checkWidth() {
| + | $('#top_title').css('display', 'none'); |
− | if ($(window).width() < 980 || $('body').hasClass('pushed')){
| + | $('#top_menu').css('display', 'none'); |
− | $('nav li').css('display', 'none');
| + | //$('#top_menu_14').css('display', 'none'); |
− | $('#img-more').css('display','block');
| + | $('#HQ_page').css('display', 'none'); |
− | $('nav ul').addClass("hover");
| + | $('#top_menu_under').css('display', 'none'); |
− | $('#img-logo').css('transition', '.35s ease-in');
| + | }); |
− | $('#img-logo').css('opacity', '1');
| + | $('#HQ_page').attr("id","iGEM"); //voids all dumb CSS iGEM HQ wrote which overrides our code |
− | $('#img-igemlogo').css('transition', '.35s ease-in');
| + | $('#mw-content-text').attr("id","overruled").removeClass('mw-content-ltr'); |
− | $('#img-igemlogo').css('opacity', '1')
| + | |
− | } else { | + | |
− | $('nav li').css('display', 'inline');
| + | |
− | $('#img-more').css('display','none');
| + | |
− | $('nav ul').removeClass("hover");
| + | |
− | if ($(window).scrollTop() > 0) {
| + | |
− | $('#img-igemlogo').css('transition', '.25s ease');
| + | |
− | $('#img-igemlogo').css('opacity', '0');
| + | |
− | $('#img-logo').css('transition', '.25s ease');
| + | |
− | $('#img-logo').css('opacity', '0');
| + | |
− | $('nav ul').addClass("scrolled");
| + | |
− | }
| + | |
− | } | + | |
− | }
| + | |
− | // Execute on load
| + | |
− | checkWidth();
| + | |
− | // Bind event listener
| + | |
− | $(window).resize(checkWidth);
| + | |
− | });
| + | |
− | // Resized nav bar effect when more icon is clicked
| + | |
− | $('#img-more').click(function() {
| + | |
− | $('#img-more').toggleClass('pushed');
| + | |
− | $('#div-navResized').toggleClass('pushed');
| + | |
− | $('nav').toggleClass('pushed');
| + | |
− | $('body').toggleClass('pushed');
| + | |
− | $('nav img').toggleClass('pushed');
| + | |
− | $('#bot-nav').toggleClass('pushed');
| + | |
− | if ($(window).width() >= 980 && !$('body').hasClass('pushed')){
| + | |
− | $('nav li').css('display', 'inline');
| + | |
− | $('#img-more').css('display','none');
| + | |
− | $('nav ul').removeClass("hover");
| + | |
− | $('#img-igemlogo').css('transition', '.25s ease'); | + | |
− | $('#img-igemlogo').css('opacity', '0');
| + | |
− | $('#img-logo').css('transition', '.25s ease');
| + | |
− | $('#img-logo').css('opacity', '0');
| + | |
− | }
| + | |
− | });
| + | |
− | // Scrolling animation for top nav bar
| + | |
− | $(function() { | + | |
− | var nav = $('nav ul');
| + | |
− | $(window).scroll(function() {
| + | |
− | var scroll = $(window).scrollTop();
| + | |
− | if (scroll > 0 && $(window).width() >= 980) {
| + | |
− | nav.addClass("scrolled");
| + | |
− | nav.removeClass("hover");
| + | |
− | $('#img-logo').css('transition', '.25s ease');
| + | |
− | $('#img-logo').css('opacity', '0');
| + | |
− | $('#img-igemlogo').css('transition', '.25s ease');
| + | |
− | $('#img-igemlogo').css('opacity', '0');
| + | |
− | } else {
| + | |
− | nav.removeClass("scrolled");
| + | |
− | $('#img-logo').css('transition', '.35s ease-in');
| + | |
− | $('#img-logo').css('opacity', '1');
| + | |
− | $('#img-igemlogo').css('transition', '.35s ease-in');
| + | |
− | $('#img-igemlogo').css('opacity', '1');
| + | |
− | }
| + | |
− | });
| + | |
− | });
| + | |
| </script> | | </script> |
− | <div id="div-title" class="image"> | + | <style> |
− | <img src="https://static.igem.org/mediawiki/2015/5/54/Campus.png" id="img-UMD"/> | + | #bars_item { |
− | <h1><span>2nd Annual Mid-Atlantic Mini-Jamboree<br/>July 22nd, 2016</span></h1>
| + | display: none; |
| + | } |
| + | |
| + | #sideMenu { |
| + | display: none; |
| + | } |
| + | |
| + | #bodyContent, #content, html, body, #globalWrapper, #iGEM, #overruled { |
| + | width: 100%; |
| + | padding: 0 0 0 0; |
| + | border: none; |
| + | margin: 0 0 0 0; |
| + | background: transparent; |
| + | font-family: Raleway !important; |
| + | min-width: 1000px; |
| + | min-height: 500px; |
| + | } |
| + | |
| + | #top_title { |
| + | display: none; |
| + | line-height: inherit; |
| + | } |
| + | |
| + | #sideMenu { |
| + | display: none; |
| + | } |
| + | |
| + | /* Navbar and body setup */ |
| + | body { |
| + | overflow: normal; |
| + | } |
| + | |
| + | #content { |
| + | margin-top: 0px; |
| + | } |
| + | |
| + | #UMD-content { |
| + | font-family: Raleway !important; |
| + | min-width: 1000px; |
| + | color: white; |
| + | font-weight: 300; |
| + | |
| + | } |
| + | |
| + | #UMD-content a { |
| + | color: white; |
| + | } |
| + | |
| + | #nav li { |
| + | display: inline; |
| + | font-size: 18pt; |
| + | margin-right: 35px; |
| + | } |
| + | |
| + | #nav { |
| + | margin-right: 2%; |
| + | margin-left: auto; |
| + | width: 810px; |
| + | } |
| + | |
| + | #nav ul { |
| + | list-style: none; |
| + | } |
| + | |
| + | #h2 { |
| + | font-family: Raleway !important; |
| + | display: none; |
| + | font-size: 36pt !important; |
| + | margin-top: 0px !important; |
| + | text-align: left !important; |
| + | } |
| + | |
| + | #h3, #div-h3 { |
| + | font-family: Raleway !important; |
| + | display: none; |
| + | font-size: 20pt !important; |
| + | line-height: 1.5em !important; |
| + | text-align: left !important; |
| + | } |
| + | |
| + | #div-text { |
| + | width: 1100px; |
| + | padding-top: 20px; |
| + | } |
| + | |
| + | #img-logo { |
| + | display: none; |
| + | margin-top: 10px; |
| + | float: left; |
| + | margin-right: 50px; |
| + | } |
| + | |
| + | .notOutline { |
| + | margin-left: 50px; |
| + | min-height: 400px; |
| + | min-width: 1000px; |
| + | } |
| + | |
| + | .hide { |
| + | display: none; |
| + | } |
| + | a { |
| + | padding-right: 0px !important; |
| + | text-decoration: none !important; |
| + | } |
| + | |
| + | |
| + | .tour { |
| + | display: none; |
| + | position: absolute; |
| + | right: 150px; |
| + | top: 50%; |
| + | bottom: auto; |
| + | left; auto; |
| + | } |
| + | |
| + | html { |
| + | background: url(https://static.igem.org/mediawiki/2016/7/7e/T--UMaryland--main.jpg) !important; |
| + | background-size: cover !important; |
| + | background-repeat: no-repeat !important; |
| + | } |
| + | |
| + | .background { |
| + | background-color: rgba(0,0,0, 0.7); |
| + | padding: 5px 5px 5px 5px; |
| + | } |
| + | |
| + | .background2 { |
| + | background-color: rgba(0,0,0, 0.7); |
| + | padding: 5px 0px 4px 0px; |
| + | } |
| + | |
| + | .background3 { |
| + | background-color: rgba(0,0,0, 0.7); |
| + | padding: 5px 10px 5px 10px; |
| + | } |
| + | |
| + | #navContainer { |
| + | position: relative; |
| + | width: 100%; |
| + | height: 25px; |
| + | margin-top: 80px; |
| + | margin-bottom: 120px; |
| + | min-width: 1000px; |
| + | } |
| + | |
| + | |
| + | #small { |
| + | font-size: 14pt !important; |
| + | display: block !important; |
| + | font-family: Raleway !important; |
| + | margin-right: 2%; |
| + | margin-left: auto; |
| + | width: 500px; |
| + | |
| + | } |
| + | |
| + | .smallContainer { |
| + | width: 100%; |
| + | min-width: 1000px; |
| + | height: 30px; |
| + | margin-top: 120px; |
| + | |
| + | } |
| + | </style> |
| + | <div id="UMD-content"> |
| + | <div id="navContainer"> |
| + | <div class="hide"> |
| + | <nav id="nav"> |
| + | <ul> |
| + | <li><a href="https://2016.igem.org/Team:UMaryland/projects">Projects</a></li> |
| + | <li><a href="https://2016.igem.org/Team:UMaryland/Part_Collection">Parts</a></li> |
| + | <li><a href="https://2016.igem.org/Team:UMaryland/Model">Modeling</a></li> |
| + | <li><a href="https://2016.igem.org/Team:UMaryland/outreach">Outreach</a></li> |
| + | <li><a href="https://2016.igem.org/Team:UMaryland/notebook">Notebook</a></li> |
| + | <li><a href="https://2016.igem.org/Team:UMaryland/about">About Us</a></li> |
| + | </ul> |
| + | </nav> |
| </div> | | </div> |
− | <h id="information"><a style="opacity: 0">I</a> </h>
| |
− | <h2 id="background"> Background </h2>
| |
− | <img src="https://static.igem.org/mediawiki/2015/1/10/Meetup.png" id="meetup"/>
| |
− | <div id="Info" style="text-align: center">
| |
− | <p id = "p1"> Last year, UMaryland iGEM founded the first Mid-Atlantic Meet-up and hosted
| |
− | four other teams: UVA, William and Mary, Duke, and Rock Ridge High School.
| |
− | Each team gave a 25 minute presentation of their project followed by a Q&A
| |
− | with the audience. We were also fortunate enough to have Special Agent
| |
− | Edward You of the FBI and UMD Professor Raymond St. Leger as guest speakers.</p>
| |
− | <p id="p2"> This year, we plan to host many more teams and have a more ambitious agenda planned.
| |
− | We cannot wait to welcome those who attend and show them an amazing UMD experience.
| |
− | The location of the meet-up will be posted closer to the date. If you are a team interested in
| |
− | attending, please do not hesitate to contact us through email or Facebook. </p>
| |
− | <h id="schedule"><a style="opacity: 0">S</a></h>
| |
| </div> | | </div> |
− | <img src="http://images.all-free-download.com/images/graphiclarge/plain_white_background_211387.jpg" id="img-whitebackground"/> | + | <div class="notOutline"> |
− | <img src="https://upload.wikimedia.org/wikipedia/en/thumb/5/51/University_of_Maryland_Seal.svg/1024px-University_of_Maryland_Seal.svg.png"
| + | <img src="https://static.igem.org/mediawiki/2016/9/9d/T--UMaryland--newlogosquare.png" id="img-logo" alt="UMaryland iGEM Logo" width="300px"/> |
− | id="img-UMDseal"/> | + | <div id="div-text"> |
− | <img src="https://static.igem.org/mediawiki/2016/e/eb/T--UMaryland--schedule.png" id="img-schedule"/>
| + | <p id="h2"><span class="background">Biosequestration of Methane</span></p> |
− | <div id="hiddenS">
| + | <p id="h3"><span class="background2">Creating a strain of E. coli that break down methane to be implemented into landfills as an environmentally friendly strategy for ameliorating global climate change</span></p> |
− | <h id="speakers"><a style="opacity: 0">S</a></h>
| + | </div> |
− | </div>
| + | <div class="smallContainer"> |
− | <h2> Speakers </h2>
| + | <div class="hide"> |
− | <div id="Speakers" class="bios"> | + | <p id="small"><span class="background">Follow us on <a target="_blank" href="https://www.facebook.com/UMarylandiGEM/" style="text-decoration: underline;">Facebook</a> and <a target="_blank" href="https://www.instagram.com/umarylandigem/" style="text-decoration: underline;">Instagram</a> for updates!</span></p> |
− | <img src="http://www.ench.umd.edu/sites/default/files/images/faculty/sriram4-lg.png" id="umdguy" data-select="ganesh"/> | + | </div> |
− | <img src="http://www.synbioproject.org/site/assets/files/1299/todd_cropped.jpg" id="igemguy" data-select="todd"/>
| + | |
− | <div id="descriptions">
| + | |
− | <div id="div-ganesh" class="description">
| + | |
− | <h3> Dr. Ganesh Sriam</h3>
| + | |
− | <p> Dr. Ganesh Sriram is Keystone Assistant Professor in the Department of Chemical and Biomolecular
| + | |
− | Engineering and Affiliate Faculty Member in the Bioengineering and Plant Biology graduate programs at
| + | |
− | University of Maryland. After earning his bachelor's and master's degrees in chemical engineering from
| + | |
− | Indian Institute of Technology (IIT) Bombay, he graduated a Ph.D. in chemical engineering from Iowa
| + | |
− | State University in 2004, working in the lab of Dr. Jacqueline Shanks. From 2004 to 2007, he was a
| + | |
− | postdoctoral researcher in the labs of Dr. Katrina Dipple and Dr. James Liao at UCLA.<sup>1</sup></p>
| + | |
− | </div>
| + | |
− | <div id="div-todd" class="description" style="display: none;">
| + | |
− | <h4> Dr. Todd Kuiken </h4>
| + | |
− | <p> Dr. Todd Kuiken is a Senior Program Associate with the Science and Technology Innovation Program
| + | |
− | where he explores the scientific and technological frontier, stimulating discovery and bringing new
| + | |
− | tools to bear on public policy challenges that emerge as science advances.
| + | |
− | He is the principal investigator on the Wilson Center’s Synthetic Biology Project, where he has
| + | |
− | numerous projects evaluating and designing new research and governance strategies to proactively
| + | |
− | address the biosafety, biosecurity and environmental risks associated with synthetic biology.
| + | |
− | He is also the human practices chairperson of the International Genetically
| + | |
− | Engineered Machines competition and a founding member of its biosafety/biosecurity committee.<sup>2</sup>
| + | |
− | </p>
| + | |
− | </div>
| + | |
− | </div> | + | |
| </div> | | </div> |
− | <div id="footnotes">
| |
− | <sup>1. Bio from http://www.ench.umd.edu/faculty/sriram</sup>
| |
− | <br/>
| |
− | <sup>2. Bio from https://www.wilsoncenter.org/person/todd-kuiken-phd</sup>
| |
− | </div>
| |
− | <div id="bot-nav">
| |
− | <div id="container">
| |
− | <div class="pull-left">
| |
− | <a href="mailto:umarylandigem@gmail.com"><p id="contact"> Contact Us </p></a>
| |
− | </div>
| |
− | <p id="copyright">© University of Maryland iGEM 2016</p>
| |
− | <div class="pull-right">
| |
− | <ul>
| |
− | <li> <a href="https://www.facebook.com/UMarylandiGEM/"> <img src="https://static.igem.org/mediawiki/2016/2/2c/T--UMaryland--FBlogo.png"/> </a> </li>
| |
− | <li> <a href="https://www.instagram.com/umarylandigem/"> <img src="https://static.igem.org/mediawiki/2016/b/bc/T--UMaryland--Instalogo.png"/> </a> </li>
| |
− | </ul>
| |
− | </div>
| |
− | </div>
| |
| </div> | | </div> |
| + | </div> |
| + | <style> |
| + | #img-logoNav{ |
| + | display: none; |
| + | margin-left: 50px; |
| + | margin-top: 42px; |
| + | width: 260px; |
| + | float: left; |
| + | } |
| + | </style> |
| + | </div> |
| <script> | | <script> |
− | // Text animation for speaker bios
| + | |
− | var current = 'ganesh';
| + | |
− | $('.bios img').click( function() { | + | $.fn.extend({ |
− | var selected = $(this).attr('data-select'); // grabs the name of the navigational element clicked
| + | animateCss: function (animationName) { |
− | if (selected != current) { // only change display / trigger animation if clicking different nav
| + | var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend'; |
− | $('.description').css('display','none'); // hides all text | + | this.addClass('animated ' + animationName).one(animationEnd, function() { |
− | $('.description').css('margin-left', '60px')
| + | $(this).removeClass('animated ' + animationName); |
− | $('#div-' + selected).css('display','block'); // the div containing the text that is selected is displayed
| + | }); |
− | $('#div-' + selected).animate({ marginLeft: '0px'}, 200); | + | |
− | current = selected; // sets the current display
| + | |
| } | | } |
− | });
| + | }); |
− | </script>
| + | |
− | </body>
| + | $(window).load(function() { |
− | </div>
| + | var timeoutID; |
− | </div>
| + | var timeoutID2; |
− | <style>
| + | |
− | /* Navbar and body setup */
| + | $('#img-logo, #h2').animateCss('fadeInUp'); |
− | | + | $('#h2, #img-logo').css('display','block'); |
− | body {
| + | timeoutID = window.setTimeout(show2, 800); |
− | font-family: 'Lora', serif;
| + | |
− | overflow-x: hidden;
| + | |
− | }
| + | }) |
− | | + | |
− | /* Navbar */
| + | function show2(){ |
− | nav {
| + | $('#h3, #div-h3').animateCss('fadeInUp'); |
− | opacity: 1.0;
| + | $('#h3, #div-h3').css('display','block'); |
− | position: fixed;
| + | timeoutID = window.setTimeout(show3, 800); |
− | top: 0;
| + | } |
− | left: 0;
| + | |
− | right: 0;
| + | function show3() { |
− | line-height: 10px;
| + | $('nav, #small').animateCss('fadeInUp'); |
− | font-size: 20pt;
| + | $('.hide').css('display','block') |
− | display: block;
| + | timeoutID = window.setTimeout(show4, 2000); |
− | background: #fff;
| + | } |
− | border-bottom: 1px solid black;
| + | |
− | box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
| + | function show4() { |
− | border-radius: 15px;
| + | $('.tour').animateCss('slideInLeft'); |
− | z-index: 1;
| + | //$('.tour').css('display','block') |
− | }
| + | timeoutID = window.setTimeout(show5, 5000); |
− | | + | } |
− | nav a {
| + | |
− | text-decoration: none;
| + | function show5() { |
− | color: black;
| + | $('.tour').animateCss('pulse'); |
− | font-family: 'Exo', sans-serif;
| + | timeoutID = window.setTimeout(show5, 5000); |
− | }
| + | } |
− | | + | |
− | nav ul {
| + | </script> |
− | list-style: none;
| + | |
− | transition: all .5s ease;
| + | |
− | text-align: right;
| + | |
− | }
| + | |
− | | + | |
− | nav li {
| + | |
− | display: inline;
| + | |
− | margin-right: 20px;
| + | |
− | }
| + | |
− | | + | |
− | nav a:hover {
| + | |
− | text-decoration: underline;
| + | |
− | }
| + | |
− | | + | |
− | /* Nav bar when more icon is clicked */
| + | |
− | | + | |
− | #div-navResized {
| + | |
− | font-size: 20pt;
| + | |
− | position: fixed;
| + | |
− | text-align: center;
| + | |
− | display: none;
| + | |
− | width: 100%;
| + | |
− | left: 0;
| + | |
− | right: 0;
| + | |
− | margin-top: 74px;
| + | |
− | z-index: 3;
| + | |
− | }
| + | |
− | | + | |
− | #div-navResized a {
| + | |
− | text-decoration: none;
| + | |
− | color: black;
| + | |
− | font-family: 'Exo', sans-serif;
| + | |
− | }
| + | |
− | | + | |
− | #div-navResized ul {
| + | |
− | list-style: none;
| + | |
− | margin-right: 40px;
| + | |
− | margin-top: 0px;
| + | |
− | }
| + | |
− | | + | |
− | #div-navResized ul li {
| + | |
− | margin-top: 10px;
| + | |
− | }
| + | |
− | | + | |
− | #div-title {
| + | |
− | z-index: -999;
| + | |
− | }
| + | |
− | | + | |
− | /* Permanent bottom bar */
| + | |
− | #bot-nav {
| + | |
− | background-color: #f9f9f9;
| + | |
− | border-top: 1px solid #f5f5f5;
| + | |
− | position: absolute;
| + | |
− | width: 100%;
| + | |
− | height: 75px;
| + | |
− | left: 0;
| + | |
− | top: 2850px;
| + | |
− | display: block;
| + | |
− | color: black;
| + | |
− | font-size: 12pt;
| + | |
− | }
| + | |
− | | + | |
− | #container {
| + | |
− | width: 950px;
| + | |
− | margin-left: auto;
| + | |
− | margin-right: auto;
| + | |
− | padding-right: 15px;
| + | |
− | padding-left: 15px;
| + | |
− | }
| + | |
− | | + | |
− | #bot-nav img {
| + | |
− | height: 20px;
| + | |
− | width: 20px;
| + | |
− | margin-top: -40px;
| + | |
− | -webkit-filter: grayscale(100%);
| + | |
− | filter: grayscale(100%);
| + | |
− | }
| + | |
− | | + | |
− | #bot-nav img:hover {
| + | |
− | -webkit-filter: grayscale(0%);
| + | |
− | filter: grayscale(0%);
| + | |
− | }
| + | |
− | | + | |
− | #bot-nav ul {
| + | |
− | text-align: center;
| + | |
− | margin-top: -29px;
| + | |
− | }
| + | |
− | | + | |
− | #bot-nav li {
| + | |
− | display: inline;
| + | |
− | margin-right: 5px;
| + | |
− | }
| + | |
− | | + | |
− | #bot-nav a {
| + | |
− | text-decoration: none;
| + | |
− | color: black;
| + | |
− | }
| + | |
− | | + | |
− | #copyright {
| + | |
− | text-align: center;
| + | |
− | padding-top: 13px;
| + | |
− | }
| + | |
− | | + | |
− | #contact:hover {
| + | |
− | text-shadow: .1px .1px black;
| + | |
− | }
| + | |
− | | + | |
− | /* Background of page */
| + | |
− | | + | |
− | html {
| + | |
− | background-color: rgba(0, 0, 0, 0.06);
| + | |
− | }
| + | |
− | | + | |
− | /* Start Page Specific CSS */
| + | |
− | | + | |
− | /* Title */
| + | |
− | h1 {
| + | |
− | font-size: 30pt;
| + | |
− | position: absolute;
| + | |
− | top: 350px;
| + | |
− | left: 39px;
| + | |
− | width: 100%;
| + | |
− | }
| + | |
− | | + | |
− | h1 span {
| + | |
− | color: white;
| + | |
− | letter-spacing: -1px;
| + | |
− | background: rgb(0, 0, 0); /* fallback color */
| + | |
− | background: rgba(0, 0, 0, 0.7);
| + | |
− | }
| + | |
− | | + | |
− | /* Info */
| + | |
− | | + | |
− | #Info {
| + | |
− | margin-top: 200px;
| + | |
− | margin-left: -8px;
| + | |
− | margin-right: -8px;
| + | |
− | margin-bottom: 100px;
| + | |
− | }
| + | |
− | | + | |
− | h2 {
| + | |
− | float: left;
| + | |
− | margin-left: 15px;
| + | |
− | font-size: 20pt;
| + | |
− | text-shadow: -0.5px .5px .5px black;
| + | |
− | }
| + | |
− | | + | |
− | #background {
| + | |
− | margin-top: 100px;
| + | |
− | }
| + | |
− | | + | |
− | #meetup {
| + | |
− | position: absolute;
| + | |
− | margin-left: -160px;
| + | |
− | z-index: -999;
| + | |
− | margin-top: 149px;
| + | |
− | height: 400px;
| + | |
− | min-width: 600px;
| + | |
− | max-width: 600px;
| + | |
− | }
| + | |
− | | + | |
− | #Info p {
| + | |
− | font-size: 15pt;
| + | |
− | line-height: 2;
| + | |
− | }
| + | |
− | | + | |
− | #p1 {
| + | |
− | margin-left: 626px;
| + | |
− | max-width: 585px;
| + | |
− | min-width: 585px
| + | |
− | }
| + | |
− | | + | |
− | #p2 {
| + | |
− | margin-top: 100px;
| + | |
− | margin-left: 204px;
| + | |
− | max-width: 850px;
| + | |
− | min-width: 850px;
| + | |
− | }
| + | |
− | | + | |
− | /* Schedule */
| + | |
− | | + | |
− | #img-whitebackground {
| + | |
− | z-index: -999;
| + | |
− | width: 150%;
| + | |
− | margin-left: -8px;
| + | |
− | height: 700px;
| + | |
− | margin-top: -52px;
| + | |
− | }
| + | |
− | | + | |
− | #img-UMDseal {
| + | |
− | position: absolute;
| + | |
− | width: 500px;
| + | |
− | height: 500px;
| + | |
− | -webkit-filter: grayscale(100%);
| + | |
− | margin-left: 334px;
| + | |
− | margin-top: -591px;
| + | |
− | }
| + | |
− | | + | |
− | #img-schedule {
| + | |
− | display: block;
| + | |
− | position: absolute;
| + | |
− | margin-top: -632px;
| + | |
− | margin-left: 300px;
| + | |
− | opacity: .9;
| + | |
− | }
| + | |
− | | + | |
− | /* Speakers */
| + | |
− | | + | |
− | #Speakers {
| + | |
− | margin-top: 290px;
| + | |
− | margin-left: -8px;
| + | |
− | margin-right: -8px;
| + | |
− | }
| + | |
− | | + | |
− | #Speakers img {
| + | |
− | width: 123px;
| + | |
− | height: 170px;
| + | |
− | margin-top: -179px;
| + | |
− | position: absolute;
| + | |
− | }
| + | |
− | | + | |
− | #Speakers p {
| + | |
− | font-size: 15pt;
| + | |
− | line-height: 2;
| + | |
− | width: 970px;
| + | |
− | margin-left: 50px;
| + | |
− | margin-top: -20px;
| + | |
− | }
| + | |
− | | + | |
− | img#igemguy {
| + | |
− | border: 1px solid black;
| + | |
− | margin-left: 721px;
| + | |
− | }
| + | |
− | | + | |
− | #umdguy {
| + | |
− | margin-left: 377px;
| + | |
− | }
| + | |
− | | + | |
− | h3 {
| + | |
− | font-size: 20pt;
| + | |
− | margin-left: 340px;
| + | |
− | }
| + | |
− | | + | |
− | h4 {
| + | |
− | font-size: 20pt;
| + | |
− | margin-left: 695px;
| + | |
− | margin-top: 11px;
| + | |
− | }
| + | |
− | | + | |
− | #hiddenS {
| + | |
− | margin-top: -50px;
| + | |
− | margin-bottom: 50px;
| + | |
− | }
| + | |
− | | + | |
− | /* Footnotes (References) */
| + | |
− | | + | |
− | #footnotes {
| + | |
− | margin-left: 50px;
| + | |
− | margin-top: 25px;
| + | |
− | font-size: 16px;
| + | |
− | }
| + | |
− | | + | |
− | /* Classes */
| + | |
− | | + | |
− | .description {
| + | |
− | margin-top: 200px;
| + | |
− | min-width: 970px;
| + | |
− | }
| + | |
− | | + | |
− | .border {
| + | |
− | border-bottom: 1px black;
| + | |
− | }
| + | |
− | | + | |
− | .image {
| + | |
− | position: relative;
| + | |
− | width: 100%; /* for IE 6 */
| + | |
− | }
| + | |
− | | + | |
− | .pull-right {
| + | |
− | float: right !important;
| + | |
− | }
| + | |
− | | + | |
− | .pull-left {
| + | |
− | float: left !important;
| + | |
− | }
| + | |
− | | + | |
− | /* Pushed class actives */
| + | |
− | #img-more.pushed {
| + | |
− | box-shadow: inset 1px 1px 1px 2px rgba(0, 0, 0, .3);
| + | |
− | }
| + | |
− | | + | |
− | #div-navResized.pushed {
| + | |
− | display: block;
| + | |
− | }
| + | |
− | | + | |
− | #div-navResized.pushed a:hover {
| + | |
− | text-decoration: underline;
| + | |
− | }
| + | |
− | | + | |
− | nav.pushed {
| + | |
− | height: 271px;
| + | |
− | }
| + | |
− | | + | |
− | body.pushed {
| + | |
− | overflow-y: hidden;
| + | |
− | }
| + | |
− | | + | |
− | nav img.pushed {
| + | |
− | display: none;
| + | |
− | }
| + | |
− | | + | |
− | #bot-nav.pushed {
| + | |
− | display: none;
| + | |
− | }
| + | |
− | | + | |
− | /* Hides nav bar when scrolling */
| + | |
− | .scrolled {
| + | |
− | font-size: 10pt;
| + | |
− | line-height: 0px;
| + | |
− | }
| + | |
− | | + | |
− | /* animation when mouse is over Navbar */
| + | |
− | .hover {
| + | |
− | font-size: 20pt;
| + | |
− | line-height: 10px;
| + | |
− | }
| + | |
− | | + | |
− | /* Images */
| + | |
− | | + | |
− | /* Logo */
| + | |
− | #img-logo {
| + | |
− | width: 150px;
| + | |
− | float: left;
| + | |
− | position: fixed;
| + | |
− | margin-top: 12px;
| + | |
− | margin-left: 65px;
| + | |
− | opacity: 1.0;
| + | |
− | }
| + | |
− | | + | |
− | /* iGEM logo */
| + | |
− | #img-igemlogo {
| + | |
− | width: 60px;
| + | |
− | float: right;
| + | |
− | position: fixed;
| + | |
− | margin-top: 10px;
| + | |
− | opacity: 1.0;
| + | |
− | }
| + | |
− | | + | |
− | /* More Icon */
| + | |
− | #img-more {
| + | |
− | position: fixed;
| + | |
− | display: none;
| + | |
− | width: 50px;
| + | |
− | height: 50px;
| + | |
− | margin-right: 0px;
| + | |
− | right: 15px;
| + | |
− | z-index: 2;
| + | |
− | }
| + | |
− | | + | |
− | #img-UMD {
| + | |
− | z-index: -999;
| + | |
− | margin-left: -8px;
| + | |
− | margin-top: -8px;
| + | |
− | height: 600px;
| + | |
− | }
| + | |
− | | + | |
− | /* Logos when more button is clicked */
| + | |
− | | + | |
− | #img-logoResized {
| + | |
− | width: 150px;
| + | |
− | display: block;
| + | |
− | margin-right: auto;
| + | |
− | margin-left: auto;
| + | |
− | margin-top: -266px;
| + | |
− | }
| + | |
− | #img-igemlogoResized {
| + | |
− | width: 60px;
| + | |
− | display: block;
| + | |
− | margin-right: auto;
| + | |
− | margin-left: auto;
| + | |
− | margin-top: 142px;
| + | |
− | }
| + | |
− | </style> | + | |
| </html> | | </html> |