-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
189 lines (183 loc) · 7.71 KB
/
index.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
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="./assets/IMG/logo.png" type="image/x-icon">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"/>
<link rel="stylesheet" href="./style.css">
<title>CRED - pay your credit card bill & earn rewards</title>
</head>
<body>
<div id="main">
<nav>
<img src="./assets/IMG/cred-logo.webp" alt="logo">
<div class="right-nav">
<a href="#">credit score check</a>
<a href="#">CRED pay</a>
</div>
</nav>
<div class="part-1">
<h1>rewards of paying<br>credit card bills.</h1>
<p>join 9M+ members who win rewards and cashbacks everyday</p>
<button>Download CRED</button>
</div>
</div>
<div class="part-2">
<img src="./assets/IMG/neopop-left-1.png" id="imgone" alt="left1">
<img src="./assets/IMG/neopop-left-2.png" id="imgtwo" alt="left2">
<img src="./assets/IMG/neopop-center.png" id="imgthree" alt="center">
<img src="./assets/IMG/neopop-right-2.png" id="imgfour" alt="right2">
<img src="./assets/IMG/neopop-right-1.png" id="imgfive" alt="right1">
</div>
<div class="part-same part-3">
<h1>feel special <br>more often.</h1>
<h3>exclusive rewards for paying your bills</h3>
<p>every time you pay your credit card bills on CRED, you receive CRED coins. you can use these to win exclusive
rewards or get special access to curated products and experiences. on CRED, good begets good.</p>
<button>Explore rewards</button>
</div>
<div class="strip">
<h3>rewards from brands you love.</h3>
<img src="./assets/IMG/brands-desktop.png" alt="desktop">
</div>
<div class="part-same part-4">
<h1>we take your money <br>matters seriously.</h1>
<h3>so that you don’t have to.</h3>
<p>never miss a due date with reminders to help you pay your bills on time, instant settlements mean you never
wait for your payments to go through and statement analysis lets you know where your money goes, always.</p>
<button>Experience the upgrade</button>
</div>
<div id="part-5" class="part-same">
<div class="left-part-5">
<div id="scroll-1" class="scroll-txt">
<h1>we’ve got <br>your back.</h1>
<p>gain complete control over your credit card with CRED Protect. receive category-based analysis of
your spends, detect hidden charges, and track your credit limit in real-time.</p>
</div>
<div id="scroll-2" class="scroll-txt">
<h1>begin your
<br>winning streak.
</h1>
<p>use your CRED coins to participate in games and raffles to win the most exclusive rewards and
cashbacks on CRED. good luck.</p>
</div>
<div id="scroll-3" class="scroll-txt">
<h1>for your
<br>eclectic taste.
</h1>
<p>get access to the CRED Store, a member-exclusive selection of products and experiences at special
prices that complement your taste. this is the good life they speak of.</p>
</div>
<div id="scroll-4" class="scroll-txt">
<h1>more cash
<br>in your pockets.
</h1>
<p>gain complete control over your credit card with CRED Protect. receive category-based analysis of
your spends, detect hidden charges, and track your credit limit in real-time.</p>
</div>
</div>
<div class="right-part-5">
<div class="phone">
<div class="phone-img">
<img src="./assets/IMG/neopop-fold1.png" alt="1">
<img src="./assets/IMG/neopop-fold2.png" alt="2">
<img src="./assets/IMG/neopop-fold3.png" alt="3">
<img src="./assets/IMG/neopop-fold4.png" alt="4">
</div>
</div>
</div>
</div>
<div class="part-6"></div>
<div class="part-same part-7">
<h1>security first. <br>and second.</h1>
<h3>what’s yours remains only yours.</h3>
<p>CRED ensures that all your personal data and transactions are encrypted, and secured so what’s yours remains
only yours. there’s no room for mistakes because we didn’t leave any.</p>
<button>Becomer a member</button>
</div>
<div class="part-same part-8">
<h1>the story of<br>
CRED begins<br>
with trust.</h1>
<p>trust as a virtue has consistently played an essential role in every great human achievement. and
consistently, its importance has been overlooked. not just by individuals, but by entire societies. we felt
it was time someone gave it the spotlight it deserves. especially for the ones who live by this virtue: the
trustworthy.
so we thought of creating a system that rewards its members for doing good and being trustworthy. this way,
trust as a virtue becomes something to aspire to, just the way it should be. then we went one step ahead: we
built it. we know we are on the right track because here you are.
if you make it to CRED, congratulations and welcome. we have a lot of things planned for you.</p>
</div>
<div class="part-9">
<div class="top-part-9">
<div class="rating">
<div class="rating-value">
<h1>4.8</h1>
<h3>app<br>store</h3>
</div>
<img src="./assets/IMG/rating-ios.png" alt="">
<button>
<img src="./assets/IMG/apple-store-logo.webp" alt="">
<h3>Download the app</h3>
</button>
</div>
<div class="rating">
<div class="rating-value">
<h1>4.7</h1>
<h3>play<br>store</h3>
</div>
<img src="./assets/IMG/rating-ios.png" alt="">
<button>
<img src="./assets/IMG/apple-store-logo.webp" alt="">
<h3>Download the app</h3>
</button>
</div>
</div>
<div class="bottom-part-9">
<div class="slider-part">
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">"this is a great app loaded with functionality and simplicity yet
elegant and intuitive. a must have for the plastic money users. keeps me in financial
discipline and helps me take the billing and payment worries out of my mind"
<br><br>
ranesh bhattacharya
</div>
<div class="swiper-slide">"this is a great app loaded with functionality and simplicity yet
elegant and intuitive. a must have for the plastic money users. keeps me in financial
discipline and helps me take the billing and payment worries out of my mind"
<br><br>
ranesh bhattacharya
</div>
<div class="swiper-slide">"this is a great app loaded with functionality and simplicity yet
elegant and intuitive. a must have for the plastic money users. keeps me in financial
discipline and helps me take the billing and payment worries out of my mind"
<br><br>
ranesh bhattacharya
</div>
<div class="swiper-slide">"this is a great app loaded with functionality and simplicity yet
elegant and intuitive. a must have for the plastic money users. keeps me in financial
discipline and helps me take the billing and payment worries out of my mind"
<br><br>
ranesh bhattacharya
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.4/gsap.min.js"
integrity="sha512-EZI2cBcGPnmR89wTgVnN3602Yyi7muWo8y1B3a8WmIv1J9tYG+udH4LvmYjLiGp37yHB7FfaPBo8ly178m9g4Q=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.4/ScrollTrigger.min.js"
integrity="sha512-OzC82YiH3UmMMs6Ydd9f2i7mS+UFL5f977iIoJ6oy07AJT+ePds9QOEtqXztSH29Nzua59fYS36knmMcv79GOg=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.min.js"
integrity="sha512-Ysw1DcK1P+uYLqprEAzNQJP+J4hTx4t/3X2nbVwszao8wD+9afLjBQYjz7Uk4ADP+Er++mJoScI42ueGtQOzEA=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="./script.js"></script>
</body>
</html>