Difference between revisions of "Team:KoreaSonyeodul"

Line 1: Line 1:
 
{{KoreaSonyeodul}}
 
{{KoreaSonyeodul}}
 +
  
 
<html lang="en">
 
<html lang="en">
 
   <head>
 
   <head>
 
     <style>
 
     <style>
−
 
+
      #wrap {width: 60%; margin: auto;}
 
       body{
 
       body{
 
       margin: 0;
 
       margin: 0;
Line 12: Line 13:
 
       background-attachment: top;
 
       background-attachment: top;
 
       }
 
       }
−
 
 
       <!--mainTitle-->
 
       <!--mainTitle-->
 
       .site .mainBox .mainBox1 {width: 1000px; margin-left: auto; margin-right: auto;}
 
       .site .mainBox .mainBox1 {width: 1000px; margin-left: auto; margin-right: auto;}
 
       .site {width: 100%}
 
       .site {width: 100%}
−
 
 
       .site h1 {
 
       .site h1 {
 
       margin-top: 250px;
 
       margin-top: 250px;
 
       color: #ffffff;
 
       color: #ffffff;
 
       text-decoration: none;
 
       text-decoration: none;
−
       font-size: 100px;
+
       font-size: 80px;
 
       height: 35px;
 
       height: 35px;
−
       background-color: rgba(255, 255, 255, 0.0);
+
       background-color: rgba(255, 255, 255, 0.0);}
−
      margin-bottom:0}
+
       .site h2 {margin-top: 0; position: relative; margin-bottom: 200px;
−
 
+
−
       .site h2 {margin-top: 0; position: relative;
+
 
       font-size: 50px;
 
       font-size: 50px;
 
       color: #ffffff;
 
       color: #ffffff;
 +
      height: auto;
 
       }
 
       }
  
 
       .site .mainBox .mainBox1 {width: 1000px; margin-left: auto; margin-right: auto;}
 
       .site .mainBox .mainBox1 {width: 1000px; margin-left: auto; margin-right: auto;}
−
       <!--TitlePageSummaryBox-->
+
        
 +
<!--TitlePageSummaryBox-->
 
       .summary {margin-bottom: 20px;}
 
       .summary {margin-bottom: 20px;}
−
       .summary h1 {margin-top:0; margin-botton:5px; margin-left: 15px; margin-right: 15px; font-size: 22px;}
