Difference between revisions of "Team:SZU-China/Human Practices"

 
(One intermediate revision by one other user not shown)
Line 27: Line 27:
  
 
<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('./fonts/Galano Grotesque Alt DEMO Bold.otf') format("opentype");
+
         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('./fonts/Lato-Bold.ttf') format("truetype");
+
         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('./fonts/Lato-Medium.ttf') format("truetype");
+
         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: #333333;
+
         color: #11843f;
 
         font-family: GalanoGrotesqueAltDEMO-Bold;
 
         font-family: GalanoGrotesqueAltDEMO-Bold;
         font-size: 38px;
+
         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="height: 150px">
 
 
    </div>
 
  
  
  
    <!--<h1 class="CilckMore">Click on the different sections of the image to learn more</h1>-->
 
 
     <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