Team:HokkaidoU Japan

From 2011.igem.org

(Difference between revisions)
Line 5: Line 5:
<html>
<html>
     <script type="text/javascript">
     <script type="text/javascript">
-
      $(document).ready( function(){
+
    $(document).ready( function(){  
-
          $('#lofslidecontent45').lofJSidernews({  
+
      $('#lofslidecontent45').lofJSidernews({  
-
            interval:5000,
+
        interval : 4000,
-
            easing:'easeInOutQuad',
+
        direction      : 'opacitys',   
-
            duration:1200,
+
        easing         : 'easeInOutExpo',
-
            auto:true
+
        duration       : 1200,
-
          });
+
        auto           : false,
 +
        maxItemDisplay  : 4,
 +
        navPosition    : 'horizontal',
 +
        navigatorHeight : 32,
 +
        navigatorWidth  : 80,
 +
        mainWidth      : 980,
 +
        buttons        : {
 +
            previous    : $('#lofslidecontent45 .lof-previous') ,
 +
            next        : $('#lofslidecontent45 .lof-next')
 +
        }
       });
       });
 +
    });
     </script>
     </script>
     <style>
     <style>
-
       ul.lof-main-wapper li {
+
       @charset "utf-8";
 +
      .lof-slidecontent, .lof-slidecontent a {
 +
        color:#FFF; 
 +
      }
 +
      .lof-slidecontent a.readmore{
 +
        color:#58B1EA;
 +
        font-size:95%; 
 +
      }
 +
      .lof-slidecontent{
         position:relative;
         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: -moz-linear-gradient(top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%);
 +
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0)));
 +
        background: -webkit-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);
 +
        background: -o-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);
 +
        background: -ms-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);
 +
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 );
 +
        background: linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);
 +
        height:100px;
 +
        opacity:0.7;
 +
        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%;
       }
       }
-
    </style>
 
-
    <div id="lofslidecontent45" class="lof-slidecontent">
 
-
        <div class="preload"><div></div></div>
 
-
        <div class="lof-main-outer">
 
-
          <ul class="lof-main-wapper">
 
-
            <li>
 
-
            <img src="images/791902news3.jpg" title="Sample 2" height="300" width="900">         
 
-
            <div class="lof-main-item-desc">
 
-
              <h3><a target="_parent" title="Sample 2" href="#">Sample 2</a></h3>
 
-
              <p>The one thing about a Web site, it always changes! Joomla! makes it easy to add Articles, content,...</p>
+
      /* main flash */
-
            </div>
+
      ul.lof-main-wapper{
-
            </li>
+
        /* margin-right:auto; */
-
            <li>
+
        overflow:hidden;
-
            <img src="images/435576news10.jpg" title="Sample 1" height="300" width="900">            <div class="lof-main-item-desc">
+
        background:transparent url(../images/load-indicator.gif) no-repeat scroll 50% 50%;
-
              <h3><a target="_parent" title="Sample 1" href="#">Sample 1</a></h3>
+
        padding:0px;
-
              <p>Joomla! makes it easy to launch a Web site of any kind. Whether you want a brochure site or you are...</p>
+
        margin:0;
 +
        position:absolute;
 +
        overflow:hidden;
 +
      }
-
            </div>
+
      ul.lof-main-wapper li{
-
            </li>
+
        overflow:hidden;
-
            <li>
+
        padding:0px;
-
            <img src="images/641906img1.jpg" title="Sample 3" height="300" width="900">            <div class="lof-main-item-desc">
+
        margin:0px;
-
              <h3><a target="_parent" title="Sample 3" href="#">Sample 3</a></h3>
+
        float:left;
-
              <p>With a library of thousands of free Extensions, you can add what you need as your site grows. Don't...</p>
+
        position:relative;
-
            </div>
+
      }
-
            </li>
+
      .lof-opacity  li{
-
            <li>
+
        position:absolute;
 +
        top:0;
 +
        left:0;
 +
        float:inherit;
 +
      }
 +
      ul.lof-main-wapper li img{
 +
        padding:0px; 
 +
      }
-
            <img src="images/416719news7.jpg" title="Sample 5" height="300" width="900">            <div class="lof-main-item-desc">
+
      /* item navigator */
-
              <h3><a target="_parent" title="Sample 5" href="#">Sample 5</a></h3>
