| (One intermediate revision by one other user not shown) | |||
| Line 27: | Line 27: | ||
<style id="fontSet"> | <style id="fontSet"> | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
@font-face { | @font-face { | ||
font-family: "GalanoGrotesqueAltDEMO-Bold"; | font-family: "GalanoGrotesqueAltDEMO-Bold"; | ||
| − | src: url('./ | + | src: url('../../wiki/images/e/ef/T--SZU-CHINA--attribution_font.otf') format("opentype"); |
} | } | ||
@font-face { | @font-face { | ||
font-family: "LatoBold"; | font-family: "LatoBold"; | ||
| − | src: url('./ | + | src: url('../../wiki/images/5/54/T--SZU-CHINA--Lato-Bold.ttf') format("truetype"); |
} | } | ||
| Line 57: | Line 40: | ||
@font-face { | @font-face { | ||
font-family: "LatoMe"; | font-family: "LatoMe"; | ||
| − | src: url('./ | + | src: url('../../wiki/images/5/5a/T--SZU-CHINA--Lato-medium.ttf') format("truetype"); |
} | } | ||
| + | |||
| + | @font-face { | ||
| + | font-family: "LatoMeIta"; | ||
| + | src: url('../../wiki/images/b/bd/T--SZU-CHINA--LatoMediumItalic.ttf') format("truetype"); | ||
| + | |||
| + | } | ||
| + | |||
| + | /*@font-face {*/ | ||
| + | /*font-family: "GalanoGrotesqueAltDEMO-Bold";*/ | ||
| + | /*src: url('./fonts/Galano Grotesque Alt DEMO Bold.otf') format("opentype");*/ | ||
| + | /*}*/ | ||
| + | /*@font-face {*/ | ||
| + | /*font-family: "LatoBold";*/ | ||
| + | /*src: url('./fonts/Lato-Bold.ttf') format("truetype");*/ | ||
| + | |||
| + | /*}*/ | ||
| + | |||
| + | /*@font-face {*/ | ||
| + | /*font-family: "LatoMe";*/ | ||
| + | /*src: url('./fonts/Lato-Medium.ttf') format("truetype");*/ | ||
| + | |||
| + | /*}*/ | ||
| Line 336: | Line 341: | ||
} | } | ||
.CilckMore{ | .CilckMore{ | ||
| − | color: # | + | color: #11843f; |
font-family: GalanoGrotesqueAltDEMO-Bold; | font-family: GalanoGrotesqueAltDEMO-Bold; | ||
| − | font-size: | + | font-size: 32px; |
line-height: 120%; | line-height: 120%; | ||
text-align: center; | text-align: center; | ||
| Line 1,171: | Line 1,176: | ||
</div> | </div> | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
<div style=" width: 60%;height: auto;margin: 60px auto;padding: 60px auto"> | <div style=" width: 60%;height: auto;margin: 60px auto;padding: 60px auto"> | ||
<div class="pArea"> | <div class="pArea"> | ||
| − | <p class="pjudge"> | + | <p class="pjudge" style="text-align: center"> |
We collect a lot of feedback through background research, interviews, and collaborations. These feedbacks advance the iteration and improvement of our products. Check the timeline below to learn more | We collect a lot of feedback through background research, interviews, and collaborations. These feedbacks advance the iteration and improvement of our products. Check the timeline below to learn more | ||
</p> | </p> | ||
</div> | </div> | ||
</div> | </div> | ||
| + | <h1 class="CilckMore">Click on the different sections of the image to learn more</h1> | ||
<!--<div style="width: 100%; margin: 0 auto">--> | <!--<div style="width: 100%; margin: 0 auto">--> | ||
| Line 1,192: | Line 1,193: | ||
<map name="testArea" id="testArea"> | <map name="testArea" id="testArea"> | ||
| + | <area alt="" title="" data-target="#myModalInsp" data-toggle="modal" shape="rect" style="outline:none;" target="_self" onfocus="blur(this)" /> | ||
<area alt="" title="" data-target="#myModal1" data-toggle="modal" shape="rect" style="outline:none;" target="_self" onfocus="blur(this)" /> | <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="#myModal2" data-toggle="modal" shape="rect" style="outline:none;" target="_self" /> | ||
| Line 1,224: | Line 1,226: | ||
</div> | </div> | ||
</div> | </div> | ||
| + | <div class="modal fade" id="myModalInsp" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> | ||
| + | <div class="modal-dialog"> | ||
| + | |||
| + | <div class="modal-content"> | ||
| + | <div class="modal-header"> | ||
| + | <button type="button" class="close" data-dismiss="modal" | ||
| + | aria-hidden="true">× | ||
| + | </button> | ||
| + | <h3 class="modal-title" > | ||
| + | Inspiration | ||
| + | </h3> | ||
| + | </div> | ||
| + | <div class="modal-body"> | ||
| + | |||
| + | <div > | ||
| + | <p> | ||
| + | <span class="myitalic">Mikania micrantha</span>, a notorious invasive plant, caused great damage to the ecological environment of Shenzhen. As a local iGEM team in shenzhen, we naturally wanted to solve this problem. More details about the inspiration of our project, please click Description to see more. | ||
| + | </p> | ||
| + | </div> | ||
| + | |||
| + | |||
| + | </div> | ||
| + | <div class="modal-footer"> | ||
| + | <button type="button" class="btn btn-default" | ||
| + | data-dismiss="modal">Close | ||
| + | </button> | ||
| + | |||
| + | </div> | ||
| + | </div><!-- /.modal-content --> | ||
| + | </div><!-- /.modal-dialog --> | ||
| + | |||
| + | </div><!-- /.modal --> | ||
<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 2,418: | Line 2,452: | ||
//position on 1166px | //position on 1166px | ||
var defaultMaps = [ | var defaultMaps = [ | ||
| + | [367,103,783,203], | ||
[661,248,1026,353], | [661,248,1026,353], | ||
[257,356,484,443], | [257,356,484,443], | ||
Latest revision as of 03:10, 22 October 2019
Integrated
Human Practices
We conducted a background research on the current status of Mikania micrantha in Shenzhen and engaged many different stakeholders to promote the progress of the project. Click on the box below to learn more about our effort.
Background research
Community
Experts
Company & partner
We collect a lot of feedback through background research, interviews, and collaborations. These feedbacks advance the iteration and improvement of our products. Check the timeline below to learn more
Click on the different sections of the image to learn more
