<!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>Playback - Free Bootstrap 4 App Landing Page Template</title>
<meta name="description" content="Playback is a beautiful Bootstrap 4 template for mobile apps landing pages." />
<!--Inter UI font-->
<link href="https://rsms.me/inter/inter-ui.css" rel="stylesheet">
<!--vendors styles-->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/slick-carousel/1.8.1/slick.min.css">
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css">
<!-- Bootstrap CSS / Color Scheme -->
<link rel="stylesheet" href="css/default.css" id="theme-color">
</head>
<body>
<!--main columns-->
<section class="p-0">
<div class="container-fluid">
<div class="row vh-md-100">
<div class="col-md-6 col-md-fixed my-auto col-mockup">
<ul class="list-unstyled slick-mockups">
<li><img src="img/mockup-1.png" alt="Mockup 1" class="img-fluid d-block mx-auto"/></li>
<li><img src="img/mockup-2.png" alt="Mockup 2" class="img-fluid d-block mx-auto"/></li>
<li><img src="img/mockup-3.png" alt="Mockup 3" class="img-fluid d-block mx-auto"/></li>
</ul>
</div>
<div class="col-md-6 ml-auto px-0">
<!--hero header-->
<section class="mt-6" id="home">
<div class="container">
<div class="row">
<div class="col-md-11 mx-auto text-center">
<h1>The better way to manage your to-do list.</h1>
<div class="divider mx-auto bg-dark"></div>
<p class="lead text-muted mb-5">Playback lets you keep track of everything in one place, so you can get it all done and enjoy more peace of mind along the way.</p>
<div class="my-5">
<a href="#"><img src="img/apple_store.png" class="img-store"/> </a>
<a href="#" class="ml-2"><img src="img/google-play.png" class="img-store"/></a>
</div>
<div class="slick-reviews small-xl mt-4 px-md-5">
<div class="review">
<p class="text-muted">Nam liber tempor cum soluta nobis eleifend option congue, soluta nobis eleifend option congue, tempor cum soluta nobis eleifend, nihil imper.</p>
<p class="text-muted">
<span>
<em class="fa fa-star"></em>
<em class="fa fa-star"></em>
<em class="fa fa-star"></em>
<em class="fa fa-star"></em>
<em class="fa fa-star"></em>
</span>
<span>Erik Derr</span>
</p>
</div>
<div class="review">
<p class="text-muted">Nam liber tempor cum soluta, soluta nobis eleifend option congue, tempor cum soluta nobis soluta nobis eleifend option congue, eleifend, nihil imper.</p>
<p class="text-muted">
<span>
<em class="fa fa-star"></em>
<em class="fa fa-star"></em>
<em class="fa fa-star"></em>
<em class="fa fa-star"></em>
<em class="fa fa-star-half-empty"></em>
</span>
<span>Rosita Smith</span>
</p>
</div>
<div class="review">
<p class="text-muted">Nam liber tempor cum soluta, soluta nobis eleifend option congue, tempor cum soluta nobis eleifend, nihil imper.</p>
<p class="text-muted">
<span>
<em class="fa fa-star"></em>
<em class="fa fa-star"></em>
<em class="fa fa-star"></em>
<em class="fa fa-star"></em>
<em class="fa fa-star-o"></em>
</span>
<span>Kathrine Jones</span>
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- features section -->
<section class="mt-6" id="features">
<div class="container">
<div class="row">
<div class="col-md-11 mx-auto">
<h3 class="text-center">Never miss any important thing again.</h3>
<div class="divider divider-sm mx-auto bg-dark"></div>
<div class="row mt-5">
<div class="col-sm-6 mb-4">
<h6>Bank-level encryption</h6>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</div>
<div class="col-sm-6 mb-4">
<h6>Activity log</h6>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</div>
<div class="col-sm-6 mb-4">
<h6>Comments</h6>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</div>
<div class="col-sm-6 mb-4">
<h6>File uploads</h6>
<p c
没有合适的资源?快使用搜索试试~ 我知道了~
温馨提示
这套HTML源代码文件是一个完整的网页模板,适用于各种类型的网站。它采用了最新的HTML5和CSS3技术,具有响应式设计,能够适应不同设备的屏幕尺寸。此外,它还包含了丰富的JavaScript插件,可以实现各种复杂的交互效果。这套源代码文件还具有高度的可定制性。您可以根据自己的需求对页面进行布局调整、颜色更改以及内容替换,轻松打造出符合您项目风格的网站。同时,我们的代码结构清晰、注释详细,方便您学习和理解HTML、CSS和JavaScript等前端技术。您可能面临着课程设计、毕业设计等挑战。这套源代码文件将成为您的得力助手,帮助您展示自己的才华和技能。通过使用这套源代码文件,您可以轻松地完成网站搭建任务,为您的课程设计或毕业设计增添亮点。总的来说,这套HTML源代码文件是一个高效、实用、易用的工具,无论你是专业的网页设计师,还是业余的编程爱好者,都值得拥有。
资源推荐
资源详情
资源评论
收起资源包目录
待办事项APP展示页模板-适配移动端&PC端-HTML网站源码.zip (22个子文件)
待办事项APP展示页模板-适配移动端&PC端-HTML网站源码
html
js
scripts.js 2KB
img
blog-1.jpg 241KB
apple_store.png 14KB
mockup-2.png 182KB
blog-2.jpg 243KB
mockup-3.png 194KB
qr-code.png 4KB
google-play.png 20KB
mockup-1.png 125KB
css
green.css 184KB
black.css 184KB
default.css 184KB
purple.css 184KB
cyan.css 184KB
teal.css 184KB
blue.css 184KB
indigo.css 184KB
orange.css 184KB
red.css 184KB
scss
_variables.scss 23KB
_custom.scss 8KB
index.html 17KB
共 22 条
- 1
资源评论
- sssn1232024-10-19实在是宝藏资源、宝藏分享者!感谢大佬~
DTcode7
- 粉丝: 3w+
- 资源: 4986
下载权益
C知道特权
VIP文章
课程特权
开通VIP
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功