Team:ITESM-Guadalajara/Contact
From 2014.igem.org
(Difference between revisions)
(Created page with "<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script><div style="overflow:hidden;height:400px;width:1900px;"><div id="gmap_canvas" style=...") |
|||
(36 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
- | <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script><div style="overflow:hidden;height:400px;width:1900px;"><div id="gmap_canvas" style="height:400px;width:1900px;"></div><style>#gmap_canvas img{max-width:none!important;background:none!important}</style><a class="google-map-code" href="http://www.trivoo.net/gutscheine/ | + | {{CSS/Main}} |
+ | |||
+ | <html> | ||
+ | |||
+ | <head> | ||
+ | |||
+ | <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | ||
+ | <meta name="description" content="Team ITESM - Guadalajara Wiki for the iGEM competition of 2014"> | ||
+ | <meta name="keywords" content="iGEM, Chitosan, 2014, ITESM Guadalajara, Wiki"> | ||
+ | <meta name="author" content="Irving Fernando Alvarez Vazquez"> | ||
+ | <meta name="title" content="Team ITESM - Guadalajara Wiki"> | ||
+ | |||
+ | <!-- External scripts --> | ||
+ | <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600' | ||
+ | rel='stylesheet' type='text/css'> | ||
+ | <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script> | ||
+ | <link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,300,700' rel='stylesheet' type='text/css'> | ||
+ | <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> | ||
+ | <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> | ||
+ | |||
+ | <!-- Functionallity and behaviour JS --> | ||
+ | <script> | ||
+ | |||
+ | $(document).ready(function(){ | ||
+ | |||
+ | //Loading screen functionallity | ||
+ | $('.loading').animate( | ||
+ | {opacity:0}, | ||
+ | 500, | ||
+ | function(){ | ||
+ | $('.loading').attr("style", "display:none"); | ||
+ | } | ||
+ | ); | ||
+ | |||
+ | //Height responsiveness | ||
+ | $(window).resize(function() { | ||
+ | wheight = $(window).height(); | ||
+ | $('.container').attr("style","height:"+(wheight)+"px;background-size:cover;"); | ||
+ | $('.team-member-container').attr("style","height:"+wheight/2.7+"px;"); | ||
+ | }); | ||
+ | |||
+ | $(window).trigger('resize'); | ||
+ | |||
+ | //Menu moveto container on item click functionallity | ||
+ | $('.menu-item').on('click', function(){ | ||
+ | $('.menu-item').removeClass('subselected'); | ||
+ | $(this).addClass('subselected'); | ||
+ | if($(this).attr("data")=="#top"){ | ||
+ | $('html, body').animate({ | ||
+ | scrollTop: 0 | ||
+ | }, 1000); | ||
+ | }else{ | ||
+ | $('html, body').animate({ | ||
+ | scrollTop: $($(this).attr("data")).offset().top-70 | ||
+ | }, 1000); | ||
+ | } | ||
+ | }); | ||
+ | |||
+ | //Hover of team members | ||
+ | $('.team-member-container').on('mouseenter', function(){ | ||
+ | $(this).children('.team-member-photo').attr("style", "background-image:url('"+$(this).attr("hover")+"');"); | ||
+ | $(this).on('mouseleave', function(){ | ||
+ | $(this).children('.team-member-photo').attr('style', "background-image:url('"+$(this).attr("data")+"');"); | ||
+ | }); | ||
+ | }); | ||
+ | |||
+ | }); | ||
+ | |||
+ | </script> | ||
+ | |||
+ | <style> | ||
+ | body, | ||
+ | html{ | ||
+ | margin: 0; | ||
+ | padding:0; | ||
+ | font-family: font-family: 'Yanone Kaffeesatz', sans-serif; | ||
+ | } | ||
+ | |||
+ | /* REMOVE UNWANTED ELEMENTS AND STYLE OTHERS */ | ||
+ | .firstHeading{ | ||
+ | display:none; | ||
+ | } | ||
+ | #top-section{ | ||
+ | background:#48af5d; | ||
+ | margin-left:0 !important; | ||
+ | width:100%; | ||
+ | left:0; | ||
+ | } | ||
+ | |||
+ | |||
+ | /* LOADING SCREEN */ | ||
+ | .loading{ | ||
+ | position:fixed; | ||
+ | width:100%; | ||
+ | height:100%; | ||
+ | top:0; | ||
+ | left:0; | ||
+ | |||
+ | z-index:5; | ||
+ | |||
+ | background-color:#555; | ||
+ | color:#fff; | ||
+ | text-align: center; | ||
+ | } | ||
+ | .loading p{ | ||
+ | position: relative; | ||
+ | width:100%; | ||
+ | height:10%; | ||
+ | top:45%; | ||
+ | left:0; | ||
+ | } | ||
+ | |||
+ | /* MENU STYLING */ | ||
+ | .menu{ | ||
+ | position:fixed; | ||
+ | width:100%; | ||
+ | height:56px; | ||
+ | top:14px; | ||
+ | background-color: #47a3da; | ||
+ | |||
+ | z-index:4; | ||
+ | |||
+ | border-collapse: collapse; | ||
+ | text-align:center; | ||
+ | } | ||
+ | .menu tr td{ | ||
+ | text-align: center; | ||
+ | vertical-align: middle; | ||
+ | |||
+ | font-weight: 700; | ||
+ | font-size:16px; | ||
+ | color:#fff; | ||
+ | width:7%; | ||
+ | } | ||
+ | .menu tr td.menu-item:hover{ | ||
+ | background-color:#258ecd; | ||
+ | cursor: pointer; | ||
+ | } | ||
+ | .subselected{ | ||
+ | background-color: #258ecd; | ||
+ | } | ||
+ | |||
+ | /* CONTAINERS STYLING */ | ||
+ | .container{ | ||
+ | position:relative; | ||
+ | width:100%; | ||
+ | top:50px; | ||
+ | } | ||
+ | .container .subcontainer{ | ||
+ | position:absolute; | ||
+ | width:95%; | ||
+ | height:90%; | ||
+ | top:5%; | ||
+ | left:2.5%; | ||
+ | } | ||
+ | #top{ | ||
+ | background-size: cover; | ||
+ | background-image: url("http://i1191.photobucket.com/albums/z475/alex0892/Guadalajara%20Minerva/171120111899.jpg"); | ||
+ | overflow:hidden; | ||
+ | } | ||
+ | |||
+ | /* TEAM MEMBERS CARDS STYLING */ | ||
+ | .team-member-container{ | ||
+ | position:relative; | ||
+ | width:14%; | ||
+ | margin-left:2.28%; | ||
+ | |||
+ | float:left; | ||
+ | } | ||
+ | .team-member-container:hover{ | ||
+ | cursor:pointer; | ||
+ | } | ||
+ | .row2{ | ||
+ | top:4%; | ||
+ | } | ||
+ | .team-member-container .team-member-photo{ | ||
+ | position:relative; | ||
+ | width:100%; | ||
+ | height:85%; | ||
+ | top:0; | ||
+ | left:0; | ||
+ | background-size: cover; | ||
+ | } | ||
+ | .team-member-container .team-member-footer{ | ||
+ | position:relative; | ||
+ | width:100%; | ||
+ | height:15%; | ||
+ | top:0; | ||
+ | left:0; | ||
+ | |||
+ | border:none; | ||
+ | border-collapse: collapse; | ||
+ | background-color: #47a3da; | ||
+ | color:#fff; | ||
+ | |||
+ | text-align: center; | ||
+ | vertical-align: middle; | ||
+ | } | ||
+ | |||
+ | body { | ||
+ | padding-top: 110px; | ||
+ | } | ||
+ | |||
+ | .center-block { | ||
+ | display: block; | ||
+ | margin-left: auto; | ||
+ | margin-right: auto; | ||
+ | } | ||
+ | |||
+ | |||
+ | .navbar-fixed-top { | ||
+ | background: #fff; | ||
+ | filter: none !important; | ||
+ | box-shadow: 0 2px 15px rgba(0,0,0,0.25); | ||
+ | -moz-box-shadow: 0 2px 15px rgba(0,0,0,0.25); | ||
+ | -webkit-box-shadow: 0 2px 15px rgba(0,0,0,0.25); | ||
+ | border-bottom: 1px solid rgba(0,0,0,0.2); | ||
+ | |||
+ | } | ||
+ | |||
+ | .faceBot{ | ||
+ | background: #202020; | ||
+ | } | ||
+ | |||
+ | @font-face { | ||
+ | font-family: 'Open Sans', Arial;; | ||
+ | } | ||
+ | |||
+ | body | ||
+ | { | ||
+ | font-family: 'Open Sans', Arial; | ||
+ | } | ||
+ | ul.nav a{ | ||
+ | color: gray; | ||
+ | background-color: transparent; | ||
+ | height: 100%; | ||
+ | position: relative; | ||
+ | } | ||
+ | ul.nav a:hover { | ||
+ | background-color: transparent;} | ||
+ | |||
+ | li.menu-item{ | ||
+ | background: transparent !important; | ||
+ | } | ||
+ | |||
+ | |||
+ | h2 { | ||
+ | color:green; | ||
+ | } | ||
+ | |||
+ | h4 { | ||
+ | font-weight: bold; | ||
+ | } | ||
+ | |||
+ | .menu-item{ | ||
+ | height: 75px; | ||
+ | } | ||
+ | |||
+ | .green-effect{ | ||
+ | display: none; | ||
+ | background-color: #4AAF51; | ||
+ | opacity: 1; | ||
+ | color: #FFF; | ||
+ | transition-property: all; | ||
+ | transition-duration: 0.3s; | ||
+ | transition-timing-function: ease-out; | ||
+ | transition-delay: 0s; | ||
+ | border-color: #288D30; | ||
+ | position: absolute; | ||
+ | bottom: 0px; | ||
+ | width: 100%; | ||
+ | height: 2px; | ||
+ | right: 0px; | ||
+ | } | ||
+ | |||
+ | a:hover .green-effect{ | ||
+ | display: inherit; | ||
+ | } | ||
+ | .invertir:hover { | ||
+ | -webkit-filter: invert(100%); | ||
+ | } | ||
+ | |||
+ | </style> | ||
+ | |||
+ | |||
+ | |||
+ | </head> | ||
+ | |||
+ | <body> | ||
+ | |||
+ | |||
+ | <div class="navbar navbar-fixed-top" style="margin-top:10px"> | ||
+ | <nav class="navbar-inner"> | ||
+ | <div class="row"> | ||
+ | <div class="col-md-2"></div> | ||
+ | <div class="col-md-3"><a href="https://2014.igem.org/Team:ITESM-Guadalajara"><img class="inicioLogo" src="https://static.igem.org/mediawiki/2014/5/55/BioPhrameIgem_logo.png" height="100" width="auto" ></a></div> | ||
+ | <div class="col-md-1"></div> | ||
+ | |||
+ | <div class="col-md-6" > | ||
+ | <ul class="nav navbar-nav" style="margin-top:30px"> | ||
+ | <li class="menu-item"> | ||
+ | <a href="https://2014.igem.org/Team:ITESM-Guadalajara"> | ||
+ | <span>Home</span> | ||
+ | <span class="green-effect"></span> | ||
+ | </a> | ||
+ | </li> | ||
+ | <li class="menu-item"> | ||
+ | <a href="https://2014.igem.org/Team:ITESM-Guadalajara/Company"> | ||
+ | <span>The Company</span> | ||
+ | <span class="green-effect"></span> | ||
+ | </a> | ||
+ | </li> | ||
+ | <li class="menu-item"> | ||
+ | <a href="https://2014.igem.org/Team:ITESM-Guadalajara/Team"> | ||
+ | <span>Team</span> | ||
+ | <span class="green-effect"></span> | ||
+ | </a> | ||
+ | </li> | ||
+ | <li class="menu-item"> | ||
+ | <a href="https://2014.igem.org/Team:ITESM-Guadalajara/Contact"> | ||
+ | <span>Contact</span> | ||
+ | <span class="green-effect"></span> | ||
+ | </a> | ||
+ | </li> | ||
+ | <li class="menu-item"> | ||
+ | <a href="https://2014.igem.org/Main_Page"> | ||
+ | <span>iGEM 2014</span> | ||
+ | <span class="green-effect"></span> | ||
+ | </a> | ||
+ | </li><li class="menu-item"> | ||
+ | <a href="https://2014.igem.org/Team:ITESM-Guadalajara/Notebook"> | ||
+ | <span>Notebook</span> | ||
+ | <span class="green-effect"></span> | ||
+ | </a> | ||
+ | </li><li> | ||
+ | <a href="http://www.facebook.com/biophrame"> | ||
+ | <img src="https://static.igem.org/mediawiki/2014/3/30/BIOPHRAMEGDLFacebookF.png" height="20" width="auto" class="invertir img-rounded"> | ||
+ | </a></li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | </nav> | ||
+ | </div> | ||
+ | <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script><div style="overflow:hidden;height:400px;width:1900px;"><div id="gmap_canvas" style="height:400px;width:1900px;"></div><style>#gmap_canvas img{max-width:none!important;background:none!important}</style><a class="google-map-code" href="http://www.trivoo.net/gutscheine/goertz/" id="get-map-data">trivoo</a></div><script type="text/javascript"> function init_map(){var myOptions = {zoom:14,center:new google.maps.LatLng(20.733958420609017,-103.45548872584232),mapTypeId: google.maps.MapTypeId.TERRAIN};map = new google.maps.Map(document.getElementById("gmap_canvas"), myOptions);marker = new google.maps.Marker({map: map,position: new google.maps.LatLng(20.733958420609017, -103.45548872584232)});infowindow = new google.maps.InfoWindow({content:"<b>BIOPHRAME TECHNOLOGIES</b><br/>General Ramon Corona 2514<br/> zapopan" });google.maps.event.addListener(marker, "click", function(){infowindow.open(map,marker);});}google.maps.event.addDomListener(window, 'load', init_map);</script> | ||
+ | <div class="col-md-8 col-md-offset-2"> | ||
+ | <h2>CONTACT</h2> | ||
+ | <p>Feel free to contact us to get any information of our project at iGEM 2014 or our company. We are always in the quest for new ideas and opinions that can help us grow and create new solutions so your comments are welcome as well.</p> | ||
+ | |||
+ | <form role="form" action="http://biophrame.com/site/mailer.php" method="post" > | ||
+ | <div class="form-group"> | ||
+ | <label> Your name </label> | ||
+ | <input type="text" class="form-control" name="inputName" placeholder="Required"> | ||
+ | </div> | ||
+ | <div class="form-group"> | ||
+ | <label>Your email</label> | ||
+ | <input type="email" class="form-control" name="inputEmail" placeholder="Required"> | ||
+ | </div> | ||
+ | <div class="form-group"> | ||
+ | <label> Subject </label> | ||
+ | <input type="text" class="form-control" name="inputSubject"> | ||
+ | </div> | ||
+ | <div class="form-group"> | ||
+ | <label>Your message</label> | ||
+ | <textarea class="form-control" rows="3" name="inputMessage"></textarea> | ||
+ | </div> | ||
+ | <button type="submit" class="btn btn-success" style="width:100%" >Send</button> | ||
+ | </form> | ||
+ | </br></br></br> | ||
+ | </div> | ||
+ | <div class="col-md-12 faceBot"></br> | ||
+ | <div class="col-md-2 col-md-offset-3"><img src="https://static.igem.org/mediawiki/2014/e/ef/Biophrame_logo_footer_500x150.png" class="img-responsive"><small style="color:white">Biophrame Technologies is a biotech company and manufacturer specialized in the production of Chitosan.</small></div> | ||
+ | <div class="col-md-2"> | ||
+ | <iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fbiophrame&width&height=258&colorscheme=dark&show_faces=true&header=false&stream=false&show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:258px;" allowTransparency="true"></iframe></div> | ||
+ | </div> | ||
+ | </body> | ||
+ | </html> |
Latest revision as of 22:00, 1 December 2014