HTML网站源码-简约手机产品介绍网页模板-适配移动端&PC端.zip
2024-12-26 08:38
<!--
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>The Minimalist bootstrap Website Template | Home :: w3layouts</title>
<link href=https://download.csdn.net/download/black_cat7/"https://download.csdn.net/download/black_cat7/css/bootstrap.css" rel='stylesheet' type='text/css' />
<!--jQuery (necessary for Bootstrap's JavaScript plugins)-->
<script src=https://download.csdn.net/download/black_cat7/"https://download.csdn.net/download/black_cat7/js/jquery.min.js"></script>
<!-- Custom Theme files -->
<link href=https://download.csdn.net/download/black_cat7/"https://download.csdn.net/download/black_cat7/css/style.css" rel='stylesheet' type='text/css' />
<link rel="stylesheet" type="text/css" href=https://download.csdn.net/download/black_cat7/"https://download.csdn.net/download/black_cat7/css/component.css" />
<!--Custom Theme files-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
</script>
<!--webfonts-->
<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic' rel='stylesheet' type='text/css'>
<!--webfonts-->
<!--start-smoth-scrolling-->
<script type="text/javascript" src=https://download.csdn.net/download/black_cat7/"https://download.csdn.net/download/black_cat7/js/move-top.js"></script>
<script type="text/javascript" src=https://download.csdn.net/download/black_cat7/"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},1000);
});
});
</script>
<!--start-smoth-scrolling-->
</head>
<body>
<!--header-->
<div class="header">
<div class="header-top">
<div class="container">
<div class="logo">
<a href=https://download.csdn.net/download/black_cat7/"index.html"><img src=https://download.csdn.net/download/black_cat7/"https://download.csdn.net/download/black_cat7/images/logo.png" /></a>
</div>
<!--top-nav-->
<nav class="top-nav">
<ul class="top-nav">
<li class="active"><a href=https://download.csdn.net/download/black_cat7/"#home" class="scroll">Home </a></li>
<li><a href=https://download.csdn.net/download/black_cat7/"#feature" class="scroll">Features</a></li>
<li><a href=https://download.csdn.net/download/black_cat7/"#portfolio" class="scroll">Portfolio</a></li>
<li><a href=https://download.csdn.net/download/black_cat7/"#subscribe" class="scroll">Subscribe</a></li>
</ul>
<a href=https://download.csdn.net/download/black_cat7/"#" id="pull"><img src=https://download.csdn.net/download/black_cat7/"https://download.csdn.net/download/black_cat7/images/menu-icon.png" title="menu" /></a>
</nav>
<div class="clearfix"> </div>
<!-- script-for-menu -->
<!----start-top-nav-script---->
<script>
$(function() {
var pull = $('#pull');
menu = $('nav ul');
menuHeight = menu.height();
$(pull).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
});
$(window).resize(function(){
var w = $(window).width();
if(w > 320 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});
});
</script>
<!--End-top-nav-script-->
<div class="clearfix"> </div>
</div>
</div>
<!--banner-->
<div class="banner">
<div class="container">
<div class="banner-info">
<h1>One Page Template</h1>
<h2>Minimalist</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse gravida placerat ultricies. Donec in lorem porta, tempus odio ut, iaculis lacus. Etiam dictum, est sit amet cursus dignissim, nulla velit commodo leo, id lacinia nulla elit non libero. </p>
<a href=https://download.csdn.net/download/black_cat7/"#feature" class="scroll"><h3>Discover<img src=https://download.csdn.net/download/black_cat7/"https://download.csdn.net/download/black_cat7/images/Arrow.png" class="scroll1" alt=""/></h3></a>
</div>
</div>
</div>
</div>
<!--Features-->
<div class="Features" id="feature">
<div class="container">
<div class="feature-section">
<div class="col-md-6 phone">
<img src=https://download.csdn.net/download/black_cat7/"https://download.csdn.net/download/black_cat7/images/phone.png" class="img-responsive" alt="" />
</div>
<div class="col-md-6 phone-text">
<h3>Vivamus com<span>modo tellus</span></h3>
<p>Fusce eget sapien cursus, elementum nunc vitae, euismod est. Donec vehicula purus enim, id placerat arcu volutpat quis. Aliquam non elementum purus, vitae tristique est. Ut vitae auctor velit. Proin ut malesuada nibh. Suspendisse laoreet elit id aliquam pulvinar. In et lacus nec arcu sodales euismod. Aenean quam turpis, pulvinar eu nibh id.</p>
<a class="slide-btn" href=https://download.csdn.net/download/black_cat7/"#">Next<span> </span></a>
</div>
<div class="clearfix"> </div>
</div>
</div>
</div>
<!--portfolio-->
<div class="Portfolio" id="portfolio">
<div class="container">
<div class="port-section">
<h3>PORTFOLIO</h3>
</div>
<div class="portfolio">
<ul id="filters" class="clearfix">
<li><span class="filter" data-filter="app card icon logo web">All</span></li>
<li><span class="filter" data-filter="card">Branding</span></li>
<li><span class="filter" data-filter="logo">App Store</span></li>
<li class="active"><span class="filter" data-filter="app">Photography</span></li>
</ul>
<div id="portfoliolist">
<div class="portfolio app mix_all" data-cat="app" style="display: inline-block; opacity: 1;">
<div class="portfolio-wrapper">
<a href=https://download.csdn.net/download/black_cat7/"#small-dialog" class="b-link-stripe b-animate-go thickbox popup-with-zoom-anim">
<img src=https://download.csdn.net/download/black_cat7/"https://download.csdn.net/download/black_cat7/images/pic1.png" /><div class="b-wrapper"><h2 class="b-animate b-from-left b-delay03 "><img src=https://download.csdn.net/download/black_cat7/"https://download.csdn.net/download/black_cat7/images/icon-eye.png" alt=""/></h2>
<p class="b-animate b-from-right b-delay03 "></p></div></a>
</div>
</div>
<div class="portfolio logo mix_all" data-cat="logo" style="display: inline-block; opacity: 1;">
<div class="portfolio-wrapper">
<a href=https://download.csdn.net/download/black_cat7/"#small-dialog" class="b-link-stripe b-animate-go thickbox popup-with-zoom-anim">
<img src=https://download.csdn.net/download/black_cat7/"https://download.csdn.net/download/black_cat7/images/pic2.png" /><div class="b-wrapper"><h2 class="b-animate b-from-left b-delay03 "><img src=https://download.csdn.net/download/black_cat7/"https://download.csdn.net/download/black_cat7/images/icon-eye.png" alt=""/></h2>
<p class="b-animate b-from-right b-delay03 "></p></div></a>
</div>
</div>
<div class="portfolio card mix_all" data-cat="card" style="display: inline-block; opacity: 1;">
<div class="portfolio-wrapper">
<a href=https://download.csdn.net/download/black_cat7/"#small-dialog2" class="b-link-stripe b-animate-go thickbox popup-with-zoom-anim">
<img src=https://download.csdn.net/download/black_cat7/"https://download.csdn.net/download/black_cat7/images/pic3.png" /><div class="b-wrapper"><h2 class="b-animate b-from-left b-delay03 "><img src=https://download.csdn.net/download/black_cat7/"https://download.csdn.net/download/black_cat7/images/icon-eye.png" alt=""/></h2>
<p class="b-animate b-from-right b-delay03 "></p></div></a>
</div>
</div>
<div class="portfolio logo mix_all" data-cat="logo" style="display: inline-block; opacity: 1;">
<div class="portfolio-wrapper">
<a href=https://download.csdn.net/download/black_cat7/"#small-dialog3" class="b-link-stripe b-animate-go thickbox popup-with-zoom-anim">
<img src=https://download.csdn.net/download/black_cat7/"https://download.csdn.net/download/black_cat7/images/pic4.png" /><div class="b-wrapper"><h2 class="b-animate b-from-left b-delay03 "><img src=https://download.csdn.net/download/black_cat7/"https://download.csdn.net/download/black_cat7/images/icon-eye.png" alt=""/></h2>
<p class="b-animate b-from-right b-delay03 "></p></div></a>
</div>
</div>
<div class="portfolio card mix_all" data-cat="card" style="display: inline-block; opacity: 1;">
<div class="portfolio-wrapper">
<a href=https://download.csdn.net/download/black_cat7/"#small-dialog4" class="b-link-stripe b-animate-go thickbox popup-with-zoom-anim">
<img src=https://download.csdn.net/download/black_cat7/"https://download.csdn.net/download/black_cat7/images/pic5.png" /><div class="b-wrapper"><h2 class="b-animate b-from-left b-delay03 "><img src=https://download.csdn.net/download/black_cat7/"https://download.csdn.net/download/black_cat7/images/icon-eye.png" alt=""/></h2>
<p class="b-animate b-from-right b-delay03 "></p></div></a>
</div>
</div>
<div class="portfolio app mix_all" data-cat="app" style="display: inline-block; opacity: 1;">
<div class="portfolio-wrapper">
<a href=https://download.csdn.net/download/black_cat7/"#small-dialog5" class="b-link-stripe b-animate-go thickbox popup-with-zoom-anim">
<img src=https://download.csdn.net/download/black_cat7/"https://download.csdn.net/download/black_cat7/images/pic6.png" /><div class="b-wrapper"><h2 class="b-animate b-from-left b-delay03 "><img src=https://download.csdn.net/download/black_cat7/"https://download.csdn.net/download/black_cat7/images/icon-eye.png" alt=""/></h2>
<p class="b-animate b-from-right b-delay03 "></p></div></a>
</div>
</div>