在好例子网,分享、交流、成长!
您当前所在位置:首页CSS 开发实例网页布局 → HTML5响应式网站模版

HTML5响应式网站模版

网页布局

下载此实例
  • 开发语言:CSS
  • 实例大小:0.66M
  • 下载次数:99
  • 浏览次数:1296
  • 发布时间:2015-06-16
  • 实例类别:网页布局
  • 发 布 人:jeny25
  • 文件格式:.zip
  • 所需积分:2
 相关标签: HTML5 HTML 网站 模版

实例介绍

【实例简介】HTML5响应式网站模版

【实例截图】

【核心代码】

<body>
  <div id="header">
      <div class="gohome radius20"><a href="#"><img src="images/icons/home.png" alt="" title="" /></a></div>
      <div class="gomenu radius20"><a href="#" onclick="swiperParent.swipeTo(10);"><img src="images/icons/contact.png" alt="" title="" /></a></div>
  </div>
  <div class="swiper-container swiper-parent">
    <div class="swiper-wrapper">
    
      <!--Menu page-->
      <div class="swiper-slide sliderbg_menu">
          <div class="swiper-container swiper-nested">
                   <div class="swiper-wrapper">
                        <div class="swiper-slide">
                                  <div class="slide-inner">
                                        <div class="logo"><a href="#">GoMobile</a></div>
                                        <div class="menu">
                                        <ul>
                                        <li class="green"><a href="#" onclick="swiperParent.swipeTo(1);"><img src="images/icons/about.png" alt="" title="" /><span>About Us</span></a></li>
                                        <li class="red"><a href="#" onclick="swiperParent.swipeTo(2);"><img src="images/icons/tools.png" alt="" title="" /><span>Services</span></a></li>
                                        <li class="blue"><a href="#" onclick="swiperParent.swipeTo(3);"><img src="images/icons/blog.png" alt="" title="" /><span>Blog</span></a></li>
                                        <li class="orange"><a href="#" onclick="swiperParent.swipeTo(5);"><img src="images/icons/docs.png" alt="" title="" /><span>Portfolio</span></a></li>
                                        <li class="purple"><a href="#" onclick="swiperParent.swipeTo(6);"><img src="images/icons/photos.png" alt="" title="" /><span>Gallery</span></a></li>
                                        <li class="yellow"><a href="#" onclick="swiperParent.swipeTo(8);"><img src="images/icons/clients.png" alt="" title="" /><span>Clients</span></a></li>
                                        <li class="pink"><a href="#" onclick="swiperParent.swipeTo(9);"><img src="images/icons/twitter.png" alt="" title="" /><span>Twitter</span></a></li>
                                        <li class="bluegreen"><a href="#" onclick="swiperParent.swipeTo(10);"><img src="images/icons/contact.png" alt="" title="" /><span>Contact</span></a></li>
                                        </ul>
                                        <div class="clearfix"></div>
                                        </div>
                                 </div>
                         </div>
                   </div>
                  <div class="swiper-scrollbar"></div>
          </div> 
      </div>
      
      <!--Page 1 content-->
      <div class="swiper-slide sliderbg green">
      <div class="swiper-container swiper-nested1">
               <div class="swiper-wrapper">
                    <div class="swiper-slide">
                              <div class="slide-inner">
                                        <div class="pages_container">
                                        <h2 class="page_title">About Us</h2>
                                        <div class="image_single"><img src="images/page_photo.jpg" alt="" title="" border="0" /></div>
                                        <div class="image_caption blue blue_borderbottom">Image title</div>
                                        <h3>Imagination is our power</h3>
                                        <blockquote>Design is the fundamental soul of a human-made creation that ends up expressing itself in successive outer layers of the product or service. <span class="quote_author">-Steve Jobs</span></blockquote>
                                        
                                        <h3>Just a simple listing</h3>
                                        <ul class="listing">
                                        <li>Proin dignissim risus ut quam aliquam dignissim.</li>
                                        <li>Nunc erat eros, cursus et commodo vitae, pulvinar ac libero.</li>
                                        <li>In erat elit, bibendum vitae commodo vitae, bibendum non justo.</li>
                                        </ul>
                                        <h3>A more detailed listing</h3>
                                        <ul class="listing_detailed">
                                        <li><a href="#">Proin dignissim risus</a></li>
                                        <li><a href="#">Nunc erat eros, cursus et</a></li>
                                        <li><a href="#">In erat elit, bibendum</a></li>
                                        </ul>
                                        
                                        <h2>Toggle styles</h2>
        
                                        <div class="toogle_wrap">
                                            <div class="trigger"><a href="#">toggle with text</a></div>
                                
                                            <div class="toggle_container">
                                            <p>
                                        Lorem ipsum <a href="#">dolor sit amet</a>, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                                            </p>
                                            </div>
                                        </div>
        
                                        <div class="toogle_wrap">
                                            <div class="trigger"><a href="#">toggle with lists</a></div>
                                
                                            <div class="toggle_container">
                                            <ul class="listing_detailed">
                                            <li>Consectetur adipisicing elit sed</li>
                                            <li>Sed do eiusmod tempor incididunt</li>
                                            <li>Ut enim ad minim veniam</li>
                                            </ul>
                                            </div>
                                        </div> 
        
                                        <h2>Some flexible <span class="tag">tabs</span></h2>
                                        
                                        <ul id="tabsmenu" class="tabsmenu">
                                            <li class="active"><a href="#tab1">Text tab</a></li>
                                            <li><a href="#tab2">Listing tab</a></li>
                                            <li><a href="#tab3">Quote tab</a></li>
                                        </ul>
                                        <div id="tab1" class="tabcontent">
                                            <h4>Simple text title</h4>
                                            <p>
                                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                                            </p>
                                        </div>
                                        <div id="tab2" class="tabcontent">
                                            <h4>Listing title</h4>
                                            <ul class="listing">
                                            <li>Consectetur adipisicing elit sed</li>
                                            <li>Sed do eiusmod tempor incididunt</li>
                                            <li>Ut enim ad minim veniam</li>
                                            </ul>
                                        </div>
                                
                                        <div id="tab3" class="tabcontent">
                                            <h4>Quote title</h4>
                                            <blockquote>Design is the fundamental soul of a human-made creation that ends up expressing itself in successive outer layers of the product or service. <span class="quote_author">-Steve Jobs</span></blockquote>
                                        </div>       
                                        
                                        <h2>Some buttons styles</h2>
                                        <a href="#" class="button_12 purple">Button 1/2</a>  <a href="#" class="button_12 blue">Button 1/2</a>
                                        <a href="#" class="button_12 red">Button 1/2</a>  <a href="#" class="button_12 orange">Button 1/2</a> 
                                        <a href="#" class="button_12 black">Button 1/2</a>  <a href="#" class="button_12 gray">Button 1/2</a>  
                                        <a href="#" class="button_11 yellow">Full width button</a>
                                        
                                        <div class="clearfix"></div>
      									<div class="scrolltop radius20"><a href="#" class="scrolltop1"><img src="images/icons/top.png" alt="Go on top" title="Go on top" /></a></div>
                                        </div>
                                        <!--End of page container-->
                              </div>
                    </div>
              </div>
              <div class="swiper-scrollbar1"></div>
     </div>
     </div>
      
      <!--Page 2 content-->
      <div class="swiper-slide sliderbg red">
      <div class="swiper-container swiper-nested2">
               <div class="swiper-wrapper">
                    <div class="swiper-slide">
                              <div class="slide-inner">
                                        <div class="pages_container">
                                        <h2 class="page_title">Our motto</h2>
                                        <blockquote>Design is the fundamental soul of a human-made creation that ends up expressing itself in successive outer layers of the product or service. <span class="quote_author">-Steve Jobs</span></blockquote>
                                        
                                        <h3>Our main services</h3>
                                        <div class="service_box">
                                          <div class="services_icon"><img src="images/icons/services.png" alt="" title="" /></div>
                                          <div class="service_content">
                                          <h4>Web development</h4>
                                              <p>Lorem ipsum dolor sit <a href="#">amet consectetur</a> adipisicing elit, <strong>sed do eiusmod</strong> tempor</p>
                                          </div>
                                        </div>
                                        <div class="service_box">
                                          <div class="services_icon"><img src="images/icons/layout.png" alt="" title="" /></div>
                                          <div class="service_content">
                                          <h4>Layout design</h4>
                                          <p>Cras <strong>vestibulum</strong> <a href="#">justo eget lorem</a> semper ac facilisis nulla porta</p>
                                          </div>
                                        </div>  
                                        <div class="service_box">
                                          <div class="services_icon"><img src="images/icons/pencil.png" alt="" title="" /></div>
                                          <div class="service_content">
                                          <h4>Drawing</h4>
                                          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor</p>
                                          </div>
                                        </div>
                                        <div class="service_box">
                                          <div class="services_icon"><img src="images/icons/code.png" alt="" title="" /></div>
                                          <div class="service_content">
                                          <h4>Programming</h4>
                                          <p>Lorem ipsum dolor sit amet, <a href="#"><strong>consectetur adipisicing elit</strong></a>, sed do eiusmod tempor</p>
                                          </div>
                                        </div>                                     
                                        <div class="service_box">
                                          <div class="services_icon"><img src="images/icons/travel.png" alt="" title="" /></div>
                                          <div class="service_content">
                                          <h4>Custom work</h4>
                                          <p>Lorem ipsum dolor sit <a href="#">amet consectetur</a> adipisicing elit, <strong>sed do eiusmod</strong> tempor</p>
                                          </div>
                                        </div>
                                        <div class="service_box">
                                          <div class="services_icon"><img src="images/icons/security.png" alt="" title="" /></div>
                                          <div class="service_content">
                                          <h4>Security</h4>
                                          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor</p>
                                          </div>
                                        </div>
                                        
                                        <h3>Prices</h3>
                                        
                                        <ul class="responsive_table">
                                             <li class="table_row">
                                                <div class="table_section_small">Nr</div>
                                                <div class="table_section">Service</div>
                                                <div class="table_section">Price</div> 
                                             </li>
                                             <li class="table_row">
                                                <div class="table_section_small">01</div>
                                                <div class="table_section">Web development</div>
                                                <div class="table_section">1200$</div> 
                                             </li>
                                             <li class="table_row">
                                                <div class="table_section_small">02</div>
                                                <div class="table_section">Drawing</div>
                                                <div class="table_section">600$</div> 
                                             </li>
                                             <li class="table_row">
                                                <div class="table_section_small">03</div>
                                                <div class="table_section">Custom work</div>
                                                <div class="table_section">500$</div> 
                                             </li>
                                             <li class="table_row">
                                                <div class="table_section_small">04</div>
                                                <div class="table_section">Layout design</div>
                                                <div class="table_section">800$</div> 
                                             </li>
                                             <li class="table_row">
                                                <div class="table_section_small">05</div>
                                                <div class="table_section">Security</div>
                                                <div class="table_section">650$</div> 
                                             </li>
                                        </ul>
                                        
                                        <div class="clearfix"></div>
      <div class="scrolltop radius20"><a href="#" class="scrolltop2"><img src="images/icons/top.png" alt="Go on top" title="Go on top" /></a></div>
                                        </div>
                                        <!--End of page container-->
                              </div>
                    </div>
              </div>
              <div class="swiper-scrollbar2"></div>
     </div>
     </div>
     
      <!--Page 3 content-->
      <div class="swiper-slide sliderbg blue">
      <div class="swiper-container swiper-nested3">
               <div class="swiper-wrapper">
                    <div class="swiper-slide">
                              <div class="slide-inner">
                                        <div class="pages_container blogheight">
                                        <h2 class="page_title">Blog</h2>
                                                <div class="toogle_wrap_blog">
                                                    <div class="trigger_blog"><a href="#">blog categories</a></div>
                                                        <div class="toggle_container_blog">
                                                            <ul class="listing_detailed">
                                                            <li><a href="#">webdesign work</a></li>
                                                            <li><a href="#">painted illustrations</a></li>
                                                            <li><a href="#">programming and javascript</a></li>
                                                            </ul>
                                                        </div>
                                                </div>
                                                <ul class="posts">
                                                <li class="post">
                                                     <a href="#" class="post_more"></a>                     
                                                     <div class="post_right_reveal">
                                                     <h4><a href="#" onclick="swiperParent.swipeTo(4);">Lorem ipsum dolor sit amet, consectetur adipiscing elit...</a></h4>
                                                     </div>
                                                     <div class="post_right_unreveal">
                                                     Posted in <a href="#">blog category</a>
                                                     <span class="post_comments">25 Comments</span>
                                                     <a href="#" class="post_readmore" onclick="swiperParent.swipeTo(4);">read more</a>
                                                     </div> 

                                                    <div class="post_left">
                                                        <span class="day">23</span>
                                                        <span class="month">june</span>
                                                    </div>

                                                </li>
                                                <li class="post">
                                                     <a href="#" class="post_more"></a>
                                                     <div class="post_right_reveal">
                                                     <h4><a href="#" onclick="swiperParent.swipeTo(4);">Cras vestibulum justo eget lorem semper ac facilisis nulla porta...</a></h4>
                                                     </div>
                                                     <div class="post_right_unreveal">
                                                     Posted in <a href="#">programming</a>
                                                     <span class="post_comments">18 Comments</span>
                                                     <a href="#" class="post_readmore" onclick="swiperParent.swipeTo(4);">read more</a>
                                                     </div> 
                                                   
                                                    <div class="post_left">
                                                        <span class="day">18</span>
                                                        <span class="month">sept</span>
                                                    </div>
                                                </li>
                                                <li class="post">
                                                     <a href="#" class="post_more"></a>                     
                                                     <div class="post_right_reveal">
                                                     <h4><a href="#" onclick="swiperParent.swipeTo(4);">Nam velit sapien, eleifend in tempus volutpat, posuere ullamcorper augue...</a></h4>
                                                     </div>
                                                     <div class="post_right_unreveal">
                                                     Posted in <a href="#">blog category</a>
                                                     <span class="post_comments">11 Comments</span>
                                                     <a href="#" class="post_readmore" onclick="swiperParent.swipeTo(4);">read more</a>
                                                     </div> 

                                                    <div class="post_left">
                                                        <span class="day">09</span>
                                                        <span class="month">dec</span>
                                                    </div>

                                                </li>
                                                <li class="post">
                                                     <a href="#" class="post_more"></a>
                                                     <div class="post_right_reveal">
                                                     <h4><a href="#" onclick="swiperParent.swipeTo(4);">Cras vestibulum justo eget lorem semper ac facilisis nulla porta...</a></h4>
                                                     </div>
                                                     <div class="post_right_unreveal">
                                                     Posted in <a href="#">programming</a>
                                                     <span class="post_comments">06 Comments</span>
                                                     <a href="#" class="post_readmore" onclick="swiperParent.swipeTo(4);">read more</a>
                                                     </div> 
                                                   
                                                    <div class="post_left">
                                                        <span class="day">12</span>
                                                        <span class="month">mart</span>
                                                    </div>
                                                </li>
                                                <li class="post">
                                                     <a href="#" class="post_more"></a>
                                                     <div class="post_right_reveal">
                                                     <h4><a href="#" onclick="swiperParent.swipeTo(4);">Cras vestibulum justo eget lorem semper ac facilisis nulla porta...</a></h4>
                                                     </div>
                                                     <div class="post_right_unreveal">
                                                     Posted in <a href="#">programming</a>
                                                     <span class="post_comments">18 Comments</span>
                                                     <a href="#" class="post_readmore" onclick="swiperParent.swipeTo(4);">read more</a>
                                                     </div> 
                                                   
                                                    <div class="post_left">
                                                        <span class="day">18</span>
                                                        <span class="month">sept</span>
                                                    </div>
                                                </li>
                                                <li class="post">
                                                     <a href="#" class="post_more"></a>                     
                                                     <div class="post_right_reveal">
                                                     <h4><a href="#" onclick="swiperParent.swipeTo(4);">Nam velit sapien, eleifend in tempus volutpat, posuere ullamcorper augue...</a></h4>
                                                     </div>
                                                     <div class="post_right_unreveal">
                                                     Posted in <a href="#">blog category</a>
                                                     <span class="post_comments">11 Comments</span>
                                                     <a href="#" class="post_readmore" onclick="swiperParent.swipeTo(4);">read more</a>
                                                     </div> 

                                                    <div class="post_left">
                                                        <span class="day">09</span>
                                                        <span class="month">dec</span>
                                                    </div>

                                                </li>
                                                <li class="post">
                                                     <a href="#" class="post_more"></a>
                                                     <div class="post_right_reveal">
                                                     <h4><a href="#" onclick="swiperParent.swipeTo(4);">Cras vestibulum justo eget lorem semper ac facilisis nulla porta...</a></h4>
                                                     </div>
                                                     <div class="post_right_unreveal">
                                                     Posted in <a href="#">programming</a>
                                                     <span class="post_comments">18 Comments</span>
                                                     <a href="#" class="post_readmore" onclick="swiperParent.swipeTo(4);">read more</a>
                                                     </div> 
                                                   
                                                    <div class="post_left">
                                                        <span class="day">18</span>
                                                        <span class="month">sept</span>
                                                    </div>
                                                </li>
                                                <li class="post">
                                                     <a href="#" class="post_more"></a>                     
                                                     <div class="post_right_reveal">
                                                     <h4><a href="#" onclick="swiperParent.swipeTo(4);">Nam velit sapien, eleifend in tempus volutpat, posuere ullamcorper augue...</a></h4>
                                                     </div>
                                                     <div class="post_right_unreveal">
                                                     Posted in <a href="#">blog category</a>
                                                     <span class="post_comments">11 Comments</span>
                                                     <a href="#" class="post_readmore" onclick="swiperParent.swipeTo(4);">read more</a>
                                                     </div> 

                                                    <div class="post_left">
                                                        <span class="day">09</span>
                                                        <span class="month">dec</span>
                                                    </div>

                                                </li>
                                                </ul>
                                                <div id="loadMore">Load more posts</div> 
                                                <div id="showLess">No more posts</div>
 										<div class="scrolltop radius20"><a href="#" class="scrolltop3"><img src="images/icons/top.png" alt="Go on top" title="Go on top" /></a></div>
                                        </div>
                                        <!--End of page container-->
                              </div>
                    </div>
              </div>
              <div class="swiper-scrollbar3"></div>
     </div>
     </div>
     
      <div class="swiper-slide sliderbg blue">
      <div class="swiper-container swiper-nestedsingle">
               <div class="swiper-wrapper">
                    <div class="swiper-slide">
                              <div class="slide-inner">
                              <div class="pages_container">
                              <a class="backtoblog" onclick="swiperParent.swipeTo(3);">back to blog</a>
                              <h2 class="page_title">Blog single page</h2>
                            <div class="image_single"><img src="images/page_photo.jpg" alt="" title="" border="0" /></div>
                            <div class="image_caption green">Image title</div>
                            <h3>Imagination is our power</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam velit sapien, eleifend in tempus volutpat, posuere ullamcorper augue. Proin dignissim risus ut quam aliquam dignissim. In erat elit, bibendum vitae commodo vitae, bibendum non justo.<br /><br /> Nunc erat eros, cursus et commodo vitae, pulvinar ac libero. Nullam et scelerisque erat. Cras vestibulum justo eget lorem semper ac facilisis nulla porta.</p>
                            <h3>Comments</h3>
                                <div class="comment_row">
                                	<div class="comm_avatar"><img src="images/avatar.jpg" alt="" title="" border="0" /></div>
                                    <div class="comm_content"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam velit sapien, eleifend in by <a href="#">comment author</a></p></div>
                                </div>
                                <div class="comment_row">
                                	<div class="comm_avatar"><img src="images/avatar.jpg" alt="" title="" border="0" /></div>
                                    <div class="comm_content"><p>Nullam et scelerisque erat. Cras vestibulum justo eget lorem semper ac facilisis nulla porta by <a href="#">comment author</a></p></div>
                                </div>
                            <h3>Leave a comment</h3>
                                <div class="form">
                                <form action="">
                                <label>Name:</label>
                                <input type="text" class="form_input" />
                                <label>Email:</label>
                                <input type="text" class="form_input" />
                                <label>Comment:</label>
                                <textarea class="form_textarea" rows="" cols=""></textarea>
                                
                                <input type="submit" class="form_submit green" value="Submit" />
                                </form>
                                </div>
                              <div class="scrolltop radius20"><a href="#" class="scrolltopsingle"><img src="images/icons/top.png" alt="Go on top" title="Go on top" /></a></div>
                              </div>
                              <!--End of page container-->
                               </div>
                         </div>
                   </div>
                  <div class="swiper-scrollbarsingle"></div>
          </div>                            
      </div>
     <!--Page 4 content-->
      <div class="swiper-slide sliderbg orange">
      <div class="swiper-container swiper-nested4">
               <div class="swiper-wrapper">
                    <div class="swiper-slide">
                              <div class="slide-inner">
                                        <div class="pages_container">
                                        <h2 class="page_title">Portfolio</h2>
                                        <div class="toogle_wrap">
                                            <div class="trigger"><a href="#">portfolio categories</a></div>
                                            <div class="toggle_container">
                                            <ul class="listing_detailed">
                                            <li><a href="#">webdesign work</a></li>
                                            <li><a href="#">painted illustrations</a></li>
                                            <li><a href="#">programming and javascript</a></li>
                                            </ul>
                                            </div>
                                        </div>
                                        <div class="portfolio_item">
                                             <div class="portfolio_image"><a rel="gallery-1" href="images/portfolio_thumb.jpg" class="swipebox" title="Webdesign work"><img src="images/portfolio_thumb.jpg" alt="" title="" border="0" /></a></div>
                                                 <div class="portfolio_details">
                                                 <h4>Webdesign work</h4>
                                                 <p>Nullam et scelerisque erat. Cras vestibulum justo...</p>
                                                 <a rel="gallery-2" href="images/portfolio_thumb.jpg" class="swipebox view_details" title="Webdesign work">view details</a>
                                                 </div>
                                        </div>
                                        <div class="portfolio_item">
                                             <div class="portfolio_image"><a rel="gallery-1" href="images/portfolio_thumb2.jpg" class="swipebox" title="Webdesign work"><img src="images/portfolio_thumb2.jpg" alt="" title="" border="0" /></a></div>
                                                 <div class="portfolio_details">
                                                 <h4>Mobile development</h4>
                                                 <p>Cras vestibulum justo eget lorem semper ac facilisis...</p>
                                                 <a rel="gallery-2" href="images/portfolio_thumb2.jpg" class="swipebox view_details" title="Webdesign work">view details</a>
                                                 </div>
                                        </div>
                                        <div class="portfolio_item">
                                             <div class="portfolio_image"><a rel="gallery-1" href="images/portfolio_thumb3.jpg" class="swipebox" title="Webdesign work"><img src="images/portfolio_thumb3.jpg" alt="" title="" border="0" /></a></div>
                                                 <div class="portfolio_details">
                                                 <h4>Applications</h4>
                                                 <p>Sed ut felis non arcu pulvinar molestie....</p>
                                                 <a rel="gallery-2" href="images/portfolio_thumb3.jpg" class="swipebox view_details" title="Webdesign work">view details</a>
                                                 </div>
                                        </div>
                                        <div class="clearfix"></div>
                                        
                                        <h3>Portfolio with round images</h3>
                                        <div class="portfolio_item">
                                             <div class="portfolio_image_round"><a rel="gallery-1" href="images/portfolio_thumb.jpg" class="swipebox" title="Webdesign work"><img src="images/portfolio_thumb.jpg" alt="" title="" border="0" /></a></div>
                                                 <div class="portfolio_details">
                                                 <h4>Webdesign work</h4>
                                                 <p>Nullam et scelerisque erat. Cras vestibulum justo...</p>
                                                 <a rel="gallery-2" href="images/portfolio_thumb.jpg" class="swipebox view_details" title="Webdesign work">view details</a>
                                                 </div>
                                        </div>
                                         <div class="portfolio_item">
                                             <div class="portfolio_image_round"><a rel="gallery-1" href="images/portfolio_thumb2.jpg" class="swipebox" title="Webdesign work"><img src="images/portfolio_thumb2.jpg" alt="" title="" border="0" /></a></div>
                                                 <div class="portfolio_details">
                                                 <h4>Mobile development</h4>
                                                 <p>Cras vestibulum justo eget lorem semper ac facilisis...</p>
                                                 <a rel="gallery-2" href="images/portfolio_thumb2.jpg" class="swipebox view_details" title="Webdesign work">view details</a>
                                                 </div>
                                        </div>
                                        <div class="portfolio_item">
                                             <div class="portfolio_image_round"><a rel="gallery-1" href="images/portfolio_thumb3.jpg" class="swipebox" title="Webdesign work"><img src="images/portfolio_thumb3.jpg" alt="" title="" border="0" /></a></div>
                                                 <div class="portfolio_details">
                                                 <h4>Applications</h4>
                                                 <p>Sed ut felis non arcu pulvinar molestie....</p>
                                                 <a rel="gallery-2" href="images/portfolio_thumb3.jpg" class="swipebox view_details" title="Webdesign work">view details</a>
                                                 </div>
                                        </div>
                                           
                                        <div class="clearfix"></div>
      									<div class="scrolltop radius20"><a href="#" class="scrolltop4"><img src="images/icons/top.png" alt="Go on top" title="Go on top" /></a></div>
                                        </div>
                                        <!--End of page container-->
                              </div>
                    </div>
              </div>
              <div class="swiper-scrollbar4"></div>
     </div>
     </div>
     
      <!--Page 5 content-->
      <div class="swiper-slide sliderbg purple">
      <div class="swiper-container swiper-nested5">
               <div class="swiper-wrapper">
                    <div class="swiper-slide">
                              <div class="slide-inner">
                                        <div class="pages_container">
                                        <h2 class="page_title">Photo Gallery 1/3</h2>
                                            <ul class="photo_gallery_13">
                                            <li><a rel="gallery-3" href="images/photos/photo1.jpg" title="Photo title" class="swipebox"><img src="images/photos/photo1.jpg" alt="image"></a></li>
                                            <li><a rel="gallery-3" href="images/photos/photo2.jpg" title="Photo title" class="swipebox"><img src="images/photos/photo2.jpg" alt="image"></a></li>
                                            <li><a rel="gallery-3" href="images/photos/photo3.jpg" title="Photo title" class="swipebox"><img src="images/photos/photo3.jpg" alt="image"></a></li>
                                            <li><a rel="gallery-3" href="images/photos/photo4.jpg" title="Photo title" class="swipebox"><img src="images/photos/photo4.jpg" alt="image"></a></li>
                                            <li><a rel="gallery-3" href="images/photos/photo5.jpg" title="Photo title" class="swipebox"><img src="images/photos/photo5.jpg" alt="image"></a></li>
                                            <li><a rel="gallery-3" href="images/photos/photo6.jpg" title="Photo title" class="swipebox"><img src="images/photos/photo6.jpg" alt="image"></a></li>
                                            </ul>
                                        <h2>Photo Gallery 1/2</h2>
                                            <ul class="photo_gallery_12">    
                                            <li><a rel="gallery-4" href="images/photos/photo7.jpg" title="Photo title" class="swipebox"><img src="images/photos/photo7.jpg" alt="image"></a></li>
                                            <li><a rel="gallery-4" href="images/photos/photo8.jpg" title="Photo title" class="swipebox"><img src="images/photos/photo8.jpg" alt="image"></a></li>
                                            <li><a rel="gallery-4" href="images/photos/photo9.jpg" title="Photo title" class="swipebox"><img src="images/photos/photo9.jpg" alt="image"></a></li>
                                            <li><a rel="gallery-4" href="images/photos/photo10.jpg" title="Photo title" class="swipebox"><img src="images/photos/photo10.jpg" alt="image"></a></li>
                                            
                                            </ul>
                                        <h2>Photo Gallery 1/1</h2>    
                                            <ul class="photo_gallery_11">
                                            <li><a rel="gallery-5" href="images/photos/photo11.jpg" title="Photo title" class="swipebox"><img src="images/photos/photo11.jpg" alt="image"></a></li>
                                            </ul>
                                        <h2 class="page_title">Round corners 1/3</h2>
                                            <ul class="photo_gallery_13_round">
                                            <li><a rel="gallery-6" href="images/photos/photo1.jpg" title="Photo title" class="swipebox"><img src="images/photos/photo1.jpg" alt="image"></a></li>
                                            <li><a rel="gallery-6" href="images/photos/photo2.jpg" title="Photo title" class="swipebox"><img src="images/photos/photo2.jpg" alt="image"></a></li>
                                            <li><a rel="gallery-6" href="images/photos/photo3.jpg" title="Photo title" class="swipebox"><img src="images/photos/photo3.jpg" alt="image"></a></li>
                                            <li><a rel="gallery-6" href="images/photos/photo4.jpg" title="Photo title" class="swipebox"><img src="images/photos/photo4.jpg" alt="image"></a></li>
                                            <li><a rel="gallery-6" href="images/photos/photo5.jpg" title="Photo title" class="swipebox"><img src="images/photos/photo5.jpg" alt="image"></a></li>
                                            <li><a rel="gallery-6" href="images/photos/photo6.jpg" title="Photo title" class="swipebox"><img src="images/photos/photo6.jpg" alt="image"></a></li>
                                            </ul>
                                         <div class="clearfix"></div> 
     									 <div class="scrolltop radius20"><a href="#" class="scrolltop5"><img src="images/icons/top.png" alt="Go on top" title="Go on top" /></a></div>
                                        </div>
                                        <!--End of page container-->
                              </div>
                    </div>
              </div>
              <div class="swiper-scrollbar5"></div>
     </div>
     </div>
      <!--Page 6 content-->
      <div class="swiper-slide sliderbg blue">
      <div class="swiper-container swiper-nested6">
               <div class="swiper-wrapper">
                    <div class="swiper-slide">
                              <div class="slide-inner">
                                        <div class="pages_container">
                                        <h2 class="page_title">Our Videos</h2>
                                        <p>
                                        Just some responsive videos. You can add your video description here.
                                        </p>
                                            <div class="videocontainer radius6">
                                            <OBJECT width="400" height="150"  ><PARAM name="movie" value="MPFLVPlayer.swf" /><PARAM name="allowFullScreen" value="true" /><PARAM name="FlashVars" value="fn=../../../www.youtube.com/watch@v=bwJWYlS-wnE&flvskin=MPFLVSkin.swf" /><EMBED src="MPFLVPlayer.swf"  width="400" height="150"  type="application/x-shockwave-flash" allowFullScreen="true" FlashVars="fn=../../../www.youtube.com/watch@v=bwJWYlS-wnE&flvskin=MPFLVSkin.swf"></EMBED></OBJECT>"></iframe>
                                            </div>
                                        <h3>Photography style</h3> 
                                            <div class="videocontainer radius6">
                                            <OBJECT width="400" height="150"  ><PARAM name="movie" value="MPFLVPlayer.swf" /><PARAM name="allowFullScreen" value="true" /><PARAM name="FlashVars" value="fn=../../../www.youtube.com/watch@v=BuAtapRfauM&flvskin=MPFLVSkin.swf" /><EMBED src="MPFLVPlayer.swf"  width="400" height="150"  type="application/x-shockwave-flash" allowFullScreen="true" FlashVars="fn=../../../www.youtube.com/watch@v=BuAtapRfauM&flvskin=MPFLVSkin.swf"></EMBED></OBJECT>                </div>
                    </div>
              </div>
              <div class="swiper-scrollbar4"></div>
     </div>
     </div>
      <!--Page 7 content-->
      <div class="swiper-slide sliderbg yellow">
      <div class="swiper-container swiper-nested7">
               <div class="swiper-wrapper">
                    <div class="swiper-slide">
                              <div class="slide-inner">
                                        <div class="pages_container">
                                        <h2 class="page_title">Our Clients</h2>
                                       <div class="client_row"> 
                                        <div class="service_box">
                                          <div class="services_icon"><img src="images/icons/clients.png" alt="" title="" /></div>
                                          <div class="service_content">
                                          <h4>Web company</h4>
                                          <p>Lorem ipsum dolor sit amet, <a href="#"><strong>consectetur adipisicing elit</strong></a>, sed do eiusmod tempor</p>
                                          </div>
                                        </div> 
                                        <h3>Things we done for this client:</h3>
                                        <ul class="listing">
                                        <li>Proin dignissim risus ut quam aliquam dignissim.</li>
                                        <li>Nunc erat eros, cursus et commodo vitae, pulvinar ac libero.</li>
                                        <li>In erat elit, bibendum vitae commodo vitae, bibendum non justo.</li>
                                        </ul> 
                                        <a href="#" class="button_12 green">See work</a>  <a href="#" class="button_12 blue">Client web</a> 
                                      </div>
                                      <div class="client_row">                                  
                                        <div class="service_box">
                                          <div class="services_icon"><img src="images/icons/clients.png" alt="" title="" /></div>
                                          <div class="service_content">
                                          <h4>Design company</h4>
                                          <p>Lorem ipsum dolor sit <a href="#">amet consectetur</a> adipisicing elit, <strong>sed do eiusmod</strong> tempor</p>
                                          </div>
                                        </div>
                                        <h3>Things we done for this client:</h3>
                                        <ul class="listing">
                                        <li>Proin dignissim risus ut quam aliquam dignissim.</li>
                                        <li>Nunc erat eros, cursus et commodo vitae, pulvinar ac libero.</li>
                                        <li>In erat elit, bibendum vitae commodo vitae, bibendum non justo.</li>
                                        </ul>
                                        <a href="#" class="button_12 green">See work</a>  <a href="#" class="button_12 blue">Client web</a>  
                                      </div>
                                      
                                      
                                        <div class="clearfix"></div>
    					<div class="scrolltop radius20"><a href="#" class="scrolltop7"><img src="images/icons/top.png" alt="Go on top" title="Go on top" /></a></div>
                                        </div>
                                        <!--End of page container-->
                              </div>
                    </div>
              </div>
              <div class="swiper-scrollbar7"></div>
     </div>
     </div>
      <!--Page 8 content-->
      <div class="swiper-slide sliderbg blue">
      <div class="swiper-container swiper-nested8">
               <div class="swiper-wrapper">
                    <div class="swiper-slide">
                              <div class="slide-inner">
                                        <div class="pages_container">
                                        <h2 class="page_title">Latest Tweets</h2>
                                        <div class="tweet"></div>
                                        <a href="#" class="button_11 darkblue">Follow Us!</a>
                                        <div class="clearfix"></div>
										<div class="scrolltop radius20"><a href="#" class="scrolltop8"><img src="images/icons/top.png" alt="Go on top" title="Go on top" /></a></div>
                                        </div>
                                        <!--End of page container-->
                              </div>
                    </div>
              </div>
              <div class="swiper-scrollbar8"></div>
     </div>
     </div>
      <!--Page 9 content-->
      <div class="swiper-slide sliderbg bluegreen">
      <div class="swiper-container swiper-nested9">
               <div class="swiper-wrapper">
                    <div class="swiper-slide">
                              <div class="slide-inner">
                                        <div class="pages_container">
                                        
                                        <h2 class="page_title">Get in touch</h2>
                                            <div class="form">
                                            <form id="contact-us" action="" method="post">
                                            <label>Name:</label>
                                            <input type="text" name="contactName" id="contactName" value="" class="form_input txt requiredField" />
                                            <label>Email:</label>
                                            <input type="text" name="email" id="email" value="" class="form_input txt requiredField email" />
                                            <label>Message:</label>
                                            <textarea name="comments" id="commentsText" class="form_textarea txtarea requiredField" rows="" cols=""></textarea>
                                            <input type="hidden" name="submitted" id="submitted" value="true" />
                                            <input name="submit" type="submit" class="form_submit darkblue" value="Send" />
                                            </form>
                                            </div>

                                            
                                       <h2>Let's socialize</h2>     
                                            <ul class="social">
                                            <li class="social_facebook"><a href="#"><img src="images/icons/social/facebook.png" alt="" title="" border="0" /></a></li>
                                            <li class="social_twitter"><a href="#"><img src="images/icons/social/twitter.png" alt="" title="" border="0" /></a></li>
                                            <li class="social_google"><a href="#"><img src="images/icons/social/google.png" alt="" title="" border="0" /></a></li>
                                            <li class="social_pinterest"><a href="#"><img src="images/icons/social/pinterest.png" alt="" title="" border="0" /></a></li>
                                            <li class="social_flickr"><a href="#"><img src="images/icons/social/flickr.png" alt="" title="" border="0" /></a></li>
                                            <li class="social_digg"><a href="#"><img src="images/icons/social/digg.png" alt="" title="" border="0" /></a></li>
                                            </ul>
                                        <h2>Give Us a call</h2>    
                                        <a href="tel_3A123 456 789" class="call_button">Click To Call Now!</a>
                                        <a href="../../../maps.google.com/maps@q=houston usa&hl=ro&sll=37.0625,-95.677068&sspn=53.961216,114.169922&hnear=Houston, Harris, Texas&t=m&z=5" class="map_button">View our location</a>  

                                        <div class="clearfix"></div>
                                        <div class="scrolltop radius20"><a href="#" class="scrolltop9"><img src="images/icons/top.png" alt="Go on top" title="Go on top" /></a></div>    
                                        </div>
                                        <!--End of page container-->
                              </div>
                    </div>
              </div>
              <div class="swiper-scrollbar9"></div>
     </div>
     </div>
       
     <!--End of pages--> 

    </div>
    <div class="pagination"></div>
  </div>
