Financial Savings Product - Landing Page

In this example below you will see how to do a Financial Savings Product - Landing Page with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by prakhar625, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright prakhar625 ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Financial Savings Product - Landing Page</title>
  <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600" rel="stylesheet">
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="hero">

  <svg xmlns="http://www.w3.org/2000/svg" width="794" height="422" viewBox="0 0 794 422" xmlns:xlink="http://www.w3.org/1999/xlink" id="text">
  <defs>
    <circle id="acircle" cx="18" cy="18" r="18"/>
    <circle id="bcircle" cx="18" cy="18" r="18"/>
    <circle id="c" cx="18" cy="18" r="18"/>
    <circle id="d" cx="18" cy="18" r="18"/>
  </defs>
  <g fill="none" fill-rule="evenodd" transform="translate(-1 -8)">
    <text fill="#000000" font-family="SourceSansPro-Light, Source Sans Pro" font-size="36" font-weight="300">
      <tspan x="0" y="35">Invest in your future. Start saving now</tspan>
    </text>
    <g transform="translate(3 108)">
      <rect width="160" height="30" fill="#4F84FF" rx="4"/>
      <text fill="#FFFFFF" font-family="SourceSansPro-Semibold, Source Sans Pro" font-size="14" font-weight="500" letter-spacing=".8">
        <tspan x="43.559" y="20">Invest No</tspan> <tspan x="106.969" y="20">w</tspan>
      </text>
      <g fill="#4F84FF" transform="translate(186 6)" font-size="14" font-family="SourceSansPro-Semibold, Source Sans Pro" text-decoration="underline" font-weight="500">
        <text>
          <tspan x=".816" y="14">Know More</tspan>
        </text>
      </g>
    </g>
    <g transform="translate(3 181)">
      <text fill="#6E6E6E" font-family="SourceSansPro-Regular, Source Sans Pro" font-size="12">
        <tspan x="52" y="34">Best performing funds, hand-picked by experts.</tspan>
      </text>
      <text fill="#4A4A4A" font-family="SourceSansPro-Semibold, Source Sans Pro" font-size="14" font-weight="500">
        <tspan x="52" y="14">Best Mutual funds</tspan>
      </text>
      <g transform="translate(0 2)">
        <use fill="#FFFFFF" xlink:href="#acircle"/>
        <circle cx="18" cy="18" r="17.5" stroke="#F1F1F1"/>
        <g transform="translate(9 9)">
          <path fill="#FFC576" fill-rule="nonzero" d="M16.875,10.125 L14.625,10.125 L14.625,3.375 C14.625,2.7 14.175,2.25 13.5,2.25 L10.125,2.25 L10.125,0 L7.875,0 L7.875,2.25 L4.5,2.25 C3.825,2.25 3.375,2.7 3.375,3.375 L3.375,10.125 L1.125,10.125 C0.45,10.125 0,10.575 0,11.25 L0,16.875 C0,17.55 0.45,18 1.125,18 L16.875,18 C17.55,18 18,17.55 18,16.875 L18,11.25 C18,10.575 17.55,10.125 16.875,10.125 Z M5.625,11.25 L5.625,4.5 L12.375,4.5 L12.375,11.25 L12.375,15.75 L10.125,15.75 L10.125,12.375 L7.875,12.375 L7.875,15.75 L5.625,15.75 L5.625,11.25 Z"/>
          <rect width="2.25" height="2.25" x="7.875" y="6.75" fill="#5D92FC"/>
        </g>
      </g>
      <g transform="translate(0 71)">
        <text fill="#6E6E6E" font-family="SourceSansPro-Regular, Source Sans Pro" font-size="12">
          <tspan x="51" y="34">We always keep your best interests in mind</tspan>
        </text>
        <g transform="translate(0 1)">
          <use fill="#FFFFFF" xlink:href="#bcircle"/>
          <circle cx="18" cy="18" r="17.5" stroke="#F1F1F1"/>
          <g transform="translate(9 9)">
            <path fill="#FFC576" fill-rule="nonzero" d="M16.875,10.125 L14.625,10.125 L14.625,3.375 C14.625,2.7 14.175,2.25 13.5,2.25 L10.125,2.25 L10.125,0 L7.875,0 L7.875,2.25 L4.5,2.25 C3.825,2.25 3.375,2.7 3.375,3.375 L3.375,10.125 L1.125,10.125 C0.45,10.125 0,10.575 0,11.25 L0,16.875 C0,17.55 0.45,18 1.125,18 L16.875,18 C17.55,18 18,17.55 18,16.875 L18,11.25 C18,10.575 17.55,10.125 16.875,10.125 Z M5.625,11.25 L5.625,4.5 L12.375,4.5 L12.375,11.25 L12.375,15.75 L10.125,15.75 L10.125,12.375 L7.875,12.375 L7.875,15.75 L5.625,15.75 L5.625,11.25 Z"/>
            <rect width="2.25" height="2.25" x="7.875" y="6.75" fill="#5D92FC"/>
          </g>
        </g>
        <text fill="#4A4A4A" font-family="SourceSansPro-Semibold, Source Sans Pro" font-size="14" font-weight="500">
          <tspan x="51" y="14">100% Commitment to you</tspan>
        </text>
      </g>
      <g transform="translate(0 140)">
        <text fill="#6E6E6E" font-family="SourceSansPro-Regular, Source Sans Pro" font-size="12">
          <tspan x="52" y="34">No hidden charges. Full transparency.</tspan>
        </text>
        <text fill="#4A4A4A" font-family="SourceSansPro-Semibold, Source Sans Pro" font-size="14" font-weight="500">
          <tspan x="52" y="14">Zero investment fees</tspan>
        </text>
        <g transform="translate(0 2)">
          <use fill="#FFFFFF" xlink:href="#c"/>
          <circle cx="18" cy="18" r="17.5" stroke="#F1F1F1"/>
          <g transform="translate(9 9)">
            <path fill="#FFC576" fill-rule="nonzero" d="M16.875,10.125 L14.625,10.125 L14.625,3.375 C14.625,2.7 14.175,2.25 13.5,2.25 L10.125,2.25 L10.125,0 L7.875,0 L7.875,2.25 L4.5,2.25 C3.825,2.25 3.375,2.7 3.375,3.375 L3.375,10.125 L1.125,10.125 C0.45,10.125 0,10.575 0,11.25 L0,16.875 C0,17.55 0.45,18 1.125,18 L16.875,18 C17.55,18 18,17.55 18,16.875 L18,11.25 C18,10.575 17.55,10.125 16.875,10.125 Z M5.625,11.25 L5.625,4.5 L12.375,4.5 L12.375,11.25 L12.375,15.75 L10.125,15.75 L10.125,12.375 L7.875,12.375 L7.875,15.75 L5.625,15.75 L5.625,11.25 Z"/>
            <rect width="2.25" height="2.25" x="7.875" y="6.75" fill="#5D92FC"/>
          </g>
        </g>
      </g>
      <g transform="translate(0 212)">
        <text fill="#6E6E6E" font-family="SourceSansPro-Regular, Source Sans Pro" font-size="12">
          <tspan x="52" y="34">A completely paperless process, crafted to your convenience.</tspan>
        </text>
        <text fill="#4A4A4A" font-family="SourceSansPro-Semibold, Source Sans Pro" font-size="14" font-weight="500">
          <tspan x="52" y="14">No Paper Documents</tspan>
        </text>
        <use fill="#FFFFFF" xlink:href="#d"/>
        <circle cx="18" cy="18" r="17.5" stroke="#F1F1F1"/>
        <g transform="translate(9 9)">
          <path fill="#FFC576" fill-rule="nonzero" d="M16.875,10.125 L14.625,10.125 L14.625,3.375 C14.625,2.7 14.175,2.25 13.5,2.25 L10.125,2.25 L10.125,0 L7.875,0 L7.875,2.25 L4.5,2.25 C3.825,2.25 3.375,2.7 3.375,3.375 L3.375,10.125 L1.125,10.125 C0.45,10.125 0,10.575 0,11.25 L0,16.875 C0,17.55 0.45,18 1.125,18 L16.875,18 C17.55,18 18,17.55 18,16.875 L18,11.25 C18,10.575 17.55,10.125 16.875,10.125 Z M5.625,11.25 L5.625,4.5 L12.375,4.5 L12.375,11.25 L12.375,15.75 L10.125,15.75 L10.125,12.375 L7.875,12.375 L7.875,15.75 L5.625,15.75 L5.625,11.25 Z"/>
          <rect width="2.25" height="2.25" x="7.875" y="6.75" fill="#5D92FC"/>
        </g>
      </g>
    </g>
    <text fill="#4A4A4A" font-family="SourceSansPro-Regular, Source Sans Pro" font-size="16">
      <tspan x="0" y="68">Secure your future financial goals by investing in our cherry-picked Mutual Funds</tspan>
    </text>
  </g>
