Html Css Landing Page Template Green Color

0

M.b.patel June 10, 2021

Html CSS Landing Page Template Green Color

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML VS CSS</title>
    <STyle>
        body {
            background: rgb(0, 0, 0);
          
            font-size: 100%;
            font-family: 'Roboto', sans-serif;
            font-weight: 300;
            color: white;
            text-align: center;
        }

        progress {
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            border-radius: 20px;
            height: 3vw;
            width: 100%;
            background: #1A3344;
            border: none;
        }

        progress::-moz-progress-bar {
            border-radius: 20px;
            background: linear-gradient(to right, #00ffbf 0%, #4db3ff 100%);
        }

        progress::-webkit-progress-bar {
            border-radius: 20px;
            background: #0eb98f;
            background: linear-gradient(to right, #0eb98f 0%, #4db3ff 100%);
        }

        section {
            display: flex;
            justify-content: space-between;
            margin: 40px auto;
            flex-direction: column;
            align-items: center;
            max-width: 800px;
        }

        h1 {
            font-size: 4.5vw;
            margin-bottom: 12px;
            margin-top: 40px;
        }

        p {
            font-size: 2.8vw;
            margin-top: 0;
        }

        svg rect {
            fill: #22B88E;
            animation: scale 2.8s infinite;
            transform-origin: center;
        }

        svg rect:nth-child(1) {
            animation-delay: 0;
            fill: #1A9F8C
        }

        svg rect:nth-child(2) {
            animation-delay: 200ms;
            fill: #1EAB8D
        }

        svg rect:nth-child(3) {
            animation-delay: 400ms;
            fill: #20B38E
        }

        svg rect:nth-child(4) {
            animation-delay: 600ms;
            fill: #22B78D
        }

        svg rect:nth-child(5) {
            animation-delay: 800ms;
            fill: #22B88E
        }

        svg rect:nth-child(6) {
            animation-delay: 1s;
            fill: #21B48D
        }

        svg rect:nth-child(7) {
            animation-delay: 1.2s;
            fill: #1EAF8E;
        }

        svg rect:nth-child(8) {
            animation-delay: 1.4s;
            fill: #1CA48D;
        }

        svg rect:nth-child(9) {
            animation-delay: 1.6s;
            fill: #17968B
        }

        svg rect:nth-child(10) {
            animation-delay: 1.8s;
            fill: #128688
        }

        svg rect:nth-child(11) {
            animation-delay: 2s;
            fill: #128688
        }

        @keyframes scale {
            from {
                transform: scaleY(1);
            }

            50% {
                transform: scaleY(0.2);
            }
        }
    </STyle>
</head>

<body>
    <section>
        <svg viewbox="0 0 660 300" width="100%" height="300px">
            <rect width="60" height="300" x="0%" />
            <rect width="60" height="300" x="10%" />
            <rect width="60" height="300" x="20%" />
            <rect width="60" height="300" x="30%" />
            <rect width="60" height="300" x="40%" />
            <rect width="60" height="300" x="50%" />
            <rect width="60" height="300" x="60%" />
            <rect width="60" height="300" x="70%" />
            <rect width="60" height="300" x="80%" />
            <rect width="60" height="300" x="90%" />
            <rect width="60" height="300" x="100%" />
        </svg>
        <h1>HTML VS CSS</h1>
    </section>
</body>

</html>

Landing Page Templates Free Html CSS
Landing Page Template Html Free
Green Color Website Templates Free Download
Green Website Templates Free Download
Free Landing Page Template Bootstrap
Green Bootstrap Template Free Download
Landing Page Html CSS Code
Landing Page Html Code

Tags

Background Canvas css free download html js Simple Example template web-beast.com

Newer
Older

Post a Comment

* Please Don't Spam Here. All the Comments are Reviewed by Admin.