Bootstrap自适应个人简历模板效果-html代码-BFW代码库

代码语言：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-visibili.........完整代码请登录后点击上方下载按钮下载查看