div+css实现大气简洁中性自适应登录表单页面代码-html代码-BFW代码库

div+css实现大气简洁中性自适应登录表单页面代码

代码语言：html

代码描述：div+css实现大气简洁中性自适应登录表单页面代码

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

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

<head>
    <meta charset="UTF-8">

    <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&amp;display=swap'>
    <style>
        :root {
          --background: 266, 16%, 92%;
          --text-primary: 0, 0%, 0%;
          /* Colors */
          --black: 0, 0%, 0%;
          --white: 0, 0%, 100%;
          --quite-gray: 0, 0%, 50%;
          --red: 347, 84%, 68%;
          --orange: 23, 84%, 68%;
          --yellow: 52, 84%, 68%;
          --green: 114, 84%, 68%;
          --teal: 163, 84%, 68%;
          --blue: 219, 84%, 68%;
          --purple: 279, 84%, 68%;
          --pink: 312, 84%, 68%;
          /* Gradients */
          --gradient: linear-gradient(90deg, hsla(var(--red), 1) 0%, hsla(var(--orange), 1) 12.5%, hsla(var(--yellow), 1) 25%, hsla(var(--green), 1) 37.5%, hsla(var(--teal), 1) 50%, hsla(var(--blue), 1) 62.5%, hsla(var(--blue), 1) 75%, hsla(var(--purple), 1) 87.5%, hsla(var(--pink), 1) 100%);
          /* Sizes */
          --heading-large: 5.6rem;
          --heading-medium: 3.6rem;
          --heading-small: 2.4rem;
          --paragraph: 1.11rem;
          /* misc */
          --transition-main: .175, .685, .32;
          /* Fonts */
          --font-main: "Poppins";
        }
        *, *::before, *::after {
            box-sizing: inherit;
        }
        html, body {
            margin: 0;
            width: 100%;
            color: hsl(var(--text-primary));
            font-family: var(--font-main);
            background-color: hsl(var(--background));
            -webkit-font-smoothing: antialiased;
            scroll-behavior: smooth;
            box-sizing: border-box;
        }
        main {
          min-height: 100vh;
        }
        h1, h2, h3, h4, h5, h6 {
            margin: 0;
        }
        h1 {
            font-size: var(--heading-large);
        }
        h2 {
            font-size: var(--heading-medium);
        }
        h3 {
            font-size: var(--heading-small);
        }
        h4 {
            font-size: calc(var(--heading-small) - .2rem);
        }
        h5 {
            font-size: calc(var(--heading-small) - .4rem);
        }
        h6 {
            font-size: calc(var(--heading-small) - .6rem);
        }
        h1, h2 {
            font-weight: 900;
        }
        h3, h4, h5, h6 {
            font-weight: 800;
        }
        p {
            margin: 0;
            font-size: var(--paragraph);
        }
        a {
            color: hsla(var(--primary), 1);
            font-size: var(--paragraph);
            text-decoration: underline;
        }
        a:visited {
            color: hsla(var(--primary), .5);
        }
        f.........完整代码请登录后点击上方下载按钮下载查看