+
      .lof-navigator-wapper {
-
              <p>Joomla! 1.5 - 'Experience the Freedom'!. It has never been easier to create your own dynamic Web...</p>
+
        position:absolute;
-
            </div>
+
        bottom:10px;
-
            </li>
+
        right:10px;
 +
        background:url(../images/transparent_bg.png) repeat;
 +
        padding:5px 0px;
 +
      }
 +
      .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;
-
            <li>
+
        text-align:center;
-
            <img src="images/416719news7.jpg" title="Sample 5" height="300" width="900">            <div class="lof-main-item-desc">
+
      }
-
              <h3><a target="_parent" title="Sample 5" href="#">Sample 5</a></h3>
+
      ul.lof-navigator li img{
-
              <p>Joomla! 1.5 - 'Experience the Freedom'!. It has never been easier to create your own dynamic Web...</p>
+
        border:#666 solid 3px; 
-
            </div>
+
      }
-
            </li>
+
      ul.lof-navigator li.active img, ul.lof-navigator li:hover img {
-
            <li>
+
        border:#A8A8A8 solid 3px;
 +
      }
 +
      .lof-navigator-wapper .lof-next,  .lof-navigator-wapper .lof-previous{
 +
        display:block;
 +
        width:22px;
 +
        height:30px;
 +
        color:#FFF;
 +
        cursor:pointer;
-
            <img src="images/416719news7.jpg" title="Sample 5" height="300" width="900">           <div class="lof-main-item-desc">
+
      }
-
              <h3><a target="_parent" title="Sample 5" href="#">Sample 5</a></h3>
+
      .lof-navigator-wapper .lof-next {
-
              <p>Joomla! 1.5 - 'Experience the Freedom'!. It has never been easier to create your own dynamic Web...</p>
+
        float:left; 
-
            </div>
+
        text-indent:-999px;
-
            </li>  
+
        margin-right:5px;
-
          </ul>
+
        background:url(../images/arrow-l.png) no-repeat right center;
-
        </div>
+
      }
 +
      .lof-navigator-wapper .lof-previous {
 +
        float:left; 
 +
        text-indent:-999px;
 +
        margin-left:5px;
 +
        background:url(../images/arrow-r.png) no-repeat left center;
 +
      }
 +
    </style>
 +
<div id="lofslidecontent45" class="lof-slidecontent" style="width:980px; height:340px;">
 +
<div class="preload"><div></div></div>
 +
  <div class="lof-main-outer" style="width:980px; height:340px;">
 +
      <ul class="lof-main-wapper">
 +
          <li>
 +
                <img src="images/thumbl_980x340.png" title="Newsflash 2" >         
 +
                <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>
 +
                <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,...
 +
                <a class="readmore" href="#">Read more </a>
 +
                </p>
 +
            </div>
 +
        </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>    <i> — Monday, February 15, 2010 12:42</i></h3>
 +
                <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...
 +
                <a class="readmore" href="#">Read more </a>
 +
                </p>
 +
            </div>
 +
        </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>    <i> — Monday, February 15, 2010 12:42</i></h3>
 +
                <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...
 +
                <a class="readmore" href="#">Read more </a>
 +
                </p>
 +
            </div>
 +
        </li>
 +
        <li>
-
        <div class="lof-navigator-outer">
+
            <img src="images/thumbl_980x340_004.png" title="Newsflash 5" >          
-
          <ul class="lof-navigator">
+
              <div class="lof-main-item-desc">
-
            <li>
+
                <h3><a target="_parent" title="Newsflash 4" href="#Category-4">/ Newsflash 4 /</a>   <i> — Monday, February 15, 2010 12:42</i></h3>
-
            <div>
+
                <h2>Content of Newsflash 4</h2>
-
              <img src="images/lofthumbs/791902news3.jpg" />
+
                <p>Joomla! 1.5 - 'Experience the Freedom'!. It has never been easier to create your own dynamic Web...
-
              <h3> Sample 1 </h3>
+
                <a class="readmore" href="#">Read more </a>
-
              <span>20.01.2010</span> - In id, mauris viverra asperiores, bibendum in id. Eu molestie. Ac sit eu...
+
                </p>
-
            </div>  
+
            </div>
-
            </li>
+
        </li>  
-
            <li>
+
       
-
            <div>
+
        <li>
-
              <img src="images/lofthumbs/435576news10.jpg" />
+
-
              <h3> Sample 2 </h3>
