Team:HokkaidoU Japan
From 2011.igem.org
(Difference between revisions)
Line 5: | Line 5: | ||
<html> | <html> | ||
<script type="text/javascript"> | <script type="text/javascript"> | ||
- | $ | + | $(function(){ |
- | + | $('#lofslidecontent45').lofJSidernews({ | |
- | + | interval : 4000, | |
- | + | easing : 'easeInOutQuad', | |
- | + | duration : 1200, | |
- | + | auto : false, | |
- | + | maxItemDisplay : 3, | |
- | + | startItem : 1, | |
- | + | navPosition : 'horizontal', | |
- | + | navigatorHeight : 15, | |
- | + | navigatorWidth : 25, | |
- | + | mainWidth : 900 | |
- | + | }); | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
}); | }); | ||
</script> | </script> | ||
<style> | <style> | ||
- | + | .lof-slidecontent, .lof-slidecontent a { | |
- | + | color:#FFF; | |
- | + | } | |
- | + | .lof-slidecontent a.readmore{ | |
- | + | color:#58B1EA; | |
- | + | font-size:95%; | |
- | + | ||
- | + | } | |
- | + | .lof-slidecontent{ | |
- | + | position:relative; | |
- | + | overflow:hidden; | |
- | + | border:#F4F4F4 solid 1px; | |
- | + | } | |
- | + | .lof-slidecontent .preload{ | |
- | + | height:100%; | |
- | + | width:100%; | |
- | + | position:absolute; | |
- | + | top:0; | |
- | + | left:0; | |
- | + | z-index:100000; | |
- | + | text-align:center; | |
- | + | background:#FFF | |
- | + | } | |
- | + | .lof-slidecontent .preload div{ | |
- | + | height:100%; | |
- | + | width:100%; | |
- | + | background:transparent url(../images/load-indicator.gif) no-repeat scroll 50% 50%; | |
- | + | } | |
- | + | .lof-main-outer{ | |
- | + | position:relative; | |
- | + | height:100%; | |
- | + | width:900px; | |
- | + | z-index:3px; | |
- | + | overflow:hidden; | |
- | + | } | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | + | /*******************************************************/ | |
- | + | .lof-main-item-desc{ | |
- | + | z-index:100px; | |
- | + | position:absolute; | |
- | + | bottom:50px; | |
- | + | left:0px; | |
- | + | width:350px; | |
- | + | background:url(../images/bg_trans.png); | |
- | + | height:100px; | |
- | + | /* filter:0.7(opacity:60) */ | |
- | + | padding:10px; | |
- | + | } | |
- | + | .lof-main-item-desc p{ | |
- | + | margin:0 8px; | |
- | + | padding:8px 0 | |
- | + | } | |
+ | .lof-main-item-desc h3{ | ||
+ | padding:0; | ||
+ | margin:0 | ||
+ | } | ||
+ | .lof-main-item-desc h2{ | ||
+ | padding:0; | ||
+ | margin:15px 0 0 0px; | ||
+ | } | ||
+ | .lof-main-item-desc h3 a{ | ||
+ | margin:0; | ||
+ | background:#C01F25; | ||
+ | font-size:75%; | ||
+ | padding:2px 3px; | ||
+ | font-family:"Trebuchet MS",Trebuchet,Arial,Verdana,sans-serif; | ||
+ | text-transform:uppercase; | ||
+ | text-decoration:none | ||
+ | } | ||
+ | .lof-main-item-desc h3 a:hover{ | ||
- | + | text-decoration:underline; | |
- | + | } | |
- | + | .lof-main-item-desc h3 i { | |
- | + | font-size:70%; | |
- | + | } | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | /* main flash */ | |
+ | ul.lof-main-wapper{ | ||
+ | /* margin-right:auto; */ | ||
+ | overflow:hidden; | ||
+ | background:transparent url(../images/load-indicator.gif) no-repeat scroll 50% 50%; | ||
+ | padding:0px; | ||
+ | margin:0; | ||
+ | position:absolute; | ||
+ | overflow:hidden; | ||
+ | } | ||
- | + | ul.lof-main-wapper li{ | |
- | + | overflow:hidden; | |
- | + | padding:0px; | |
- | + | margin:0px; | |
- | + | float:left; | |
- | + | position:relative; | |
- | + | } | |
- | + | .lof-opacity { | |
- | + | overflow:visible !important;; | |
- | + | position:absolute !important; | |
- | + | } | |
- | + | .lof-opacity li{ | |
- | + | position:absolute !important;; | |
+ | top:0; | ||
+ | left:0; | ||
+ | float:inherit !important; | ||
+ | } | ||
+ | ul.lof-main-wapper li img{ | ||
+ | padding:0px; | ||
+ | } | ||
- | + | /* item navigator */ | |
- | + | .lof-navigator-wapper { | |
- | + | position:absolute; | |
- | + | bottom:10px; | |
- | + | right:10px; | |
- | + | background:#000; | |
- | + | padding:5px 15px; | |
- | + | -moz-border-radius:5px 5px 5px 5px; | |
- | + | ||
- | + | } | |
- | + | .lof-navigator-outer{ | |
- | + | position:relative; | |
- | + | z-index:100; | |
+ | height:180px; | ||
+ | width:310px; | ||
+ | overflow:hidden; | ||
+ | color:#FFF; | ||
+ | float:left | ||
+ | } | ||
+ | ul.lof-navigator{ | ||
+ | top:0; | ||
+ | padding:0; | ||
+ | margin:0; | ||
+ | position:absolute; | ||
+ | width:100%; | ||
+ | } | ||
+ | ul.lof-navigator li{ | ||
+ | cursor:hand; | ||
+ | cursor:pointer; | ||
+ | list-style:none; | ||
+ | padding:0; | ||
+ | margin-left:0px; | ||
+ | overflow:hidden; | ||
+ | float:left; | ||
+ | display:block; | ||
+ | text-align:center; | ||
+ | |||
+ | } | ||
+ | ul.lof-navigator li.active , ul.lof-navigator li:hover { | ||
+ | background:#FFF; | ||
+ | color:#000; | ||
+ | display:block; | ||
+ | } | ||
</style> | </style> | ||
- | <div id="lofslidecontent45" class="lof-slidecontent" style="width: | + | <div id="lofslidecontent45" class="lof-slidecontent" style="width:900px; height:340px;"> |
<div class="preload"><div></div></div> | <div class="preload"><div></div></div> | ||
- | <div class="lof-main-outer" style="width: | + | <div class="lof-main-outer" style="width:900px; height:340px;"> |
- | + | <ul class="lof-main-wapper"> | |
- | + | <li> | |
- | + | <img src="images/thumbl_980x340.png" title="Newsflash 2" > | |
<div class="lof-main-item-desc"> | <div class="lof-main-item-desc"> | ||
<h3><a target="_parent" title="Newsflash 1" href="#Category-1">/ Newsflash 1 /</a> <i> — Monday, February 15, 2010 12:42</i></h3> | <h3><a target="_parent" title="Newsflash 1" href="#Category-1">/ Newsflash 1 /</a> <i> — Monday, February 15, 2010 12:42</i></h3> | ||
- | + | <h2>Content of Newsflash 1</h2> | |
<p>The one thing about a Web site, it always changes! Joomla! makes it easy to add Articles, content,... | <p>The one thing about a Web site, it always changes! Joomla! makes it easy to add Articles, content,... | ||
<a class="readmore" href="#">Read more </a> | <a class="readmore" href="#">Read more </a> | ||
Line 213: | Line 190: | ||
</li> | </li> | ||
<li> | <li> | ||
- | + | <img src="images/thumbl_980x340_002.png" title="Newsflash 1" > | |
- | + | <div class="lof-main-item-desc"> | |
- | <h3><a target="_parent" title="Newsflash 2" href="#Category-2">/ Newsflash 2 /</a> | + | <h3><a target="_parent" title="Newsflash 2" href="#Category-2">/ Newsflash 2 /</a> <i> — Monday, February 15, 2010 12:42</i></h3> |
<h2>Content of Newsflash 2</h2> | <h2>Content of Newsflash 2</h2> | ||
<p>Joomla! makes it easy to launch a Web site of any kind. Whether you want a brochure site or you are... | <p>Joomla! makes it easy to launch a Web site of any kind. Whether you want a brochure site or you are... | ||
Line 223: | Line 200: | ||
</li> | </li> | ||
<li> | <li> | ||
- | + | <img src="images/thumbl_980x340_003.png" title="Newsflash 3" > | |
- | + | <div class="lof-main-item-desc"> | |
- | <h3><a target="_parent" title="Newsflash 3" href="#Category-3">/ Newsflash 3 /</a> | + | <h3><a target="_parent" title="Newsflash 3" href="#Category-3">/ Newsflash 3 /</a> <i> — Monday, February 15, 2010 12:42</i></h3> |
<h2>Content of Newsflash 3</h2> | <h2>Content of Newsflash 3</h2> | ||
<p>With a library of thousands of free Extensions, you can add what you need as your site grows. Don't... | <p>With a library of thousands of free Extensions, you can add what you need as your site grows. Don't... | ||
Line 234: | Line 211: | ||
<li> | <li> | ||
- | + | <img src="images/thumbl_980x340_004.png" title="Newsflash 5" > | |
- | + | <div class="lof-main-item-desc"> | |
- | <h3><a target="_parent" title="Newsflash 4" href="#Category-4">/ Newsflash 4 /</a> | + | <h3><a target="_parent" title="Newsflash 4" href="#Category-4">/ Newsflash 4 /</a> <i> — Monday, February 15, 2010 12:42</i></h3> |
<h2>Content of Newsflash 4</h2> | <h2>Content of Newsflash 4</h2> | ||
<p>Joomla! 1.5 - 'Experience the Freedom'!. It has never been easier to create your own dynamic Web... | <p>Joomla! 1.5 - 'Experience the Freedom'!. It has never been easier to create your own dynamic Web... | ||
Line 246: | Line 223: | ||
<li> | <li> | ||
- | + | <img src="images/thumbl_980x340_005.png" title="Newsflash 5" > | |
- | + | <div class="lof-main-item-desc"> | |
- | <h3><a target="_parent" title="Newsflash 5" href="#">/ Newsflash 5 /</a> | + | <h3><a target="_parent" title="Newsflash 5" href="#">/ Newsflash 5 /</a> <i> — Monday, February 15, 2010 12:42</i></h3> |
<h2>Content of Newsflash 5</h2> | <h2>Content of Newsflash 5</h2> | ||
<p>Joomla! 1.5 - 'Experience the Freedom'!. It has never been easier to create your own dynamic Web... | <p>Joomla! 1.5 - 'Experience the Freedom'!. It has never been easier to create your own dynamic Web... | ||
Line 257: | Line 234: | ||
<li> | <li> | ||
- | + | <img src="images/thumbl_980x340_006.png" title="Newsflash 5" > | |
- | + | <div class="lof-main-item-desc"> | |
- | <h3><a target="_parent" title="Newsflash 6" href="#">/ Newsflash 6 /</a> | + | <h3><a target="_parent" title="Newsflash 6" href="#">/ Newsflash 6 /</a> <i> — Monday, February 15, 2010 12:42</i></h3> |
<h2>Content of Newsflash 6</h2> | <h2>Content of Newsflash 6</h2> | ||
<p>Joomla! 1.5 - 'Experience the Freedom'!. It has never been easier to create your own dynamic Web... | <p>Joomla! 1.5 - 'Experience the Freedom'!. It has never been easier to create your own dynamic Web... | ||
Line 267: | Line 244: | ||
</li> | </li> | ||
<li> | <li> | ||
- | + | <img src="images/thumbl_980x340_007.png" title="Newsflash 5" > | |
- | + | <div class="lof-main-item-desc"> | |
- | <h3><a target="_parent" title="Newsflash 7" href="#">/ Newsflash 7 /</a> | + | <h3><a target="_parent" title="Newsflash 7" href="#">/ Newsflash 7 /</a> <i> — Monday, February 15, 2010 12:42</i></h3> |
<h2>Content of Newsflash 7</h2> | <h2>Content of Newsflash 7</h2> | ||
<p>Joomla! 1.5 - 'Experience the Freedom'!. It has never been easier to create your own dynamic Web... | <p>Joomla! 1.5 - 'Experience the Freedom'!. It has never been easier to create your own dynamic Web... | ||
Line 277: | Line 254: | ||
</li> | </li> | ||
<li> | <li> | ||
- | + | <img src="images/thumbl_980x340_008.png" title="Newsflash 8" > | |
- | + | <div class="lof-main-item-desc"> | |
- | <h3><a target="_parent" title="Newsflash 8" href="#">/ Newsflash 8 /</a> | + | <h3><a target="_parent" title="Newsflash 8" href="#">/ Newsflash 8 /</a> <i> — Monday, February 15, 2010 12:42</i></h3> |
<h2>Content of Newsflash 8</h2> | <h2>Content of Newsflash 8</h2> | ||
<p>Joomla! 1.5 - 'Experience the Freedom'!. It has never been easier to create your own dynamic Web... | <p>Joomla! 1.5 - 'Experience the Freedom'!. It has never been easier to create your own dynamic Web... | ||
- | + | <a class="readmore" href="#">Read more </a> | |
</p> | </p> | ||
</div> | </div> | ||
</li> | </li> | ||
- | </ul> | + | </ul> |
</div> | </div> | ||
<div class="lof-navigator-wapper"> | <div class="lof-navigator-wapper"> | ||
- | |||
- | |||
<div class="lof-navigator-outer"> | <div class="lof-navigator-outer"> | ||
<ul class="lof-navigator"> | <ul class="lof-navigator"> | ||
- | <li>< | + | <li><span>1</span></li> |
- | <li>< | + | <li><span>2</span></li> |
- | <li>< | + | <li><span>3</span></li> |
- | <li>< | + | <li><span>4</span></li> |
- | <li>< | + | <li><span>5</span></li> |
- | <li>< | + | <li><span>6</span></li> |
- | <li>< | + | <li><span>7</span></li> |
- | <li>< | + | <li><span>8</span></li> |
</ul> | </ul> | ||
</div> | </div> | ||
- | + | </div> | |
- | </div> | + | </div> |
- | + | ||
+ | |||
</html> | </html> | ||
Revision as of 04:58, 5 October 2011
HokkaidoU Japan
iGEM 2011 Team of Hokkaido University