├── .gitignore ├── img ├── favicon-32x32.png ├── image-mockups.png ├── image-plane.jpg ├── image-confetti.jpg ├── image-currency.jpg ├── image-restaurant.jpg ├── icon-hamburger.svg ├── icon-close.svg ├── icon-facebook.svg ├── icon-youtube.svg ├── icon-twitter.svg ├── icon-pinterest.svg ├── icon-instagram.svg ├── icon-online.svg ├── bg-intro-mobile.svg ├── bg-intro-desktop.svg ├── icon-budgeting.svg ├── logo-white.svg ├── logo.svg ├── icon-onboarding.svg └── icon-api.svg ├── README.md ├── js └── script.js ├── style-guide.md ├── text.html ├── index.html └── css └── style.css /.gitignore: -------------------------------------------------------------------------------- 1 | .vscode 2 | .DS_Store -------------------------------------------------------------------------------- /img/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codersgyan/easy-bank/HEAD/img/favicon-32x32.png -------------------------------------------------------------------------------- /img/image-mockups.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codersgyan/easy-bank/HEAD/img/image-mockups.png -------------------------------------------------------------------------------- /img/image-plane.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codersgyan/easy-bank/HEAD/img/image-plane.jpg -------------------------------------------------------------------------------- /img/image-confetti.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codersgyan/easy-bank/HEAD/img/image-confetti.jpg -------------------------------------------------------------------------------- /img/image-currency.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codersgyan/easy-bank/HEAD/img/image-currency.jpg -------------------------------------------------------------------------------- /img/image-restaurant.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codersgyan/easy-bank/HEAD/img/image-restaurant.jpg -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # easy-bank Frontend mentor chanllange 2 | 3 | ## Demo 4 | [https://suspicious-bhaskara-9a9ab9.netlify.app/](https://suspicious-bhaskara-9a9ab9.netlify.app/) 5 | -------------------------------------------------------------------------------- /img/icon-hamburger.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /img/icon-close.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /img/icon-facebook.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /img/icon-youtube.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /js/script.js: -------------------------------------------------------------------------------- 1 | const navLinks = document.querySelector('.nav-links'); 2 | const hamburgerBtn = document.querySelector('.hamburger-btn'); 3 | const toggleImg = document.querySelector('#toggle-img'); 4 | 5 | hamburgerBtn.addEventListener('click', () => { 6 | navLinks.classList.toggle('open'); 7 | isOpen = navLinks.classList.contains('open'); 8 | if (isOpen) { 9 | toggleImg.src = './img/icon-close.svg'; 10 | } else { 11 | toggleImg.src = './img/icon-hamburger.svg'; 12 | } 13 | }) 14 | 15 | -------------------------------------------------------------------------------- /img/icon-twitter.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /style-guide.md: -------------------------------------------------------------------------------- 1 | # Front-end Style Guide 2 | 3 | ## Layout 4 | 5 | The designs were created to the following widths: 6 | 7 | - Mobile: 375px 8 | - Desktop: 1440px 9 | 10 | ## Colors 11 | 12 | ### Primary 13 | 14 | - Dark Blue: hsl(233, 26%, 24%) 15 | - Lime Green: hsl(136, 65%, 51%) 16 | - Bright Cyan: hsl(192, 70%, 51%) 17 | 18 | ### Neutral 19 | 20 | - Grayish Blue: hsl(233, 8%, 62%) 21 | - Light Grayish Blue: hsl(220, 16%, 96%) 22 | - Very Light Gray: hsl(0, 0%, 98%) 23 | - White: hsl(0, 0%, 100%) 24 | 25 | ## Typography 26 | 27 | ### Body Copy 28 | 29 | - Font size: 18px 30 | 31 | ### Font 32 | 33 | - Family: [Public Sans](https://fonts.google.com/specimen/Public+Sans) 34 | - Weights: 300, 400, 700 -------------------------------------------------------------------------------- /img/icon-pinterest.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /img/icon-instagram.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /img/icon-online.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /img/bg-intro-mobile.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /img/bg-intro-desktop.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /img/icon-budgeting.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /img/logo-white.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /img/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /text.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Frontend Mentor | Easybank landing page 12 | 13 | 14 | 24 | 25 | 26 | 27 | 28 | Home 29 | About 30 | Contact 31 | Blog 32 | Careers 33 | 34 | Request Invite 35 | 36 | 37 | 38 | Next generation digital banking 39 | 40 | Take your financial life online. Your Easybank account will be a one-stop-shop 41 | for spending, saving, budgeting, investing, and much more. 42 | 43 | Request Invite 44 | 45 | 46 | 47 | Why choose Easybank? 48 | 49 | We leverage Open Banking to turn your bank account into your financial hub. Control 50 | your finances like never before. 51 | 52 | Online Banking 53 | Our modern web and mobile applications allow you to keep track of your finances 54 | wherever you are in the world. 55 | 56 | Simple Budgeting 57 | See exactly where your money goes each month. Receive notifications when you’re 58 | close to hitting your limits. 59 | 60 | Fast Onboarding 61 | We don’t do branches. Open your account in minutes online and start taking control 62 | of your finances right away. 63 | 64 | Open API 65 | Manage your savings, investments, pension, and much more from one account. Tracking 66 | your money has never been easier. 67 | 68 | 69 | 70 | Latest Articles 71 | 72 | By Claire Robinson 73 | Receive money in any currency with no fees 74 | The world is getting smaller and we’re becoming more mobile. So why should you be 75 | forced to only receive money in a single … 76 | 77 | By Wilson Hutton 78 | Treat yourself without worrying about money 79 | Our simple budgeting feature allows you to separate out your spending and set 80 | realistic limits each month. That means you … 81 | 82 | By Wilson Hutton 83 | Take your Easybank card wherever you go 84 | We want you to enjoy your travels. This is why we don’t charge any fees on purchases 85 | while you’re abroad. We’ll even show you … 86 | 87 | By Claire Robinson 88 | Our invite-only Beta accounts are now live! 89 | After a lot of hard work by the whole team, we’re excited to launch our closed beta. 90 | It’s easy to request an invite through the site ... 91 | 92 | 93 | 94 | About Us 95 | Contact 96 | Blog 97 | Careers 98 | Support 99 | Privacy Policy 100 | 101 | Request Invite 102 | 103 | © Easybank. All Rights Reserved 104 | 105 |

