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

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

代码语言：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.........完整代码请登录后点击上方下载按钮下载查看