</svg>

<div class="white-shader"></div>

<svg xmlns="http://www.w3.org/2000/svg" width="253" height="370" viewBox="0 0 253 370" xmlns:xlink="http://www.w3.org/1999/xlink" id="my_man">
  <defs>
    <polygon id="a" points="0 369.676 252.9 369.676 252.9 0 0 0"/>
  </defs>
  <g fill="none" fill-rule="evenodd">
    <path fill="#EDEDEC" d="M0,365.601791 C0,363.350835 49.167988,361.526631 109.820717,361.526631 C170.472709,361.526631 219.641434,363.350835 219.641434,365.601791 C219.641434,367.85201 170.472709,369.676213 109.820717,369.676213 C49.167988,369.676213 0,367.85201 0,365.601791 Z"/>
    <path fill="#F95C5B" d="M62.6900876,225.843357 C62.6900876,225.843357 51.7065418,262.211703 73.8859044,264.960169 C96.066004,267.709373 90.5034741,203.300627 90.5034741,203.300627 C90.5034741,203.300627 81.0854263,201.250886 75.5472191,215.303516 C70.009749,229.356882 62.6900876,225.843357 62.6900876,225.843357"/>
    <polygon fill="#262422" points="57.943 234.128 52.06 230.284 197.397 7.855 203.279 11.698"/>
    <path fill="#F95C5B" d="M90.0397948,203.446785 C90.0397948,203.446785 70.5948944,249.558219 60.0550538,363.737861 L93.4309701,363.737861 C93.4309701,363.737861 97.3100737,327.287701 101.701428,316.748598 C101.701428,316.748598 112.729934,323.895052 116.486687,326.043558 C116.486687,326.043558 121.24362,352.026845 126.51354,363.737861 L163.402245,363.737861 C163.402245,363.737861 155.790711,313.966964 153.741707,283.226008 C153.741707,283.226008 176.699396,284.836466 184.896886,258.487602 C184.896886,258.487602 191.923201,229.21043 159.71846,206.960311 C159.71846,206.960311 151.814317,201.397781 140.39591,201.104434 C140.39591,201.104434 126.049934,203.739394 113.753699,205.789135 C113.753699,205.789135 111.704695,205.789135 109.069735,209.301924 C106.434775,212.81545 104.55603,215.303737 104.55603,215.303737 C104.55603,215.303737 105.072703,200.335689 90.0397948,203.446785"/>
    <path fill="#562A14" d="M154.131608,290.74062 C154.131608,290.74062 118.297624,301.953388 70.2455319,284.637094 C66.5462689,306.189962 62.9479821,332.399524 60.0550538,363.737492 L93.4309701,363.737492 C93.4309701,363.737492 100.749894,338.559803 105.141986,328.019962 C105.141986,328.019962 109.874596,330.459604 113.632086,332.704663 C113.632086,332.704663 121.24362,352.026476 126.51354,363.737492 L163.402245,363.737492 C163.402245,363.737492 156.920612,321.354803 154.309237,290.654384 L154.131608,290.74062 Z"/>
    <mask id="b" fill="white">
      <use xlink:href="#a"/>
    </mask>
    <polygon fill="#E53E3E" points="121.031 265.806 131.783 265.806 131.783 256.152 121.031 256.152" mask="url(#b)"/>
    <path fill="#3A1808" d="M105.141839,328.020036 L95.1879542,320.700375 C95.1879542,320.700375 92.4063207,344.268343 93.4308227,363.737566 C93.4308227,363.737566 101.628313,336.217526 105.141839,328.020036" mask="url(#b)"/>
    <path fill="#0F174F" d="M62.0321952,256.152474 L62.0321952,256.152474 C63.9986494,260.719984 67.6175737,264.18339 73.8861992,264.960243 L76.8498845,250.914984 C75.6632311,256.116359 62.0321952,256.152474 62.0321952,256.152474" opacity=".1" mask="url(#b)"/>
    <path fill="#FFA471" d="M100.883596,200.958498 C100.883596,200.958498 106.703357,206.0331 104.556325,215.303737 L109.532898,209.155988 C109.532898,209.155988 110.659851,207.509414 111.804492,206.771625 C111.804492,206.771625 104.934432,204.372522 100.883596,200.958498" mask="url(#b)"/>
    <path fill="#0F174F" d="M152.735263,203.195598 C152.735263,203.195598 135.732952,212.038745 116.997096,207.962112 C116.997096,207.962112 128.072773,208.424243 139.8059,200.958645 C139.8059,200.958645 147.615701,200.953486 152.735263,203.195598" opacity=".2" mask="url(#b)"/>
    <path fill="#0F174F" d="M162.822922,239.750197 C162.822922,239.750197 170.721906,239.310914 170.57597,241.945875 C170.42856,244.580835 161.353241,253.656153 161.353241,253.656153 L161.353241,243.924122 L162.808181,243.781871 L162.822922,239.750197 Z" mask="url(#b)"/>
    <path fill="#1A2366" d="M125.050124,194.322157 C125.050124,194.322157 118.703371,194.126839 116.997096,192.565026 C115.290821,191.00395 117.353829,200.17656 125.050124,194.322157" mask="url(#b)"/>
    <path fill="#0F174F" d="M168.965512,214.815661 C168.965512,214.815661 155.720691,226.506777 150.133102,237.654685 L144.939098,231.618231 L152.734894,203.195303 C152.734894,203.195303 160.87342,205.505223 168.965512,214.815661" opacity=".2" mask="url(#b)"/>
    <path fill="#E53E3E" d="M100.524062,201.039131 L90.5031056,203.300406 C91.5187629,203.123514 92.4540817,203.037279 93.3282251,203.015904 L90.5031056,203.300406 C78.9874084,202.71445 75.5475876,215.304032 75.5475876,215.304032 C75.5475876,215.304032 75.4842012,215.607697 75.3183645,216.119948 C75.680257,214.494012 75.8011335,212.610845 75.5475876,210.424012 C74.4501175,200.9669 67.1533048,218.038494 67.1533048,218.038494 C70.0550777,221.261622 68.2588825,225.170207 68.2588825,225.170207 L63.0906753,234.120964 C63.0906753,234.120964 73.7845598,231.601721 74.3366116,226.91702 C74.4655956,225.823972 74.6004761,224.607837 74.7309343,223.386542 C80.6081853,211.122737 92.7540618,203.525207 93.5876673,203.01443 C104.986173,202.919351 104.556472,215.304032 104.556472,215.304032 C106.825118,205.715725 100.524062,201.039131 100.524062,201.039131" mask="url(#b)"/>
    <path fill="#F49A0B" d="M18.3345319,50.9565916 C18.3345319,50.9565916 36.310488,15.1616713 146.947122,80.9796594 C146.947122,80.9796594 258.749771,143.653384 237.43497,180.671074 C237.43497,180.671074 214.636484,201.166273 122.895647,153.88956 C122.895647,153.88956 18.7760259,93.8456355 18.3345319,50.9565916" mask="url(#b)"/>
    <path fill="#F26E0C" d="M237.583339,181.516988 C252.922861,154.878462 199.326665,114.954578 168.066088,94.6613307 L132.192303,159.336151 C216.307602,200.630215 237.583339,181.516988 237.583339,181.516988" mask="url(#b)"/>
    <path fill="#FFC78A" d="M76.743012,158.506747 C76.743012,158.506747 80.841757,183.391827 86.990243,188.955094 C86.990243,188.955094 101.398869,210.619257 120.689725,207.691687 C120.689725,207.691687 145.251239,207.964396 166.330183,171.974157 C166.330183,171.974157 176.870024,148.259516 175.698849,134.206886 L175.789506,128.0584 C175.789506,128.0584 158.132693,132.449755 145.836458,128.0584 C133.540223,123.667046 112.753888,111.078201 112.753888,111.078201 C112.753888,111.078201 113.046498,144.160771 83.7693267,145.039337 C83.7693267,145.039337 79.6705817,126.302006 70.0093068,134.499496 C60.3480319,142.696986 72.6442669,163.483321 76.743012,158.506747" mask="url(#b)"/>
    <path fill="#1A2366" d="M111.761227,119.606775 C111.761227,119.606775 124.468737,132.157293 138.372482,135.963428 C138.372482,135.963428 138.304673,128.814763 136.801088,124.191974 C136.801088,124.191974 151.594454,134.987572 175.789653,128.058548 C175.789653,128.058548 173.790032,151.370022 171.816207,157.218528 C171.816207,157.218528 198.534335,152.065799 197.949853,98.7821135 L186.238837,98.7821135 C186.238837,98.7821135 188.873797,94.6833685 186.238837,83.8509183 C186.238837,83.8509183 171.892861,77.7024323 151.984355,83.8509183 C151.984355,83.8509183 131.491367,61.4054801 97.529494,81.1179303 L91.9669641,78.8736076 L91.9669641,87.0710976 C91.9669641,87.0710976 87.8682191,80.9233486 78.2069442,96.7323725 C78.2069442,96.7323725 69.1581594,112.939404 72.9016454,132.746934 C72.9016454,132.746934 79.5734382,130.108289 83.7694741,145.039484 C83.7694741,145.039484 106.279773,147.751098 111.761227,119.606775" mask="url(#b)"/>
    <path fill="#FFA471" d="M158.949125 176.910414C150.707412 189.363641 137.652014 199.120733 123.898627 203.95653 120.112392 205.286908 113.49809 208.024319 109.467153 206.770594 112.944564 207.852586 116.71311 208.295554 120.689504 207.691908 120.689504 207.691908 145.251018 207.96388 166.330699 171.974378 166.330699 171.974378 176.869803 148.259737 175.699365 134.207108L175.790022 128.058622C172.863189 141.405155 169.244265 155.058303 163.933807 167.653781 162.577631 170.870275 160.898627 173.965892 158.949125 176.910414M83.7694741 145.03941C83.7694741 145.03941 75.6729602 129.699151 67.8638964 137.076303 67.8638964 137.076303 70.9285578 129.793494 78.0809084 133.756622 78.0809084 133.756622 83.4768645 139.76949 83.7694741 145.03941" mask="url(#b)"/>
    <path fill="#35A4EF" d="M82.3076056 140.061436C82.3076056 140.061436 92.2600159 135.378209 95.4801952 129.815679L97.5299363 138.807711C97.5299363 138.807711 110.118781 124.253149 108.069777 111.078349 106.020036 97.9035478 97.2365896 88.2422729 90.5036215 90.2920139 83.7691793 92.3410179 79.0852151 103.173468 77.3288207 111.078349L83.7691793 108.629125C83.7691793 108.629125 77.1180239 114.68548 74.9540398 132.643747 74.9540398 132.643747 78.7962908 132.741038 82.3076056 140.061436M148.255388 85.7660737C147.186663 86.3137032 146.168058 86.8974482 145.199572 87.5143606 147.07242 86.2554761 148.255388 85.7660737 148.255388 85.7660737M186.238616 83.8504761C169.264313 79.3684641 157.026305 81.2774283 148.255388 85.7660737 134.279412 75.6780458 115.973994 85.9002171 115.973994 85.9002171L115.973994 79.166512C104.848934 83.265257 104.262978 90.0166514 104.262978 90.0166514 115.388775 109.942847 128.641703 108.628683 128.641703 108.628683 127.584034 111.444958 127.20003 113.303803 127.20003 113.303803 121.586643 110.663683 115.973994 111.077906 115.973994 111.077906 121.537261 123.667488 138.372998 135.962986 138.372998 135.962986 138.609592 131.17952 138.036902 127.315894 136.940906 124.188584 181.155906 123.847329 186.238616 83.8504761 186.238616 83.8504761" opacity=".2" mask="url(#b)"/>
    <path fill="#35A4EF" d="M186.238763,98.7818187 C186.238763,98.7818187 185.555516,103.563811 181.066133,107.272655 C181.066133,107.272655 190.434799,107.467237 197.949779,98.7818187 L186.238763,98.7818187 Z" mask="url(#b)"/>
    <path fill="#FFA471" d="M138.126675,133.035637 C138.126675,133.035637 139.59046,134.987351 143.591914,136.549163 C143.591914,136.549163 143.27056,129.979821 136.941496,124.188805 C136.941496,124.188805 138.029384,131.13257 138.126675,133.035637" mask="url(#b)"/>
    <path fill="#111B4F" d="M110.576122 156.135504C110.576122 156.135504 121.57662 151.837755 126.159608 160.190026 126.159608 160.190026 125.93407 154.079129 118.724229 153.112118 111.513651 152.144369 110.576122 156.135504 110.576122 156.135504M133.158799 145.107072C133.158799 145.107072 132.65097 146.867888 131.252783 147.296116 131.252783 147.296116 125.380691 137.059203 116.30611 141.150578 116.30611 141.150578 113.976289 142.364502 112.775631 144.241036 112.775631 144.241036 113.235552 141.734323 114.930034 139.78998L113.064556 139.89243C113.064556 139.89243 115.583799 131.42002 126.094157 133.683506 126.094157 133.683506 134.241528 136.181375 133.158799 145.107072M160.809739 169.628785C160.809739 169.628785 153.988325 159.723546 145.3545 164.148068 145.3545 164.148068 149.033863 159.124323 155.665855 162.426315 162.298584 165.728307 160.809739 169.628785 160.809739 169.628785M150.779643 145.874711C150.779643 145.874711 150.212851 147.617102 151.13048 148.75511 151.13048 148.75511 161.73297 143.572898 166.952034 152.048994 166.952034 152.048994 168.2006 154.361125 168.142373 156.588496 168.142373 156.588496 169.166875 154.25499 168.854365 151.695209L170.340998 152.825847C170.340998 152.825847 173.006914 144.397659 163.035341 140.377779 163.035341 140.377779 154.888707 137.876962 150.779643 145.874711" mask="url(#b)"/>
    <path fill="#FFA471" d="M136.34957,173.89204 C134.389012,173.89204 132.734331,173.460127 132.592817,173.422538 L133.200147,171.160526 C134.74943,171.572538 139.055287,172.165127 140.334072,169.996721 C140.672378,169.422558 140.552976,169.179331 140.513175,169.099729 C140.137279,168.338355 138.150187,167.716283 136.861084,167.560028 L137.142637,165.234629 C137.867159,165.322339 141.531044,165.871442 142.613773,168.062697 C142.941761,168.728255 143.162876,169.810247 142.351382,171.186323 C141.067438,173.362837 138.520924,173.891303 136.34957,173.89204" mask="url(#b)"/>
    <path fill="#1A2366" d="M86.9900956,188.954799 C86.9900956,188.954799 101.398721,210.619699 120.689578,207.692129 C120.689578,207.692129 138.949299,207.890396 157.492048,184.877428 C157.492048,184.877428 152.695315,188.07697 147.362745,187.197667 C147.362745,187.197667 147.202805,180.463962 143.591988,179.586133 C139.981171,178.707568 127.965016,174.316213 121.091271,174.316213 C114.217526,174.316213 109.467227,180.463962 109.467227,180.463962 C109.467227,180.463962 85.8189203,164.947548 83.7691793,145.039042 C83.7691793,145.039042 84.9403546,155.871492 76.7428645,158.506452 C76.7428645,158.506452 80.8416096,183.392269 86.9900956,188.954799" mask="url(#b)"/>
    <path fill="#35A4EF" d="M86.9900956,188.954799 C86.9900956,188.954799 101.398721,210.619699 120.689578,207.692129 C120.689578,207.692129 138.949299,207.890396 157.492048,184.877428 C157.492048,184.877428 152.695315,188.07697 147.362745,187.197667 C147.362745,187.197667 147.202805,180.463962 143.591988,179.586133 C139.981171,178.707568 127.965016,174.316213 121.091271,174.316213 C114.217526,174.316213 109.467227,180.463962 109.467227,180.463962 C109.467227,180.463962 85.8189203,164.947548 83.7691793,145.039042 C83.7691793,145.039042 84.9403546,155.871492 76.7428645,158.506452 C76.7428645,158.506452 80.8416096,183.392269 86.9900956,188.954799" opacity=".2" mask="url(#b)"/>
    <path fill="#111B4F" d="M120.720313,207.692056 C120.72842,207.692056 120.737265,207.692056 120.749058,207.691319 L120.782962,207.691319 C120.795492,207.691319 120.809496,207.690582 120.824237,207.690582 C120.840452,207.689845 120.858141,207.689845 120.876568,207.689108 C120.892046,207.688371 120.909735,207.688371 120.926687,207.687633 C120.948799,207.686896 120.971647,207.686159 120.996707,207.684685 C121.016608,207.683948 121.040193,207.683211 121.062305,207.681737 C121.090313,207.681 121.117584,207.679526 121.147803,207.678052 C121.170651,207.676578 121.196448,207.675841 121.220771,207.674367 C121.349018,207.666996 121.498639,207.656677 121.670373,207.642673 C121.692484,207.641199 121.713122,207.639725 121.73597,207.637514 C121.788301,207.633092 121.84358,207.627932 121.899596,207.622036 C121.929078,207.619088 121.959297,207.616876 121.989516,207.614665 C122.04848,207.608032 122.109655,207.602135 122.173042,207.595502 C122.201787,207.591817 122.232006,207.588869 122.262225,207.585183 C122.32856,207.57855 122.397106,207.570442 122.467863,207.561598 C122.496608,207.557912 122.526827,207.554227 122.557046,207.551279 C122.632962,207.541697 122.709616,207.532116 122.790691,207.521797 C122.807643,207.519586 122.825333,207.516637 122.842285,207.514426 C123.143002,207.473888 123.47099,207.425243 123.827723,207.364068 C123.829934,207.364068 123.831408,207.364068 123.83362,207.363331 C123.941229,207.344904 124.051787,207.325004 124.163819,207.305104 C124.190353,207.299944 124.215412,207.295522 124.241946,207.290363 C124.350293,207.271199 124.461588,207.249088 124.574357,207.227713 C124.604576,207.22108 124.634795,207.21592 124.665014,207.210024 C124.780731,207.186438 124.898659,207.162853 125.019536,207.137793 C125.044596,207.131896 125.068918,207.126737 125.093978,207.122315 C125.222962,207.094307 125.354894,207.065562 125.489038,207.03608 C125.491986,207.035343 125.494934,207.034606 125.497882,207.033869 C126.096369,206.899725 126.742763,206.738311 127.434118,206.543729 L127.448859,206.540044 C127.611747,206.494347 127.77611,206.447175 127.94342,206.397056 C127.962584,206.391159 127.982484,206.386 128.002384,206.380104 C128.167484,206.330721 128.334058,206.279865 128.50358,206.227534 C128.520532,206.222375 128.538221,206.216478 128.556647,206.210582 C129.654855,205.867116 130.846667,205.444048 132.118082,204.922215 C132.129137,204.917793 132.138719,204.913371 132.149775,204.909685 C132.354675,204.824924 132.561787,204.737952 132.77111,204.648769 C132.784376,204.642873 132.79838,204.636976 132.812384,204.63108 C134.119177,204.070183 135.503361,203.407574 136.95093,202.622614 L136.970094,202.611558 C137.202265,202.486259 137.436647,202.357275 137.671767,202.224606 C137.690193,202.21355 137.70862,202.203968 137.727046,202.192912 C137.963639,202.059506 138.20097,201.924625 138.439775,201.784586 C138.444934,201.781637 138.450831,201.778689 138.455253,201.775741 C139.697922,201.049008 140.980392,200.234566 142.295293,199.320622 C142.304137,199.313988 142.313719,199.307355 142.322564,199.301458 C142.570213,199.128988 142.817863,198.952833 143.067723,198.772992 C143.095731,198.753092 143.123739,198.733191 143.151747,198.712554 C143.398659,198.534924 143.645572,198.354347 143.893221,198.169347 C143.916807,198.152394 143.939655,198.135442 143.961767,198.11849 C145.28846,197.128629 146.642424,196.037056 148.017026,194.831976 C148.03103,194.819446 148.045034,194.807653 148.059038,194.795124 C148.310373,194.574745 148.561707,194.349207 148.814516,194.120721 C148.858739,194.081657 148.901488,194.041857 148.945711,194.002793 C149.190412,193.780203 149.435114,193.554665 149.680552,193.325442 C149.725512,193.28343 149.770472,193.241418 149.815432,193.199406 C150.066767,192.962813 150.318839,192.723271 150.572384,192.479307 C150.591548,192.460143 150.612185,192.440243 150.632086,192.420343 C151.731767,191.356777 152.840293,190.218032 153.954715,189.000422 C153.984197,188.967992 154.013679,188.936299 154.043898,188.903869 C154.287125,188.636319 154.53109,188.36361 154.775054,188.088689 C154.836229,188.020143 154.898141,187.950861 154.959317,187.881578 C155.193699,187.616239 155.428082,187.346478 155.662464,187.073769 C155.73101,186.994904 155.798819,186.915303 155.866627,186.835701 C156.101747,186.560044 156.336867,186.282175 156.572723,185.999147 C156.63095,185.929865 156.689177,185.858371 156.747404,185.787614 C156.995791,185.487633 157.244177,185.185442 157.492564,184.877355 C157.492564,184.877355 154.366727,186.957315 150.359376,187.300781 C142.823759,194.756797 133.536169,200.567713 123.89848,203.956677 C120.112245,205.287056 113.498679,208.024466 109.467006,206.770741 C109.884177,206.901199 110.306508,207.020602 110.731787,207.130422 C110.768639,207.140741 110.805492,207.149586 110.842345,207.159167 C111.687743,207.375124 112.54862,207.552016 113.424237,207.683211 C113.461827,207.689108 113.499416,207.695741 113.537006,207.701637 C113.956388,207.762813 114.379456,207.812932 114.806209,207.85347 C114.870333,207.859367 114.935193,207.863789 114.999317,207.869685 C115.430492,207.907275 115.864616,207.93602 116.301687,207.950761 C116.311269,207.950761 116.320851,207.950761 116.329695,207.951498 C116.7535,207.964028 117.180253,207.963291 117.609954,207.953709 C117.683659,207.952972 117.756627,207.952235 117.83107,207.950024 C118.252663,207.936757 118.677942,207.912434 119.105432,207.876319 C119.187982,207.868948 119.272006,207.860841 119.355293,207.852733 C119.798261,207.809984 120.241966,207.759865 120.689357,207.692056 L120.704835,207.692056 L120.720313,207.692056 Z" mask="url(#b)"/>
    <path fill="#FFFFFF" d="M136.941201,188.076675 C136.941201,188.076675 131.490703,186.319544 130.026918,183.977193 C130.026918,183.977193 124.102496,185.148369 118.867217,183.977193" mask="url(#b)"/>
    <path fill="#FDBD13" d="M146.946827,80.9795857 C146.946827,80.9795857 253.55842,140.742693 238.720094,178.020562 C290.063859,69.9997251 185.467365,17.8348845 185.467365,17.8348845 C90.554257,-31.4687211 30.4749542,35.6980717 19.9830219,48.8102231 C26.3482012,42.1701235 53.8232809,25.5805618 146.946827,80.9795857" mask="url(#b)"/>
    <path fill="#F49A0B" d="M185.467143,17.8345896 C175.40049,12.6052072 165.727422,8.6907251 156.461944,5.87813546 C245.525072,43.682259 205.610032,121.295287 205.56802,121.375625 C227.378857,139.797498 245.415988,161.198534 238.719873,178.020267 C290.063637,70.0001673 185.467143,17.8345896 185.467143,17.8345896" mask="url(#b)"/>
    <path fill="#7DE23B" d="M143.071556,246.796781 C143.059026,246.417936 142.800321,237.396422 143.866835,226.832259 C145.348309,212.164928 148.617871,202.066582 153.586337,196.818773 L158.688946,201.64941 C150.767114,210.017896 149.799365,236.922498 150.094185,246.582299 L143.071556,246.796781 Z" mask="url(#b)"/>
    <path fill="#7DE23B" d="M147.565803 225.30494C147.565803 225.30494 148.456161 210.965598 126.969627 210.965598 126.969627 210.965598 123.338173 225.976394 147.570962 232.383586M150.471556 213.509974C150.471556 213.509974 155.13562 202.634775 172.464444 208.299755 172.464444 208.299755 171.477532 221.244596 148.31052 219.937066" mask="url(#b)"/>
    <path fill="#7DE23B" d="M152.581219 204.691297C152.581219 204.691297 140.46851 192.779066 163.464526 184.877133 163.464526 184.877133 170.955183 208.392034 152.581219 204.691297M147.09151 230.203755C147.09151 230.203755 148.586988 225.738695 156.137347 226.405727 156.137347 226.405727 155.820414 232.891046 147.09151 230.203755" mask="url(#b)"/>
    <path fill="#3D7F12" d="M144.939392 217.539289L144.435249 225.160404C144.435249 225.160404 136.94238 212.385086 127.020189 210.965524 127.020189 210.965524 138.039114 209.91891 144.939392 217.539289M155.70794 204.997173C155.70794 204.997173 163.041606 198.253149 163.463936 184.877133 163.463936 184.877133 170.165211 205.71801 155.70794 204.997173" mask="url(#b)"/>
    <path fill="#3D7F12" d="M172.464371,208.299534 C169.397498,214.427382 155.221781,216.28549 152.614092,216.577363 C153.528036,211.880869 155.167239,207.552163 156.293454,204.997542 L152.580924,204.690928 C152.580924,204.690928 148.849968,215.796088 147.807777,229.009952 C147.268255,229.67551 147.091363,230.203976 147.091363,230.203976 C147.303633,230.269574 147.507797,230.324853 147.709749,230.379394 C147.555705,232.802821 147.495267,235.283737 147.571183,237.772024 L150.133175,237.654833 C150.133175,237.654833 150.252578,235.090629 150.592359,230.845948 C155.83943,231.089175 156.137936,226.405211 156.137936,226.405211 C153.876661,226.206207 152.161542,226.467861 150.863594,226.930729 C151.240964,224.404116 151.678773,221.668179 152.165227,218.972044 L152.149749,220.029713 C172.077418,219.047223 172.464371,208.299534 172.464371,208.299534" mask="url(#b)"/>
    <path fill="#FDBD13" d="M162.80855,243.781649 C162.80855,243.781649 125.466558,247.600315 118.597235,244.501749 L118.615661,239.524438 L162.832873,236.902008 L162.80855,243.781649 Z" mask="url(#b)"/>
    <path fill="#F49A0B" d="M161.353167,253.656301 L161.353167,243.702416 C161.353167,243.702416 144.762869,246.434667 119.97508,245.06891 L119.97508,256.845524 C119.97508,256.845524 147.300538,267.417058 161.353167,253.656301" mask="url(#b)"/>
    <path fill="#FFC78A" d="M136.955574,260.487665 C136.955574,260.487665 132.662247,251.509637 129.538622,253.266032 C129.538622,253.266032 127.782964,253.655932 129.538622,258.536689 C129.538622,258.536689 129.368363,260.170733 128.050514,260.02406 C126.733402,259.878124 121.829797,258.194697 120.43898,255.193422 C120.43898,255.193422 118.462944,254.315594 118.023661,256.217924 C117.584378,258.120992 118.023661,259.658482 118.023661,259.658482 C118.023661,259.658482 117.584378,262.65902 118.243303,263.830195 C118.90149,265.001371 123.4889,276.882645 135.199179,276.882645 C135.199179,276.882645 133.247466,267.709299 136.955574,260.487665" mask="url(#b)"/>
    <path fill="#F26E0C" d="M161.353167,243.70249 C161.353167,243.70249 141.103406,255.071514 119.97508,245.068984 C119.97508,245.068984 132.954562,247.216016 161.353167,243.70249" mask="url(#b)"/>
    <path fill="#0F174F" d="M135.200801,276.884193 C135.377693,277.011703 135.552375,277.131106 135.727793,277.255667 C135.388749,277.02497 135.20596,276.887878 135.200801,276.884193 M184.897255,258.48738 C159.449805,283.616424 134.721717,269.68246 134.721717,269.68246 L135.199327,276.882719 C137.736259,296.985807 156.873072,315.378197 156.873072,315.378197 L153.741339,283.225787 C153.741339,283.225787 176.699765,284.836245 184.897255,258.48738" opacity=".2" mask="url(#b)"/>
    <path fill="#262422" d="M163.402392 363.737566C163.402392 363.737566 143.006695 342.267984 126.513687 363.737566L163.402392 363.737566zM93.4310438 363.737566C93.4310438 363.737566 71.9946295 342.219339 60.0551275 363.737566L93.4310438 363.737566z" mask="url(#b)"/>
    <path fill="#FFFFFF" d="M122.800125,184.470576 C122.800125,184.470576 127.271082,186.65446 133.480006,186.633823 L136.941201,188.07697 C136.941201,188.07697 126.159608,192.383564 118.867217,183.977488 L122.800125,184.470576 Z" mask="url(#b)"/>
    <path fill="#FFC78A" d="M62.6900876,225.843357 C62.6900876,225.843357 58.8839522,223.988934 58.8839522,221.062102 C58.8839522,218.133795 63.7639721,204.067161 68.0580359,203.195229 C72.3513625,202.324771 78.4018207,204.081165 80.3535339,209.740986 C80.3535339,209.740986 81.3780359,214.230369 75.5472191,210.424233 C75.5472191,210.424233 76.1501275,214.79495 74.4512231,217.8176 C72.7515817,220.840986 69.5218207,227.50246 62.6900876,225.843357" mask="url(#b)"/>
    <path fill="#FDBD13" d="M51.61699,242.478837 L51.61699,242.478837 C48.8633645,240.889016 47.9192012,237.367382 49.509759,234.613757 L58.2858347,219.412064 C59.8763924,216.658438 63.3972888,215.714275 66.1516514,217.304833 C68.9052769,218.894653 69.8487032,222.41555 68.2588825,225.170649 L59.4820697,240.371606 C57.892249,243.125231 54.3706155,244.068657 51.61699,242.478837" mask="url(#b)"/>
    <path fill="#F26E0C" d="M66.151504,217.304685 C64.7805876,216.513829 63.219512,216.350203 61.8021614,216.725363 C63.2585757,218.523769 63.5452888,221.101976 62.3188347,223.226159 L53.5420219,238.427853 C52.7437948,239.811299 51.4576394,240.737036 50.0262849,241.115143 C50.4581972,241.648032 50.9874004,242.115323 51.6168426,242.478689 C54.3712052,244.069247 57.8921016,243.125084 59.4826594,240.371458 L68.2587351,225.170502 C69.8492928,222.416139 68.9051295,218.894506 66.151504,217.304685" mask="url(#b)"/>
    <path stroke="#262422" stroke-width=".5" d="M62.4453127,43.4975538 C62.4453127,43.4975538 111.270572,-9.67778486 192.112624,21.656498 C192.112624,21.656498 247.785831,63.324247 220.569456,135.301777" mask="url(#b)"/>
    <path stroke="#262422" stroke-width=".5" d="M189.507956 108.736735C210.873614 60.8851215 192.112697 21.6562769 192.112697 21.6562769 192.112697 21.6562769 137.153693 22.3771135 115.625147 63.7257191M192.112845 21.6562769L151.984797 83.8509183M91.1237769 52.5994801C91.1237769 52.5994801 64.869255 81.8162131 52.3349522 103.02709M205.568315 121.375994C205.568315 121.375994 203.51194 146.819022 186.238394 180.81701" mask="url(#b)"/>
  </g>
