Difference between revisions of "Team:British Columbia/Practices/Questions"

 
(17 intermediate revisions by the same user not shown)
Line 8: Line 8:
 
   <div class="honeycomb">
 
   <div class="honeycomb">
  
−
     <div class="hexes-1 column"> <a class="hex">
+
     <div class="hexes-1 column">  
 +
 
 +
<a class="hex" href="https://2015.igem.org/Team:British_Columbia/Practices/Report">
 
       <div class="wrapper">
 
       <div class="wrapper">
 
         <div class="hexagon color-1"></div>
 
         <div class="hexagon color-1"></div>
 
       </div>
 
       </div>
−
       <span class="content"> <strong>Hello!</strong> <small>i'm a hexagon</small> </span> </a> <a class="hex">
+
       <span class="content"><strong>How bad is CCD?</strong><small>Click here to read more</small></span> </a>
 +
 
 +
<a class="hex" href="https://2015.igem.org/Team:British_Columbia/Practices/Booth">
 
       <div class="wrapper">
 
       <div class="wrapper">
 
         <div class="hexagon color-1"></div>
 
         <div class="hexagon color-1"></div>
 
       </div>
 
       </div>
−
       <span class="content"> <strong>Hello!</strong> <small>i'm a hexagon</small> </span> </a> <a class="hex">
+
       <span class="content"> <strong>Do people care about CCD?</strong> <small>Click here to read more</small> </span> </a>  
 +
 
 +
<a class="hex">
 
       <div class="wrapper">
 
       <div class="wrapper">
 
         <div class="hexagon color-1"></div>
 
         <div class="hexagon color-1"></div>
 
       </div>
 
       </div>
−
       <span class="content"> <strong>Hello!</strong> <small>i'm a hexagon</small> </span> </a> <a class="hex">
+
       <span class="content"> <strong>How do people feel about bees?</strong> <small>IDK</small> </span> </a>
 
</div>
 
</div>
  
−
     <div class="hexes-2 column"><a class="hex">
+
     <div class="hexes-2 column">
 +
 
 +
<a class="hex" href="https://2015.igem.org/Team:British_Columbia/Practices/Interviews">
 
       <div class="wrapper">
 
       <div class="wrapper">
 
         <div class="hexagon color-1"></div>
 
         <div class="hexagon color-1"></div>
 
       </div>
 
       </div>
−
       <span class="content"> <strong>Hello!</strong> <small>i'm a hexagon</small> </span> </a> <a class="hex">
+
       <span class="content"> <strong>What are people's opnions on pesticides?</strong><small>Click here to read more</small> </span> </a>  
 +
 
 +
<a class="hex">
 
       <div class="wrapper">
 
       <div class="wrapper">
 
         <div class="hexagon color-1"></div>
 
         <div class="hexagon color-1"></div>
 
       </div>
 
       </div>
−
       <span class="content"> <strong>Hello!</strong> <small>i'm a hexagon</small> </span> </a> <a class="hex">
+
      <span class="content"> <strong>Is our product needed by beekepers?</strong> <small>IDK</small> </span> </a>
 +
 
 +
<a class="hex">
 +
      <div class="wrapper">
 +
        <div class="hexagon color-1"></div>
 +
      </div>
 +
      <span class="content"> <strong>Who cares?</strong> <small>i'm a hexagon</small> </span> </a>
 +
</div>
 +
 
 +
<div class="hexes-3 column">
 +
 
 +
<a class="hex">
 +
      <div class="wrapper">
 +
        <div class="hexagon color-1"></div>
 +
      </div>
 +
      <span class="content"> <strong>Negative connotations with GMOS</strong> <small>i'm a hexagon</small> </span> </a>
 +
 
 +
<a class="hex" href="https://2015.igem.org/Team:British_Columbia/Practices/Interviews">
 +
      <div class="wrapper">
 +
        <div class="hexagon color-1"></div>
 +
      </div>
 +
      <span class="content"> <strong>Possibility of spreading the "pro-bee-otic"</strong> <small>Click here to read more</small>  </span> </a>
 +
 
 +
<a class="hex">
 +
      <div class="wrapper">
 +
        <div class="hexagon color-1"></div>
 +
      </div>
 +
      <span class="content"> <strong>How much time and effort will companies give</strong> <small>i'm a hexagon</small> </span> </a>
 +
</div>
 +
 +
<div class="hexes-4 column">
 +
 
 +
<a class="hex">
 +
      <div class="wrapper">
 +
        <div class="hexagon color-1"></div>
 +
      </div>
 +
      <span class="content"> <strong>Hello!</strong> <small>i'm a hexagon</small> </span> </a>
 +
 
 +
<a class="hex">
 +
      <div class="wrapper">
 +
        <div class="hexagon color-1"></div>
 +
      </div>
 +
       <span class="content"> <strong>Hello!</strong> <small>i'm a hexagon</small> </span> </a>  
 +
 
 +
<a class="hex">
 
       <div class="wrapper">
 
       <div class="wrapper">
 
         <div class="hexagon color-1"></div>
 
         <div class="hexagon color-1"></div>
 
       </div>
 
       </div>
−
       <span class="content"> <strong>Hello!</strong> <small>i'm a hexagon</small> </span> </a> <a class="hex">
+
       <span class="content"> <strong>Hello!</strong> <small>i'm a hexagon</small> </span> </a>
 
</div>
 
