bootstrap自适应蓝色带导航登录注册弹出层单页效果代码-html代码-BFW代码库

代码语言：html

所属分类：响应式

代码描述：bootstrap自适应蓝色带导航登录注册弹出层单页效果代码

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

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

<head>
    <!-- Meta Tags -->
    <meta charset="UTF-8">
    <meta name="description" content="Laus - Dropdown & Hamburger Menu">
    <meta name="keywords" content="menu,responsive menu,navbar menu,navigation menu,hamburger menu,dropdown menu">
    <meta name="author" content="Yucel Yilmaz">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Fonts & Icons -->
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/all.5.15.3.css">

    <!-- Bootstrap -->
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.4.3.1.min.css">
    <!-- Animate.Css-->
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/animate.4.1.1.css">
    <!-- Theme Css -->
    <style>
        /* -------------------------------------------------------------------
     * Plugin Name           : Laus - Dropdown & Hamburger Menu
     * Author Name           : Yucel Yilmaz
     * Author URI            : https://codecanyon.net/user/aip_theme3434
     * Created Date          : 18 January 2020
     * Version               : 1.0
     * File Name             : style.css
    ------------------------------------------------------------------- */
    /* -------------------------------------------------------------------
       Base                               
       ------------------------ /
     * 01.Base
     * 02.Typography
     * 03.Helper Class
       ------------------------ /
       Components                               
       ------------------------ /
     * 04.Buttons  
       ------------------------ /
       Layout                               
       ------------------------ /
     * 05.Navbar
     * 06.Hero 
     * 07.Features 
     * 08.Footer
     * 09.Responsive
    
    /* ---------------------------------------------------------------- */
    /* 01.Base                               
    /* ---------------------------------------------------------------- */
    * {
      margin: 0;
      padding: 0;
    }
    
    body, html {
      font-size: 16px;
      font-family: "Roboto", sans-serif;
      font-weight: 400;
      color: #677294;
    }
    
    a:link, a:hover, a:active, a:visited {
      text-decoration: none;
      color: #677294;
    }
    
    ul, ol {
      list-style-type: none;
      padding: 0;
      margin: 0;
    }
    
    textarea, textarea:focus, input, input:focus, button, button:focus {
      outline: none;
      resize: inherit;
    }
    
    /* ---------------------------------------------------------------- */
    /* 02.Typography                                                  
    /* ---------------------------------------------------------------- */
    h1, h2, h3, h4, h5, h6 {
      font-family: "Poppins", sans-serif;
      font-weight: 700;
      font-style: normal;
      margin: 0;
      color: #000;
      line-height: 1.3;
      text-transform: capitalize;
    }
    
    h1, .h1 {
      font-size: 55px;
    }
    
    h2, .h2 {
      font-size: 42px;
    }
    
    h3, .h3 {
      font-size: 44px;
    }
    
    h4, .h4 {
      font-size: 22px;
    }
    
    h5, .h5 {
      font-size: 18px;
    }
    
    h6, .h6 {
      font-size: 16px;
    }
    
    p {
      color: #677294;
      margin: 0;
      line-height: 28px;
    }
    
    .colum-text {
      text-align: center;
    }
    
    /* ---------------------------------------------------------------- */
    /* 03.Helper Class                                                  
    /* ---------------------------------------------------------------- */
    .section {
      padding: 80px 0;
    }
    
    .section-heading .section-title {
      position: relative;
      text-align: center;
      padding-bottom: 20px;
      margin-bottom: 50px;
    }
    
    .section-heading .section-title:after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 50%;
      width: 50px;
      height: 4px;
      background: #23c87a;
      -webkit-transform: translateX(-50%);
              transform: translateX(-50%);
    }
    
    .bg-light-grey {
      background: #f1f2f6;
    }
    
    .pb-minus-70 {
      padding-bottom: 70px;
    }
    
    /* ---------------------------------------------------------------- */
    /* 04.Buttons                                                   
    /* ---------------------------------------------------------------- */
    .button {
      display: inline-block;
      padding: 20px 40px;
      border-radius: 5px;
      border: none;
      outline: none;
      text-transform: uppercase;
      -webkit-transition: background-color 0.25s ease;
      transition: background-color 0.25s ease;
    }
    
    .button.default-button {
      background: #23c87a;
      color: #fff;
    }
    
    .button.default-button:hover {
      background: #1da565;
    }
    
    /* ---------------------------------------------------------------- */
    /* 05.Navbar                                                   
    /* ---------------------------------------------------------------- */
    .header {
      padding: 10px 0;
      z-index: 3333;
    }
    
    .header ul li {
      list-style-type: none;
    }
    
    .header .nav-link {
      font-size: 14px;
      font-weight: 500;
      padding: 20px 15px !important;
      text-transform: uppercase;
      letter-spacing: 0.6px;
      display: block;
      position: relative;
      color: #fff;
      line-height: 28px;
    }
    
    .header .nav-link.active::after {
      content: '';
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 7px;
      background-color: #23c87a;
    }
    
    .header .nav-link:not(.active)::after {
      content: '';
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 7px;
      z-index: -7;
      -webkit-transition: -webkit-transform 0.4s ease;
      transition: -webkit-transform 0.4s ease;
      transition: transform 0.4s ease;
      transition: transform 0.4s ease, -webkit-transform 0.4s ease;
      background-color: #23c87a;
      -webkit-transform: scaleX(0);
              transform: scaleX(0);
      -webkit-transform-origin: 100% 0;
              transform-origin: 100% 0;
    }
    
    .header .nav-link:not(.active):hover::after {
      -webkit-transform: scaleX(1);
              transform: scaleX(1);
      -webkit-transform-origin: 0 0;
              transform-origin: 0 0;
    }
    
    .header .nav-link.signup-btn-toggle:after, .header .nav-link.login-btn-toggle:after {
      display: none;
    }
    
    .header .dropdown-menu {
      border: 0;
      background: #fff;
      padding: 0;
      margin: 0;
      border-radius: 0;
      -webkit-box-shadow: 0px 13px 35px 0 rgba(43, 50, 54, 0.2);
              box-shadow: 0px 13px 35px 0 rgba(43, 50, 54, 0.2);
    }
    
    .header .dropdown-menu .dropdown-item {
      display: block;
      width: 100%;
      padding: 14px 28px;
      font-weight: 400;
      color: #000;
      text-decoration: none;
      position: relative;
      -webkit-transition: all 0.25s ease;
      transition: all 0.25s ease;
    }
    
    .header .dropdown-menu .dropdown-item:focus, .header .dropdown-menu .dropdown-item:hover {
      color: #fff;
      background-color: #23c87a;
      padding-left: 25px;
    }
    
    .header .dropdown-toggle {
      padding-right: 25px !important;
    }
    
    .header .dropdown-toggle:before {
      content: "\f078";
      display: inline-block;
      position: absolute;
      top: 50%;
      right: 0;
      font-weight: 700;
      font-size: 12px;
      font-family: "Font Awesome 5 Free";
      display: inline-block;
      -webkit-transition: all 0.25s ease;
      transition: all 0.25s ease;
      -webkit-transform: translateY(-50%);
              transform: translateY(-50%);
    }
    
    .header .dropdown-toggle[aria-expanded="true"]:before {
      -webkit-transform: rotate(180deg);
              transform: rotate(180deg);
      top: 20px;
    }
    
    .header .navbar-toggler {
      outline: none;
      border: none;
      border-radius: 0;
      padding: 0 10px 0 0;
    }
    
    .header .navbar-toggler .togler-icon-inner > span {
      height: 3px;
      margin: 5px;
      width: 30px;
      display: block;
      background: #fff;
      -webkit-transition: all 0.3s ease;
      transition: all 0.3s ease;
    }
    
    .header .navbar-toggler .togler-icon-inner > span:nth-child(2) {
      width: 20px !important;
      margin-left: auto;
    }
    
    .header .navbar-toggler .togler-icon-inner > span:last-child {
      margin-bottom: 0;
    }
    
    .header .navbar-toggler[aria-expanded="true"] .togler-icon-inner > span:nth-child(1) {
      -webkit-transform: rotate(-45deg) translate(-5px, 6px);
              transform: rotate(-45deg) translate(-5px, 6px);
    }
    
    .header .navbar-toggler[aria-expanded="true"] .togler-icon-inner > span:nth-child(3) {
      -webkit-transform: rotate(45deg) translate(-5px, -6px);
              transform: rotate(45deg) translate(-5px, -6px);
    }
    
    .header .navbar-toggler[aria-expanded="true"] .togler-icon-inner > spa.........完整代码请登录后点击上方下载按钮下载查看