N210673

EXPLORE WEB – CapCut Online Editor

Introduction:

In today's digital world, video content is everywhere, and having an efficient online editing tool is
a must for creators. CapCut Online Editor, developed by Bytedance (the company behind
TikTok), is a web-based video editing platform that offers powerful features without the need for
heavy software installation.

This report explores the capabilities of CapCut, its standout features, areas for improvement,
and suggestions to enhance the user experience.

About CapCut Online Editor

CapCut is a free, cloud-based video editing tool that enables users to create
professional-looking videos effortlessly. It is widely used by content creators, marketers, and
social media influencers for quick edits, adding effects, and enhancing video quality.

Key Features
1. AI-Powered Editing Tools

●​ Auto-Cut Feature – Automatically trims videos to remove unwanted parts.​

●​ AI Background Removal – No need for a green screen—removes backgrounds in a

single click.​

●​ Auto-Subtitles & Text-to-Speech – AI-generated subtitles for easy accessibility.

2. Multi-Layer Editing & Effects

●​ Multiple Video & Audio Tracks – Allows professional-level editing.​

 ●​ Smooth Transitions & Filters – Includes a variety of transition effects, filters, and color
grading options.
●​ Keyframe Animation – Enables precise control over object movement in videos.​

3. Cloud-Based Editing & Collaboration

●​ Online Project Storage – Work on projects from any device without worrying about
storage.​

●​ Real-Time Collaboration – Teams can edit the same project simultaneously.​

4. Free Stock Library

●​ Access to royalty-free music, stickers, and video clips for creative editing.​

5. High-Quality Export & Platform Compatibility

●​ Supports 4K Export – Ensures high-quality video output.​

●​ Available on Web, Mobile & Desktop – Syncs projects across devices.​

Areas for Improvement & Suggested Features

1. Customizable Keyboard Shortcuts

While CapCut offers a smooth editing experience, it lacks an option for users to customize
keyboard shortcuts. Adding this feature would allow professionals to edit more efficiently.

2. Advanced Color Grading

CapCut’s current color grading tools are basic compared to professional software like DaVinci
Resolve. Enhancing features like HSL adjustments, LUT blending, and precise color
correction would significantly improve video quality.

3. AI Motion Tracking
One major missing feature is motion tracking. Adding AI-powered motion tracking would allow
elements like text, stickers, and effects to follow objects within a video, making edits more
dynamic.

4. More Export Options

Currently, CapCut supports limited export settings. Providing more control over bitrate, codec
selection (such as H.265), and lossless formats would benefit professional users.

5. Seamless Cross-Device Experience

Though CapCut syncs projects across devices, the experience differs between mobile and
desktop. Ensuring a consistent UI and feature set across all platforms would enhance
workflow efficiency.

Email to CapCut Development Team

Subject: Feature Suggestions for Improving CapCut Online Editor

Dear CapCut Development Team,

I hope you're doing well. First, I want to appreciate the amazing work you’ve done with CapCut
Online Editor. The platform is intuitive, efficient, and packed with great features for video
editing.

As an active user, I’d love to share a few suggestions that could further improve the editing
experience:

1.​ Customizable Keyboard Shortcuts – Allowing users to set their own shortcuts can
speed up workflow significantly.​

2.​ Advanced Color Grading – Adding HSL adjustments, LUT blending, and multi-layer
color grading would be a great addition.​

3.​ AI Motion Tracking – Introducing motion tracking for text, stickers, and effects would
make videos more dynamic.​

4.​ Expanded Export Settings – More control over bitrates, H.265 codec support, and
lossless exports would be useful.​
 5.​ Better Cross-Device Sync – Ensuring a uniform experience across web, mobile, and
desktop platforms.​

I believe these enhancements will take CapCut to the next level and make it even more
competitive with industry-standard software. I’d love to hear your thoughts and would be happy
to provide more detailed feedback if needed.

Looking forward to seeing CapCut grow!

Best regards,​

Yuvaraj Suri
 HTML TAGS
Aim:- Explore the html elements I know

Describe :- Task is to create the webpage with the html elements I know

Source Code:-

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exploring HTML Elements</title>
<style>
body {
background-color: lavender;
font-family: Arial, sans-serif;
}
h1 {
text-align: center;
color: navy;
}
p{
font-size: 18px;
text-align: center;
}
.container {
 text-align: center;
margin-top: 20px;
}
img {
border-radius: 10px;
box-shadow: 2px 2px 10px gray;
}
a{
display: block;
text-align: center;
margin-top: 20px;
font-size: 18px;
text-decoration: none;
background-color: navy;
color: white;
padding: 10px;
border-radius: 5px;
width: 200px;
margin: 20px auto;
}
a:hover {
background-color: darkblue;
}
</style>
</head>
<body>

<h1>Exploring HTML Elements</h1>

<p><i>Hello, I am Yuvaraj Suri! Here are some basic HTML elements that I have learned so
far.</i></p>

<div class="container">
<img src="https://source.unsplash.com/300x260/?technology,coding" alt="Tech Image">
</div>

<a href="https://www.w3schools.com/html/" target="_blank">Learn More About HTML</a>

</body>
</html>
 Beginner HTML_JS_Tasks
Aim:

To learn the basics of HTML, CSS, and JavaScript through interactive tasks.

Description:

●​ Task 1: Basic Webpage Setup​

Create an HTML webpage with a title, headings, and structured content sections.​

●​ Task 2: Working with Text Elements​

Learn how to use different heading levels and paragraphs with basic styling.​

●​ Task 3: Manipulating HTML Attributes​

Use JavaScript to dynamically change HTML attributes.​

●​ Task 4: Adding and Modifying Images​

Insert images and modify their properties using CSS and JavaScript.​

●​ Task 5: Creating Interactive Buttons​

Style buttons and assign them JavaScript functions.​

●​ Task 6: Forms and Input Validation​

Design a form for user input and validate it with JavaScript.​

●​ Task 7: Dynamic Content Manipulation​

Modify webpage elements dynamically using JavaScript.​
●​ Task 8: Working with Lists​
Create and modify ordered and unordered lists dynamically.​

●​ Task 9: JavaScript Styling​

Change element styles dynamically through JavaScript.​

●​ Task 10: Print and Save Functionalities​

Implement print and save features for webpage content.
 PHP_Tasks

