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 126: Line 124:
 
<div class="blank_framework"></div>
 
<div class="blank_framework"></div>
  
<div class="medium_framework">
+
<div class="page_banner">
<div id="app" data-current-planet="mercury">
+
<img src="https://static.igem.org/mediawiki/2019/8/82/T--SMMU-China--page_banner_default.jpg" alt="page_banner_default">
 +
</div>
  
  <nav class="planet-nav">
+
<div class="page_big_title_box">
    <svg viewBox="0 20 400 400" xmlns="http://www.w3.org/2000/svg">
+
<div class="page_big_title">Basic Part</div>
        <path
+
<div class="page_big_subtitle">This is a descriptive paragraph.</div>
            id="navPath"
+
</div>
            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>
+
  
    </svg>
+
<div class="medium_framework">
  </nav>
+
<h1> DEMO PART 1 </h1>
 +
<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="planet" data-planet="mercury" data-active>
+
<div class="medium_framework">
    <div class="planet-title">
+
<h1> DEMO PART 2 </h1>
      <h1>水星</h1>
+
<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>
      <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
+
</div>
    </div>
+
  
    <div class="planet-details">
+
<div class="medium_framework">
      <div class="detail" data-detail="tilt" data-postfix="°">
+
<h1> DEMO PART 3 </h1>
        3.13
+
<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="detail" data-detail="gravity" data-postfix="𝗑">
+
        0.9
+
      </div>
+
      <div class="detail" data-detail="hours">
+
        10
+
      </div>
+
    </div>
+
 
+
    <figure class="planet-figure">
+
      <img src="https://static.igem.org/mediawiki/2019/3/3f/T--SMMU-China--planet_test.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 352: Line 165:
  
 
</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:50, 7 September 2019

page_banner_default
Basic Part
This is a descriptive paragraph.

DEMO PART 1

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!

DEMO PART 2

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!

DEMO PART 3

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!