</div>
 
    
 
    
Line 45: Line 99:
 
   -webkit-transition: all 0.3s ease-out;
 
   -webkit-transition: all 0.3s ease-out;
 
   transition: all 0.3s ease-out;
 
   transition: all 0.3s ease-out;
−
   height: 700px;
+
   height: 650px;
 
   -webkit-perspective: 700px;
 
   -webkit-perspective: 700px;
 
   perspective: 700px;
 
   perspective: 700px;
 
   z-index: 10;
 
   z-index: 10;
 
   overflow: hidden;
 
   overflow: hidden;
−
margin-top:300px;
+
width:600px;
 +
margin:0 auto;
 +
padding-left:50px;
 
}
 
}
  
Line 57: Line 113:
 
   position: absolute;
 
   position: absolute;
 
   margin:0 auto;
 
   margin:0 auto;
−
  padding-left: 40px;
 
−
  left: 50%;
 
 
   text-align: center;
 
   text-align: center;
 
   height: 450px;
 
   height: 450px;
−
   width: 400px;
+
   width: 600px;
 
   -ms-transform: rotateX(45deg) rotateY(0deg);
 
   -ms-transform: rotateX(45deg) rotateY(0deg);
 
   -webkit-transform: rotateX(45deg) rotateY(0deg);
 
   -webkit-transform: rotateX(45deg) rotateY(0deg);
Line 71: Line 125:
 
   transform-origin: center 65%;
 
   transform-origin: center 65%;
 
   z-index: 5;
 
   z-index: 5;
 +
margin-top:100px;
 
}
 
}
  
Line 76: Line 131:
 
   display: block;
 
   display: block;
 
   float: left;
 
   float: left;
−
   width: 62px;
+
   width: 124px;
 +
margin-right:10px;
 
}
 
}
  
−
.hexcontainer .honeycomb .column:nth-child(odd) { margin-top: -200px; }
+
.hexcontainer .honeycomb .column:nth-child(odd) { margin-top: -80px; }
  
 
.hexcontainer .honeycomb .hex {
 
.hexcontainer .honeycomb .hex {
Line 86: Line 142:
 
   float: left;
 
   float: left;
 
   margin: 0;
 
   margin: 0;
−
   height: 72px;
+
   height: 144px;
−
   width: 62px;
+
   width: 124px;
 
   color: #fff;
 
   color: #fff;
 
   cursor: pointer;
 
   cursor: pointer;
Line 114: Line 170:
 
   -webkit-transform: rotateX(-90deg) translateZ(-40px) translateY(-50px);
 
   -webkit-transform: rotateX(-90deg) translateZ(-40px) translateY(-50px);
 
   transform: rotateX(-90deg) translateZ(-40px) translateY(-50px);
 
   transform: rotateX(-90deg) translateZ(-40px) translateY(-50px);
 +
left:-40%;
 
}
 
}
  
Line 135: Line 192:
 
   position: absolute;
 
   position: absolute;
 
   top: 0;
 
   top: 0;
−
  left: -80px;
 
 
   text-align: center;
 
   text-align: center;
 
   width: 200px;
 
   width: 200px;
Line 151: Line 207:
 
   pointer-events: none;
 
   pointer-events: none;
 
   -webkit-font-smoothing: antialiased;
 
   -webkit-font-smoothing: antialiased;
−
}
 
−
 
−
.hexcontainer .honeycomb .hex .content strong {
 
−
  display: block;
 
−
  font: 600 26px/1.1 verdana, sans-serif;
 
−
  overflow: hidden;
 
−
  text-overflow: ellipsis;
 
−
  white-space: nowrap;
 
−
  text-shadow: -1px -1px 2px rgba(0, 0, 0, 0.8);
 
 
}
 
}
  
Line 171: Line 218:
 
   display: block;
 
   display: block;
 
   position: absolute;
 
   position: absolute;
−
   width: 36px;
+
   width: 92px;
−
   height: 62px;
+
   height: 124px;
 
   background-color: #ffffff;
 
   background-color: #ffffff;
 
}
 
}
Line 181: Line 228:
 
   position: relative;
 
   position: relative;
 
   float: left;
 
   float: left;
−
   border-top: 31px solid transparent;
+
   border-top: 62px solid transparent;
−
   border-bottom: 31px solid transparent;
+
   border-bottom: 62px solid transparent;
 
}
 
}
  
 
.hexagon:before {
 
.hexagon:before {
−
   border-right: 18px solid #ffffff;
+
   border-right: 36px solid #ffffff;
−
   left: -18px;
+
   left: -36px;
 
}
 
}
  
 
.hexagon:after {
 
.hexagon:after {
−
   border-left: 18px solid #ffffff;
+
   border-left: 36px solid #ffffff;
−
   right: -18px;
+
   right: -55px;
 
}
 
}
  

Latest revision as of 06:14, 4 September 2015

UBC iGEM 2015

How bad is CCD?Click here to read more
Do people care about CCD? Click here to read more
How do people feel about bees? IDK
What are people's opnions on pesticides?Click here to read more
Is our product needed by beekepers? IDK
Who cares? i'm a hexagon
Negative connotations with GMOS i'm a hexagon
Possibility of spreading the "pro-bee-otic" Click here to read more
How much time and effort will companies give i'm a hexagon
Hello! i'm a hexagon
Hello! i'm a hexagon
Hello! i'm a hexagon