Aim: To learn the basics of PHP and how to use it with the XAMPP

Description:

Task 1: Build a Simple Calculator

Objective: Learn PHP variables, constants, and basic functions.
1. Create a form with fields to input two numbers and select an operation (Addition, Subtraction,
Multiplication, Division).
2. Use PHP to:
- Retrieve the inputs using $_POST.
- Define constants for mathematical operations (like PI or some constant values).
- Use functions to perform each operation.
3. Display the result below the form.

Task 2: Create a Login and Registration System

Objective: Learn form handling, database connection, and user authentication.
1. Create a MySQL database with a table `users` (fields: id, username, email, password).
2. Build a registration form:
- Validate input (e.g., ensure passwords match, email format is correct).
- Store the hashed password in the database.
3. Build a login form:
- Authenticate user credentials against the database.
- On success, display a "Welcome [username]" message.

Source Code:

Calculator.php

<!doctype html>
<html>
 <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculator</title>
</head>
<body>
<h1>Simple Calculator</h1>
<div class="container">
<form action="post">
<input type="number" name="num1" id="n1" placeholder="Enter first
number" required>
<input type="number" name="num2" id="n2" placeholder="Enter second
number" required>
<select name="operation">
<option value="add">Addition (+)</option>
<option value="subtract">Subtraction (-)</option>
<option value="multiply">Multiplication (*)</option>
<option value="divide">Division (/)</option>
</select>
<button type="submit">Calculate</button>
</form>

</div>

</body>
</html>

<?php

$servername = "localhost";
$username = "root";
$password = "";
$database = "phplab";

$conn = new mysqli($servername, $username, $password, $database);

 // Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);

} else {
echo "Connected successfully";
}

$num1=$_POST['num1'];
$num2=$_POST['num2'];
$operation=$_POST['operation'];

function calculate($num1,$num2,$operation){
switch ($operation){
case "add":
return $num1+$num2;
case "subtract":
return $num1-$num2;
case "multiply":
return $num1*$num2;
case "division":
return $num2 != 0 ? $num1 / $num2 : "Error: Division by zero";
default:
return "Invalid operation!";

}
}

$result = calculate($num1, $num2, $operation);

echo "The .$operation. of .$num1. and .$num2. is .$result.";

$conn->close();
?>
db.php
<?php
$servername = "localhost";
$username = "root"; // Change if using a different username
$password = ""; // Set your MySQL password
$dbname = "phplab";

$conn = new mysqli($servername, $username, $password, $dbname);

if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
?>

Register.php
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "user_database";
$conn = new mysqli($servername, $username, $password, $dbname);

if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}

if ($_SERVER["REQUEST_METHOD"] == "POST") {
$username = $_POST["username"];
$email = $_POST["email"];
$password = password_hash($_POST["password"], PASSWORD_DEFAULT);

$stmt = $conn->prepare("INSERT INTO users (username, email, password) VALUES (?,

?, ?)");
$stmt->bind_param("sss", $username, $email, $password);

if ($stmt->execute()) {
 echo "Registration successful! <a href='login.php'>Login Here</a>";
} else {
echo "Error: " . $stmt->error;
}
}
?>

<!DOCTYPE html>
<html>
<head>
<title>Register</title>
</head>
<body>
<h2>Register</h2>
<form method="post">
<input type="text" name="username" required placeholder="Username">
<input type="email" name="email" required placeholder="Email">
<input type="password" name="password" required placeholder="Password">
<button type="submit">Register</button>
</form>
</body>
</html>

Login.php
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "user_database";

$conn = new mysqli($servername, $username, $password, $dbname);

if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}

session_start();
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$email = $_POST["email"];
$password = $_POST["password"];

$stmt = $conn->prepare("SELECT id, username, password FROM users WHERE email

= ?");
$stmt->bind_param("s", $email);
 $stmt->execute();
$stmt->store_result();
$stmt->bind_result($id, $username, $hashed_password);
$stmt->fetch();

if ($stmt->num_rows > 0 && password_verify($password, $hashed_password)) {

$_SESSION["username"] = $username;
echo "Welcome, " . $username;
} else {
echo "Invalid email or password!";
}
}
?>

<!DOCTYPE html>
<html>
<head>
<title>Login</title>
</head>
<body>
<h2>Login</h2>
<form method="post">
<input type="email" name="email" required placeholder="Email">
<input type="password" name="password" required placeholder="Password">
<button type="submit">Login</button>
</form>
</body>
</html>

Logout.php
<?php
session_start();
session_destroy();
header("Location: login.php");
?>
Output :
 PHPJObPortal

Aim:- Build a Job Application Portal Using PHP

Description:-

Develop a func onal webpage for a Job Applica on Portal where users can:
​ 1. Register an account.
​ 2. Login using their creden als.
​ 3. Upload and update their profiles with: o Profile picture (image upload) o Digital resume
​ (PDF upload and download)

SourceCode:-

jobportal.php (HTML + PHP)

php
CopyEdit
<?php
session_start();

// Check if the user is already logged in

if (isset($_SESSION['email'])) {
header("Location: dashboard.php"); // Redirect to the dashboard if
already logged in
exit();
}

// Handle form submission for login

if ($_SERVER["REQUEST_METHOD"] == "POST") {
$email = $_POST['email'];
$password = $_POST['password'];

// Replace this with actual database credentials and validation

// For demonstration purposes, let's assume a simple check
 $valid_email = "user@example.com";
$valid_password = "password123";

if ($email == $valid_email && $password == $valid_password) {

// Set session variables
$_SESSION['email'] = $email;
header("Location: dashboard.php"); // Redirect to the
dashboard
exit();
} else {
$error = "Invalid email or password.";
}
}
?>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Job Portal Login</title>
</head>
<body>
<h1>Job Portal Login</h1>

<form action="jobportal.php" method="POST">

<label for="email">Email:</label>
<input type="email" name="email" id="email" required
placeholder="Enter your email"><br>

<label for="password">Password:</label>
<input type="password" name="password" id="password" required
placeholder="Enter your password"><br>

<button type="submit">Login</button>
</form>
 <?php
if (isset($error)) {
echo "<p style='color: red;'>$error</p>";
}
?>
</body>
</html>

dashboard.php (HTML + PHP)

php
CopyEdit
<?php
session_start();

// Check if the user is logged in

