陳沛鴻 Home1 templatemo 378 dragonfly index7

From 2014hs.igem.org

(Difference between revisions)
 
(8 intermediate revisions not shown)
Line 1: Line 1:
{{:陳沛鴻_Styling_tricks}}
{{:陳沛鴻_Styling_tricks}}
-
                          [[]]
+
<html>
-
* [[Home]]
+
<head>
-
* [[About]]
+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-
* [[Services]]
+
<title>Dragonfly, free website template</title>
-
* [[Portfolio]]
+
<meta name="keywords" content="dragonfly, free website templates, one page layout, jquery" />
-
* [[Contact]]
+
<meta name="description" content="Dragonfly is one-page layout using jQuery and it is free website template from templatemo.com" />
-
  [[Image:facebook.png|Facebook]] [[Image:flickr.png|Flickr]] [[Image:twitter.png|Twitter]] 
+
-
c 2072 Company Name<br> [[Dragonfly]] by<br> [[templatemo]]
+
-
      [[Image:%E9%99%B3%E6%B2%9B%E9%B4%BB_Home1_templatemo_378_dragonfly_images_slider_01.jpg|Dragonfly 1]] [[Image:%E9%99%B3%E6%B2%9B%E9%B4%BB_Home1_templatemo_378_dragonfly_images_slider_02.jpg|Dragonfly 2]] [[Image:%E9%99%B3%E6%B2%9B%E9%B4%BB_Home1_templatemo_378_dragonfly_images_slider_03.jpg|Dragonfly 3]] [[Image:%E9%99%B3%E6%B2%9B%E9%B4%BB_Home1_templatemo_378_dragonfly_images_slider_04.jpg|Dragonfly 4]] [[Image:%E9%99%B3%E6%B2%9B%E9%B4%BB_Home1_templatemo_378_dragonfly_images_slider_05.jpg|Dragonfly 5]]       
+
<link href="https://2014hs.igem.org/%E9%99%B3%E6%B2%9B%E9%B4%BB_Home1_templatemo_378_dragonfly_templatemo_style3?action=raw&ctype=text/css" type="text/css" rel="stylesheet" />
-
= About =
+
<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>
-
  [[Image:templatemo_image_01.jpg|image 1]] 
+
<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>
-
''Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius, ut fermentum sem adipiscing id.''
+
<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/javascript" 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>
 +
   
 +
    <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" />
 +
<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>
   
   
-
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:templatemo_image_02.jpg|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]] &amp; [[CSS]].
 
-
 
 
-
= Services =
 
-
  [[Image:templatemo_image_04.jpg|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:templatemo_image_03.jpg|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. ''
 
-
+
<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" />
-
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.
+
<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" />
 +
 +
</head>
 +
<body>
 +
<div id="templatemo_wrapper">
 +
<div id="templatemo_header">
 +
    <div id="site_title"><a href="http://www.templatemo.com/preview/templatemo_378_dragonfly" rel="nofollow" target="_parent"></a></div>
 +
    <ul class="nav_menu">
 +
        <li><a href="#home">Home</a></li>
 +
        <li><a href="#about">About</a></li>
 +
        <li><a href="#services">Services</a></li>
 +
        <li><a href="#gallery">Portfolio</a></li>
 +
        <li><a href="#contact">Contact</a></li>
 +
    </ul>
 +
    <div class="social_button">
 +
    <a href="#"><img src="images/facebook.png" alt="Facebook" /></a>
 +
<a href="#"><img src="images/flickr.png" alt="Flickr" /></a>
 +
<a href="#"><img src="images/twitter.png" alt="Twitter" /></a>
 +
        <div class="clear"></div>
 +
    </div>
 +
    <p>
 +
    c 2072 Company Name<br />
 +
    <a href="http://www.templatemo.com/preview/templatemo_378_dragonfly" rel="nofollow" target="_parent">Dragonfly</a> by<br />
 +
    <a href="http://www.templatemo.com" rel="nofollow" target="_parent">templatemo</a></p>
      
      
-
* [[Image:09.jpg|image 9]]
+
</div>
-
* [[Image:10.jpg|image 10]]
+
<div id="templatemo_main">
-
* [[Image:11.jpg|image 11]]
+
 
-
* [[Image:12.jpg|image 12]]
+
      <div id="home" class="home_slider">
-
* [[Image:01.jpg|image 01]]
+
            <div class="theme-orman">
-
* [[Image:02.jpg|image 02]]
+
                <div id="slider" class="nivoSlider">
-
* [[Image:03.jpg|image 03]]
+
                    <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" />
-
* [[Image:04.jpg|image 04]]
+
                    <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" />
-
* [[Image:05.jpg|image 05]]
+
                    <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" />
-
* [[Image:06.jpg|image 06]]
+
                    <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" />
-
* [[Image:07.jpg|image 07]]
+
                    <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" />
-
* [[Image:08.jpg|image 08]]
+
                </div>
-
* [[Image:09.jpg|image 09]]
+
            </div>
-
* [[Image:10.jpg|image 10]]
+
            <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>
-
* [[Image:11.jpg|image 11]]
+
            <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>
-
* [[Image:12.jpg|image 12]]
+
            <script type="text/javascript">
-
* [[Image:01.jpg|image 01]]
+
            $(window).load(function() {
-
* [[Image:02.jpg|image 02]]
+
                $('#slider').nivoSlider({
-
* [[Image:03.jpg|image 03]]
+
                    controlNavThumbs:true,
-
* [[Image:04.jpg|image 04]]
+
controlNavThumbsFromRel:true,
-
 
+
directionNav:false, // Next and Prev
-
= Contact Us =
+
keyboardNav:true, // Use left and right arrows
-
 
+
pauseOnHover:true // Stop animation while hovering
-
==== Quick Contact ====
+
                });
-
  Name:  Email: Message:      
+
            });
-
==== Address ====
+
            </script>
 +
      </div>
 +
        <div class="section section_with_padding" id="about">
 +
            <h1>About</h1>
 +
            <div class="img_border img_fl">
 +
            <a href="http://www.templatemo.com" rel="nofollow"><img src="images/templatemo_image_01.jpg" alt="image 1" /></a>
 +
          </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. </p>    
 +
            <div class="clear h40"></div>
 +
            <div class="img_border img_fr">
 +
                <img src="images/templatemo_image_02.jpg" alt="image 2" />
 +
            </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>
-
                130-310 Duis lacinia dictum, <br>
+
</body>  
-
                Vestibulum auctor, 10990<br>
+
</html>
-
            Nam rhoncus, diam a mollis<br>  [[Image:location.jpg|our location]]
+

Latest revision as of 07:19, 6 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_index7"