Day 2 || Real-time Bank Project Using MERN

Hema Coding Bank Application

Day 2:

Images:

App.js :

import './App.css';

import Home from "./Home";

function App() {

  return (

    <div >

      <nav>

        <ul>

          <li>Home</li>

          <li>Login</li>

          <li>Register</li>

        </ul>

      </nav>

     <Home/>

    </div>

  );

}

export default App;

App.css

nav{

   background-color: #36366f ;

   color: white;

   padding: 10px;

}

ul{

  list-style-type: none;

    display: flex;

    justify-content: space-around;

}

Home.js

import React from "react";

import "./Home.css";

import logoImage from "./Images/Logo.png";

const Home = () => {

  return (

    <div className="home-container">

      <div className="image-container"></div>

      <div className="text-container">

      <img src={logoImage} alt="Hema Coding Bank logo"/>

      <h2>Welcome!</h2>

      <p>

        Experience seamless transactions with our user-friendly interface.

        Whether you're a beginner or an experienced coder, Coding Bank provides

        financial solutions that cater to your unique needs. Our dedicated

        support team is available 24/7 to assist you with any inquiries or

        concerns.

      </p>

      <p>

        Enhance your financial journey with our competitive interest rates on

        savings accounts. We believe in rewarding our users, so enjoy perks and

        bonuses as you grow your savings with Coding Bank.

      </p>

      <p>

        Security is our top priority. Rest assured that your personal and

        financial information is protected using state-of-the-art encryption

        technologies. Focus on your coding projects while we take care of the

        security of your financial data.

      </p>

      <p>

        Coding Bank - Where coding meets banking excellence. Start your journey

        with us today and experience a new era of online banking designed for

        developers like you.

      </p>

      </div>

    </div>

  );

};

export default Home;

Home.css :

.home-container {

  display: flex;

}

.image-container {

  background-image: url("./Images/Home.png");

  width: 200vh;

  height: 90vh;

  background-size: 100% 100%;

}

.text-container {

  max-width: 500px;

  margin: auto;

  border: 1px solid rgba(0, 0, 0, 0.2);

  padding: 20px;

  border-radius: 10px;

  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

  margin: 20px;

}

.text-container h2{

    color:  #333366;

    padding-left: 20px;

}

.text-container p{

    color: #666666;

    padding-left: 20px;

}

.text-container img{

    height: 70px;

    width: 500px;

}