HTML网站源码-彩色手机APP介绍响应式网页模板-适配移动端&PC端.zip
2024-12-25 14:30
<!--Author: W3layouts
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/-->
<!DOCTYPE html>
<html>
<head>
<title>Cfion App Landing Page Flat Multipurpose Bootstarp responsive Website Template| Home :: w3layouts</title>
<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="Cfion 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='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<link href=https://download.csdn.net/download/black_cat7/"css/bootstrap.css" rel='stylesheet' type='text/css'/>
<link href=https://download.csdn.net/download/black_cat7/"css/style.css" rel="stylesheet" type="text/css" media="all" />
<script src=https://download.csdn.net/download/black_cat7/"http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src=https://download.csdn.net/download/black_cat7/"js/move-top.js"></script>
<script type="text/javascript" src=https://download.csdn.net/download/black_cat7/"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},1200);
});
});
</script>
<!---End-smoth-scrolling---->
<!--Animation-->
<script src=https://download.csdn.net/download/black_cat7/"js/wow.min.js"></script>
<link href=https://download.csdn.net/download/black_cat7/"css/animate.css" rel='stylesheet' type='text/css' />
<script>
new WOW().init();
</script>
<!---/End-Animation---->
</head>
<body>
<div class="header" id="top">
<div class="container">
<div class="header-top">
<div class="logo wow fadeInLeft" data-wow-delay="0.5s">
<a href=https://download.csdn.net/download/black_cat7/"index.html"> <img src=https://download.csdn.net/download/black_cat7/"images/logo.png" class="img-responsive" alt=""></a>
</div>
<div class="header-menu">
<div class="top-menu wow fadeInRight" data-wow-delay="0.5s">
<ul>
<li><a href=https://download.csdn.net/download/black_cat7/"blog.html">blog</a></li>
<li><a class="scroll" href=https://download.csdn.net/download/black_cat7/"#about">about</a></li>
</ul>
</div>
<div class="social-icons">
<ul>
<li class="facebook">
<div id="fb-root"></div>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-href="https://www.facebook.com/w3layouts" data-layout="button_count" data-action="like" data-show-faces="true" data-share="false"></div>
</li>
<li class="twitter">
<a href=https://download.csdn.net/download/black_cat7/"https://twitter.com/w3layouts" class="twitter-share-button" data-dnt="true">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</li>
<li class="google">
<!-- Place this tag in your head or just before your close body tag. -->
<script src=https://download.csdn.net/download/black_cat7/"https://apis.google.com/js/platform.js" async defer></script>
<!-- Place this tag where you want the +1 button to render. -->
<div class="g-plusone" data-size="medium"></div>
</li>
</ul>
</div>
</div>
<div class="clearfix"></div>
</div>
<div class="header-grids">
<div class="col-md-4 header-left wow bounceInRight animated" data-wow-delay="0.4s" style="visibility: visible; -webkit-animation-delay: 0.4s;">
<img src=https://download.csdn.net/download/black_cat7/"images/iphone.png" class="img-responsive" alt="">
</div>
<div class="col-md-8 header-right wow bounceIn animated" data-wow-delay="0.4s" style="visibility: visible; -webkit-animation-delay: 0.4s;"">
<div class="header-info">
<h1> look at me,</h1>
<h2> I am Here!</h2>
</div>
<div class="button">
<a href=https://download.csdn.net/download/black_cat7/"#"><img src=https://download.csdn.net/download/black_cat7/"images/appstore1.png"></a>
</div>
<div class="button1">
<a href=https://download.csdn.net/download/black_cat7/"#"><img src=https://download.csdn.net/download/black_cat7/"images/appstore2.png"></a>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
<div class="content">
<div class="feature-section">
<div class="container">
<div class="col-md-6 feature-left wow bounceIn animated" data-wow-delay="0.4s" style="visibility: visible; -webkit-animation-delay: 0.4s;">
<div class="main-grid">
<img src=https://download.csdn.net/download/black_cat7/"images/vector.png">
<h3>main features</h3>
</div>
<div class="chat-grid">
<div class="chat">
<h3>chat:)</h3>
<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
</div>
<div class="chat-icon">
<img src=https://download.csdn.net/download/black_cat7/"images/ring.png">
</div>
<div class="clearfix"></div>
</div>
<div class="add-grid">
<div class="addgroup">
<h3>add groups</h3>
<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
</div>
<div class="add-icon">
<img src=https://download.csdn.net/download/black_cat7/"images/ring1.png">
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="col-md-6 feature-right wow bounceIn animated" data-wow-delay="0.4s" style="visibility: visible; -webkit-animation-delay: 0.4s;">
<img src=https://download.csdn.net/download/black_cat7/"images/iphone5.png" class="img-responsive" alt="">
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="discover-section">
<div class="container">
<div class="col-md-4 discover-left wow bounceInRight animated" data-wow-delay="0.4s" style="visibility: visible; -webkit-animation-delay: 0.4s;">
<img src=https://download.csdn.net/download/black_cat7/"images/iphone2.png" class="img-responsive" alt="">
</div>
<div class="col-md-8 discover-right wow bounceInLeft animated" data-wow-delay="0.4s" style="visibility: visible; -webkit-animation-delay: 0.4s;">
<h3>DISCOVER, MAKE, AND COLLECT BEAUTIFUL THINGS,</h3>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="fion-section" id="about">
<div class="container">
<div class="col-md-7 fion-left wow bounceIn animated" data-wow-delay="0.4s" style="visibility: visible; -webkit-animation-delay: 0.4s;">
<img src=https://download.csdn.net/download/black_cat7/"images/iphone3.png">
</div>