Skip to content

Commit f2f51ca

Browse files
author
Emmanuela Opurum
committed
Add static bank website for CI/CD demo
1 parent 56a3d2c commit f2f51ca

3 files changed

Lines changed: 261 additions & 0 deletions

File tree

‎css/style.css‎

Lines changed: 168 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,168 @@
1+
/* Basic Reset */
2+
* {
3+
margin: 0;
4+
padding: 0;
5+
box-sizing: border-box;
6+
font-family: 'Arial', sans-serif;
7+
}
8+
9+
body {
10+
line-height: 1.6;
11+
color: #333;
12+
}
13+
14+
/* Navbar */
15+
header {
16+
background: #0a3d62;
17+
color: #fff;
18+
padding: 1rem 0;
19+
position: sticky;
20+
top: 0;
21+
z-index: 1000;
22+
}
23+
24+
.nav-container {
25+
display: flex;
26+
justify-content: space-between;
27+
align-items: center;
28+
max-width: 1100px;
29+
margin: auto;
30+
padding: 0 2rem;
31+
}
32+
33+
.logo {
34+
height: 50px;
35+
}
36+
37+
nav ul {
38+
list-style: none;
39+
display: flex;
40+
}
41+
42+
nav ul li {
43+
margin-left: 2rem;
44+
}
45+
46+
nav ul li a {
47+
color: #fff;
48+
text-decoration: none;
49+
transition: 0.3s;
50+
}
51+
52+
nav ul li a:hover {
53+
color: #ffb142;
54+
}
55+
56+
/* Hero */
57+
.hero {
58+
background: url('../assets/hero.jpg') center/cover no-repeat;
59+
height: 100vh;
60+
display: flex;
61+
align-items: center;
62+
justify-content: center;
63+
color: #fff;
64+
text-align: center;
65+
animation: fadeIn 2s ease;
66+
}
67+
68+
.hero .btn {
69+
margin-top: 1rem;
70+
padding: 0.7rem 1.5rem;
71+
background: #ffb142;
72+
border: none;
73+
color: #fff;
74+
font-weight: bold;
75+
cursor: pointer;
76+
transition: 0.3s;
77+
}
78+
79+
.hero .btn:hover {
80+
background: #ffa502;
81+
}
82+
83+
/* Sections */
84+
.section {
85+
padding: 5rem 2rem;
86+
}
87+
88+
h2 {
89+
text-align: center;
90+
margin-bottom: 2rem;
91+
color: #0a3d62;
92+
}
93+
94+
/* Services Cards */
95+
.service-cards {
96+
display: flex;
97+
gap: 2rem;
98+
justify-content: center;
99+
flex-wrap: wrap;
100+
}
101+
102+
.card {
103+
background: #f1f2f6;
104+
padding: 2rem;
105+
border-radius: 10px;
106+
width: 300px;
107+
text-align: center;
108+
transition: 0.3s;
109+
}
110+
111+
.card:hover {
112+
transform: translateY(-10px);
113+
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
114+
}
115+
116+
/* Contact Form */
117+
.contact form {
118+
max-width: 500px;
119+
margin: auto;
120+
display: flex;
121+
flex-direction: column;
122+
}
123+
124+
.contact input,
125+
.contact textarea {
126+
padding: 0.8rem;
127+
margin-bottom: 1rem;
128+
border: 1px solid #ccc;
129+
border-radius: 5px;
130+
}
131+
132+
.contact button {
133+
padding: 0.8rem;
134+
background: #0a3d62;
135+
color: #fff;
136+
border: none;
137+
cursor: pointer;
138+
font-weight: bold;
139+
}
140+
141+
.contact button:hover {
142+
background: #1e90ff;
143+
}
144+
145+
/* Footer */
146+
footer {
147+
background: #0a3d62;
148+
color: #fff;
149+
text-align: center;
150+
padding: 1rem;
151+
}
152+
153+
/* Animations */
154+
@keyframes fadeIn {
155+
from {opacity: 0;}
156+
to {opacity: 1;}
157+
}
158+
159+
/* Responsive */
160+
@media(max-width:768px){
161+
nav ul {
162+
flex-direction: column;
163+
}
164+
.service-cards {
165+
flex-direction: column;
166+
align-items: center;
167+
}
168+
}

‎index.html‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>SafeBank - Your Trusted Bank</title>
7+
<link rel="stylesheet" href="css/style.css">
8+
</head>
9+
<body>
10+
<!-- Navbar -->
11+
<header>
12+
<div class="container nav-container">
13+
<img src="assets/logo.png" alt="SafeBank Logo" class="logo">
14+
<nav>
15+
<ul>
16+
<li><a href="#home">Home</a></li>
17+
<li><a href="#about">About</a></li>
18+
<li><a href="#services">Services</a></li>
19+
<li><a href="#contact">Contact</a></li>
20+
</ul>
21+
</nav>
22+
</div>
23+
</header>
24+
25+
<!-- Home Section -->
26+
<section id="home" class="hero">
27+
<div class="hero-content">
28+
<h1>Welcome to SafeBank</h1>
29+
<p>Your trusted partner for personal and business banking.</p>
30+
<a href="#services" class="btn">Our Services</a>
31+
</div>
32+
</section>
33+
34+
<!-- About Section -->
35+
<section id="about" class="section">
36+
<div class="container">
37+
<h2>About Us</h2>
38+
<p>SafeBank has been serving customers for over 50 years with integrity, innovation, and trust. Our mission is to provide seamless banking solutions that help you grow financially.</p>
39+
</div>
40+
</section>
41+
42+
<!-- Services Section -->
43+
<section id="services" class="section services">
44+
<div class="container">
45+
<h2>Our Services</h2>
46+
<div class="service-cards">
47+
<div class="card">
48+
<h3>Personal Banking</h3>
49+
<p>Checking & Savings accounts, loans, and personal financial planning.</p>
50+
</div>
51+
<div class="card">
52+
<h3>Business Banking</h3>
53+
<p>Business accounts, loans, merchant services, and payroll management.</p>
54+
</div>
55+
<div class="card">
56+
<h3>Online Banking</h3>
57+
<p>Secure mobile and web banking with instant access to your accounts.</p>
58+
</div>
59+
</div>
60+
</div>
61+
</section>
62+
63+
<!-- Contact Section -->
64+
<section id="contact" class="section contact">
65+
<div class="container">
66+
<h2>Contact Us</h2>
67+
<form>
68+
<input type="text" placeholder="Your Name" required>
69+
<input type="email" placeholder="Your Email" required>
70+
<textarea placeholder="Your Message" required></textarea>
71+
<button type="submit">Send Message</button>
72+
</form>
73+
</div>
74+
</section>
75+
76+
<!-- Footer -->
77+
<footer>
78+
<div class="container">
79+
<p>&copy; 2025 SafeBank. All rights reserved.</p>
80+
</div>
81+
</footer>
82+
83+
<script src="js/script.js"></script>
84+
</body>
85+
</html>

‎js/script.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
// Smooth scroll for anchor links
2+
document.querySelectorAll('nav ul li a').forEach(link => {
3+
link.addEventListener('click', e => {
4+
e.preventDefault();
5+
const target = document.querySelector(link.getAttribute('href'));
6+
target.scrollIntoView({ behavior: 'smooth' });
7+
});
8+
});

0 commit comments

Comments
 (0)