bootstarp模板02
HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory --> <!-- CSS -->
<link rel="stylesheet" href="css/owl.carousel.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/ionicons.min.css">
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="css/responsive.css"> <!-- Js -->
<script src="js/vendor/modernizr-2.6.2.min.js"></script>
<script src="js/vendor/jquery-1.10.2.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')</script>
<script src="js/bootstrap.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/plugins.js"></script>
<script src="js/min/waypoints.min.js"></script>
<script src="js/jquery.counterup.js"></script> <script src="js/main.js"></script>
<script src="js/jquery-3.1.1.js"></script>
</head>
<body>
<header>
<div class="container">
<div class="row">
<div class="col-md-12">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">
<img src="img/logo.png" alt="logo">
</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a href="index.html">Home</a></li>
<li><a href="work.html">Work</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">Service</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</div>
</header>
<section id="slider">
<div class="container">
<div class="row">
<div class="col-md-10 col-md-offset-2">
<div class="block">
<h1 class="animated fadeInup">
A DIGITAL MARKETING &
<br>
DESIGN AGENCY
</h1>
<p class="animated fadeInUp">We love the Web and the work we do.We work closely with our
<br> clients to deliver the best possible solutions for their needs
</p>
</div>
</div>
</div>
</div>
</section>
<section id="intro">
<div class="container">
<div class="row">
<div class="col-md-7 col-sm-12">
<div class="block">
<div class="section=title">
<h2>About Us</h2>
<p>
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia,
there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics
</p>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id
</p>
</div>
</div>
<div class="col-md-5 col-sm-12">
<div class="block">
<img src="img/wrapper-img.png" alt="Img">
</div>
</div>
</div>
</div>
</section>
<section id="feature">
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-6">
<h2>WE BELIEVE IN GREAT IDEAS</h2>
<p>Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
</p>
<p>Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
</p>
<p>Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
</p>
<a href="#" class="btn btn-view-works">View Works</a>
</div>
</div>
</div>
</section>
<section id="service">
<div class="container">
<div class="row">
<div class="section-title">
<h2>Our Service</h2>
<p>
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live
the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics
</p>
</div>
</div>
<div class="row">
<div class="col-sm-6 col-md-3">
<div class="service-item">
<i class="icon ion-coffee"></i>
<h4>Branding</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
</p>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="service-item">
<i class="icon ion-coffee"></i>
<h4>Branding</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
</p>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="service-item">
<i class="icon ion-coffee"></i>
<h4>Branding</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
</p>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="service-item">
<i class="icon ion-coffee"></i>
<h4>Branding</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
</p>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="service-item">
<i class="icon ion-coffee"></i>
<h4>Branding</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
</p>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="service-item">
<i class="icon ion-coffee"></i>
<h4>Branding</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
</p>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="service-item">
<i class="icon ion-coffee"></i>
<h4>Branding</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
</p>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="service-item">
<i class="icon ion-coffee"></i>
<h4>Branding</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
</p>
</div>
</div>
</div>
</div>
</section>
<section id="call-to-action">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="block">
<h2>We design delightful digital experiences.</h2>
<p>
Read more about what we do and our philosophy of design. Judge for yourself The work and results
we’ve achieved for other clients, and meet our highly experienced Team who just love to design.
</p>
<a class="btn btn-default btn-call-to-action" href="#">Tell Us Your Story</a>
</div>
</div>
</div>
</div>
</section>
<section id="testimonial">
<div class="container">
<div class="row">
<div class="section-title text-center">
<h2>Fun Facts About Us</h2>
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live
the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics
</p>
</div>
</div>
</div>
</section>
<footer>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="footer-manu">
<ul>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact us</a></li>
<li><a href="#">How it works</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">Terms</a></li>
</ul>
</div>
<p>Copyright © 2017.Company name All rights reserved. </p>
</div>
</div>
</div>
</footer>
</body>
</html>
CSS（demo.css）代码
header {
background: #fff;
padding: 20px 0;
}
body {
font-family: 'Open Sans', sans-serif;
-webkit-font-smoothing: antialiased;
}
header .navbar-default {
background: none;
border: 0px;
}
header .navbar {
margin-bottom: 0px;
border: 0px;
}
header .navbar-brand {
padding-top: 5px;
}
header .navbar-default .navbar-nav {
padding-top: 10px;
}
ul {
padding:;
margin:;
list-style: none;
}
header .navbar-default .navbar-nav li a {
color: #333333;
padding: 10px 26px;
font-size: 15px;
}
#slider {
background: url(../img/slider-bg.jpg) no-repeat;
background-size: cover;
background-attachment: fixed;
background-position: 10% 0%;
padding: 200px 0 280px 0;
position: relative;
}
#slider .block {
color: #E3E3E4;
}
#slider .block h1 {
font-family: 'Roboto', sans-serif;
font-weight:;
font-size: 45px;
line-height: 60px;
letter-spacing: 10px;
padding-bottom: 45px;
}
#slider .block p {
font-size: 23px;
line-height: 40px;
font-family: 'Roboto', sans-serif;
font-weight:;
letter-spacing: 3px;
}
#intro {
padding: 100px 0;
}
#intro .section-title {
margin-bottom: 0px;
}
#intro .block h2 {
padding-top: 35px;
line-height: 27px;
margin:;
}
.section-title h2 {
text-transform: uppercase;
font-size: 28px;
font-weight:;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Roboto', sans-serif;
}
h2 {
font-size: 30px;
font-weight:;
}
#intro .section-title p {
padding-top: 20px;
}
#intro .block p {
color: #7B7B7B;
padding-top: 20px;
}
.section-title p {
font-family: 'Volkhov', serif;
font-style: italic;
color: #666;
}
p {
font-size: 15px;
line-height: 28px;
}
#feature {
background: url(../img/featue-bg.jpg);
background-position: 50% 94px;
width: 100%;
display: block;
position: relative;
overflow: visible;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center center;
background-color: #fff;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
padding: 100px 0;
}
#feature h2 {
font-size: 28px;
font-weight:;
margin-bottom: 30px;
}
#feature p {
color: #8d8f92;
margin-bottom: 20px;
}
#feature .btn-view-works {
background: #655E7A;
color: #fff;
padding: 10px 20px;
}
#service {
text-align: center;
padding: 90px 0;
}
.section-title {
margin-bottom: 70px;
}
.section-title h2 {
text-transform: uppercase;
font-size: 28px;
font-weight:;
}
.section-title p {
font-family: 'Volkhov', serif;
font-style: italic;
color: #666;
}
#service .service-item {
padding-bottom: 30px;
}
#service .service-item i {
font-size: 60px;
color: #4A4656;
}
#service .service-item h4 {
padding-top: 20px;
margin:;
color: #666;
}
#call-to-action {
background: url(../img/call-to-action-bg.jpg) no-repeat;
background-size: cover;
background-attachment: fixed;
padding: 70px 0px;
position: relative;
text-align: center;
color: #fff;
}
#call-to-action h2 {
padding-bottom: 20px;
line-height: 33px;
margin:;
font-size: 30px;
}
#call-to-action p {
font-size: 14px;
line-height: 1.6;
}
效果
移动端
bootstarp模板02的更多相关文章
- bootstarp v3 学习简记
1.快速设置浮动通过这两个class让页面元素左右浮动. !important被用来避免某些问题. <div class="pull-left">...</div ...
- C++函数模板详解(一)：概念和特性
函数模板是指这样的一类函数:可以用多种不同数据类型的参数进行调用,代表了一个函数家族.它的外表和普通的函数很相似,唯一的区别就是:函数中的有些元素是未确定的,这些元素将在使用的时候才被实例化.先来看一 ...
- 学习bootstarp第一天
一.下载bootstarp(https://v3.bootcss.com/),解压并将文件放入自己项目里去使用即可 二.安装bootstarp <!DOCTYPE html> <h ...
- 用T4 Template生成代码
1 T4语法 T4的语法与ASP.NET的方式比较类似.主要包括指令.文本块.控制块. 1.1 指令 指令主要包括template, output, assembly, import, incl ...
- Android AppWidget
AppWidget不知道大家使用这个多不多,这个在手机上也叫做挂件,挂件也就是放在桌面方便用户进行使用的,从android1.6开始挂件支持一些简单的lauout和view,到了android4.0之 ...
- Android AppWidget（转）
AppWidget不知道大家使用这个多不多,这个在手机上也叫做挂件,挂件也就是放在桌面方便用户进行使用的,从android1.6开始挂件支持一些简单的lauout和view,到了android4.0之 ...
- 2021.07.02 UVa1197 多路归并模板
2021.07.02 UVa1197 多路归并模板 UVA11997 K Smallest Sums - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 分析: 题解 UVA11997 ...
- knockoutJS学习笔记02：jsRender模板引擎
上一篇最后提到了模板,并尝试自己编写一个最简单版本:有些朋友可能用过 jqtmpl,这是一个基于jquery的模板引擎,不过它已经不再更新了,而且据说渲染速度比较慢.这里介绍另外一个模板引擎:jsRe ...
- Angular系列----AngularJS入门教程02：静态模板（转载）
为了说明angularJS如何增强了标准HTML,我们先将创建一个静态HTML页面模板,然后把这个静态HTML页面模板转换成能动态显示的AngularJS模板. 在本步骤中,我们往HTML页面中添加两 ...
随机推荐
- Node做中转服务器，转发接口
查询各种资料,和整理网上一哥们不完整的接口.做成,可以使用的转发服务! 由于项目在做前后端分离,牵扯跨域和夸协议问题,临时抱佛脚,选择用nodejs做中转,我想应该好多人都用它.但是做普通的表单转发没 ...
- [转]查询sqlserver 正在执行的sql语句的详细信息
包含用户名,所在数据库,执行的sql语句,执行开始时间,驱动程序,主机名称 SELECT [Spid] = session_Id, ecid, [Database] = DB_NAME(sp. ...
- 【玩转树莓派】使用 sinopia 搭建私有 npm 服务器
简介 使用 sinopia 的好处是,node系的工程师,内部协作时,使用自有 npm 包,会非常方便:另外,sinopia,会缓存已经下载过的包,可以在相当程度上,加速 npm install 相关 ...
- python paramiko模块 用密钥传输
VM_129_78_suse:/home/remote_paramiko # cat remote.py #!/usr/bin/env python import paramiko linux_cmd ...
- django作业2
管理后台 1.登陆Form 2.Session (用装饰器实现) 3.装饰器 4.主机,主机组 添加(主机,主机组) 删除 修改 查询
- re部分
0x01.Writeup-RE-CM_2 题目: 解题思路: 1.这个是经过xor的,王老师提示说用xortool,于是放进kali,装好之后执行 xortool CM_2.exe -b, 0.out ...
- 《java.util.concurrent 包源码阅读》23 Fork/Join框架之Fork的冰山一角
上篇文章一直追踪到了ForkJoinWorkerThread的pushTask方法,仍然没有办法解释Fork的原理,那么不妨来看看ForkJoinWorkerThread的run方法: public ...
- selenium+python对页面元素进行高亮显示
调用js方法: execute_script(script,*args) Arguments对象: 类数组对象,代表传给一个function的参数列表,当前函数的内置属性,其长度是由实参个数决定而不是 ...
- MFC中小笔记(四)
12.编译透明化界面是出现 WS_EX_LAYERED AC_SRC_ALPHA ULW_ALPHA ULW_OPAQUE undeclared identifier ,搜索发现SDK版本过低. ...
- null id in entry (don't flush the Session after an exception occurs) 解决方法
最近在学习基于ssh的注解的系统,然后在实现往数据库增加记录时可以增加第一个,第二个就报错,在网上查了很多资料,大多都是 该异常信息是在提示我们没有为数据中的非空字段设置值. 然后就一直没有明白 明明 ...