106 | Challenge by Frontend Mentor. 107 | Coded by Your Name Here. 108 |

109 | 110 | 111 | -------------------------------------------------------------------------------- /img/icon-onboarding.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /img/icon-api.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Easy bank 9 | 10 | 11 | 12 | 13 | 14 | 15 |

16 |

17 | 31 |

32 |

33 | 45 |

46 |

47 |

48 |

Why choose Easybank?

49 |

We leverage Open Banking to turn your bank account into your financial hub.
50 | Control 51 | your finances like never before.

52 |

53 |

54 |

55 |

Online Banking

56 |

Our modern web and mobile applications allow you to keep track of your finances 57 | wherever you are in the world.

58 |

59 |

60 |

61 |

Simple Budgeting

62 |

See exactly where your money goes each month. Receive notifications when you’re 63 | close to hitting your limits.

64 |

65 |

66 |

67 |

Fast Onboarding

68 |

We don’t do branches. Open your account in minutes online and start taking control 69 | of your finances right away.

70 |

71 |

72 |

73 |

Open API

74 |

Manage your savings, investments, pension, and much more from one account. Tracking 75 | your money has never been easier.

76 |

77 |

78 |

79 |

80 |

81 |

82 |

Latest Articles

83 |

84 |

85 |

86 |

87 |

By Claire Robinson

88 | Receive money in any currency with no fees 89 |

The world is getting smaller and we’re becoming more mobile. So why should you be 90 | forced to only receive money in a single

91 |

92 |

93 |

94 |

95 |

96 |

By Wilson Hutton

97 | Treat yourself without worrying about money 98 |

Our simple budgeting feature allows you to separate out your spending and set 99 | realistic limits each month. That means you …

100 |

101 |

102 |

103 |

104 |

105 |

By Wilson Hutton

106 | Take your Easybank card wherever you go 107 |

We want you to enjoy your travels. This is why we don’t charge any fees on purchases 108 | while you’re abroad. We’ll even show you …

109 |

110 |

111 |

112 |

113 |

114 |

By Claire Robinson

115 | Our invite-only Beta accounts are now live! 116 |

After a lot of hard work by the whole team, we’re excited to launch our closed beta. 117 | It’s easy to request an invite through the site ...

118 |

119 |

120 |

121 |

122 |

123 | 153 |

