Difference between revisions of "Team:AHUT China/HP/Human Practice/MOOC"

(Created page with "{{:Team:AHUT_China/CSS_reset}} <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name=...")
 
 
(22 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
{{:Team:AHUT_China/CSS_reset}}
 
{{:Team:AHUT_China/CSS_reset}}
 +
{{:Team:AHUT_China/mooccss}}
 
<html lang="en">
 
<html lang="en">
 +
<script src="https://2015.igem.org/Team:AHUT_China/moocjs?action=raw&ctype=text/javascript" type="text/javascript" ></script>
 
  <head>
 
  <head>
 
   <meta charset="UTF-8">
 
   <meta charset="UTF-8">
Line 16: Line 18:
  
 
/*---------------------------------daohang------------------------------*/
 
/*---------------------------------daohang------------------------------*/
−
#menu{height:80px;width:80%;background-color:#0066ff;z-index:11;position:absolute;margin-left:15rem}
+
#menu{height:80px;width:80%;background-color:#336600;z-index:11;position:absolute;margin-left:15rem}
  
 
.nav-menu {
 
.nav-menu {
Line 191: Line 193:
  
  
−
#banner{width:100%;height:800px;background-color:#0066ff;margin:0px}
+
#banner{width:100%;height:800px;background-color:#336600;margin:0px}
 
#name img{margin-left: 24rem;margin-top:-230px;position:absolute}
 
#name img{margin-left: 24rem;margin-top:-230px;position:absolute}
 
#name{color:#ffffff;margin-left:0rem;margin-top:40%; position:relative;z-index:-100;}
 
#name{color:#ffffff;margin-left:0rem;margin-top:40%; position:relative;z-index:-100;}
−
#name p{font-size:8em;font-family:Segoe UI;font-weight:100;position:relative;letter-spacing:0em;margin-left:10rem}
+
#name p{font-size:8em;font-family:Segoe UI;font-weight:100;position:relative;letter-spacing:0em;margin-left:22rem}
 
#uptop  > img{margin-top:-6.5rem;margin-left:72%;position:fixed;}
 
#uptop  > img{margin-top:-6.5rem;margin-left:72%;position:fixed;}
 +
#goback  > img{margin-top:-22rem;margin-left:-9rem;position:absolute;}
  
  
Line 202: Line 205:
  
  
−
 
+
#content{background-image:url("https://static.igem.org/mediawiki/2016/5/56/AHUT_CHINA_igem_2016_MOOC_logo.png" );width:100%;height:22rem;position:relative;}
−
#content{background-image:url("https://static.igem.org/mediawiki/2016/1/1b/AHUT_CHINA_igem_2016_overview.png" );width:100%;height:35rem;position:relative;}
+
#con_inner{padding:0.2rem;background-color:rgba(0,0,0,0.9);height:22rem}
−
#con_inner{padding:0.2rem;background-color:rgba(0,0,0,0.7);height:35rem}
+
 
#con_inner p{color:#ffffff}
 
#con_inner p{color:#ffffff}
  
−
#table-menu{width:100%;height:40rem}
+
 
−
#table-menu li{width:29rem;height:14rem;float:left;background-color:#006699;margin:0.1rem;}
+
−
#table-menu li a{margin-top:5rem;margin-left:5rem;font-size:3em}
+
  
  
Line 322: Line 322:
  
 
<div id="name">
 
<div id="name">
−
<img src="https://static.igem.org/mediawiki/2016/8/8b/AHUT_CHINA_igem_2016_overview_max.png" width="250" height="250" border="0" alt="">
+
<a id="goback" href="https://2016.igem.org/wiki/index.php?title=Team:AHUT_China/HP/Human_Practice"><img src="https://static.igem.org/mediawiki/2016/d/da/AHUT_CHINA_igem_2016_goback.png" width="100" height="" border="100" ></a>
−
<p>Human Practice</p>
+
 
 +
<img src="https://static.igem.org/mediawiki/2016/8/8e/AHUT_CHINA_igem_2016_MOOC.png" width="250" height="250" border="0" alt="">
 +
<p>MOOC</p>
  
 
</div>
 
</div>
 
<a id="uptop" href="#menu"><img src="https://static.igem.org/mediawiki/2016/d/da/Up.png" width="60" height="60" border="0" ></a>  
 
<a id="uptop" href="#menu"><img src="https://static.igem.org/mediawiki/2016/d/da/Up.png" width="60" height="60" border="0" ></a>  
 +
 
</div>
 
</div>
  
Line 335: Line 338:
 
<div id ="con_inner">
 
<div id ="con_inner">
  
 +
<p style="position:absolute;margin:10px;font-size:3em;font-family:Segoe UI;font-weight:100;position:relative;letter-spacing:0em;margin-left:0%">MOOC</p><br>
  
 +
<p style="font-size:2em;font-weight:lighter;font-family:Segoe UI;line-height:1.5;text-indent:2rem">MOOC has also been a means of communicating to society, reaching out for those who do not know SynBio yet. By integrating iGEM and online courses, we made our own MOOC videos where our team members are the speakers. The videos include the introduction of IGEM competition, the knowledge about synthetic biology, our project outline and lab safety. This year, there have been 73,639 learners who joined us by learning our MOOC.</p><br>
  
 
</div>
 
</div>
Line 343: Line 348:
 
 
 
 
 +
 +
 +
 +
<div class="mooc_whole">
 +
<div id="mooc_background">
 +
        <img width="759px" height="1037px" alt="" src="https://static.igem.org/mediawiki/2015/2/2f/AHUT_CHINA_2015_mooc_background.png">
 +
        </div>
 +
    <div id="mooc_nav">
 +
    <img width="316px" height="567px" alt="" src="https://static.igem.org/mediawiki/2015/6/67/AHUT_CHINA_2015_mooc_nav.png">
 +
  </div>
 +
        <div id="mooc_nav_note">
 +
        <p id="mooc_nav_p">Our courses consist of seven major sections—iGEM’s introduction, modern molecular biology, synthetic biology, bioinformatics, current protocols, wiki web making and iGEM’s information search. We have created a comprehensive course system which is good at deepening students’ understanding of our courses. </p>
 +
        </div>
 +
        <div id="mooc_nav_line1">
 +
        <img width="360" height="8" alt="" src="https://static.igem.org/mediawiki/2015/e/e3/AHUT_CHINA_2015_mooc_navline1.png"/>
 +
        </div>
 +
        <div id="mooc_nav_line2">
 +
        <img width="184" height="9" alt="" src="https://static.igem.org/mediawiki/2015/8/8e/AHUT_CHINA_2015_mooc_navline2.png"/>
 +
        </div>
 +
        <div id="mooc_logo">
 +
    <img width="354px" height="205px" alt="" src="https://static.igem.org/mediawiki/2015/8/89/AHUT_CHINA_2015_mooc_logo.png">
 +
  </div> 
 +
    <div id="mooc_introduction">
 +
    <img width="370px" height="286px" alt="" src="https://static.igem.org/mediawiki/2015/7/79/AHUT_CHINA_2015_mooc_introduction.png">
 +
  </div>
 +
        <div id="mooc_introduction_note">
 +
        <p id="mooc_introduction_p">Our MOOC videos consist of iGEM’s introduction, basics of synthetic biology and design of WIKI making with the view of letting more people be involved in iGEM by learning our online courses!</p>
 +
        </div>
 +
        <div id="mooc_introduction_line">
 +
        <img width="266" height="210" alt="" src="https://static.igem.org/mediawiki/2015/a/aa/AHUT_CHINA_2015_mooc_introductionline.png"/>
 +
        </div>
 +
    <div id="mooc_concept">
 +
    <img width="443px" height="574px" alt="" src="https://static.igem.org/mediawiki/2015/1/1b/AHUT_CHINA_2015_mooc_concept.png">
 +
  </div>   
 +
        <div id="mooc_concept_note">
 +
        <p id="mooc_concept_p">iGEM was founded by MIT in 2003. It is a top international academic competition in the field of synthetic biology. Synthetic biology aims to re-design the current natural biological system and build artificial biological parts and system to create a new biological system. The design and making of WIKI has given us the most humanistic vision experience and offered us an optimal project display platform with the interaction of science and humanity.<p>
 +
        </div> 
 +
        <div id="mooc_concept_line1">
 +
        <img width="271" height="9" alt="" src="https://static.igem.org/mediawiki/2015/9/9e/AHUT_CHINA_2015_mooc_conceptline1.png"/>
 +
        </div>
 +
        <div id="mooc_concept_line2">
 +
        <img width="422" height="8" alt="" src="https://static.igem.org/mediawiki/2015/f/f0/AHUT_CHINA_2015_mooc_conceptline2.png"/>
 +
        </div>
 +
    <div id="mooc_resource">
 +
    <img width="318px" height="283px" alt="" src="https://static.igem.org/mediawiki/2015/e/e0/AHUT_CHINA_2015_mooc_resource.png">
 +
  </div>   
 +
        <div id="mooc_resource_line">
 +
        <img width="322" height="114" alt="" src="https://static.igem.org/mediawiki/2015/d/dc/AHUT_CHINA_2015_mooc_resourceline.png"/>
 +
        </div>     
 +
        <div id="mooc_resource_note">
 +
        <p id="mooc_resource_p">Besides our teaching materials, we have also made our teaching videos to help people get to know more about our project. Some relevant questions have also been given to assist students to strengthen what they’ve learned.</p>
 +
        </div>       
 +
  </div>
 +
   
 +
    <p style="width:960px; margin:0 auto; padding-top:20px; padding-bottom:20px; line-height:40px; font-size:20px; text-align:center; z-index:99; position:relative;">Click <a href="http://mooc1.chaoxing.com/course/80804095.html" target="_blank" style="color:#FF0000;">here</a> to our Mooc!<br /><span style="font-size:14px;">(http://mooc1.chaoxing.com/course/80804095.html)</span></p>
 +
  </div>
 +
 +
 +
 
 
  
Line 368: Line 432:
 
       <img src="https://static.igem.org/mediawiki/2015/f/fe/AHUT_CHINA_2015_index_foot_line_white.jpg" width="960" height="1" alt=""/>
 
       <img src="https://static.igem.org/mediawiki/2015/f/fe/AHUT_CHINA_2015_index_foot_line_white.jpg" width="960" height="1" alt=""/>
 
     </div>-->
 
     </div>-->
−
     <p style="font-size:8em;color:rgba(0,0,0,0.8);position:absolute">AHUT_CHINA</a>
+
     <p style="font-size:6em;color:rgba(0,0,0,0.8);position:absolute">AHUT_CHINA</a>
 
     <div id="foot_igem">
 
     <div id="foot_igem">
 
       <a href="https://2016.igem.org/Main_Page"></a>
 
       <a href="https://2016.igem.org/Main_Page"></a>

Latest revision as of 10:48, 19 October 2016

Document