bootstrap自适应装修装饰首页落地页效果代码-html代码-BFW代码库

bootstrap自适应装修装饰首页落地页效果代码

代码语言：html

代码描述：bootstrap自适应装修装饰首页落地页效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  
  <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/all.min.css">
  <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.4.3.1.min.css">
<style>
@import url("https://fonts.googleapis.com/css2?family=Lato&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/*Entire HTML body*/
body {
  width: 100%;
  background-color: transparent;
  font-family: Lato;
  font-size: 16px;
  color: #fff;
  font-weight: 400;
  overflow-x: hidden;
  /*main container wrapper*/
  /*footer section*/
}
body .mainContainer {
  height: 1000px !important;
  padding: 0 8%;
  background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(//repo.bfw.wiki/bfwrepo/image/6049a4c6c4c02.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  overflow: hidden;
  /*Navigation menu section*/
  /*legend section*/
}
body .mainContainer .navbar {
  height: 100px;
  background-color: transparent;
  padding: 0;
}
body .mainContainer .navbar .navbar-brand {
  color: #fff;
  font-weight: 800;
  font-size: 24px;
  line-height: 29px;
  margin-left: 13%;
  transition: all;
  transition-duration: 1s;
}
body .mainContainer .navbar .navbar-brand:hover, body .mainContainer .navbar .navbar-brand:focus {
  transform: scale(1.2);
  -webkit-text-stroke: 1px #fff;
  -webkit-text-stroke-color: transparent;
}
body .mainContainer .navbar .navbar-collapse {
  justify-content: flex-end;
}
body .mainContainer .navbar .navbar-collapse .navbar-nav {
  width: 70% !important;
  position: relative;
}
body .mainContainer .navbar .navbar-collapse .navbar-nav .last {
  position: absolute;
  right: 0 !important;
}
body .mainContainer .navbar .navbar-collapse .navbar-nav .nav-item {
  margin: 0 10px;
}
body .mainContainer .navbar .navbar-collapse .navbar-nav .nav-item .nav-link {
  color: #fff;
  padding: 10px 0x;
  font-weight: 800;
  transition: all;
  transition-duration: 1s;
}
body .mainContainer .navbar .navbar-collapse .navbar-nav .nav-item .nav-link:hover, body .mainContainer .navbar .navbar-collapse .navbar-nav .nav-item .nav-link:active, body .mainContainer .navbar .navbar-collapse .navbar-nav .nav-item .nav-link:focus {
  border-bottom: 2px solid #fff;
  transform: translateY(-5px);
}
body .mainContainer .legend {
  margin-top: 130px;
  height: 770px;
  color: #fff;
  /*legend introduction text*/
}
body .mainContainer .legend .legend__text {
  width: 100%;
}
body .mainContainer .legend .legend__text .introText {
  text-align: center;
}
body .mainContainer .legend .legend__text .introText .introText__heading {
  font-size: 40px;
  line-height: 54px;
  margin-bottom: 30px;
  font-weight: 800;
}
body .mainContainer .legend .legend__text .introText .introText__heading span {
  opacity: 0.8;
  font-weight: 400;
}
body .mainContainer .legend .legend__text .introText .introText__link a {
  color: #fff;
  font-weight: 800;
  padding: 10px 0;
  border-bottom: 2px solid #fff;
  transition: all;
  transition-duration: 1s;
}
body .mainContainer .legend .legend__text .introText .introText__link a:hover, body .mainContainer .legend .legend__text .introText .introText__link a:focus {
  text-decoration: none;
  filter: blur(1px);
}
body .footer {
  text-align: center;
  height: 50px;
  width: 100%;
  bottom: 0 !important;
  background-color: #111;
  color: #fff;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
body .footer .footer__t.........完整代码请登录后点击上方下载按钮下载查看