陳沛鴻 Home1 templatemo 378 dragonfly index2

From 2014hs.igem.org

(Difference between revisions)
Line 1: Line 1:
-
 
+
/*
-
<html>
+
* jQuery Nivo Slider v2.4
-
<head>
+
* http://nivo.dev7studios.com
-
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+
*
-
<title>Dragonfly, free website template</title>
+
* Copyright 2011, Gilbert Pellegrom
-
<meta name="keywords" content="dragonfly, free website templates, one page layout, jquery" />
+
* Free to use and abuse under the MIT license.
-
<meta name="description" content="Dragonfly is one-page layout using jQuery and it is free website template from templatemo.com" />
+
* http://www.opensource.org/licenses/mit-license.php
-
 
+
*
-
<link href="https://2014hs.igem.org/%E9%99%B3%E6%B2%9B%E9%B4%BB_Home1_templatemo_378_dragonfly_templatemo_style?action=raw&ctype=text/css" type="text/css" rel="stylesheet" />
+
* March 2010
-
<script type="text/javascript" src="https://2014hs.igem.org/%E9%99%B3%E6%B2%9B%E9%B4%BB_Home1_templatemo_378_dragonfly_jquery.min?action=raw&ctype=text/javascript"></script>
+
*/
-
<script type="text/javascript" src="https://2014hs.igem.org/%E9%99%B3%E6%B2%9B%E9%B4%BB_Home1_templatemo_378_dragonfly_jquery.scrollTo-min?action=raw&ctype=text/javascript"></script>
+
-
<script type="text/javascript" src="https://2014hs.igem.org/%E9%99%B3%E6%B2%9B%E9%B4%BB_Home1_templatemo_378_dragonfly_jquery.localscroll-min?action=raw&ctype=text/javascript"></script>
+
-
<script type="text/jasvascript" src="https://2014hs.igem.org/%E9%99%B3%E6%B2%9B%E9%B4%BB_Home1_templatemo_378_dragonfly_init?action=raw&ctype=text/javascript"></script>
+
/* The Nivo Slider styles */
-
   
+
.nivoSlider {
-
    <link rel="stylesheet" href="https://2014hs.igem.org/%E9%99%B3%E6%B2%9B%E9%B4%BB_Home1_templatemo_378_dragonfly_slimbox2_css?action=raw&ctype=text/css" type="text/css" media="screen" />
+
position:relative;
-
    <script type="text/JavaScript" src="https://2014hs.igem.org/%E9%99%B3%E6%B2%9B%E9%B4%BB_Home1_templatemo_378_dragonfly_slimbox2_js?action=raw&ctype=text/javascript"></script>
+
}
-
 
+
.nivoSlider img {
-
<link rel="stylesheet" href="https://2014hs.igem.org/%E9%99%B3%E6%B2%9B%E9%B4%BB_Home1_templatemo_378_dragonfly_orman?action=raw&ctype=text/css" type="text/css" media="screen" />
+
position:absolute;
-
<link rel="stylesheet" href="https://2014hs.igem.org/%E9%99%B3%E6%B2%9B%E9%B4%BB_Home1_templatemo_378_dragonfly_nivo-slider?action=raw&ctype=text/css" type="text/css" media="screen" />
+
top:0px;
-
 
+
left:0px;
-
 
+
}
-
</head>
+
/* If an image is wrapped in a link */
-
<body>
+
.nivoSlider a.nivo-imageLink {
-
<div id="templatemo_wrapper">
+
position:absolute;
-
<div id="templatemo_header">
+
top:0px;
-
    <div id="site_title"><a href="http://www.templatemo.com/preview/templatemo_378_dragonfly" rel="nofollow" target="_parent"></a></div>
+
left:0px;
-
    <ul class="nav_menu">
+
width:100%;
-
        <li><a href="#home">Home</a></li>
+
height:100%;
-
        <li><a href="#about">About</a></li>
+
border:0;
-
        <li><a href="#services">Services</a></li>
+
padding:0;
-
        <li><a href="#gallery">Portfolio</a></li>
+
margin:0;
-
        <li><a href="#contact">Contact</a></li>
+
z-index:60;
-
    </ul>
+
display:none;
-
    <div class="social_button">
+
}
-
    <a href="#"><img src="images/facebook.png" alt="Facebook" /></a>
