Browse Handwritten Notes
/ projects, Web Development Projects / By

Finance Website Using HTML , CSS & Javascript

Finance Website Using HTML , CSS & Javascript

Introduction

Hello friends, all of you developer friends are welcome to this wonderful project, hope you all will be great, we have designed a great website which is quite wonderful and user friendly. To create this website, we have used Html CSS along with some other things. JavaScript has been used to make the website more user friendly.

Friends, we have created many sections in this website, about which we understand step by step, so let us know which sections we have created in this website.

  1. Hero Section
  2. Safe & Convenient Transaction Section
  3. Account Section
  4. Customers Says Section
  5. App Store Section
  6. Footer Section

In this website, we have created a total of 6 sections which you can edit as per your wish, but the thing to know is that how the code of this website can be edited, so let me tell you that while creating this website, I All the sections have been listed separately according to their names so that you will not face any problem.

Finance Website Using HTML , CSS & Javascript Code Setup:-

  1. To use the code of this website, you have to create a folder in your laptop, you can name it anything, the name should be such that you know.
  2. If you have created the folder then now you have to open this folder in vs code or whatever code editor you use.
  3. If you have taken the created folder in vs code then now you have to create three different named files in this folder.
    index.html
    style.css
    script.js
    These three files have to be created with this name.

Now you have to upload the code of the website according to the file, like if the code is of HTML then you have to upload this code inside the HTML file, you will get the code according to the file name below.

HTML (index.html)

