陳沛鴻 Home1 templatemo 378 dragonfly index2

From 2014hs.igem.org

(Difference between revisions)
 
Line 1: Line 1:
-
/*
+
{{:陳沛鴻_Styling_tricks}}
-
* jQuery Nivo Slider v2.4
+
 
-
* http://nivo.dev7studios.com
+
<html>
-
*
+
<head>
-
* Copyright 2011, Gilbert Pellegrom
+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-
* Free to use and abuse under the MIT license.
+
<title>Dragonfly, free website template</title>
-
* http://www.opensource.org/licenses/mit-license.php
+
<meta name="keywords" content="dragonfly, free website templates, one page layout, jquery" />
-
*
+
<meta name="description" content="Dragonfly is one-page layout using jQuery and it is free website template from templatemo.com" />
-
* March 2010
+
 
-
*/
+
<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" />
-
+
<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>
-
/* The Nivo Slider styles */
+
<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>
-
.nivoSlider {
+
<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>
-
position:relative;
+
   
-
}
+
    <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" />
-
.nivoSlider img {
+
    <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>
-
position:absolute;
+
 
-
top:0px;
+
<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" />
-
left:0px;
+
<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" />
-
}
+
 
-
/* If an image is wrapped in a link */
+
 
-
.nivoSlider a.nivo-imageLink {
+
</head>
-
position:absolute;
+
<body>
-
top:0px;
+
<div id="templatemo_wrapper">
-
left:0px;
+
<div id="templatemo_header">
-
width:100%;
+
    <div id="site_title"><a href="http://www.templatemo.com/preview/templatemo_378_dragonfly" rel="nofollow" target="_parent"></a></div>
-
height:100%;
+
    <ul class="nav_menu">
-
border:0;
+
        <li><a href="#home">Home</a></li>
-
padding:0;
+
        <li><a href="#about">About</a></li>
-
margin:0;
+
        <li><a href="#services">Services</a></li>
-
z-index:60;
+
        <li><a href="#gallery">Portfolio</a></li>
-
display:none;
+
        <li><a href="#contact">Contact</a></li>
-
}
+
    </ul>
-
/* The slices in the Slider */
+
    <div class="social_button">
-
.nivo-slice {
+
    <a href="#"><img src="images/facebook.png" alt="Facebook" /></a>
-
display:block;
+
<a href="#"><img src="images/flickr.png" alt="Flickr" /></a>
-
position:absolute;
+
<a href="#"><img src="images/twitter.png" alt="Twitter" /></a>
-
z-index:50;
+
        <div class="clear"></div>
-
height:100%;
+
    </div>
-
}
+
    <p>
-
/* Caption styles */
+
    c 2072 Company Name<br />
-
.nivo-caption {
+
    <a href="http://www.templatemo.com/preview/templatemo_378_dragonfly" rel="nofollow" target="_parent">Dragonfly</a> by<br />
-
position:absolute;
+
    <a href="http://www.templatemo.com" rel="nofollow" target="_parent">templatemo</a></p>
-
left:0px;
+
   
-
bottom:0px;
+
</div>
-
background:#000;
+
<div id="templatemo_main">
-
color:#fff;
+
<div id="content">
-
opacity:0.8; /* Overridden by captionOpacity setting */
+
      <div id="home" class="home_slider">
-
width:100%;
+
            <div class="theme-orman">
-
z-index:89;
+
                <div id="slider" class="nivoSlider">
-
}
+
                    <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" />
-
.nivo-caption p {
+
                    <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" />
-
padding:5px;
+
                    <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" />
-
margin:0;
+
                    <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" />
-
}
+
                    <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" />
-
.nivo-caption a {
+
                </div>
-
display:inline !important;
+
            </div>
-
}
+
            <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>
-
.nivo-html-caption {
+
            <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>
-
    display:none;
+
            <script type="text/javascript">
-
}
+
            $(window).load(function() {
-
/* Direction nav styles (e.g. Next & Prev) */
+
                $('#slider').nivoSlider({
-
.nivo-directionNav a {
+
                    controlNavThumbs:true,
-
position:absolute;
+
controlNavThumbsFromRel:true,
-
top:45%;
+
directionNav:false, // Next and Prev
-
z-index:99;
+
keyboardNav:true, // Use left and right arrows
-
cursor:pointer;
+
pauseOnHover:true // Stop animation while hovering
-
}
+
                });
-
.nivo-prevNav {
+
            });
-
left:0px;
+
            </script>
-
}
+
      </div>
-
.nivo-nextNav {
+
        <div class="section section_with_padding" id="about">
-
right:0px;
+
            <h1>About</h1>
-
}
+
            <div class="img_border img_fl">
-
/* Control nav styles (e.g. 1,2,3...) */
+
            <a href="http://www.templatemo.com" rel="nofollow"><img src="images/templatemo_image_01.jpg" alt="image 1" /></a>
-
.nivo-controlNav a {
+
          </div>
-
position:relative;
+
            <p><em>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius, ut fermentum sem adipiscing id.</em></p>
-
z-index:99;
+
            <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>    
-
cursor:pointer;
+
            <div class="clear h40"></div>
-
}
+
            <div class="img_border img_fr">
-
.nivo-controlNav a.active {
+
                <img src="images/templatemo_image_02.jpg" alt="image 2" />
-
font-weight:bold;
+
            </div>
-
}
+
            <p><em>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius, ut fermentum sem adipiscing id.</em></p>
 +
            <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>

Latest revision as of 10:40, 4 May 2014

Dragonfly, free website template

Dragonfly 1 Dragonfly 2 Dragonfly 3 Dragonfly 4 Dragonfly 5

About

image 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius, ut fermentum sem adipiscing id.

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.

image 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius, ut fermentum sem adipiscing id.

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 XHTML & CSS.

Services

image 4
  • Maecenas ac odio ipsum donec
  • Fusce risus tortor, interdum
  • Proin facilisis ullamcorper
  • Sed vel justo quis ligula
  • Ut tristique sagittis arcu
  • Maecenas ac odio ipsum donec
  • Fusce risus tortor, interdum
  • Proin facilisis ullamcorper
image 3

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam mauris ipsum, pulvinar sit amet varius at, placerat ut felis.

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.

Contact Us

Quick Contact

Address

130-310 Duis lacinia dictum,
Vestibulum auctor, 10990
Nam rhoncus, diam a mollis
our location

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