UPDATED WITH ABOUT US

HARIESH-SR · Sep 9, 2023 · 621ae66 · 621ae66
1 parent 7dc3186
commit 621ae66
Show file tree

Hide file tree

Showing 11 changed files with 392 additions and 11 deletions.
diff --git a/README.md b/README.md
@@ -1,5 +1,46 @@
-# SRM GPA CGPA CALCULATOR
+# SRM GPA CGPA Calculator
 
-Developed a GPA & CGPA calculator website tailored for SRM IST, Trichy Campus, to simplify academic performance tracking. This user-friendly tool enables students to input course details and instantly calculate their GPA and CGPA. Empowering students to monitor their progress conveniently.
+## Overview
+
+The SRM CGPA GPA Calculator is a specialized web application tailored for students at SRM Institute of Science and Technology (SRM IST), Trichy Campus. It simplifies academic performance tracking by allowing students to calculate their Grade Point Average (GPA) and Cumulative Grade Point Average (CGPA) conveniently, with the following features:
+
+- **Regulation Selection:** Users can choose between the 2018 and 2021 regulations.
+- **Course Selection:** Users can select their respective course from the preloaded options available at SRM IST, Trichy Campus.
+- **Semester Selection (GPA Calculator):** Users specify the semester for GPA calculation.
+- **Course List Display (GPA Calculator):** The website displays all credited courses available in the selected regulation, course, and semester.
+- **Grade Selection (GPA Calculator):** Users can select their obtained grades for each subject.
+- **GPA Calculation (GPA Calculator):** Upon selecting grades, clicking the "Calculate GPA" button displays the GPA.
+
+In the CGPA Calculator:
+
+- **Default Semester GPA Entry:** Users start by entering the GPA for the first semester.
+- **Adding Semesters:** Users can add up to 8 semesters by clicking the "Add Another Semester" button.
+- **Removing Semesters:** If needed, users can remove the last added semester using the "Remove Last Semester" button.
+- **CGPA Calculation (CGPA Calculator):** After entering GPAs for all added semesters, clicking the "Calculate CGPA" button displays the CGPA.
+
+## Getting Started
+
+To use the SRM IST GPA & CGPA Calculator, simply visit the website at [https://srmcgpa.netlify.app/](https://srmcgpa.netlify.app/). 
+
+No login or registration is required.
+
+## Usage
+
+1. **Regulation Selection:** Choose between the 2018 and 2021 regulations.
+2. **Course Selection:** Select your respective course from the preloaded options.
+3. **Semester Selection (GPA Calculator):** Specify the semester for GPA calculation.
+4. **Course List Display (GPA Calculator):** The website will display all credited courses for the selected regulation, course, and semester.
+5. **Grade Selection (GPA Calculator):** Select obtained grades for each subject.
+6. **GPA Calculation (GPA Calculator):** Click the "Calculate GPA" button to view your GPA.
+
+For the CGPA Calculator:
+
+1. **Default Semester GPA Entry:** Enter the GPA for the first semester.
+2. **Adding Semesters:** Click the "Add Another Semester" button to add more semesters.
+3. **Removing Semesters:** If needed, use the "Remove Last Semester" button.
+4. **CGPA Calculation (CGPA Calculator):** After entering GPAs for all added semesters, click the "Calculate CGPA" button to view your CGPA.
+
+## Support and Feedback
+
+For any questions, feedback, or assistance, please contact us at [[email protected]](mailto:[email protected]).
 
-Website Link: https://srmcgpa.netlify.app/
diff --git a/about.html b/about.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>About Us</title>
+    <!-- Add your CSS file if applicable -->
+    <link rel="stylesheet" href="css/about.css">
+    <!-- Add Font Awesome CSS for icons -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
+</head>
+<body>
+
+    <main>
+        <section id="about">
+            <h1>About Us</h1>
+            <p>Hello! We are Sai Narayana and Hariesh, the creators of the SRM IST GPA & CGPA Calculator.</p>
+
+            <h2>Who Are We?</h2>
+            <p>We are students pursuing B.Tech in Computer Science and Engineering (CSE) from the batch of 2021-2025 at SRM Institute of Science and Technology (SRM IST), Trichy Campus. With a passion for simplifying the academic journey, we embarked on this project together.</p>
+
+            <h2>Why We Built This Website</h2>
+            <p>We understand the challenges that students face when it comes to calculating their GPA and CGPA. Many online tools are available, but they often require entering subject credit details and total semester credits, which can be time-consuming and cumbersome.</p>
+            <p>To overcome this issue, we decided to build our website. Our goal was to create a user-friendly tool that enables students to calculate their GPA and CGPA without the hassle of entering credit details.</p>
+
+            <h2>What Makes Us Different</h2>
+            <ul>
+                <li><strong>Preloaded Courses:</strong> Our website currently features courses available at SRM IST, Trichy Campus. We've eliminated the need for students to manually enter course details.</li>
+                <li><strong>Ease of Use:</strong> With just a few clicks, students can select their regulation, course, semester, and grades to calculate their GPA and CGPA.</li>
+            </ul>
+
+            <h2>Our Vision</h2>
+            <p>While we've started with courses available in our Trichy campus, we have plans to expand our offerings. In the future, we aim to include courses available in other SRM IST campuses, making it even more convenient for students across the university.</p>
+
+            <p>Thank you for choosing the SRM IST GPA & CGPA Calculator. We hope our tool simplifies your academic journey and helps you achieve your goals.</p>
+        </section>
+    </main>
+
+    <footer>
+        <div class="social-menu">
+            <div class="contributor">
+                <h4>Sai Narayana</h4>
+                <ul>
+                    <li><a href="https://github.com/sai231102/" target="_blank"><i class="fab fa-github"></i></a></li>
+                    <li><a href="https://www.linkedin.com/in/sai23/" target="_blank"><i class="fab fa-linkedin"></i></a></li>
+                </ul>
+            </div>
+            <div class="contributor">
+                <h4>Hariesh</h4>
+                <ul>
+                    <li><a href="https://github.com/HARIESH-SR" target="_blank"><i class="fab fa-github"></i></a></li>
+                    <li><a href="https://www.linkedin.com/in/hariesh-s-r/" target="_blank"><i class="fab fa-linkedin"></i></a></li>
+                </ul>
+            </div>
+        </div>
+    </footer>
+</body>
+</html>
diff --git a/contact.html b/contact.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Contact Us</title>
+    <style>
+        body {
+            margin: 0; /* Remove default margin */
+            overflow: hidden; /* Prevent any scrollbars */
+        }
+        iframe {
+            width: 100%;
+            height: 100vh; /* Set the iframe to full viewport height */
+            border: none; /* Remove iframe border */
+        }
+    </style>
+    <!-- Add your CSS stylesheets here if needed -->
+</head>
+<body>
+    <!-- Embed the Google Form here -->
+    <iframe src="https://docs.google.com/forms/d/e/1FAIpQLSdbMg3CR4Djs5RmsaroKDH3Kvo2jX05m31ejujZWhpw2VJL-g/viewform?embedded=true"></iframe>
+
+    <!-- You can add additional content or styling for your contact page here -->
+</body>
+</html>
diff --git a/css/about.css b/css/about.css
@@ -0,0 +1,192 @@
+body {
+    margin: 0;
+    font-family: 'Arial, sans-serif';
+    background: linear-gradient(45deg, #9abeab, #e1f0f0, #9abeab);
+    background-size: 400% 400%;
+    animation: gradientBG 15s ease infinite;
+    position: relative;
+    color: #333;
+    line-height: 1.8;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+@keyframes gradientBG {
+    0% {
+        background-position: 0% 50%;
+    }
+    50% {
+        background-position: 100% 50%;
+    }
+    100% {
+        background-position: 0% 50%;
+    }
+}
+
+header {
+    background-color: rgba(52, 73, 94, 0.9);
+    padding: 20px;
+    text-align: center;
+    position: fixed;
+    width: 100%;
+    top: 0;
+    z-index: 1000;
+    box-shadow: 0px 4px 2px -2px gray;
+    backdrop-filter: blur(5px);
+}
+
+nav {
+    margin: 20px;
+    text-align: center;
+}
+
+nav a {
+    color: #ecf0f1;
+    margin: 0 15px;
+    text-decoration: none;
+    font-weight: bold;
+    border-bottom: 2px solid transparent;
+    transition: border-bottom 0.3s, color 0.3s;
+}
+
+nav a:hover {
+    border-bottom: 2px solid #3498db;
+    color: #fff;
+}
+
+main {
+    margin-top: 80px;
+    padding: 20px;
+    width: 60%;
+    background-color: rgba(255, 255, 255, 0.8);
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    border-radius: 20px;
+    transition: all 0.3s ease-in-out;
+    animation: fadeIn 1s;
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+#about h1, #about h2 {
+    color: #2c3e50;
+    text-align: center;
+    text-transform: uppercase;
+    letter-spacing: 2px;
+    margin-bottom: 20px;
+    border-bottom: 2px solid #3498db;
+    display: inline-block;
+    padding-bottom: 10px;
+}
+
+#about p {
+    text-align: justify;
+    margin-bottom: 20px;
+    font-size: 18px;
+}
+
+ul {
+    list-style-type: none;
+    padding: 0;
+}
+
+ul li {
+    background-color: #ecf0f1;
+    margin: 10px 0;
+    padding: 10px;
+    border-radius: 5px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+ul li:hover {
+    transform: scale(1.05);
+    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
+}
+
+footer {
+    background-color: rgba(52, 73, 94, 0.9);
+    padding: 20px;
+    text-align: center;
+    color: #ecf0f1;
+    width: 60%;
+    position: bottom;
+    bottom: 0;
+    height: 130px; /* Adjust the height as needed */
+    backdrop-filter: blur(5px);
+}
+
+
+.contributor {
+    display: inline-block;
+    margin: 0 20px;
+}
+
+.contributor h4 {
+    margin-bottom: 10px;
+}
+
+.social-menu {
+    display: flex;
+    justify-content: center;
+    margin-bottom: 10px;
+}
+
+.social-menu ul {
+    display: flex;
+}
+
+.social-menu ul li {
+    margin: 0 10px;
+}
+
+.social-menu ul li a {
+    color: #ecf0f1;
+    font-size: 24px;
+    text-decoration: none;
+    background: linear-gradient(145deg, #3498db, #2ecc71);
+    padding: 12px;
+    border-radius: 50%;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
+    transition: all 0.3s ease-in-out;
+}
+
+.social-menu ul li a:hover {
+    color: #fff;
+    background: linear-gradient(145deg, #2ecc71, #3498db);
+    box-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
+}
+
+@media only screen and (max-width: 600px) {
+    main {
+        width: 90%;
+    }
+
+    nav a {
+        display: block;
+        margin: 10px 0;
+    }
+
+    footer {
+        width: 90%; /* Adjust the width for mobile screens */
+        height: 210px;
+    }
+
+    .social-menu ul {
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .social-menu ul li {
+        margin: 5px 0;
+    }
+    body {
+        margin: 0;
+    }
+}
diff --git a/css/main.css b/css/main.css
@@ -1,4 +1,3 @@
-/* Reset some default styles */
 body, html {
     margin: 0;
     padding: 0;
@@ -107,6 +106,19 @@ nav a:hover {
     cursor: pointer;
 }
 
+.menuicon {
+    font-size: 36px;
+    cursor: pointer;
+    color: rgba(0, 0, 0, 0.7); /* Use a semi-transparent black color for the menu icon */
+    position: absolute;
+    top: 20px; /* Adjust the vertical position */
+    left: 20px; /* Adjust the horizontal position */
+    z-index: 2; /* Ensure the icon is above other content */
+    background-color: rgba(255, 255, 255, 0.5); /* Add a semi-transparent white background */
+    border-radius: 50%; /* Make the background circular */
+    padding: 10px; /* Adjust padding for spacing */
+}
+
 /* Main Content Styles */
 .main-content {
     padding: 40px;

diff --git a/images/favicon.png b/images/favicon.png
diff --git a/images/index-bg.jpg b/images/index-bg.jpg
diff --git a/index.html b/index.html
@@ -3,11 +3,16 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>GPA | CGPA Calculator</title>
+    <title>SRM CGPA GPA Calculator</title>
+    <link rel="icon" type="image/x-icon" href="/images/favicon.png">
     <link rel="stylesheet" href="css/main.css">
+    <meta name="keywords" content="SRM CGPA, SRM CGPA calculator, SRM GPA, SRM GPA calculator">
+    <meta name="description" content="SRM GPA & CGPA calculator website tailored for SRM IST, Trichy Campus, to simplify academic performance tracking.">
+
+    <meta name="google-site-verification" content="gmETgyVAuRii3D12Ivf47izLH82PdpdyBaaBsT99LDc" />
     <style>
         .background-container {
-            background-image: url("https://images.unsplash.com/photo-1442606383395-175ee96ed967?q=80&fm=jpg&s=5c8c74be9bc91b47c79a1aaf92264be5");
+            background-image: url("images/index-bg.jpg");
             background-size: cover;
             background-repeat: no-repeat;
             padding: 20px; /* Add padding to keep content away from edges */
@@ -84,7 +89,7 @@ <h2>What Students Are Saying</h2>
 
             <!-- Footer -->
             <footer>
-                <p>&copy; 2023 Designed by Sai Narayana & Hariesh</p>
+                <p>&copy; Designed by Sai Narayana & Hariesh</p>
             </footer>
         </div>