Difference between revisions of "Team:SMMU-China/Basic Part"

Line 4: Line 4:
 
<link rel="stylesheet" href="https://2019.igem.org/wiki/index.php?title=Template:SMMU-China/CSS_main&action=raw&ctype=text/css" />
 
<link rel="stylesheet" href="https://2019.igem.org/wiki/index.php?title=Template:SMMU-China/CSS_main&action=raw&ctype=text/css" />
 
<!--<link rel="stylesheet" href="main.css" />-->
 
<!--<link rel="stylesheet" href="main.css" />-->
 +
<link rel="stylesheet" href="https://2019.igem.org/wiki/index.php?title=Template:SMMU-China/CSS_planet_splitting&action=raw&ctype=text/css" />
 +
<link rel="stylesheet" href="https://2019.igem.org/wiki/index.php?title=Template:SMMU-China/CSS_planet_style&action=raw&ctype=text/css" />
  
 
<style type="text/css">
 
<style type="text/css">
Line 124: Line 126:
 
<div class="blank_framework"></div>
 
<div class="blank_framework"></div>
  
<div class="page_banner">
+
<div class="medium_framework">
<img src="https://static.igem.org/mediawiki/2019/8/82/T--SMMU-China--page_banner_default.jpg" alt="page_banner_default">
+
<div id="app" data-current-planet="mercury">
</div>
+
  
<div class="page_big_title_box">
+
  <nav class="planet-nav">
<div class="page_big_title">Basic Part</div>
+
    <svg viewBox="0 20 400 400" xmlns="http://www.w3.org/2000/svg">
<div class="page_big_subtitle">This is a descriptive paragraph.</div>
+
        <path
</div>
+
            id="navPath"
 +
            d="M10,200 C30,-28 370,-28 390,200"
 +
            fill="none" />
 +
      <text>
 +
        <textPath href="#navPath" startOffset="0" font-size="8">
 +
          <tspan>水星</tspan>
 +
          <tspan>金星</tspan>
 +
          <tspan>地球</tspan>
 +
          <tspan>火星</tspan>
 +
          <tspan>木星</tspan>
 +
          <tspan>土星</tspan>
 +
          <tspan>天王星</tspan>
 +
          <tspan>海王星</tspan>
 +
        </textPath>
 +
      </text>
  
<div class="medium_framework">
+
    </svg>
<h1> DEMO PART 1 </h1>
+
  </nav>
<p>Your team has been approved and you are ready to start the iGEM season! Your team has been approved and you are ready to start the iGEM season! Your team has been approved and you are ready to start the iGEM season! Your team has been approved and you are ready to start the iGEM season! Your team has been approved and you are ready to start the iGEM season! Your team has been approved and you are ready to start the iGEM season! Your team has been approved and you are ready to start the iGEM season! </p>
+
</div>
+
  
<div class="medium_framework">
+
  <div class="planet" data-planet="mercury" data-active>
<h1> DEMO PART 2 </h1>
+
    <div class="planet-title">
<p>Your team has been approved and you are ready to start the iGEM season! Your team has been approved and you are ready to start the iGEM season! Your team has been approved and you are ready to start the iGEM season! Your team has been approved and you are ready to start the iGEM season! Your team has been approved and you are ready to start the iGEM season! Your team has been approved and you are ready to start the iGEM season! Your team has been approved and you are ready to start the iGEM season! </p>
+
      <h1>水星</h1>
</div>
+
      <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
 +
    </div>
  
<div class="medium_framework">
+
    <div class="planet-details">
<h1> DEMO PART 3 </h1>
+
      <div class="detail" data-detail="tilt" data-postfix="°">
