-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
183 lines (181 loc) · 7.48 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
<!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>MiniBank</title>
<link rel="stylesheet" href="./css/style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DM+Sans&display=swap" rel="stylesheet">
</head>
<body>
<!-- ! NAVBAR -->
<header>
<nav class="container">
<ul class="navbar-menu">
<li class="navbar-left"><a href="#">minibank</a></li>
<li class="navbar-right"><a href="#products">products</a></li>
<li class="navbar-right"><a href="#reasons-to-choose">why choose us?</a></li>
<li class="navbar-right"><a href="#registration">be a member</a></li>
</ul>
</nav>
</header>
<main>
<!-- ! HERO -->
<section class="hero container">
<div class="hero-details">
<div class="heading">
<h1>Bank for the minimalists</h1>
</div>
<div class="text-below-heading">
<p><strong>No</strong> admin fees. <strong>No</strong> fancy ui. <strong>No</strong> silent charges</p>
<p>Everything <strong>transparant</strong> just like drinkable water.</p>
<p><strong>register anytime, stop anytime.</strong></p>
</div>
<div class="hero-button">
<a href="#products">See the details</a>
</div>
</div>
<div class="hero-background">
<img src="assets/hero-background/credit-cards-payment.png" alt="hero debit card background">
</div>
</section>
<!-- ! PRODUCTS -->
<section class="products container" id="products">
<h1>our products</h1>
<div class="products-wrapper">
<div class="product">
<div class="product-image">
<img src="assets/product-images/digital-marketing.png" alt="digital banking">
</div>
<div class="product-details">
<p><span>digital bank</span> for you who prioritize <strong>effectiveness</strong>, <strong>easyness</strong>, and <strong>compactness.</strong></p>
</div>
</div>
<div class="product">
<div class="product-image">
<img src="assets/product-images/safe-box.png" alt="conventional bank">
</div>
<div class="product-details">
<p><span>conventional bank</span> for you who already <strong>used to it</strong> and want <strong>big bank interest rates.</strong></p>
</div>
</div>
<div class="product">
<div class="product-image">
<img src="assets/product-images/mosque.png" alt="syariah bank">
</div>
<div class="product-details">
<p><span>syariah bank</span> <strong>for moslem</strong> to obey their rules and receive good deeds.</p>
</div>
</div>
</div>
</section>
<!-- ! WHY CHOOSE US -->
<section class="reasons-to-choose container" id="reasons-to-choose">
<h1>Why choose us?</h1>
<!-- ? PROVIDE THE BEST TECHNOLOGY -->
<div class="reason">
<div class="reason-image-left">
<img src="assets/why-choose-us-images/artificial-intelligence-black-outline.png" alt="ai image">
</div>
<div class="reason-details-right">
<p>We provide the <span>best and the latest technology</span> for you. All of your needs is in your phone. MiniBank mobile app is there for you to do everything. MiniBank also <span>very secure.</span> You don't need to worry anymore about your bank account security. Our security already proven by Menkominfo.</p>
</div>
</div>
<!-- ? SPECIAL FOR THE MINIMALIST -->
<div class="reason">
<div class="reason-details-left">
<p>You already know it from the beginning, <span>this is for the minimalist.</span> No fancy UI. Everything is straighforward. Designed for functionality. No distractions.</p>
</div>
<div class="reason-image-right">
<img src="assets/why-choose-us-images/user.png" alt="image of a person">
</div>
</div>
<!-- ? TRANSPARANCY NUMBER 1 -->
<div class="reason">
<div class="reason-image-left">
<img class="transparent" src="assets/why-choose-us-images/gear.png" alt="money gear image">
</div>
<div class="reason-details-right">
<p><span>Every transaction is transparant.</span> Even the picture on the left side is transparent and you must hover to see it clearly. You'll know every in and out on your account. <span>No silent charges. No admin fees.</span> Everything is notified through MiniBank mobile apps and your email. You have full control of your account. We guarantee that all of your money will not get reduced if you didn't use it.</p>
</div>
</div>
</section>
<!-- ! BE A MEMBER -->
<section class="registration container" id="registration">
<div class="registration-heading">
<h1>Join Us</h1>
</div>
<div class="form">
<form action="">
<div class="full-name">
<p>Full Name</p>
<input type="text" placeholder="Rafi Muhammad">
</div>
<div class="email">
<p>Email</p>
<input type="email" placeholder="[email protected]">
</div>
<div class="dob">
<p>Date of Birth</p>
<input type="date">
</div>
<div class="phone-number">
<p>Phone Number</p>
<input type="number" placeholder="081234567890">
</div>
<div class="id-card-number">
<p>ID Card Number</p>
<input type="number" placeholder="2189765789021673">
</div>
<div class="button-submit">
<button type="submit">Submit</button>
</div>
</form>
</div>
</section>
<!-- ! CREDITS TO -->
<section class="credits container">
<div class="credits-heading">
<h1>Credits</h1>
</div>
<ul>
<li class="credit">
Icons made by <a href="https://www.freepik.com" title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a>
</li>
<li class="credit">
Icons made by <a href="" title="monkik">monkik</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a>
</li>
<!-- AI -->
<li class="credit">
Icons made by <a href="https://www.flaticon.com/authors/prettycons" title="prettycons">prettycons</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a>
</li>
<!-- PERSON -->
<li class="credit">
Icons made by <a href="" title="bqlqn">bqlqn</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a>
</li>
</ul>
</section>
</main>
<!-- ! FOOTER -->
<footer>
<div class="social-media">
<a href="">
<img src="assets/footer-images/instagram-black-outline.png" alt="isntagram">
</a>
<a href="">
<img src="assets/footer-images/linkedin-black-outline.png" alt="linkedin">
</a>
<a href="">
<img src="assets/footer-images/twitter-black-outline.png" alt="twitter">
</a>
</div>
<div class="copyrights">
<p>MiniBank - Copyright 2021</p>
</div>
</footer>
<script src="./js/script.js"></script>
</body>
</html>