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页面中添加两 ...
随机推荐
- 06.十分钟学会表达式语言EL
一. 概念:MVC设计模式一个主要好处就是让jsp中的代码越来越来少,而且规定只能出现三种代码:接收属性,判断语句,迭代输出.但是,在开发中,jsp输出至少还是需要接受VO对象的,这时候为了避免导入V ...
- Oracle.ManagedDataAccess.dll 连接Oracle数据库不需要安装客户端
最开始,连接Oracle 数据是需要安装客户端的,ado.net 后来由于微软未来不再支持 System.Data.OracleClient 这个 Data Provider 的研发,从 .NET 4 ...
- c#中的Out, params,ref 细说并沉淀
1. Out,params,ref之前先记录平时用的最多的按值传递参数的情况,当然默认情况下参数传入函数的默认行为也是按值传递的. 1: //默认情况下参数会按照值传递 2: static int a ...
- Unit Of Work之我见
本人以前写程序都是瞎写,根本没有啥模式也没有啥方法. 近一年来学习了传智的一些课程,感觉马伦老师很有才,很强大,所以学来了一个模式(应当叫模式吧,该我也不知道叫啥哈). 就是在DAL层封装一个DbSe ...
- Python之数据类型-[bisect,heap]
bisect >>> import bisect >>> >>> b = [ 20, 34, 35, 65, 78 ] >>> ...
- 从cdn说起
为什么要使用cdn 雅虎军规有一条规则建议我们是用cdn.随便在网上搜索,可以找到使用的cdn的好处. 再次强调第一条黄金定律,减少网页内容的下载时间.提高下载速度还可以通过CDN(内容分发网络)来提 ...
- 优雅的使用Chrome调试Node程序
前言 我不知道大家用什么来调试node程序.可能有的人用node-inspect,但是这货很久没更新了,而且一堆的bug用起来很不爽:可能有的人用命令行来,但是这样操作不够灵活:还有人只用consol ...
- 项目实战9—企业级分布式存储应用与实战MogileFS、FastDFS
企业级分布式存储应用与实战-mogilefs 环境:公司已经有了大量沉淀用户,为了让这些沉淀用户长期使用公司平台,公司决定增加用户粘性,逐步发展基于社交属性的多样化业务模式,决定开展用户讨论区.卖家秀 ...
- Tarjan算法：求解图的割点与桥（割边）
简介: 割边和割点的定义仅限于无向图中.我们可以通过定义以蛮力方式求解出无向图的所有割点和割边,但这样的求解方式效率低.Tarjan提出了一种快速求解的方式,通过一次DFS就求解出图中所有的割点和割边 ...
- ios协议和委托
在iPhone开发协议和委托是常接触到的东西,到底什么是协议什么是委托,他们什么关系? 一 协议 (1)协议相当于没有与类相关联的接口,他申明一组方法,列出他的参数和返回值,共享给其他类使用,然后不进 ...