Difference between revisions of "Team:British Columbia/Practices/Questions"
(32 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
{{:Team:British Columbia/Template/Fixednavbar}} | {{:Team:British Columbia/Template/Fixednavbar}} | ||
− | |||
− | |||
− | |||
− | |||
<html> | <html> | ||
<body id="UBC"> | <body id="UBC"> | ||
<div class="bod"> | <div class="bod"> | ||
<div style="clear: both;"></div> | <div style="clear: both;"></div> | ||
− | < | + | <span style="background-color:white;width:800px;margin:0 auto; border-radius:20px;"> |
− | <div class=" | + | <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> | + | <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> | + | <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> | + | <span class="content"> <strong>How do people feel about bees?</strong> <small>IDK</small> </span> </a> |
+ | </div> | ||
+ | |||
+ | <div class="hexes-2 column"> | ||
+ | |||
+ | <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>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> | + | <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> | ||
+ | |||
+ | <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="wrapper"> | ||
<div class="hexagon color-1"></div> | <div class="hexagon color-1"></div> | ||
</div> | </div> | ||
− | <span class="content"> <strong> | + | <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="wrapper"> | ||
<div class="hexagon color-1"></div> | <div class="hexagon color-1"></div> | ||
</div> | </div> | ||
− | <span class="content"> <strong> | + | <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="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 | + | <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> | </div> | ||
</div> | </div> | ||
<style> | <style> | ||
− | . | + | .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: | + | 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; | ||
} | } | ||
− | . | + | .hexcontainer .honeycomb { |
display: block; | display: block; | ||
position: absolute; | position: absolute; | ||
− | margin | + | margin:0 auto; |
− | + | ||
− | + | ||
text-align: center; | text-align: center; | ||
height: 450px; | height: 450px; | ||
− | width: | + | 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 79: | Line 125: | ||
transform-origin: center 65%; | transform-origin: center 65%; | ||
z-index: 5; | z-index: 5; | ||
+ | margin-top:100px; | ||
} | } | ||
− | . | + | .hexcontainer .honeycomb .column { |
display: block; | display: block; | ||
float: left; | float: left; | ||
− | width: | + | width: 124px; |
+ | margin-right:10px; | ||
} | } | ||
− | . | + | .hexcontainer .honeycomb .column:nth-child(odd) { margin-top: -80px; } |
− | . | + | .hexcontainer .honeycomb .hex { |
display: block; | display: block; | ||
position: relative; | position: relative; | ||
float: left; | float: left; | ||
margin: 0; | margin: 0; | ||
− | height: | + | height: 144px; |
− | width: | + | width: 124px; |
color: #fff; | color: #fff; | ||
cursor: pointer; | cursor: pointer; | ||
Line 107: | Line 155: | ||
} | } | ||
− | . | + | .hexcontainer .honeycomb .hex:hover { |
opacity: 1; | opacity: 1; | ||
-ms-transform: translateZ(20px); | -ms-transform: translateZ(20px); | ||
Line 116: | Line 164: | ||
} | } | ||
− | . | + | .hexcontainer .honeycomb .hex:hover .content { |
filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false); | filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false); | ||
opacity: 1; | opacity: 1; | ||
Line 122: | 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%; | ||
} | } | ||
− | . | + | .hexcontainer .honeycomb .hex .wrapper { |
display: block; | display: block; | ||
position: absolute; | position: absolute; | ||
Line 133: | Line 182: | ||
} | } | ||
− | . | + | .hexcontainer .honeycomb .hex .wrapper .color-1 { background: #ffbc06; } |
− | . | + | .hexcontainer .honeycomb .hex .wrapper .color-1:before { border-right-color: #ffbc06; } |
− | . | + | .hexcontainer .honeycomb .hex .wrapper .color-1:after { border-left-color: #ffbc06; } |
− | . | + | .hexcontainer .honeycomb .hex .content { |
display: block; | display: block; | ||
position: absolute; | position: absolute; | ||
top: 0; | top: 0; | ||
− | |||
text-align: center; | text-align: center; | ||
width: 200px; | width: 200px; | ||
Line 161: | Line 209: | ||
} | } | ||
− | . | + | .hexcontainer .honeycomb .hex .content small { |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
display: block; | display: block; | ||
font: 15px/1.1 verdana, sans-serif; | font: 15px/1.1 verdana, sans-serif; | ||
Line 179: | Line 218: | ||
display: block; | display: block; | ||
position: absolute; | position: absolute; | ||
− | width: | + | width: 92px; |
− | height: | + | height: 124px; |
background-color: #ffffff; | background-color: #ffffff; | ||
} | } | ||
Line 189: | Line 228: | ||
position: relative; | position: relative; | ||
float: left; | float: left; | ||
− | border-top: | + | border-top: 62px solid transparent; |
− | border-bottom: | + | border-bottom: 62px solid transparent; |
} | } | ||
.hexagon:before { | .hexagon:before { | ||
− | border-right: | + | border-right: 36px solid #ffffff; |
− | left: - | + | left: -36px; |
} | } | ||
.hexagon:after { | .hexagon:after { | ||
− | border-left: | + | border-left: 36px solid #ffffff; |
− | right: - | + | right: -55px; |
} | } | ||
Line 207: | Line 246: | ||
</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