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页面中添加两 ...
随机推荐
- 微信小程序入门（前言）
最近接到一个开发微信小程序的任务,由于没有开发过小程序,所以只能查看官方文档.查找相关博文.资料来开发. 微信小程序一开始出现就受到热烈的追捧,因为其"无需安装.用完即走"的理念确 ...
- CentOS卸载原有旧版OPENJDK并安装SUNJDK解决方案
PS:由于图片是安装后进行截图所以出现的是1.8版本,步骤是完全正确的. 一.检测JDK 首先你要打开终端,为避免可能出现的权限问题建议直接su进入root.(PS:密码可以输入但不显示) 然后输入j ...
- Struts2-Tiles整合
Apache Tiles是一个JavaEE应用的页面布局框架.Tiles框架提供了一种模板机制,可以为某一类页面定义一个通用的模板,该模板定义了页面的整体布局.布局由可以复用的多个块组成,每个页面可以 ...
- Unity学习资料
前段时间刚简单接触下Spring.net,刚会简单注入,最近接手一项目确是用的Unity,网上找了一些很好的教程资料 算是入门了,高手已经写的很好了,我就转个链接吧: Unity V3 初步使用 —— ...
- PowerShell安全修改Windows 10 登陆背景图
PowerShell安全修改Windows 10 登陆背景图 可以把登陆的背景图换掉,主要是修改操作pri文件 $priPath = "$env:windir\SystemResources ...
- Linux下gcc编译生成动态链接库*.so文件并调用它
动态库*.so在linux下用c和c++编程时经常会碰到,最近在网站找了几篇文章介绍动态库的编译和链接,总算搞懂了这个之前一直不太了解得东东,这里做个笔记,也为其它正为动态库链接库而苦恼的兄弟们提供一 ...
- npm -v；报错 cannot find module "wrapp"
1.node -v正常.npm-v就报错.. 说明:在官网上下载了安装了好几次.一用到npm就报这个错.园友们,我不太懂node,你们遇到这个问题怎么解决的? 2.报错 cannot find mod ...
- 神奇的 routing mesh - 每天5分钟玩转 Docker 容器技术（100）
接上一节案例,当我们访问任何节点的 8080 端口时,swarm 内部的 load balancer 会将请求转发给 web_server 其中的一个副本. 这就是 routing mesh 的作用. ...
- C语言之计算log2
#include<stdio.h>int main(){int num,count=0,i=0,ret=0;scanf("%d",&num);count=num ...
- thinkphp实现文件的下载
首先需要看一下大家使用的Thinkphp的版本,不同的版本使用的方法不同,(在导入公共函数的时候方式不同) 我用的是thinkphp3.2.2版本的,因此直接使用import()函数,直接把使用thi ...