Skip to content

Commit 4a73e31

Browse files
shariquesharique
committed
Changed to easybank styling and markup.
1 parent 15f56f6 commit 4a73e31

File tree

2 files changed

+151
-85
lines changed

2 files changed

+151
-85
lines changed

‎FE-mentor/easybank-landing-page/index.html‎

Lines changed: 89 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -42,11 +42,11 @@
4242
</div>
4343
<nav class="menu">
4444
<ul>
45-
<li>Home</li>
46-
<li>About</li>
47-
<li>Contact</li>
48-
<li>Blog</li>
49-
<li>Careers</li>
45+
<li><a href="#">Home</a></li>
46+
<li><a href="#">About</a></li>
47+
<li><a href="#">Contact</a></li>
48+
<li><a href="#">Blog</a></li>
49+
<li><a href="#">Careers</a></li>
5050
</ul>
5151
</nav>
5252
<div class="request-button">Request Invite</div>
@@ -80,55 +80,65 @@ <h2>Why choose Easybank?</h2>
8080
</p>
8181
</div>
8282
<div class="wrapper features">
83-
<div class="feature">
84-
<img
85-
src="images/icon-online.svg"
86-
alt="Online Banking"
87-
/>
88-
<h2>Online Banking</h2>
89-
<p>
90-
Our modern web and mobile applications allow you
91-
to keep track of your finances wherever you are
92-
in the world.
93-
</p>
83+
<div class="feature card">
84+
<div class="image">
85+
<img
86+
src="images/icon-online.svg"
87+
alt="Online Banking"
88+
/>
89+
</div>
90+
<div class="card-body">
91+
<h2>Online Banking</h2>
92+
<p>
93+
Our modern web and mobile applications allow
94+
you to keep track of your finances wherever
95+
you are in the world.
96+
</p>
97+
</div>
9498
</div>
95-
<div class="feature">
99+
<div class="feature card">
96100
<img
97101
src="images/icon-budgeting.svg"
98102
alt="Simple Budgeting"
99103
/>
100-
<h2>Simple Budgeting</h2>
101-
<p>
102-
See exactly where your money goes each month.
103-
Receive
104-
</p>
104+
<div class="card-body">
105+
<h2>Simple Budgeting</h2>
106+
<p>
107+
See exactly where your money goes each
108+
month. Receive
109+
</p>
110+
</div>
105111
</div>
106-
<div class="feature">
112+
<div class="feature card">
107113
<img
108114
src="images/icon-budgeting.svg"
109115
alt="Fast Onboarding"
110116
/>
111-
<h2>Fast Onboarding</h2>
112-
<p>
113-
We don't do branches. Open your account in
114-
minutes online and start taking control of your
115-
finances right away.
116-
</p>
117+
<div class="card-body">
118+
<h2>Fast Onboarding</h2>
119+
<p>
120+
We don't do branches. Open your account in
121+
minutes online and start taking control of
122+
your finances right away.
123+
</p>
124+
</div>
117125
</div>
118-
<div class="feature">
126+
<div class="feature card">
119127
<img src="images/icon-api.svg" alt="Open API" />
120-
<h2>Open API</h2>
121-
<p>
122-
Manage your finances like never before. Online
123-
Banking Our modern web and mobile applications
124-
allow you to keep track of your finances
125-
wherever you are in the world.
126-
</p>
128+
<div class="card-body">
129+
<h2>Open API</h2>
130+
<p>
131+
Manage your finances like never before.
132+
Online Banking Our modern web and mobile
133+
applications allow you to keep track of your
134+
finances wherever you are in the world.
135+
</p>
136+
</div>
127137
</div>
128138
</div>
129139
</div>
130140
<div class="articles">
131-
<h2 class="wrapper">Latest Articles</h2>
141+
<h2 class="wrapper section-heading">Latest Articles</h2>
132142
<div class="wrapper article-list">
133143
<div class="card">
134144
<div class="image">
@@ -137,14 +147,16 @@ <h2 class="wrapper">Latest Articles</h2>
137147
alt="icon1"
138148
/>
139149
</div>
140-
<h3 class="heading">
141-
Receive money in any currency with no fees
142-
</h3>
143-
<div class="author">By Claire Robinson</div>
144-
<div class="content">
145-
The world is getting smaller and we’re becoming
146-
more mobile. So why should you be forced to only
147-
receive money in a single …
150+
<div class="card-body">
151+
<div class="author">By Claire Robinson</div>
152+
<h3 class="heading">
153+
Receive money in any currency with no fees
154+
</h3>
155+
<div class="content">
156+
The world is getting smaller and we’re
157+
becoming more mobile. So why should you be
158+
forced to only receive money in a single …
159+
</div>
148160
</div>
149161
</div>
150162
<div class="card">
@@ -154,28 +166,32 @@ <h3 class="heading">
154166
alt="icon2"
155167
/>
156168
</div>
157-
<h3 class="heading">
158-
Treat yourself without worrying about money
159-
</h3>
160-
<div class="author">By Wilson Hutton</div>
161-
<div class="content">
162-
Our simple budgeting feature allows you to
163-
separate out your spending and set realistic
164-
limits each month. That means you …
169+
<div class="card-body">
170+
<div class="author">By Wilson Hutton</div>
171+
<h3 class="heading">
172+
Treat yourself without worrying about money
173+
</h3>
174+
<div class="content">
175+
Our simple budgeting feature allows you to
176+
separate out your spending and set realistic
177+
limits each month. That means you …
178+
</div>
165179
</div>
166180
</div>
167181
<div class="card">
168182
<div class="image">
169183
<img src="images/image-plane.jpg" alt="icon3" />
170184
</div>
171-
<h3 class="heading">
172-
Take your Easybank card wherever you go
173-
</h3>
174-
<div class="author">By Claire Robinson</div>
175-
<div class="content">
176-
We want you to enjoy your travels. This is why
177-
we don’t charge any fees on purchases while
178-
you’re abroad. We’ll even show you …
185+
<div class="card-body">
186+
<div class="author">By Wilson Hutton</div>
187+
<h3 class="heading">
188+
Take your Easybank card wherever you go
189+
</h3>
190+
<div class="content">
191+
We want you to enjoy your travels. This is
192+
why we don’t charge any fees on purchases
193+
while you’re abroad. We’ll even show you …
194+
</div>
179195
</div>
180196
</div>
181197