<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="js/jquery.swipebox.js"></script>
<script type="text/javascript" src="js/idangerous.swiper-2.1.min.js"></script>
<script type="text/javascript" src="js/idangerous.swiper.scrollbar-2.1.js"></script>
<script type="text/javascript" src="js/jquery.tabify.js"></script>
<script type="text/javascript" src="js/jquery.fitvids.js"></script>
<script type="text/javascript" src="js/code.js"></script>
<script type="text/javascript" src="js/load.js"></script>
<!--Twitter Feed-->
<script type="text/javascript" src="js/twitter/jquery.tweet.js" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
var $ = jQuery.noConflict();  
jQuery(function($){
$(".tweet").tweet({
  modpath: 'js/twitter/',
  join_text: "auto",
  username: "famousthemes",
  count: 5,
  auto_join_text_default: "we said,",
  auto_join_text_ed: "we",
  auto_join_text_ing: "we were",
  auto_join_text_reply: "we replied",
  auto_join_text_url: "we were checking out",
  loading_text: "loading tweets..."
});
});
</script>
</body>

标签: HTML5 HTML 网站 模版

实例下载地址

HTML5响应式网站模版

不能下载?内容有错? 点击这里报错 + 投诉 + 提问

好例子网口号:伸出你的我的手 — 分享