<p>Your team has been approved and you are ready to start the iGEM season! Your team has been approved and you are ready to start the iGEM season! Your team has been approved and you are ready to start the iGEM season! Your team has been approved and you are ready to start the iGEM season! Your team has been approved and you are ready to start the iGEM season! Your team has been approved and you are ready to start the iGEM season! Your team has been approved and you are ready to start the iGEM season! </p>
+
        3.13
 +
      </div>
 +
      <div class="detail" data-detail="gravity" data-postfix="𝗑">
 +
        0.9
 +
      </div>
 +
      <div class="detail" data-detail="hours">
 +
        10
 +
      </div>
 +
    </div>
 +
 
 +
    <figure class="planet-figure">
 +
      <img src="img/1_mercury.jpg" />
 +
    </figure>
 +
  </div>
 +
 
 +
  <div class="planet" data-planet="venus">
 +
    <div class="planet-title">
 +
      <h1>金星</h1>
 +
      <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
 +
    </div>
 +
 
 +
    <div class="planet-details">
 +
      <div class="detail" data-detail="tilt" data-postfix="°">
 +
        4.13
 +
      </div>
 +
      <div class="detail" data-detail="gravity" data-postfix="𝗑">
 +
        0.2
 +
      </div>
 +
      <div class="detail" data-detail="hours">
 +
        20
 +
      </div>
 +
    </div>
 +
 
 +
    <figure class="planet-figure">
 +
      <img src="img/2_venus.jpg" />
 +
    </figure>
 +
  </div>
 +
 
 +
  <div class="planet" data-planet="earth">
 +
    <div class="planet-title">
 +
      <h1>地球</h1>
 +
      <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
 +
    </div>
 +
 
 +
    <div class="planet-details">
 +
      <div class="detail" data-detail="tilt" data-postfix="°">
 +
        5.13
 +
      </div>
 +
      <div class="detail" data-detail="gravity" data-postfix="𝗑">
 +
        7.3
 +
      </div>
 +
      <div class="detail" data-detail="hours">
 +
        30
 +
      </div>
 +
    </div>
 +
 
 +
    <figure class="planet-figure">
 +
      <img src="img/3_earth.jpg" />
 +
    </figure>
 +
  </div>
 +
 
 +
  <div class="planet" data-planet="mars">
 +
    <div class="planet-title">
 +
      <h1>火星</h1>
 +
      <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
 +
    </div>
 +
 
 +
    <div class="planet-details">
 +
      <div class="detail" data-detail="tilt" data-postfix="°">
 +
        6.13
 +
      </div>
 +
      <div class="detail" data-detail="gravity" data-postfix="𝗑">
 +
        1.1
 +
      </div>
 +
      <div class="detail" data-detail="hours">
 +
        40
 +
      </div>
 +
    </div>
 +
 
 +
    <figure class="planet-figure">
 +
      <img src="img/4_mars.jpg" />
 +
    </figure>
 +
  </div>
 +
 
 +
  <div class="planet" data-planet="jupiter">
 +
    <div class="planet-title">
 +
      <h1>木星</h1>
 +
      <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
 +
    </div>
 +
 
 +
    <div class="planet-details">
 +
      <div class="detail" data-detail="tilt" data-postfix="°">
 +
        11.13
 +
      </div>
 +
      <div class="detail" data-detail="gravity" data-postfix="𝗑">
 +
        1.8
 +
      </div>
 +
      <div class="detail" data-detail="hours">
 +
        50
 +
      </div>
 +
    </div>
 +
 
 +
    <figure class="planet-figure">
 +
      <img src="img/5_jupiter.jpg" />
 +
    </figure>
 +
  </div>
 +
 
 +
  <div class="planet" data-planet="saturn">
 +
    <div class="planet-title">
 +
      <h1>土星</h1>
 +
      <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
 +
    </div>
 +
 
 +
    <div class="planet-details">
 +
      <div class="detail" data-detail="tilt" data-postfix="°">
 +
        9.13
 +
      </div>
 +
      <div class="detail" data-detail="gravity" data-postfix="𝗑">
 +
        7.3
 +
      </div>
 +
      <div class="detail" data-detail="hours">
 +
        60
 +
      </div>
 +
    </div>
 +
 
 +
    <figure class="planet-figure">
 +
      <img src="img/6_saturn.jpg" />
 +
    </figure>
 +
  </div>
 +
 
 +
  <div class="planet" data-planet="uranus">
 +
    <div class="planet-title">
 +
      <h1>天王星</h1>
 +
      <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
 +
    </div>
 +
 
 +
    <div class="planet-details">
 +
      <div class="detail" data-detail="tilt" data-postfix="°">
 +
        11.13
 +
      </div>
 +
      <div class="detail" data-detail="gravity" data-postfix="𝗑">
 +
        1.8
 +
      </div>
 +
      <div class="detail" data-detail="hours">
 +
        50
 +
      </div>    </div>
 +
 
 +
    <figure class="planet-figure">
 +
      <img src="img/7_uranus.jpg" />
 +
    </figure>
 +
  </div>
 +
 
 +
 
 +
  <div class="planet" data-planet="neptune">
 +
    <div class="planet-title">
 +
      <h1>海王星</h1>
 +
      <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
 +
    </div>
 +
 
 +
    <div class="planet-details">
 +
      <div class="detail" data-detail="tilt" data-postfix="°">
 +
        31.03      </div>
 +
      <div class="detail" data-detail="gravity" data-postfix="𝗑">
 +
        8.9      </div>
 +
      <div class="detail" data-detail="hours">
 +
        10
 +
      </div>
 +
    </div>
 +
 
 +
    <figure class="planet-figure">
 +
      <img src="img/8_neptune.jpg" />
 +
    </figure>
 +
  </div>
 +
</div>
 
</div>
 
</div>
  
Line 165: Line 352:
  
 
</div>  
 
</div>  
 +
 +
<script src="https://2019.igem.org/Template:SMMU-China/JS_planet_script?action=raw&ctype=text/javascript"></script>
 +
<script src="https://2019.igem.org/Template:SMMU-China/JS_planet_script_min?action=raw&ctype=text/javascript"></script>
 +
  
 
</html>
 
</html>

Revision as of 15:42, 7 September 2019

水星

Lorem ipsum dolor, sit amet consectetur adipisicing elit.

3.13
0.9
10

金星

Lorem ipsum dolor, sit amet consectetur adipisicing elit.

4.13
0.2
20

地球

Lorem ipsum dolor, sit amet consectetur adipisicing elit.

5.13
7.3
30

火星

Lorem ipsum dolor, sit amet consectetur adipisicing elit.

6.13
1.1
40

木星

Lorem ipsum dolor, sit amet consectetur adipisicing elit.

11.13
1.8
50

土星

Lorem ipsum dolor, sit amet consectetur adipisicing elit.

9.13
7.3
60

天王星

Lorem ipsum dolor, sit amet consectetur adipisicing elit.

11.13
1.8
50

海王星

Lorem ipsum dolor, sit amet consectetur adipisicing elit.

31.03
8.9
10