ayush-that · sampadatiwari30 · Oct 26, 2024 · Oct 25, 2024
diff --git a/assets/images/cash-flow.png b/assets/images/cash-flow.png
diff --git a/assets/images/finance-statments.webp b/assets/images/finance-statments.webp
diff --git a/assets/images/intro-to-finance.webp b/assets/images/intro-to-finance.webp
diff --git a/assets/images/invesment-basics.png b/assets/images/invesment-basics.png
diff --git a/assets/images/personal-finance.png b/assets/images/personal-finance.png
diff --git a/assets/images/stock-market.png b/assets/images/stock-market.png
diff --git a/finance.css b/finance.css
@@ -0,0 +1,113 @@
+/* General Styles */
+body {
+    font-family: 'Arial', sans-serif;
+    background-color: #f0f8ff; /* Light blue background */
+    margin: 0;
+    padding: 0;
+    background: linear-gradient(to right, #252793, black); /* Gradient from pink to yellow */
+
+
+}
+
+/* Header Styles */
+header {
+    text-align: center;
+    padding: 20px;
+    background-color: #4682b4; /* Steel blue */
+    color: white;
+}
+
+h1 {
+    margin: 0;
+    font-size: 36px;
+}
+
+p {
+    font-size: 18px;
+    margin: 10px 0;
+}
+
+/* Main Content Styles */
+main {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr); /* Three columns */
+    grid-gap: 20px; /* Space between the items */
+    justify-content: center; /* Center the grid horizontally */
+    align-content: center; /* Center the grid vertically */
+    padding: 20px;
+    max-width: 960px; /* Adjust max width for 3 columns */
+    margin: 0 auto; /* Center the grid on the page */
+}
+
+/* Course Card Styles */
+.course {
+    background-color: #ffffff;
+    border-radius: 10px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    padding: 20px;
+    width: 350px; /* Keeps the cards narrow */
+    text-align: center;
+    transition: transform 0.3s;
+}
+
+.course:hover {
+    transform: translateY(-5px);
+}
+
+h2 {
+    color: #4682b4; /* Steel blue */
+    font-size: 22px;
+    margin-bottom: 15px;
+}
+
+.poster-image {
+    width: 100%; /* Ensures the image takes up the full width of the container */
+    height: auto;
+    border-radius: 10px;
+    margin-bottom: 15px;
+}
+
+button {
+    margin-top: 15px;
+    padding: 10px 20px;
+    background-color: #4682b4; /* Steel blue */
+    color: white;
+    border: none;
+    border-radius: 5px;
+    font-size: 16px;
+    cursor: pointer;
+    transition: background-color 0.3s;
+}
+
+button:hover {
+    background-color: #5a9bd3; /* Lighter blue on hover */
+}
+
+/* Footer Styles */
+footer {
+    text-align: center;
+    padding: 10px;
+    background-color: #4682b4; /* Steel blue */
+    color: white;
+    margin-top: 20px;
+}
+
+footer a {
+    color: #ffffff;
+    text-decoration: none;
+}
+
+footer a:hover {
+    text-decoration: underline;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+    main {
+        grid-template-columns: 1fr; /* Single column layout on smaller screens */
+    }
+
+    .course {
+        width: 90%; /* Full width on smaller screens */
+    }
+}
diff --git a/finance.html b/finance.html
@@ -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>Basics of Finance - Video Courses</title>
+  <link rel="stylesheet" href="finance.css">
+</head>
+<body>
+  <header>
+    <h1>Let's Start Your Journey in World of Finance</h1>
+    <p>Learn the basics of finance with these curated video lessons. Click "Watch Now" to view each course.</p>
+  </header>
+
+  <main>
+      <div class="course">
+        <h2>Introduction to Finance</h2>
+        <!-- Poster image -->
+        <img src="assets/images/intro-to-finance.webp" alt="Introduction to Finance Poster" class="poster-image">
+
+        <!-- Watch Now button links to the YouTube video -->
+        <button onclick="window.open('https://www.youtube.com/watch?v=ZZY-6_GeZ_g', '_blank')">Watch Now</button>
+      </div>
+
+
+      <div class="course">
+        <h2>Introduction to Finance Statments</h2>
+        <!-- Poster image -->
+        <img src="assets/images/finance-statments.webp" alt="Introduction to Finance statments" class="poster-image">
+
+        <!-- Watch Now button links to the YouTube video -->
+        <button onclick="window.open('https://www.youtube.com/watch?v=Fi1wkUczuyk', '_blank')">Watch Now</button>
+      </div>
+
+
+      <div class="course">
+        <h2>Understanding Cash Flow</h2>
+        <!-- Poster image -->
+        <img src="assets/images/cash-flow.png" alt="understanding-cas-flow" class="poster-image">
+
+        <!-- Watch Now button links to the YouTube video -->
+        <button onclick="window.open('https://www.youtube.com/watch?v=hefAHWvrFDQ', '_blank')">Watch Now</button>
+      </div>
+
+      <div class="course">
+        <h2>Understanding Stock Market</h2>
+        <!-- Poster image -->
+        <img src="assets/images/stock-market.png" alt="understanding-cas-flow" class="poster-image">
+
+        <!-- Watch Now button links to the YouTube video -->
+        <button onclick="window.open('https://www.youtube.com/watch?v=p7HKvqRI_Bo', '_blank')">Watch Now</button>
+      </div>
+
+     <div class="course">
+        <h2>Personal Finance Managment</h2>
+        <!-- Poster image -->
+        <img src="assets/images/personal-finance.png" alt="understanding-cas-flow" class="poster-image">
+
+        <!-- Watch Now button links to the YouTube video -->
+        <button onclick="window.open('https://www.youtube.com/watch?v=UcAY6qRHlw0', '_blank')">Watch Now</button>
+      </div>
+
+      <div class="course">
+        <h2>Invesment Basics</h2>
+        <!-- Poster image -->
+        <img src="assets/images/invesment-basics.png" alt="understanding-cas-flow" class="poster-image">
+
+        <!-- Watch Now button links to the YouTube video -->
+        <button onclick="window.open('https://www.youtube.com/watch?v=qIw-yFC-HNU', '_blank')">Watch Now</button>
+      </div>
+  </main>
+
+  <footer>
+    <p></p>
+  </footer>
+
+  <script src="finance.js"></script>
+</body>
+</html>
diff --git a/finance.js b/finance.js
@@ -0,0 +1,57 @@
+// Array of video course data
+const courses = [
+    {
+      title: "Introduction to Finance and Accounting",
+      url: "https://www.youtube.com/watch?v=kdd4SmNfZVk",
+      duration: "2:30 hours"
+    },
+    {
+      title: "Understanding Financial Statements",
+      url: "https://www.youtube.com/watch?v=7Y2nLfn1M2E",
+      duration: "1:45 hours"
+    },
+    {
+      title: "Basics of Investment",
+      url: "https://www.youtube.com/watch?v=RgT_KxfpItg",
+      duration: "1:20 hours"
+    },
+    {
+      title: "Personal Finance 101",
+      url: "https://www.youtube.com/watch?v=bk-x9LHzl90",
+      duration: "3:00 hours"
+    },
+    {
+      title: "Introduction to Corporate Finance",
+      url: "https://www.youtube.com/watch?v=SnfDF7fRIaM",
+      duration: "2:10 hours"
+    }
+  ];
+
+  // Function to render video courses
+  function renderCourses() {
+    const videoCoursesContainer = document.getElementById("video-courses");
+
+    courses.forEach(course => {
+      const courseItem = document.createElement("div");
+      courseItem.className = "course-item";
+
+      const courseLink = document.createElement("a");
+      courseLink.className = "course-title";
+      courseLink.href = course.url;
+      courseLink.textContent = course.title;
+      courseLink.target = "_blank";
+
+      const courseDuration = document.createElement("span");
+      courseDuration.className = "course-duration";
+      courseDuration.textContent = course.duration;
+
+      courseItem.appendChild(courseLink);
+      courseItem.appendChild(courseDuration);
+
+      videoCoursesContainer.appendChild(courseItem);
+    });
+  }
+
+  // Call the function to render courses on page load
+  window.onload = renderCourses;
+
diff --git a/index.html b/index.html
@@ -504,6 +504,9 @@
               <li class="nav-item">
                 <a class="page-scroll" href="./blog.html" style="color: rgb(237, 242, 244);">Blogs 📰</a>
               </li>
+              <li class="nav-item">
+                <a class="page-scroll" href="./finance.html" style="color: rgb(237, 242, 244);">Courses 📚</a>
+              </li>
               <li class="nav-item">
                 <a class="page-scroll" href="./quiz.html" style="color: rgb(237, 242, 244);">Quiz 🤔</a>
               </li>