网友评论

发表评论

(您的评论需要经过审核才能显示)

查看所有0条评论>>

小贴士

感谢您为本站写下的评论,您的评论对其它用户来说具有重要的参考价值,所以请认真填写。

  • 类似“顶”、“沙发”之类没有营养的文字,对勤劳贡献的楼主来说是令人沮丧的反馈信息。
  • 相信您也不想看到一排文字/表情墙,所以请不要反馈意义不大的重复字符,也请尽量不要纯表情的回复。
  • 提问之前请再仔细看一遍楼主的说明,或许是您遗漏了。
  • 请勿到处挖坑绊人、招贴广告。既占空间让人厌烦,又没人会搭理,于人于己都无利。

关于好例子网

本站旨在为广大IT学习爱好者提供一个非营利性互相学习交流分享平台。本站所有资源都可以被免费获取学习研究。本站资源来自网友分享,对搜索内容的合法性不具有预见性、识别性、控制性,仅供学习研究,请务必在下载后24小时内给予删除,不得用于其他任何用途,否则后果自负。基于互联网的特殊性,平台无法对用户传输的作品、信息、内容的权属或合法性、安全性、合规性、真实性、科学性、完整权、有效性等进行实质审查;无论平台是否已进行审查,用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。本站所有资源不代表本站的观点或立场,基于网友分享,根据中国法律《信息网络传播权保护条例》第二十二与二十三条之规定,若资源存在侵权或相关问题请联系本站客服人员,点此联系我们。关于更多版权及免责申明参见 版权及免责申明

;
报警