<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Board - Free Bootstrap 4 Product Landing Page Template</title>
<meta name="description" content="Board is a beautiful Bootstrap 4 template for product landing pages." />
<!--Google fonts-->
<link href="https://fonts.googleapis.com/css?family=Arimo:400,400i,700,700i" rel="stylesheet">
<!--vendors styles-->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Bootstrap CSS / Color Scheme -->
<link rel="stylesheet" href="css/default.css" id="theme-color">
</head>
<body>
<!--navigation-->
<section class="bg-white px-md-3 py-3">
<div class="container-fluid">
<div class="d-flex flex-row align-items-center">
<h2><a href="index.html">Board</a></h2>
<a href="#buy" class="ml-auto page-scroll">
<em data-feather="shopping-bag" class="mr-2"></em>
</a>
</div>
</div>
</section>
<!--hero header-->
<section id="home">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 order-2 order-md-1 ml-auto my-auto py-md-8 p-5 text-center text-md-left">
<h1>The whiteboard for creative ideas.</h1>
<p class="lead mb-4">Makes drawing, collaboration and sharing easy.</p>
<div class="mb-4">
<a href="#buy" class="btn btn-primary page-scroll d-flex d-md-inline-flex flex-row align-items-center justify-content-center">
<em data-feather="shopping-bag" width="20" height="20" class="mr-2"></em>
Buy now
</a>
<a href="#watchModal" data-toggle="modal" class="btn btn-link font-weight-bold text-primary d-inline-flex flex-row align-items-center show-video">
<em data-feather="play" width="20" height="20" class="mr-2"></em>
Watch video
</a>
</div>
<div class="mt-5">
<p>Trusted by companies like</p>
<div class="mb-3">
<img src="img/press/press-1.png" alt="Client 1" class="img-customer">
<img src="img/press/press-2.png" alt="Client 2" class="img-customer">
<img src="img/press/press-3.png" alt="Client 3" class="img-customer">
</div>
</div>
</div>
<div class="col-md-6 order-1 order-md-2 bg-image" style="background-image: url(img/board-1.jpg)"></div>
</div>
</div>
</section>
<!--why section-->
<section class="bg-white" id="why">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 bg-image" style="background-image: url(img/board-2.jpg)"></div>
<div class="col-md-6 ml-auto my-auto py-md-7 p-5">
<h2>Why another whiteboard?</h2>
<p class="lead text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<ul class="features-list">
<li>Lorem ipsum dolor sit amet.</li>
<li>Aenean commodo ligula eget dolor.</li>
<li>Aenean massa.</li>
<li>Cum sociis natoque penatibus mus.</li>
<li>Lorem ipsum consectetuer adipiscing elit.</li>
<li>Aenean commodo ligula eget dolor.</li>
</ul>
</div>
</div>
</div>
</section>
<!--features section-->
<section class="bg-white" id="features">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 order-2 order-md-1 ml-auto my-auto py-md-6 p-5">
<h2>Designed for team collaboration.</h2>
<p class="lead text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="row mt-5">
<div class="col-sm-6 mb-2">
<h6>Easy sketching</h6>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="col-sm-6 mb-2">
<h6>Write smoothly</h6>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="col-sm-6 mb-2">
<h6>Quick eraser</h6>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="col-sm-6 mb-2">
<h6>Wireframing support</h6>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="col-sm-6 mb-2">
<h6>Take quick notes</h6>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="col-sm-6 mb-2">
<h6>1 year gaurantee</h6>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
<div class="col-md-6 order-1 order-md-2 bg-image" style="background-image: url(img/board-3.jpg)"></div>
</div>
</div>
</section>
<!--first review section-->
<section class="bg-white" id="first-review">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 bg-image" style="background-image: url(img/board-4.jpg)"></div>
<div class="col-md-6 ml-auto my-auto py-md-8 p-5 text-center">
<div class="review">
<p class="quote">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean commodo ligula eget dolor.</p>
<div class="mt-4 d-flex flex-row align-items-center justify-content-center">
<img src="img/client-1.jpg" class="img-review rounded-circle mr-2" alt="Client 1"/>
<span class="text-muted">Jack Dorson, Design at Facebook</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!--second review section-->
<section class="bg-white" id="second-review">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 order-2 order-md-1 ml-auto my-auto py-md-8 p-5 text-center">
<div class="review">
<p class="quote">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum in ni
企业级网站源码-左右图文产品功能展示网页模板-响应式适配移动端.zip （25个子文件） 
企业级网站源码-左右图文产品功能展示网页模板-响应式适配移动端 html js 
scripts.js 1KB img 
client-1.jpg 56KB board-2.jpg 272KB board-5.jpg 247KB client-2.jpg 50KB press 
press-1.png 5KB press-3.png 5KB press-2.png 6KB board-6.jpg 228KB board-4.jpg 134KB board-1.jpg 291KB board-3.jpg 111KB css green.css 182KB black.css 182KB default.css 182KB purple.css 182KB cyan.css 182KB teal.css 182KB pink.css 182KB indigo.css 182KB orange.css 182KB red.css 182KB scss _variables.scss 22KB _custom.scss 7KB
index.html 19KB资源评论
DTcode7
- 粉丝: 3w+
- 资源: 4986
