网站模板-APP应用内服务介绍响应式网页模板-适配移动端界面-HTML源码.zip资源-CSDN文库

共30个文件

png：15个

jpg：6个

js：5个

版权申诉

HTML源码

JavaScript

适配移动端

5 浏览量 2024-03-23 09:38:07 上传评论收藏 1.05MB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

网站模板-APP应用内服务介绍响应式网页模板-适配移动端界面-HTML源码.zip （30个子文件）

网站模板-APP应用内服务介绍响应式网页模板-适配移动端界面-HTML源码

html

responsiveslides.min.js 3KB

easing.js 5KB

move-top.js 1KB

wow.min.js 5KB

jquery.min.js 82KB

css

style.css 24KB

animate.css 67KB

bootstrap.css 124KB

index.html 17KB

images

phn3.jpg 92KB

icons1.png 6KB

m1.jpg 11KB

icon1.png 5KB

icon4.png 5KB

logo.png 4KB

phn2.png 172KB

line.png 3KB

map.jpg 291KB

m2.jpg 22KB

social.png 5KB

nav.png 3KB

pr2.png 11KB

bg.jpg 151KB

pr1.png 10KB

icon3.png 5KB

icons.png 11KB

price.jpg 165KB

easytop.png 3KB

icon2.png 6KB

phn.png 137KB