@@ -186,14 +202,17 @@ <h3 class="heading">
186202
alt="icon4"
187203
/>
188204
</div>
189-
<h3 class="heading">
190-
Our invite-only Beta accounts are now live!
191-
</h3>
192-
<div class="author">By Claire Robinson</div>
193-
<div class="content">
194-
After a lot of hard work by the whole team,
195-
we’re excited to launch our closed beta. It’s
196-
easy to request an invite through the site ...
205+
<div class="card-body">
206+
<div class="author">By Claire Robinson</div>
207+
<h3 class="heading">
208+
Our invite-only Beta accounts are now live!
209+
</h3>
210+
<div class="content">
211+
After a lot of hard work by the whole team,
212+
we’re excited to launch our closed beta.
213+
It’s easy to request an invite through the
214+
site ...
215+
</div>
197216
</div>
198217
</div>
199218
</div>

‎FE-mentor/easybank-landing-page/style.css‎

Lines changed: 62 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -17,16 +17,12 @@
1717
display: flex;
1818
flex-direction: row;
1919
justify-content: space-between;
20-
padding-inline: 10px;
20+
/* padding-inline: 1rem; */
2121
margin-inline: auto;
22-
gap: 10px;
22+
gap: 1rem;
2323
max-inline-size: 1200px;
2424
}
2525

26-
.why {
27-
background: var(--light-grayish-blue);
28-
}
29-
3026
.request-button {
3127
border-radius: 20px;
3228
background: linear-gradient(
@@ -39,13 +35,21 @@
3935
text-align: center;
4036
height: fit-content;
4137
width: fit-content;
38+
margin-bottom: 0.5rem;
4239
}
4340

4441
ul {
4542
list-style: none;
4643
padding: 0;
4744
margin: 0;
4845
}
46+
p {
47+
color: var(--grayish-blue);
48+
}
49+
a {
50+
color: inherit;
51+
text-decoration: none;
52+
}
4953
/* Header */
5054
header {
5155
padding-top: 1em;
@@ -54,9 +58,20 @@ header {
5458
display: flex;
5559
flex-direction: row;
5660
gap: 1em;
57-
li {
61+
a {
5862
margin: 0;
5963
padding: 10px;
64+
font-weight: 500;
65+
color: var(--grayish-blue);
66+
}
67+
a:hover {
68+
border-bottom: 2px solid red;
69+
border-image: linear-gradient(
70+
to right,
71+
var(--lime-green),
72+
var(--bright-cyan)
73+
)
74+
1;
6075
}
6176
}
6277
/* Footer section */
@@ -85,28 +100,60 @@ footer {
85100
justify-content: center;
86101
flex-direction: column;
87102
gap: 10px;
103+
p {
104+
padding-block: 1rem;
105+
}
88106
}
89107
}
90108

91109
/* Features styling */
92110
.feature {
93111
flex: 0 1 100%;
94112
padding: 1rem 0;
95-
color: var(--grayish-blue);
96113
}
97114

98115
/* Articles styling */
99-
100116
.card {
101-
background: var(--white);
102-
img {
103-
/* aspect-ratio: 1/1; */
104-
object-fit: cover;
105-
height: 200px;
106-
width: 240px;
117+
.card-body {
118+
display: flex;
119+
flex-direction: column;
120+
gap: 0.5rem;
121+
}
122+
.author {
123+
font-size: 0.8rem;
124+
color: var(--grayish-blue);
125+
}
126+
.content {
127+
color: var(--grayish-blue);
107128
}
108129
}
109130
.article-list {
110131
gap: 1.2rem;
111132
background-color: var(--very-light-gray);
112133
}
134+
.articles {
135+
padding: 1rem 0;
136+
img {
137+
/* aspect-ratio: 1/1; */
138+
object-fit: cover;
139+
height: 240px;
140+
width: 280px;
141+
}
142+
.card {
143+
background: var(--white);
144+
}
145+
.card-body {
146+
padding: 1rem;
147+
}
148+
}
149+
150+
.why {
151+
background: var(--light-grayish-blue);
152+
.card-body {
153+
padding-top: 1rem;
154+
}
155+
}
156+
.section-heading.wrapper {
157+
padding: 2rem 0;
158+
flex-direction: column;
159+
}

0 commit comments

Comments
 (0)