+
/* The slices in the Slider */
-
<a href="#"><img src="images/flickr.png" alt="Flickr" /></a>
+
.nivo-slice {
-
<a href="#"><img src="images/twitter.png" alt="Twitter" /></a>
+
display:block;
-
        <div class="clear"></div>
+
position:absolute;
-
    </div>
+
z-index:50;
-
    <p>
+
height:100%;
-
    c 2072 Company Name<br />
+
}
-
    <a href="http://www.templatemo.com/preview/templatemo_378_dragonfly" rel="nofollow" target="_parent">Dragonfly</a> by<br />
+
/* Caption styles */
-
    <a href="http://www.templatemo.com" rel="nofollow" target="_parent">templatemo</a></p>
+
.nivo-caption {
-
   
+
position:absolute;
-
</div>
+
left:0px;
-
<div id="templatemo_main">
+
bottom:0px;
-
<div id="content">
+
background:#000;
-
      <div id="home" class="home_slider">
+
color:#fff;
-
            <div class="theme-orman">
+
opacity:0.8; /* Overridden by captionOpacity setting */
-
                <div id="slider" class="nivoSlider">
+
width:100%;
-
                    <img src="https://static.igem.org/mediawiki/2014hs/8/82/%E9%99%B3%E6%B2%9B%E9%B4%BB_Home1_templatemo_378_dragonfly_images_slider_01.jpg" alt="Dragonfly 1" rel="https://static.igem.org/mediawiki/2014hs/7/7e/%E9%99%B3%E6%B2%9B%E9%B4%BB_Home1_templatemo_378_dragonfly_images_slider_01_thumb.jpg" />
+
z-index:89;
-
                    <img src="https://static.igem.org/mediawiki/2014hs/b/b6/%E9%99%B3%E6%B2%9B%E9%B4%BB_Home1_templatemo_378_dragonfly_images_slider_02.jpg" alt="Dragonfly 2" rel="https://static.igem.org/mediawiki/2014hs/7/71/%E9%99%B3%E6%B2%9B%E9%B4%BB_Home1_templatemo_378_dragonfly_images_slider_02_thumb.jpg" />
+
}
-
                    <img src="https://static.igem.org/mediawiki/2014hs/1/13/%E9%99%B3%E6%B2%9B%E9%B4%BB_Home1_templatemo_378_dragonfly_images_slider_03.jpg" alt="Dragonfly 3" rel="https://static.igem.org/mediawiki/2014hs/4/41/%E9%99%B3%E6%B2%9B%E9%B4%BB_Home1_templatemo_378_dragonfly_images_slider_03_thumb.jpg" />
+
.nivo-caption p {
-
                    <img src="https://static.igem.org/mediawiki/2014hs/2/22/%E9%99%B3%E6%B2%9B%E9%B4%BB_Home1_templatemo_378_dragonfly_images_slider_04.jpg" alt="Dragonfly 4" rel="https://static.igem.org/mediawiki/2014hs/7/7d/%E9%99%B3%E6%B2%9B%E9%B4%BB_Home1_templatemo_378_dragonfly_images_slider_04_thumb.jpg" />
+
padding:5px;
-
                    <img src="https://static.igem.org/mediawiki/2014hs/f/fb/%E9%99%B3%E6%B2%9B%E9%B4%BB_Home1_templatemo_378_dragonfly_images_slider_05.jpg" alt="Dragonfly 5" rel="https://static.igem.org/mediawiki/2014hs/d/d9/%E9%99%B3%E6%B2%9B%E9%B4%BB_Home1_templatemo_378_dragonfly_images_slider_05_thumb.jpg" />
+
margin:0;
-
                </div>
+
}
-
            </div>
