| (5 intermediate revisions by 2 users not shown) | |||
| Line 28: | Line 28: | ||
<style id="fontSet"> | <style id="fontSet"> | ||
| + | |||
| + | /*@font-face {*/ | ||
| + | /* font-family: "GalanoGrotesqueAltDEMO-Bold";*/ | ||
| + | /* src: url('../../wiki/images/e/ef/T--SZU-CHINA--attribution_font.otf') format("opentype");*/ | ||
| + | /*}*/ | ||
| + | /*@font-face {*/ | ||
| + | /* font-family: "LatoBold";*/ | ||
| + | /* src: url('../../wiki/images/5/54/T--SZU-CHINA--Lato-Bold.ttf') format("truetype");*/ | ||
| + | |||
| + | /*}*/ | ||
| + | |||
| + | /*@font-face {*/ | ||
| + | /* font-family: "LatoMe";*/ | ||
| + | /* src: url('../../wiki/images/5/5a/T--SZU-CHINA--Lato-medium.ttf') format("truetype");*/ | ||
| + | |||
| + | /*}*/ | ||
| + | |||
@font-face { | @font-face { | ||
font-family: "GalanoGrotesqueAltDEMO-Bold"; | font-family: "GalanoGrotesqueAltDEMO-Bold"; | ||
| − | src: url(' | + | src: url('./fonts/Galano Grotesque Alt DEMO Bold.otf') format("opentype"); |
} | } | ||
@font-face { | @font-face { | ||
font-family: "LatoBold"; | font-family: "LatoBold"; | ||
| − | src: url(' | + | src: url('./fonts/Lato-Bold.ttf') format("truetype"); |
} | } | ||
| Line 41: | Line 58: | ||
@font-face { | @font-face { | ||
font-family: "LatoMe"; | font-family: "LatoMe"; | ||
| − | src: url(' | + | src: url('./fonts/Lato-Medium.ttf') format("truetype"); |
} | } | ||
| + | |||
| + | |||
| + | |||
</style> | </style> | ||
| − | <style> | + | <style id="littleMeunuCss"> |
.littleMenu{ | .littleMenu{ | ||
left: 5%; | left: 5%; | ||
| Line 101: | Line 121: | ||
.littleMenu .btn:hover .fa { | .littleMenu .btn:hover .fa { | ||
color: rgba(255, 255, 255, 0.7); | color: rgba(255, 255, 255, 0.7); | ||
| + | } | ||
| + | .littleMenu .btn .fa a{ | ||
| + | display: block; | ||
| + | text-decoration: none; | ||
} | } | ||
.littleMenu .btn.trigger { | .littleMenu .btn.trigger { | ||
| Line 282: | Line 306: | ||
} | } | ||
.modal-title{ | .modal-title{ | ||
| − | font-size: | + | font-size: 35px; |
| − | line-height: | + | line-height: 35px; |
font-family:GalanoGrotesqueAltDEMO-Bold ; | font-family:GalanoGrotesqueAltDEMO-Bold ; | ||
| − | color: # | + | color: #0b8544; |
} | } | ||
| Line 297: | Line 321: | ||
.modal-body p{ | .modal-body p{ | ||
font-size: 18px; | font-size: 18px; | ||
| − | line-height: | + | line-height: 25px; |
font-family:LatoMe ; | font-family:LatoMe ; | ||
margin-bottom: 20px; | margin-bottom: 20px; | ||
| Line 311: | Line 335: | ||
color: #333333; | color: #333333; | ||
text-align: justify; | text-align: justify; | ||
| + | } | ||
| + | .CilckMore{ | ||
| + | color: #333333; | ||
| + | font-family: GalanoGrotesqueAltDEMO-Bold; | ||
| + | font-size: 38px; | ||
| + | line-height: 120%; | ||
| + | text-align: center; | ||
| + | display: block; | ||
| + | margin: 0 auto; | ||
| + | padding-top: 30px; | ||
} | } | ||
</style> | </style> | ||
| Line 896: | Line 930: | ||
} | } | ||
| + | |||
| + | |||
| + | .cardbody{ | ||
| + | width: 80%; | ||
| + | margin: 0 auto 0 auto; | ||
| + | margin-top: 100px; | ||
| + | text-align: center; | ||
| + | padding-bottom: 30px; | ||
| + | } | ||
| + | .cardtext{ | ||
| + | width: 80%; | ||
| + | text-align: center; | ||
| + | font-family: "LatoBold",Helvetica; | ||
| + | font-size: 16px; | ||
| + | color: rgba(55, 55, 55, 1.0); | ||
| + | margin: 0 auto; | ||
| + | position: relative; | ||
| + | display: block; | ||
| + | margin-top: 20px; | ||
| + | margin-bottom: 60px; | ||
| + | } | ||
| + | .cardheadline{ | ||
| + | text-align: center; | ||
| + | font-family: "GalanoGrotesqueAltDEMO-Bold", Helvetica, Arial, serif; | ||
| + | font-size: 30px; | ||
| + | color: #11843F; | ||
| + | margin-top: 20px; | ||
| + | line-height: 150%; | ||
| + | } | ||
| + | .longbuttonh1{ | ||
| + | text-align: left; | ||
| + | font-family: "GalanoGrotesqueAltDEMO-Bold", Helvetica, Arial, serif; | ||
| + | font-size: 30px; | ||
| + | color: white; | ||
| + | margin-top: 10px; | ||
| + | margin-left: 20px; | ||
| + | } | ||
| + | .longbuttonh2{ | ||
| + | text-align: left; | ||
| + | font-family: "GalanoGrotesqueAltDEMO-Bold", Helvetica, Arial, serif; | ||
| + | |||
| + | color: white; | ||
| + | |||
| + | margin-left: 20px; | ||
| + | } | ||
| + | .cardimg{ | ||
| + | width: 40%; | ||
| + | height: auto; | ||
| + | margin: 0 auto; | ||
| + | margin-top: 30px; | ||
| + | position: relative; | ||
| + | display: block; | ||
| + | } | ||
| + | /*.card img { | ||
| + | width: 45%; | ||
| + | height: auto; | ||
| + | margin: 0 auto 0 auto; | ||
| + | }*/ | ||
| + | .card{ | ||
| + | /*height: 300px;*/ | ||
| + | /*width: 260px;*/ | ||
| + | height: 350px; | ||
| + | width: 20%; | ||
| + | background-color: white; | ||
| + | box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19); | ||
| + | border-radius: 4px; | ||
| + | display: inline-block; | ||
| + | margin-left: 18px; | ||
| + | vertical-align: top; | ||
| + | line-height: 24px; | ||
| + | } | ||
| + | .card:hover{ | ||
| + | box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19); | ||
| + | |||
| + | |||
| + | } | ||
| + | |||
| + | |||
| + | |||
</style> | </style> | ||
| Line 910: | Line 1,023: | ||
</div> | </div> | ||
</div> | </div> | ||
| − | <h2 class="bigtitle">Integrated | + | <h2 class="bigtitle" style="font-size: 120px;text-align: center;">Integrated <br>Human Practices</h2> |
</div> | </div> | ||
| Line 917: | Line 1,030: | ||
<div id="mainbody"> | <div id="mainbody"> | ||
| − | + | <!-- <img class="leftsideimg2" src="https://2019.igem.org/wiki/images/c/c0/T--SZU-CHINA--img-02.png" style="top: 1200px;">--> | |
<img class="leftsideimg2" src="https://2019.igem.org/wiki/images/c/c0/T--SZU-CHINA--img-02.png" style="top: 2700px;"> | <img class="leftsideimg2" src="https://2019.igem.org/wiki/images/c/c0/T--SZU-CHINA--img-02.png" style="top: 2700px;"> | ||
| Line 929: | Line 1,042: | ||
| + | <div style="height: 300px"></div> | ||
| + | |||
| + | <div class="cardbody"> | ||
| + | <div class="card"> | ||
| + | <img class="cardimg" src="https://2019.igem.org/wiki/images/a/a3/T--SZU-CHINA--hplogo2.png" alt=""/> | ||
| + | <div> | ||
| + | <h3 class="cardheadline">Background research</h3> | ||
| + | <!-- <span class="cardtext">Come and see how we made possible the manufacturing of Micrancide as well as the Application</span>--> | ||
| + | </div> | ||
| + | |||
| + | </div> | ||
| + | <div class="card"> | ||
| + | <img class="cardimg" src="https://2019.igem.org/wiki/images/5/53/T--SZU-CHINA--gplog3.png" alt=""/> | ||
| + | |||
| + | <div> | ||
| + | <h3 class="cardheadline" style="margin-top: 50px;">Community</h3> | ||
| + | <!-- <span class="cardtext">Here is the siRNA sifting program for other researchers to select RNAi molecules for their specific purpose.</span>--> | ||
| + | </div> | ||
| + | |||
| + | </div> | ||
| + | <div class="card"> | ||
| + | <img class="cardimg" src="https://2019.igem.org/wiki/images/d/db/T--SZU-CHINA--holgo4.png" alt=""/> | ||
| + | |||
| + | <div> | ||
| + | <h3 class="cardheadline" style="margin-top: 50px;">Expert</h3> | ||
| + | <!-- <span class="cardtext">Find out how we decided to use the third generation as the final RNAi-based herbicide</span>--> | ||
| + | </div> | ||
| + | |||
| + | </div> | ||
| + | <div class="card"> | ||
| + | <img class="cardimg" src="https://2019.igem.org/wiki/images/b/b8/T--SZU-CHINA--hplog5.png" alt=""/> | ||
| + | |||
| + | <h3 class="cardheadline">Companies & partner</h3> | ||
| + | <!-- <span class="cardtext">Do you want to see how fast M. micrantha grows without control and how efficient Micrancide is?</span>--> | ||
| + | </div> | ||
| + | |||
| + | </div> | ||
| + | </div> | ||
| + | |||
| + | |||
| + | <div style="height: 300px"></div> | ||
| + | |||
| + | |||
| + | |||
| + | <h1 class="CilckMore">Click on the different sections of the image to learn more</h1> | ||
<div class="littleMenu"> | <div class="littleMenu"> | ||
| Line 968: | Line 1,126: | ||
</div> | </div> | ||
</div> | </div> | ||
| − | + | <!--<div style="width: 100%; margin: 0 auto">--> | |
| − | + | <img id="mapImg" src="https://2019.igem.org/wiki/images/0/06/T--SZU-CHINA--hp222.jpg" alt="" hidefocus="true" usemap="#testArea" style="margin: 0 auto; display: block; max-width: 1200px; width: 80%;height: auto; border: 10px #48D289;" border="1" /> | |
| − | + | <map name="testArea" id="testArea"> | |
| − | + | <area alt="" title="" data-target="#myModal1" data-toggle="modal" shape="rect" style="outline:none;" target="_self" onfocus="blur(this)" /> | |
| − | + | <area alt="" title="" data-target="#myModal2" data-toggle="modal" shape="rect" style="outline:none;" target="_self" /> | |
| − | + | <area alt="" title="" data-target="#myModal3" data-toggle="modal" shape="rect" style="outline:none;" target="_self" /> | |
| − | + | <area alt="" title="" data-target="#myModal4" data-toggle="modal" shape="rect" style="outline:none;" target="_self" /> | |
| − | + | <area alt="" title="" data-target="#myModal5" data-toggle="modal" shape="rect" style="outline:none;" target="_self" /> | |
| − | + | <area alt="" title="" data-target="#myModal6" data-toggle="modal" shape="rect" style="outline:none;" target="_self" /> | |
| − | + | <area alt="" title="" data-target="#myModalFirst" data-toggle="modal" shape="rect" style="outline:none;" target="_self" /> | |
| − | + | <area alt="" title="" data-target="#myModal7" data-toggle="modal" shape="rect" style="outline:none;" target="_self" /> | |
| − | + | <area alt="" title="" data-target="#myModal8" data-toggle="modal" shape="rect" style="outline:none;" target="_self" /> | |
| − | + | <area alt="" title="" data-target="#myModal9" data-toggle="modal" shape="rect" style="outline:none;" target="_self" /> | |
| − | + | <area alt="" title="" data-target="#myModal10" data-toggle="modal" shape="rect" style="outline:none;" target="_self" /> | |
| − | + | <area alt="" title="" data-target="#myModal11" data-toggle="modal" shape="rect" style="outline:none;" target="_self" /> | |
| − | + | <area alt="" title="" data-target="#myModal12" data-toggle="modal" shape="rect" style="outline:none;" target="_self" /> | |
| − | + | <area alt="" title="" data-target="#myModal13" data-toggle="modal" shape="rect" style="outline:none;" target="_self" /> | |
| − | + | <area alt="" title="" data-target="#myModal14" data-toggle="modal" shape="rect" style="outline:none;" target="_self" /> | |
| − | + | <area alt="" title="" data-target="#myModalSecond" data-toggle="modal" shape="rect" style="outline:none;" target="_self" /> | |
| − | + | <area alt="" title="" data-target="#myModal15" data-toggle="modal" shape="rect" style="outline:none;" target="_self" /> | |
| − | + | <area alt="" title="" data-target="#myModal16" data-toggle="modal" shape="rect" style="outline:none;" target="_self" /> | |
| − | + | <area alt="" title="" data-target="#myModal17" data-toggle="modal" shape="rect" style="outline:none;" target="_self" /> | |
| − | + | <area alt="" title="" data-target="#myModal18" data-toggle="modal" shape="rect" style="outline:none;" target="_self" /> | |
| − | + | <area alt="" title="" data-target="#myModal19" data-toggle="modal" shape="rect" style="outline:none;" target="_self" /> | |
| − | + | <area alt="" title="" data-target="#myModal20" data-toggle="modal" shape="rect" style="outline:none;" target="_self" /> | |
| − | + | <area alt="" title="" data-target="#myModal21" data-toggle="modal" shape="rect" style="outline:none;" target="_self" /> | |
| − | + | </map> | |
| − | + | </div> | |
| − | + | </div> | |
<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> | <div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> | ||
| Line 1,017: | Line 1,175: | ||
</div> | </div> | ||
<div class="modal-body"> | <div class="modal-body"> | ||
| − | + | ||
<div > | <div > | ||
<h3>Description:</h3> | <h3>Description:</h3> | ||
| Line 1,053: | Line 1,211: | ||
</div> | </div> | ||
<div class="modal-body"> | <div class="modal-body"> | ||
| − | + | ||
<div > | <div > | ||
<h3>Description:</h3> | <h3>Description:</h3> | ||
| Line 1,091: | Line 1,249: | ||
</div> | </div> | ||
<div class="modal-body"> | <div class="modal-body"> | ||
| − | + | ||
<div > | <div > | ||
<h3>Description:</h3> | <h3>Description:</h3> | ||
| Line 1,128: | Line 1,286: | ||
</div> | </div> | ||
<div class="modal-body"> | <div class="modal-body"> | ||
| − | + | ||
<div > | <div > | ||
<h3>Description:</h3> | <h3>Description:</h3> | ||
| Line 1,170: | Line 1,328: | ||
</div> | </div> | ||
<div class="modal-body"> | <div class="modal-body"> | ||
| − | + | ||
<div > | <div > | ||
<h3>Description:</h3> | <h3>Description:</h3> | ||
| Line 1,213: | Line 1,371: | ||
</div> | </div> | ||
<div class="modal-body"> | <div class="modal-body"> | ||
| − | + | ||
<div > | <div > | ||
<h3>Description:</h3> | <h3>Description:</h3> | ||
| Line 1,226: | Line 1,384: | ||
<p>Obtained some information of chemical herbicide to facilitate comparison experiments | <p>Obtained some information of chemical herbicide to facilitate comparison experiments | ||
We decided to add detergent to our product</p> | We decided to add detergent to our product</p> | ||
| − | |||
| − | |||
| − | |||
| − | |||
</div> | </div> | ||
| Line 1,290: | Line 1,444: | ||
</div> | </div> | ||
<div class="modal-body"> | <div class="modal-body"> | ||
| − | + | ||
<div > | <div > | ||
<h3>Description:</h3> | <h3>Description:</h3> | ||
| Line 1,337: | Line 1,491: | ||
</div> | </div> | ||
<div class="modal-body"> | <div class="modal-body"> | ||
| − | + | ||
<div > | <div > | ||
<h3>Description:</h3> | <h3>Description:</h3> | ||
| Line 1,375: | Line 1,529: | ||
</div> | </div> | ||
<div class="modal-body"> | <div class="modal-body"> | ||
| − | + | ||
<div > | <div > | ||
<h3>Description:</h3> | <h3>Description:</h3> | ||
| Line 1,411: | Line 1,565: | ||
</div> | </div> | ||
<div class="modal-body"> | <div class="modal-body"> | ||
| − | + | ||
<div > | <div > | ||
<h3>Description:</h3> | <h3>Description:</h3> | ||
| Line 1,446: | Line 1,600: | ||
</div> | </div> | ||
<div class="modal-body"> | <div class="modal-body"> | ||
| − | + | ||
<div > | <div > | ||
<h3>Description:</h3> | <h3>Description:</h3> | ||
| Line 1,487: | Line 1,641: | ||
</div> | </div> | ||
<div class="modal-body"> | <div class="modal-body"> | ||
| − | + | ||
<div > | <div > | ||
<h3>Description:</h3> | <h3>Description:</h3> | ||
| Line 1,525: | Line 1,679: | ||
</div> | </div> | ||
<div class="modal-body"> | <div class="modal-body"> | ||
| − | + | ||
<div > | <div > | ||
<h3>Description:</h3> | <h3>Description:</h3> | ||
| Line 1,643: | Line 1,797: | ||
</div> | </div> | ||
<div class="modal-body"> | <div class="modal-body"> | ||
| − | + | ||
<div > | <div > | ||
<h3>Description:</h3> | <h3>Description:</h3> | ||
| Line 1,678: | Line 1,832: | ||
</div> | </div> | ||
<div class="modal-body"> | <div class="modal-body"> | ||
| − | + | ||
<div > | <div > | ||
<h3>Description:</h3> | <h3>Description:</h3> | ||
| Line 1,721: | Line 1,875: | ||
</div> | </div> | ||
<div class="modal-body"> | <div class="modal-body"> | ||
| − | + | ||
<div > | <div > | ||
<h3>Description:</h3> | <h3>Description:</h3> | ||
| Line 1,763: | Line 1,917: | ||
</div> | </div> | ||
<div class="modal-body"> | <div class="modal-body"> | ||
| − | + | ||
<div > | <div > | ||
<h3>Description:</h3> | <h3>Description:</h3> | ||
| Line 1,807: | Line 1,961: | ||
</div> | </div> | ||
<div class="modal-body"> | <div class="modal-body"> | ||
| − | + | ||
<div > | <div > | ||
<h3>Description:</h3> | <h3>Description:</h3> | ||
| Line 1,849: | Line 2,003: | ||
</div> | </div> | ||
<div class="modal-body"> | <div class="modal-body"> | ||
| − | + | ||
<div > | <div > | ||
<h3>Description:</h3> | <h3>Description:</h3> | ||
| Line 1,886: | Line 2,040: | ||
</div> | </div> | ||
<div class="modal-body"> | <div class="modal-body"> | ||
| − | + | ||
<div > | <div > | ||
<h3>Description:</h3> | <h3>Description:</h3> | ||
| Line 2,104: | Line 2,258: | ||
}); | }); | ||
</script> | </script> | ||
| − | + | <script id="mapPage"> | |
| − | + | $( document ).ready( function() { | |
| − | + | //position on 1166px | |
| − | + | var defaultMaps = [ | |
| − | + | [661,248,1026,353], | |
| − | + | [257,356,484,443], | |
| − | + | [653,460,898,558], | |
| − | + | [256,559,488,668], | |
| − | + | [666,712,980,793], | |
| − | + | [86,811,491,926], | |
| − | + | [177,953,998,1327], | |
| − | + | [664,1345,978,1465], | |
| − | + | [204,1458,490,1552], | |
| − | + | [658,1549,924,1656], | |
| − | + | [123,1652,488,1754], | |
| − | + | [660,1750,978,1863], | |
| − | + | [116,1860,489,1959], | |
| − | + | [657,1937,1096,2046], | |
| − | + | [154,2090,489,2192], | |
| − | + | [197,2234,965,2583], | |
| − | + | [647,2622,924,2724], | |
| − | + | [168,2756,478,2860], | |
| − | + | [640,2855,932,2967], | |
| − | + | [240,3021,477,3112], | |
| − | + | [641,3175,869,3276], | |
| − | + | [157,3295,476,3393], | |
| − | + | [638,3410,1090,3524], | |
| − | + | // 163,3299,479,3391 | |
| − | + | // | |
| − | + | // 648,3414,1088,3521 | |
| − | + | // 412,2176,692,2249 | |
| − | + | // 641,3406,1085,3532 | |
| − | + | ]; | |
| − | + | var areas = document.querySelectorAll('area'); | |
| − | + | for (var m = 0; m < areas.length; m++) { | |
| − | + | areas[m] | |
| − | + | } | |
| − | + | console.log(areas[0].coords); | |
| − | + | console.log(areas.length); | |
| − | + | // 图片地址 | |
| − | + | var img_url = '关于.png' | |
| − | + | // 创建对象 | |
| − | + | var img = new Image() | |
| − | + | // 改变图片的src | |
| − | + | img.src = 'https://2019.igem.org/wiki/images/1/1e/T--SZU-CHINA--hpPage2.jpg' | |
| − | + | // 加载完成执行 | |
| − | + | img.onload = function(){ | |
| − | + | // 打印 | |
| − | + | var cuWidth = parseInt($('#mapImg').css('width')) ; | |
| − | + | console.log("cp:"+cuWidth); | |
| − | + | var cp = cuWidth / 1166 ; | |
| − | + | console.log("cp:"+cp); | |
| − | + | console.log( img.width ); | |
| − | + | for (var i = 0; i < defaultMaps.length; i++) { | |
| − | + | for (var n = 0; n < defaultMaps[i].length; n++) { | |
| − | + | console.log(defaultMaps[i][n]); | |
| − | + | defaultMaps[i][n] = defaultMaps[i][n] * cp; | |
| − | + | console.log(defaultMaps[i][n]); | |
| − | |||
| − | |||
} | } | ||
| + | areas[i].setAttribute('coords',defaultMaps[i]); | ||
| + | } | ||
| − | + | }; | |
| − | + | }) | |
| − | + | </script> | |
<script src='https://2019.igem.org/Template:SZU-China/TweenMaxminjs?action=raw&ctype=text/javascript'></script> | <script src='https://2019.igem.org/Template:SZU-China/TweenMaxminjs?action=raw&ctype=text/javascript'></script> | ||
| Line 2,181: | Line 2,335: | ||
<script src='https://2019.igem.org/Template:SZU-China/debugaddIndicatorsminjs?action=raw&ctype=text/javascript'></script> | <script src='https://2019.igem.org/Template:SZU-China/debugaddIndicatorsminjs?action=raw&ctype=text/javascript'></script> | ||
<script src='https://2019.igem.org/Template:SZU-China/animationgsapminjs?action=raw&ctype=text/javascript'></script> | <script src='https://2019.igem.org/Template:SZU-China/animationgsapminjs?action=raw&ctype=text/javascript'></script> | ||
| − | + | <!--<script src="js/jquery-2.2.4.min.js"></script>--> | |
| − | + | <!--<script src="js/bootstrap.min.js"></script>--> | |
| − | + | <!--<script type="text/javascript" src="js/zooming.js"></script>--> | |
</div> | </div> | ||
</body> | </body> | ||
</html> | </html> | ||
Latest revision as of 10:22, 19 October 2019
Integrated
Human Practices
Background research
Community
Expert
Companies & partner
Click on the different sections of the image to learn more