</svg>

<canvas id="canvas"> </canvas>
    
</div>

<div class="section-two"></div>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/prakhar625/financial-savings-product-landing-page-dWBZbq */
html, body {
  margin: 0;
  padding: 0;
  background: #fff;
  font-family: 'Source Sans Pro', sans-serif
}

.hero{
  position: relative;
}

canvas {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  pointer-events: none;
}

#my_man{
  position: absolute;
  z-index: 100;
  top: 170px;
  right: 15%;
  transform: translate3d(0, 5px, 0);
}

#text{
  position: absolute;
  z-index: 150;
  top: 120px;
  left: 15%;
}

.white-shader{
  width: 100vw;
  height: 540px;
  position: absolute;
  z-index: 90;
  top: 0;
  left: 0;
  background: linear-gradient(90deg, hsla(0, 0%, 100%, 0.8) 35%, hsla(0, 0%, 100%, 0) 75%);
}

.section-two{
  width: 100vw;
  height: 540px;
  position: relative;
  top: 620px;
  
  background: linear-gradient(180deg, hsla(0, 0%, 98%, 1) , hsla(0, 0%, 100%, 1) 20%);
}

/*Downloaded from https://www.codeseek.co/prakhar625/financial-savings-product-landing-page-dWBZbq */
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = 540;

