大气企业产品服务官网页面效果代码-html代码-BFW代码库

代码语言：html
代码描述：大气企业产品服务官网页面效果代码对比效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">






    <style>
        /* GLOBAL variables - color */
        /* EXTEND */
        .centered-position, .services-icon img, .slider-arrow-left, .slider-arrow-right, .icon-wrapper .fa {
            top: 50%;
            transform: translateY(-50%);
        }

        .underline-h2, .header-hero h2:after, .about h2:after, .services h2::after, .prices .prices-hero h2:after, .updates-hero h2::after, .more-hero h2::after, .download-hero h2::after {
            content: '';
            display: block;
            border: 1px solid #ed145b;
            width: 200px;
        }

        * {
            -webkit-box-sizing: border-box;
            /* iOS <= 4 i Android <= 2.3 */
            -moz-box-sizing: border-box;
            /* Firefox */
            box-sizing: border-box;
            /* Chrome, Opera, Safari 5+ i IE 8+ */
        }

        body {
            margin: 0;
            padding: 0;
            font-family: 'Lato', sans-serif;
            overflow-x: hidden;
        }

        .container {
            max-width: 1200px;
            width: 100%;
            height: 100%;
            margin: 0 auto;
            padding-left: 5px;
        }

        h2 {
            font-size: 38px;
            font-weight: 400;
            line-height: 52px;
            letter-spacing: 0.95px;
        }

        button {
            width: 200px;
            height: 50px;
            border-radius: 25px;
            border: none;
            text-transform: uppercase;
            background-color: #ed145b;
            color: #f4f4f4;
            font-size: 15px;
            font-weight: 700;
            line-height: 38px;
            letter-spacing: 0.38px;
        }

        /* === GRID === */
        [class*="col-"] {
            float: left;
            min-height: 1px;
        }

        .col-1 {
            width: 8.33%;
        }

        .col-2 {
            width: 16.66%;
        }

        .col-3 {
            width: 25%;
        }

        .col-4 {
            width: 33.33%;
        }

        .col-5 {
            width: 41.66%;
        }

        .col-6 {
            width: 50%;
        }

        .col-7 {
            width: 58.33%;
        }

        .col-8 {
            width: 66.66%;
        }

        .col-9 {
            width: 75%;
        }

        .col-10 {
            width: 83.33%;
        }

        .col-11 {
            width: 91.66%;
        }

        .col-12 {
            width: 100%;
        }

        .col-offset-0 {
            margin-left: 0;
        }

        .col-offset-1 {
            margin-left: 8.33%;
        }

        .col-offset-2 {
            margin-left: 16.66%;
        }

        .col-offset-3 {
            margin-left: 25%;
        }

        .col-offset-4 {
            margin-left: 33.33%;
        }

        .col-offset-5 {
            margin-left: 41.66%;
        }

        .col-offset-6 {
            margin-left: 50%;
        }

        .col-offset-7 {
            margin-left: 58.33%;
        }

        .col-offset-8 {
            margin-left: 66.66%;
        }

        .col-offset-9 {
            margin-left: 75%;
        }

        .col-offset-10 {
            margin-left: 83.33%;
        }

        .col-offset-11 {
            margin-left: 91.66%;
        }

        .row::before,
        .row::after {
            content: "";
            display: table;
            clear: both;
        }

        /* === HEADER === */
        header {
            width: 100%;
            background-image: url(//repo.bfw.wiki/bfwrepo/image/5d653d54ed035.png);
            background-size: cover;
            background-position: center;
        }
        header .logo-nav {
            color: #FFFFFF;
            font-size: 25px;
            font-weight: 400;
            line-height: 13px;
            letter-spacing: 1px;
            display: inline-block;
            float: left;
            margin-top: 39px;
        }
        header .logo-nav .span {
            color: #ed145b;
            letter-spacing: 1px;
        }
        header nav ul {
            float: right;
            list-style-type: none;
            margin-top: 44px;
        }
        header li {
            display: inline-block;
        }
        header a {
            color: #FFFFFF;
            text-decoration: none;
            padding: 0 15px;
            color: white;
            font-size: 16px;
            font-weight: 700;
            line-height: 38px;
            letter-spacing: 0.4px;
        }
        header a:hover {
            color: #ed145b;
            letter-spacing: 0.4px;
        }

        .header-hero {
            text-align: center;
            color: #FFFFFF;
            padding-top: 222px;
        }
        .header-hero h2 {
            font-size: 46px;
            line-height: 24px;
            text-transform: uppercase;
            display: inline-block;
        }
        .header-hero h2:after {
            margin: 39px auto 0px auto;
        }
        .header-hero span {
            font-weight: 900;
        }
        .header-hero p {
            font-size: 22px;
            font-weight: 300;
            line-height: 38px;
            letter-spacing: 0.55px;
        }

        .header-button {
            margin-top: 85px;
            margin-bottom: 247px;
        }
        .header-button:hover {
            cursor: pointer;
            opacity: 0.7;
        }

        /* === ABOUT === */
        .separator {
            position: relative;
            overflow: hidden;
            padding-bottom: 50px;
            background-color: #f4f4f4;
            height: 78px;
            padding: 0px;
            width: 100%;
        }

        .separator:before, .separator:after {
            content: '';
            position: absolute;
            -webkit-backface-visibility: hidden;
        }

        .separator:before {
            background: #ed145b;
            bottom: 100%;
            left: -1%;
            width: 100%;
            height: 200%;
            -webkit-transform-origin: 100% 100%;
            -ms-transform-origin: 100% 100%;
            transform-origin: 100% 100%;
            -webkit-transform: rotate(-1deg);
            -ms-transform: rotate(-1deg);
            transform: rotate(-1deg);
        }

        .about {
            background-color: #f4f4f4;
            width: 100%;
        }
        .about .row {
            padding-top: 100px;
        }
        .about h2 {
            color: #5a5a5a;
            font-style: italic;
        }
        .about h2:after {
            margin: 40px 0 40px 0;
        }
        .about p {
            color: #5a5a5a;
            font-size: 15px;
            font-weight: 300;
            line-height: 30px;
            letter-spacing: 0.38px;
        }
        .about .video-button {
            margin-top: 46px;
            margin-bottom: 98px;
        }
        .about .video-button a {
            text-decoration: none;
            color: #ed145b;
            font-size: 15px;
            font-weight: 400;
            line-height: 30px;
            text-transform: uppercase;
            letter-spacing: 0.38px;
        }
        .about .video-button .fa {
            font-size: 27px;
            padding-left: 5px;
        }

        .laptop {
            position: relative;
        }
        .laptop img {
            position: absolute;
            left: 0;
            margin-top: 10px;
            overflow: hidden;
        }

        /* === SERVICES === */
        .services {
            margin: 157px auto 121px auto;
            text-align: center;
        }
        .services .services-hero {
            text-align: center;
            color: #5a5a5a;
            margin-bottom: 94px;
            margin-top: 152px;
        }

        .services h2::after {
            margin: 39px auto 0px auto;
        }

        .services p {
            max-width: 681px;
            margin: 82px auto 0px auto;
            font-size: 15px;
            font-weight: 300;
            line-height: 30px;
            letter-spacing: 0.38px;
        }

        .services-icon {
            width: 130px;
            height: 130px;
            border: 1px solid rgba(0, 0, 0, 0.3);
            border-radius: 50%;
            margin: 0 auto;
        }
        .services-icon img {
            position: relative;
        }

        .services .row p {
            text-transform: uppercase;
            color: #ed145b;
            font-size: 15px;
            font-weight: 400;
            line-height: 30px;
            letter-spacing: 0.38px;
        }

        /* === SLIDER === */
        .slider {
            width: 100%;
            background-image: url(//repo.bfw.wiki/bfwrepo/image/5fb1bc462791e.png);
            background-size: cover;
            background-position: center;
            margin: 0 auto;
        }
        .slider .slider-hero {
            text-align: center;
            position: relative;
        }

        .slider-arrow-left {
            position: absolute;
        }

        .slider-arrow-right {
            position: absolute;
        }

        .text {
       .........完整代码请登录后点击上方下载按钮下载查看