<!DOCTYPE html> <html> <head> <title>Lucid a Mobile App Landing Flat Bootstarp Responsive Web Template| Home :: w3layouts</title> <link href="css/bootstrap.css" rel='stylesheet' type='text/css' />  <script src="js/jquery.min.js"></script>  <link href="css/style.css" rel="stylesheet" type="text/css" media="all" />  <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="keywords" content="Lucid Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template, Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" /> <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>   <link href="css/animate.css" rel="stylesheet" type="text/css" media="all"> <script src="js/wow.min.js"></script> <script> new WOW().init(); </script>  <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900,300italic,400italic,600italic,700italic' rel='stylesheet' type='text/css'>  <script type="text/javascript" src="js/move-top.js"></script> <script type="text/javascript" src="js/easing.js"></script> <script type="text/javascript"> jQuery(document).ready(function($) { $(".scroll").click(function(event){ event.preventDefault(); $('html,body').animate({scrollTop:$(this.hash).offset().top},900); }); }); </script>  </head> <body>  <div class="banner"> <div class="container"> <div class="header"> <div class="logo wow fadeInLeft" data-wow-delay="0.5s"> <a href="index.html"><img src="images/logo.png" alt=""/></a> </div> <div class="top-menu"> <span class="menu"></span> <ul> <li class="active"><a href="index.html">Home</a></li> <li><a class="scroll" href="#features">Features</a></li> <li><a class="scroll" href="#about">About</a></li> <li><a class="scroll" href="#testimonials">Testimonials</a></li> <li><a class="scroll" href="#pricing">Pricing</a></li> <li><a class="scroll" href="#contact">Contact</a></li> </ul> </div>  <script> $("span.menu").click(function(){ $(".top-menu ul").slideToggle("slow" , function(){ }); }); </script>  <div class="clearfix"></div> </div> <div class="banner-info"> <div class="col-md-6 banner-text wow fadeInRight" data-wow-delay="0.5s"> <h3>introducing lucid theme</h3> <h1>Carefully crafted and beautiful landing page.</h1> <p>Etiam ullamcorper et turpis eget hendrerit. Praesent varius risus mi, at elementum magna ultricies accumsan. Cras venenatis lacus sed dolor placerat tempus. Morbi blandit at neque ut imperdiet.</p> <a class="download" href="#">DOWNLOAD NOW</a> <a class="view hvr-bounce-to-left" href="#">VIEW FEATURES</a> </div> <div class="col-md-6 banner-pic wow fadeInLeft" data-wow-delay="0.5s"> <img src="images/phn.png" alt=""/> </div> <div class="clearfix"></div> </div> </div> </div>  <div id="features" class="features"> <div class="container"> <div class="features-head"> <h4>PRODUCT OVERVIEW</h4> <h3>List of amazing features</h3> </div> <div class="features-section"> <div class="col-md-3 feature-grid"> <img class="wow bounceIn" data-wow-delay="0.4s" src="images/icon1.png" alt=""/> <h3>Responsive</h3> <p>Fusce fermentum placerat magna ac pharetra. Aliquam euismod elit non ipsum lacinia consectetur.</p> </div> <div class="col-md-3 feature-grid"> <img class="wow bounceIn" data-wow-delay="0.4s" src="images/icon2.png" alt=""/> <h3>Customizable</h3> <p>Fusce fermentum placerat magna ac pharetra. Aliquam euismod elit non ipsum lacinia consectetur.</p> </div> <div class="col-md-3 feature-grid"> <img class="wow bounceIn" data-wow-delay="0.4s" src="images/icon3.png" alt=""/> <h3>Lovely design</h3> <p>Fusce fermentum placerat magna ac pharetra. Aliquam euismod elit non ipsum lacinia consectetur.</p> </div> <div class="col-md-3 feature-grid"> <img class="wow bounceIn" data-wow-delay="0.4s" src="images/icon4.png" alt=""/> <h3>Mobile Friendly</h3> <p>Fusce fermentum placerat magna ac pharetra. Aliquam euismod elit non ipsum lacinia consectetur.</p> </div> <div class="clearfix"></div> </div> </div> </div>  <div id="about" class="about"> <div class="container"> <div class="about-top"> <div class="col-md-6 about-device wow fadeInLeft" data-wow-delay="0.5s"> <img src="images/phn2.png" alt=""/> </div> <div class="col-md-6 about-device-info wow fadeInRight" data-wow-delay="0.5s"> <div class="device-text"> <h4>DIP INTO THE DETAILS</h4> <h3>Beautiful on every device</h3> <p>Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non mauris vitae erat consequat auctor eu in elit. </p> </div> <div class="about-list"> <ul> <li><a href="#"><span class="abt1"></span>Awesome desgn</a></li> <li><a href="#"><span class="abt2"></span>Fully responsive</a></li> <li><a href="#"><span class="abt3"></span>Retina ready</a></li> <li><a href="#"><span class="abt4"></span>Tons of features and easy to use</a></li> </ul> </div> </div> <div class="clearfix"></div> </div> </div> </div> <div class="about-bottom"> <div class="container"> <div class="col-md-6 about-customize wow fadeInRight" data-wow-delay="0.5s"> <div class="device-text-bottom"> <h4>DIP INTO THE DETAILS</h4> <h3>Super easy to customize</h3> <p>Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non mauris vitae erat consequat auctor eu in elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p> </div> </div> <div class="col-md-6 about-device-bottom wow fadeInLeft" data-wow-delay="0.5s"> <img src="images/phn3.jpg" alt=""/> </div> <div class="clearfix"></div> </div> </div>  <script src="js/responsiveslides.min.js"></script> <script> // You can also use "$(window).load(function() {" $(function () { $("#slider2").responsiveSlides({ auto: true, pager: true, speed: 300, namespace: "callbacks", }); }); </script>  <div id="testimonials" class="pricing"> <div class="container"> <div class="pricing-text"> <h4>QUALITY HAS ITS PRICE</h4> <h3>Pricings & Plans</h3> </div>  <div class="pricing-grids"> <div class="slider"> <ul class="rslides" id="slider2"> <li> <div class="col-md-6 pricing-plans"> <p>Once upon a time all the Rivers combined to protest against the action of the Sea in making their waters salt. “When we come to you,” said they to the Sea.</p> <div class="pic1"> <img src="images/pr1.png" alt=""/> </div>

评论收藏

内容反馈

版权申诉