// now the main part starts

var rain = [], drops = [];

var gravity = 0.5;
var wind = -0.13;
var rain_chance = 200;
var x_offset = canvas.width * 1.25;
var spread_coeff = 1.5;
var rain_vstart = -50;

window.requestAnimFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) {
        window.setTimeout(callback, 1000 / 60);
    };

var Vector = function(x, y) {

  this.x = x || 0;
  this.y = y || 0;
};

Vector.prototype.add = function(v) {

  if (v.x != null && v.y != null) {

    this.x += v.x;
    this.y += v.y;

  } else {

    this.x += v;
    this.y += v;
  }

  return this;
};

Vector.prototype.copy = function() {

  return new Vector(this.x, this.y);
};

//--------------------------------------------

var Rain = function() {

  this.pos = new Vector( x_offset - (Math.random() * canvas.width * spread_coeff), rain_vstart);
  this.prev = this.pos;

  this.vel = new Vector();
};

Rain.prototype.update = function() {

  this.prev = this.pos.copy();

  this.vel.y += gravity;
  this.vel.x += wind;

  this.pos.add(this.vel);
};

Rain.prototype.draw = function() {

  ctx.beginPath();
  ctx.moveTo(this.pos.x, this.pos.y);
  ctx.lineTo(this.prev.x, this.prev.y);
  ctx.stroke();
};

