|
|
Line 59: |
Line 59: |
| | | |
| <style type="text/css">.recentcomments a{display:inline !important;padding:0 !important;margin:0 !important;}</style> | | <style type="text/css">.recentcomments a{display:inline !important;padding:0 !important;margin:0 !important;}</style> |
| + | <style> |
| | | |
| + | .reference{ |
| + | clear:both; |
| + | top:100px; |
| + | left:120px; |
| + | position:absolute; |
| + | text-align:left; |
| + | width:400px; |
| + | padding:20px; |
| + | // background-color:#83e; |
| + | -moz-box-shadow:1px 3px 15px #ddd; |
| + | -webkit-box-shadow:1px 3px 15px #ddd; |
| + | box-shadow:4px 3px 25px #ddd; |
| + | } |
| + | |
| + | |
| + | |
| + | |
| + | |
| + | ul.accordion{ |
| + | list-style:none; |
| + | position:absolute; |
| + | right:150px; |
| + | top:0px; |
| + | font-family: Cambria, serif; |
| + | font-size: 16px; |
| + | font-style: italic; |
| + | line-height: 1.5em; |
| + | } |
| + | ul.accordion li{ |
| + | float:right; |
| + | width:115px; |
| + | height:480px; |
| + | display:block; |
| + | border-right:2px solid #fff; |
| + | border-bottom:2px solid #fff; |
| + | background-color:#fff; |
| + | background-repeat:no-repeat; |
| + | background-position:center center; |
| + | position:relative; |
| + | overflow:hidden; |
| + | cursor:pointer; |
| + | -moz-box-shadow:1px 3px 15px #555; |
| + | -webkit-box-shadow:1px 3px 15px #555; |
| + | box-shadow:1px 3px 15px #555; |
| + | } |
| + | ul.accordion li.bg1{ |
| + | background-image:url(https://static.igem.org/mediawiki/2013/d/d2/Cloud.png); |
| + | } |
| + | ul.accordion li.bg2{ |
| + | background-image:url(https://static.igem.org/mediawiki/2013/d/d2/Cloud.png); |
| + | } |
| + | ul.accordion li.bg3{ |
| + | background-image:url(https://static.igem.org/mediawiki/2013/d/d2/Cloud.png); |
| + | } |
| + | ul.accordion li.bg4{ |
| + | background-image:url(https://static.igem.org/mediawiki/2013/d/d2/Cloud.png); |
| + | } |
| + | ul.accordion li.bleft{ |
| + | border-left:2px solid #fff; |
| + | } |
| + | ul.accordion li .heading{ |
| + | background-color:#fff; |
| + | padding:10px; |
| + | margin-top:60px; |
| + | opacity:0.9; |
| + | text-transform:uppercase; |
| + | font-style:normal; |
| + | font-weight:bold; |
| + | letter-spacing:1px; |
| + | font-size:14px; |
| + | color:#444; |
| + | text-align:center; |
| + | text-shadow:-1px -1px 1px #ccc; |
| + | } |
| + | ul.accordion li .description{ |
| + | position:absolute; |
| + | width:480px; |
| + | height:175px; |
| + | bottom:0px; |
| + | left:0px; |
| + | display:none; |
| + | } |
| + | ul.accordion li .description h2{ |
| + | text-transform:uppercase; |
| + | font-style:normal; |
| + | font-weight:bold; |
| + | letter-spacing:1px; |
| + | font-size:45px; |
| + | color:#444; |
| + | text-align:left; |
| + | margin:0px 0px 15px 20px; |
| + | text-shadow:-1px -1px 1px #ccc; |
| + | } |
| + | ul.accordion li .description p{ |
| + | line-height:14px; |
| + | margin:10px 22px; |
| + | font-family: "Trebuchet MS", sans-serif; |
| + | font-size: 12px; |
| + | font-style: italic; |
| + | font-weight: normal; |
| + | text-transform: none; |
| + | letter-spacing: normal; |
| + | line-height: 1.6em; |
| + | } |
| + | ul.accordion li .description a{ |
| + | position:absolute; |
| + | bottom:5px; |
| + | left:20px; |
| + | text-transform:uppercase; |
| + | font-style:normal; |
| + | font-size:11px; |
| + | text-decoration:none; |
| + | color:#888; |
| + | } |
| + | ul.accordion li .description a:hover{ |
| + | color:#333; |
| + | text-decoration:underline; |
| + | } |
| + | |
| + | ul.accordion li .bgDescription{ |
| + | background:transparent url(https://static.igem.org/mediawiki/igem.org/1/15/BgDescription.png) repeat-x top left; |
| + | height:340px; |
| + | position:absolute; |
| + | bottom:0px; |
| + | left:0px; |
| + | width:100%; |
| + | display:none; |
| + | } |
| + | |
| + | </style> |
| </head> | | </head> |
| <body class="blog developer-wanted"> | | <body class="blog developer-wanted"> |
Line 94: |
Line 225: |
| | | |
| <br/><br/> | | <br/><br/> |
| + | <div id="content" style="height: 600px"> |
| + | <div class="title"></div> |
| + | <div class="reference"> |
| + | <p><h2>Genovo</h2></p> |
| + | <p>Genovo is a Computer-Aided Design (CAD) tool used for denovo design of genome. The current version consists of 4 parts. |
| + | The first, Chromosome Construction will grap genes in a common pathway and chromosome features to build a new genome and let user to define the order and orientation in drap-drop way. The second, Nucleotide Modification will optimize and soften the sequence of CDSs. It also help design the CRIPSR sites so that we can silence the wild type genes. The third, Chromosome Segmentation will cut chromosome into pieces and add 3A & Gibson & Goldengate & Homologous Recombination adaptors to the pieces automatically for assembly. The last one, OLS Design will guide users to gain the chromosome by microarray. |
| + | Genovo will enable user to design their innovative chromosome as their wishes and further the research on genome on pathway level.</p> |
| + | </div> |
| | | |
| + | <ul class="accordion" id="accordion"> |
| + | <li class="bg1"> |
| + | <div class="heading">plug-in 1</div> |
| + | <div class="bgDescription"></div> |
| + | <div class="description"> |
| + | <h2>Guler</h2> |
| + | <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, |
| + | sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. |
| + | Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi |
| + | ut aliquip ex ea commodo consequat. Duis aute irure dolor in |
| + | reprehenderit in voluptate velit esse cillum dolore eu fugiat |
| + | nulla pariatur.</p> |
| + | <a href="#">more →</a> |
| + | </div> |
| + | </li> |
| + | <li class="bg2"> |
| + | <div class="heading">Phillips</div> |
| + | <div class="bgDescription"></div> |
| + | <div class="description"> |
| + | <h2>Phillips</h2> |
| + | <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem |
| + | accusantium doloremque laudantium, totam rem aperiam, eaque ipsa |
| + | quae ab illo inventore veritatis et quasi architecto beatae vitae |
| + | dicta sunt explicabo. </p> |
| + | <a href="#">more →</a> |
| + | </div> |
| + | |
| + | </li> |
| + | <li class="bg3"> |
| + | <div class="heading">Diamanti</div> |
| + | <div class="bgDescription"></div> |
| + | <div class="description"> |
| + | <h2>Diamanti</h2> |
| + | <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, |
| + | sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. |
| + | Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi |
| + | ut aliquip ex ea commodo consequat. Duis aute irure dolor in |
| + | reprehenderit in voluptate velit esse cillum dolore eu fugiat |
| + | nulla pariatur.</p> |
| + | <a href="#">more →</a> |
| + | </div> |
| + | |
| + | </li> |
| + | <li class="bg4 bleft"> |
| + | <div class="heading">Meiklejohn</div> |
| + | <div class="bgDescription"></div> |
| + | <div class="description"> |
| + | <h2>Meiklejohn</h2> |
| + | <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem |
| + | accusantium doloremque laudantium, totam rem aperiam, eaque ipsa |
| + | quae ab illo inventore veritatis et quasi architecto beatae vitae |
| + | dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas |
| + | sit aspernatur aut odit aut fugit, sed quia consequuntur magni |
| + | dolores eos qui ratione voluptatem sequi nesciunt.</p> |
| + | <a href="#">more →</a> |
| + | </div> |
| + | |
| + | </li> |
| + | </ul> |
| + | </div> |
| + | |
| + | <!-- The JavaScript --> |
| + | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> |
| + | <script type="text/javascript"> |
| + | $(function() { |
| + | $('#accordion > li').hover( |
| + | function () { |
| + | var $this = $(this); |
| + | $this.stop().animate({'width':'480px'},500); |
| + | $('.heading',$this).stop(true,true).fadeOut(); |
| + | $('.bgDescription',$this).stop(true,true).slideDown(500); |
| + | $('.description',$this).stop(true,true).fadeIn(); |
| + | }, |
| + | function () { |
| + | var $this = $(this); |
| + | $this.stop().animate({'width':'115px'},1000); |
| + | $('.heading',$this).stop(true,true).fadeIn(); |
| + | $('.description',$this).stop(true,true).fadeOut(500); |
| + | $('.bgDescription',$this).stop(true,true).slideUp(700); |
| + | } |
| + | ); |
| + | }); |
| + | </script> |
| <section id="blog" class="container"> | | <section id="blog" class="container"> |
| | | |
Line 113: |
Line 335: |
| | | |
| </article> | | </article> |
- | <article class="clearfix"> | + | |
- | <div id="post-1815" class="post-1815 post type-post status-publish format-standard hentry category-evolution">
| + | |
- | <a href="" class="image"><img width="1000" height="315" src="https://static.igem.org/mediawiki/igem.org/e/ec/Segmentation_principle_general.jpg" class="attachment-blog-thumb wp-post-image" alt="" /> </a>
| + | |
- | <div class="text">
| + | |
- | <h2>TEST</h2><hr/>
| + | |
- | <p>test test test test test test test test test test test test test test </p><p>test test test test test test test test test test test test test test </p><p>test test test test test test test test test test test test test test </p><p>test test test test test test test test test test test test test test </p><p>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </p>
| + | |
- | </div></div>
| + | |
- | </article>
| + | |
| | | |
| </section> | | </section> |
Line 145: |
Line 360: |
| </footer> | | </footer> |
| | | |
- | <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
| + | |
| <script src="http://www.humaan.com.au/wp-content/themes/humaan/js/scripts.min.js" type="text/javascript"></script> | | <script src="http://www.humaan.com.au/wp-content/themes/humaan/js/scripts.min.js" type="text/javascript"></script> |
| | | |