Bootstrap自适应个人简历模板效果
代码语言：html
所属分类：布局界面
代码描述：Bootstrap自适应个人简历模板效果
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
<link type="text/css" rel="stylesheet" href="http://repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
<link type="text/css" rel="stylesheet" href="http://repo.bfw.wiki/bfwrepo/css/bootstrap.3.3.4.css">
<style>
/**** VARIABLES ****/
/**** TYPOGRAPHY ****/
body {
font-family: 'Open Sans', sans-serif;
letter-spacing: 0.5px;
}
h1, h2, h3, h4, h5, h6 {
font-weight: bold;
}
h1 {
font-size: 64px;
}
h2 {
font-size: 48px;
}
h3 {
font-size: 32px;
}
h4 {
font-size: 28px;
}
h5 {
font-size: 20px;
}
h6 {
font-size: 16px;
}
a {
text-transform: uppercase;
}
p {
font-size: 16px;
line-height: 28px;
}
/**** GENERAL STYLES ****/
body {
margin: 0;
padding: 0;
height: 100%;
min-height: 100%;
width: 100%;
}
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 100000;
}
hr {
width: 10%;
height: 1px;
border-color: #222222;
}
.btn-primary {
background: #ff8f00;
border: #ff8f00;
border-radius: 30px;
padding: 20px 50px;
}
.btn-primary:hover, .btn-primary:active {
background: #ffa314;
}
.btn-primary:hover:focus, .btn-primary:active:focus {
background: #ffa314;
}
.mb {
margin-bottom: 3em;
}
/**** FULLSCREEN PARALLAX ****/
/* fullscreen setup */
html, body {
height: 100%;
}
.fullscreen,
.content-a {
height: 100%;
overflow: hidden;
}
.fullscreen.overflow,
.fullscreen.overflow .content-a {
height: auto;
min-height: 100%;
}
/* content centering styles */
.content-a {
display: table;
}
.content-b {
display: table-cell;
position: relative;
vertical-align: middle;
text-align: center;
}
/* background setup */
.background {
background-repeat: no-repeat;
/* custom background-position */
background-position: 50% 50%;
/* ie8- graceful degradation */
background-position: 50% 50% 9 !important;
}
.section {
padding: 100px 0;
}
/**** NAVIGATION ****/
.navbar {
min-height: 80px;
background: rgba(255, 255, 255, 0.9);
border-bottom: #eaeaea solid 1px;
}
@media (max-width: 768px) {
.navbar {
text-align: center;
background: white;
font-size: 26px;
}
}
.navbar-nav > li > a {
line-height: 50px;
}
.navbar-header {
margin-bottom: 20px;
}
.navbar-toggle {
margin-top: 30px;
}
.navbar li {
margin-right: 30px;
}
.navbar li a:hover {
color: #ff8f00 !important;
background: transparent !important;
}
.dark-grey {
color: #222222 !important;
}
.active a {
color: #ff8f00 !important;
background: transparent !important;
}
/**** LOGO ****/
#logo-container {
padding: 0 20px;
}
/**** HOME ****/
.headline {
color: #fff;
}
/**** WORK ****/
.project {
margin-bottom: 2em;
}
.img-hover img {
-webkit-transition: all 1s ease;
/* Safari and Chrome */
-moz-transition: all 1s ease;
/* Firefox */
-o-transition: all 1s ease;
/* IE 9 */
-ms-transition: all 1s ease;
/* Opera */
transition: all 1s ease;
}
.img-hover:hover img {
opacity: 0.25;
-webkit-transition: opacity transform 0.45s;
transition: opacity transform 0.45s;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: scale(1.1);
/* Safari and Chrome */
-moz-transform: scale(1.1);
/* Firefox */
-ms-transform: scale(1.1);
/* IE 9 */
-o-transform: scale(1.1);
/* Opera */
transform: scale(1.1);
}
.img-hover .caption {
position: absolute;
top: 0;
left: 0;
padding: 50px;
width: 100%;
height: 100%;
color: #222222;
text-transform: none;
opacity: 0;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.img-hover .caption h4 {
text-align: center;
}
.img-hover .caption:hover {
opacity: 1.0;
-webkit-transition: opacity 0.45s;
transition: opacity 0.45s;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
/**** SERVICES ****/
.service {
text-align: left;
}
.icon {
float: left;
margin-right: 20px;
overflow: hidden;
background: #ff8f00;
display: inline-block;
border-radius: 100%;
}
.icon .icon-span {
display: table-cell;
vertical-align: middle;
height: 60px;
width: 60px;
text-align: center;
color: #fff;
font-size: 26px;
}
.service-column {
overflow: hidden;
}
.service-column h5 {
margin: 0 0 10px 0;
padding: 0;
}
.service-column p {
font-size: 14px;
line-height: 26px;
}
/**** CONTACT ****/
#contact-form {
margin: 20px;
}
#contact-form .text-input {
border: #222222 1px solid;
padding: 15px;
margin: 10px;
text-align: left;
width: 100%;
height: 80px;
}
#contact-form .text-message {
border: #222222 1px solid;
padding: 15px;
margin: 10px;
text-align: left;
width: 100%;
height: 160px;
}
#contact-form .required {
color: red;
}
#contact-form #req-field-desc {
font-size: 14px;
text-align: left;
}
#contact-form label {
margin: 0;
text-transform: uppercase;
font-size: 12px;
}
#contact-form input {
border: none;
width: 100%;
height: 30px;
}
#contact-form select {
border: #ececec 1px solid;
width: 100%;
}
#contact-form textarea {
border: none;
width: 100%;
height: 100px;
resize: none;
}
#contact-form #submit-button {
width: 100%;
text-transform: uppercase;
font-size: 18px;
}
footer {
background-color: #F7F8FA;
padding: 20px 0;
}
footer p {
font-size: 12px;
}
footer .fa {
border: #ececec 1px solid;
padding: 10px;
margin: 10px 5px;
font-size: 20px;
}
footer .fa:hover {
background: #fff;
}
footer .fa-linkedin {
color: #0077b5;
}
footer .fa-dribbble {
color: #ea4c89;
}
footer .fa-codepen {
color: #000;
}
</style>
</head>
<body data-spy="scroll" data-target=".navbar">
<header class="header">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-menu" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div id="logo-container">
<a class="navbar-brand" href="#">
<svg version="1.1" id="logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="50px" x="0px" y="0px" viewBox="0 0 215 170" style="enable-background:new 0 0 215 170;" xml:space="preserve">
<style type="text/css">
.st0 {
display: none;
fill: #222222;
}
.st1 {
display: none;
fill: #222222;
}
.st2 {
fill: #222222;
}
</style>
<circle class="st0" cx="189.8" cy="228.5" r="37.5" />
<circle class="st1" cx="192.8" cy="228.5" r="28.1" />
<g>
<g>
<path class="st2" d="M52.9,41.9l-1.2,9.9c0,0,0.9,0,4.7,0.2c4.5,0.2,6.6,3.9,6.2,7.3c0,0,0,0,0,0c0,0.2-3.5,28.9-6.7,55.3
c5.2,5.4,8.4,12.9,8.4,21c0,8.8-3.8,16.4-9.8,22.4h12.9c10.1,0,18.7-7.7,19.9-17.7l11.4-97.4L52.9,41.9z" />
<circle class="st2" cx="34.1" cy="135.5" r="22.7" />
</g>
<g>
<path class="st2" d="M114.2,135.6c0-13.7,9.1-25.4,21.7-29.1l8.5-72.5c1.4-11.9-7.9-22.1-19.9-22.1h-12l-17,146H124
C118,152,114.2,144.4,114.2,135.6z" />
<path class="st2" d="M144.3,112.8c-12.5,0-22.7,10.2-22.7,22.7c0,12.5,10.2,22.7,22.7,22.7c4.8,0,9.3-1.5,13-4.1
c-3.8-5.1-6-11.3-6-18.1c0-7.1,2.4-13.6,6.5-18.8C154,114.5,149.3,112.8,144.3,112.8z" />
<circle class="st2" cx="181.6" cy="135.5" r="22.7" />
</g>
</g>
</svg>
</a>
</div>
</div>
<div class="collapse navbar-collapse" id="main-menu">
<ul class="nav navbar-nav navbar-right">
<li><a href="#home" class="page-scroll dark-grey">Home</a></li>
<li><a href="#work" class="page-scroll dark-grey">Work</a></li>
<li><a href="#services" class="page-scroll dark-grey">Services</a></li>
<li><a href="#contact" class="page-scroll dark-grey">Contact</a></li>
</ul>
</div>
</div>
</nav>
</header>
<section id="home" class="fullscreen background parallax" style="background-image:url('http://repo.bfw.wiki/bfwrepo/image/5e323253cf4d2.png');" data-img-width="1600" data-img-height="1064" data-diff="200">
<div class="container content-a">
<div class="home-inner-container content-b">
<div class="row">
<div class="col-xs-12 headline">
<h1 class="text-center">Hi, my name is James.</h1>
<p class="text-center mb">
I am a UI/UX designer & developer, and I would love to work with you on your next project.
</p>
<a href="#work" class="page-scroll"><button class="btn btn-primary btn-lg">See My Work</button></a>
</div>
</div>
</div>
</div>
</section>
<section id="work" class="not-fullscreen section">
<div class="container-fluid content-a">
<div class="work-inner-container content-b">
<div class="row">
<div class="col-xs-12 mb">
<h2>My Work</h2>
<hr>
<p>
Browse some of my most recent projects below.
</p>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-4 project img-hover">
<a href="#">
<img src="http://repo.bfw.wiki/bfwrepo/image/5e59c0f1eb029.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_500,h_300,/quality,q_90" class="img-responsive">
<div class="caption">
<h4>Time Tracker</h4>
<p>
UI Design
</p>
</div>
</a>
</div>
<div class="col-xs-12 col-sm-4 project img-hover">
<a href="#">
<img src="http://repo.bfw.wiki/bfwrepo/image/5e2063e79119f.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_500,h_300,/quality,q_90" class="img-responsive">
<div class="caption">
<h4>404 Error</h4>
<p>
UI Design
</p>
</div>
</a>
</div>
<div class="col-xs-12 col-sm-4 project img-hover">
<a href="#">
<img src="http://repo.bfw.wiki/bfwrepo/image/5e20635e06347.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_500,h_300,/quality,q_90" class="img-responsive">
<div class="caption">
<h4>News Feed</h4>
<p>
UI Design
</p>
</div>
</a>
</div>
<div class="col-xs-12 col-sm-4 project img-hover">
<a href="#">
<img src="http://repo.bfw.wiki/bfwrepo/image/5e20635e06347.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_500,h_300,/quality,q_90" class="img-responsive">
<div class="caption">
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0