|
|
Line 7: |
Line 7: |
| | | |
| | | |
− | <title>Team:BGIC-Union/Practices-Design</title> | + | <title>Team:BGIC-Union/Collaborations</title> |
| | | |
| <head> | | <head> |
Line 19: |
Line 19: |
| <link href="https://2017.igem.org/Template:BGIC-Union/owlcarousel-css?action=raw&ctype=text/css" rel="stylesheet"> | | <link href="https://2017.igem.org/Template:BGIC-Union/owlcarousel-css?action=raw&ctype=text/css" rel="stylesheet"> |
| <link href=" https://2017.igem.org/Template:BGIC-Union/fontawesomemin2-css?action=raw&ctype=text/css" rel="stylesheet"> | | <link href=" https://2017.igem.org/Template:BGIC-Union/fontawesomemin2-css?action=raw&ctype=text/css" rel="stylesheet"> |
− | <!-- light -->
| |
− | <style type="text/css">
| |
− | /* fixed line holder */
| |
− | .timelineLight .timeline_line {c
| |
− | margin-top:50px;
| |
− | margin-bottom:10px;
| |
− | width:900px;
| |
− | }
| |
− | .timelineLight
| |
− | {color: #fff;
| |
− | background: #ffe4e1;}
| |
− | /* full (including months that are not shown) line holder */
| |
− | .timelineLight .t_line_holder {
| |
− | height:80px;
| |
− | background:url('https://static.igem.org/mediawiki/2017/3/35/Line.jpg') repeat-x 0px 39px;
| |
− | }
| |
− |
| |
− | /* 2 months are stored in one view */
| |
− | .timelineLight .t_line_view {
| |
− | height:20px;
| |
− | width:900px;
| |
− | }
| |
− |
| |
− | /* holder for year number */
| |
− | .timelineLight h3.t_line_year {
| |
− | margin:0;
| |
− | color:#545454;
| |
− | }
| |
− |
| |
− | /* holder for 1 month (constist of nodes and month caption) - we use borders to separate months thats why it has width 2px less then 50% */
| |
− | .timelineLight .t_line_m {
| |
− | margin-top:35px;
| |
− | height:10px;
| |
− | border-left:1px solid #545454;
| |
− | border-right:1px solid #545454;
| |
− | width:448px;
| |
− | }
| |
− |
| |
− | /* month on the right side - has left set at 459 so border would overlap border from first element (to evade duplicated borders) */
| |
− | .timelineLight .t_line_m.right {
| |
− | left:449px;
| |
− | width:449px;
| |
− | }
| |
− |
| |
− | /* month caption */
| |
− | .timelineLight h4.t_line_month {
| |
− | margin:-30px 0 0;
| |
− | color:#545454;
| |
− | }
| |
− |
| |
− | /* used in responsive layout when only one month is shown (it is span containing year) */
| |
− | .t_line_month_year {
| |
− | display:none;
| |
− | }
| |
− |
| |
− | /* node on the timeline */
| |
− | .timelineLight a.t_line_node {
| |
− | text-decoration:none;
| |
− | padding:38px 0 4px;
| |
− | height:10px;
| |
− | font-size:12px;
| |
− | top:-25px;
| |
− | background:url('https://static.igem.org/mediawiki/2017/2/2a/Dot.png') no-repeat center 24px;
| |
− | color:#141817;
| |
− | }
| |
− | .timelineLight a.t_line_node:hover {
| |
− | background:url('https://static.igem.org/mediawiki/2017/6/65/Dot-rollover.png') no-repeat center 24px;
| |
− | }
| |
− | .timelineLight a.t_line_node.active {
| |
− | background:url('https://static.igem.org/mediawiki/2017/d/d7/Dot-selected.png') no-repeat center 24px;
| |
− | }
| |
− |
| |
− | /* node description */
| |
− | .timelineLight .t_node_desc {
| |
− | background: rgba(26,134,172,0.9);
| |
− | top:0;
| |
− | color:#fff;
| |
− | padding:1px 5px;
| |
− | }
| |
− |
| |
− | /* descriptions on right side go from right to left */
| |
− | .timelineLight .t_node_desc.pos_right {
| |
− | right:0;
| |
− | }
| |
− |
| |
− | /* line arrow left */
| |
− | .timelineLight #t_line_left {
| |
− | cursor:pointer;
| |
− | left:-30px;
| |
− | top:30px;
| |
− | width:14px;
| |
− | height:19px;
| |
− | background:url('https://static.igem.org/mediawiki/2017/9/95/Bgic-arrow.png') no-repeat left top;
| |
− | }
| |
− |
| |
− | .timelineLight #t_line_left:hover {
| |
− | background:url('https://static.igem.org/mediawiki/2017/9/95/Bgic-arrow.png') no-repeat left bottom;
| |
− | }
| |
− |
| |
− | /* line arrow right */
| |
− | .timelineLight #t_line_right {
| |
− | cursor:pointer;
| |
− | right:-30px;
| |
− | top:30px;
| |
− | width:14px;
| |
− | height:19px;
| |
− | background:url('https://static.igem.org/mediawiki/2017/9/95/Bgic-arrow.png') no-repeat right top;
| |
− | }
| |
− |
| |
− | .timelineLight #t_line_right:hover {
| |
− | background:url('https://static.igem.org/mediawiki/2017/9/95/Bgic-arrow.png') no-repeat right bottom;
| |
− | }
| |
− | .timelineLight {
| |
− | display:none;
| |
− | }
| |
− |
| |
− | /* items container */
| |
− | .timelineLight .timeline_items {
| |
− | padding:10px 0;
| |
− | }
| |
− |
| |
− | /* single item (margines set from javascript) */
| |
− | .timelineLight .item {
| |
− | height:380px;
| |
− | text-align:center;
| |
− |
| |
− | color: #fff;
| |
− | background: #f7dae7;
| |
− |
| |
− | -moz-box-shadow: -3px 1px 6px rgba(0,0,0,0.4);
| |
− | -webkit-box-shadow: -3px 1px 6px rgba(0,0,0,0.4);
| |
− | box-shadow: -3px 1px 6px rgba(0,0,0,0.4);
| |
− | width:200px;
| |
− | }
| |
− |
| |
− | /* ----- content - non-plugin elements ----- */
| |
− | .timelineLight .item img {
| |
− | margin-top:0;
| |
− | width:200px;
| |
− | }
| |
− |
| |
− | .timelineLight .item span{
| |
− | display:block;
| |
− | margin:0px 20px 10px;
| |
− | height:150px;
| |
− | }
| |
− | .timelineLight .item .read_more {
| |
− | padding:2px 8px 2px 10px;
| |
− | font-family:Comic Sans MS;
| |
− | font-size:20px;
| |
− | float:right;
| |
− | color:#ffffff;
| |
− | background: rgba(0,0,0,0.35);
| |
− | cursor:pointer;
| |
− | }
| |
− | .timelineLight .item .read_more:hover {
| |
− | background:rgb(26,134,172);
| |
− | }
| |
− | /* ----------------------------------------- */
| |
− |
| |
− | /* item details (margines set from javascript) */
| |
− | .timelineLight .item_open {
| |
− | height:380px;
| |
− | background:url('../images/timeline/light/background.jpg') repeat;
| |
− | position:relative;
| |
− | color:#545454;
| |
− | z-index:2;
| |
− | -moz-box-shadow: 0px 0px 6px rgba(0,0,0,0.4);
| |
− | -webkit-box-shadow: 0px 0px 6px rgba(0,0,0,0.4);
| |
− | box-shadow: 0px 0px 6px rgba(0,0,0,0.4);
| |
− | width:490px;
| |
− |
| |
− | }
| |
− |
| |
− | /* item details content wrapper (used for animation - shuld have same width as .item_open) */
| |
− | .timelineLight .item_open_cwrapper {
| |
− | width:490px;
| |
− | }
| |
− |
| |
− | /* ----- content - non-plugin elements ----- */
| |
− | .timelineLight .timeline_open_content {
| |
− | padding:20px;
| |
− | }
| |
− |
| |
− | .timelineLight .item_open h2 {
| |
− | margin-top:10px;
| |
− | padding-top:0;
| |
− | font-size:28px;
| |
− | }
| |
− | .timelineLight .item_open .t_close {
| |
− | position:absolute;
| |
− | top:10px;
| |
− | right:10px;
| |
− | padding:2px 8px 2px 10px;
| |
− | font-family: Comic Sans MS;
| |
− | font-size:20px;
| |
− | color:#ffffff;
| |
− | background: rgba(0,0,0,0.25);
| |
− | cursor:pointer;
| |
− | }
| |
− | .timelineLight .item_open .t_close:hover {
| |
− | background:rgb(26,134,172);
| |
− | }
| |
− | /* ----------------------------------------- */
| |
− |
| |
− | /* left/right controles */
| |
− | .timelineLight .t_controles {
| |
− | margin:10px auto;
| |
− | text-align:center;
| |
− | }
| |
− | .timelineLight .t_left,
| |
− | .timelineLight .t_right {
| |
− | display:inline-block;
| |
− | height:50px;
| |
− | width:29px;
| |
− | margin:10px;
| |
− | cursor:pointer;
| |
− | }
| |
− | .timelineLight .t_left,
| |
− | .timelineLight .t_left:hover:active {
| |
− | background: url('https://static.igem.org/mediawiki/2017/b/ba/Big-arrow.png') no-repeat left top;
| |
− | }
| |
− | .timelineLight .t_left:hover {
| |
− | background: url('https://static.igem.org/mediawiki/2017/b/ba/Big-arrow.png') no-repeat left bottom;
| |
− | }
| |
− |
| |
− | .timelineLight .t_right,
| |
− | .timelineLight .t_right:hover:active{
| |
− | background: url('https://static.igem.org/mediawiki/2017/b/ba/Big-arrow.png') no-repeat right top;
| |
− | }
| |
− |
| |
− | .timelineLight .t_right:hover {
| |
− | background: url('https://static.igem.org/mediawiki/2017/b/ba/Big-arrow.png') no-repeat right bottom;
| |
− | }
| |
− |
| |
− | /* -----------------------------------------------------------------------*/
| |
− | /* ------------------------------ RESPONSIVE -----------------------------*/
| |
− | /* -----------------------------------------------------------------------*/
| |
− |
| |
− |
| |
− |
| |
− | /* --- 768px --- */
| |
− | @media screen and (max-width:980px) {
| |
− |
| |
− | .timelineLight .timeline_line {
| |
− | width:680px;
| |
− | }
| |
− |
| |
− | .timelineLight .t_line_view {
| |
− | width:680px;
| |
− | }
| |
− |
| |
− | .timelineLight .t_line_m {
| |
− | width: 338px;
| |
− | }
| |
− | .timelineLight .t_line_m.right {
| |
− | left: 339px;
| |
− | width: 339px;
| |
− | }
| |
− | }
| |
− |
| |
− |
| |
− | /* --- 610px --- */
| |
− | @media screen and (max-width:767px) {
| |
− |
| |
− | .timelineLight .timeline_line {
| |
− | width:530px;
| |
− | }
| |
− |
| |
− | .timelineLight .t_line_view {
| |
− | width:1060px;
| |
− | }
| |
− |
| |
− | .timelineLight .t_line_m {
| |
− | width: 528px;
| |
− | }
| |
− | .timelineLight .t_line_m.right {
| |
− | left: 530px;
| |
− | width: 528px;
| |
− | }
| |
− | .timelineLight .t_line_year {
| |
− | opacity:0;
| |
− | filter:alpha(opacity=0)
| |
− | }
| |
− | .timelineLight .t_line_month_year {
| |
− | display:inline;
| |
− | }
| |
− |
| |
− | .timelineLight .t_line_node span {
| |
− |
| |
− | }
| |
− | .timelineLight .t_node_desc {
| |
− | font-size:8px;
| |
− | }
| |
− | .timelineLight .t_node_desc.pos_right {
| |
− | right:auto;
| |
− | left:0;
| |
− | }
| |
− | }
| |
− |
| |
− |
| |
− | /* --- 300px --- */
| |
− | @media screen and (max-width:
| |
− |
| |
− | ) {
| |
− | .timelineLight .timeline_line {
| |
− | width:240px;
| |
− | }
| |
− |
| |
− | .timelineLight .t_line_view {
| |
− | width:480px;
| |
− | }
| |
− |
| |
− | .timelineLight .t_line_m {
| |
− | width: 238px;
| |
− | }
| |
− | .timelineLight .t_line_m.right {
| |
− | left: 240px;
| |
− | width: 238px;
| |
− | }
| |
− |
| |
− | .timelineLight .item_open {
| |
− | width:280px;
| |
− | height:390px;
| |
− | }
| |
− | .timelineLight .item_open_cwrapper {
| |
− | width:280px;
| |
− | }
| |
− | }
| |
− |
| |
− |
| |
− |
| |
− |
| |
− | </style>
| |
| | | |
| <!-- main --> | | <!-- main --> |
Line 762: |
Line 428: |
| <div class= "row center"> | | <div class= "row center"> |
| <div class="col-md-6"> | | <div class="col-md-6"> |
− | <img src= "https://static.igem.org/mediawiki/2017/e/ec/Guojiao.jpeg" height="500px" /> | + | <img src= "https://static.igem.org/mediawiki/2017/e/ec/Guojiao.jpeg" height="400px" /> |
| </div> | | </div> |
| <div class="col-md-6"> | | <div class="col-md-6"> |
| | | |
− | <img src= "https://static.igem.org/mediawiki/2017/3/3a/Suhonghaobgic.jpeg" height="500px" /> | + | <img src= "https://static.igem.org/mediawiki/2017/3/3a/Suhonghaobgic.jpeg" height="400px" /> |
| </div> | | </div> |
| </div> | | </div> |