if (!isset($_SESSION['email'])) {
header("Location: jobportal.php"); // Redirect to login page if
not logged in
exit();
}

// If user is logged in, show the dashboard

$email = $_SESSION['email'];
?>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Job Portal Dashboard</title>
</head>
<body>
<h1>Welcome to the Job Portal, <?php echo $email; ?>!</h1>

<p>Welcome to your dashboard. Here you can manage your job

applications, view your profile, and more.</p>
 <a href="logout.php">Logout</a>
</body>
</html>

logout.php (PHP)
php
CopyEdit
<?php
session_start();

// Destroy the session to log out

session_unset();
session_destroy();

// Redirect to the login page after logging out

header("Location: jobportal.php");
exit();
 Basic GIT Commands
Aim: To understand Git, how Git commands work, and the differences between Git and GitHub.

Description:​
This document provides hands-on tasks covering all basic Git commands, including operations
like branching, merging, handling remote repositories, undoing changes, and exploring
advanced Git features. Complete these tasks sequentially to gain a thorough understanding of
Git.

Tasks:

1.​ Task 1: Basic Git Commands​

2.​ Task 2: Branching & Merging​

3.​ Task 3: Working with Remote Repositories​

4.​ Task 4: Undoing Changes​

5.​ Task 5: Advanced Git Commands​

6.​ Task 6: Collaboration & Troubleshooting​

Task 1: Basic Git Commands

bash
CopyEdit
PS C:\Users\Yuvaraj\Desktop\GitRepo> git init
Initialized empty Git repository in
C:\Users\Yuvaraj\Desktop\GitRepo\.git/

PS C:\Users\Yuvaraj\Desktop\GitRepo> echo "hello git this is Yuvaraj."

> file1.txt

PS C:\Users\Yuvaraj\Desktop\GitRepo> git status

On branch master
No commits yet
Untracked files:
(use "git add <file>..." to include in what will be committed)
file1.txt
nothing added to commit but untracked files present (use "git add" to
track)

PS C:\Users\Yuvaraj\Desktop\GitRepo> git add file1.txt

PS C:\Users\Yuvaraj\Desktop\GitRepo> git commit -m "Initial commit

with file1.txt"
[master (root-commit) 20517ad] Initial commit with file1.txt
1 file changed, 0 insertions(+), 0 deletions(-)
create mode 100644 file1.txt

PS C:\Users\Yuvaraj\Desktop\GitRepo> git log

commit 20517adb37ba7d1a92d16a400f1c19753e09542a (HEAD -> master)
Author: Yuvaraj <yuvaraj@example.com>
Date: Sat Mar 29 17:59:10 2025 +0530
Initial commit with file1.txt

Task 2: Branching & Merging

bash
CopyEdit
PS C:\Users\Yuvaraj\Desktop\GitRepo> git checkout -b feature-branch
Switched to a new branch 'feature-branch'

PS C:\Users\Yuvaraj\Desktop\GitRepo> echo "Added new feature" >>

file1.txt

PS C:\Users\Yuvaraj\Desktop\GitRepo> git add file1.txt

PS C:\Users\Yuvaraj\Desktop\GitRepo> git commit -m "Updated file1.txt
with a new feature"
[feature-branch d9d3f75] Updated file1.txt with a new feature
1 file changed, 0 insertions(+), 0 deletions(-)

PS C:\Users\Yuvaraj\Desktop\GitRepo> git checkout master

error: pathspec 'master' did not match any file(s) known to git

PS C:\Users\Yuvaraj\Desktop\GitRepo> git merge feature-branch

Already up to date.

Task 3: Working with Remote Repositories

bash
CopyEdit
PS C:\Users\Yuvaraj\Desktop\GitRepo> git remote add origin
https://github.com/Yuvaraj/GitRepo
PS C:\Users\Yuvaraj\Desktop\GitRepo> git push -u origin master
Enumerating objects: 3, done.
Counting objects: 100% (3/3), done.
Writing objects: 100% (3/3), 269 bytes | 89.00 KiB/s, done.
Total 3 (delta 0), reused 0 (delta 0), pack-reused 0
* [new branch] master -> master
branch 'master' set up to track 'origin/master'.

PS C:\Users\Yuvaraj\Desktop\GitRepo> git clone

https://github.com/Yuvaraj/GitRepo
Cloning into 'GitRepo'...
Receiving objects: 100% (3/3), done.

Task 4: Undoing Changes

bash
CopyEdit
PS C:\Users\Yuvaraj\Desktop\GitRepo> git checkout -- file1.txt
PS C:\Users\Yuvaraj\Desktop\GitRepo> git reset file1.txt
PS C:\Users\Yuvaraj\Desktop\GitRepo> git revert HEAD
[feature-branch 9f20409] Revert "Updated file1.txt with a new feature"
1 file changed, 0 insertions(+), 0 deletions(-)

PS C:\Users\Yuvaraj\Desktop\GitRepo> git stash

No local changes to save
PS C:\Users\Yuvaraj\Desktop\GitRepo> git stash pop
No stash entries found.

Task 5: Advanced Git Commands

bash
CopyEdit
PS C:\Users\Yuvaraj\Desktop\GitRepo> git bisect start
status: waiting for both good and bad commits

PS C:\Users\Yuvaraj\Desktop\GitRepo> git blame file1.txt

^20517ad (Yuvaraj 2025-03-29 17:59:10 +0530 1)
^20517ad (Yuvaraj 2025-03-29 17:59:10 +0530 2) ^@

PS C:\Users\Yuvaraj\Desktop\GitRepo> git reflog

9f20409 (HEAD -> feature-branch) HEAD@{0}: revert: Revert "Updated
file1.txt with a new feature"
d9d3f75 HEAD@{1}: commit: Updated file1.txt with a new feature
20517ad (origin/master, master) HEAD@{2}: checkout: moving from master
to feature-branch
20517ad (origin/master, master) HEAD@{3}: commit (initial): Initial
commit with file1.txt

Task 6: Collaboration & Troubleshooting

bash
CopyEdit
PS C:\Users\Yuvaraj\Desktop\GitRepo> git worktree add ../new-worktree
master
fatal: invalid reference: master

PS C:\Users\Yuvaraj\Desktop\GitRepo> git sparse-checkout init

PS C:\Users\Yuvaraj\Desktop\GitRepo> git sparse-checkout set
path/to/folder

