-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcase_study.html
116 lines (103 loc) · 6.25 KB
/
case_study.html
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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<link rel="stylesheet" href="output.css">
<link rel="stylesheet" href="custom.css">
<body class="h-[1000px] w-auto bg-gradient-to-r from-[#673abf] to-[#552189]">
<header class="bg-gradient-to-r from-[#673abf] to-[#552189] flex justify-center">
<img src="./resources-for-web/investo-cover-heading.svg" alt="" class="h-[100px] w-auto p-[20px]">
</header>
<section class=" pt-[50px] flex justify-center">
<!-- div holding the phone image (animation) -->
<div class="h-au" id="scroll-movement-animation">
<img src="./resources-for-web/phone-together.svg" alt="" class="mobileAnimation lg:h-[600px] w-auto
sm:h-[390px] sm:pt-[90px] sm:w-auto md:h-[480px] md:pt-[50px]" >
</div>
</section>
<!-- section will hold the information about the project -->
<section class="bg-[#D9D9D9] bottom-10 m-4 mb-0 rounded-lg lg md:h-[1900px] md:mt-[200px] sm:h-[2150px] sm:mt-[190px] mt-[40px]">
<!-- THIS div will hold the introduction about the project -->
<div class="p-[100px]
sm:p-[25px] sm:pt-[40px]
md:p-[40px]
lg:pl-[100px] ">
<div class="relative">
<h4 class="font-kOne relative z-10 lg:text-[36px] sm:text-[28px] md:text-[36px]
">INVESTO</h4>
<div class="absolute bg-[#A388D9] h-[16px] lg:w-[230px] md:w-[230px] sm:w-[180px] bottom-1 left-0 z-0 "></div>
</div>
<p class="font-kufam pt-[20px]
sm:text-[15px]
md:text-[18px]
lg:text-[18px]">Investo is a full-stack web application that helps users track and manage their investments easily. It provides a simple and intuitive way to monitor their investment journey over time, offering useful insights and structured data to support better financial decisions
</p>
</div>
<!-- this div will hold the problem solved details about the website -->
<div class="p-[100px]
sm:p-[25px] sm:pt-[40px]
md:p-[40px]
lg:pl-[100px] ">
<div class="relative">
<h4 class="font-kOne relative z-10 lg:text-[36px] sm:text-[28px] md:text-[36px]
">PROBLEM SOLVED</h4>
<div class="absolute bg-[#A388D9] h-[16px] lg:w-[423px] md:w-[420px] sm:w-[180px] bottom-1 left-0 z-0 "></div>
</div>
<p class="font-kufam pt-[20px]
sm:text-[15px]
md:text-[18px]
lg:text-[18px]">Investo helps users track and manage their investments easily. It solves the problem of not being able to backtrack past investments and analyze portfolio growth. With a simple and intuitive user interface, Investo securely stores all investment details, allowing users to review their financial journey anytime
</p>
</div>
<!-- this div will hold the figma design and implementation details -->
<div class="p-[100px]
sm:p-[25px] sm:pt-[40px]
md:p-[40px]
lg:pl-[100px] ">
<div class="relative">
<h4 class="font-kOne relative z-10 lg:text-[36px] sm:text-[20px] md:text-[36px]
">DESIGN AND IMPLEMENTATION</h4>
<div class="absolute bg-[#A388D9] h-[16px] lg:w-[730px] md:w-[420px] sm:w-[230px] sm:h-[9px] md:h-[13px] bottom-1 left-0 z-0 "></div>
</div>
<iframe src="https://embed.figma.com/design/WJu9oTIEDKrtwiIb1IyQDz/investment-web-app?node-id=0-1&embed-host=share" allowfullscreen class="pt-[20px] lg:h-[600px] lg:w-[800px] md:h-[600px] md:w-[650px] sm:h-[500px] sm:w-[230px]"></iframe>
<p class="font-kufam pt-[20px]
sm:text-[15px]
md:text-[18px]
lg:text-[18px]">Developing Investo wasn’t easy—it took over two months to write the code and implement it while overcoming various design challenges. A unique approach to data storage and user authentication was used to ensure security and efficiency. The application is fully functional locally but has not been hosted yet.
</p>
<div class="font-kufam pt-[20px]
sm:text-[15px]
md:text-[18px]
lg:text-[18px] lg:flex sm:flex-col">TECH STACK USED :
<img src="https://img.shields.io/badge/mysql-4479A1.svg?style=for-the-badge&logo=mysql&logoColor=white" alt="" class="rounded-[20px] sm:h-[20px] md:h-[30px] lg:h-[30px] pl-[5px] sm:mb-[10px]">
<img src="https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E" alt="" class="rounded-[30px] pl-[5px] sm:h-[20px] sm:mb-[10px] md:h-[30px] lg:h-[30px]">
<img src="https://img.shields.io/badge/php-%23777BB4.svg?style=for-the-badge&logo=php&logoColor=white" alt="" class="rounded-[20px] pl-[5px] sm:h-[20px] md:h-[30px] lg:h-[30px]">
</div>
</div>
<div class="p-[100px]
sm:p-[25px] sm:pt-[40px]
md:p-[40px]
lg:pl-[100px] ">
<div class="relative">
<h4 class="font-kOne relative z-10 lg:text-[36px] sm:text-[28px] md:text-[36px]
">CONCULSION</h4>
<div class="absolute bg-[#A388D9] h-[14px] lg:w-[423px] md:w-[420px] sm:w-[240px] bottom-1 left-0 z-0 "></div>
</div>
<p class="font-kufam pt-[20px]
sm:text-[15px]
md:text-[18px]
lg:text-[18px]">Investo was built to simplify investment tracking and portfolio analysis, ensuring a seamless user experience. Despite development challenges, it now runs locally with secure data storage and authentication. The next step is deployment to reach a wider audience.
</p>
</div>
</section>
<svg>
<filter id="grainyTexture">
<feTurbulence type = "turbulence" baseFrequency = "0.60"/>
</filter>
</svg>
</body>
<script src="text-animation.js"></script>
</html>