Join our Telegram for Free Coding Ebooks & Handwritten Notes!
Telegram_logo.svg 
				
					



  
  
  <title>DeveloperGTM</title>
  
  
  



  <nav class="header">
    <div class="logo">
      <h1>DeveloperGTM</h1>
    </div>
    <div class="header-item">
      <a class="home-btn" href="/">Home</a>
      <a href="/">Product</a>
      <a href="/">Contact Us</a>
    </div>

    <div class="btn">
      <button class="login">Login</button>
      <button>Register</button>
    </div>
  </nav>

  <section class="home">
    <div class="main-sec">
      <div class="left">
        <div class="txt">
          <p>More Payment Options Better than Cash</p>
          <h4>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae facere quia nesciunt dicta quas similique
            molestias ad quis esse dignissimos.</h4>
          <div class="btn">
            <a href="/"><img decoding="async" class="bn45" src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/78/Google_Play_Store_badge_EN.svg/2560px-Google_Play_Store_badge_EN.svg.png" alt="bn45" /></a>
            <a href="/"><img decoding="async" class="bn46" src="https://developer.apple.com/assets/elements/badges/download-on-the-app-store.svg" alt="bn45" /></a>
          </div>
          <div class="rat">
            <p>Excellent <span>4.9</span></p>
            <div class="star">
              <i class="fa-solid fa-star"></i>
              <i class="fa-solid fa-star"></i>
              <i class="fa-solid fa-star"></i>
              <i class="fa-solid fa-star"></i>
              <i class="fa-solid fa-star-half-stroke"></i>
            </div>
          </div>
        </div>
      </div>
      
      <div class="right">
        <img decoding="async" width="550px" src="https://solutionanalysts.com/user/pages/03.industries/02.finance-app-development/finance-mobile-apps.png" alt="">
      </div>
    </div>
  </section>

  <section class="pay-sec">
    <div class="txt">
      <h1>Safe &amp; Convenient Transaction</h1>
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsam, iure.</p>
    </div>

    <div class="main-box">
      <div class="box">
        <i class="fa-solid fa-lock"></i>
        <p class="head">Always Protected</p>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Corrupti nemo voluptates et? Quibusdam, ut
          delectus?</p>
      </div>

      <div class="box reward">
        <i class="fa-regular fa-money-bill-1"></i>
        <p class="head">Get Reward</p>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Corrupti nemo voluptates et? Quibusdam, ut
          delectus?</p>
      </div>

      <div class="box">
        <i class="fa-solid fa-cheese"></i>
        <p class="head">Always Protected</p>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Corrupti nemo voluptates et? Quibusdam, ut
          delectus?</p>
      </div>

      <div class="box">
        <i class="fa-solid fa-dollar-sign"></i>
        <p class="head">Always Protected</p>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Corrupti nemo voluptates et? Quibusdam, ut
          delectus?</p>
      </div>
    </div>
  </section>

  <section class="hero-sec">
    <div class="main-sec">
      <div class="left">
        <p class="ac">Bank Accounts</p>
        <p class="para">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Error, at. Lorem ipsum dolor sit amet
          consectetur adipisicing elit. Ex, velit.</p>
        <div class="btn">
          <i class="fa-solid fa-arrow-up-right-from-square"></i>
          <p>Read More</p>
        </div>
      </div>

      <div class="right">
        <div class="txt">
          <p class="head">Keep Your Cash 💵 Flow Clear And Keep Increasing 🚀</p>
          <p class="para">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deserunt, dolore consectetur.
            Tempora cum praesentium dolorum.</p>
          
        </div>
      </div>
    </div>
  </section>

  <section class="cus-sec">
    <div class="txt">
      <h1>Our Customers Says</h1>
    </div>

    <!-- Swiper -->
    <div class="swiper mySwiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <div class="txt">
            <p class="head">I paid off 20,000 first year</p>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur ut ratione cupiditate praesentium dolor
              quod itaque rem natus obcaecati temporibus! 😊✌️👌</p>

            <div class="rat">
              <p>Excellent <span>4.9</span></p>
              <div class="star">
                <i class="fa-solid fa-star"></i>
                <i class="fa-solid fa-star"></i>
                <i class="fa-solid fa-star"></i>
                <i class="fa-solid fa-star"></i>
                <i class="fa-solid fa-star-half-stroke"></i>
              </div>
            </div>
          </div>
        </div>

        <div class="swiper-slide">
          <div class="txt">
            <p class="head">I paid off 20,000 first year</p>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur ut ratione cupiditate praesentium dolor
              quod itaque rem natus obcaecati temporibus! 😊✌️👌</p>

            <div class="rat">
              <p>Excellent <span>4.9</span></p>
              <div class="star">
                <i class="fa-solid fa-star"></i>
                <i class="fa-solid fa-star"></i>
                <i class="fa-solid fa-star"></i>
                <i class="fa-solid fa-star"></i>
                <i class="fa-solid fa-star-half-stroke"></i>
              </div>
            </div>
          </div>
        </div>

        <div class="swiper-slide">
          <div class="txt">
            <p class="head">I paid off 20,000 first year</p>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur ut ratione cupiditate praesentium dolor
              quod itaque rem natus obcaecati temporibus! 😊✌️👌</p>

            <div class="rat">
              <p>Excellent <span>4.9</span></p>
              <div class="star">
                <i class="fa-solid fa-star"></i>
                <i class="fa-solid fa-star"></i>
                <i class="fa-solid fa-star"></i>
                <i class="fa-solid fa-star"></i>
                <i class="fa-solid fa-star-half-stroke"></i>
              </div>
            </div>
          </div>
        </div>

        <div class="swiper-slide">
          <div class="txt">
            <p class="head">I paid off 20,000 first year</p>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur ut ratione cupiditate praesentium dolor
              quod itaque rem natus obcaecati temporibus! 😊✌️👌</p>
            <div class="rat">
              <p>Excellent <span>4.9</span></p>
              <div class="star">
                <i class="fa-solid fa-star"></i>
                <i class="fa-solid fa-star"></i>
                <i class="fa-solid fa-star"></i>
                <i class="fa-solid fa-star"></i>
                <i class="fa-solid fa-star-half-stroke"></i>
              </div>
            </div>
          </div>
        </div>

      </div>
      <div class="swiper-button-next"></div>
      <div class="swiper-button-prev"></div>
      <div class="swiper-pagination"></div>
    </div>
    </div>
  </section>

  <section class="app-sec">
    <div class="txt">
      <p class="head">App on Google Play or App Store</p>
      <p class="para">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum hic, aperiam suscipit ab eligendi
        perspiciatis voluptas. Adipisci vero ab magni!</p>
    </div>

    <div class="btn">
      <a href="/"><img decoding="async" class="bn45" src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/78/Google_Play_Store_badge_EN.svg/2560px-Google_Play_Store_badge_EN.svg.png" alt="bn45" /></a>
      <a href="/"><img decoding="async" class="bn46" src="https://developer.apple.com/assets/elements/badges/download-on-the-app-store.svg" alt="bn45" /></a>
    </div>
    <div class="rat">
      <p>Excellent <span>4.9</span></p>
      <div class="star">
        <i class="fa-solid fa-star"></i>
        <i class="fa-solid fa-star"></i>
        <i class="fa-solid fa-star"></i>
        <i class="fa-solid fa-star"></i>
        <i class="fa-solid fa-star-half-stroke"></i>
      </div>
    </div>
  </section>

  <footer class="foot-sec">
    <div class="main-box">
      <div class="box1">
        <h1>DeveloperGTM</h1>
        <div class="social">
          <i class="fa-brands fa-square-instagram"></i>
          <i class="fa-brands fa-facebook"></i>
          <i class="fa-brands fa-youtube"></i>
        </div>
      </div>

      <div class="box2">
        <h1>Quick Link</h1>
        <div class="btn">
          <a class="home-btn" href="/">Home</a>
          <a href="/">Product</a>
          <a href="/">Privacy Policy</a>
          <a href="/">Contact Us</a>
        </div>
      </div>

      <div class="box2">
        <h1>Quick Link</h1>
        <div class="btn">
          <a class="home-btn" href="/">Home</a>
          <a href="/">Product</a>
          <a href="/">Privacy Policy</a>
          <a href="/">Contact Us</a>
        </div>
      </div>

      <div class="box4">
        <h1>Contact Us</h1>
        <div class="add"> 
          <p>Demo24@gmail.com</p>
          <p>+9999-9999-99</p>
        </div>
      </div>
    </div>
    <div class="copy">
      <p>Copyright &copy; 2024 Design By <span>DeveloperGTM</span></p>
    </div>
  </footer>