PS C:\Users\Yuvaraj\Desktop\GitRepo> git filter-branch --tree-filter

'rm -rf secrets/' HEAD
WARNING: git-filter-branch has a glut of gotchas generating mangled
history
Proceeding with filter-branch...
Rewrite 20517adb37ba7d1a92d16a400f1c19753e09542a (1/3)
 Jquery

Aim: To develop the website using the jQuery

Description:

jQuery is a fast, lightweight, and feature-rich JavaScript library that simplifies HTML document
traversal, event handling, animation, and AJAX interactions. It allows developers to write less
code while achieving the same functionality as plain JavaScript.
Click Event & Change CSS
Hover Event - Change Style
Focus & Blur Events on Input
Fading Effects - FadeIn, FadeOut, and FadeToggle
Slide Effects - SlideUp and SlideDown
Keypress & Keydown Events - Show Key Pressed
Multiple Animations with animate()
Stop, Clear Queue & Finish Animations
Form Submit Event - Prevent Default Action
Implement a jQuery Plugin – Light box for Images
Parent & Child Traversing with Styling
Find Siblings & Apply Styling

SOURCE CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Lab Tasks</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></scri
pt>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css">
<style>
body {
font-family: 'Arial', sans-serif;
padding: 20px;
background-color: #f4f4f4;
}
.task-container {
margin-bottom: 40px;
padding: 20px;
border: 1px solid #ddd;
border-radius: 8px;
background: white;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease-in-out;
}
.task-container:hover {
transform: scale(1.02);
}
.highlight {
background-color: yellow;
}
.animated-box {
width: 100px;
height: 100px;
background-color: lightblue;
position: relative;
border-radius: 10px;
transition: all 0.3s ease-in-out;
}
.preview {
max-width: 100%;
height: auto;
}
.styled-input {
border: 2px solid #ccc;
padding: 8px;
border-radius: 5px;
transition: all 0.3s;
}
.styled-input:focus {
border-color: #28a745;
box-shadow: 0px 0px 5px rgba(40, 167, 69, 0.7);
}
 </style>
</head>
<body>

<h2 class="text-center text-primary mb-4">jQuery Lab Tasks</h2>

<!-- 1. Click Event & Change CSS -->

<div class="task-container">
<h4>1. Click Event & Change CSS</h4>
<p id="clickPara" class="p-2">Click the button to change my color!</p>
<button id="changeColorBtn" class="btn btn-primary">Change Color</button>
</div>

<!-- 2. Hover Event -->

<div class="task-container">
<h4>2. Hover Event</h4>
<div id="hoverDiv" class="p-4 text-white bg-dark text-center">Hover over me!</div>
</div>

<!-- 3. Focus & Blur Events -->

<div class="task-container">
<h4>3. Focus & Blur on Input</h4>
<input type="text" id="focusInput" class="form-control styled-input"
placeholder="Focus on me">
</div>

<!-- 4. Fading Effects -->

<div class="task-container">
<h4>4. Fading Effects</h4>
<button id="fadeToggleBtn" class="btn btn-warning">Toggle Fade</button>
<div id="fadeBox" class="animated-box mt-3"></div>
</div>

<!-- 5. Sliding Effects -->

<div class="task-container">
<h4>5. Slide Effects</h4>
<button id="slideToggleBtn" class="btn btn-info">Slide Up/Down</button>
<div id="slideBox" class="animated-box mt-3"></div>
</div>

<!-- 6. Keypress Event -->

<div class="task-container">
<h4>6. Keypress Event</h4>
 <input type="text" id="keyInput" class="form-control" placeholder="Type
something...">
<p id="keyOutput" class="mt-2 text-success"></p>
</div>

<!-- 7. Animation Effects -->

<div class="task-container">
<h4>7. Multiple Animations</h4>
<button id="animateBtn" class="btn btn-danger">Animate Box</button>
<div id="animateBox" class="animated-box mt-3"></div>
</div>

<!-- jQuery Script -->

<script>
$(document).ready(function() {
// 1. Click Event
$("#changeColorBtn").click(function() {
$("#clickPara").css({ "color": "white", "background-color": "blue", "padding":
"10px", "border-radius": "5px" });
});

// 2. Hover Event
$("#hoverDiv").hover(
function() { $(this).css("background-color", "red"); },
function() { $(this).css("background-color", "black"); }
);

// 3. Focus & Blur

$("#focusInput").focus(function() {
$(this).css("border", "2px solid green");
}).blur(function() {
$(this).css("border", "");
});

// 4. Fading Effects
$("#fadeToggleBtn").click(function() {
$("#fadeBox").fadeToggle(500);
});

// 5. Sliding Effects
$("#slideToggleBtn").click(function() {
$("#slideBox").slideToggle(500);
});
 // 6. Keypress Event
$("#keyInput").keypress(function(event) {
$("#keyOutput").text("You pressed: " + event.key);
});

// 7. Animation Effects
$("#animateBtn").click(function() {
$("#animateBox").animate({
width: "200px",
height: "200px",
opacity: 0.5,
left: "+=50px"
}, 1000).animate({
width: "100px",
height: "100px",
opacity: 1,
left: "-=50px"
}, 1000);
});
});
</script>

</body>
</html>
output:
 Oauth

Aim:- To explore about Oauth and create a Oauth based demo website

Source Code

index.html
html
CopyEdit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>EduLearn - Learn Anytime, Anywhere</title>
<link rel="stylesheet" href="public/css/style.css">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<body>
<div class="hero">
<video autoplay loop muted class="background-video">
<source src="public/images/education.mp4"
type="video/mp4">
</video>
<div class="overlay">
<h1 class="fade-in">Welcome to EduLearn</h1>
<p class="fade-in">Explore courses, connect with experts,
and enhance your skills!</p>
<a href="/auth/google" class="btn glow-button">
<i class="fab fa-google"></i> Login with Google
</a>
</div>
</div>
</body>
</html>
authRoute.js
javascript
CopyEdit
const express = require('express');
const passport = require('passport');
const router = express.Router();

// Redirect to Google OAuth

router.get('/google', passport.authenticate('google', { scope:
['profile', 'email'] }));

// Handle callback
router.get('/google/callback',
passport.authenticate('google', { failureRedirect: '/' }),
(req, res) => {
res.redirect('/dashboard');
}
);

