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

 
(22 intermediate revisions by the same user not shown)
Line 4: Line 4:
 
<div class="bod">
 
<div class="bod">
 
<div style="clear: both;"></div>
 
<div style="clear: both;"></div>
−
<div id="UBCbody">
+
<span style="background-color:white;width:800px;margin:0 auto; border-radius:20px;">
−
<div class="container">
+
<div class="hexcontainer">
 
   <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="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>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="hexagon color-1"></div>
 +
      </div>
 +
      <span class="content"> <strong>Hello!</strong> <small>i'm a hexagon</small> </span> </a>
 
</div>
 
</div>
 
    
 
    
Line 41: Line 95:
 
</div>
 
</div>
 
<style>
 
<style>
−
.container {
+
.hexcontainer {
 
   position: relative;
 
   position: relative;
 
   -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: 400px;
+
   height: 650px;
 
   -webkit-perspective: 700px;
 
   -webkit-perspective: 700px;
 
   perspective: 700px;
 
   perspective: 700px;
 
   z-index: 10;
 
   z-index: 10;
 
   overflow: hidden;
 
   overflow: hidden;
 +
width:600px;
 +
margin:0 auto;
 +
padding-left:50px;
 
}
 
}
  
−
.container .honeycomb {
+
.hexcontainer .honeycomb {
 
   display: block;
 
   display: block;
 
   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 70: Line 125:
 
   transform-origin: center 65%;
 
   transform-origin: center 65%;
 
   z-index: 5;
 
   z-index: 5;
 +
margin-top:100px;
 
}
 
}
  
−
.container .honeycomb .column {
+
.hexcontainer .honeycomb .column {
 
   display: block;
 
   display: block;
 
   float: left;
 
   float: left;
−
   width: 62px;
+
   width: 124px;
 +
margin-right:10px;
 
}
 
}
  
−
.container .honeycomb .column:nth-child(odd) { margin-top: 36px; }
+
.hexcontainer .honeycomb .column:nth-child(odd) { margin-top: -80px; }
  
−
.container .honeycomb .hex {
+
.hexcontainer .honeycomb .hex {
 
   display: block;
 
   display: block;
 
   position: relative;
 
   position: relative;
 
   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 98: Line 155:
 
}
 
}
  
−
.container .honeycomb .hex:hover {
+
.hexcontainer .honeycomb .hex:hover {
 
   opacity: 1;
 
   opacity: 1;
 
   -ms-transform: translateZ(20px);
 
   -ms-transform: translateZ(20px);
Line 107: Line 164:
 
}
 
}
  
−
.container .honeycomb .hex:hover .content {
+
.hexcontainer .honeycomb .hex:hover .content {
 
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
 
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
 
   opacity: 1;
 
   opacity: 1;
Line 113: 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%;
 
}
 
}
  
−
.container .honeycomb .hex .wrapper {
+
.hexcontainer .honeycomb .hex .wrapper {
 
   display: block;
 
   display: block;
 
   position: absolute;
 
   position: absolute;
Line 124: Line 182:
 
}
 
}
  
−
.container .honeycomb .hex .wrapper .color-1 { background: #ffbc06; }
+
.hexcontainer .honeycomb .hex .wrapper .color-1 { background: #ffbc06; }
  
−
.container .honeycomb .hex .wrapper .color-1:before { border-right-color: #ffbc06; }
+
.hexcontainer .honeycomb .hex .wrapper .color-1:before { border-right-color: #ffbc06; }
  
−
.container .honeycomb .hex .wrapper .color-1:after { border-left-color: #ffbc06; }
+
.hexcontainer .honeycomb .hex .wrapper .color-1:after { border-left-color: #ffbc06; }
  
−
.container .honeycomb .hex .content {
+
.hexcontainer .honeycomb .hex .content {
 
   display: block;
 
   display: block;
 
   position: absolute;
 
   position: absolute;
 
   top: 0;
 
   top: 0;
−
  left: -80px;
 
 
   text-align: center;
 
   text-align: center;
 
   width: 200px;
 
   width: 200px;
Line 152: Line 209:
 
}
 
}
  
−
.container .honeycomb .hex .content strong {
+
.hexcontainer .honeycomb .hex .content small {
−
  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);
+
−
}
+
−
 
+
−
.container .honeycomb .hex .content small {
+
 
   display: block;
 
   display: block;
 
   font: 15px/1.1 verdana, sans-serif;
 
   font: 15px/1.1 verdana, sans-serif;
Line 170: 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 180: 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;
 
}
 
}
  
Line 198: Line 246:
  
 
</div>
 
</div>
−
</div>
+
</span>
 
</body>
 
</body>
 
</html>
 
</html>
  
 
{{:Team:British Columbia/Template/Fixedfooter}}
 
{{:Team:British Columbia/Template/Fixedfooter}}

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