+
-
              <span>20.01.2010</span> -In id, mauris viverra asperiores, bibendum in id. Eu molestie. Ac sit eu. ..
+
-
            </div>  
+
-
            </li>
+
-
            <li>
+
            <img src="images/thumbl_980x340_005.png" title="Newsflash 5" >          
-
            <div>
+
              <div class="lof-main-item-desc">
-
              <img src="images/lofthumbs/641906img1.jpg" />
+
                <h3><a target="_parent" title="Newsflash 5" href="#">/ Newsflash 5 /</a>   <i> — Monday, February 15, 2010 12:42</i></h3>
-
              <h3> Sample 3 </h3>
+
              <h2>Content of Newsflash 5</h2>
-
              <span>20.01.2010</span> - In id, mauris viverra asperiores, bibendum in id. Eu molestie. Ac sit eu. ..
+
                <p>Joomla! 1.5 - 'Experience the Freedom'!. It has never been easier to create your own dynamic Web...
-
            </div>    
+
                <a class="readmore" href="#">Read more </a>
-
            </li>
+
                </p>
 +
            </div>
 +
        </li>
 +
        <li>
-
            <li>
+
            <img src="images/thumbl_980x340_006.png" title="Newsflash 5" >          
-
            <div>
+
              <div class="lof-main-item-desc">
-
              <img src="images/lofthumbs/416719news7.jpg" />
+
                <h3><a target="_parent" title="Newsflash 6" href="#">/ Newsflash 6 /</a>    <i> — Monday, February 15, 2010 12:42</i></h3>
-
               <h3> Sample 4</h3>
+
                <h2>Content of Newsflash 6</h2>
-
              <span>20.01.2010</span> - In id, mauris viverra asperiores, bibendum in id. Eu molestie. Ac sit eu. ..
+
                <p>Joomla! 1.5 - 'Experience the Freedom'!. It has never been easier to create your own dynamic Web...
-
            </div>
+
                <a class="readmore" href="#">Read more </a>
-
            </li>  
+
                </p>
-
            <li>
+
            </div>
-
            <div>
+
        </li>
-
              <img src="images/lofthumbs/641906img1.jpg" />
+
        <li>
-
               <h3> Sample 5</h3>
+
            <img src="images/thumbl_980x340_007.png" title="Newsflash 5" >          
-
              <span>20.01.2010</span> -In id, mauris viverra asperiores, bibendum in id. Eu molestie. Ac sit eu. ..
+
               <div class="lof-main-item-desc">
-
            </div>  
+
                <h3><a target="_parent" title="Newsflash 7" href="#">/ Newsflash 7 /</a>    <i> — Monday, February 15, 2010 12:42</i></h3>
-
            </li>
+
                <h2>Content of Newsflash 7</h2>
-
            <li>
+
                <p>Joomla! 1.5 - 'Experience the Freedom'!. It has never been easier to create your own dynamic Web...
-
            <div>
+
                <a class="readmore" href="#">Read more </a>
-
              <img src="images/lofthumbs/416719news7.jpg" />
+
                </p>
-
              <h3> Sample 6</h3>
+
            </div>
-
              <span>20.01.2010</span> - In id, mauris viverra asperiores, bibendum in id. Eu molestie. Ac sit eu. ..
+
        </li>  
-
            </div>
+
          <li>
-
            </li>
+
            <img src="images/thumbl_980x340_008.png" title="Newsflash 8" >          
-
          </ul>
+
               <div class="lof-main-item-desc">
-
         </div>
+
                <h3><a target="_parent" title="Newsflash 8" href="#">/ Newsflash 8 /</a>    <i> — Monday, February 15, 2010 12:42</i></h3>
-
    </div>  
+
                <h2>Content of Newsflash 8</h2>
 +
                <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>
 +
            </div>
 +
        </li>  
 +
      </ul>    
 +
  </div>
 +
<div class="lof-navigator-wapper">
 +
 
 +
        <div onclick="return false" href="" class="lof-next">Next</div>
 +
      <div class="lof-navigator-outer">
 +
            <ul class="lof-navigator">
 +
              <li><img src="images/thumbs/thumbl_980x340.png" /></li>
 +
              <li><img src="images/thumbs/thumbl_980x340_002.png" /></li>
 +
              <li><img src="images/thumbs/thumbl_980x340_003.png" /></li>
 +
              <li><img src="images/thumbs/thumbl_980x340_004.png" /></li>  
 +
              <li><img src="images/thumbs/thumbl_980x340_005.png" /></li>
 +
              <li><img src="images/thumbs/thumbl_980x340_006.png" /></li>     
 +
              <li><img src="images/thumbs/thumbl_980x340_007.png" /></li>     
 +
              <li><img src="images/thumbs/thumbl_980x340_008.png" /></li>              
 +
            </ul>
 +
      </div>
 +
         <div onclick="return false" href="" class="lof-previous">Previous</div>
 +
