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页面中添加两 ...
随机推荐
- threejs 组成的3d管道，寻最短路径问题
threejs 里面的3d管道的每个节点ID是唯一的,且对应x,y,z坐标.那么当需要从A点到B点的时候,可能出现有多条路径可走,此时便需要求出最短行走路径,因此用到一个寻路径算法.我们将问题简化如下 ...
- Linux 基本命令-----常用操作分类
Linux/Unix 命令格式: 命令名 [选项] [参数] 注:[]中的内容代表内容可以省略 例:$ ls $ ls -l #-l 是选项 开始符号: 文件名 或 文件夹名 .当前文件夹 ..上一级 ...
- .NET Core工程编译事件$(TargetDir)变量为空引发的思考
前言 最近客户反馈,为啥不用xcopy命令代替我自己写的命令来完成插件编译复制: 我的: <PostBuildEvent>call "$(SolutionDir)tools\to ...
- jmockit学习总结
mock类型和实例 从依赖的测试代码调用的方法和构造函数是mock(模拟)的目标. Mocking提供了我们需要的机制,以便将被测试的代码与(一些)依赖关系隔离开来.我们通过声明适当的模拟字段和/或模 ...
- iOS学习——如何在mac上获取开发使用的模拟器的资源以及模拟器中每个应用的应用沙盒
如题,本文主要研究如何在mac上获取开发使用的模拟器的资源以及模拟器中每个应用的应用沙盒.做过安卓开发的小伙伴肯定很方便就能像打开资源管理器一样查看我们写到手机本地或应用中的各种资源,但是在iOS开发 ...
- socket.io 入门篇（二）
本文原文地址:https://www.limitcode.com/detail/5922f1ccb1d4fe074099d9cd.html 前言 上篇我们介绍了 socket.io 基本使用方法,本篇 ...
- border-radio属性
boreder-radio属性是css3的新增属性,可以设置圆角的边框. <head> <style type="text/css"> *{ margin ...
- 【正则表达式】--python（表示字符）
[前修知识] match :匹配 span:范围 match 是从头往后开始匹配,search不按照顺序,直接获取自己想要的,有就显示,没有就None r 代表反转义,前面也提到过这个知识,如果 ...
- selenium与表格的二三事
今天遇到的问题是selenium与表格中行和列的问题! 我想要做的事情是统计当前的table有多少行,表格形式如下如所示: 图中所示为2行,我的定位方式是这样的 : table=driver.find ...
- C#开发Windows窗体应用程序的步骤
使用C#开发应用程序时,一般包括创建项目.界面设计.设置属性.编写程序代码.保存项目.程序运行等6个步骤. 1．创建项目 在Visual Studio2017开发环境中选择“文件”→“新建”→“项目” ...