+
.nivo-caption a {
-
            <script type="text/javascript" src="https://2014hs.igem.org/%E9%99%B3%E6%B2%9B%E9%B4%BB_Home1_templatemo_378_dragonfly_jquery-1.6.1.min?action=raw&ctype=text/javascript"></script>
+
display:inline !important;
-
            <script type="text/javascript" src="https://2014hs.igem.org/%E9%99%B3%E6%B2%9B%E9%B4%BB_Home1_templatemo_378_dragonfly_jquery.nivo.slider.pack?action=raw&ctype=text/javascript"></script>
+
}
-
            <script type="text/javascript">
+
.nivo-html-caption {
-
            $(window).load(function() {
+
    display:none;
-
                $('#slider').nivoSlider({
+
}
-
                    controlNavThumbs:true,
+
/* Direction nav styles (e.g. Next & Prev) */
-
controlNavThumbsFromRel:true,
+
.nivo-directionNav a {
-
directionNav:false, // Next and Prev
+
position:absolute;
-
keyboardNav:true, // Use left and right arrows
+
top:45%;
-
pauseOnHover:true // Stop animation while hovering
+
z-index:99;
-
                });
+
cursor:pointer;
-
            });
+
}
-
            </script>
+
.nivo-prevNav {
-
      </div>
+
left:0px;
-
        <div class="section section_with_padding" id="about">
+
}
-
            <h1>About</h1>
+
.nivo-nextNav {
-
            <div class="img_border img_fl">
+
right:0px;
-
            <a href="http://www.templatemo.com" rel="nofollow"><img src="images/templatemo_image_01.jpg" alt="image 1" /></a>
+
}
-
          </div>
+
/* Control nav styles (e.g. 1,2,3...) */
-
            <p><em>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius, ut fermentum sem adipiscing id.</em></p>
+
.nivo-controlNav a {
-
            <p>Sed vitae aliquam arcu. Donec urna massa, cursus et mattis at, mattis quis lectus. Cras in erat purus. Aliquam odio nibh, suscipit quis venenatis vitae, fringilla at quam. Proin turpis nibh, vestibulum non dignissim a, blandit at nulla mattis sapien. </p>    
+
position:relative;
-
            <div class="clear h40"></div>
+
z-index:99;
-
            <div class="img_border img_fr">
+
cursor:pointer;
-
                <img src="images/templatemo_image_02.jpg" alt="image 2" />
+
}
-
            </div>
+
.nivo-controlNav a.active {
-
            <p><em>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius, ut fermentum sem adipiscing id.</em></p>
+
font-weight:bold;
-
            <p>Sed vitae aliquam arcu. Donec urna massa, cursus et mattis at, mattis quis lectus. Cras in erat purus. Aliquam odio nibh, suscipit quis venenatis vitae, fringilla at quam. Proin turpis nibh, vestibulum non dignissim a, blandit at nulla mattis sapien. Validate <a href="http://validator.w3.org/check?uri=referer" rel="nofollow">XHTML</a> &amp; <a href="http://jigsaw.w3.org/css-validator/check/referer" rel="nofollow">CSS</a>.</p>
+
}
-
        </div>
+
-
        <div class="section section_with_padding" id="services">
+
-
            <h1>Services</h1>
+
-
            <div class="half right">
+
-
            <div class="img_border img_nom">
+
-
                <a href="http://www.templatemo.com" rel="nofollow"><img src="images/templatemo_image_04.jpg" alt="image 4" /></a>
+
-
                </div>
+
-
            <ul class="list_bullet">
+
-
                    <li>Maecenas ac odio ipsum donec</li>
+
-
                    <li>Fusce risus tortor, interdum</li>
+
-
                    <li>Proin facilisis ullamcorper</li>
+
-
                    <li>Sed vel justo quis ligula</li>
+
-
                    <li>Ut tristique sagittis arcu</li>
