产品试用升级服务网页模板-适配移动端&PC端-HTML网站源码.zip资源-CSDN文库

共19个文件

css：10个

jpg：5个

scss：2个

版权申诉

HTML

网站源码

解压即用

149 浏览量 2024-04-01 15:37:23 上传评论收藏 966KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

产品试用升级服务网页模板-适配移动端&PC端-HTML网站源码.zip （19个子文件）

产品试用升级服务网页模板-适配移动端&PC端-HTML网站源码

html

scripts.js 2KB

img

client-1.jpg 57KB

client-2.jpg 56KB

product3.jpg 130KB

product1.jpg 234KB

product2.jpg 237KB

css

green.css 185KB

black.css 185KB

default.css 185KB

purple.css 185KB

cyan.css 185KB

teal.css 185KB

pink.css 185KB

indigo.css 185KB

orange.css 185KB

red.css 185KB

scss

_variables.scss 22KB

_custom.scss 10KB

index.html 22KB

<!doctype html> <html lang="en"> <head>  <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Milestone - Free Bootstrap 4 Product Landing Page Template</title> <meta name="description" content="Milestone is a beautiful Bootstrap 4 template for product landing pages." />  <link href="https://fonts.googleapis.com/css?family=Karla:400,400i,700,700i|Work+Sans:600" rel="stylesheet">  <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">  <link rel="stylesheet" href="css/default.css" id="theme-color"> </head> <body>  <nav class="navbar navbar-expand-md navbar-light fixed-top bg-white sticky-navigation"> <a class="navbar-brand" href="index.html"> Milestone </a> <button class="navbar-toggler navbar-toggler-right border-0" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> <span data-feather="menu"></span> </button> <div class="collapse navbar-collapse" id="navbarCollapse"> <ul class="navbar-nav ml-auto"> <li class="nav-item"> <a class="nav-link page-scroll" href="#product">Product</a> </li> <li class="nav-item"> <a class="nav-link page-scroll" href="#pricing">Pricing</a> </li> <li class="nav-item"> <a class="nav-link page-scroll" href="#faq">FAQ</a> </li> <li class="nav-item"> <a class="nav-link" href="#"> Log in </a> </li> </ul> <form class="form-inline"> <a class="btn btn-primary" href="#"> Try for free </a> </form> </div> </nav>  <section class="pt-7 pt-md-0" id="home"> <div class="container"> <div class="row vh-md-100"> <div class="col-md-6 col-sm-10 my-auto mx-auto text-center"> <h1>The better to way to collect user feedback</h1> <p class="lead">Nam liber tempor cum soluta nobis eleifend option congue nihil imper per tem por legere me doming.</p> <p class="text-muted my-4">Try 14 days for free. No credit card required.</p> <a href="#" class="btn btn-primary d-inline-flex flex-row align-items-center"> <em data-feather="user" width="20" height="20" class="mr-2"></em> Get started for free </a> <div class="watch-wrapper text-center"> <a href="#" class="d-flex flex-row align-items-center justify-content-center text-muted watch-video"> <em data-feather="play" width="20" height="20" class="mr-2"></em> Watch video </a> </div> </div> </div> </div> </section>  <section class="pt-6" id="product"> <div class="container-fluid"> <div class="row"> <div class="col-md-5 ml-auto order-2 order-md-1 my-md-auto py-5 py-md-0"> <span class="text-uppercase text-muted small-xl">Share product updates</span> <h2 class="mt-2 mb-3">Document your complete product journey.</h2> <p class="lead"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id ante posuere, vestibulum mauris eget, efficitur felis. Vestibulum tincidunt sit amet odio at gravida. </p> </div> <div class="col-md-6 order-1 order-md-2"> <img src="img/product1.jpg" class="img-fluid d-block mx-auto rounded img-raised" alt="Product 1"/> </div> </div> <div class="row mt-7"> <div class="col-md-6"> <img src="img/product2.jpg" class="img-fluid d-block mx-auto rounded img-raised" alt="Product 2"/> </div> <div class="col-md-5 mx-auto my-md-auto py-5 py-md-0"> <span class="text-uppercase text-muted small-xl">Collect feedback</span> <h2 class="mt-2 mb-3">Build what your customers really want.</h2> <p class="lead"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id ante posuere, vestibulum mauris eget, efficitur felis. Vestibulum tincidunt sit amet odio at gravida. </p> </div> </div> <div class="row mt-7"> <div class="col-md-5 ml-auto order-2 order-md-1 my-md-auto py-5 py-md-0"> <span class="text-uppercase text-muted small-xl">Notify customers</span> <h2 class="mt-2 mb-3">Build customer trust with email notifications.</h2> <p class="lead"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id ante posuere, vestibulum mauris eget, efficitur felis. Vestibulum tincidunt sit amet odio at gravida. </p> </div> <div class="col-md-6 order-1 order-md-2"> <img src="img/product3.jpg" class="img-fluid d-block mx-auto rounded img-raised" alt="Product 3"/> </div> </div> </div> </section>  <section class="pt-6" id="features"> <div class="container"> <div class="row"> <div class="col-md-10 mx-auto"> <h4>Wait, there is a lot more.</h4> <div class="row mt-5"> <div class="col-sm-4 mb-4"> <h6>Custom domain</h6> <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> <div class="col-sm-4 mb-4"> <h6>Custom branding</h6> <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> <div class="col-sm-4 mb-4"> <h6>Google Analytics</h6> <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> <div class="col-sm-4 mb-4"> <h6>Single sign-on</h6> <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> <div class="col-sm-4 mb-4"> <h6>Team</h6> <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

评论收藏

内容反馈

版权申诉