// Logout
router.get('/logout', (req, res) => {
req.logout();
res.redirect('/');
});

module.exports = router;

config.js
javascript
CopyEdit
require('dotenv').config();

module.exports = {
google: {
clientID: process.env.GOOGLE_CLIENT_ID,
 clientSecret: process.env.GOOGLE_CLIENT_SECRET,
callbackURL: "/auth/google/callback"
}
};

server.js
javascript
CopyEdit
// Load environment variables FIRST
require("dotenv").config();

const express = require("express");

const session = require("express-session");
const passport = require("passport");
const GoogleStrategy = require("passport-google-oauth20").Strategy;

const app = express();

// Middleware
app.use(express.static("public"));
app.use(express.json());
app.use(express.urlencoded({ extended: true }));

// Session configuration
app.use(
session({
secret: process.env.SESSION_SECRET || "default_secret",
resave: false,
saveUninitialized: true,
})
);

// Initialize Passport
app.use(passport.initialize());
app.use(passport.session());

// Google OAuth Strategy

passport.use(
new GoogleStrategy(
{
clientID: process.env.GOOGLE_CLIENT_ID,
clientSecret: process.env.GOOGLE_CLIENT_SECRET,
callbackURL: process.env.GOOGLE_CALLBACK_URL,
},
(accessToken, refreshToken, profile, done) => {
return done(null, profile);
}
)
);

// Serialize & Deserialize User

passport.serializeUser((user, done) => {
done(null, user);
});
passport.deserializeUser((user, done) => {
done(null, user);
});

// Routes
app.get("/", (req, res) => {
res.send(" 📚 Welcome to EduLearn - Your Learning Companion!");
});

// Google OAuth Login

app.get("/auth/google",
passport.authenticate("google", { scope: ["profile", "email"] })
);

// Google OAuth Callback

app.get(
"/auth/google/callback",
passport.authenticate("google", {
successRedirect: "/dashboard",
failureRedirect: "/",
})
);

// Dashboard Page
app.get("/dashboard", (req, res) => {
if (!req.isAuthenticated()) return res.redirect("/");
res.send(`<h1>Welcome, ${req.user.displayName}!</h1> <a
href='/logout'>Logout</a>`);
});

// Logout
app.get("/logout", (req, res) => {
req.logout(() => {
res.redirect("/");
});
});

// Start Server
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
console.log(` ✅ Server running at http://localhost:${PORT}`);
});

about.ejs
ejs
CopyEdit
<% include('layout'); %>

<section class="about zoom-in">

<h2>About EduLearn</h2>
<p>EduLearn is an innovative platform offering a wide range of
online courses and educational resources.</p>
</section>

index.ejs
ejs
CopyEdit
<% include('layout'); %>

<section class="hero fade-in">

<h1>Welcome to EduLearn</h1>
<p>Discover new skills, gain knowledge, and grow with us.</p>
<a href="/about" class="btn glow-button">Learn More</a>
</section>

layout.ejs
ejs
CopyEdit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>EduLearn</title>
<link rel="stylesheet" href="/css/style.css">
<link rel="stylesheet" href="/css/animations.css">
</head>
<body>
<nav class="navbar">
<a href="/" class="logo">📚 EduLearn</a>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<% if (!user) { %>
<li><a href="/auth/google" class="btn">Login with
Google</a></li>
<% } else { %>
<li><a href="/dashboard">Dashboard</a></li>
<li><a href="/logout" class="btn">Logout</a></li>
<% } %>
</ul>
</nav>
 <div class="container">
<%- body %>
</div>

<script src="/js/script.js"></script>
</body>
</html>

OUTPUT:

Monog DB task
Aim: To do crud opetations with the help of mongodb database
Description:
To implement simple crud operations using mongo b like get put delete
post apis.
Source Code:
npm install express mongoose cors body-parser dotenv
server.js :
require("dotenv").config();
const express = require("express");
const mongoose = require("mongoose");
const cors = require("cors");
const app = express();
const PORT = process.env.PORT || 5000;
// Middleware
app.use(cors());
app.use(express.json());
// MongoDB Connection
mongoose.connect(process.env.MONGO_URI, {
useNewUrlParser: true,
useUnifiedTopology: true,

✅
})

❌
.then(() => console.log(" MongoDB Connected"))
.catch((err) => console.log(" MongoDB Connection Error:", err));
// Define Schema
const TaskSchema = new mongoose.Schema({
title: String,
description: String,
});

🚀
const Task = mongoose.model("Task", TaskSchema);
// Create (POST)
app.post("/tasks", async (req, res) => {
try {
const task = new Task(req.body);
await task.save();
res.status(201).json(task);
} catch (error) {
res.status(400).json({ error: "Failed to create task" });
}

📌
});
// Read (GET)
app.get("/tasks", async (req, res) => {
try {
const tasks = await Task.find();
res.json(tasks);
} catch (error) {
res.status(500).json({ error: "Failed to fetch tasks" });
}

✏️
});
// Update (PUT)
app.put("/tasks/:id", async (req, res) => {
try {
const updatedTask = await Task.findByIdAndUpdate(req.params.id, req.body, { new:
true });
res.json(updatedTask);
} catch (error) {
res.status(400).json({ error: "Failed to update task" });
}

❌
});
// Delete (DELETE)
app.delete("/tasks/:id", async (req, res) => {
try {
await Task.findByIdAndDelete(req.params.id);
res.json({ message: "Task deleted" });
} catch (error) {
res.status(500).json({ error: "Failed to delete task" });
}
});

🚀
// Start Server
app.listen(PORT, () => console.log(` Server running on http://localhost:${PORT}`));
.env :
MONGO_URI=mongodb://localhost:27017/taskDB

BootstrapTask

Aim
To develop a Bootstrap-Based Website to understand Bootstrap concepts clearly.

Description
Create a fully responsive Writer’s Blog website using only Bootstrap components,
including containers, the grid system, and pre-built UI elements. This project will focus
on modern UI design, smooth transitions, and an engaging user experience.
Requirements
Core Sections:

✔ Hero Section – A captivating introduction for the blog.​

✔ Navigation Bar – A well-structured navbar with offcanvas support.​
✔ Footer – A detailed footer with social media links.

Bootstrap Components:

✔ Offcanvas Menus – Sidebar navigation for easy access.​

