luxy实现一个滚动视觉差异单页落地介绍页代码-html代码-BFW代码库

代码语言：html

代码描述：luxy实现一个滚动视觉差异单页落地介绍页代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/normalize.css">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/all.min.css">

    <style>
        body {
          background-color: #111;
          font-family: 'Roboto', sans-serif;
          color: #eee;
        }
        
        h1 {
          font-family: 'Oswald', sans-serif;
          line-height: 5rem;
          font-size: 5rem;
          font-weight: 500;
        }
        
        p {
          line-height: 1.7rem;
        }
        
        img {
          object-fit: cover;
          filter: grayscale(100%);
        
        }
        
        
        
        .logo {
          font-weight: 900;
          position: fixed;
          padding: 2rem 5rem;
          z-index: 100;
          font-family: 'Oswald', sans-serif;
        }
        
        .logo-inline {
          font-weight: 900;
          font-family: 'Oswald', sans-serif;
        }
        
        .navbar {
          position: fixed;
          right: 0;
          padding: 2rem 5rem;
          z-index: 100;
        }
        .navbar a {
          color: #eee;
          text-decoration: none;
          padding-left: 2rem;
          font-size: .8rem;
        }
        
        
        
        
        .wrapper {
          padding: 0 25vw;
        }
        
        .hero {
          display: flex;  
          height: 100vh;
          align-items: center;
        }
        
        .hero h1 {
          flex-basis: 66%;
        }
        
        .video-btn {
          width: 7rem;
          height: 7rem;
          background-color: #ff6534;
          border-radius: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 2rem;
        }
        
        .about {
          display: flex;
          justify-content: space-between;
          padding: 15rem 0;
        }
        .about p {
          flex-basis: 100%;
          padding-right: 1rem;
          font-size: 1.2rem;
          line-height: 2rem;
        }
        .about img {
          flex-basis: 100%;
          max-width: 25vw;
          padding-left: 1rem;
          display: block;
        }
        
        .event {
          display: flex;
          flex-direction: column;
          width: 60%;
          padding: 3rem 0;
        }
        
        .titlebar {
          display: flex;
          justify-content: space-between;
          font-family: 'Oswald', sans-serif;
        }
        
        .titlebar .title {
          font-weight: bold;
        }
        .titlebar .date {
          color: #999;
          font-weight: 400;
        }
        .event img {
          object-fit: cover;
          height: 12rem;
          padding: 1rem 0;
        }
        
        a.event-btn {
          display: block;
          padding: .8rem;
          text-align: center;
          color: #111;
          text-decoration: none;
          font-family: 'Oswald', sans-serif;
          font-size: 1.2rem;
          border: 0px solid #666;
          background-color: #eee;
          width: 50%;
        }
        a.event-btn i {
          margin-left: .5rem;
        }
        
        .quotes {
          padding-top: 15rem;
        }
        
        .quote-row {
          display: flex;
          justify-content: space-between;
        }
        
        .quote-row p {
          flex-basis: 33%;
          font-family: "Oswald", sans-serif;
          font-size: 1.3rem;
          line-height: 2rem;
        }
        .quote-row p:first-child {
          padding-right: 3rem;
          font-size: 1.8rem;
          line-height: 2.5rem;
        }
        
        .quote-row p:last-child {
          padding-right: 0;
          padding-left: 3rem;
        }
        .quotes img {
          width: 100%;
          height: 20rem;
          padding: 2rem 0;
        }
        
        
        
        .learnmore {
          width: 100%;
          display: flex;
          justify-content: center;
          padding: 8rem 0;
        }
        .learnmore-btn {
          display: block;
          height: 12rem;
          width: 12rem;
          border: 1px solid #999;
          border-radius: 100%;
          display: flex;
          justify-content: center;
          align-items: center;  
          color: #eee;
          text-decoration: none;
          font-weight: bold;
          background-color: #111;
        }
        
        
        
        
        .email {
          padding-bottom: 5rem;
        }
        
        .email h2 {
          font-family: 'Oswald', sans-serif;
          font-weight: 900;
          font-size: 2rem;
          line-height: 0;
        }
        
        .thin {
          font-weight: 100;
          font-family: 'Oswald', sans-serif;
        
        }
        
        .email form {
          display: flex;
          margin-top: 2rem;
        }
        .email form input[type=text] {
          flex-basis: 100%;
          
          background-color: #222;
          border: 0;
          color: #eee;
          padding: 1rem;
        }
        
        .email form input[type=submit] {
          background-color: #ff6534;
          color: #eee;
          border: 0;
          font-weight: 900;
          padding: 1rem 2rem;
        }
        
        .footer {
          display: flex;
          flex-direction: column;
          text-align: center;
        } 
        
        .footer ul {
          list-style-type: none;
          margin: 0;
          padding: 0;
          display: block;
        }
        
        .footer-nav a{
          color: #eee;
          padding: 1rem;
        }
        
        .footer .social {
          padding: 2rem;
        }
        
        .social a {
          color: #eee;
        }
        
        .copyright {
          padding-bottom: 5rem;;
          
        }
        
        .copyright a {
          color: #eee;
        }
        
        
        
        
        .watermark {
          position: absolute;
          transform-origin: bottom left;
          transform: rotate(90deg);
          top: -45rem;
          left: 40vw;
          font-size: 40rem;
          line-height: 40rem;
          -webkit-text-stroke-width: 1px;
          -webkit-text-stroke-color: #000aff99;
          color: transparent;
          font-weight: 900;
          z-index: -1;
          overflow: hidden;
          width: auto;
          height: 40rem;
          letter-spacing: -.5rem;
        }
    </style>


    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;400;500;700;900&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Oswald:wght@200;400;500;700&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Princess+Sofia&display=swap" rel="stylesheet">



</head>

<body>




    <div class="logo">
        NEBULA<span class="thin">ENSEMBLE</span>
    </div>
    <div class="navbar.........完整代码请登录后点击上方下载按钮下载查看