Finance Website Using HTML , CSS & Javascript With Source Code

Finance Website Using HTML, CSS & Javascript With Source Code

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.

Hero Section
Safe & Convenient Transaction Section
Account Section
Customers Says Section
App Store Section
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:-

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.
If you have created the folder then now you have to open this folder in vs code or whatever code editor you use.
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!

				
					



  
  
  <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 data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNTYwIiBoZWlnaHQ9Ijc1OSIgdmlld0JveD0iMCAwIDI1NjAgNzU5Ij48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBzdHlsZT0iZmlsbDojY2ZkNGRiO2ZpbGwtb3BhY2l0eTogMC4xOyIvPjwvc3ZnPg==" width="2560" height="759" decoding="async" class="bn45" data-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 data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" class="bn46" data-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 data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMTM0IiBoZWlnaHQ9IjUxNyIgdmlld0JveD0iMCAwIDExMzQgNTE3Ij48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBzdHlsZT0iZmlsbDojY2ZkNGRiO2ZpbGwtb3BhY2l0eTogMC4xOyIvPjwvc3ZnPg==" width="1134" height="517" decoding="async" data-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>

    
    <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 data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNTYwIiBoZWlnaHQ9Ijc1OSIgdmlld0JveD0iMCAwIDI1NjAgNzU5Ij48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBzdHlsZT0iZmlsbDojY2ZkNGRiO2ZpbGwtb3BhY2l0eTogMC4xOyIvPjwvc3ZnPg==" width="2560" height="759" decoding="async" class="bn45" data-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 data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" class="bn46" data-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",
    },
  });

Complaint Management System using Python

Complain Management using Python With a Graphical User Interface (GUI)

Shruti Lodha

•

September 28, 2024

•

projects, Python Projects

•

No Comments

Complain Management using Python with a Graphical User Interface (GUI) Introduction: The Complain Management using Python program designed to manage complaints effectively …

COVID 19 Hospital Management Using Python | Covid 19 Hospital management using Django Graphical User Interface covid 19 hospital management django

Shruti Lodha

•

September 27, 2024

•

projects, Python Projects

•

No Comments

COVID 19 Hospital Management Using Python [Django Framework] Introduction: The COVID-19 Hospital Management is a Python-based application that tracks web applications for Hospitals. …

Drawing Ganesha Using Python Turtle Graphics [Drawing Ganapati Using Python]

Drawing Ganesha Using Python Turtle Graphics [Drawing Ganpati Using Python]

Yadnyesh (curious_coder)

•

September 7, 2024

•

projects, Python Projects

•

No Comments

Drawing Ganesha Using Python Turtle Graphics[Drawing Ganapati Using Python] Introduction In this blog post, we will learn how to draw Lord Ganesha …

Contact Management System In PYTHON with complete source code

Shruti Lodha

•

September 5, 2024

•

projects, Python Projects

•

No Comments

Contact Management System in Python with a Graphical User Interface (GUI) Introduction: The Contact Management System is a Python-based application designed to …