大气企业产品服务官网页面效果代码
代码语言：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 {
max-width: 824px;
margin: 0 auto;
}
.text h3 {
font-size: 158px;
line-height: 52px;
color: #ed145b;
font-style: italic;
margin: 100px auto 48px auto;
}
.text h4 {
color: #FFFFFF;
font-size: 25px;
font-weight: 400;
line-height: 40px;
letter-spacing: 0.63px;
}
/* === PRICES === */
.prices {
background-color: #f4f4f4;
width: 100%;
margin: 0 auto;
}
.prices .prices-hero {
background-color: #f4f4f4;
text-align: center;
color: #5a5a5a;
}
.prices .prices-hero h2 {
margin: 0;
padding-top: 149px;
padding-bottom: 82px;
}
.prices .prices-hero h2:after {
margin: 39px auto 0px auto;
}
.prices .prices-hero p {
max-width: 681px;
margin: 0 auto;
font-size: 15px;
font-weight: 300;
line-height: 30px;
letter-spacing: 0.38px;
text-align: center;
}
.prices .container .row {
margin: 0 auto;
}
.box-top {
width: 262px;
height: 180px;
background-color: #5a5a5a;
color: #f4f4f4;
text-align: center;
transition: .5s ease-out;
position: relative;
margin: 92px auto 0px auto;
}
.box-top:hover {
background-color: #ed145b;
cursor: pointer;
}
.box-top h2 {
font-size: 20px;
font-weight: 700;
line-height: 38px;
letter-spacing: 0.5px;
padding-top: 33px;
margin: 0;
}
.box-top h2 span {
font-size: 50px;
letter-spacing: 1.25px;
}
.box-top p {
font-size: 15px;
font-weight: 700;
line-height: 38px;
letter-spacing: 0.38px;
padding-top: 10px;
padding-bottom: 54px;
margin: 0;
}
.box-top button {
background-color: #f4f4f4;
color: #5a5a5a;
position: absolute;
left: 50%;
transform: translateY(-50%) translateX(-50%);
}
.box-bottom {
width: 262px;
height: 352px;
background-color: #FFFFFF;
text-align: center;
margin: 0px auto 137px auto;
}
.box-bottom p:first-child {
padding-top: 50px;
}
.box-bottom p {
margin-top: 0px;
color: #5a5a5a;
font-size: 15px;
font-weight: 300;
line-height: 38px;
letter-spacing: 0.38px;
}
.box-bottom button {
margin: 38px auto 36px auto;
transition: .5s ease-out;
}
.box-bottom button:hover {
cursor: pointer;
background-color: #f4f4f4;
color: #5a5a5a;
}
/* === ICON === */
.icon {
width: 100%;
margin: 150px auto 134px auto;
}
.icon img {
padding-right: 26px;
margin-top: 10px;
}
.icon h2 {
color: #ed145b;
font-size: 15px;
line-height: 30px;
text-transform: uppercase;
letter-spacing: 0.38px;
margin: 0;
}
.icon .col-9 {
max-width: 262px;
}
.icon p {
color: #5a5a5a;
font-size: 15px;
font-weight: 300;
line-height: 30px;
letter-spacing: 0.38px;
}
.icon-image {
margin: 0 auto;
}
.icon-text {
margin: 0 auto;
}
/* === JOIN === */
.join {
width: 100%;
height: 200px;
margin: 0 auto;
background-color: #ed145b;
text-align: center;
}
.join h2 {
color: #FFFFFF;
font-weight: 300;
line-height: 52px;
text-transform: uppercase;
display: inline-block;
margin: 84px 41px 84px auto;
}
.join h2 span {
font-weight: 700;
}
.join button {
background-color: #FFFFFF;
color: #ed145b;
margin: 88px auto 82px auto;
padding: 0;
}
/* === UPDATES === */
.updates {
width: 100%;
margin: 0 auto;
background-color: #FFFFFF;
}
.updates-hero {
text-align: center;
color: #5a5a5a;
padding-top: 147px;
}
.updates-hero h2::after {
margin: 39px auto 0px auto;
}
.updates-hero p {
font-size: 15px;
font-weight: 300;
line-height: 30px;
letter-spacing: 0.38px;
max-width: 681px;
margin: 41px auto 97px auto;
}
.updates .gallery {
margin-bottom: 116px;
padding-right: 28px;
}
.gallery .image-1 {
background: url("//repo.bfw.wiki/bfwrepo/image/5e0c6e0c465ba.png");
}
.gallery .image-2 {
background: url("//repo.bfw.wiki/bfwrepo/image/5e0c6e0c465ba.png");
}
.gallery .image-3 {
background: url("//repo.bfw.wiki/bfwrepo/image/5e0c6e0c465ba.png");
}
.gallery .image-4 {
background: url("//repo.bfw.wiki/bfwrepo/image/5e0c6e0c465ba.png");
}
.gallery .image-5 {
background: url("//repo.bfw.wiki/bfwrepo/image/5e0c6e0c465ba.png");
}
.gallery .image-6 {
background: url("//repo.bfw.wiki/bfwrepo/image/5e0c6e0c465ba.png");
}
.gallery .image {
height: 300px;
width: 360px;
background-position: center;
background-size: cover;
margin: 0 auto;
position: relative;
overflow: hidden;
font-size: 50px;
}
.gallery .layered {
background-color: #ed145b;
width: 300%;
height: 120%;
transform: -webkit-rotate(2deg);
transform: -ms-rotate(2deg);
transform: rotate(2deg);
left: -2%;
top: 0;
margin-top: 305px;
transition: .4s ease-in;
position: absolute;
}
.gallery .image:hover .layered {
margin-top: 0;
background-color: rgba(237, 20, 91, 0.85);
color: #fff;
}
.icon-wrapper {
width: 100%;
height: 100%;
position: absolute;
text-align: center;
color: #fff;
}
.icon-wrapper .fa {
position: relative;
opacity: 0;
transition: .8s;
}
.gallery .image:hover .fa {
opacity: 1;
}
.gallery-text {
width: 360px;
height: 200px;
background-color: #f4f4f4;
color: #5a5a5a;
font-size: 15px;
line-height: 30px;
letter-spacing: 0.38px;
padding-left: 20px;
margin: 0 auto 60px auto;
}
.gallery-text h3 {
margin: 0;
font-weight: 400;
text-transform: uppercase;
padding-top: 30px;
padding-bottom: 29px;
}
.gallery-text p {
font-weight: 300;
}
.gallery-button {
margin: 0px auto 82px auto;
text-align: center;
}
.gallery-button button {
color: #ed145b;
font-weight: 400;
line-height: 30px;
background-color: #FFFFFF;
}
.gallery-button button:hover {
background-color: #ed145b;
color: #FFFFFF;
cursor: pointer;
}
/* === MORE === */
.more {
width: 100%;
background-image: url("//repo.bfw.wiki/bfwrepo/image/5f7ab4e75aa7c.png");
background-size: cover;
background-position: center;
}
.more-hero {
text-align: center;
color: #FFFFFF;
}
.more-hero h2 {
padding-top: 148px;
}
.more-hero h2::after {
margin: 0 auto;
}
.more-hero p {
max-width: 681px;
font-size: 15px;
font-weight: 300;
line-height: 30px;
letter-spacing: 0.38px;
padding-bottom: 57px;
margin: 33px auto 41px auto;
}
.more-hero button {
margin-bottom: 150px;
}
/* === DOWNLOAD === */
.download {
width: 100%;
margin: 0 auto;
background-color: #f4f4f4;
}
.download-image {
margin: 75px auto 78px auto;
position: relative;
}
.download-image img {
position: absolute;
right: 0;
margin-right: 20px;
}
.download-hero {
margin: 150px auto 165px auto;
}
.download-hero h2 {
color: #5a5a5a;
}
.download-hero h2::after {
margin: 33px auto 45px 0;
}
.download-hero p {
max-width: 466px;
color: #5a5a5a;
font-size: 15px;
font-weight: 300;
line-height: 30px;
letter-spacing: 0.38px;
margin-bottom: 57px;
}
/* === FOOTER === */
footer {
width: 100%;
background-color: #2b2b2b;
}
footer > .row {
padding: 65px 5px 69px 5px;
}
footer p {
color: #FFFFFF;
font-size: 15px;
font-weight: 400;
line-height: 40px;
text-transform: uppercase;
}
.footer-left {
text-align: left;
}
.footer-right {
text-align: right;
}
.footer-right img {
display: inline;
}
.footer-right p {
display: inline;
}
/* === MEDIA === */
@media (max-width: 767px) {
/* === GRID For tablets: === */
.col-s-1 {
width: 8.33%;
}
.col-s-2 {
width: 16.66%;
}
.col-s-3 {
width: 25%;
}
.col-s-4 {
width: 33.33%;
}
.col-s-5 {
width: 41.66%;
}
.col-s-6 {
width: 50%;
}
.col-s-7 {
width: 58.33%;
}
.col-s-8 {
width: 66.66%;
}
.col-s-9 {
width: 75%;
}
.col-s-10 {
width: 83.33%;
}
.col-s-11 {
width: 91.66%;
}
.col-s-12 {
width: 100%;
}
[class*="col-"] {
width: 100%;
padding: 12px;
float: left;
}
/* === HEADER == */
.container .logo-nav {
width: 100%;
float: none;
padding: 0;
text-align: center;
}
.container ul {
float: none;
text-align: center;
padding: 0;
}
.container ul li {
display: block;
}
.header-hero {
padding-top: 0px;
}
.header-hero h2 {
font-size: 40px;
line-height: 40px;
}
.header-button {
margin-top: 20px;
margin-bottom: 30px;
}
/* === ABOUT === */
.about .container {
text-align: center;
}
.about .row {
padding-top: 0px;
}
.about h2::after {
margin: 40px auto 40px auto;
}
.about .video-button {
margin-top: 20px;
margin-bottom: 30px;
}
.about .laptop {
display: none;
}
/* === SERVICES === */
.services {
margin: 20px auto;
}
.services-hero {
margin: 0 auto;
}
.services h2::after {
margin: 39px auto 0px auto;
}
.services p {
margin: 20px auto;
}
/* === PRICES === */
.prices-hero h2 {
padding-top: 20px;
padding-bottom: 20px;
}
.box-top {
margin: 30px auto 0px auto;
}
.box-top p {
margin: 0;
}
.box-bottom {
height: auto;
margin: 0px auto 30px auto;
}
.box-bottom button {
margin: 10px auto 10px auto;
}
/* === ICON === */
.icon {
margin: 30px auto;
}
.icon img {
padding-right: 0px;
margin: 10px auto;
}
.icon-image {
margin: 0 auto;
display: block;
text-align: center;
float: none;
}
.icon-text {
margin: 0 auto;
display: block;
text-align: center;
float: none;
}
/* === JOIN === */
.join {
height: auto;
}
.join h2 {
margin: 10px auto;
}
.join button {
margin: 10px auto;
}
/* === UPDATES === */
.updates-hero {
padding-top: 0px;
}
.updates-hero p {
margin: 20px auto;
}
.updates .gallery {
margin-bottom: 20px;
}
.gallery .layered {
margin-top: 205px;
}
.icon-wrapper .fa {
top: 80%;
opacity: 0.8;
}
.gallery-text {
margin: 0 auto 10px auto;
}
.gallery-button {
margin: 20px auto;
}
/* === MORE === */
.more-hero h2 {
padding-top: 20px;
}
.more-hero p {
margin-bottom: 10px;
}
.more-hero button {
margin-bottom: 20px;
}
/* === DOWNLOAD === */
.download-image {
display: none;
}
.download-hero {
margin: 20px auto;
text-align: center;
}
.download-hero h2::after {
margin: 33px auto 45px auto;
}
.download-hero p {
text-align: center;
margin: 0 auto 20px auto;
}
/* === FOOTER === */
footer > .row {
padding: 0px;
}
.footer-left {
display: block;
float: none;
text-align: center;
margin: 0 auto;
}
.footer-right {
display: block;
float: none;
text-align: center;
margin: 0 auto;
}
}
@media (min-width: 768px) and (max-width: 1200px) {
/* === GRID For desktop: === */
.col-m-1 {
width: 8.33%;
}
.col-m-2 {
width: 16.66%;
}
.col-m-3 {
width: 25%;
}
.col-m-4 {
width: 33.33%;
}
.col-m-5 {
width: 41.66%;
}
.col-m-6 {
width: 50%;
}
.col-m-7 {
width: 58.33%;
}
.col-m-8 {
width: 66.66%;
}
.col-m-9 {
width: 75%;
}
.col-m-10 {
width: 83.33%;
}
.col-m-11 {
width: 91.66%;
}
.col-m-12 {
width: 100%;
}
/* === HEADER == */
.container .logo-nav {
width: 100%;
float: none;
padding: 0;
text-align: center;
}
.container ul {
float: none;
text-align: center;
padding: 0;
}
.container ul li {
display: block;
}
.header-hero {
padding-top: 0px;
}
.header-button {
margin-top: 20px;
margin-bottom: 30px;
}
/* === ABOUT === */
.about .container {
text-align: center;
}
.about .row {
padding-top: 0px;
}
.about h2::after {
margin: 40px auto 40px auto;
}
.about .video-button {
margin-top: 20px;
margin-bottom: 30px;
}
.about .laptop {
display: none;
}
/* === SERVICES === */
.services {
margin: 20p.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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