+
-
                    <li>Maecenas ac odio ipsum donec</li>
+
-
                    <li>Fusce risus tortor, interdum</li>
+
-
                    <li>Proin facilisis ullamcorper</li>
+
-
                </ul>
+
-
               
+
-
            </div>
+
-
            <div class="half left">
+
-
                <div class="img_border img_nom">
+
-
                <img src="images/templatemo_image_03.jpg" alt="image 3" />
+
-
                </div>
+
-
            <p><em>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam mauris ipsum, pulvinar sit amet varius at, placerat ut felis. </em></p>
+
-
            <p>Donec vitae tortor non ipsum tristique condimentum ac ac nulla. Etiam sagittis iaculis dolor ut euismod. Nam faucibus, risus at consequat malesuada, urna turpis sagittis libero, sodales hendrerit dui arcu et nisi. Praesent pulvinar, dolor id lacinia pulvinar, mi ligula tempor libero, et semper sem dolor et elit.</p>
+
-
            </div>
+
-
        </div>
+
-
        <div class="section" id="gallery">
+
-
            <ul id="gallery_wrapper">
+
-
            <li><a href="images/gallery/09-l.jpg" rel="lightbox[gallery]"><img src="images/gallery/09.jpg" alt="image 9" /></a></li>
+
-
                <li><a href="images/gallery/10-l.jpg" rel="lightbox[gallery]"><img src="images/gallery/10.jpg" alt="image 10" /></a></li>
+
-
                <li><a href="images/gallery/11-l.jpg" rel="lightbox[gallery]"><img src="images/gallery/11.jpg" alt="image 11" /></a></li>
+
-
                <li><a href="images/gallery/12-l.jpg" rel="lightbox[gallery]"><img src="images/gallery/12.jpg" alt="image 12" /></a></li>
+
-
                <li><a href="images/gallery/01-l.jpg" rel="lightbox[gallery]"><img src="images/gallery/01.jpg" alt="image 01" /></a></li>
+
-
                <li><a href="images/gallery/02-l.jpg" rel="lightbox[gallery]"><img src="images/gallery/02.jpg" alt="image 02" /></a></li>
+
-
                <li><a href="images/gallery/03-l.jpg" rel="lightbox[gallery]"><img src="images/gallery/03.jpg" alt="image 03" /></a></li>
+
-
                <li><a href="images/gallery/04-l.jpg" rel="lightbox[gallery]"><img src="images/gallery/04.jpg" alt="image 04" /></a></li>
+
-
                <li><a href="images/gallery/05-l.jpg" rel="lightbox[gallery]"><img src="images/gallery/05.jpg" alt="image 05" /></a></li>
+
-
                <li><a href="images/gallery/06-l.jpg" rel="lightbox[gallery]"><img src="images/gallery/06.jpg" alt="image 06" /></a></li>
+
-
                <li><a href="images/gallery/07-l.jpg" rel="lightbox[gallery]"><img src="images/gallery/07.jpg" alt="image 07" /></a></li>
+
-
                <li><a href="images/gallery/08-l.jpg" rel="lightbox[gallery]"><img src="images/gallery/08.jpg" alt="image 08" /></a></li>               
+
-
                <li><a href="images/gallery/09-l.jpg" rel="lightbox[gallery]"><img src="images/gallery/09.jpg" alt="image 09" /></a></li>
+
-
                <li><a href="images/gallery/10-l.jpg" rel="lightbox[gallery]"><img src="images/gallery/10.jpg" alt="image 10" /></a></li>
+
-
                <li><a href="images/gallery/11-l.jpg" rel="lightbox[gallery]"><img src="images/gallery/11.jpg" alt="image 11" /></a></li>
+
-
                <li><a href="images/gallery/12-l.jpg" rel="lightbox[gallery]"><img src="images/gallery/12.jpg" alt="image 12" /></a></li>
+
-
                <li><a href="images/gallery/01-l.jpg" rel="lightbox[gallery]"><img src="images/gallery/01.jpg" alt="image 01" /></a></li>
