Skip to content

started the website #5

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Kaustubh-2003 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

started the website #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added ...s-and-financial-logo-design-template-isolated-on-transparent-background-PNG.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
79 changes: 79 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Financial Site</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container">
<div class="logo">
<img src="./images/Business-and-financial-logo-design-template-isolated-on-transparent-background-PNG.png" alt="Logo">
<h2> &nbsp FinApp</h2>
</div>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span></span>
<span></span>
<span></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</div>
</nav>



<header class="hero">
<div class="containerr">

<h1>Welcome to FinApp</h1>
<p>Empowering you with financial knowledge</p>
<a href="#" class="btn">Get Started</a>
</div>
</header>

<section class="features">
<div class="container">
<div class="feature">
<h2>Learn at your own pace</h2>
<p>Access a library of financial courses and tutorials designed to help you learn at your own pace.</p>
</div>
<div class="feature">
<h2 class="typing">Expert Instructors</h2>
<p>Learn from industry experts who have years of experience in finance and investment.</p>
</div>
<div class="feature">
<h2>Stay Updated</h2>
<p>Keep up with the latest trends and insights in finance through our regularly updated blog.</p>
</div>
</div>
</section>

<footer class="footer">
<div class="container">
<p>&copy; 2024 FinApp. All rights reserved.</p>
</div>
</footer>

<script src="index.js"></script>
</body>
</html>
6 changes: 6 additions & 0 deletions index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
document.addEventListener("DOMContentLoaded", function() {
const features = document.querySelectorAll(".feature");
features.forEach(feature => {
feature.classList.add("loaded");
});
});
312 changes: 312 additions & 0 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,312 @@
/* Reset styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

/* Global styles */
body {
font-family: 'Poppins', sans-serif;
background-color: #f6f6f9;
color: #363949;
}

.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}

/* Navbar */
.navbar {
background-color: #7380ec !important;
padding: 20px 0;
}

.navbar .logo {
display: flex;
align-items: center;
}

.navbar .logo img {
width: 40px;
height: 40px;
margin-right: 10px;
}

.navbar .logo h2 {
color: #fff; /* Match text color with background color */
font-size: 2.8rem;
font-weight: bold;
}

.nav-links {
display: flex;
list-style: none;
margin-right: 40px; /* Increase spacing between links */
}

.nav-itmes li {
margin-right: 20px;
}

.nav-item a {
color: #fff !important;
text-decoration: none;
font-size: 1rem;
transition: color 0.3s ease;
}

.nav-item a:hover {
color: #17178d !important;
text-decoration: underline; /* Add underline effect on hover */
}

.menu-toggle {
display: none;
}

/* Hero section */
.hero {
position: relative;
overflow: hidden;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); /* Add box shadow */
}

bod{
background-image: url('./images/bg.png');
background-position:center;
opacity: 60%;
}
.containerr {
position: relative;
z-index: 1;
text-align: center;
padding: 60px 0;

}

.container h1 {
font-size: 3.5rem;
font-weight: bolder; /* Make text bolder */
color: black;
}

.container p {
font-size: 1.2rem;
color: #666;
margin-bottom: 30px;
}

.btn {
display: inline-block;
padding: 10px 20px;
background-color: #7380ec;
color: #fff;
text-decoration: none;
border-radius: 5px;
transition: background-color 0.3s ease;
}

.btn:hover {
background-color: #5e6ad2;
}

.video-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: 0;
}

video {
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}


/* Features section */
.features {
display: flex;
justify-content: space-between;
margin-top: 60px;
}

.feature {
margin: 20px;
flex: 1;
padding: 40px;
background-color: #fff;
border-radius: 20px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0);
transition: box-shadow 0.3s ease;
}
@keyframes typing {
from {
width: 0;
}
to {
width: 100%;
}
}

.hero{
margin: auto;
margin-top: 20px;
width: 60%;

}
.typing-animation {
overflow: hidden;
border-right: 2px solid white; /* Adjust the border style as needed */
white-space: nowrap;
margin-bottom: 20px; /* Adjust spacing between features as needed */
animation: typing 2s steps(20, end);
}

.feature h2:hover{
color: orange;
}

.feature.loaded {
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}


.feature:hover {
box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
}

.feature h2 {
font-size: 1.5rem;
margin-bottom: 20px;
}

.feature p {
font-size: 1rem;
color: #333;
}

/* Footer */
.footer {
text-align: center;
padding: 40px 0;
background-color: #7380ec;
color: #fff;
margin-top: 60px;
}

.footer p {
font-size: 0.9rem;
}


/* Default Styles */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

body {
font-family: Arial, sans-serif;
line-height: 1.6;
}

.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 15px;
}

/* Header Styles */
.header {
background-color: #007bff;
color: #fff;
padding: 20px 0;
}

.logo {
float: left;
}

.logo h1 {
font-size: 24px;
}

.navbar ul {
list-style-type: none;
}

.navbar ul li {
display: inline;
margin-left: 20px;
}

.navbar ul li a {
text-decoration: none;
color: #fff;
}

/* Main Content Styles */
.main {
background-color: #f8f9fa;
padding: 100px 0;
text-align: center;
}

.main h2 {
font-size: 36px;
margin-bottom: 20px;
}

.main p {
font-size: 18px;
margin-bottom: 40px;
}

.btn {
background-color: #007bff;
color: #fff;
padding: 15px 30px;
text-decoration: none;
border-radius: 5px;
}

/* Features Section Styles */
.features {
background-color: #fff;
padding: 100px 0;
}

.features .feature {
text-align: center;
margin-bottom: 50px;
}

.features h3 {
font-size: 24px;
margin-bottom: 20px;
}

.features p {
font-size: 18px;
}

/* Footer Styles */
.footer {
background-color: #007bff;
color: #fff;
text-align: center;
padding: 20px 0;
}