+
       .summary h1 {margin-top:0; margin-botton:5px; margin-left: 15px; margin-right: 15px; font-size: 22px; font-family: Roboto;}
 
       .summary p {margin-top: 0; margin-bottom: 15px; margin-left: 15px; margin-right: 15px; font-size: 14px;}
 
       .summary p {margin-top: 0; margin-bottom: 15px; margin-left: 15px; margin-right: 15px; font-size: 14px;}
 
       .summary a {display: block; border: solid 1px #ddddd; color: black; text-decoration: none; text-align: center;}
 
       .summary a {display: block; border: solid 1px #ddddd; color: black; text-decoration: none; text-align: center;}
 
       .summary a:hover {box-shadow:0 0 10px #dddddd; opacity: 0.8;}
 
       .summary a:hover {box-shadow:0 0 10px #dddddd; opacity: 0.8;}
 
       .summary img {max-width: 100%; height: auto; border: none; margin-bottom: 15px; vertical-align: bottom;}
 
       .summary img {max-width: 100%; height: auto; border: none; margin-bottom: 15px; vertical-align: bottom;}
−
       .mainBox {padding-top: 20px; padding-bottom: 20px;}
+
       .mainBox {padding-top: 20px; padding-bottom: 20px; float: left; width: 50%;}
−
       .mainBox1:after {content:''; display:bloxk; clear: both}
+
      .titleAnimation {float: left; width: 50%; height: auto; }
−
       .smallBox1 {float: left; height: 10%; width: 32%; margin-right: 2%;}
+
      .titleContent {clear: left; width: 100%; height: auto;}
 +
       .mainBox1:after {content:''; display:block;}
 +
       .smallBox1 {float: left; clear: left; height: 10%; width: 32%; margin-right: 2%;}
 
       .smallBox2 {float: left; height: 10%; width: 32%; margin-right: 2%;}
 
       .smallBox2 {float: left; height: 10%; width: 32%; margin-right: 2%;}
 
       .smallBox3 {float: left; height: 10%; width: 32%;}
 
       .smallBox3 {float: left; height: 10%; width: 32%;}
 +
<!--TitleBoxContent-->
 +
      .titleContent h1 {font-size:24px; font-family: Roboto;}
 +
      .titleContent p {font-size: 14px; font-family: Roboto;}
 +
<!--Animation-->
 +
      .conent1 {
 +
      position: relative;
 +
      }
 +
      .image {
 +
      position: relative;
 +
      -webkit-animation:spin 4s linear infinite;
 +
      -moz-animation:spin 4s linear infinite;
 +
      animation:spin 4s linear infinite;}
  
 +
 +
      @-moz-keyframes spin { 100% { -moz-transform: rotate(-360deg); } }
 +
      @-webkit-keyframes spin { 100% { -webkit-transform: rotate(-360deg); } }
 +
      @keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(-360deg); } }
 +
 +
      .content2 {position: relative; top: 90px; right:-80px;}
 +
      .image2 {
 +
      position: relative;
 +
      -webkit-animation:spin2 4s linear infinite;
 +
      -moz-animation:spin2 4s linear infinite;
 +
      animation:spin2 4s linear infinite;}
 +
 +
 +
      @-moz-keyframes spin2 { 100% { -moz-transform: rotate(360deg); } }
 +
      @-webkit-keyframes spin2 { 100% { -webkit-transform: rotate(360deg); } }
 +
      @keyframes spin2 { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
 +
 +
      .content3 {position: relative; top:20px; left: 30px;}
 +
     
 +
<!--FadeIn-->
 +
      @import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300);
 +
 +
      body {padding: 0; margin: 0; background-color: #333;}
 +
 +
      .container {position: fixed; top: 25%; left: 25%;}
 +
 +
      @-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
 +
      @-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
 +
      @keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
 +
 +
      .fade-in {
 +
      opacity:0;  /* make things invisible upon start */
 +
      -webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
 +
      -moz-animation:fadeIn ease-in 1;
 +
      animation:fadeIn ease-in 1;
 +
 +
      -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
 +
      -moz-animation-fill-mode:forwards;
 +
      animation-fill-mode:forwards;
 +
 +
      -webkit-animation-duration:1s;
 +
      -moz-animation-duration:1s;
 +
      animation-duration:1s;
 +
      }
 +
 +
      .fade-in.one {
 +
      -webkit-animation-delay: 0.7s;
 +
      -moz-animation-delay: 0.7s;
 +
      animation-delay: 0.7s;
 +
      }
 +
 +
      .fade-in.two {
 +
      -webkit-animation-delay: 1.2s;
 +
      -moz-animation-delay:1.2s;
 +
      animation-delay: 1.2s;
 +
      }
 +
 +
      .fade-in.three {
 +
      -webkit-animation-delay: 1.6s;
 +
      -moz-animation-delay: 1.6s;
 +
      animation-delay: 1.6s;
 +
      }
  
 
     </style>
 
     </style>
Line 55: Line 130:
  
 
     <!--Title-->
 
     <!--Title-->
−
    <div id="" align="center">
 
−
      <div id="fontlight" class="site">
 
−
        <h1>
 
−
          <font face="Roboto" weight="200">KOREASONYEODUL</font>
 
−
        </h1>
 
−
        <h2>
 
−
          <font face="Roboto">Main Subtitle</font>
 
−
        </h2>
 
−
      </div>
 
−
    </div>
 
−
    <!--Animation-->
 
−
    <div id="animation">
 
  
−
    </div>
+
      <div class="box fade-in one">
−
    <!--TitleBoxes-->
+
         <div id="" align="center">
−
    <div class="mainBox">
+
           <div id="fontlight" class="site">
−
      <article class="summary">
+
−
         <a href="#">
+
−
          <img src="https://static.igem.org/mediawiki/2016/thumb/7/74/T--KoreaSonyeodul--Icon.jpeg/600px-T--KoreaSonyeodul--Icon.jpeg"></img>
+
−
           <h1>
+
−
            This is the Main Content
+
−
          </h1>
+
−
          <p>Here comes the explanation.</p>
+
−
        </a>
+
−
      </article>
+
−
    </div>
+
−
 
+
−
    <div class="mainBox1">
+
−
      <article class="summary">
+
−
        <div class="smallBox1">
+
−
          <a href="#">
+
−
            <img src="https://static.igem.org/mediawiki/2016/thumb/7/74/T--KoreaSonyeodul--Icon.jpeg/600px-T--KoreaSonyeodul--Icon.jpeg"></img>
+
 
             <h1>
 
             <h1>
−
               This is the Main Content1
+
               <font face="Roboto" weight="200">KOREASONYEODUL</font>
 
             </h1>
 
             </h1>
−
             <p>Here comes the explanation.</p>
+
             <h2>
−
           </a>
+
              <font face="Roboto">Main Subtitle</font>
 +
            </h2>
 +
           </div>
 
         </div>
 
         </div>
−
       </article>
+
       </div>
−
       <article class="summary">
+
 
−
         <div class="smallBox2">
+
 
−
           <a href="#">
+
    <!--TitleBoxes-->
−
            <img src="https://static.igem.org/mediawiki/2016/thumb/7/74/T--KoreaSonyeodul--Icon.jpeg/600px-T--KoreaSonyeodul--Icon.jpeg"></img>
+
    <div id="wrap">
−
            <h1>
+
       <div class="box fade-in two">
−
              This is the Main Content1
+
         <div class="mainBox">
−
            </h1>
+
           <article class="summary">
−
            <p>Here comes the explanation.</p>
+
            <a href="#">
−
          </a>
+
              <img src="https://static.igem.org/mediawiki/2016/thumb/7/74/T--KoreaSonyeodul--Icon.jpeg/600px-T--KoreaSonyeodul--Icon.jpeg"></img>
 +
              <h1>
 +
                This is the Main Content
 +
              </h1>
 +
              <p>Here comes the explanation.</p>
 +
            </a>
 +
          </article>
 
         </div>
 
         </div>
−
      </article>
+
 
−
      <article class="summary">
+
        <!--Animation-->
−
         <div class="smallBox3">
+
         <div class="titleAnimation">
−
           <a href="#">
+
           <div class="content1">
−
             <img src="https://static.igem.org/mediawiki/2016/thumb/7/74/T--KoreaSonyeodul--Icon.jpeg/600px-T--KoreaSonyeodul--Icon.jpeg"></img>
+
             <img class="image" width="50%" align="right" src="https://static.igem.org/mediawiki/2016/1/17/T--KoreaSonyeodul--Saw1.png"></img>
−
            <h1>
+
          </div>
−
              This is the Main Content1
+
          <div class="content2">
−
            </h1>
+
            <img class="image2" src="https://static.igem.org/mediawiki/2016/e/e3/T--KoreaSonyeodul--Saw2.png" width="40%"></img>
−
             <p>Here comes the explanation.</p>
+
          </div>
−
           </a>
+
          <div class="content3">
 +
             <img src="https://static.igem.org/mediawiki/2016/8/87/T--KoreaSonyeodul--Worm.png" width="50%" align="right"></img>
 +
           </div>
 
         </div>
 
         </div>
−
       </article>
+
       </div>
−
    </div>
+
  
 +
      <!--TitleContent-->
 +
      <div class="titleContent">
 +
        <h1>Title</h1>
 +
        <p>Contents</p>
 +
      </div>
 +
 +
      <!--OtherTitleBoxes-->
 +
      <div class="box fade-in three">
 +
        <div class="mainBox1">
 +
          <article class="summary">
 +
            <div class="smallBox1">
 +
              <a href="#">
 +
                <img src="https://static.igem.org/mediawiki/2016/thumb/7/74/T--KoreaSonyeodul--Icon.jpeg/600px-T--KoreaSonyeodul--Icon.jpeg"></img>
 +
                <h1>
 +
                  This is the Main Content1
 +
                </h1>
 +
                <p>Here comes the explanation.</p>
 +
              </a>
 +
            </div>
 +
          </article>
 +
          <article class="summary">
 +
            <div class="smallBox2">
 +
              <a href="#">
 +
                <img src="https://static.igem.org/mediawiki/2016/thumb/7/74/T--KoreaSonyeodul--Icon.jpeg/600px-T--KoreaSonyeodul--Icon.jpeg"></img>
 +
                <h1>
 +
                  This is the Main Content2
 +
                </h1>
 +
                <p>Here comes the explanation.</p>
 +
              </a>
 +
            </div>
 +
          </article>
 +
          <article class="summary">
 +
            <div class="smallBox3">
 +
              <a href="#">
 +
                <img src="https://static.igem.org/mediawiki/2016/thumb/7/74/T--KoreaSonyeodul--Icon.jpeg/600px-T--KoreaSonyeodul--Icon.jpeg"></img>
 +
                <h1>
 +
                  This is the Main Content3
 +
                </h1>
 +
                <p>Here comes the explanation.</p>
 +
              </a>
 +
            </div>
 +
          </article>
 +
        </div>
 +
      </div>
 +
    </div>
 +
    <!--Wrap-->
 
   </body>
 
   </body>
 
</html>
 
</html>

Revision as of 14:28, 3 September 2016


KOREASONYEODUL

Main Subtitle