frontend/index.html
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <link rel="shortcut icon" type="image/png" href="img/banka-blue-logo.png" /> <link rel="stylesheet" type="text/css" href="./css/style.css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <title>Banka</title> </head> <body> <div class="wrapper"> <div class="top-banner"> <header> <a href="index.html"> <img class="logo" alt="logo" src="./img/banka-light-logo.svg" /></a> <nav> <a class="signup-button" id="signup-button">Signup</a> <a class="login-button" id="login-button">Login</a> </nav> </header> <h1>Creating<br/> Financial Happiness for all.</h1> </div> <div class="easy-banking-section"> <div class="achievement-section" id="test"> <div class="achievement"> <img src="./img/branch_img.svg" alt="200 Branches" /> <div> <h4>200</h4> <p>Branches</p> </div> </div> <div class="achievement"> <img src="./img/transactions-img.svg" alt="100K Transactions" /> <div> <h4>100K</h4> <p>Transactions</p> </div> </div> <div class="achievement"> <img src="./img/happy-customer-img.svg" alt="3M Happy Customers" /> <div> <h4>3M</h4> <p>Happy Customers</p> </div> </div> </div> <h2> Banking Made Easy </h2> <p> Banka is a light-weight core banking application that powers banking operations like account creation, customer deposit and withdrawals. This app is meant to support a single bank, where users can signup and create bank accounts online, but must visit the branch to withdraw or deposit money. </p> </div> <div class="create-account-section"> <h5> Want to Sign up for an account? </h5> <button class="create-account-button signup-button" id="signup-button" onClick="">Click here</button> </div> <div class=services> <h2> Our Services </h2> <div class="actions-section"> <div class="action"> <img src="./img/open-account-img.svg" alt="Open an account" /> <div> <h4>Open an account</h4> </div> </div> <div class="action"> <img src="./img/transaction-history-img.svg" alt="100K Transactions" /> <div> <h4>View transaction history</h4> </div> </div> <div class="action"> <img src="./img/internet-support-img.svg" alt="3M Happy Customers" /> <div> <h4>Internet support</h4> </div> </div> </div> </div> <div id="signupModal" class="modal"> <div class="onboarding-modal"> <img src="./img/banka-blue-logo.svg" alt="banka logo"/> <label for="fname">First Name</label> <input type="text" id="fnames" name="fname" placeholder="First Name"> <label for="lname">Last Name</label> <input type="text" id="lnames" name="lname" placeholder="Last Name"> <label for="email">Email Address</label> <input type="text" id="emails" name="email" placeholder="Email Address"> <label for="password">Password</label> <input type="password" id="passwords" name="password" placeholder="Password"> <button class="signup" id="create-user"><i class="fa fa-circle-o-notch fa-spin"></i>Signup</button> <p class="errors"></p> </div> </div> <div id="loginModal" class="modal"> <div class="onboarding-modal"> <img src="./img/banka-blue-logo.svg" /> <label for="email" class="loginEmailLabel">Email Address</label> <input type="text" id="email" class="loginEmail" name="email" placeholder="Email Address" required> <label for="password" class="loginPasswordLabel">Password</label> <input type="password" id="password" class="loginPassword" name="password" placeholder="Password" required> <button class="signup" id="user-login-btn"><i class="fa fa-circle-o-notch fa-spin"></i>Login</button> <p class="error"></p> <!-- <p class="account"><a id="signup-button">Forgot password?</a></p> --> </div> </div> </div> </body> <script src="./js/main.js"></script></html>