//--------------------------------------------

var Drop = function(x, y) {

  var dist = Math.random() * 6;
  var angle = Math.PI + Math.random() * ( Math.PI / 1.5);

  this.pos = new Vector(x, y);

  this.vel = new Vector(
    Math.cos(angle) * dist,
    Math.sin(angle) * dist
    );
};

Drop.prototype.update = function() {

  this.vel.y += gravity;

  this.vel.x *= 1;
  // this.vel.y *= 0.95;

  this.pos.add(this.vel);
};

Drop.prototype.draw = function() {

  ctx.beginPath();
  ctx.arc(this.pos.x, this.pos.y, 1, 0, Math.PI * 2);
  ctx.fill();
};

//--------------------------------------------

function update() {

  ctx.clearRect(0, 0, canvas.width, canvas.height);

  var i = rain.length;
  while (i--) {

    var raindrop = rain[i];

    raindrop.update();

    if (raindrop.pos.y >= canvas.height) {

      var n = Math.round(4 + Math.random() * 4);

      while (n--)
      drops.push(new Drop(raindrop.pos.x, canvas.height));

      rain.splice(i, 1);
    }

    raindrop.draw();
  }

  var i = drops.length;
  while (i--) {

    var drop = drops[i];
    drop.update();
    drop.draw();

    if (drop.pos.y > canvas.height) drops.splice(i, 1);
  }

  if (Math.random() < rain_chance) rain.push(new Rain());

  requestAnimFrame(update);
}

function init() {

  ctx.lineWidth = 1;
  ctx.strokeStyle = ctx.fillStyle = '#172CC6';

  update();
}

init();

Comments