✔ Modal Pop-ups – Interactive pop-ups for user engagement.​
✔ Carousels – Image sliders for showcasing blog highlights.​
✔ Popovers – Interactive tooltips for better UX.​
✔ Accordions – Collapsible sections for FAQs or categories.​
✔ Website Loader – A smooth loading animation before the page appears.

Styling & Animations:

✔ Utilize Bootstrap’s built-in animations and transitions.​

✔ Use utility classes for spacing, alignment, and responsiveness.

Responsiveness:

✔ Ensure mobile-first design using Bootstrap’s grid system.​

✔ Make sure all components adapt seamlessly to different screen sizes.

Additional UI Elements:

✔ Badges – For categories and highlights.​

✔ Buttons – Stylish and interactive call-to-action buttons.​
✔ Alerts – User notifications and warnings.​
✔ Cards – Beautiful blog post previews.​
✔ Progress Bars – Indicating user reading progress.

SOURCE CODE :

<!-- Navigation -->

<nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top">
<div class="container">
<a class="navbar-brand d-flex align-items-center" href="#">
<i class="bi bi-book-open me-2" style="font-size: 24px;"></i> Writer's Blog
</a>
 <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas"
data-bs-target="#navbarOffcanvas">
<i class="bi bi-list" style="font-size: 24px;"></i>
</button>

<div class="offcanvas offcanvas-end text-bg-primary" id="navbarOffcanvas"

tabindex="-1">
<div class="offcanvas-header">
<h5 class="offcanvas-title">Menu</h5>
<button type="button" class="btn-close btn-close-white"
data-bs-dismiss="offcanvas"></button>
</div>
<div class="offcanvas-body">
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#blog">Blog</a></li>
<li class="nav-item"><a class="nav-link" href="#categories">Categories</a></li>
<li class="nav-item"><a class="nav-link" href="#about">About</a></li>
<li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
</ul>
<form class="d-flex ms-lg-3">
<div class="input-group">
<input class="form-control" type="search" placeholder="Search">
<button class="btn btn-outline-light" type="submit">
<i class="bi bi-search" style="font-size: 18px;"></i>
</button>
</div>
</form>
</div>
</div>
</div>
</nav>

<!-- Hero Section with Carousel -->

<div id="heroCarousel" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="0"
class="active"></button>
<button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="1"></button>
<button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="2"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
 <img
src="https://images.unsplash.com/photo-1455390582262-044cdead277a?ixlib=rb-1.2.1&a
uto=format&fit=crop&w=1920&q=80" class="d-block w-100" alt="Writing">
<div class="carousel-caption d-none d-md-block">
<h2>Welcome to Writer's Blog</h2>
<p>Explore the art of storytelling through our curated collection.</p>
</div>
</div>
<div class="carousel-item">
<img
src="https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?ixlib=rb-1.2.1&au
to=format&fit=crop&w=1920&q=80" class="d-block w-100" alt="Workspace">
<div class="carousel-caption d-none d-md-block">
<h2>Creative Writing Tips</h2>
<p>Learn from experienced writers and improve your craft.</p>
</div>
</div>
<div class="carousel-item">
<img
src="https://images.unsplash.com/photo-1501504905252-228c6f785eeb?ixlib=rb-1.2.1&au
to=format&fit=crop&w=1920&q=80" class="d-block w-100" alt="Library">
<div class="carousel-caption d-none d-md-block">
<h2>Join Our Community</h2>
<p>Connect with fellow writers and share your stories.</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#heroCarousel"
data-bs-slide="prev">
<span class="carousel-control-prev-icon"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#heroCarousel"
data-bs-slide="next">
<span class="carousel-control-next-icon"></span>
<span class="visually-hidden">Next</span>
</button>
</div>

<!-- Alert Section -->

<div class="container mt-4">
<div class="alert alert-info custom-alert alert-dismissible fade show" role="alert">
<strong>New Feature!</strong> Check out our latest writing workshop series.
 <button type="button" class="btn-close" data-bs-dismiss="alert"
aria-label="Close"></button>
</div>
</div>

<!-- Blog Section -->

<section id="blog" class="py-5">
<div class="container">
<h2 class="text-center mb-5">Latest Posts</h2>
<div class="row g-4">
<div class="col-md-4">
<div class="card blog-card h-100">
<img
src="https://images.unsplash.com/photo-1455390582262-044cdead277a?ixlib=rb-1.2.1&a
uto=format&fit=crop&w=800&q=80" class="card-img-top" alt="Blog post">
<div class="card-body">
<span class="badge bg-secondary mb-2">Writing Tips</span>
<h5 class="card-title">Creative Writing 1</h5>
<p class="card-text">Discover the secrets of engaging storytelling and captivate
your readers...</p>
<button class="btn btn-outline-primary">
Read More <i class="bi bi-chevron-right ms-1"></i>
</button>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card blog-card h-100">
<img
src="https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?ixlib=rb-1.2.1&au
to=format&fit=crop&w=800&q=80" class="card-img-top" alt="Blog post">
<div class="card-body">
<span class="badge bg-secondary mb-2">Writing Tips</span>
<h5 class="card-title">Creative Writing 2</h5>
<p class="card-text">Discover the secrets of engaging storytelling and captivate
your readers...</p>
<button class="btn btn-outline-primary">
Read More <i class="bi bi-chevron-right ms-1"></i>
</button>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card blog-card h-100">
 <img
src="https://images.unsplash.com/photo-1501504905252-228c6f785eeb?ixlib=rb-1.2.1&au
to=format&fit=crop&w=800&q=80" class="card-img-top" alt="Blog post">
<div class="card-body">
<span class="badge bg-secondary mb-2">Writing Tips</span>
<h5 class="card-title">Creative Writing 3</h5>
<p class="card-text">Discover the secrets of engaging storytelling and captivate
your readers...</p>
<button class="btn btn-outline-primary">
Read More <i class="bi bi-chevron-right ms-1"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</section>

<!-- Categories Section with Accordion -->

