-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
153 lines (148 loc) · 11 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
<!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" />
<link rel="stylesheet" href="./css/normalize.css">
<link rel="stylesheet" href="./css/index.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=Public+Sans:wght@300;400;700&display=swap" rel="stylesheet">
<title>Document</title>
</head>
<body>
<header class="header">
<div class="headerContainer">
<a class="headerLogo" href="#"><img class="headerLogo__img" src="./images/logo.svg" alt="Logo Svg" /></a>
<nav class="nav">
<ul class="navList">
<li class="navList__item"><a class="navList__link" href="#">Home</a></li>
<li class="navList__item"><a class="navList__link" href="#">About</a></li>
<li class="navList__item"><a class="navList__link" href="#">Contact</a></li>
<li class="navList__item"><a class="navList__link" href="#">Blog</a></li>
<li class="navList__item"><a class="navList__link" href="#">Careers</a></li>
</ul>
</nav>
<a class="headerLink cta" href="#">Request Invite</a>
<a href="#" class="hamburger"><img src="./images/icon-hamburger.svg" alt="" class="hamburger__img"></a>
</div>
</header>
<main class="main">
<div class="hero">
<section class="heroContent">
<h1 class="heroContent__title">Next generation digital banking</h1>
<p class="heroContent__paragraph paragraph">Take your financial life online. Your Easybank account will be a one-stop-shop for spending, saving, budgeting, investing, and much more.</p>
<a class="heroContent__link cta" href="#">Request Invite</a>
</section>
<img class="heroImg__img" src="./images/image-mockups.png" alt="Imagen hero" />
</div>
<section class="information">
<h2 class="information__title subtitle">Why choose Easybank?</h2>
<p class="information__paragraph paragraph">We leverage Open Banking to turn your bank account into your financial hub. Control your finances like never before.</p>
<div class="informationContent">
<section class="informationContentBox informationContentBox--first">
<img class="informationContentBox__img" src="./images/icon-online.svg" alt="Online Banking Svg" />
<h3 class="informationContentBox__title subsubtitle">Online Banking</h3>
<p class="informationContentBox__paragraph paragraph">Our modern web and mobile applications allow you to keep track of your finances wherever you are in the world.</p>
</section>
<section class="informationContentBox informationContentBox--second">
<img class="informationContentBox__img" src="./images/icon-budgeting.svg" alt="" />
<h3 class="informationContentBox__title subsubtitle">Simple Budgeting</h3>
<p class="informationContentBox__paragraph paragraph">See exactly where your money goes each month. Receive notifications when you’re close to hitting your limits.</p>
</section>
<section class="informationContentBox informationContentBox--third">
<img class="informationContentBox__img" src="./images/icon-onboarding.svg" alt="" />
<h3 class="informationContentBox__title subsubtitle">Fast Onboarding</h3>
<p class="informationContentBox__paragraph paragraph">We don’t do branches. Open your account in minutes online and start taking control of your finances right away.</p>
</section>
<section class="informationContentBox informationContentBox--fourth">
<img class="informationContentBox__img" src="./images/icon-api.svg" alt="" />
<h3 class="informationContentBox__title subsubtitle">Open API</h3>
<p class="informationContentBox__paragraph paragraph">Manage your savings, investments, pension, and much more from one account. Tracking your money has never been easier.</p>
</section>
</div>
</section>
<section class="articles">
<h2 class="articles__title subtitle">Latest Articles</h2>
<div class="articlesContent">
<div class="articlesContentBox articlesContentBox--first">
<img src="./images/image-restaurant.jpg" alt="" class="articlesContentBox__img">
<div class="articlesContentBox__div">
<span class="articlesContentBox__span">By Claire Robinson</span>
<h4 class="articlesContentBox__title">Receive money in any currency with no fees</h4>
<p class="articlesContentBox__paragraph paragraph">The world is getting smaller and we’re becoming more mobile. So why should you be forced to only receive money in a single …</p>
</div>
</div>
<div class="articlesContentBox articlesContentBox--second">
<img src="./images/image-restaurant.jpg" alt="" class="articlesContentBox__img">
<div class="articlesContentBox__div">
<span class="articlesContentBox__span">By Wilson Hutton</span>
<h4 class="articlesContentBox__title">Treat yourself without worrying about money</h4>
<p class="articlesContentBox__paragraph paragraph">Our simple budgeting feature allows you to separate out your spending and set realistic limits each month. That means you …</p>
</div>
</div>
<div class="articlesContentBox articlesContentBox--third">
<img src="./images/image-plane.jpg" alt="" class="articlesContentBox__img">
<div class="articlesContentBox__div">
<span class="articlesContentBox__span">By Wilson Hutton</span>
<h4 class="articlesContentBox__title">Take your Easybank card wherever you go</h4>
<p class="articlesContentBox__paragraph paragraph">We want you to enjoy your travels. This is why we don’t charge any fees on purchases while you’re abroad. We’ll even show you …</p>
</div>
</div>
<div class="articlesContentBox articlesContentBox--fourth">
<img src="./images/image-confetti.jpg" alt="" class="articlesContentBox__img">
<div class="articlesContentBox__div">
<span class="articlesContentBox__span">By Claire Robinson</span>
<h4 class="articlesContentBox__title">Our invite-only Beta accounts are now live!</h4>
<p class="articlesContentBox__paragraph paragraph">After a lot of hard work by the whole team, we’re excited to launch our closed beta. It’s easy to request an invite through the site ...</p>
</div>
</div>
</div>
</section>
</main>
<footer class="footer">
<div class="footerContainer">
<div class="footerContent">
<div class="footerContentHeader">
<img src="./images/logoFooter.svg" alt="Logo Svg" class="footerContentHeader__img" />
<ul class="footerContentHeaderList">
<li class="footerContentHeaderlist__item">
<a class="footerContentHeaderList__link" href="#"><img class="footerContentHeaderList__img" src="./images/icon-facebook.svg" alt="" /></a>
</li>
<li class="footerContentHeaderlist__item">
<a class="footerContentHeaderList__link" href="#"><img class="footerContentHeaderList__img" src="./images/icon-youtube.svg" alt="" /></a>
</li>
<li class="footerContentHeaderlist__item">
<a class="footerContentHeaderList__link" href="#"><img class="footerContentHeaderList__img" src="./images/icon-twitter.svg" alt="" /></a>
</li>
<li class="footerContentHeaderlist__item">
<a class="footerContentHeaderList__link" href="#"><img class="footerContentHeaderList__img" src="./images/icon-pinterest.svg" alt="" /></a>
</li>
<li class="footerContentHeaderlist__item">
<a class="footerContentHeaderList__link" href="#"><img class="footerContentHeaderList__img" src="./images/icon-instagram.svg" alt="" /></a>
</li>
</ul>
</div>
<nav class="footerContentLink">
<ul class="footerContentLinkList">
<div class="footerContentLinkListContainer">
<li class="footerContentLinkList__item"><a class="footerContentLinkList__link" href="#">About Us</a></li>
<li class="footerContentLinkList__item"><a class="footerContentLinkList__link" href="#">Contact</a></li>
<li class="footerContentLinkList__item"><a class="footerContentLinkList__link" href="#">Blog</a></li>
</div>
<div class="footerContentLinkListContainer">
<li class="footerContentLinkList__item"><a class="footerContentLinkList__link" href="#">Careers</a></li>
<li class="footerContentLinkList__item"><a class="footerContentLinkList__link" href="#">Support</a></li>
<li class="footerContentLinkList__item"><a class="footerContentLinkList__link" href="#">Privacy Policy</a></li>
</div>
</ul>
</nav>
</div>
<div class="footerCopyright">
<a class="footerCopyright__link cta" href="#">Request Invite</a><span class="footerCopyright__span">© Joaquín García. All Rights Reserved</span>
</div>
</div>
</footer>
</body>
</html>