Difference between revisions of "Team:Pumas Mexico/HP/Gold"

(Prototype team page)
 
 
(2 intermediate revisions by 2 users not shown)
Line 1: Line 1:
−
{{Pumas_Mexico}}
+
{{Pumas_Mexico/CSS}}
−
<html>
+
<style type="text/css">
 +
#apDiv2 {
 +
float:right;
 +
left: 348px;
 +
top: 640px;
 +
height:200px;
 +
width:300px;
 +
 +
 +
}
  
−
<div class="column full_size judges-will-not-evaluate">
+
@media screen and (max-width:1500px){
−
<h3>★  ALERT! </h3>
+
−
<p>This page is used by the judges to evaluate your team for the <a href="https://2016.igem.org/Judging/Medals">human practices gold medal criterion</a>. </p>
+
  
 +
IMG{
 +
width:100%;
 +
}}
 +
@media screen and (max-width:1340px){
  
−
<p> Delete this box in order to be evaluated for this medal. See more information at <a href="https://2016.igem.org/Judging/Pages_for_Awards/Instructions"> Instructions for Pages for awards</a>.</p>
+
IMG{
−
</div>
+
width:100%;
 +
}}
 +
@media screen and (max-width:1180px){
  
 +
IMG{
 +
width:100%;
 +
}}
 +
@media screen and (max-width:1100px){
  
 +
IMG{
 +
width:100%;
 +
}}
 +
@media screen and (max-width:920px){
  
−
<div class="column full_size">
+
IMG{
 +
width:100%;
 +
}}
 +
@media screen and (max-width:920px){
  
 +
IMG{
 +
width:100%;
 +
}}
 +
</style>
  
−
<p>iGEM teams are unique and leading the field because they "go beyond the lab" to imagine their projects in a social/environmental context, to better understand issues that might influence the design and use of their technologies.</p>
+
* {
−
<p>Teams work with students and advisors from the humanities and social sciences to explore topics concerning ethical, legal, social, economic, safety or security issues related to their work. Consideration of these Human Practices is crucial for building safe and sustainable projects that serve the public interest. </p>
+
margin:0;
−
<p>For more information, please see the <a href="https://2016.igem.org/Human_Practices">Human Practices Hub</a>.</p>
+
padding:0;
 +
}
  
−
</div>
 
  
  
−
</html>
+
header {
 +
margin-top:10px;
 +
    width: 100%;
 +
    overflow: hidden;
 +
    height: 150px;
 +
    position: relative;
 +
}
 +
 
 +
nav {
 +
    top:-20px;
 +
    position: absolute;
 +
    left:0;
 +
    right:0;
 +
margin:20px auto;
 +
max-width:1000px;
 +
width:90%;
 +
}
 +
 
 +
nav ul {
 +
list-style:none;
 +
}
 +
 
 +
nav > ul {
 +
display:table;
 +
 +
width:100%;
 +
background:#000;
 +
position:relative;
 +
}
 +
 
 +
nav > ul li {
 +
display:table-cell;
 +
}
 +
 
 +
 
 +
nav > ul > li:hover > ul {
 +
display:block;
 +
height:100%;
 +
}
 +
 
 +
nav > ul > li > ul {
 +
display:block;
 +
position:absolute;
 +
background:#000;
 +
left:0;
 +
right:0;
 +
overflow:hidden;
 +
height:0%;
 +
-webkit-transition: all .3s ease;
 +
-moz-transition: all .3s ease;
 +
-ms-transition: all .3s ease;
 +
-o-transition: all .3s ease;
 +
transition: all .3s ease;
 +
}
 +
 
 +
nav > ul li a {
 +
color:#fff;
 +
display:block;
 +
line-height:20px;
 +
padding:20px;
 +
position: relative;
 +
text-align:center;
 +
text-decoration:none;
 +
-webkit-transition: all .3s ease;
 +
-moz-transition: all .3s ease;
 +
-ms-transition: all .3s ease;
 +
-o-transition: all .3s ease;
 +
transition: all .3s ease;
 +
}
 +
 
 +
nav > ul > li > ul > li a:hover {
 +
background:#5da5a2;
 +
}
 +
 
 +
nav > ul > li > a span {
 +
background:#174459;
 +
display:block;
 +
height:100%;
 +
width:100%;
 +
left:0;
 +
position:absolute;
 +
top:-55px;
 +
-webkit-transition: all .3s ease;
 +
-moz-transition: all .3s ease;
 +
-ms-transition: all .3s ease;
 +
-o-transition: all .3s ease;
 +
transition: all .3s ease;
 +
}
 +
 
 +
nav > ul > li > a span .icon {
 +
display:block;
 +
line-height:60px;
 +
}
 +
 
 +
nav > ul > li > a:hover > span {
 +
top:0;
 +
}
 +
 
 +
 
 +
nav ul li a .primero {
 +
background:#0e5061;
 +
}
 +
 
 +
nav ul li a .segundo {
 +
background:#5da5a2;
 +
}
 +
 
 +
nav ul li a .tercero {
 +
background:#f25724;
 +
}
 +
 
 +
nav ul li a .cuarto {
 +
background:#174459;
 +
}
 +
 
 +
nav ul li a .quinto {
 +
background:#37a4d9;
 +
}
 +
{{Team:Pumas_Mexico/CSS}}

Latest revision as of 21:09, 15 October 2016

<style type="text/css">

  1. apDiv2 {

float:right; left: 348px; top: 640px; height:200px; width:300px;


}

@media screen and (max-width:1500px){

IMG{ width:100%; }} @media screen and (max-width:1340px){

IMG{ width:100%; }} @media screen and (max-width:1180px){

IMG{ width:100%; }} @media screen and (max-width:1100px){

IMG{ width:100%; }} @media screen and (max-width:920px){

IMG{ width:100%; }} @media screen and (max-width:920px){

IMG{ width:100%; }} </style>

  • {

margin:0; padding:0; }


header { margin-top:10px; 

   width: 100%;
   overflow: hidden;
   height: 150px;
   position: relative;

}

nav { 

   top:-20px;
   position: absolute;
   left:0;
   right:0;

margin:20px auto; max-width:1000px; width:90%; }

nav ul { list-style:none; }

nav > ul { display:table;

width:100%; background:#000; position:relative; }

nav > ul li { display:table-cell; }


nav > ul > li:hover > ul { display:block; height:100%; }

nav > ul > li > ul { display:block; position:absolute; background:#000; left:0; right:0; overflow:hidden; height:0%; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -ms-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; }

nav > ul li a { color:#fff; display:block; line-height:20px; padding:20px; position: relative; text-align:center; text-decoration:none; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -ms-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; }

nav > ul > li > ul > li a:hover { background:#5da5a2; }

nav > ul > li > a span { background:#174459; display:block; height:100%; width:100%; left:0; position:absolute; top:-55px; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -ms-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; }

nav > ul > li > a span .icon { display:block; line-height:60px; }

nav > ul > li > a:hover > span { top:0; }


nav ul li a .primero { background:#0e5061; }

nav ul li a .segundo { background:#5da5a2; }

nav ul li a .tercero { background:#f25724; }

nav ul li a .cuarto { background:#174459; }

nav ul li a .quinto { background:#37a4d9; }