<section id="categories" class="py-5 bg-light">
<div class="container">
<h2 class="text-center mb-5">Writing Categories</h2>
<div class="accordion" id="categoriesAccordion">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button"
data-bs-toggle="collapse" data-bs-target="#collapse1">
Fiction Writing
</button>
</h2>
<div id="collapse1" class="accordion-collapse collapse"
data-bs-parent="#categoriesAccordion">
<div class="accordion-body">
<p>Explore our collection of articles about fiction writing. Learn techniques, tips,
and best practices from experienced writers.</p>
<button class="btn btn-sm btn-primary">Explore Fiction Writing</button>
</div>
</div>
</div>
<!-- Repeat for other categories -->
</div>
</div>
</section>
<!-- Subscribe Modal -->
<div class="modal fade" id="subscribeModal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Subscribe to Our Newsletter</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<form>
<div class="mb-3">
<label for="emailInput" class="form-label">Email address</label>
<input type="email" class="form-control" id="emailInput"
placeholder="name@example.com">
</div>
<div class="mb-3">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="newsletterCheck">
<label class="form-check-label" for="newsletterCheck">
I agree to receive newsletters
</label>
</div>
</
 Typography and Graphic Design

Aim: Build & Deploy a Typography & Graphic Design Showcase Website

Description:
Create a fully functional website that showcases various typographies, scripts, and
graphic designs using Bootstrap for styling. The website should be responsive, visually
appealing, and well-structured. Deploy it using any free hosting provider.
1. Design & Branding
2. Website Structure & Pages (With Bootstrap Elements)
3. Deployment
4. Technology Stack (Mandatory Bootstrap Usage)
5. Bonus Points
6. Submission Requirements

Source Code:-
<!DOCTYPE html>
<html lang="en" data-bs-theme="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Typography & Design Showcase</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
rel="stylesheet">
<!-- Google Fonts -->
<link
href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=
Roboto:wght@300;400;700&display=swap" rel="stylesheet">
<!-- AOS Animation Library -->
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/style.css" rel="stylesheet">
<!-- Additional Google Fonts -->
<link
href="https://fonts.googleapis.com/css2?family=Dancing+Script&family=Kalam&family=
Satisfy&family=Caveat&family=Indie+Flower&family=Pacifico&family=Great+Vibes&famil
y=Courgette&family=Shadows+Into+Light&family=Permanent+Marker&display=swap"
rel="stylesheet">
<!-- Add Font Awesome -->
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body class="bg-dark text-light">
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand d-flex align-items-center" href="#">
<i class="fas fa-film movie-icon-small me-2"></i>
<span>MoviesHub</span>
 </a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#dialogues">Dialogues</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#favorites">Favorites</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
</ul>
</div>
</div>
</nav>

<!-- Hero Section -->

<section id="home" class="hero-section">
<div class="container">
<div class="row min-vh-100 align-items-center justify-content-center text-center">
<div class="col-lg-8" data-aos="zoom-in">
<div class="title-wrapper mb-5">
<i class="fas fa-film movie-icon"></i>
<h1 class="display-1 fw-bold text-light main-title">MoviesHub</h1>
<div class="subtitle-wrapper">
<p class="lead text-gradient">Where Cinema Meets Heart</p>
</div>
</div>
<div class="mt-4" data-aos="fade-up" data-aos-delay="200">
<button class="btn btn-primary btn-lg px-5 me-3">
<i class="fas fa-play-circle me-2"></i>Explore Dialogues
</button>
<button class="btn btn-outline-light btn-lg px-5">
<i class="fas fa-heart me-2"></i>Favorites
</button>
</div>
 </div>
</div>
</div>
</section>

<!-- Dialogues Section -->

<section id="dialogues" class="py-5">
<div class="container">
<div class="section-title" data-aos="fade-up">
<h2>Love Dialogues</h2>
<p class="text-gradient">Timeless words that touch the heart</p>
</div>
<div class="row g-4">
<!-- Dialogue Cards -->
<div class="col-md-6 col-lg-4" data-aos="zoom-in">
<div class="card dialogue-card h-100">
<div class="card-body font-1">
<i class="fas fa-quote-left mb-3"></i>
<p class="card-text">"Nuvvu naa manasu gurinchi aduguthunte, nenu
nee peru chepthanu."</p>
<div class="card-overlay">
<span class="translation">When you ask about my heart, I'll tell your
name</span>
</div>
</div>
</div>
</div>

<div class="col-md-6 col-lg-4" data-aos="zoom-in" data-aos-delay="100">

<div class="card dialogue-card h-100">
<div class="card-body font-2">
<i class="fas fa-quote-left mb-3"></i>
<p class="card-text">"Ninnu choosaka telisindi, prema ante evarini
kalavadam kadu... evariki kavali anipinchatam."</p>
<div class="card-overlay">
<span class="translation">After seeing you, I realized love isn't about
meeting someone... it's about needing someone</span>
</div>
</div>
</div>
</div>

<div class="col-md-6 col-lg-4" data-aos="zoom-in" data-aos-delay="200">

<div class="card dialogue-card h-100">
 <div class="card-body font-3">
<i class="fas fa-quote-left mb-3"></i>
<p class="card-text">"Nenu ninnu preminchaadam okate telusu, kani
ninnu enduku preminchaalo cheppatam kudaradu."</p>
<div class="card-overlay">
<span class="translation">I only know how to love you, but I can't
explain why I love you</span>
</div>
</div>
</div>
</div>

<div class="col-md-6 col-lg-4" data-aos="zoom-in">

<div class="card dialogue-card h-100">
<div class="card-body font-4">
<i class="fas fa-quote-left mb-3"></i>
<p class="card-text">"Naa oopiri kooda nuvvu antukoledhe, nee
gurthule antukunnayi."</p>
<div class="card-overlay">
<span class="translation">Even my breath hasn't touched you, but
your memories have touched me</span>
</div>
</div>
</div>
</div>

<div class="col-md-6 col-lg-4" data-aos="zoom-in" data-aos-delay="100">

<div class="card dialogue-card h-100">
<div class="card-body font-5">
<i class="fas fa-quote-left mb-3"></i>
<p class="card-text">"Nuvvu navvuthunte, naa manasu prematho
padipothundi."</p>
<div class="card-overlay">
<span class="translation">When you smile, my heart falls in
love</span>
</div>
</div>
</div>
</div>

<div class="col-md-6 col-lg-4" data-aos="zoom-in" data-aos-delay="200">

<div class="card dialogue-card h-100">
<div class="card-body font-6">
<i class="fas fa-quote-left mb-3"></i>
 <p class="card-text">"Nuvvu naa kalalu kaadu, kalalalo nijaalu... naa