CSS (Style.css)

				
					* {
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
}

body {
  position: relative;
}

.header {
  display: flex;
  justify-content: center;
  padding: 10px 30px;
  column-gap: 286px;
  align-items: center;
  height: 50px;
  background-image: linear-gradient(299deg, #3e3e3e, #0e1118);
}

.header .logo h1 {
  color: white;
}

.header .header-item {
  display: flex;
  column-gap: 30px;
}

.header .header-item a {
  text-decoration: none;
  font-size: 20px;
  color: white;
}

.header .header-item .home-btn {
  border-bottom: 2px solid rgb(255, 255, 255);
}

.header .btn {
  display: flex;
  column-gap: 20px;
}

.header .btn .login {
  padding: 10px 30px;
  border-radius: 30px;
  border: none;
  background-color: white;
  cursor: pointer;
}

.header .btn button {
  padding: 10px 30px;
  border-radius: 30px;
  border: none;
  cursor: pointer;
  background-color: greenyellow;
}

.home .main-sec .left .txt .rat {
  display: flex;
  align-items: center;
  column-gap: 10px;
}

.home .main-sec .left .txt .rat i {
  color: yellow;
}


.home .main-sec .left .txt .rat p {
  font-size: 20px;
}

.home .main-sec .left .txt .rat p span {
  color: greenyellow;
}

.home {
  background-image: linear-gradient(299deg, #3e3e3e, #0e1118);
  background-size: cover;
  height: 565px;
  width: 100%;
  display: flex;
  align-items: center;
  overflow: hidden;
  justify-content: center;
}

.home .slide {
  display: flex;
  column-gap: 5px;
  margin-top: 20px;
  justify-content: center;
  align-items: center;
}

.home .main-sec {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 88px;
  padding-top: 80px;
}

.home .main-sec .left .txt {
  display: flex;
  flex-direction: column;
  row-gap: 30px;
}

.home .left .txt p {
  font-size: 3rem;
  color: white;
  font-weight: 700;
}

.home .left .txt h4 {
  color: rgb(153, 147, 147);
}

.home .left .txt .btn {
  display: flex;
  column-gap: 25px;
}

.bn45 {
  width: 170px;
  height: 50px;
}

.bn46 {
  width: 150px;
  height: 50px;
}

.home .left {
  width: 46vw;
  padding: 30px;
}

.home .right {
  width: 46vw;
}

.pay-sec {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 30px;
  height: 350px;
  background-color: whitesmoke;
}

.pay-sec .txt {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 10px;
}

.pay-sec .main-box {
  margin-top: 30px;
  justify-content: center;
  align-items: center;
  column-gap: 20px;
  display: flex;
}

.pay-sec .main-box .box {
  background: white;
  border-radius: 10px;
  width: 257px;
  height: 200px;
  justify-content: center;
  padding: 20px;
  display: flex;
  flex-direction: column;
  row-gap: 11px;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

.pay-sec .main-box .reward {
  background: greenyellow;
  border-radius: 10px;
  width: 257px;
  height: 200px;
  justify-content: center;
  padding: 20px;
  display: flex;
  flex-direction: column;
  row-gap: 11px;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

.pay-sec .main-box .box i {
  font-size: 60px;
}

.pay-sec .main-box .box .head {
  font-size: 27px;
  color: black;
  padding-top: 10px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}


.hero-sec {
  height: 450px;
  background-color: white;
  padding: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-sec .main-sec .left {
  background-image: url("https://st2.depositphotos.com/1000111/11151/i/450/depositphotos_111516156-stock-photo-paper-texture-white-paper-sheet.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  width: 500px;
  border-radius: 10px;
  padding: 20px;
  height: 300px;
}

.hero-sec .main-sec {
  display: flex;
  column-gap: 80px !important;
  justify-content: center;
  align-items: center;
}

.hero-sec .main-sec .left {
  display: flex;
  flex-direction: column;
  row-gap: 10px;
  justify-content: center;
}

.hero-sec .main-sec .left .btn {
  display: flex;
  column-gap: 10px;
  align-items: center;
}

.hero-sec .main-sec .left .btn i {
  padding: 10px;
  background-color: greenyellow;
  border: 1px solid;
  cursor: pointer;
  border-radius: 30px;
}

.hero-sec .main-sec .left .btn i:active {
  background-color: white;
}

.hero-sec .main-sec .left .ac {
  font-size: 3rem;
}

.hero-sec .main-sec .left .para {
  line-height: 20px;
}

.hero-sec .main-sec .right .txt {
  display: flex;
  flex-direction: column;
  row-gap: 10px;
  justify-content: center;
}

.hero-sec .main-sec .right .txt .para {
  line-height: 20px;
}

.hero-sec .main-sec .right {
  width: 625px;
}

.hero-sec .main-sec .right .txt .head {
  font-size: 3.5rem;
}

.hero-sec .main-sec .right input {
  width: fit-content;
  padding: 10px 30px;
  border-radius: 30px;
  border: none;
  background-color: greenyellow;
  cursor: pointer;
}

.cus-sec {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 30px;
  height: 350px;
  background-color: whitesmoke;
}

.cus-sec .txt {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 10px;
}

.cus-sec .main-box {
  margin-top: 30px;
  justify-content: center;
  align-items: center;
  column-gap: 20px;
  display: flex;
}

.swiper {
  width: 100%;
  height: 100%;
  margin-top: 20px;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: flex;
  justify-content: center;
  border-radius: 10px;
  align-items: center;
}

.swiper-slide .txt {
  /* background: red; */
  width: 380px;
  padding: 30px;
}

.swiper-slide .rat {
  display: flex;
  align-items: center;
  column-gap: 10px;
}

.swiper-slide .rat i {
  color: rgb(255, 166, 0);
}


.swiper-slide .rat p {
  font-size: 20px;
}

.swiper-slide .rat p span {
  color: rgba(50, 255, 60, 0.904);
}

.swiper-slide .txt .head {
  font-size: 2rem;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.app-sec {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 30px;
  background-image: linear-gradient(299deg, #3e3e3e, #0e1118);
  height: 350px;
  /* background-color: whitesmoke; */
}

.app-sec .txt {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 20px;
  text-align: center;
}

.app-sec .txt .head {
  font-size: 3rem;
  color: white;
  font-weight: 700;
}

.app-sec .txt .para {
  width: 52%;
  color: rgb(133, 124, 124);
}

.app-sec .btn {
  display: flex;
  column-gap: 25px;
  margin-top: 20px;
}

.bn45 {
  width: 170px;
  height: 50px;
}

.bn46 {
  width: 150px;
  height: 50px;
}

.app-sec .rat {
  display: flex;
  align-items: center;
  column-gap: 10px;
  margin-top: 20px;
}

.app-sec .rat i {
  color: rgb(255, 166, 0);
}


.app-sec .rat p {
  font-size: 20px;
  color: white;
}

.app-sec .rat p span {
  color: rgba(50, 255, 60, 0.904);
}

.foot-sec {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 30px;
  height: 300px;
  background-color: black;
}

.foot-sec .main-box {
  display: flex;
  column-gap: 130px;
  align-items: baseline;
  justify-content: center;
}

.foot-sec .main-box .box1 h1 {
  color: white;
}

.foot-sec .main-box .box1 .social {
  display: flex;
  column-gap: 20px;
}

.foot-sec .main-box .box1 i {
  color: black;
  font-size: 20px;
  background: greenyellow;
  cursor: pointer;
  padding: 10px;
  border-radius: 30px;
}

.foot-sec .main-box .box2 h1 {
  color: white;
}

.foot-sec .main-box .box2 i {
  color: white;
}

.foot-sec .main-box .box1 {
  display: flex;
  flex-direction: column;
  row-gap: 24px;
  justify-content: center;
  align-items: center;
}

.foot-sec .main-box .box2 .btn {
  display: flex;
  flex-direction: column;
  row-gap: 15px;
  padding-top: 20px;
}

.foot-sec .main-box .box2 .btn a {
  text-decoration: none;
  color: rgb(141, 137, 137);
}

.foot-sec .main-box .box4 {
  display: flex;
  flex-direction: column;
  row-gap: 20px;
}

.foot-sec .main-box .box4 .add {
  display: flex;
  flex-direction: column;
  row-gap: 20px;
}

.foot-sec .main-box .box4 h1 {
  color: white;
}

.foot-sec .main-box .box4 .add p {
  color: rgb(141, 137, 137);
}

.foot-sec .copy {
  margin-top: 57px;
  /* background: red; */
  width: 100%;
  padding: 20px;
  justify-content: center;
  align-items: center;
  display: flex;
  margin-bottom: -30px;
}

.foot-sec .copy p {
  color: white;
}

.foot-sec .copy p span {
  color: greenyellow;
}

Javascript (Script.js)

				
					var swiper = new Swiper(".mySwiper", {
    pagination: {
      el: ".swiper-pagination",
      type: "fraction",
    },
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },
  });
Library Management System Using Python(GUI)

library management system using python with source code using Python GUI Tkinter (Graphical User Interface)

•
May 2, 2024
•
projects, Python Projects
•
No Comments

library management system using python with source code using Python GUI Tkinter (Graphical User Interface) How to Run the code: Introduction:  Imagine …

space shooter game using python

space shooter game using python with source code

•
May 1, 2024
•
projects, Python Projects
•
No Comments

Space Shooter Game Using Python with source code Overview: A space shooter game typically involves controlling a spaceship to navigate through space …

hotel management using python with source code

Hotel Management System Using Python with source code using Graphical User interface GUI

•
April 30, 2024
•
projects, Python Projects
•
No Comments

Hotel Management System Using Python with source code Introduction: Welcome to our blog post introducing a helpful tool for hotels: the Tkinter-based …

Student Management System Using Python ​

Student Management System using python with source code

•
April 29, 2024
•
projects, Python Projects
•
No Comments

Student Management System Using Python Introduction: The Student Management System is a comprehensive software solution designed to streamline the process of managing …

More Python Projects

library management system using python with source code using Python GUI Tkinter (Graphical User Interface)

space shooter game using python with source code

Hotel Management System Using Python with source code using Graphical User interface GUI

Student Management System using python with source code

Billing Software Using Python with source code

Hospital Management Using Python with source code

2048 game using python tkitner

Valentine Day project using Python turtle

Drawing Rose Using Python Turtle with python turtle graphics

Binary to decimal & decimal to binary converter

Build mini projects in Python- Fast and Simple

Make weather app using Django

Make an Indian flag using Turtle Python

Make notepad using python Tkinter

Get Info of phone number using python

Car Racing Game Using Python

Convert Image to PDF Using Python GUI

Library management using python GUI

Creating GUI Piano Using Python

Get Instagram Account Details using Python

Draw Pikachu with Python

make your own ChatGPT using Python

Detect Plagiarism in files using Python

Language Detection of a Sentence using Python

Black and White to Colour Images using Python

Photo Collage Maker using Python

Word Cloud Using Python Language

Birthday Wishes Using Python project

OTP Verification using Python

Quiz Application Using Python

BMI Calculator using python

Scientific calculator using Python

Draw Doraemon Using Python

Convert Text to speech using python

GUI alarm Clock Using Python

Flappy Bird Game Using Python

Hangman Game using python

Sudoku Game Using Python

GUI Based Internet Speed Test Using Python

Ping pong game using python

Snake Game Using Python

Creating A WaterMark on Image using OpenCV

Radha Krishna Drawing using Python

GUI Digital Clock Using Python

GUI Stopwatch using python

Turtle Patterns in Python

Rock Paper Scissor Game using Python

Drawing Patterns Using Python Turtle

Convert Image Into Sketch Using Python

Send Whatsapp Messages Using Python

find wifi passwords using python

Get Huge Discounts
geeksforgeeks coupon code
educative coupon code
skillshare coupon code
Get Discount on Top EdTech Compnies
CodeWithCurious Let's Learn Together !

CodeWithCurious is a Best Place to Learn & grow your Career in IT sector. Best Content on the latest technology in including C, C++, Java, Python, Sql, Web development & Interview Preparation Material free of cost.

Info

Support

Follow us for more!

Instagram Telegram Youtube Linkedin

© 2023 All Rights Reserved CodeWithCurious

All Coding Handwritten Notes

handwritten notes

Browse Handwritten Notes

Browse