|
|
| Line 65: |
Line 65: |
| | | | |
| | <html> | | <html> |
| − | <div style="position:fixed;z-index:99999 !important; bottom:0;height: 5rem;border:2px solid gray; width: 10rem; font-size: 3rem;line-height: 5rem;"><p style="padding:0;margin:0" id="test">aaaa</p></div>
| |
| − | <section class="fixed_content">
| |
| − | <div id="promoter">
| |
| − | <p class="promoter_title animated">Promoter Library</p>
| |
| − | </div>
| |
| − | </section>
| |
| | <section class="s1"> | | <section class="s1"> |
| − | <div>
| |
| − | <div class="ssection sc1">
| |
| − | <!--<div class="main_title animated fadeIn"><p>iGEM 2018</p><p>Jilin China</p></div>-->
| |
| − | <style>
| |
| − | .background_animation{
| |
| − | width: 100%;
| |
| − | height: calc(100vh - 18px);
| |
| − | background: linear-gradient(to bottom right,#b2edfe,#c6ffff);
| |
| − | overflow: hidden;
| |
| − | }
| |
| − | .ba_container{
| |
| − | width: 100%;
| |
| − | height: 30vw;
| |
| − | transform: rotate(20deg);
| |
| − | opacity:0.7;
| |
| − | margin-left: -3vw;
| |
| − | }
| |
| − | .ba_container:first-of-type{
| |
| − | margin-top: -13vw;
| |
| − | }
| |
| − | .ba_line{
| |
| − | width:100%;
| |
| − | height: 30vw;
| |
| − | }
| |
| − | .ba_unit{
| |
| − | box-sizing: border-box;
| |
| − | float: right;
| |
| − | width:20%;
| |
| − | height: 30vw;
| |
| − | background: url(https://static.igem.org/mediawiki/2018/a/a2/T--Jilin_China--Home--Banner--Giraffe.svg) no-repeat;
| |
| − | background-size: 80%;
| |
| − | animation: baLineRotate 1s ease alternate infinite;
| |
| − | }
| |
| − | .ba_unit:nth-of-type(even){
| |
| − | animation: baLineRotateR 1s ease alternate infinite;
| |
| − | background-position: 30% 50%;
| |
| − | }
| |
| − | .background_title{
| |
| − | position: absolute;
| |
| − | bottom: 10%;
| |
| − | left: 50%;
| |
| − | transform: translateX(-50%);
| |
| − | width:15vw;
| |
| − | height:auto;
| |
| − | z-index:99;
| |
| − | }
| |
| − | @keyframes baLineRotate{
| |
| − | 0%{
| |
| − | transform: rotate(-7deg);
| |
| − | }
| |
| − | 100%{
| |
| − | transform: rotate(7deg);
| |
| − | }
| |
| − | }
| |
| − | @keyframes baLineRotateR{
| |
| − | 0%{
| |
| − | transform: rotate(187deg);
| |
| − | }
| |
| − | 100%{
| |
| − | transform: rotate(173deg);
| |
| − | }
| |
| − | }
| |
| − | </style>
| |
| | <div> | | <div> |
| | <div class="background_title"> | | <div class="background_title"> |
| Line 172: |
Line 103: |
| | </svg> | | </svg> |
| | </div> | | </div> |
| − |
| |
| − |
| |
| − | <div class="background_animation">
| |
| − | <div class="ba_container">
| |
| − | <div class="ba_line">
| |
| − | <div class="ba_unit"></div>
| |
| − | <div class="ba_unit"></div>
| |
| − | <div class="ba_unit"></div>
| |
| − | <div class="ba_unit"></div>
| |
| − | <div class="ba_unit"></div>
| |
| − | </div>
| |
| − | </div>
| |
| − | <div class="ba_container">
| |
| − | <div class="ba_line">
| |
| − | <div class="ba_unit"></div>
| |
| − | <div class="ba_unit"></div>
| |
| − | <div class="ba_unit"></div>
| |
| − | <div class="ba_unit"></div>
| |
| − | <div class="ba_unit"></div>
| |
| − | </div>
| |
| − | </div>
| |
| − | <div class="ba_container">
| |
| − | <div class="ba_line">
| |
| − | <div class="ba_unit"></div>
| |
| − | <div class="ba_unit"></div>
| |
| − | <div class="ba_unit"></div>
| |
| − | <div class="ba_unit"></div>
| |
| − | <div class="ba_unit"></div>
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| | </div> | | </div> |
| | </div> | | </div> |