jeevitham lo oka nijam."</p>
<div class="card-overlay">
<span class="translation">You're not my dreams, but the reality in my
dreams... a truth in my life</span>
</div>
</div>
</div>
</div>

<div class="col-md-6 col-lg-4" data-aos="zoom-in">

<div class="card dialogue-card h-100">
<div class="card-body font-7">
<i class="fas fa-quote-left mb-3"></i>
<p class="card-text">"Naa gunde lo nuvvu oohinchina chota untavani,
nenu oohinchaledu... kani nuvvu akkade unnaru."</p>
<div class="card-overlay">
<span class="translation">I never imagined you'd be in the place you
imagined in my heart... but there you are</span>
</div>
</div>
</div>
</div>

<div class="col-md-6 col-lg-4" data-aos="zoom-in" data-aos-delay="100">

<div class="card dialogue-card h-100">
<div class="card-body font-8">
<i class="fas fa-quote-left mb-3"></i>
<p class="card-text">"Nee kanulalo choosina prathi swapnam, naa
jeevitham lo sacham avvali ani korukuntunna."</p>
<div class="card-overlay">
<span class="translation">Every dream I see in your eyes, I wish
would come true in my life</span>
</div>
</div>
</div>
</div>

<div class="col-md-6 col-lg-4" data-aos="zoom-in" data-aos-delay="200">

<div class="card dialogue-card h-100">
<div class="card-body font-9">
<i class="fas fa-quote-left mb-3"></i>
<p class="card-text">"Ninnu preminchaadam naa jeevitham lo chesina
prathi decision lo nee gurthune undipothundi."</p>
 <div class="card-overlay">
<span class="translation">Loving you remains in every decision I
make in my life</span>
</div>
</div>
</div>
</div>

<div class="col-md-6 col-lg-4" data-aos="zoom-in">

<div class="card dialogue-card h-100">
<div class="card-body font-10">
<i class="fas fa-quote-left mb-3"></i>
<p class="card-text">"Naa prathi oopiri lo nee peru undi, naa prathi aasa
lo nee roopam undi."</p>
<div class="card-overlay">
<span class="translation">Your name is in every breath of mine, your
image is in every hope of mine</span>
</div>
</div>
</div>
</div>

<div class="col-md-6 col-lg-4" data-aos="zoom-in" data-aos-delay="100">

<div class="card dialogue-card h-100">
<div class="card-body font-1">
<i class="fas fa-quote-left mb-3"></i>
<p class="card-text">"Nuvvu leni lokam lo nenu chaala kalaalu
kanipinchavachu... kani naa kanulu matram ninnu thappa vere em choodavu."</p>
<div class="card-overlay">
<span class="translation">In a world without you, I might see many
dreams... but my eyes won't see anything except you</span>
</div>
</div>
</div>
</div>

<div class="col-md-6 col-lg-4" data-aos="zoom-in" data-aos-delay="200">

<div class="card dialogue-card h-100">
<div class="card-body font-2">
<i class="fas fa-quote-left mb-3"></i>
<p class="card-text">"Nuvvu naa manasulo unna vishwasam, naa gunde
lo unna aasha."</p>
<div class="card-overlay">
 <span class="translation">You are the faith in my mind, the hope in
my heart</span>
</div>
</div>
</div>
</div>

<div class="col-md-6 col-lg-4" data-aos="zoom-in">

<div class="card dialogue-card h-100">
<div class="card-body font-3">
<i class="fas fa-quote-left mb-3"></i>
<p class="card-text">"Nee prema naaku deepam laanti di, andhakaranni
daati veluguloki nadipistundi."</p>
<div class="card-overlay">
<span class="translation">Your love is like a light to me, guiding me
from darkness to brightness</span>
</div>
</div>
</div>
</div>

<div class="col-md-6 col-lg-4" data-aos="zoom-in" data-aos-delay="100">

<div class="card dialogue-card h-100">
<div class="card-body font-4">
<i class="fas fa-quote-left mb-3"></i>
<p class="card-text">"Ninnu preminchaadam naaku vintha ledu... adhi
naa manasulo oka goppa aanandham."</p>
<div class="card-overlay">
<span class="translation">Loving you is not strange to me... it's a
great joy in my heart</span>
</div>
</div>
</div>
</div>

<div class="col-md-6 col-lg-4" data-aos="zoom-in" data-aos-delay="200">

<div class="card dialogue-card h-100">
<div class="card-body font-5">
<i class="fas fa-quote-left mb-3"></i>
<p class="card-text">"Naa jeevitham lo nuvvu oka oka chappudu kadu,
prathi chappudu nuvve."</p>
<div class="card-overlay">
<span class="translation">In my life, you're not just a sound, you're
every sound</span>
 </div>
</div>
</div>
</div>

<div class="col-md-6 col-lg-4" data-aos="zoom-in">

<div class="card dialogue-card h-100">
<div class="card-body font-6">
<i class="fas fa-quote-left mb-3"></i>
<p class="card-text">"Nuvvu naku chinnappati nunchi teliyakapoyina
vidhata laanti vadu."</p>
<div class="card-overlay">
<span class="translation">You are like destiny that I didn't know since
childhood</span>
</div>
</div>
</div>
</div>

<div class="col-md-6 col-lg-4" data-aos="zoom-in" data-aos-delay="100">

<div class="card dialogue-card h-100">
<div class="card-body font-7">
<i class="fas fa-quote-left mb-3"></i>
<p class="card-text">"Naa manasu lo prathi sangeetham nuvvu... prathi
maata prema tho gurtupaduthundi."</p>
<div class="card-overlay">
<span class="translation">You are every music in my heart... every
word reminds me with love</span>
</div>
</div>
</div>
</div>

<div class="col-md-6 col-lg-4" data-aos="zoom-in" data-aos-delay="200">

<div class="card dialogue-card h-100">
<div class="card-body font-8">
<i class="fas fa-quote-left mb-3"></i>
<p class="card-text">"Nee prema naa manasulo oka kotha oopiri
ichindi."</p>
<div class="card-overlay">
<span class="translation">Your love gave a new breath to my
heart</span>
</div>
</div>
 </div>
</div>
</div>
</div>
</section>

<!-- Scripts -->

<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></scri
pt>
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script src="js/main.js"></script>
</body>
</html>

OUTPUT:
Deploy link :https://yuvifonts.netlify.app/