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