+
-
                <li><a href="images/gallery/02-l.jpg" rel="lightbox[gallery]"><img src="images/gallery/02.jpg" alt="image 02" /></a></li>
+
-
                <li><a href="images/gallery/03-l.jpg" rel="lightbox[gallery]"><img src="images/gallery/03.jpg" alt="image 03" /></a></li>
+
-
                <li><a href="images/gallery/04-l.jpg" rel="lightbox[gallery]"><img src="images/gallery/04.jpg" alt="image 04" /></a></li>
+
-
            </ul>
+
-
        </div>
+
-
       
+
-
        <div class="section section_with_padding" id="contact">
+
-
            <h1>Contact Us</h1>
+
-
            <div class="half left">
+
-
                <h4>Quick Contact</h4>
+
-
                <div id="contact_form">
+
-
                    <form method="post" name="contact" action="#contact">
+
-
                        <label for="author">Name:</label>
+
-
                        <input name="author" type="text" class="required input_field" id="author" maxlength="30" />
+
-
                        <label for="email">Email:</label>
+
-
                        <input name="email" type="text" class="validate-email required input_field" id="email" maxlength="30" />
+
-
                  <label for="message">Message:</label>
+
-
                        <textarea id="message" name="text" rows="0" cols="0" class="required"></textarea>
+
-
                        <input type="submit" class="submit_btn left" name="submit" id="submit" value="Send" />
+
-
                        <input type="reset" class="submit_btn right" name="Reset" id="reset" value="Reset" />
+
-
                    </form>
+
-
                </div>
+
-
            </div>
+
-
           
+
-
            <div class="half right">
+
-
                <h4>Address</h4>
+
-
                130-310 Duis lacinia dictum, <br />
+
-
                Vestibulum auctor, 10990<br />
+
-
            Nam rhoncus, diam a mollis<br />
+
-
               
+
-
                <div class="clear h20"></div>
+
-
                <div class="img_nom img_border"><a href="http://goo.gl/VZrm0H" target="_blank"><img src="images/location.jpg" alt="our location" width="230" height="230" /></a></div>
+
-
            </div>
+
-
        </div>
+
-
    </div>
+
-
</div>
+
-
 
+
-
</div>
+
-
 
+
-
</body>
+
-
</html>
+

Revision as of 10:39, 4 May 2014

/* 

* jQuery Nivo Slider v2.4
* http://nivo.dev7studios.com
*
* Copyright 2011, Gilbert Pellegrom
* Free to use and abuse under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 
* March 2010
*/

/* The Nivo Slider styles */ .nivoSlider { position:relative; } .nivoSlider img { position:absolute; top:0px; left:0px; } /* If an image is wrapped in a link */ .nivoSlider a.nivo-imageLink { position:absolute; top:0px; left:0px; width:100%; height:100%; border:0; padding:0; margin:0; z-index:60; display:none; } /* The slices in the Slider */ .nivo-slice { display:block; position:absolute; z-index:50; height:100%; } /* Caption styles */ .nivo-caption { position:absolute; left:0px; bottom:0px; background:#000; color:#fff; opacity:0.8; /* Overridden by captionOpacity setting */ width:100%; z-index:89; } .nivo-caption p { padding:5px; margin:0; } .nivo-caption a { display:inline !important; } .nivo-html-caption { 

   display:none;

} /* Direction nav styles (e.g. Next & Prev) */ .nivo-directionNav a { position:absolute; top:45%; z-index:99; cursor:pointer; } .nivo-prevNav { left:0px; } .nivo-nextNav { right:0px; } /* Control nav styles (e.g. 1,2,3...) */ .nivo-controlNav a { position:relative; z-index:99; cursor:pointer; } .nivo-controlNav a.active { font-weight:bold; }

Retrieved from "http://2014hs.igem.org/%E9%99%B3%E6%B2%9B%E9%B4%BB_Home1_templatemo_378_dragonfly_index2"