piggyvest-solution/index.html at main · Ifycode-support/piggyvest-solution · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!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>Document</title>
    <link rel="stylesheet" href="./css/styles.css">
</head>
<body>
    <!-- Temporary header -->
    <header class="dummy-class">
        Header would go here
    </header>

    <!-- Hero section -->
    <section class="hero-section">
        <div>
            <h1>The Better Way to Save & Invest.</h1>
            <p>PiggyVest helps over 3 million customers achieve their financial goals by helping them save and invest with ease.</p>
            <button>Create free account</button>
            <div class="hero-inner">
                <div>
                    <button>
                        <img src="./img/apple_icon.svg" alt="apple icon">
                        <span>Get on iphone</span>
                    </button>
                    <button>
                        <img src="./img/google_icon.svg" alt="play store icon">
                        <span>Get on Anroid</span>
                    </button>
                </div>
            </div>
        </div>
        <div>
            <div class="hero-inner">
                <div class="">
                    <div class="hero-inner-right-child">
                        <img src="./img/hero-right/rect.png" alt="transparent background rectangle with black border">
                        <div class="hero-inner-right-grandchild">
                            <div class="hero-inner-inner">
                                <img class="lady-img" src="./img/hero-right/lady-img.png" alt="image of lady">

                                <!-- other image elements which are to be absolute to hero-inner-inner -->
                                <img class="inner-inner-images small-img img-my-rent" src="./img/hero-right/my-rent.png" alt="my rent image">
                                <img class="inner-inner-images small-img img-investify" src="./img/hero-right/investify.png" alt="investify image">
                                <svg class="inner-inner-images svg-cross" width="75" height="75" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg" style="transform: translate(0px, 0px); opacity: 1;"><g opacity="0.2"><path d="M34.5601 36.8001H8.64014V28.4001H26.2401V10.5601H34.5601V36.8001Z" fill="#7913E5"></path><path d="M72.1602 36.8001H46.2402V10.5601H54.5602V28.4001H72.1602V36.8001Z" fill="#7913E5"></path><path d="M35.6798 69.6001H27.3598V51.7601H9.75977V43.3601H35.6798V69.6001Z" fill="#7913E5"></path><path d="M54.5602 69.6001H46.2402V43.3601H72.1602V51.7601H54.5602V69.6001Z" fill="#7913E5"></path></g></svg>
                                <svg class="inner-inner-images svg-circle" width="41" height="41" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg" style="transform: translate(0px, 0px); opacity: 1;"><circle cx="23" cy="23" r="15.5" stroke="#E7439C" stroke-opacity="0.15" stroke-width="15"></circle></svg>
                                <svg class="inner-inner-images svg-dot-group" width="33" height="108" viewBox="0 0 35 110" fill="none" xmlns="http://www.w3.org/2000/svg" style="transform: translate(0px, 0px); opacity: 1;"><circle cx="5" cy="5" r="5" fill="#2295F2" fill-opacity="0.28"></circle><circle cx="5" cy="30" r="5" fill="#2295F2" fill-opacity="0.28"></circle><circle cx="5" cy="55" r="5" fill="#2295F2" fill-opacity="0.28"></circle><circle cx="5" cy="80" r="5" fill="#2295F2" fill-opacity="0.28"></circle><circle cx="5" cy="105" r="5" fill="#2295F2" fill-opacity="0.28"></circle><circle cx="30" cy="5" r="5" fill="#2295F2" fill-opacity="0.28"></circle><circle cx="30" cy="30" r="5" fill="#2295F2" fill-opacity="0.28"></circle><circle cx="30" cy="55" r="5" fill="#2295F2" fill-opacity="0.28"></circle><circle cx="30" cy="80" r="5" fill="#2295F2" fill-opacity="0.28"></circle><circle cx="30" cy="105" r="5" fill="#2295F2" fill-opacity="0.28"></circle></svg>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Representing other sections -->
    <section class="dummy-class">
         Representing one of other sections
    </section>
</body>
</html>