</div>  
 +
</div>  
</html>
</html>
== トップページ建設予定地 ==
== トップページ建設予定地 ==
今日から本気出す
今日から本気出す
 +
 +
デザインは後でやる
{{Team:HokkaidoU_Japan/footer}}
{{Team:HokkaidoU_Japan/footer}}

Revision as of 23:14, 4 October 2011

Contents


  • / Newsflash 1 / — Monday, February 15, 2010 12:42

    Content of Newsflash 1

    The one thing about a Web site, it always changes! Joomla! makes it easy to add Articles, content,... Read more

  • / Newsflash 2 / — Monday, February 15, 2010 12:42

    Content of Newsflash 2

    Joomla! makes it easy to launch a Web site of any kind. Whether you want a brochure site or you are... Read more

  • / Newsflash 3 / — Monday, February 15, 2010 12:42

    Content of Newsflash 3

    With a library of thousands of free Extensions, you can add what you need as your site grows. Don't... Read more

  • / Newsflash 4 / — Monday, February 15, 2010 12:42

    Content of Newsflash 4

    Joomla! 1.5 - 'Experience the Freedom'!. It has never been easier to create your own dynamic Web... Read more

  • / Newsflash 5 / — Monday, February 15, 2010 12:42

    Content of Newsflash 5

    Joomla! 1.5 - 'Experience the Freedom'!. It has never been easier to create your own dynamic Web... Read more

  • / Newsflash 6 / — Monday, February 15, 2010 12:42

    Content of Newsflash 6

    Joomla! 1.5 - 'Experience the Freedom'!. It has never been easier to create your own dynamic Web... Read more

  • / Newsflash 7 / — Monday, February 15, 2010 12:42

    Content of Newsflash 7

    Joomla! 1.5 - 'Experience the Freedom'!. It has never been easier to create your own dynamic Web... Read more

  • / Newsflash 8 / — Monday, February 15, 2010 12:42

    Content of Newsflash 8

    Joomla! 1.5 - 'Experience the Freedom'!. It has never been easier to create your own dynamic Web... Read more

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

  • / Newsflash 1 / — Monday, February 15, 2010 12:42

    Content of Newsflash 1

    The one thing about a Web site, it always changes! Joomla! makes it easy to add Articles, content,... Read more

  • / Newsflash 2 / — Monday, February 15, 2010 12:42

    Content of Newsflash 2

    Joomla! makes it easy to launch a Web site of any kind. Whether you want a brochure site or you are... Read more

  • / Newsflash 3 / — Monday, February 15, 2010 12:42

    Content of Newsflash 3

    With a library of thousands of free Extensions, you can add what you need as your site grows. Don't... Read more

  • / Newsflash 4 / — Monday, February 15, 2010 12:42

    Content of Newsflash 4

    Joomla! 1.5 - 'Experience the Freedom'!. It has never been easier to create your own dynamic Web... Read more

  • / Newsflash 5 / — Monday, February 15, 2010 12:42

    Content of Newsflash 5

    Joomla! 1.5 - 'Experience the Freedom'!. It has never been easier to create your own dynamic Web... Read more

  • / Newsflash 6 / — Monday, February 15, 2010 12:42

    Content of Newsflash 6

    Joomla! 1.5 - 'Experience the Freedom'!. It has never been easier to create your own dynamic Web... Read more

  • / Newsflash 7 / — Monday, February 15, 2010 12:42

    Content of Newsflash 7

    Joomla! 1.5 - 'Experience the Freedom'!. It has never been easier to create your own dynamic Web... Read more

  • / Newsflash 8 / — Monday, February 15, 2010 12:42

    Content of Newsflash 8

    Joomla! 1.5 - 'Experience the Freedom'!. It has never been easier to create your own dynamic Web... Read more

Next
Previous

トップページ建設予定地

今日から本気出す

デザインは後でやる


Retrieved from "http://2011.igem.org/Team:HokkaidoU_Japan"