154 | 155 | 156 | 157 | -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | html { 2 | box-sizing: border-box; 3 | font-size: 18px; 4 | } 5 | 6 | :root { 7 | --dark-blue: hsl(233, 26%, 24%); 8 | --lime-green: hsl(136, 65%, 51%); 9 | --bright-cyan: hsl(192, 70%, 51%); 10 | --grayish-blue: hsl(233, 8%, 62%); 11 | --light-grayish-blue: hsl(220, 16%, 96%); 12 | --light-gray: hsl(0, 0%, 98%); 13 | --white: hsl(0, 0%, 100%); 14 | } 15 | 16 | body, h1, h2, h3, h4, h5, h6, p, ol, ul { 17 | margin: 0; 18 | padding: 0; 19 | font-weight: normal; 20 | font-family: 'Public Sans', sans-serif; 21 | -webkit-font-smoothing: antialiased; 22 | } 23 | 24 | p { 25 | line-height: 1.4; 26 | } 27 | 28 | .root { 29 | overflow-x: hidden; 30 | } 31 | 32 | img { 33 | max-width: 100%; 34 | height: auto; 35 | } 36 | 37 | nav { 38 | display: flex; 39 | justify-content: space-between; 40 | align-items: center; 41 | /* padding: 20px 0; */ 42 | height: 60px; 43 | } 44 | 45 | nav ul { 46 | display: flex; 47 | list-style-type: none; 48 | align-items: center; 49 | } 50 | 51 | nav ul li a { 52 | text-decoration: none; 53 | color: var(--grayish-blue); 54 | transition: all .3s ease-in-out; 55 | } 56 | 57 | nav ul li a:hover { 58 | color: var(--dark-blue); 59 | } 60 | 61 | nav ul li { 62 | margin-left: 20px; 63 | } 64 | 65 | .container { 66 | width: 1120px; 67 | margin: 0 auto; 68 | max-width: 90%; 69 | } 70 | 71 | .btn { 72 | border: none; 73 | background: linear-gradient(to right, var(--lime-green), var(--bright-cyan)); 74 | padding: 10px 20px; 75 | border-radius: 50px; 76 | color: var(--white); 77 | cursor: pointer; 78 | transition: all .3s ease-in-out; 79 | } 80 | 81 | .btn:hover { 82 | background: linear-gradient(to right, var(--bright-cyan), var(--lime-green)); 83 | } 84 | 85 | .header-wrap { 86 | display: flex; 87 | align-items: center; 88 | position: relative; 89 | padding-bottom: 40px; 90 | } 91 | 92 | .header-section { 93 | background: var(--light-gray); 94 | } 95 | 96 | .header-text { 97 | flex: 1 0 40%; 98 | } 99 | 100 | .header-images { 101 | flex: 1 0 60%; 102 | position: relative; 103 | } 104 | 105 | .header-images img:first-child { 106 | position: relative; 107 | top: -50px; 108 | transform: scale(1.6); 109 | bottom: 0; 110 | right: -200px; 111 | } 112 | 113 | .header-images img:last-child { 114 | position: absolute; 115 | top: -160px; 116 | right: -190px; 117 | transform: scale(1.1); 118 | } 119 | 120 | .nav-section { 121 | position: relative; 122 | z-index: 1; 123 | background: var(--white); 124 | } 125 | 126 | .header-text h1 { 127 | font-size: 48px; 128 | font-weight: 300; 129 | line-height: 1.1; 130 | margin-bottom: 30px; 131 | } 132 | 133 | .header-text p { 134 | margin-bottom: 30px; 135 | color: var(--grayish-blue); 136 | } 137 | 138 | section.pros-section { 139 | background: var(--light-grayish-blue); 140 | padding: 100px 0; 141 | } 142 | 143 | section.pros-section h1 { 144 | margin-bottom: 20px; 145 | } 146 | 147 | section.pros-section p.section-text { 148 | margin-bottom: 60px; 149 | color: var(--grayish-blue); 150 | } 151 | 152 | section.pros-section .card-wrapper { 153 | display: flex; 154 | /* gap: 100px; */ 155 | } 156 | 157 | section.pros-section .card-wrapper > * + *{ 158 | margin-left: 30px; 159 | } 160 | 161 | .card-wrapper .card img { 162 | margin-bottom: 30px; 163 | } 164 | 165 | .card-wrapper .card h2 { 166 | font-size: 22px; 167 | margin-bottom: 20px; 168 | } 169 | 170 | .card-wrapper .card p { 171 | font-size: 16px; 172 | } 173 | 174 | section.articles-section { 175 | padding: 100px 0; 176 | background: var(--light-gray); 177 | } 178 | 179 | section.articles-section h1 { 180 | margin-bottom: 30px; 181 | } 182 | 183 | .article-wrapper { 184 | display: flex; 185 | } 186 | 187 | .article-wrapper > * + * { 188 | margin-left: 30px; 189 | } 190 | 191 | .article-wrapper img { 192 | width: 100%; 193 | height: 200px; 194 | object-fit: cover; 195 | } 196 | 197 | .article-card { 198 | background: var(--white); 199 | } 200 | .article-wrapper .content { 201 | background: var(--white); 202 | padding: 20px; 203 | } 204 | 205 | .article-wrapper .content a { 206 | padding: 10px 0; 207 | display: inline-block; 208 | color: var(--dark-blue); 209 | text-decoration: none; 210 | transition: all .3s ease-in-out; 211 | } 212 | 213 | .article-wrapper .content a:hover { 214 | color: var(--lime-green); 215 | } 216 | 217 | .article-wrapper .content p { 218 | font-size: 16px; 219 | color: var(--grayish-blue); 220 | } 221 | 222 | footer ul { 223 | list-style-type: none; 224 | } 225 | 226 | footer { 227 | background: var(--dark-blue); 228 | padding: 30px; 229 | } 230 | 231 | footer ul.socials { 232 | display: flex; 233 | margin-top: 60px; 234 | } 235 | 236 | footer ul.socials > * + * { 237 | margin-left: 14px; 238 | } 239 | 240 | footer .content { 241 | display: flex; 242 | justify-content: space-between; 243 | } 244 | 245 | footer .content a { 246 | color: var(--light-gray); 247 | text-decoration: none; 248 | transition: all .3s ease-in-out; 249 | } 250 | 251 | footer .content a:hover { 252 | color: var(--grayish-blue); 253 | } 254 | 255 | footer .content li { 256 | margin-bottom: 10px; 257 | } 258 | 259 | footer .footer-cta { 260 | text-align: right; 261 | } 262 | 263 | footer .copyright { 264 | color: var(--grayish-blue); 265 | font-size: 16px; 266 | margin-top: 30px; 267 | } 268 | 269 | /* Responsive */ 270 | .hamburger-btn { 271 | display: none; 272 | } 273 | @media(max-width: 1198px) { 274 | .card-wrapper, .article-wrapper { 275 | flex-wrap: wrap; 276 | } 277 | .card-wrapper .card { 278 | flex: 1 0 40%; 279 | margin-bottom: 30px; 280 | } 281 | .card-wrapper .card:nth-child(odd) { 282 | margin-left: 0; 283 | } 284 | .article-wrapper .article-card { 285 | flex: 1 0 40%; 286 | margin-bottom: 30px; 287 | } 288 | .article-wrapper .article-card:nth-child(odd) { 289 | margin-left: 0; 290 | } 291 | } 292 | 293 | @media(max-width: 998px) { 294 | footer .content { 295 | flex-wrap: wrap; 296 | } 297 | footer .content > * { 298 | flex: 1 0 30%; 299 | margin-bottom: 30px; 300 | text-align: left; 301 | } 302 | footer ul.socials { 303 | margin-top: 30px; 304 | } 305 | footer .footer-cta { 306 | margin-bottom: 0; 307 | } 308 | } 309 | 310 | @media(max-width: 870px) { 311 | .hamburger-btn { 312 | display: block; 313 | } 314 | .nav-links { 315 | position: fixed; 316 | top: 80px; 317 | left: -500px; 318 | /* left: 50%; */ 319 | transform: translateX(-50%); 320 | background: var(--white); 321 | display: flex; 322 | flex-direction: column; 323 | width: 90%; 324 | border-radius: 20px; 325 | padding: 20px 0; 326 | box-shadow: 0px 30px 50px 5px #A0A0A0; 327 | transition: all .3s ease-in-out; 328 | } 329 | .nav-links.open { 330 | left: 50%; 331 | } 332 | .navbar-cta { 333 | display: none; 334 | } 335 | .hamburger-btn { 336 | border: none; 337 | background: none; 338 | outline: none; 339 | } 340 | .nav-links a { 341 | color: var(--dark-blue); 342 | } 343 | .nav-links li{ 344 | padding-bottom: 10px; 345 | } 346 | .nav-links li:last-child { 347 | padding-bottom: 0; 348 | } 349 | .header-text { 350 | flex: 1 0 70%; 351 | } 352 | .header-images { 353 | flex: 1 0 30%; 354 | } 355 | .header-wrap { 356 | padding-top: 30px; 357 | } 358 | .header-images img:first-child { 359 | right: -50px; 360 | } 361 | .header-images img:last-child { 362 | top: -135px; 363 | right: -72px; 364 | } 365 | .header-text h1 { 366 | font-size: 30px; 367 | } 368 | .header-text p { 369 | font-size: 16px; 370 | } 371 | section.pros-section, section.articles-section{ 372 | padding: 30px 0; 373 | } 374 | section.pros-section h1 { 375 | font-size: 24px; 376 | } 377 | section.pros-section p.section-text { 378 | font-size: 16px; 379 | } 380 | } 381 | @media (max-width: 768px) { 382 | footer .content > * { 383 | flex: 1 0 100%; 384 | text-align: center; 385 | } 386 | footer .socials { 387 | justify-content: center; 388 | } 389 | } 390 | 391 | @media(max-width: 580px) { 392 | .card-wrapper .card { 393 | flex: 1 0 100%; 394 | margin-left: 0!important; 395 | } 396 | 397 | .article-wrapper .article-card { 398 | flex: 1 0 100%; 399 | margin-left: 0; 400 | } 401 | .article-wrapper .article-card:last-child { 402 | margin-bottom: 0; 403 | } 404 | 405 | } 406 | 407 | --------------------------------------------------------------------------------