Bank Responsive Landing Page
MAURICE YANGA
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Banking website</title>
<link rel="stylesheet" href="output.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body class="bg-color-primary text-color-white tracking-wider">
<header>
<nav class="container flex justify-between items-center">
<div class="py-5 text-color-secondary font-bold text-3xl">
<a href="#home">
<span class="text-color-white">Light</span>Code.
</a>
</div>
<div>
<ul class="hidden lg:flex items-center space-x-6">
<li><a href="#home" class="hover:text-color-secondary ease-in duration-200">Home</a></li>
<li><a href="#features" class="hover:text-color-secondary ease-in duration-200">Features</a></li>
<li><a href="#testimonial" class="hover:text-color-secondary ease-in duration-200">Testimonial</a></li>
<li><a href="#pricing" class="hover:text-color-secondary ease-in duration-200">Pricing</a></li>
<li><a href="#blog" class="hover:text-color-secondary ease-in duration-200">Blog</a></li>
<li><a href="#contact" class="hover:text-color-secondary ease-in duration-200">Contact</a></li>
<li><button class="bg-color-secondary px-9 py-3 rounded-md capitalize font-bold hover:opacity-80 ease-in duration-200">free trial</button></li>
</ul>
</div>
<!-- Mobile screen -->
<div id="hamburger" class="lg:hidden cursor-pointer z-50 ">
<i class="fa-solid fa-bars"></i>
</div>
<div id="menu" class="hidden bg-color-primary-dark h-[100vh] absolute inset-0">
<ul class="h-full grid place-items-center py-20">
<li><a id="hLink" href="#home" class="hover:text-color-secondary ease-in duration-200">Home</a></li>
<li><a id="hLink" href="#features" class="hover:text-color-secondary ease-in duration-200">Features</a></li>
<li><a id="hLink" href="#testimonial" class="hover:text-color-secondary ease-in duration-200">Testimonial</a></li>
<li><a id="hLink" href="#pricing" class="hover:text-color-secondary ease-in duration-200">Pricing</a></li>
<li><a id="hLink" href="#blog" class="hover:text-color-secondary ease-in duration-200">Blog</a></li>
<li><a id="hLink" href="#contact" class="hover:text-color-secondary ease-in duration-200">Contact</a></li>
<li><button class="btn">free trial</button></li>
</ul>
</div>
</nav>
</header>
<main>
<section id="home" class="relative">
<div class="blob1"></div>
<div class="blob2"></div>
<div class="container py-20">
<div class="flex flex-col items-center z-20 md:flex-row">
<div class="text-center mb-12 md:text-left md:w-1/2 md:pr-10" >
<h1 class="text-3xl md:text-4xl font-bold leading-snug mb-4">Awesome App for Your Financial.</h1>
<p class="leading-relaxed mb-10" >This should be used tomtell a story and let your users know a little more about app and its use. How it can benefit them</p>
<button class="btn">Download App</button></li>
</div>
<div class="md:w-1/2">
<img src="./img/download.png" alt="">
</div>
</div>
</div>
</section>
<section id="features" class="bg-color-primary-light">
<div class="container py-20">
<div class="text-center m-auto mb-20 md:w-1/2">
<h4 class="font-bold text-color-secondary mb-4">Our Features</h4>
<h1 class="title">Easy To Manage All Payments By Our App </h1>
</div>
<div class="grid lg:grid-cols-3 md:grid-cols-2 gap-12 lg:gap-8 px-4 sm:px-6 lg:px-8">
<!-- card no 1 -->
<div class="border-2 border-solid border-color-gray text-center py-20 px-5 rounded-2xl cursor-pointer hover:bg-color-primary-dark ease-in duration-200">
<div class="bg-color-secondary inline-block rounded-2xl py-5 px-6">
<i class="fa-solid fa-calendar-days text-4xl"></i>
</div>
<h3 class="text-xl font-bold py-4">Expense trackering</h3>
<p class="leading-relaxed">We use an application designed a testing gnose to keep away</p>
</div>
<!-- card no 2 -->
<div class="bg-color-primary-dark border-2 border-solid border-color-gray text-center py-20 px-5 rounded-2xl cursor-pointer hover:bg-color-primary-dark ease-in duration-200">
<div class="bg-color-secondary inline-block rounded-2xl py-5 px-6">
<i class="fa-solid fa-chart-column text-4xl"></i>
</div>
<h3 class="text-xl font-bold py-4">Finance Snapshot</h3>
<p class="leading-relaxed">We use an application designed a testing gnose to keep away</p>
</div>
<!-- card no 3 -->
<div class="border-2 border-solid border-color-gray text-center py-20 px-5 rounded-2xl cursor-pointer hover:bg-color-primary-dark ease-in duration-200">
<div class="bg-color-secondary inline-block rounded-2xl py-5 px-6">
<i class="fa-solid fa-phone text-4xl"></i>
</div>
<h3 class="text-xl font-bold py-4">Support 24/7</h3>
<p class="leading-relaxed">We use an application designed a testing gnose to keep away</p>
</div>
</div>
</div>
</section>
<section id="saving-money">
<div class="container py-20 relative">
<div class="blob1"></div>
<div class="blob2"></div>
<div class="flex flex-col items-center justify-between md:flex-row">
<div class="mb-12 md:w-1/2">
<img src="./img/finance.png" alt="">
</div>
<div class="text-center md:text-left md:w-1/2 md:ml-20">
<h4 class="font-bold text-color-secondary mb-4">Saving Money</h4>
<h1 class="title mb-4">Best Financing App To Save Your Money</h1>
<p class="leading-relaxed mb-10">Best financing app ever in the world. Easy to use and very user freindly for mobile banking. You can control your card easily and send money to someone with just one click.</p>
<button class="btn">Read More</button>
</div>
</div>
</div>
</section>
<section id="how-it-works" class="bg-color-primary-light">
<div class="container py-20">
<div class="text-center m-auto mb-20 md:w-1/2">
<h4 class="font-bold text-color-secondary mb-4">How It Works</h4>
<h1 class="title">Grow Up Your Money Savings</h1>
</div>
<div class="flex flex-col items-center justify-between space-y-6 md:flex-row md:space-y-0 md:space-x-0 ">
<!-- card 1 -->
<div class="text-center cursor-pointer">
<div class="relative bg-color-primary-dark inline-block px-6 py-3 rounded-lg cursor-pointer hover:bg-color-secondary ease-in duration-200">
<p class="text-6xl">1</p>
</div>
<h3 class="text-xl font-bold py-4">Install The App</h3>
<p class="leading-relaxed">We use an application designed a testing gnose to keep away</p>
</div>
<!-- card 2 -->
<div class="text-center cursor-pointer">
<div class="relative inline-block px-6 py-3 rounded-lg cursor-pointer bg-color-secondary ">
<p class="text-6xl">2</p>
</div>
<h3 class="text-xl font-bold py-4">Setup Your Profile</h3>
<p class="leading-relaxed">We use an application designed a testing gnose to keep away</p>
</div>
<!-- card 3 -->
<div class="text-center cursor-pointer">
<div class="relative bg-color-primary-dark inline-block px-6 py-3 rounded-lg cursor-pointer hover:bg-color-secondary ease-in duration-200">
<p class="text-6xl">3</p>
</div>
<h3 class="text-xl font-bold py-4">Enjoy the Features</h3>
<p class="leading-relaxed">We use an application designed a testing gnose to keep away</p>
</div>
</div>
</div>
</section>
<section id="Testimonial">
<div class="container py-20">
<div class="text-center m-auto mb-20 md:w-1/2">
<h4 class="font-bold text-color-secondary mb-4">User Review</h4>
<h1 class="title">What clients Say About our App After Using It</h1>
</div>
<!-- review container -->
<div class="mt-8">
<div class="flex items-center justify-center flex-wrap">
<img src="./img/user1.jpg" alt="" class=" h-20 w-20 rounded-full p-1 m-3 cursor-pointer user-pic border-2 border:{}" oneclick="showReview()">
<img src="./img/user2.jpg" alt="" class=" h-20 w-20 rounded-full p-1 m-3 cursor-pointer user-pic">
<img src="./img/user3.jpg" alt="" class=" h-20 w-20 rounded-full p-1 m-3 cursor-pointer user-pic">
<img src="./img/user4.jpg" alt="" class=" h-20 w-20 rounded-full p-1 m-3 cursor-pointer user-pic">
<img src="./img/user5.jpg" alt="" class=" h-20 w-20 rounded-full p-1 m-3 cursor-pointer user-pic">
</div>
<div class="grid place-items-center text-center m-auto md:w-4/5 min-h-[40vh]">
<div class="user-text">
<p class="md:text-2xl mb-6">"This shuold be used to tell a story and include any testimonials you might have about your product or sevice for your clients"!</p>
<h4 class="font-bold text-color-secondary mb-1">Markin Nesus</h4>
<p>IOS developer</p>
</div>
<div class="user-text">
<p class="md:text-2xl mb-6">"This shuold be used to tell a story and include any testimonials you might have about your product or sevice for your clients"!</p>
<h4 class="font-bold text-color-secondary mb-1">Mark Joe</h4>
<p>React developer</p>
</div>
<div class="user-text">
<p class="md:text-2xl mb-6">"This shuold be used to tell a story and include any testimonials you might have about your product or sevice for your clients"!</p>
<h4 class="font-bold text-color-secondary mb-1">Pirtle Karol</h4>
<p>Android developer</p>
</div>
<div class="user-text">
<p class="md:text-2xl mb-6">"This shuold be used to tell a story and include any testimonials you might have about your product or sevice for your clients"!</p>
<h4 class="font-bold text-color-secondary mb-1">Leila Dominic</h4>
<p>Angular developer</p>
</div>
<div class="user-text">
<p class="md:text-2xl mb-6">"This shuold be used to tell a story and include any testimonials you might have about your product or sevice for your clients"!</p>
<h4 class="font-bold text-color-secondary mb-1">Markin Nesus</h4>
<p>IOS developer</p>
</div>
</div>
</div>
</div>
</section>
</main>
<script>
//mobile menu
const hamburger = document.querySelector('#hamburger');
const menu = document.querySelector('#menu');
const hLink = document.querySelector('#hLink');
const faSolid = document.querySelector(".fa-solid")
hamburger.addEventListener("click", () => {
menu.classList.toggle('hidden');
faSolid.classList.toggle('fa-xmark');
} )
hLink.forEach(link => {
link.addEventListener('click', () => {
menu.classList.toggle('hidden');
faSolid.classList.toggle('fa-xmark');
})
})
</script>
</body>
</html>
Like this project
Posted Jul 20, 2024
A responsive landing page for a bank website
Likes
0
Views
1
