bootstrap实现自适应响应式云服务商官网首页
代码语言:html
所属分类:响应式
代码描述:基于bootstrap实现的自适应响应式服务官网首页,可以作为产品服务落地页使用。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>网站首页</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="keywords" content="云流量" /> <!-- Facebook and Twitter integration --> <meta property="og:title" content="" /> <meta property="og:image" content="" /> <meta property="og:url" content="" /> <meta property="og:site_name" content="" /> <meta property="og:description" content="" /> <meta name="twitter:title" content="" /> <meta name="twitter:image" content="" /> <meta name="twitter:url" content="" /> <meta name="twitter:card" content="" /> <!-- Place favicon.ico and apple-touch-icon.png in the root directory --> <link rel="shortcut icon" href="favicon.ico"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css"> <!-- Animate.css --> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/animate.css"> <!-- Simple Line Icons --> <style> /* ======================================================= * * Template Style * Edit this section * * ======================================================= */ body { font-family: "Microsoft YaHei", "Source Sans Pro", Arial, sans-serif; font-weight: 400; font-size: 16px; line-height: 1.8; color: #777777; color: #7f7f7f; background: #fff; height: 100%; position: relative; } a { color: #6173f4; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; } a:hover, a:active, a:focus { color: #6173f4; outline: none; text-decoration: none; } p { margin-bottom: 1.5em; } h1, h2, h3, h4, h5, h6 { color: #000; font-family: "Microsoft YaHei", "Source Sans Pro", Arial, sans-serif; font-weight: 400; } ::-webkit-selection { color: #fff; background: #6173f4; } ::-moz-selection { color: #fff; background: #6173f4; } ::selection { color: #fff; background: #6173f4; } #fh5co-header { position: absolute; z-index: 99; width: 100%; opacity: 1; top: 0px; } #ios #fh5co-header { background: #333; } #ios .navbar-collapse { border-top: 1px solid transparent; } @media screen and (max-width: 768px) { #fh5co-header { margin-top: 0; background: #fff; -webkit-box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.1); -ms-box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.1); } #fh5co-header .navbar-brand { color: #6173f4 !important; } #fh5co-header #navbar li a { color: rgba(0, 0, 0, 0.5) !important; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } #ios #navbar li a { color: #fff !important; } #ios .navbar-fixed-top #navbar li a { color: rgba(0, 0, 0, 0.5) !important; } #fh5co-header #navbar li a:hover { color: #6173f4 !important; } #fh5co-header #navbar li a span:before { background: transparent !important; } #fh5co-header #navbar li.active a { background: transparent; background: none; color: #6173f4 !important; } #fh5co-header #navbar li.active a span:before { visibility: visible; -webkit-transform: scaleX(1); transform: scaleX(1); } } #fh5co-header .navbar { padding-bottom: 0; margin-bottom: 0; } #fh5co-header #navbar li a { font-family: "Microsoft YaHei", "Source Sans Pro", Arial, sans-serif; color: rgba(255, 255, 255, 0.5); position: relative; padding: 23px 25px; } #fh5co-header #navbar li a.btn-sm { padding: 2px 14px; border-radius: 50px; margin-left: 10px; margin-top: 19px; color: #fff; } #fh5co-header #navbar li a.btn:hover, #fh5co-header #navbar li a.btn:active, #fh5co-header #navbar li a.btn:focus { background: #618ef4 !important; } #fh5co-header #navbar li a span { position: relative; display: block; padding-bottom: 7px; } #fh5co-header #navbar li a span:before { content: ""; position: absolute; width: 100%; height: 2px; bottom: 0; left: 0; background-color: #6173f4; visibility: hidden; -webkit-transform: scaleX(0); -moz-transform: scaleX(0); -ms-transform: scaleX(0); -o-transform: scaleX(0); transform: scaleX(0); -webkit-transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -ms-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; } #fh5co-header #navbar li a:hover { color: #fff; } #fh5co-header #navbar li a:hover span:before { visibility: visible; -webkit-transform: scaleX(1); -moz-transform: scaleX(1); -ms-transform: scaleX(1); -o-transform: scaleX(1); transform: scaleX(1); } #fh5co-header #navbar li.active a { background: transparent; background: none; color: #fff; } #fh5co-header #navbar li.active a span:before { visibility: visible; -webkit-transform: scaleX(1); transform: scaleX(1); } #fh5co-header .navbar-brand { float: left; display: block; font-size: 22px; font-weight: 400; padding-left: 0; color: #fff; padding: 10px; width: 240px; line-height: 50px; } .navbar-brand > img { display: block; height: 50px; float: left; margin-right: 10px; } #fh5co-header.navbar-fixed-top { position: fixed !important; background: #fff; -webkit-box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.1); -ms-box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.1); margin-top: 0px; top: 0; } #ios #fh5co-header.navbar-fixed-top { background: #fff; } .copyrights { text-indent: -9999px; height: 0; line-height: 0; font-size: 0; overflow: hidden; } #fh5co-header.navbar-fixed-top .navbar-brand { color: #6173f4; line-height: 50px; } #fh5co-header.navbar-fixed-top #navbar li a { color: rgba(0, 0, 0, 0.5); -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } #fh5co-header.navbar-fixed-top #navbar li a.btn-sm { padding: 4px 14px; border-radius: 50px; margin-left: 10px; margin-top: 19px; color: #fff; } #fh5co-header.navbar-fixed-top #navbar li a:hover { color: #6173f4; } #fh5co-header.navbar-fixed-top #navbar li a.btn-sm:hover { color: #fff; } #fh5co-header.navbar-fixed-top #navbar li.active a { background: transparent; background: none; color: #6173f4; } #fh5co-header.navbar-fixed-top #navbar li.active a span:before { visibility: visible; -webkit-transform: scaleX(1); transform: scaleX(1); } #fh5co-header .navbar-default { border: transparent; background: transparent; -webkit-border-radius: 0px; -moz-border-radius: 0px; -ms-border-radius: 0px; border-radius: 0px; } @media screen and (max-width: 768px) { #fh5co-header .navbar-default { margin-top: 0px; padding-right: 0px; padding-left: 0px; padding-bottom: 0px; } } #fh5co-header .navbar-default .brand-slogan { margin: 28px 0 0 15px; float: left; letter-spacing: 2px; color: #adadad; } #fh5co-header .navbar-default .brand-slogan em { color: #6173f4; font-style: normal; } #fh5co-header a { -webkit-transition: 0s; -o-transition: 0s; transition: 0s; } .section-heading { float: left; width: 100%; padding-bottom: 50px; margin-bottom: 50px; clear: both; } .section-heading h2 { font-size: 50px; font-weight: 300; color: #444; text-transform: uppercase; position: relative; display: block; padding-bottom: 20px; line-height: 1.5; } .section-heading h2:after { content: ""; position: absolute; display: block; width: 80px; height: 2px; background: #6173f4; left: 50%; margin-left: -40px; bottom: 0; } @media screen and (max-width: 768px) { .section-heading h2 { font-size: 30px; } } .section-heading h3 { font-weight: 300; line-height: 1.5; color: #929292; } @media screen and (max-width: 768px) { .section-heading h3 { font-size: 24px !important; line-height: 34px; } } .btn { -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } #fh5co-our-services, #fh5co-about-us, #fh5co-features, #fh5co-testimonials, #fh5co-pricing, #fh5co-press { padding: 7em 0; } @media screen and (max-width: 480px) { #fh5co-our-services, #fh5co-about-us, #fh5co-features, #fh5co-testimonials, #fh5co-pricing, #fh5co-press { padding: 5em 0; } } #fh5co-testimonials { background: #6173f4; } #fh5co-testimonials .section-heading h2 { color: white; } #fh5co-testimonials .section-heading h2:after { background: rgba(255, 255, 255, 0.2); } #fh5co-testimonials .section-heading .subtext h3 { color: rgba(255, 255, 255, 0.5); } #fh5co-testimonials .box-testimony { margin-bottom: 2em; float: left; } #fh5co-testimonials .box-testimony a { color: rgba(255, 255, 255, 0.5); } #fh5co-testimonials .box-testimony a:hover, #fh5co-testimonials .box-testimony a:focus, #fh5co-testimonials .box-testimony a:active { color: white; text-decoration: none; } #fh5co-testimonials .box-testimony blockquote { padding-left: 0; border-left: none; padding: 40px; background: #fff; position: relative; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px; } #fh5co-testimonials .box-testimony blockquote:after { content: ""; position: absolute; top: 100%; left: 40px; border-top: 15px solid black; border-top-color: #fff; border-left: 15px solid transparent; border-right: 15px solid transparent; } #fh5co-testimonials .box-testimony blockquote .quote { position: absolute; top: 0; left: 10px; text-align: center; font-size: 30px; line-height: 0; display: table; color: #fff; width: 56px; height: 56px; margin-top: -30px; background: #6173f4; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; } #fh5co-testimonials .box-testimony blockquote .quote > span { display: table-cell; vertical-align: middle; } #fh5co-testimonials .box-testimony blockquote p { font-style: italic; } #fh5co-testimonials .box-testimony .author { line-height: 20px; color: white; font-size: 20px; margin-left: 20px; } #fh5co-testimonials .box-testimony .author .subtext { display: block; color: rgba(255, 255, 255, 0.5); font-size: 16px; } #fh5co-pricing .price-box { border: 2px solid #ECEEF0; text-align: center; padding: 30px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; border-radius: 5px; margin-bottom: 40px; position: relative; } #fh5co-pricing .price-box.popular { border: 2px solid #6173f4; } #fh5co-pricing .price-box.popular .popular-text { top: 0; left: 50%; margin-left: -54px; margin-top: -2em; position: absolute; padding: 4px 20px; background: #6173f4; color: #fff; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px; } #fh5co-pricing .price-box.popular .popular-text:after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -10px; border-top: 10px solid black; border-top-color: #6173f4; border-left: 10px solid transparent; border-right: 10px solid transparent; } #fh5co-pricing .pricing-plan { margin: 0; padding: 0; font-size: 15px; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; } #fh5co-pricing .price { font-size: 50px; color: #000; } #fh5co-pricing .price .currency { font-size: 20px; top: -1.2em; } #fh5co-pricing .price small { font-size: 16px; } #fh5co-pricing .pricing-info { padding: 0; margin: 0 0 30px 0; } #fh5co-pricing .pricing-info li { padding: 0; margin: 0; list-style: none; text-align: center; } #fh5co-our-services { background: #f4f4f4; } #fh5co-press { background: #fbfbfb; } #fh5co-our-services .box { padding: 30px; background: #fff; text-align: center; color: #7f7f7f; margin-bottom: 70px; position: relative; } @media screen and (max-width: 992px) { #fh5co-our-services .box { min-height: inherit; margin-bottom: 60px; } } #fh5co-our-services .box .icon { width: 85px; height: 85px; margin: 0 auto; top: 0; margin-top: -70px; margin-bottom: 30px; position: relative; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; display: table; text-align: center; } #fh5co-our-services .box .icon > span { display: table-cell; vertical-align: middle; } #fh5co-our-services .box .icon > span i { font-size: 40px; color: #fff !important; margin: 0; padding: 0; } #fh5co-our-services .box .icon.colored-1 { background: #2aaf67; } #fh5co-our-services .box .icon.colored-2 { background: #00bff3; } #fh5co-our-services .box .icon.colored-3 { background: #f26522; } #fh5co-our-services .box .icon.colored-4 { background: #e52b50; } #fh5co-our-services .box .icon.colored-5 { background: #2fc5cc; } #fh5co-our-services .box .icon.colored-6 { background: #6173f4; } #fh5co-our-services .box .step-number { font-size: 16px; display: block; color: #d1d1d1; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; margin-bottom: 10px; } #fh5co-our-services .box h3 { margin: 0 0 20px 0; padding: 0; font-weight: 400; font-size: 20px; color: #444; } #fh5co-features { padding: 7em 0; } @media screen and (max-width: 768px) { #fh5co-features { padding: 4em 0; } } #fh5co-features .fh5co-service { margin-bottom: 30px; float: left; } #fh5co-features .fh5co-service .fh5co-icon { float: left; width: 20%; } #fh5co-features .fh5co-service .fh5co-icon i { font-size: 40px; color: #6173f4; } #fh5co-features .fh5co-service .fh5co-desc { width: 80%; float: right; } #fh5co-features .fh5co-service .fh5co-desc h3 { margin-top: 0; font-size: 18px; } #fh5co-press .fh5co-press-item { background: #fff; float: left; margin-bottom: 30px; position: relative; overflow: hidden; display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 0 0 19px 0 rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 0 19px 0 rgba(0, 0, 0, 0.1); -ms-box-shadow: 0 0 19px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 0 19px 0 rgba(0, 0, 0, 0.1) } @media screen and (max-width: 480px) { #fh5co-press .fh5co-press-item { display: block !important; } } #fh5co-press .fh5co-press-item .fh5co-press-text, #fh5co-press .fh5co-press-item .fh5co-press-img { width: 50%; } @media screen and (max-width: 480px) { #fh5co-press .fh5co-press-item .fh5co-press-text, #fh5co-press .fh5co-press-item .fh5co-press-img { height: inherit; float: none !important; width: 100%; display: block !important; } } #fh5co-press .fh5co-press-item .fh5co-press-text { float: left; padding: 20px; } #fh5co-press .fh5co-press-item .fh5co-press-text .fh5co-press-title { margin: 0 0 20px 0; padding: 0 0 10px 0; font-weight: 400; font-size: 20px; color: #444; position: relative; } #fh5co-press .fh5co-press-item .fh5co-press-text .fh5co-press-title .fh5co-border { position: absolute; left: 0; bottom: 0; height: 2px; width: 30px; background: #6173f4; } #fh5co-press .fh5co-press-item .fh5co-press-img { position: absolute; right: 0; bottom: 0; top: 0; background-size: cover; } @media screen and (max-width: 480px) { #fh5co-press .fh5co-press-item .fh5co-press-img { height: 200px; left: 0; top: 0; position: relative; width: 100%; } } .fh5co-nav-toggle { width: 25px; height: 25px; cursor: pointer; text-decoration: none; } .fh5co-nav-toggle.active i::before, .fh5co-nav-toggle.active i::after { background: #6173f4; } .fh5co-nav-toggle:hover, .fh5co-nav-toggle:focus, .fh5co-nav-toggle:active { outline: none; border-bottom: none !important; } .fh5co-nav-toggle i { position: relative; display: -moz-inline-stack; display: inline-block; zoom: 1; *display: inline; width: 25px; height: 3px; color: #6173f4; font: bold 14px/.4 Helvetica; text-transform: uppercase; text-indent: -55px; background: #6173f4; transition: all .2s ease-out; } .fh5co-nav-toggle i::before, .fh5co-nav-toggle i::after { content: ''; width: 25px; height: 3px; background: #6173f4; position: absolute; left: 0; -webkit-transition: 0.2s; -o-transition: 0.2s; transition: 0.2s; } .fh5co-nav-toggle i::before { top: -7px; } .fh5co-nav-toggle i::after { bottom: -7px; } .fh5co-nav-toggle:hover i::before { top: -10px; } .fh5co-nav-toggle:hover i::after { bottom: -10px; } .fh5co-nav-toggle.active i { background: transparent; } .fh5co-nav-toggle.active i::before { top: 0; -webkit-transform: rotateZ(45deg); -moz-transform: rotateZ(45deg); -ms-transform: rotateZ(45deg); -o-transform: rotateZ(45deg); transform: rotateZ(45deg); } .fh5co-nav-toggle.active i::after { bottom: 0; -webkit-transform: rotateZ(-45deg); -moz-transform: rotateZ(-45deg); -ms-transform: rotateZ(-45deg); -o-transform: rotateZ(-45deg); transform: rotateZ(-45deg); } .fh5co-nav-toggle { position: absolute; top: 12px; right: 0px; z-index: 21; padding: 6px 0 0 0; display: block; margin: 0 auto; display: none; height: 44px; width: 44px; border-bottom: none !important; text-align: right; } @media screen and (max-width: 768px) { .fh5co-nav-toggle { display: block; } #fh5co-header .navbar-nav { padding-bottom: 10px; } #fh5co-header #navbar li a,#fh5co-header.navbar-fixed-top #navbar li a.btn-sm { padding: 13px 25px; } header #navbar li a { border-bottom: solid 1px rgba(238, 238, 238, 0.06); } .navbar-fixed-top #navbar li a { border-bottom: solid 1px rgba(238, 238, 238, 0.55); } #fh5co-header #navbar li a.btn-sm { padding: 10px 14px; color: #fff !important; } } .person { text-align: center; margin-bottom: 40px; float: left; width: 100%; } .person img { display: block; margin: 0 auto; height: 150px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; } .person .name { font-size: 24px; } .person .position { text-transform: uppercase; color: #c3c3c3; margin-bottom: 30px; letter-spacing: 2px; } #footer { padding: 50px 0; color: #7f7f7f; } #footer .copyright { margin-bottom: 0px; padding-bottom: 0; } .btn { text-transform: uppercase; letter-spacing: 2px; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; margin: 3px; } .btn.btn-primary { background: #6173f4; color: #fff; border: none !important; border: 2px solid transparent !important; } .btn.btn-primary:hover, .btn.btn-primary:active, .btn.btn-primary:focus { box-shadow: none; background: #6173f4; } .btn:hover, .btn:active, .btn:focus { background: #393e46 !important; color: #fff; outline: none !important; } .btn.btn-default:hover, .btn.btn-default:focus, .btn.btn-default:active { border-color: transparent; } .social { padding: 0; margin: 0; display: inline-block; position: relative; width: 100%; } .social li { list-style: none; padding: 0; margin: 0; display: inline-block; } .social li a { font-size: 16px; display: table; width: 40px; height: 40px; margin: 0 4px; } .social li a i { display: table-cell; vertical-align: middle; } .social li a:hover, .social li a:active, .social li a:focus { text-decoration: none; border-bottom: none; } .social li a.social-box { background: #6173f4; color: #fff; } .social li a.social-circle { background: #6173f4; color: #fff; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; } .social li a:hover { background: #393e46 !important; } .social.social-box a { background: #6173f4; color: #fff; } .social.social-circle a { background: #6173f4; color: #fff; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; } .owl-carousel .owl-controls .owl-nav { opacity: 0; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; } .owl-carousel:focus .owl-controls .owl-nav, .owl-carousel:hover .owl-controls .owl-nav, .owl-carousel:active .owl-controls .owl-nav { opacity: 1; } .owl-carousel .btn-primary:hover, .owl-carousel .btn-primary:focus, .owl-carousel .btn-primary:active { background: transparent !important; border: 2px solid #fff !important; } .owl-carousel .owl-controls, .owl-carousel-posts .owl-controls { margin-top: 0; } @media screen and (max-width: 768px) { .owl-carousel .owl-controls .owl-nav { display: none; } } .owl-carousel .owl-controls .owl-nav .owl-next, .owl-carousel .owl-controls .owl-nav .owl-prev { top: 50%; margin-top: -29px; z-index: 9999; position: absolute; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .owl-carousel .owl-controls .owl-nav .owl-next i:before, .owl-carousel .owl-controls .owl-nav .owl-prev i:before { color: rgba(255, 255, 255, 0.5); } .owl-carousel-posts .owl-controls .owl-nav .owl-next, .owl-carousel-posts .owl-controls .owl-nav .owl-prev { top: 24%; } .owl-carousel .owl-controls .owl-nav .owl-next { right: 0; } .owl-carousel .owl-controls .owl-nav .owl-next:hover { right: 10px; } .owl-carousel .owl-controls .owl-nav .owl-next:hover i:before { color: white; } .owl-carousel .owl-controls .owl-nav .owl-prev { left: 0; } .owl-carousel .owl-controls .owl-nav .owl-prev:hover { left: 10px; } .owl-carousel .owl-controls .owl-nav .owl-prev:hover i:before { color: white; } .owl-carousel-posts .owl-controls .owl-nav .owl-next i, .owl-carousel-posts .owl-controls .owl-nav .owl-prev i { color: #444; } .owl-carousel-posts .owl-controls .owl-nav .owl-next:hover i, .owl-carousel-posts .owl-controls .owl-nav .owl-prev:hover i { color: #000; } .owl-carousel-fullwidth.fh5co-light-arrow .owl-controls .owl-nav .owl-next i, .owl-carousel-fullwidth.fh5co-light-arrow .owl-controls .owl-nav .owl-prev i { color: #fff; } .owl-carousel-fullwidth.fh5co-light-arrow .owl-controls .owl-nav .owl-next:hover i, .owl-carousel-fullwidth.fh5co-light-arrow .owl-controls .owl-nav .owl-prev:hover i { color: #fff; } @media screen and (max-width: 768px) { .owl-theme .owl-controls .owl-nav { display: none; } } .owl-theme .owl-controls .owl-nav [class*="owl-"] { background: none !important; } .owl-theme .owl-controls .owl-nav [class*="owl-"] i { font-size: 30px; } .owl-theme .owl-controls .owl-nav [class*="owl-"] i:hover, .owl-theme .owl-controls .owl-nav [class*="owl-"] i:focus { background: none !important; } .owl-theme .owl-controls .owl-nav [class*="owl-"]:hover, .owl-theme .owl-controls .owl-nav [class*="owl-"]:focus { background: none !important; } .owl-theme .owl-dots { position: absolute; bottom: 0; width: 100%; text-align: center; } .owl-carousel-fullwidth.owl-theme .owl-dots { bottom: 0; margin-bottom: 2.5em; } .owl-theme .owl-dots .owl-dot span { width: 10px; height: 10px; background: rgba(255, 255, 255, 0.2); -webkit-transition: 0.2s; -o-transition: 0.2s; transition: 0.2s; border: 2px solid transparent; } .owl-theme .owl-dots .owl-dot span:hover { background: none; background: white; } .owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span { background: white; background: transparent; border: 2px solid #fff; } .owl-carousel-fullwidth .item, .owl-carousel-fullwidth .fh5co-owl-text-wrap { height: 800px; display: table; width: 100%; } @media screen and (max-width: 768px) { .owl-carousel-fullwidth .item, .owl-carousel-fullwidth .fh5co-owl-text-wrap { height: inherit; padding: 5em 0; } } .owl-carousel-fullwidth .fh5co-owl-text-wrap { position: relative; } .owl-carousel-fullwidth .item { background-repeat: no-repeat; background-size: cover; background-position: top left; position: relative; } .owl-carousel-fullwidth .item .overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); z-index: 8; } .owl-carousel-fullwidth .item img { max-width: 100%; } .owl-carousel-fullwidth .item .iphone-image { position: relative; z-index: 99; } .owl-carousel-fullwidth .item .iphone-image .iphone { float: right; text-align: right; position: relative; bottom: -12em; } @media screen and (max-width: 768px) { .owl-carousel-fullwidth .item .iphone-image .iphone { bottom: 0em; text-align: center; float: none !important; margin: 0 auto; display: block; } } .owl-carousel-fullwidth .item .iphone-image .iphone img { max-width: 100%; } .owl-carousel-fullwidth .item .fh5co-owl-text { display: table-cell; vertical-align: middle; z-index: 10; position: relative; } .owl-carousel-fullwidth .item .fh5co-owl-text a { color: white; border-bottom: 1px solid rgba(255, 255, 255, 0.5); } .owl-carousel-fullwidth .item .fh5co-owl-text a:hover { text-decoration: none; color: white; border-bottom: 1px solid white; } .owl-carousel-fullwidth .item .fh5co-owl-text .fh5co-lead, .owl-carousel-fullwidth .item .fh5co-owl-text .fh5co-lead-2, .owl-carousel-fullwidth .item .fh5co-owl-text .fh5co-sub-lead { color: #fff; margin: 0; padding: 0; } .owl-carousel-fullwidth .item .fh5co-owl-text .fh5co-lead { font-weight: 350; margin-bottom: 20px; margin-top: 0; text-transform: uppercase; letter-spacing: 1px; color: #fff; font-size: 50px; line-height: 50px; color: #fff; } @media screen and (max-width: 768px) { .owl-carousel-fullwidth .item .fh5co-owl-text .fh5co-lead { margin-bottom: 20px; font-size: 25px; line-height: 30px; } } .owl-carousel-fullwidth .item .fh5co-owl-text .fh5co-sub-lead { font-size: 20px; line-height: 30px; line-height: 42px; font-weight: 100; margin-bottom: 35px; color: white; } @media screen and (max-width: 768px) { .owl-carousel-fullwidth .item .fh5co-owl-text .fh5co-sub-lead { font-size: 18px; line-height: 34px; } .owl-carousel-fullwidth .btn-lg { padding: 10px 20px; font-size: 12px; line-height: 1.33333; border-radius: 6px; } .owl-carousel-fullwidth .item3 { background-position: top right; } } .js .to-animate, .js .to-animate-2, .js .single-animate { opacity: 0; } @media screen and (max-width: 480px) { .col-xxs-12 { float: none; width: 100%; } } .row-bottom-padded-lg { padding-bottom: 7em; } @media screen and (max-width: 768px) { .row-bottom-padded-lg { padding-bottom: 2em; } } .row-bottom-padded-md { padding-bottom: 4em; } @media screen and (max-width: 768px) { .row-bottom-padded-md { padding-bottom: 2em; } } .row-bottom-padded-sm { padding-bottom: 2em; } @media screen and (max-width: 768px) { .row-bottom-padded-sm { padding-bottom: 2em; } } .fh5co-animated { -webkit-animation-duration: .3s; animation-duration: .3s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } /*# sourceMappingURL=style.css.map */ blockquote { font-size: 14.5px; } #ios .id { font-style: normal; background: #6173f4; width: 40px; display: block; float: left; height: 40px; text-align: center; line-height: 40px; color: #fff; border-radius: 50px; font-weight: bold; margin-right: 15px; margin-top: -5px; } #ios .fh5co-press-title { margin-bottom: 40px; color: #000; } #ios .fh5co-press-text p { padding-left: 55px; } #ios .fh5co-press-text { margin: 80px; } #ios .set img { -webkit-box-shadow: 0 0 65px 0 rgba(0, 0, 0, 0.35); -moz-box-shadow: 0 0 65px 0 rgba(0, 0, 0, 0.35); -ms-box-shadow: 0 0 65px 0 rgba(0, 0, 0, 0.35); box-shadow: 0 0 65px 0 rgba(0, 0, 0, 0.35); width: 100%; } #ios .set b { color: #6173f4; font-size: 0.9em; font-weight: normal; } #ios #fh5co-pricing .text, #ios #fh5co-features .text { float: right; } @media screen and (max-width: 768px) { #ios .fh5co-press-text { margin: 50px 0px; } #ios #fh5co-pricing .text, #ios #fh5co-features .text { float: none; } } .section-heading .rcode { font-size: 13px; } .section-heading img { margin: 10px 0px; } </style> <!-- Owl Carousel --> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/owl.carousel.min.css"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/owl.theme.default.min.css"> <!-- Bootstrap --> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.3.3.4.css"> <!-- Modernizr JS --> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/modernizr.custom.2.6.2.js"></script> </head> <body> <header role="banner" id="fh5co-header"> <div class="container"> <!-- <div class="row"> --> <nav class="navbar navbar-default"> <div class="navbar-header"> <!-- Mobile Toggle Menu Button --> <a href="#" class="js-fh5co-nav-toggle fh5co-nav-toggle" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"><i></i></a> <a class="navbar-brand" href="#"><img id="logoimg" oldsrc="//repo.bfw.wiki/bfwrepo/icon/60b2c443baaca.png" style="height:40px;" src="//repo.bfw.wiki/bfwrepo/icon/60b2c443baaca.png" /></a> </div> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav navbar-right"> <li class="active"><a href="#" data-nav-section="home"><span>网站首页</span></a></li> <li><a href="#" data-nav-section="services"><span>产品介绍</span></a></li> <li><a href="#" data-nav-section="press"><span>软件安装</span></a></li> <li><a href="#" data-nav-section="testimonials"><span>常见问题</span></a></li> <li><a hre.........完整代码请登录后点击上方下载按钮下载查看
网友评论0