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页面中添加两 ...
随机推荐
- wordpress搬家到 linode 步骤简析
1. 购买并安装系统 购买就不说了哈,英文不好的自己搜教程. 然后是安装系统 linode 系统安装: 购买完成后登录,进入找到购买的vps ,点击 Dashboard (控制面板) 进入后点击 面板 ...
- HTTPCLIENT 模拟登陆
第一步构建忽略https验证的httpclient public static CloseableHttpClient getHttpClient() throws Exception { SSLCo ...
- 网站出现service unavailable的解决方法
特别提示:本文的教程仅适合采用windows服务器的IIS组件上操作,service unavailable是许多网站会经常遇到的问题,希望对大家有用. 昨天一小段时间网站出现了service una ...
- 数组去重+indexOf()应用
说起数组去重大家都不陌生,去重也有好多种方法,这里介绍很好理解的两种. 第一种 首先说一下第一种的逻辑,就是先拿第一个去跟第二个比,再跟第三个比,再跟第四个比--只要发现有相等的,可以用splice( ...
- Spring的IOC容器第一辑
一.Spring的IOC容器概述 Spring的IOC的过程也被称为依赖注入(DI),那么对象可以通过构造函数参数,工厂方法的参数或在工厂方法构造或返回的对象实例上设置的属性来定义它们的依赖关系,然后 ...
- 使用swiper简单的h5下滑翻页效果,
<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8" ...
- Js实现子窗体给父窗体的元素赋值
假设父窗体有一个html标签元素的id为myCollectionWork,现在如果我想在子窗体中给这个元素赋值那么我们可以使用如下JS代码:$("#myCollectionWork" ...
- app打包常用操作
1.修改appId android:打开build.gradle文件 找到defaultConfig{applicationId 'ceshi'} 修改测试.android studio会提示. Gr ...
- SurfaceView 使用demo 飞机游戏小样
本demo 主要使用了surfaceview 画图. 1.在线程中对canvas操作. 2.实现画图 3.surfaceView 继承了view 可以重写ontouchevent方法来操作输入. 代码 ...
- 十六、Hadoop学习笔记————Zookeeper实战
所有服务器都会先将自己的服务器信息注册到servers中,然后每台服务器都会尝试注册master,哪台注册成功,则哪台就是master服务器. 所有的服务器都会关注master节点的删除事件,这样通过 ...