Showing preview only (401K chars total). Download the full file or copy to clipboard to get everything.
Repository: vikhyatsingh123/Naruto-Shippuden
Branch: main
Commit: 09c52b15b1a3
Files: 35
Total size: 385.8 KB
Directory structure:
gitextract_1zp2od4h/
├── .github/
│ └── workflows/
│ └── static.yml
├── .gitignore
├── CODE_OF_CONDUCT.md
├── Game.html
├── Game.js
├── Images/
│ ├── Sora b.jfif
│ ├── Tazuna.jfif
│ ├── YoshinoNara.jfif
│ ├── download.jfif
│ └── tsuande.jfif
├── LICENSE
├── README.md
├── about.html
├── audio.js
├── contact.html
├── contact.js
├── contributors.js
├── css/
│ ├── Game.css
│ ├── contact.css
│ ├── index.css
│ ├── style.css
│ └── translate.css
├── index.html
├── index.md
├── js/
│ ├── aboutdarkmode.js
│ ├── indexdarkmode.js
│ ├── lazyload.js
│ ├── scrollEffect.js
│ ├── scrolltotop.js
│ ├── searchbar.js
│ ├── smooth-scroll.js
│ ├── sound.js
│ ├── switch-toggle.js
│ └── translate.js
└── manifest.json
================================================
FILE CONTENTS
================================================
================================================
FILE: .github/workflows/static.yml
================================================
# Simple workflow for deploying static content to GitHub Pages
name: Deploy static content to Pages
on:
# Runs on pushes targeting the default branch
push:
branches: ["main"]
# Allows you to run this workflow manually from the Actions tab
workflow_dispatch:
# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
permissions:
contents: read
pages: write
id-token: write
# Allow one concurrent deployment
concurrency:
group: "pages"
cancel-in-progress: true
jobs:
# Single deploy job since we're just deploying
deploy:
environment:
name: github-pages
url: ${{ steps.deployment.outputs.page_url }}
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v4 # Updated to v4
- name: Setup Pages
uses: actions/configure-pages@v4 # Updated to v4
- name: Upload artifact
uses: actions/upload-pages-artifact@v3 # Updated to v3
with:
# Upload entire repository
path: '.'
- name: Deploy to GitHub Pages
id: deployment
uses: actions/deploy-pages@v4 # Updated to v4
================================================
FILE: .gitignore
================================================
### ignore IDE specific folders ###
.vscode
.idea
### ignore MacOS specific files ###
.DS_Store
================================================
FILE: CODE_OF_CONDUCT.md
================================================
# Contributor Covenant Code of Conduct
## Our Pledge
We as members, contributors, and leaders pledge to make participation in our
community a harassment-free experience for everyone, regardless of age, body
size, visible or invisible disability, ethnicity, sex characteristics, gender
identity and expression, level of experience, education, socio-economic status,
nationality, personal appearance, race, religion, or sexual identity
and orientation.
We pledge to act and interact in ways that contribute to an open, welcoming,
diverse, inclusive, and healthy community.
## Our Standards
Examples of behavior that contributes to a positive environment for our
community include:
* Demonstrating empathy and kindness toward other people
* Being respectful of differing opinions, viewpoints, and experiences
* Giving and gracefully accepting constructive feedback
* Accepting responsibility and apologizing to those affected by our mistakes,
and learning from the experience
* Focusing on what is best not just for us as individuals, but for the
overall community
Examples of unacceptable behavior include:
* The use of sexualized language or imagery, and sexual attention or
advances of any kind
* Trolling, insulting or derogatory comments, and personal or political attacks
* Public or private harassment
* Publishing others' private information, such as a physical or email
address, without their explicit permission
* Other conduct which could reasonably be considered inappropriate in a
professional setting
## Enforcement Responsibilities
Community leaders are responsible for clarifying and enforcing our standards of
acceptable behavior and will take appropriate and fair corrective action in
response to any behavior that they deem inappropriate, threatening, offensive,
or harmful.
Community leaders have the right and responsibility to remove, edit, or reject
comments, commits, code, wiki edits, issues, and other contributions that are
not aligned to this Code of Conduct, and will communicate reasons for moderation
decisions when appropriate.
## Scope
This Code of Conduct applies within all community spaces, and also applies when
an individual is officially representing the community in public spaces.
Examples of representing our community include using an official e-mail address,
posting via an official social media account, or acting as an appointed
representative at an online or offline event.
## Enforcement
Instances of abusive, harassing, or otherwise unacceptable behavior may be
reported to the community leaders responsible for enforcement.
All complaints will be reviewed and investigated promptly and fairly.
All community leaders are obligated to respect the privacy and security of the
reporter of any incident.
## Enforcement Guidelines
Community leaders will follow these Community Impact Guidelines in determining
the consequences for any action they deem in violation of this Code of Conduct:
### 1. Correction
**Community Impact**: Use of inappropriate language or other behavior deemed
unprofessional or unwelcome in the community.
**Consequence**: A private, written warning from community leaders, providing
clarity around the nature of the violation and an explanation of why the
behavior was inappropriate. A public apology may be requested.
### 2. Warning
**Community Impact**: A violation through a single incident or series
of actions.
**Consequence**: A warning with consequences for continued behavior. No
interaction with the people involved, including unsolicited interaction with
those enforcing the Code of Conduct, for a specified period of time. This
includes avoiding interactions in community spaces as well as external channels
like social media. Violating these terms may lead to a temporary or
permanent ban.
### 3. Temporary Ban
**Community Impact**: A serious violation of community standards, including
sustained inappropriate behavior.
**Consequence**: A temporary ban from any sort of interaction or public
communication with the community for a specified period of time. No public or
private interaction with the people involved, including unsolicited interaction
with those enforcing the Code of Conduct, is allowed during this period.
Violating these terms may lead to a permanent ban.
### 4. Permanent Ban
**Community Impact**: Demonstrating a pattern of violation of community
standards, including sustained inappropriate behavior, harassment of an
individual, or aggression toward or disparagement of classes of individuals.
**Consequence**: A permanent ban from any sort of public interaction within
the community.
## Attribution
This Code of Conduct is adapted from the [Contributor Covenant][homepage],
version 2.0, available at
https://www.contributor-covenant.org/version/2/0/code_of_conduct.html.
Community Impact Guidelines were inspired by [Mozilla's code of conduct
enforcement ladder](https://github.com/mozilla/diversity).
[homepage]: https://www.contributor-covenant.org
For answers to common questions about this code of conduct, see the FAQ at
https://www.contributor-covenant.org/faq. Translations are available at
https://www.contributor-covenant.org/translations.
================================================
FILE: Game.html
================================================
<!DOCTYPE html>
<html lang="en-US">
<head>
<link href="https://allfont.net/allfont.css?fonts=ninja-naruto" rel="stylesheet" type="text/css" />
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css" type="text/css">
<link href="https://fonts.cdnfonts.com/css/ninja-naruto" rel="stylesheet">
<link
href="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse4.mm.bing.net%2Fth%3Fid%3DOIP.6qtY7eooQBTfiSVjtrLrGQHaEj%26pid%3DApi&f=1"
rel="icon" type="image/jpeg">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="icon" type="image/png" href="Images/favicon.png">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital@1&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./css/Game.css">
<link rel="stylesheet" href="css/index.css">
<link href="css/translate.css" rel="stylesheet" type="text/css" media="all" />
<title>Naruto</title>
</head>
<style>
.vid {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
background: rgba(0, 0, 0, 0.5);
color: white;
font-size: 30px;
position: relative;
overflow: hidden;
min-height: 50vh;
}
.videosrc {
position: absolute;
z-index: -1;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
min-width: 100%;
min-height: 100%;
}
</style>
<body class="light-mode">
<a href="#" class="to-top">
<i class="fa fa-arrow-up"></i>
</a>
<figure class="sky"></figure>
<div class="loader ">
<header>
<nav class=" sticky navbar navbar-expand-lg navbar-light" style="height: 60px; padding:5px 5px 5px 30px;">
<img src="adi image/naruto-advenimiento-los-animes-cortos-2.png" style="max-height: 100%; width: auto;">
<!-- <a class="navbar-brand brand1 ml-4" href="#" style="color: beige;">Naruto</a> -->
<div class="search">
<div class="icon"></div>
<div class="input">
<input type="text" placeholder="search" id="mysearch" oninput="filterCards()">
</div>
<span class="clear" onclick="clearSearch()"></span>
</div>
<button class="navbar-toggler" class="menu-btn" type="button" data-toggle="collapse"
data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active mx-4">
<a class="nav-link link" href="./index.html">Home</a>
</li>
<li class="nav-item mx-4">
<a class="link nav-link " href="./about.html">About</a>
</li>
<li class="nav-item mx-4">
<a class="link nav-link " href="./contact.html">Contact</a>
</li>
<li class="nav-item mx-4">
<a class="link nav-link " href="./Game.html">Game</a>
</li>
<div class="dark_lang">
<li>
<div>
<button onclick="darkmode()" class="toggle-mode darkmodebutton" id="toggler">🌙
Dark</button>
</div>
</li>
<li class="nav-item mx-4">
<div id="google_translate_element"></div>
<script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en',
autoDisplay: 'true',
layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL
}, 'google_translate_element');
}
</script>
<script
src='//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit'></script>
</li>
</div>
<li class="nav-item mx-4">
<audio id="nyan" src="./sound/naruto.mp3" preload="metadata" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<a class="btn" id="nyan-btn">play / pause <img src="./adi image/sound.png"
class="soundicon">
<script src="./audio.js"></script>
</a>
</li>
</ul>
</div>
</nav>
</header>
<!-- header video -->
<div class="vid">
<a href="#"><img src="adi image/naruto-shippuden.png" style="width: 600px;" class="logo"></a>
<video autoplay loop muted class="videosrc">
<source src="adi image/naruto - Made with Clipchamp.mp4" type="video/mp4">
</video>
</div>
<!-- header video end -->
<main>
<div class="chardiv ">
<img class="heroimg good" src="adi image/Naruto-Uzumaki-No-Background.png" alt="">
<img class="heroimg2 good" src="adi image/png-image.png" alt="">
<img class="vilimg evil" src="adi image/uchiha_madara___png___by_anvmadara_dewr6zj-pre.png" alt="">
<img class="vilimg2 evil" src="adi image/d383ajh-c063f3bf-1787-4484-a75e-5bd8a8892a86.png" alt="">
<h1 class="chars">Game Section</h1>
</div>
<!DOCTYPE html>
<div class="game-body">
<h1 class="game-h1">Naruto Character Guessing Game</h1>
<p class="game-p">Guess the Naruto character by answering hints!</p>
<h2 class="game-h2" id="high-score">Highest Score : 0</h2>
<h3 class="game-h3" id="score">Score : 0</h3>
<button class="game-button" id="start" onclick="startGame()">Start Game</button>
<p class="game-p" id="hint"></p>
<input class="game-input" type="text" id="guessInput">
<button class="game-button" id="stop" onclick="checkAnswer()">Submit Guess</button>
<div class="game-div" id="imageContainer"></div>
<p class="game-p" id="message"></p>
</div>
</main>
<audio src="./sound/naruto.mp3"></audio>
<footer class="footer">
Developed and Designed By <span id="idblink" onclick="tap()" style="cursor: pointer;"><u>Vikhyat
Singh</u></span> | ©
All Rights Reserved
<h5>Follow Me on : </h5>
<div class="icon">
<a href="https://facebook.com/vikhyatsingh123/" class="fa fa-facebook" target="_blank"></a>
<a href="#" class="fa fa-twitter"></a>
<a href="https://github.com/vikhyatsingh123/" class="fa fa-github" target="_blank"></a>
<a href="https://www.linkedin.com/in/vikhyat-singh-337777197/" class="fa fa-linkedin"
target="_blank"></a>
<a href="https://www.instagram.com/vikhyat552/" class="fa fa-instagram" target="_blank"></a>
</div>
</footer>
<script src="Game.js"></script>
<script>
function tap() {
const link = document.getElementById('idblink')
window.location.href = "https://github.com/vikhyatsingh123"
}
</script>
<!-- <footer>
<nav class="navbar navbar-expand-lg navbar-light nav1">
<p class="mx-auto text-light font-weight-lighter">© Developed By - <a
href="https://github.com/vikhyatsingh123">Vikhyat Singh</a></p>
</nav>
</footer> -->
<script src="js/sound.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous">
</script>
<script src="js/searchbar.js"></script>
<script src="js/scrollEffect.js"></script>
<script src="js/lazyload.js"></script>
<script src="js/scrolltotop.js"></script>
<script src="js/switch-toggle.js"></script>
<script>
/* ------- Scroll To Top Button -------*/
const toTop = document.querySelector(".to-top");
window.addEventListener("scroll", () => {
if (window.pageYOffset > 400) {
toTop.classList.add("active");
} else {
toTop.classList.remove("active");
}
});
</script>
<script>
function darkmode() {
// console.log("hello");
var element2 = document.querySelector("body");
const body = document.body;
body.classList.toggle("light-mode");
body.classList.toggle("dark-mode");
if (element2.classList.contains("light-mode")) {
document.querySelector("#toggler").innerHTML = "🌞 Light"
}
else {
document.querySelector("#toggler").innerHTML = "🌙 Dark";
}
}
</script>
<script>
function filterCards() {
var input, filter, cards, card, title, i, txtValue;
input = document.getElementById('mysearch');
filter = input.value.toUpperCase();
cards = document.getElementsByClassName('flip-card');
for (i = 0; i < cards.length; i++) {
card = cards[i];
title = card.querySelector('.card-title');
txtValue = title.textContent || title.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
card.style.display = '';
} else {
card.style.display = 'none';
}
}
}
function clearSearch() {
document.getElementById('mysearch').value = '';
filterCards(); // Clearing the search should show all cards
}
</script>
</body>
</html>
================================================
FILE: Game.js
================================================
//data
const characters = [
{
name: ["Naruto", "Naruto Uzumaki", "Uzumaki Naruto"],
hints: [
"A child born during a time of conflict and upheaval in the ninja world.",
"Sought to realize peace, believing in achieving it through pain and suffering.",
"Became a beacon of hope and understanding for many, inspiring change through unwavering determination.",
"Stood against former comrades, challenging their ideals and seeking to break the cycle of hatred.",
"Become hokage is his dream."
],
image: "./Images/naruto_ai.jpg"
},
{
name: ["Sasuke", "Sasuke Uchiha", "Uchiha Sasuke"],
hints: [
"Bearer of the Uchiha name, veiled in mystery and tragedy.",
"Possesses a compelling Sharingan, a mirror of his brother's power.",
"Haunted by the shadows of a dark past, fostering vengeance.",
"Torn between duty, family ties, and a pursuit for retribution.",
"A skilled wielder of Chidori, channeling lightning's might."
],
image: "./Images/sasuke_ai.jpg"
},
{
name: ["Sakura", "Sakura Haruno", "Haruno Sakura"],
hints: [
"A female ninja adept in medical techniques, rising during a turbulent era",
"Possesses remarkable strength and healing abilities",
"Grew from a young, ambitious girl into a powerful force within her village",
"Has exceptional chakra control",
"Early rivalry and competition with a close friend"
],
image: "./Images/sakura.jpg"
},
{
name: ["Kakashi", "Kakashi Hatake", "Hatake Kakashi"],
hints: [
"The theme of loss, legacy, and redemption is strongly associated with this character",
"This character is known for his proficiency in using the Sharingan",
"Chidori user",
"Part of team 7",
"He is recognized for his silver hair"
],
image: "./Images/Kakashi_Hatake.png"
},
{
name: ["Jiraiya"],
hints: [
"A teacher leaving behind a significant legacy for the future.",
"Holds a special bond with a former teammate",
"Summons otherworldly allies",
"Part of an esteemed trio",
"pervy"
],
image: "./Images/287665-jiraiya_1.jpg"
},
{
name: ["Orochimaru"],
hints: [
"Formerly of the Hidden Leaf Village",
"Wants a body for more power",
"Former member of the Legendary trio",
"Uses snake-related jutsu",
"Seeks immortality"
],
image: "./Images/orochimaru.jpg"
},
{
name: ["Hinata", "Hinata Hyuga", "Hyuga Hinata"],
hints: [
"Member of the Hyuga clan",
"Byakugan user",
"Develops the Gentle Fist technique",
"Has a gentle disposition",
"Has a crush on Naruto"
],
image: "./Images/hinata_hyuga.jpg"
},
{
name: ["Shikamaru", "Shikamaru Nara", "Nara Shikamaru"],
hints: [
"Lazy but highly intelligent",
"Strategic thinker",
"Part of Team 10",
"Shadow Manipulation Jutsu user",
"Becomes a Chunin during the Chunin Exams"
],
image: "./Images/shikamaru.jpg"
},
{
name: ["Gaara"],
hints: [
"Jinchuriki",
"Had a traumatic childhood",
"Initially an antagonist",
"from the Hidden Sand Village",
"Has control over sand"
],
image: "./Images/gaara.jpg"
},
{
name: ["Rock Lee", "Lee", "Rock"],
hints: [
"Taijutsu specialist",
"Believes in hard work over natural talent",
"Wears green jumpsuit",
"Cannot use ninjutsu or genjutsu",
"Disciple of Might Guy",
],
image: "./Images/Rock-Lee.jpg"
},
{
name: ["Neji", "Neji Hyuga", "Hyuga Neji"],
hints: [
"Member of the Hyuga clan",
"Byakugan user",
"Develops the Gentle Fist technique",
"Fate determined by destiny",
"Initially holds a grudge against Hinata"
],
image: "./Images/neji-hyuga.jpg"
},
{
name: ["Tenten"],
hints: [
"Weapon specialist",
"Part of Team Guy",
"Proficient in various ninja tools",
"Uses summoning scrolls",
"Aspires to be like legendary weaponsmiths"
],
image: "./Images/Tenten.jpg"
},
{
name: ["Kiba", "Kiba Inuzuka", "Inuzuka Kiba"],
hints: [
"Member of the Inuzuka clan",
"Uses beast-like taijutsu",
"Has enhanced sense of smell",
"Has a dog companion",
"Part of Team 8"
],
image: "./Images/kiba inuzuka.jpg"
},
{
name: ["Shino", "Shino Aburame", "Aburame Shino"],
hints: [
"Member of the Aburame clan",
"Uses insects as weapons",
"Has a stoic personality",
"Part of Team 8",
"Masters the Parasitic Giant Beetle Jutsu"
],
image: "./Images/Shino Aburame.jpg"
},
{
name: ["Ino", "Ino Yamanaka", "Yamanaka Ino"],
hints: [
"Uses her family's clan techniques",
"Has a rivalry with a close friend",
"Part of Team 10",
"Has mind-transfer jutsu",
"Works at a flower shop"
],
image: "./Images/1701241-ino.jpg"
},
{
name: ["Choji", "Choji Akimichi", "Akimichi Choji"],
hints: [
"Part of Team 10",
"Has a love for food",
"Uses Human Bullet Tank jutsu",
"Member of the Akimichi clan",
"Struggles with self-confidence"
],
image: "./Images/choji.jpg"
},
{
name: ["Tsunade"],
hints: [
"Has incredible strength",
"Master of medical ninjutsu",
"Has a fear of blood",
"Legendary Sannin",
"Fifth Hokage"
],
image: "./Images/Tsunadexx.png"
},
{
name: ["Jugo"],
hints: [
"Possesses Sage Transformation",
"Has the ability to absorb natural energy",
"Has a volatile and unpredictable nature",
"Cursed with uncontrollable rage",
"Part of Sasuke's team"
],
image: "./Images/Jugo.png"
},
{
name: ["Suigetsu"],
hints: [
"Swordsman",
"Wants to collect all the swords",
"Desires to reform the Seven Ninja Swordsmen",
"Can turn his body into liquid",
"Part of Sasuke's team"
],
image: "./Images/Suigetsu.jpeg"
},
{
name: ["Karin"],
hints: [
"Part of Sasuke's team",
"Has a past with Orochimaru",
"Fiercely loyal to Sasuke",
"Has sensory abilities",
"Has healing abilities"
],
image: "./Images/Karin.png"
},
{
name: ["Itachi", "Itachi Uchiha", "Uchiha Itachi"],
hints: [
"Former ANBU member",
"Give life for village",
"Has the Mangekyo Sharingan",
"Certain Someone",
"Massacred the Uchiha clan"
],
image: "./Images/itachi-uchiha-naruto.jpg"
},
{
name: ["Kisame"],
hints: [
"Swordsman",
"Partnered with Itachi",
"Member of the Akatsuki",
"Has shark-like features",
"Uses Samehada as his weapon"
],
image: "./Images/kisame_hoshigaki.jpg"
},
{
name: ["Pain", "Nagato", "Yahiko"],
hints: [
"member of the Akatsuki",
"Former student of Jiraiya",
"Possesses the Rinnegan",
"Believes in achieving peace",
"Uses the Six Paths of Pain technique"
],
image: "./Images/1688202-nagato_six_paths_of__pain.jpg"
},
{
name: ["Konan"],
hints: [
"member of the Akatsuki",
"Former student of Jiraiya",
"Devoted to Yahiko's ideals",
"Childhood friend of Yahiko",
"Uses paper-based jutsu",
],
image: "./Images/Konan.jpg"
},
{
name: ["Deidara"],
hints: [
"Member of the Akatsuki",
"Fights using long-range techniques",
"Artistic approach to battles",
"Uses explosive clay as a weapon",
"Has mouths on his palms",
],
image: ",/Images/deidara69.jpg"
},
{
name: ["Sai"],
hints: [
"Part of Team 7",
"Uses ink-based jutsu",
"Initially lacks emotions",
"Skilled in espionage",
"Joins Team 7 after Sasuke's departure"
],
image: "./Images/Sai_Infobox.png"
},
{
name: ["Yamato"],
hints: [
"An ANBU captain",
"Has Wood Style jutsu",
"Trained to suppress Nine-Tails' chakra in Naruto",
"Assigned to Team 7 as a replacement for Kakashi",
"Uses Hashirama Senju's cells"
],
image: "./Images/326748-yamato.jpg"
},
{
name: ["Kurenai", "Kurenai Yuhi", "Yuhi Kurenai"],
hints: [
"Genjutsu specialist",
"Part of Team 8",
"Has a child with Asuma",
"Trains Hinata in genjutsu",
"Initially has a romantic interest in Asuma"
],
image: "./Images/KurenaiYuhi.jpg"
},
{
name: ["Asuma", "Asuma Sarutobi", "Sarutobi Asuma"],
hints: [
"Son of the Hokage",
"Part of Team 10",
"Wields trench knives",
"Has a child with Kurenai",
"Trains Shikamaru in shogi"
],
image: "./Images/322897-asuma_sarutobi.jpg"
},
{
name: ["Iruka", "Iruka Umino", "Umino Iruka"],
hints: [
"Academy instructor",
"Cares for Naruto like a father figure",
"Survivor of the Nine-Tails attack",
"Kind-hearted and understanding",
"Helps Naruto graduate from the Academy"
],
image: "./Images/Iruka-Umino.jpeg"
},
{
name: ["Zabuza"],
hints: [
"Demon of the Hidden Mist",
"Carries a massive sword",
"Hired as a mercenary",
"Has a strong bond with Haku",
"Fights Kakashi during the Land of Waves arc"
],
image: "./Images/zabuza.jpg"
},
{
name: ["Haku"],
hints: [
"Has ice-based kekkei genkai",
"Assists Zabuza",
"Seems delicate but is a skilled fighter",
"Feels a strong loyalty to Zabuza",
"Has tragic past"
],
image: "./Images/Casual_Haku.png"
}
];
//Game
let currentCharacter;
let score = 0;
let highestScore = 0;
let attemptCount = 0;
function startGame() {
document.getElementById('score').innerText = `Score : ${score}`;
document.getElementById('message').textContent = "";
document.getElementById('imageContainer').innerHTML = "<div></div>";
attemptCount = 0;
const randomIndex = Math.floor(Math.random() * characters.length);
currentCharacter = characters[randomIndex];
console.log(currentCharacter);
document.getElementById('hint').textContent = `Hint 1: ${currentCharacter.hints[0]}`;
}
function checkAnswer() {
const guess = document.getElementById('guessInput').value.toLowerCase();
console.log(guess);
if (currentCharacter.name.some((el) => (el.toLowerCase() == guess))) {
document.getElementById("start").innerText = "Continue Playing";
score += (25 - (attemptCount * 5));
highestScore = Math.max(highestScore, score);
document.getElementById('high-score').innerText = `Highest Score : ${highestScore}`;
document.getElementById('score').innerText = `Score : ${score}`;
document.getElementById('message').textContent = "Congratulations! You guessed it right!";
const characterImage = document.createElement("img");
characterImage.src = currentCharacter.image;
characterImage.id = "game-img";
document.getElementById('imageContainer').appendChild(characterImage);
document.getElementById('hint').textContent = '';
} else {
attemptCount++;
if (attemptCount >= 5) {
document.getElementById('message').textContent = `Sorry! You've run out of attempts. The correct answer is ${currentCharacter.name[0]}`;
highestScore = Math.max(highestScore, score);
score = 0;
document.getElementById('score').innerText = `Score : ${score}`;
document.getElementById('high-score').innerText = `Highest Score : ${highestScore}`;
document.getElementById("start").innerText = "Start Game";
document.getElementById('hint').textContent = '';
} else {
const hintNumber = attemptCount + 1;
document.getElementById('hint').textContent = `Hint ${hintNumber}: ${currentCharacter.hints[hintNumber - 1]}`;
document.getElementById('message').textContent = "Wrong answer! Try again.";
}
}
document.getElementById('guessInput').value = '';
}
================================================
FILE: LICENSE
================================================
MIT License
Copyright (c) 2026 vikhyat singh
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
================================================
FILE: README.md
================================================
Hacktoberfest, in its 10th year, is a month-long celebration of open source software run by DigitalOcean. It is a great opportunity for everyone, from seasoned developers to students and code newbies, from technical writers to UX designers, to contribute to open source communities and develop your skills, with the perks of winning limited edition items. You can do this in a variety of ways:
* Prepare and share your project for collaboration
* Contribute to the betterment of a project via pull requests
* Organize an event
* Mentor others
* Donate directly to open source projects
<br>
<br>
# Naruto-Shippuden
<img width="2295" height="504" alt="series image" src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwallpapercave.com%2Fwp%2Fwp3170365.jpg&f=1&nofb=1">
There is no doubt that most of our childhood was spent watching anime, especially Naruto; we have seen and experienced it all. With Hacktoberfest 2025 coming up and being one of the people who would participate for the very first time, I decided to create this repository that's actually a very basic web-page that let the user view and add their favourite characters.
You can find all types of characters on https://www.giantbomb.com/naruto-uzumaki/3005-790/friends/ and on https://www.giantbomb.com/naruto-uzumaki/3005-790/enemies/
# Contents of the Webpage
1. index.html - Contains the content of the main/home page.
2. index.css - Contains the styling given to the home page.
3. about.html - Contains a little information about me.
# What can you contribute?
There is always something to contribute to a project, whether you are a novice or a veteran. In this project, you can add your favorite character as a card to the website! Or maybe you didn't like the line that you are reading right now and want to change that. Sure! Why not?
# How can you contribute?
To contribute in Hacktoberfest2025, checkout the given link and win hacktoberfest digital kits ...
https://hacktoberfest.com/
And That's It!
Follow these steps to make your very first Pull request.
# But what if I don't know how to add cards? :(
Not everyone is aware of every tool present in the world no matter how easy or complex it is. It's also not necessary to know each and every tool out there. Use the code below to add your own card!
<b>Code -</b>
<!-- Hero [character name] card start-->
<div class="flip-card good">
<div class="flip-card-inner">
<div class="flip-card-front">
<h2 class="card-title">[name of character]</h2>
<img data-src=[image-link] alt=[name of character] height="300px" width="300px" class="img_card">
</div>
<div class="flip-card-back">
<p class="card-text">[Main description about character]</p>
<p>[some more description about character]</p>
</div>
</div>
</div>
<!-- Hero [character name] card end-->
<!-- Villain [character name] card start-->
<div class="flip-card evil">
<div class="flip-card-inner">
<div class="flip-card-front">
<h2 class="card-title">[name of character]</h2>
<img data-src=[image-link] alt=[name of character] height="300px" width="300px" class="img_card">
</div>
<div class="flip-card-back">
<p class="card-text">[Main description about character]</p>
<p>[some more description about character]</p>
</div>
</div>
</div>
<!-- Villain [character name] card end-->
NOTE: add image to the Images folder if not present already, and then provide the src in the img tag.
Copy this code and paste it into the index.html file to make your changes. Try and test it on your own system and then create a Pull request. You can adjust height of image of the character so that it will fit in the card.
# Congratulations!
Congratulation! You just made your first pull request, and if it gets merged, you can view it using the Link provided above!
# Our Amazing Contributors ⭐
<a href="https://github.com/vikhyatsingh123/Naruto-Shippuden/graphs/contributors">
<img src="https://contrib.rocks/image?repo=vikhyatsingh123/Naruto-Shippuden" />
</a>
================================================
FILE: about.html
================================================
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css" type="text/css">
<link href="https://fonts.googleapis.com/css2?family=Righteous&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css"
integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous" />
<link rel="icon" type="image/png" href="Images/favicon.png">
<title>Naruto-About</title>
<link rel="shortcut icon" href="./Images/favicon.ico" />
<link rel="stylesheet" href="css/index.css">
<link rel="stylesheet" href="css/contact.css">
<link href="css/translate.css" rel="stylesheet" type="text/css" media="all" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
</head>
<style>
.img1{
position: absolute;
left: 0;
bottom:0;
}
.img2{
position: absolute;
right: 0;
bottom:0;
}
</style>
<body class="light-mode">
<header>
<nav class=" animate__animated animate__fadeInDown navbar fixed-top navbar-expand-lg navbar-light" style="height: 60px; padding:5px 5px 5px 30px;">
<img src="adi image/naruto-advenimiento-los-animes-cortos-2.png" style="max-height: 100%; width: auto;">
<!-- <a class="navbar-brand brand1 ml-4" href="#" style="color: beige;">Naruto</a> -->
<span class="clear" onclick="document.getElementById('mysearch').value = ' '"></span>
</div>
<button class="navbar-toggler" class="menu-btn" type="button" data-toggle="collapse"
data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item mx-4">
<a class="nav-link link" href="./index.html" >Home</a>
</li>
<li class="nav-item mx-4">
<a class="link nav-link " href="./about.html" >About</a>
</li>
<li class="nav-item mx-4">
<a class="link nav-link " href="./contact.html" >Contact</a>
</li>
<li class="nav-item mx-4">
<a class="link nav-link " href="./Game.html" >Game</a>
</li>
<div class="dark_lang">
<li>
<div>
<button onclick="darkmode()" class="toggle-mode darkmodebutton" id="toggler">🌙
Dark</button>
</div>
</li>
<li class="nav-item mx-4">
<div id="google_translate_element"></div>
<script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en',
autoDisplay: 'true',
layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL
}, 'google_translate_element');
}
</script>
<script src='//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit'></script>
</li>
</div>
</ul>
</div>
</nav>
</header>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto" style="margin-left: 78%;">
<li class="nav-item active mx-4">
<a class="nav-link" href="./index.html" style="color: beige;">Home</a>
</li>
<li class="nav-item mx-4">
<a class="nav-link" href="./about.html" style="color: beige;">About</a>
</li>
<li class="nav-item mx-4">
<button id="darkmode-button">dark mode</button>
</li>
</div>
</nav>
<!--start-->
<main>
<div class="container">
<h1 class="about-title animate__animated animate__fadeInUp animate__slow">
This Project Is Developed by Vikhyat Singh
</h1>
<div class="about-content animate__animated animate__fadeInUp animate__slow" style="position: relative;">
<p>
Hey! I am a Final Year Student. I'm currently pursuing B.Tech degree in Electronics and
Communication Engineering from National Institute of Technology Patna.I love to learn and do code. I
also like Web development and full MERN Stack Web Developer and a Competitive Programmer that's the
reason, I created this project as a starter Repository for Hacktoberfest2020 for the first-time
participants who can learn how to make their first pull request through this project.
</p>
<img class="img1" src="adi image/7cf0fd9c161fe42a044c2eac43c44f6d.gif" alt="">
<img class="img2" src="adi image/narutogif.gif" alt="">
</div>
<div class="row row1 inner-container">
<div class="col-lg-4 col-sm-8 about_card animate__animated animate__backInLeft animate__delay-1s">
<div class="text-white">
<div id="one" class="card-body about-card">
<h5 class="card-title1">
<i class="fab fa-linkedin"></i> LinkedIn
</h5>
<p class="card-text font-weight-lighter">Let's Connect!</p>
<a href="https://www.linkedin.com/in/vikhyat-singh-337777197/"
class="btn btn-outline-light btn-sm">LinkedIn</a>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-8 about_card animate__animated animate__backInRight animate__delay-1s">
<div class="text-white">
<div id="two" class="card-body about-card">
<h5 class="card-title1"><i class="fab fa-github"></i> Github</h5>
<p class="card-text font-weight-lighter">Check out my Github Profile!</p>
<a href="https://github.com/vikhyatsingh123/"
class="btn btn-outline-light btn-sm">Github</a>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-8 about_card animate__animated animate__backInLeft animate__delay-1s">
<div class="text-white">
<div id="three" class="card-body about-card">
<h5 class="card-title1">
<i class="fab fa-instagram"></i> Instagram
</h5>
<p class="card-text font-weight-lighter">Let's follow each other!</p>
<a href="https://www.instagram.com/vikhyat552?r=nametag/"
class="btn btn-outline-light btn-sm">Instagram</a>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-8 about_card animate__animated animate__backInRight animate__delay-1s">
<div class="text-white">
<div id="four" class="card-body about-card">
<h5 class="card-title1"><i class="fab fa-facebook"></i> Facebook</h5>
<p class="card-text font-weight-lighter">Check out my Facebook Profile!</p>
<a href="https://facebook.com/vikhyatsingh123/"
class="btn btn-outline-light btn-sm">Facebook</a>
</div>
</div>
</div>
</div>
</div>
</main>
<div class="contributors">
<h1>Our Valuable Contributors</h1>
<div id="contributor"></div>
</div>
<script src="contributors.js"></script>
<!-- <footer>
<nav class="navbar navbar-expand-lg navbar-light nav1">
<p class="mx-auto text-light font-weight-lighter">©right Developed By- Vikhyat Singh</p>
</nav>
</footer> -->
<footer class="footer" style="padding: 20px;">
<marquee> Developed and Designed By <span id="idblink" onclick="tap()" style="cursor: pointer;"><u>Vikhyat
Singh</u></span> | © All
Rights Reserved</marquee>
</footer>
<script>
function darkmode() {
console.log("hello");
var element2 = document.querySelector("body");
const body = document.body;
body.classList.toggle("light-mode");
body.classList.toggle("dark-mode");
if (element2.classList.contains("light-mode")) {
document.querySelector("#toggler").innerHTML = "🌞 Light"
}
else {
document.querySelector("#toggler").innerHTML = "🌙 Dark";
}
}
</script>
<script>
function tap() {
const link = document.getElementById('idblink')
window.location.href = "https://github.com/vikhyatsingh123"
}
</script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns"
crossorigin="anonymous"></script>
<!-- <script src="js/aboutdarkmode.js"></script> -->
</body>
</html>
================================================
FILE: audio.js
================================================
var nyan = document.getElementById("nyan");
var nyanBtn = document.getElementById("nyan-btn");
function playPause(song) {
if (song.paused && song.currentTime >= 0 && !song.ended) {
song.play();
} else {
song.pause();
}
}
function reset(btn, song) {
if (btn.classList.contains("playing")) {
btn.classList.toggle("playing");
}
song.pause();
song.currentTime = 0;
}
function progress(btn, song) {
setTimeout(function () {
var end = song.duration;
var current = song.currentTime;
var percent = current / (end / 100);
//check if song is at the end
if (current == end) {
reset(btn, song);
}
//set inset box shadow
btn.style.boxShadow =
"inset " +
btn.offsetWidth * (percent / 100) +
"px 0px 0px 0px rgba(0,0,0,0.125)";
//call function again
progress(btn, song);
}, 1000);
}
nyanBtn.addEventListener("click", function () {
nyanBtn.classList.toggle("playing");
playPause(nyan);
progress(nyanBtn, nyan);
});
================================================
FILE: contact.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://allfont.net/allfont.css?fonts=ninja-naruto" rel="stylesheet" type="text/css" />
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css" type="text/css">
<link href="https://fonts.cdnfonts.com/css/ninja-naruto" rel="stylesheet">
<link
href="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse4.mm.bing.net%2Fth%3Fid%3DOIP.6qtY7eooQBTfiSVjtrLrGQHaEj%26pid%3DApi&f=1"
rel="icon" type="image/jpeg">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="icon" type="image/png" href="Images/favicon.png">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital@1&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/index.css">
<link href="css/translate.css" rel="stylesheet" type="text/css" media="all" />
<link rel="stylesheet" href="css/contact.css" />
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
<title>Naruto-Contact</title>
</head>
<body class="contact_body light-mode" style="position: relative;">
<header>
<nav class=" animate__animated animate__fadeInDown navbar fixed-top navbar-expand-lg navbar-light" style="height: 60px; padding:5px 5px 5px 30px;">
<img src="adi image/naruto-advenimiento-los-animes-cortos-2.png" style="max-height: 100%; width: auto;">
<!-- <a class="navbar-brand brand1 ml-4" href="#" style="color: beige;">Naruto</a> -->
<button class="navbar-toggler" class="menu-btn" type="button" data-toggle="collapse"
data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item mx-4">
<a class="nav-link link" href="./index.html" >Home</a>
</li>
<li class="nav-item mx-4">
<a class="link nav-link " href="./about.html" >About</a>
</li>
<li class="nav-item active mx-4">
<a class="link nav-link " href="./contact.html" >Contact</a>
</li>
<li class="nav-item active mx-4">
<a class="link nav-link " href="./Game.html" >Game</a>
</li>
<li>
<div>
<button onclick="darkmode()" class="toggle-mode darkmodebutton" id="toggler">🌙
Dark</button>
</div>
</li> <li class="nav-item mx-4">
<div id="google_translate_element"></div>
<script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en',
autoDisplay: 'true',
layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL
}, 'google_translate_element');
}
</script>
<script src='//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit'></script>
</li>
</ul>
</div>
</nav>
</header>
<h1 class=" animate__animated animate__fadeInUp animate__slow">Naruto Friends, Get In Touch with us</h1>
<img class="img1 animate__animated animate__fadeInLeft" src="adi image/kakashi.png" alt="">
<img class="img2 animate__animated animate__fadeInRight" src="adi image/contact_naruto.png " alt="">
<div class="wpcf7 container animate__animated animate__fadeInUp animate__slow" id="wpcf7-f156-p143-o1 formwrap" >
<form
action="https://formsubmit.co/vikhyatsingh628@gmail.com"
method="POST"
class="contact__form wpcf7-form "
novalidate="novalidate"
>
<input type="hidden" name="_captcha" value="false" />
<input
type="hidden"
name="_subject"
value="New submission!"
class="subject"
/>
<input type="hidden" name="_template" value="table" />
<div class="msg__status"></div>
<div style="display: none">
<input type="hidden" name="_wpcf7" value="156" />
<input type="hidden" name="_wpcf7_version" value="3.7.2" />
<input type="hidden" name="_wpcf7_locale" value="en_US" />
<input
type="hidden"
name="_wpcf7_unit_tag"
value="wpcf7-f156-p143-o1"
/>
<input type="hidden" name="_wpnonce" value="d1da331d93" />
</div>
<p>
<span class="wpcf7-form-control-wrap Name">
<input
type="text"
name="Name"
size="40"
class="nameinput wpcf7-form-control wpcf7-text wpcf7-validates-as-required"
aria-required="true"
aria-invalid="false"
placeholder="Name"
/>
</span>
<span class="wpcf7-form-control-wrap Email">
<input
type="email"
name="Email"
size="40"
class="emailinput wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email"
aria-required="true"
aria-invalid="false"
placeholder="Email"
/>
</span>
<span class="wpcf7-form-control-wrap Message">
<textarea
name="Message"
cols="40"
rows="10"
class="wpcf7-form-control wpcf7-textarea"
aria-invalid="false"
placeholder="Message"
></textarea>
</span>
<input
type="submit"
value="Send"
class="wpcf7-form-control wpcf7-submit btn"
style="float: none; margin-left: 165px;"
/>
</p>
<div class="wpcf7-response-output wpcf7-display-none"></div>
</form>
</div>
<footer class="footer">
Developed and Designed By <span id="idblink" onclick="tap()" style="cursor: pointer;"><u>Vikhyat
Singh</u></span> | ©
All Rights Reserved
<h5>Follow Me on : </h5>
<div class="icon">
<a href="https://www.facebook.com/vikhyat.singh.5/" class="fa fa-facebook" target="_blank"></a>
<a href="https://twitter.com/VikhyatSingh6" class="fa fa-twitter" target="_blank"></a>
<a href="https://github.com/vikhyatsingh123" class="fa fa-github" target="_blank"></a>
<a href="https://www.linkedin.com/in/vikhyat-singh-a8b5b31b6/" class="fa fa-linkedin"
target="_blank"></a>
<a href="https://www.instagram.com/vikhyat552/" class="fa fa-instagram" target="_blank"></a>
</div>
</footer>
<script>
function tap() {
const link = document.getElementById('idblink')
window.location.href = "https://github.com/vikhyatsingh123"
}
</script>
<script>
function darkmode() {
// console.log("hello");
var element2 = document.querySelector("body");
const body = document.body;
body.classList.toggle("light-mode");
body.classList.toggle("dark-mode");
if (element2.classList.contains("light-mode")) {
document.querySelector("#toggler").innerHTML = "🌞 Light"
}
else {
document.querySelector("#toggler").innerHTML = "🌙 Dark";
}
}
</script>
<script src="./contact.js"></script>
</body>
</html>
================================================
FILE: contact.js
================================================
// Sending Data to Mail
// Listenig to form
const contactForm = document.querySelector(".contact__form");
async function handleFormSubmit(event) {
event.preventDefault();
const subject = document.querySelector(".subject");
const msgStatus = document.querySelector(".msg__status");
subject.value = "Msg via Naruto Webpage";
const form = event.currentTarget;
const url = form.action;
try {
const formData = new FormData(form);
const fetchOptions = {
method: contactForm.method,
headers: {
Accept: "application/json",
},
body: formData,
};
await fetch(url, fetchOptions);
console.log(url);
if (url=="https://formsubmit.co/vikhytsingh628@gmail.com"){
await Swal.fire({
title: "Success!",
text: "Message Sent Successfully!",
icon: "success"
});
}
else{
await Swal.fire({
icon: "error",
title: "Oops...",
text: "Something went wrong!"
});
}
form.reset();
} catch (err) {
msgStatus.innerHTML =
"Oops! There was a problem delivering your message, please contact via other means.";
msgStatus.style.display = "block";
msgStatus.style.textAlign = "center";
setTimeout(() => {
msgStatus.style.display = "none";
}, 4000);
form.reset();
}
}
contactForm.addEventListener("submit", handleFormSubmit);
================================================
FILE: contributors.js
================================================
const cont = document.getElementById('contributor');
// Replace these with the owner and repository name of the repository
const owner = 'vikhyatsingh123';
const repoName = 'Naruto-Shippuden';
// Function to fetch contributors for a given page number
async function fetchContributors(pageNumber) {
const perPage = 100; // You can adjust this based on your needs
const url = `https://api.github.com/repos/${owner}/${repoName}/contributors?page=${pageNumber}&per_page=${perPage}`;
const response = await fetch(url);
if (!response.ok) {
throw new Error(`Failed to fetch contributors data. Status code: ${response.status}`);
}
const contributorsData = await response.json();
return contributorsData;
}
// Function to fetch all contributors
async function fetchAllContributors() {
let allContributors = [];
let pageNumber = 1;
try {
while (true) {
const contributorsData = await fetchContributors(pageNumber);
if (contributorsData.length === 0) {
break;
}
allContributors = allContributors.concat(contributorsData);
pageNumber++;
}
// Display contributors in the honeycomb-like layout
allContributors.forEach((contributor) => {
const contributorCard = document.createElement('div');
contributorCard.classList.add('contributor-card');
const avatarImg = document.createElement('img');
avatarImg.src = contributor.avatar_url;
avatarImg.alt = `${contributor.login}'s Picture`;
const loginLink = document.createElement('a');
loginLink.href = contributor.html_url;
loginLink.appendChild(avatarImg);
contributorCard.appendChild(loginLink);
cont.appendChild(contributorCard); // Append the contributor card to the container
});
} catch (error) {
console.error(error);
}
}
// Call the function to fetch all contributors and display them in the honeycomb-like layout
fetchAllContributors();
================================================
FILE: css/Game.css
================================================
/* Naruto-themed CSS styles */
.game-body {
font-family: 'Arial', sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
/* height: 100vh; */
text-align: center;
}
.game-h1 {
font-size: 2.5em;
margin-bottom: 10px;
color: #FF6700;
}
.game-p {
font-size: 1.2em;
color: #333;
}
.game-button {
padding: 10px 20px;
font-size: 1em;
background-color: #FF6700;
color: white;
border: none;
cursor: pointer;
margin: 10px;
transition: background-color 0.3s ease;
}
.game-button:hover {
background-color: #FF8000;
}
.game-input[type="text"] {
padding: 8px;
font-size: 1em;
margin: 10px;
border: 1px solid #ccc;
}
#imageContainer {
margin-top: 20px;
}
#message {
font-size: 1.2em;
font-weight: bold;
color: #FF6700;
}
/* Styling for images */
.game-img {
max-width: 300px;
height: auto;
margin-top: 10px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
================================================
FILE: css/contact.css
================================================
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro);
.contact_body {
/* background: url("/adi image/677425.jpg"); */
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
padding-top: 0px;
z-index: 97247900097799!important;
position: fixed;
top: 0!important;
left: 0;
right: 0;
bottom: 0;
overflow-y: auto;
height: 100vh;
}
.container{
margin-top: 50px;
margin-bottom: 150px;
}
.light-mode .footer {
display: block;
background: linear-gradient(323deg, rgb(41 59 147) 0%, rgb(15 137 198) 100%);
text-align: center;
color: white;
padding: 10px 20px;
font-weight: 700;
font-size: 16px;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
z-index: 1000;
}
.dark-mode .footer {
display: block;
background: linear-gradient(337deg, rgb(60, 26, 108) 40%, rgb(163, 16, 255) 100%);
text-align: center;
color: white;
padding: 10px 20px;
font-weight: 700;
font-size: 16px;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
z-index: 1000;
}
.footer h5 {
margin-top: 3px;
margin-bottom: 5px;
font-size: 14px;
}
.footer .icon {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.footer .icon .fa {
padding: 6px;
margin: 3px;
color: #f14a16;
font-size: 16px;
width: 32px;
height: 32px;
border-radius: 50%;
border: 2px solid #f14a16;
text-decoration: none;
transition: all 0.3s ease;
}
.footer .icon .fa:hover {
color: #fff;
background: #f14a16;
}
.footer span {
text-decoration: underline;
}
h1 {
color:rgb(255, 255, 255);
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
padding-top: 30px;
font-size: 50px;
font-weight: 700;
text-align: center;
font-family: 'Source Sans Pro', sans-serif;
margin: 10px;
}
.dark-mode h1{
color:#c0a5ff;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
padding-top: 30px;
font-size: 50px;
font-weight: 700;
text-align: center;
font-family: 'Source Sans Pro', sans-serif;
margin: 10px;
}
.light-mode form {
margin-left: auto;
margin-right: auto;
width: 600px;
height: auto;
padding: 30px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
background: rgba( 255, 255, 255, 0.2 );
box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
backdrop-filter: blur( 5.5px );
-webkit-backdrop-filter: blur( 5.5px );
border-radius: 10px;
border: 1px solid rgba( 255, 255, 255, 0.18 );
overflow: hidden;
}
.dark-mode form {
margin-left: auto;
margin-right: auto;
width: 600px;
height: auto;
padding: 30px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
backdrop-filter: blur( 5.5px );
-webkit-backdrop-filter: blur( 5.5px );
border-radius: 10px;
background: rgba(83, 83, 83, 0.25);
box-shadow: rgba(145, 56, 255, 0.35) 0px 30px 100px 0px;
border: 2px solid rgba(146, 56, 255, 0.711);
overflow: hidden;
}
.light-mode textarea {
font-size: 18px;
color: rgb(82, 82, 82);
width: 100%;
border-radius: 20px;
height: 40px;
padding: 20px 20px;
min-height: 122px;
background-color: rgba(255, 255, 255, 0.536);
border: 2px solid rgba(70, 70, 70, 0.873);
transition: 0.3s ease-in;
margin-bottom: 20px;
overflow: hidden;
}
.dark-mode textarea {
font-size: 18px;
color: rgb(27, 27, 27);
width: 100%;
border-radius: 20px;
height: 40px;
padding: 20px 20px;
min-height: 122px;
background-color: rgb(255, 255, 255);
border: 3px solid rgb(146, 56, 255);
transition: 0.3s ease-in;
margin-bottom: 20px;
overflow: hidden;
}
.light-mode .nameinput,
.light-mode .emailinput {
width: 894px;
height: 48px;
width: 100%;
border-radius: 20px;
height: 40px;
padding: 20px 20px;
background-color: rgba(255, 255, 255, 0.536);
border: 2px solid rgba(70, 70, 70, 0.873);
transition: 0.3s ease-in;
font-size: 18px;
color: rgb(82, 82, 82);
margin-bottom: 20px;
}
.dark-mode .nameinput,
.dark-mode .emailinput {
width: 894px;
height: 48px;
width: 100%;
border-radius: 20px;
height: 40px;
padding: 20px 20px;
border-style: none;
background-color: rgb(255, 255, 255);
border: 3px solid rgb(146, 56, 255);
transition: 0.3s ease-in;
font-size: 18px;
color: rgb(4, 4, 4);
margin-bottom: 20px;
}
input[type=submit] {
cursor: pointer;
}
input.nameinput {
padding-left: 45px;
}
input.emailinput {
padding-left: 45px;
}
input.message {
background: white;
padding-left: 45px;
}
::-webkit-input-placeholder {
color: rgb(167, 166, 166);
}
:-moz-placeholder {
color: #fff;
}
::-moz-placeholder {
color: #fff;
}
:-ms-input-placeholder {
color: #fff;
}
.light-mode input:focus,
.light-mode textarea:focus {
background-color: rgb(255, 255, 255);
box-shadow: 0 0 2px 5px rgb(132, 222, 236);
overflow: hidden;
border:none;
}
.dark-mode input:focus,
.dark-mode textarea:focus {
background-color: rgb(255, 255, 255);
box-shadow: 0 0 2px 5px rgb(160, 132, 236);
overflow: hidden;
border:none;
}
input:focus::placeholder,
textarea:focus::placeholder{
color:transparent;
}
.light-mode .btn {
border: none;
font-family: 'Source Sans Pro', sans-serif;
font-size: 18px;
width: 200px;
height: 48px;
color: white;
background: black;
cursor: pointer;
display: inline-block;
font-weight: 700;
position: relative;
outline: none;
box-shadow: 0 6px rgb(120, 118, 118);
border-radius: 5px;
float: right;
margin-right: 6px;
}
.dark-mode .btn {
border: none;
font-family: 'Source Sans Pro', sans-serif;
font-size: 18px;
width: 200px;
height: 48px;
color: rgb(0, 0, 0);
background: rgb(255, 255, 255);
cursor: pointer;
display: inline-block;
font-weight: 700;
position: relative;
outline: none;
box-shadow: 0 6px rgb(120, 118, 118);
border-radius: 5px;
float: right;
margin-right: 6px;
}
.light-mode .btn:hover {
background: #fff;
outline: none;
color:#000000;
box-shadow: 0 4px #cecece;
top: 2px;
}
.dark-mode .btn:hover {
background: #000000;
outline: none;
color:#ffffff;
box-shadow: 0 4px #cecece;
top: 2px;
}
.btn:active {
background: #fff;
outline: none;
box-shadow: 0 0 #cecece;
top: 6px;
}
.flat {
border: none;
cursor: pointer;
display: inline-block;
outline: none;
position: relative;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
.flat:before {
position: absolute;
height: 100%;
left: 0;
top: 0;
line-height: 3;
font-size: 140%;
width: 60px;
}
.flat {
width: 960px !important;
height: 48px;
overflow: hidden;
margin-bottom: 20px;
background: url(http://www.jordancundiff.com/wp-content/uploads/2014/03/icon-dropdown.png) no-repeat right;
}
@media only screen and (min-width: 768px) and (max-width: 1035px) {
h1 {
font-size: 80px;
}
form {
width: 736px !important;
}
#wpcf7-f156-p143-o1\20 formwrap>form>p>span.wpcf7-form-control-wrap.Subject.flat>select,
#wpcf7-f156-p143-o1\20 formwrap>form>p>span.wpcf7-form-control-wrap.Subject.flat {
width: 731px !important;
}
.nameinput,
.emailinput,
#wpcf7-f156-p143-o1\20 formwrap>form>p>span.wpcf7-form-control-wrap.Message>textarea {
width: 666px !important;
}
}
@media only screen and (max-width: 804px) {
h1 {
font-size: 50px;
}
form {
width: 450px !important;
}
#wpcf7-f156-p143-o1\20 formwrap>form>p>span.wpcf7-form-control-wrap.Subject.flat>select,
#wpcf7-f156-p143-o1\20 formwrap>form>p>span.wpcf7-form-control-wrap.Subject.flat {
width: 445px !important;
}
.nameinput,
.emailinput,
#wpcf7-f156-p143-o1\20 formwrap>form>p>span.wpcf7-form-control-wrap.Message>textarea {
width: 380px !important;
}
}
@media only screen and (max-width: 517px) {
h1 {
font-size: 30px;
}
form {
width: 295px !important;
}
#wpcf7-f156-p143-o1\20 formwrap>form>p>span.wpcf7-form-control-wrap.Subject.flat>select,
#wpcf7-f156-p143-o1\20 formwrap>form>p>span.wpcf7-form-control-wrap.Subject.flat {
width: 290px !important;
}
.nameinput,
.emailinput,
#wpcf7-f156-p143-o1\20 formwrap>form>p>span.wpcf7-form-control-wrap.Message>textarea {
width: 225px !important;
}
.btn {
width: 110px;
}
}
.VIpgJd-ZVi9od-ORHb-OEVmcd{
display: none;
z-index: -10;
}
.img1{
position: absolute;
left: -30px;
bottom: -50px;
width: 500px;
}
.img2{
position: absolute;
right: -100px;
bottom: 50px;
width: 500px;
}
================================================
FILE: css/index.css
================================================
.lightmode{
z-index: 9724790009779558!important;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow-y: auto;
overflow-x: hidden;
}
.card-title{
font-family: 'Ninja Naruto', sans-serif;
}
/* Toggle Switch Start */
.toggle-switch {
display: flex;
align-items: center;
justify-content: center;
}
.hero{
color:rgba(247, 117, 4, 0.977);
text-shadow: 0px 0px 4px rgba(247, 117, 4, 0.977);
}
.villian{
color:rgb(149, 0, 255);
text-shadow: 0px 0px 4px rgb(159, 23, 255);
}
.toggle-label {
margin: 0 0.9% 0 0.9%;
/* margin: 0 10px; */
font-size: 25px;
font-weight: bold;
}
.toggle-button {
position: relative;
cursor: pointer;
width: 60px;
height: 30px;
border-radius: 30px;
}
.light-mode .toggle-button{
border: 2px solid rgb(6, 168, 222);
background-color: #f0eeee;
}
.dark-mode .toggle-button{
border: 2px solid rgb(128, 0, 255);
background-color: #2c2c2c;
}
.toggle-slider {
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
background: linear-gradient(323deg, rgb(201, 77, 1) 0%, rgb(255, 158, 55) 100%);
border-radius: 50%;
transition: 0.4s;
box-shadow: 0 0px 5px 3px #be4001a5;
}
.toggle-slider:hover{
background-color: rgba(56, 0, 130, 0.807);
}
.toggle-input {
display: none;
}
.toggle-input:checked + .toggle-slider {
left: 50%;
background: linear-gradient(323deg, rgb(47, 14, 82) 0%, rgb(110, 15, 198) 100%);
box-shadow: 0 0px 5px 5px #a928e6d5;
}
.toggle-input:checked + .toggle-slider:hover {
left: 50%;
background-color: #cd7b00;
}
.hide {
display: none;
}
.dark_lang{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
@media (max-width:992px){
.dark_lang{
position: relative;
display: flex;
flex-direction: row;
align-items: center;
left:-40px;
}
}
/* Toggle Switch End */
/* to top button present at the bottom right on scrolling starts here */
.to-top {
color: #fff;
position: fixed;
bottom: 32px;
right: 32px;
width: 50px;
height: 50px;
border-radius: 50%;
background: #1f1f1f;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
text-decoration: none;
opacity: 0;
pointer-events: none;
transition: all 0.4s ease;
z-index: 1000;
}
.to-top.active {
opacity: 1;
pointer-events: auto;
}
.to-top:hover {
color: #ffffff;
text-decoration: none;
}
/* ✅ Make it smaller on mobile but still bottom-right */
@media only screen and (max-width: 480px) {
.to-top {
width: 48px;
height: 48px;
font-size: 26px;
bottom: 30px;
right: 18px;
}
}
/* progess button ends here */
main{
margin-bottom: 2rem;
}
.light-mode .footer {
display: block;
background: linear-gradient(323deg, rgb(41 59 147) 0%, rgb(15 137 198) 100%);
text-align: center;
padding: 10px 0 5px 0;
margin-top: 30px;
color: #fff;
font-size: 18px;
font-weight: 500;
z-index: 10000;
position: relative;
}
.dark-mode .footer {
display: block;
background: linear-gradient(337deg, rgb(60, 26, 108) 40%, rgb(163, 16, 255) 100%);
text-align: center;
padding: 10px 0 5px 0;
margin-top: 30px;
color: #fff;
font-size: 18px;
font-weight: 500;
position: relative;
z-index: 10000;
}
.footer a span{
color: #062d9b;
}
@media screen and (max-width:500px) {
.footer{
font-size: 14px;
font-weight: 400;
}
}
.darkmodebutton{
transition: all ease-in-out 0.7s;
}
.lightmode .darkmodebutton:hover{
box-shadow: white 0 0 20px;
transition: all ease-in-out 0.7s;
}
.dark-mode .darkmodebutton:hover{
box-shadow: rgb(131, 0, 212) 0 0 10px;
transition: all ease-in-out 0.7s;
}
.contributors {
margin: 0;
padding: 0;
}
.contributors h1 {
text-align: center;
color: white;
font-size: 2.5rem;
margin-bottom: 4%;
}
.contributors h1:hover {
text-decoration: underline;
}
#contributor {
margin: 10px;
padding: 10px;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
.contributor-card {
width: 100px;
height: auto;
clip-path: polygon(50% 0%, 91% 25%, 91% 75%, 50% 100%, 9% 75%, 9% 25%);
margin: 5px;
transition: all 0.5s ease-in;
}
.contributor-card :hover {
transform: scale(1.2);
}
.contributor-card img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* .VIpgJd-ZVi9od-ORHb-OEVmcd{
display: none!important;
height: 0;
max-height: 0;
} */
/* .goog-te-gadget .goog-te-combo{
background:#F5F5DC;
color:black;
border: none;
border-radius:3px;
padding:10px 8px;
font-size:1rem;
} */
/* #google_translate_element select {
background: yellow!important;
color: black;
border: none;
border-radius: 3px;
padding: 10px;
margin-top: 5px;
} */
================================================
FILE: css/style.css
================================================
@import url('https://fonts.googleapis.com/css2?family=Arima:wght@100..700&family=Oswald:wght@200..700&display=swap');
#title {
color: #fff;
height: 950px;
background-color: #32081f;
}
.navbar img {
max-height: 50px;
width: auto;
padding: 5px 0;
}
.navbar-brand {
font-size: 24px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
color: #fff;
padding-left: 15px;
margin-right: 15px;
white-space: nowrap;
display: flex;
align-items: center;
}
.light-mode .navbar {
padding: 5px 15px;
background-color: #FBAB7E;
background-image: linear-gradient(342deg, #ffa16b 0%, #ffcf59 100%);
display: flex;
align-items: center;
min-height: 70px;
flex-wrap: wrap;
}
.dark-mode .navbar {
padding: 0 15px;
background-color: #FBAB7E;
background-image: linear-gradient(342deg, #363636 0%, #000000 100%);
display: flex;
align-items: center;
min-height: 60px;
}
.dark_lang {
display: flex;
align-items: center;
margin-left: 40px;
position: relative;
z-index: 1001;
min-width: 200px; /* Ensure minimum width for language selector */
}
/* Adjust the Google Translate element */
#google_translate_element {
min-width: 160px;
}
/* Ensure play/pause button has its own space */
#nyan-btn {
margin-left: 25px;
padding: 5px 10px;
white-space: nowrap;
position: relative;
z-index: 1000;
min-width: 100px;
}
/* Adjust the language selector dropdown */
.goog-te-gadget {
margin-right: 15px !important;
}
/* Ensure play/pause button has enough space */
#nyan-btn {
margin-left: 15px;
white-space: nowrap;
position: relative;
z-index: 1000;
}
.sticky{
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 100;
}
.image-naruto {
padding: 0;
margin-top: 50px;
height: 60%;
}
.head {
color: #fff;
font-size: 400%;
padding: 50px 0 50px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.navbar-toggler {
margin-right: 20px;
}
html {
scroll-behavior: smooth;
}
.nav-item {
margin: 0 5px;
white-space: nowrap;
}
.nav-link {
padding: 8px 12px !important;
font-size: 0.95rem;
}
.about {
margin: 50px;
line-height: 2;
text-align: left;
font-size: 1.5rem;
height: 300px;
padding-bottom: 100px;
}
/* .page{
height: 700px;
} */
@media (1245px>=width>993px) {
#title {
height: 800px;
}
.about {
position: relative;
bottom: 90px;
text-align: justify;
font-size: 1.2rem;
margin: 20px;
}
.head {
position: relative;
bottom: 50px;
font-size: 3rem;
}
}
@media (992px>=width>=680px) {
#title {
height: 1200px;
}
.about {
position: relative;
bottom: 150px;
font-size: 1.3rem;
}
.image-naruto {
height: 600px;
}
.head {
position: relative;
bottom: 100px;
}
}
@media (680px>width>450px) {
.image-naruto {
height: 400px;
}
#title {
height: 1100px;
}
.about {
position: relative;
bottom: 190px;
font-size: 1.2rem;
text-align: justify;
}
.head {
position: relative;
bottom: 130px;
font-size: 2.5rem;
}
}
@media (max-width: 450px) {
.image-naruto {
height: 400px;
}
#title {
height: 1400px;
}
.about {
position: relative;
bottom: 200px;
font-size: 1.2rem;
text-align: justify;
}
.head {
position: relative;
bottom: 150px;
font-size: 2.5rem;
}
}
html,
body {
overflow-x: hidden;
overflow-y: scroll;
}
body {
background-image: linear-gradient(to right, #2193b0, #6dd5ed);
width: 100vw;
font-family: "Roboto-Slabs", sans-serif;
}
/* Custom Scroll Bar */
::-webkit-scrollbar {
padding: 0;
width: 10px;
}
::-webkit-scrollbar-track {
background: linear-gradient(360deg, rgb(41 59 147) 30%, rgb(15 137 198) 100%);
/*margin top bottom*/
}
::-webkit-scrollbar-thumb {
background: linear-gradient(360deg, #ff8a46 30%, #ffcb46 100%);
border-radius: 1rem;
}
/* Dark Mode Switch CSS */
.switch-container {
position: absolute;
top: 10%;
}
.switch-container #switch {
display: none;
}
.switch-container .switch-label {
position: relative;
cursor: pointer;
margin: 0;
}
.switch-container .switch-label .switch-rail {
transition: all 0.2s ease-in-out;
position: absolute;
width: 70px;
height: 30px;
background: #ff9a47;
border-radius: 50px;
overflow: hidden;
bottom: -14px;
right: -6rem;
}
.switch-container .switch-label .switch-rail .switch-slider {
transition: all 0.2s ease-in-out;
position: absolute;
top: 4px;
left: 4px;
width: 22px;
height: 22px;
border-radius: 50%;
background: #fff;
}
.switch-container #switch:checked + .switch-label .switch-rail {
transition: all 0.2s ease-in-out;
background: #2e4a6b;
}
.switch-container #switch:checked + .switch-label .switch-rail .switch-slider {
transition: all 0.2s ease-in-out;
transform: translateX(40px);
}
.loader {
filter: hue-rotate(0deg);
animation: hue 10000ms infinite linear;
/* position: sticky; */
/* background: #dc3545 linear-gradient(45deg, #0f8, #08f); */
}
.fixed-top {
/* background-color: black; */
position: sticky;
}
.navbar-nav {
display: flex;
align-items: center;
justify-content: flex-end;
width: auto;
margin: 0;
padding: 0;
position: relative;
z-index: 1000;
flex-grow: 1;
justify-content: flex-end;
}
.search {
position: absolute;
right: 0px; /* Moved further right */
top: 50%;
transform: translateY(-50%);
display: flex;
align-items: center;
width: 200px;
height: 38px;
background: #fff;
border-radius: 19px;
padding: 0 15px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
z-index: 1000;
font-size: 14px;
}
.search .icon {
font-size: 0px;
color: #666;
margin-right: 8px;
flex-shrink: 0;
margin-bottom: 3px;
}
.search input {
border: none;
outline: none;
background: transparent;
width: 100%;
font-size: 14px;
padding: 5px 0;
color: #333;
}
.search input::placeholder {
color: #999;
opacity: 1;
}
.clear-btn {
background: none;
border: none;
color: #999;
font-size: 20px;
cursor: pointer;
padding: 0 5px;
line-height: 1;
margin-left: 5px;
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
border-radius: 50%;
transition: all 0.2s ease;
}
.clear-btn:hover {
background: #f0f0f0;
color: #666;
}
/* Dark mode search styles */
.dark-mode .clear-btn {
color: #bbb;
}
.dark-mode .clear-btn:hover {
background: #444;
color: #fff;
}
@media (max-width: 1400px) {
.search {
right: 250px;
width: 180px;
}
}
@media (max-width: 1200px) {
.search {
right: 200px;
width: 160px;
}
}
@media (max-width: 992px) {
.navbar {
padding: 5px 10px !important;
}
.search {
width: 100%;
max-width: 100%;
position: static;
transform: none;
margin: 10px 0;
height: 42px;
border-radius: 21px;
}
.search input {
font-size: 16px;
}
.navbar-brand {
font-size: 20px;
padding-left: 10px;
}
.navbar-nav {
width: 100%;
flex-direction: column;
align-items: flex-start;
padding: 10px 0;
}
.nav-item {
margin: 5px 0 !important;
width: 100%;
}
.search {
position: static !important;
transform: none;
margin: 10px 0;
width: 100%;
max-width: 100%;
order: 3;
}
.dark_lang {
order: 4;
padding: 10px 0;
width: 100%;
justify-content: flex-start;
margin-left: 0 !important;
}
.navbar-toggler {
margin-left: auto;
}
}
.light-mode .search{
background: #fff;
}
.dark-mode .search{
background: #333333;
}
.activated {
width: 280px;
}
.dark-mode .search .icon {
position: absolute;
top: 0;
left: 0;
width: 48px;
height: 48px;
border-radius: 48px;
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
cursor: pointer;
}
.light-mode .search .icon {
position: absolute;
top: 0;
left: 0;
width: 48px;
height: 48px;
border-radius: 48px;
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
cursor: pointer;
}
.clear {
position: absolute;
top: 38%;
transform: translate(-50%);
/* border: 2px solid red; */
width: 15px;
height: 15px;
right: 15px;
cursor: pointer;
display: flex;
align-items: center;
}
.clear::before {
position: absolute;
content: " ";
width: 1px;
height: 15px;
background: #999;
transform: rotate(45deg);
}
.clear::after {
position: absolute;
content: " ";
width: 1px;
height: 15px;
background: #999;
transform: rotate(315deg);
}
.brand1 {
font-size: 40px;
font-weight: bolder;
text-shadow: 1px 1px blue;
}
/* .nav1 {
background-color: black;
} */
/* Character text animation */
/* Add this class to animate the slide-in effect */
.chardiv{
margin: 0;
padding: 50px;
height: 200px;
overflow: hidden;
position: relative;
}
.light-mode .chardiv{
background-color: rgba(169, 195, 232, 0.364);
}
.dark-mode .chardiv{
background-color: rgba(82, 82, 82, 0.232);
}
.heroimg {
height: inherit;
position: absolute;
right: 0;
top:165px;
scale: 3;
margin-right: 150px;
z-index: -1;
}
.vilimg2{
height: inherit;
position: absolute;
right: 0;
top:-20px;
scale: 1.5;
margin-right: 100px;
z-index: -1;
}
.heroimg2{
height: inherit;
position: absolute;
left: 0;
top:50px;
scale: 3;
margin-left: 150px;
z-index: -1;
}
.vilimg{
height: inherit;
position: absolute;
left: 0;
top:145px;
scale: 3;
margin-left: 150px;
z-index: -1;
}
.chars {
background: linear-gradient(300deg, rgb(251,228,7),rgb(255,225,130),rgb(242,163,11),rgb(12,47,223),red);
background-size: 400%;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
text-decoration: none;
animation: linrclr 10s ease-in-out infinite;
}
h1.chars {
font-weight: 1000;
padding: 20px;
font-size: 3.5rem;
margin: 0px 0px 10px 0px;
}
@keyframes linrclr {
0% {
background-position: 0%;
}
100% {
background-position: 400%;
}
}
body.light-mode #cont {
display: flex;
/* flex-direction: column; */
flex-wrap: wrap;
margin: 0;
padding: 0;
width: 100%;
max-width: 2000px;
justify-content: center;
align-items: center;
}
body.dark-mode #cont {
display: flex;
/* flex-direction: column; */
flex-wrap: wrap;
margin: 0;
padding: 0;
width: 100%;
max-width: 2000px;
justify-content: center;
align-items: center;
}
.flip-card {
cursor: url("./Images/kunai_cursor.png"), pointer;
}
.topic {
text-align: center;
font-weight: 900;
font-size: 60px;
color: red;
text-shadow: 2px 4px 4px yellow;
text-decoration: underline;
}
.col-md-4 {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.card-bg {
background-color: rgb(174, 184, 86);
}
h2 {
color: black;
}
/* body {
background-color: white;
font-weight: bold;
text-align: justify;
} */
h1 {
color: black;
text-align: center;
margin-top: 90px;
margin-bottom: 40px;
line-height: 14pt;
}
.light-mode #one {
background-color: #2867b2;
}
.dark-mode #one {
background-color: #0e3361;
}
.light-mode #two {
background-color: rgb(33, 31, 31);
}
.dark-mode #two {
background-color: rgba(40, 40, 40, 0.877);
}
#three {
background: radial-gradient(circle at 0% 180%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);
}
#buttons {
margin-bottom: 10px;
}
.navTitle {
color: #ffffff;
padding-left: 50px;
size: 50px;
}
.row {
margin: 0 auto;
text-align: center;
}
.row1 {
margin-top: 6%;
}
.itemNav {
padding: 15px;
}
.mr-auto {
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
}
.nav-link{
transition:all ease-in-out 0.3s;
}
.light-mode .navbar-light .navbar-nav .nav-link{
font-family: "Oswald";
font-size: 1.4rem;
font-weight: 700;
color: rgb(255, 255, 255);
}
.dark-mode .navbar-light .navbar-nav .nav-link{
font-size: 1.4rem;
font-weight: 700;
color:rgb(117, 46, 203);
}
.light-mode .navbar-light .navbar-nav .active>.nav-link{
font-size: 1.4rem;
font-weight: 700;
color: rgb(255, 255, 255);
text-decoration: underline;
border-radius: 5px;
}
.dark-mode .navbar-light .navbar-nav .active>.nav-link{
font-size: 1.4rem;
font-weight: 700;
color: #c0a5ff;
text-decoration: underline;
border-radius: 5px;
}
.light-mode .toggle-mode {
font-size: 1rem;
background-color: beige;
border: none;
outline: none;
display: flex;
padding: 0.3rem 0.75rem;
border-radius: 4rem;
align-items: center;
justify-content: center;
font-weight: 600;
color: rgb(255, 210, 63);
}
.dark-mode .toggle-mode {
font-size: 1rem;
background-color: rgb(109, 39, 194);
border: none;
outline: none;
display: flex;
padding: 0.3rem 0.75rem;
border-radius: 4rem;
align-items: center;
justify-content: center;
font-weight: 600;
color: #c0a5ff;
}
.about-title {
padding-top: 2%;
color: white;
font-weight: bold;
line-height: 2.5rem;
}
.card {
overflow: clip;
}
.card img:hover {
transform: scale(1.1);
transition: all 0.3s ease-out;
}
@media only screen and (max-width: 600px) {
.display-3 {
font-size: 4rem;
}
.lead {
font-size: 1.6rem;
}
.gallery-head {
font-size: 2rem;
}
.navTitle {
padding-left: 3px;
}
.activated{
width: 180px;
}
}
.card h2 {
color: #dc3545;
}
/* body {
background-image: radial-gradient(blue, violet);
font-family: "Ninja Naruto", arial, sans-serif;
} */
/* Light mode */
/* body {
background: #fff;
color: #000;
} */
body.dark-mode {
background: linear-gradient(112.1deg, rgba(0, 60, 255, 0.756) 11.4%, rgb(63, 76, 119) 70.2%);
}
body.dark-mode::before {
content: "";
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(1, 1, 1, 0.9);
/* Adjust the alpha (last) value to control darkness */
z-index: -1;
}
p.aboutcolor {
color: white;
}
body.aboutdarkmode {
background: black;
color: #ffffff;
}
.brand1 {
font-size: 40px;
font-weight: bolder;
text-shadow: 1px 1px blue;
}
/* .nav1 {
background-color: black;
} */
.topic {
text-align: center;
font-weight: 900;
font-size: 60px;
color: red;
text-shadow: 2px 4px 4px yellow;
text-decoration: underline;
}
.card-bg {
background-color: rgb(174, 184, 86);
}
h2 {
color: black;
}
/*about*/
.light-mode .about-content {
text-align: justify;
font-size: 20px;
color: black;
border-radius: 2rem;
background: beige;
overflow: hidden;
transition: all 0.3s ease-in-out;
padding: 30px;
margin: 20px;
min-height: 50vh;
box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}
.dark-mode .about-content {
text-align: justify;
font-size: 20px;
color: rgb(172, 83, 245);
border-radius: 2rem;
background-color: #1a1919c4;
overflow: hidden;
transition: all 0.3s ease-in-out;
padding: 30px;
margin: 20px;
min-height: 50vh;
box-shadow: rgba(145, 56, 255, 0.35) 0px 30px 100px 0px;
border: 2px solid rgba(146, 56, 255, 0.711);
}
.light-mode .about-content:hover {
background: #e2a9e5;
color: white;
background: linear-gradient(135deg, #e2a9e5 15%, #2b94e5 100%);
}
.dark-mode .about-content:hover {
background: #e2a9e5;
color: white;
background: linear-gradient(135deg, #a950ad 15%, #2271ad 100%);
}
/* body {
background-color: white;
font-family: "Righteous", cursive;
font-weight: bold;
} */
h1 {
color: black;
text-align: center;
margin-top: 90px;
margin-bottom: 40px;
line-height: 14pt;
}
.light-mode #four {
background-color: #1877f2;
}
.dark-mode #four {
background-color: #07499f;
}
.about-card {
border-radius: 8px;
}
#buttons {
margin-bottom: 10px;
}
.navTitle {
color: #ffffff;
padding-left: 50px;
size: 50px;
}
.row1 {
margin-top: 6%;
}
.itemNav {
padding: 15px;
}
.card {
overflow: clip;
}
.card img:hover {
transform: scale(1.1);
transition: all 0.3s ease-out;
}
@media only screen and (max-width: 600px) {
.display-3 {
font-size: 4rem;
}
.lead {
font-size: 1.6rem;
}
.gallery-head {
font-size: 2rem;
}
.navTitle {
padding-left: 3px;
}
}
.darkmode-btn {
border: none;
border-radius: 12px;
background-color: #f65c00;
color: #200e14;
}
body {
/* background-color: #ee5522; */
/* background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2000 1500'%3E%3Cdefs%3E%3CradialGradient id='a' gradientUnits='objectBoundingBox'%3E%3Cstop offset='0' stop-color='%23FB3'/%3E%3Cstop offset='1' stop-color='%23ee5522'/%3E%3C/radialGradient%3E%3ClinearGradient id='b' gradientUnits='userSpaceOnUse' x1='0' y1='750' x2='1550' y2='750'%3E%3Cstop offset='0' stop-color='%23f7882b'/%3E%3Cstop offset='1' stop-color='%23ee5522'/%3E%3C/linearGradient%3E%3Cpath id='s' fill='url(%23b)' d='M1549.2 51.6c-5.4 99.1-20.2 197.6-44.2 293.6c-24.1 96-57.4 189.4-99.3 278.6c-41.9 89.2-92.4 174.1-150.3 253.3c-58 79.2-123.4 152.6-195.1 219c-71.7 66.4-149.6 125.8-232.2 177.2c-82.7 51.4-170.1 94.7-260.7 129.1c-90.6 34.4-184.4 60-279.5 76.3C192.6 1495 96.1 1502 0 1500c96.1-2.1 191.8-13.3 285.4-33.6c93.6-20.2 185-49.5 272.5-87.2c87.6-37.7 171.3-83.8 249.6-137.3c78.4-53.5 151.5-114.5 217.9-181.7c66.5-67.2 126.4-140.7 178.6-218.9c52.3-78.3 96.9-161.4 133-247.9c36.1-86.5 63.8-176.2 82.6-267.6c18.8-91.4 28.6-184.4 29.6-277.4c0.3-27.6 23.2-48.7 50.8-48.4s49.5 21.8 49.2 49.5c0 0.7 0 1.3-0.1 2L1549.2 51.6z'/%3E%3Cg id='g'%3E%3Cuse href='%23s' transform='scale(0.12) rotate(60)'/%3E%3Cuse href='%23s' transform='scale(0.2) rotate(10)'/%3E%3Cuse href='%23s' transform='scale(0.25) rotate(40)'/%3E%3Cuse href='%23s' transform='scale(0.3) rotate(-20)'/%3E%3Cuse href='%23s' transform='scale(0.4) rotate(-30)'/%3E%3Cuse href='%23s' transform='scale(0.5) rotate(20)'/%3E%3Cuse href='%23s' transform='scale(0.6) rotate(60)'/%3E%3Cuse href='%23s' transform='scale(0.7) rotate(10)'/%3E%3Cuse href='%23s' transform='scale(0.835) rotate(-40)'/%3E%3Cuse href='%23s' transform='scale(0.9) rotate(40)'/%3E%3Cuse href='%23s' transform='scale(1.05) rotate(25)'/%3E%3Cuse href='%23s' transform='scale(1.2) rotate(8)'/%3E%3Cuse href='%23s' transform='scale(1.333) rotate(-60)'/%3E%3Cuse href='%23s' transform='scale(1.45) rotate(-30)'/%3E%3Cuse href='%23s' transform='scale(1.6) rotate(10)'/%3E%3C/g%3E%3C/defs%3E%3Cg %3E%3Cg transform='translate(0 240)'%3E%3Ccircle fill='url(%23a)' r='3000'/%3E%3Cg opacity='0.5'%3E%3Ccircle fill='url(%23a)' r='2000'/%3E%3Ccircle fill='url(%23a)' r='1800'/%3E%3Ccircle fill='url(%23a)' r='1700'/%3E%3Ccircle fill='url(%23a)' r='1651'/%3E%3Ccircle fill='url(%23a)' r='1450'/%3E%3Ccircle fill='url(%23a)' r='1250'/%3E%3Ccircle fill='url(%23a)' r='1175'/%3E%3Ccircle fill='url(%23a)' r='900'/%3E%3Ccircle fill='url(%23a)' r='750'/%3E%3Ccircle fill='url(%23a)' r='500'/%3E%3Ccircle fill='url(%23a)' r='380'/%3E%3Ccircle fill='url(%23a)' r='250'/%3E%3C/g%3E%3Cg transform='rotate(-36 0 0)'%3E%3Cuse href='%23g' transform='rotate(10)'/%3E%3Cuse href='%23g' transform='rotate(120)'/%3E%3Cuse href='%23g' transform='rotate(240)'/%3E%3C/g%3E%3Ccircle fill-opacity='0' fill='url(%23a)' r='3000'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
background-attachment: fixed;
background-size: cover; */
}
.radius {
border-radius: 50px;
width: 90% !important;
margin: auto;
}
.card-bg {
transition: all 0.5s;
background: rgba(255, 255, 255, 0.25);
box-shadow: 0 8px 32px 0 #1f26875e;
backdrop-filter: blur(2.5px);
-webkit-backdrop-filter: blur(2.5px);
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.18);
}
.card-bg:hover {
background: rgba(255, 255, 255, 0.4);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-radius: 40px 0 40px 0;
border: 1px solid rgba(255, 255, 255, 0.18);
box-shadow: #200e14 4px 3px;
}
h2.card-title {
font-size: 25px;
font-weight: 900;
color: rgb(255, 119, 34);
text-shadow: 3px 2px 2px #1000c49d ;
-webkit-text-stroke: 1px rgba(255, 255, 255, 0.715);
-webkit-background-clip: text;
letter-spacing: 2px;
text-align: center;
font-family: "Ninja Naruto";
}
.topic {
color: white;
text-shadow: 2px 4px 4px black;
}
.card:nth-of-type(2n + 1) {
transform: translateX(-10%);
}
.card:nth-of-type(2n) {
transform: translateX(10%);
}
.card {
transition: all 550ms ease-in;
opacity: 100;
}
.appear {
transform: translateX(0) !important;
opacity: 1;
}
/* Mobile devices */
@media (min-width: 320px) and (max-width: 480px) {
#carouselExampleIndicators {
margin-top: 80px;
}
.topic {
color: white;
text-shadow: 2px 4px 4px black;
font-weight: 500;
font-size: 40px;
margin-top: 30px !important;
}
h2.card-title {
text-align: center;
}
.navbar-nav button {
margin-left: auto;
margin-right: auto;
}
.search {
/* left: 220px; */
}
}
.nav-link:hover {
color:rgba(0,0,0,.8);;
}
button#scrolltopBtn {
border-radius: 100%;
height: 40px;
width: 40px;
font-size: 25px;
font-weight: bold;
/* text-align: center; */
/* position: sticky; */
margin-top: 100px;
position: fixed;
margin-left: 89rem;
z-index: 2000;
border: none;
}
.flip-card {
float: left;
border-radius: 29px;
background-color: transparent;
width: 300px;
/* min-height: 400px; */
/* border: 1px solid #e1dfdf; */
perspective: 1000px; /* Remove this if you don't want the 3D effect */
margin: 20px;
display: flex;
/* display: none; */
}
/* This container is needed to position the front and back side */
.flip-card-inner {
position: relative;
width: 100%;
min-height: 400px;
text-align: justify;
transition: transform 0.8s;
transform-style: preserve-3d;
border-radius: 29px;
}
/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
/* Position the front and back side */
.light-mode .flip-card-front,
.light-mode .flip-card-back {
box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
border-radius: 15px;
position: absolute;
min-width: 300px;
border: 3px solid #ff7b00;
height: 400px;
-webkit-backface-visibility: hidden; /* Safari */
backface-visibility: hidden;
overflow: hidden;
}
.dark-mode .flip-card-front,
.dark-mode .flip-card-back {
box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
border-radius: 15px;
position: absolute;
min-width: 300px;
border: 3px solid #9900ff;
height: 400px;
-webkit-backface-visibility: hidden; /* Safari */
backface-visibility: hidden;
overflow: hidden;
}
.flip-card-back {
overflow-y: scroll;
}
/* Style the front side (fallback if image is missing) */
.flip-card-front {
background-color: rgb(228 212 212);
color: black;
}
/* Style the back side */
.light-mode .flip-card-back {
background-color: #FBAB7E;
background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
box-shadow: rgb(157, 255, 253) 0px 30px 50px 0px;
color: #454545;
transform: rotateY(180deg);
padding: 20px;
scrollbar-width: none;
overflow-y: scroll;
}
.dark-mode .flip-card-back {
background-color: #1a1919c4;
box-shadow: rgba(146, 56, 255, 0.59) 0px 30px 50px 0px;
color: #969696;
transform: rotateY(180deg);
padding: 20px;
scrollbar-width: none;
overflow-y: scroll;
}
.flip-card-back::-webkit-scrollbar {
display: none;
}
.card-content {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
max-height: 80px;
padding: 10px; /* Adjust the padding as needed */
background: rgba(77, 77, 77, 0.5); /* Semi-transparent background for better text visibility */
color: white; /* Set text color */
box-sizing: border-box;
}
.card-title {
margin: 0;
}
.flip-card-front img {
width: 100%;
height: 100%;
object-fit: cover;
}
ul.navbar-nav.mr-auto {
position: absolute;
right: 10rem;
}
@media screen and (max-width: 955px) {
ul.navbar-nav.mr-auto {
position: absolute;
right: 0;
left: 0;
top: 0;
margin-top: 80px;
padding: 1rem;
background-color: #141a46;
}
}
.inner-container {
justify-content: center;
}
.about_card {
width: 300px;
margin: 10px 60px;
}
/* social icons */
.footer h5 {
margin-top: 5px;
}
.footer .icon {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
/* @media only screen and (max-width: 600px) {
.footer .icon{
flex-direction: column;
}
} */
.footer {
text-align: center;
padding-top: 20px;
}
.footer .icon .fa {
padding: 8px;
margin: 5px;
color: #f14a16;
background: #fff;
min-width: 43px;
/* height: 30px; */
font-size: 22px;
border-radius: 50%;
text-align: center;
text-decoration: none;
transition: all 0.3s ease;
}
.footer .icon .fa:hover {
color: #fff;
background: #f14a16;
}
.footer span {
text-decoration: underline;
}
figure{
margin: 0px;
}
/* blue */
/* .css-12i25zk {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: #75c1cc url(/index/sky.webp) no-repeat center/cover;
} */
/* cloud */
/* .css-1bhvony {
position: absolute;
inset: 0px;
background: url(/index/cloud.webp) center center / contain no-repeat;
animation: 120s linear -60s infinite normal none running animation-1rcfmul;
} */
/* 0% {
transform: translateX(-100%);
}
<style>
50% {
transform: none;
}
<style>
100% {
transform: translateX(100%);
} */
/* .css-psf7l5 {
position: absolute;
inset: 0px;
background: url(/index/cloud.webp) center center / contain no-repeat;
animation: 120s linear 0s infinite normal none running animation-1rcfmul;
} */
/* statue */
/* .css-2tjrt4 {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: url(/index/mountain.webp) no-repeat center/cover;
} */
.btn {
cursor: pointer;
position: relative;
left: 22vh;
margin-right:20px;
background: #94a657;
border-radius: 4px;
color: #fff;
text-transform: uppercase;
line-height: 20px;
}
.soundicon {
width: 16px;
height: 16px;
padding: 0;
vertical-align: middle;
margin-left: 3px;
}
#nyan-btn {
font-size: 14px;
padding: 4px 8px;
display: inline-flex;
align-items: center;
justify-content: center;
}
================================================
FILE: css/translate.css
================================================
.light-mode #google_translate_element select{
background:#F5F5DC!important;
color:black;
border: none;
border-radius:3px;
padding:10px!important;
margin-top: 5px;
}
.dark-mode #google_translate_element select{
background: rgb(109, 39, 194);
color:#c0a5ff;
border: none;
border-radius:3px;
padding:10px!important;
margin-top: 5px;
}
.VIpgJd-ZVi9od-aZ2wEe-wOHMyf{
z-index: 9724790009779!important;
top:0;
left:unset;
right:-5px;
display:none!important;
border-radius:50%;
border:2px solid gold;
}
.VIpgJd-ZVi9od-aZ2wEe-OiiCO{
width:80px;
height:80px;
}
.VIpgJd-ZVi9od-l4eHX-hSRGPd{
display:none;
}
.goog-logo-link{
display:none !important;
}
.goog-te-gadget{
color:transparent!important;
}
.goog-te-banner-frame{
display:none !important;
}
.goog-te-gadget {
color: transparent!important;
font-size:0px;
}
.goog-text-highlight {
background: none !important;
box-shadow: none !important;
}
#goog-gt-tt, .goog-te-balloon-frame
{
display: none !important;
}
.goog-text-highlight
{
background: none !important;
box-shadow: none !important;
}
#google_translate_element{
width: auto !important;
display: inline-block !important;
}
.goog-te-combo{
margin-left:-15px;
}
================================================
FILE: index.html
================================================
<!DOCTYPE html>
<html lang="en-US">
<head>
<link href="https://allfont.net/allfont.css?fonts=ninja-naruto" rel="stylesheet" type="text/css" />
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css" type="text/css">
<link href="https://fonts.cdnfonts.com/css/ninja-naruto" rel="stylesheet">
<link
href="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse4.mm.bing.net%2Fth%3Fid%3DOIP.6qtY7eooQBTfiSVjtrLrGQHaEj%26pid%3DApi&f=1"
rel="icon" type="image/jpeg">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="icon" type="image/png" href="Images/favicon.png">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital@1&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/index.css">
<link href="css/translate.css" rel="stylesheet" type="text/css" media="all" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
<title>Naruto-Home</title>
</head>
<style>
.vid {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
background: rgba(0, 0, 0, 0.5);
color: white;
font-size: 30px;
position: relative;
overflow: hidden;
min-height: 50vh;
}
.videosrc {
position: absolute;
z-index: -1;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
min-width: 100%;
min-height: 100%;
}
</style>
<body class="light-mode">
<a href="#" class="to-top">
<i class="fa fa-arrow-up"></i>
</a>
<figure class="sky"></figure>
<div class="loader ">
<header>
<nav class=" animate__animated animate__fadeInDown sticky navbar navbar-expand-lg navbar-light"
style="height: 60px; padding:5px 5px 5px 30px;">
<img src="adi image/naruto-advenimiento-los-animes-cortos-2.png" style="max-height: 100%; width: auto;">
<!-- Removed duplicate search bar -->
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active mx-4">
<a class="nav-link link" style="text-decoration: none;" href="./index.html">Home</a>
</li>
<li class="nav-item mx-4">
<a class="link nav-link " href="./about.html">About</a>
</li>
<li class="nav-item mx-4">
<a class="link nav-link " href="./contact.html">Contact</a>
</li>
<li class="nav-item mx-4">
<a class="link nav-link " href="./Game.html">Game</a>
</li>
<div class="search">
<i class="fa fa-search icon"></i>
<input type="text" id="mysearch" onkeyup="filterCards()" placeholder="Search characters...">
<button onclick="clearSearch()" class="clear-btn">×</button>
</div>
<div class="dark_lang">
<li>
<div>
<button onclick="darkmode()" class="toggle-mode darkmodebutton" id="toggler">🌙
Dark</button>
</div>
</li>
<li class="nav-item mx-4">
<div id="google_translate_element"></div>
<script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en',
autoDisplay: 'true',
layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL
}, 'google_translate_element');
}
</script>
<script
src='//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit'></script>
</li>
</div>
<li class="nav-item mx-4">
<audio id="nyan" src="./sound/naruto.mp3" preload="metadata" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<a class="btn" id="nyan-btn">play / pause <img src="./adi image/sound.png"
class="soundicon">
<script src="./audio.js"></script>
</a>
</li>
</ul>
</div>
</nav>
</header>
<!-- header video -->
<div class="vid animate__animated animate__fadeIn">
<a href="#"><img src="adi image/naruto-shippuden.png" style="width: 600px;" class="logo"></a>
<video autoplay loop muted class="videosrc">
<source src="adi image/naruto - Made with Clipchamp.mp4" type="video/mp4">
</video>
</div>
<!-- header video end -->
<main>
<!--
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="./Images/229954.jpg" class="radius d-block" alt="...">
</div>
<div class="carousel-item">
<img src="./Images/377906.jpg" class="radius d-block" alt="...">
</div>
<div class="carousel-item">
<img src="./Images/377922.jpg" class="radius d-block" alt="...">
</div>
<div class="carousel-item">
<img src="./Images/123456.jpg" class="radius d-block" alt="...">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div> -->
<div class="chardiv ">
<img class="heroimg good animate__animated animate__fadeInRight "
src="adi image/Naruto-Uzumaki-No-Background.png" alt="">
<img class="heroimg2 good animate__animated animate__fadeInLeft " src="adi image/png-image.png" alt="">
<img class="vilimg evil animate__animated animate__fadeInLeft"
src="adi image/uchiha_madara___png___by_anvmadara_dewr6zj-pre.png" alt="">
<img class="vilimg2 evil animate__animated animate__fadeInRight "
src="adi image/d383ajh-c063f3bf-1787-4484-a75e-5bd8a8892a86.png" alt="">
<h1 class="chars">CHARACTERS</h1>
<!-- Toggle Button Start -->
<div class="toggle-switch">
<span class="toggle-label hero">Heroes</span>
<label class="toggle-button" for="toggle-input">
<input type="checkbox" class="toggle-input" id="toggle-input">
<div class="toggle-slider" id="toggle-slider"></div>
</label>
<span class="toggle-label villian">Villains</span>
</div>
</div>
<!--Card section start-->
<div class="container " id="cont">
<!--[Shinki] card Start-->
<div class="flip-card animate__animated animate__flipInX good ">
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="card-content">
<h2 class="card-title ">Shinki</h2>
</div>
<img data-src="./Images/Shinki.webp" alt="Shinki">
</div>
<div class="flip-card-back">
<p class="card-text">
In the anime, as a young boy, Shinki was unable to control his power prompting Gaara to
approach him. Fearful, he attacked the Kazekage, who surprised him by hugging him
despite
Shinki injuring him. Offering to teach Shinki how to use his power, he told Gaara his
name
before accepting his offer. Following the encounter, Gaara adopted him, and soon after
began teaching Shinki proper control of his power and how to effectively use it in
battle.
</p>
</div>
</div>
</div>
<div class="flip-card animate__animated animate__flipInX good">
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="card-content">
<h2 class="card-title ">Himawari Uzumaki</h2>
</div>
<img data-src="./Images/Himawari Uzumaki.jpg" alt="Himawari Uzumaki" height="330px"
width="300px">
</div>
<div class="flip-card-back">
<p class="card-text">
Himawari is the daughter of Naruto and Hinata, as well as the younger sister of Boruto.
</p>
</div>
</div>
</div>
<!--[Naruto] card start -->
<div class="flip-card animate__animated animate__flipInX good">
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="card-content">
<h2 class="card-title ">Naruto Uzumaki</h2>
</div>
<img data-src="./Images/naruto.png" alt="Naruto" height="260px" width="300px">
</div>
<div class="flip-card-back">
<p class="card-text">Naruto Uzumaki is the main protagonist in the popular manga and anime
series Naruto. He is a cheerful, hyperactive, strong-willed, and occasionally
simple-minded young shinobi from the village of Konoha (or Leaf Village).</p>
<p>Since Naruto has the Nine Tails Fox sealed inside him, he is able to use the Fox's
chakra, which is much greater than the average human. Initially Naruto and the Fox hated
each other, and would rarely grant Naruto his power
unless they were going to die. Eventually, they become friends, and Naruto then refers
to the fox by his name, Kurama. At this point, Naruto can use Kurama's chakra at
will.</p>
</div>
</div>
</div>
<!--[Naruto] card end -->
<!-- Hero [character name] card start-->
<div class="flip-card animate__animated animate__flipInX good">
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="card-content">
<h2 class="card-title">Konohamaru Sarutobi</h2>
</div>
<img data-src="https://static1.cbrimages.com/wordpress/wp-content/uploads/2019/11/Konohamaru-FactS.jpg?q=50&fit=contain&w=1140&h=&dpr=1.5"
of character] height="300px" width="300px" class="img_card">
</div>
<div class="flip-card-back">
<p class="card-text">Konohamaru Sarutobi (猿飛木ノ葉丸, Sarutobi Konohamaru) is a shinobi of
Konohagakure's Sarutobi clan. After later becoming a jōnin, he becomes the leader of his
own genin team. He strives to one day become Hokage after his idol, Naruto Uzumaki.</p>
<p>Konohamaru was born into the Sarutobi clan and was named after Konoha by his grandfather.
While being raised by his Anbu parents,[7] Konohamaru was never referred to by his name
by the villagers, only ever called "Honourable Grandson" (お孫様, Omago-sama) because of
his relationship to the Hokage. Wanting to be acknowledged as a person and not simply
the Hokage's grandson, Konohamaru began trying to defeat Hiruzen in order to replace him
as Hokage.</p>
</div>
</div>
</div>
<!-- Hero [character name] card end-->
<!--[Jiraiya] card start -->
<!--[Kawaki] card start -->
<div class="flip-card animate__animated animate__flipInX good">
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="card-content">
<h2 class="card-title ">Kawaki Uzumaki</h2>
</div>
<img data-src="./Images/kawaki_img2.jpg" alt="Kawaki" height="260px" width="300px">
</div>
<div class="flip-card-back">
<p class="card-text">Kawaki (カワキ, Kawaki) is a shinobi raised by Jigen and his organization
Kara to be the future vessel for Isshiki Ōtsutsuki. After being brought to Konohagakure,
he is taken in by Naruto Uzumaki and develops a brotherly bond with Boruto Uzumaki.</p>
<p>Kawaki is a fictional character from Ukyō Kodachi and Mikio Ikemoto's manga Boruto:
Naruto Next Generations. Initially appearing in the flashforward in the series' debut,
Kawaki is a young man who apparently would become the nemesis of the series' lead
character, Boruto Uzumaki. </p>
</div>
</div>
</div>
<!--[Kawaki] card end -->
<!--[Sasuke Uchiha] card start-->
<div class="flip-card animate__animated animate__flipInX good">
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="card-content">
<h2 class="card-title">Sasuke Uchiha</h2>
</div>
<img data-src="./Images/Sasuke.png" alt="Sasuke Uchiha" height="350px" width="250px">
</div>
<div class="flip-card-back">
<p class="card-text">Sasuke Uchiha (うちはサスケ, Uchiha Sasuke) is one of the last surviving
members of Konohagakure's Uchiha clan. After his older brother, Itachi, slaughtered
their clan, Sasuke made it his mission in life to avenge them by killing
Itachi. He is added to Team 7 upon becoming a ninja and, through competition with his
rival and best friend, Naruto Uzumaki, .</p>
</div>
</div>
</div>
<!-- [Sasuke Uchiha] card end-->
<!--[Moegi] card start-->
<div class="flip-card animate__animated animate__flipInX good">
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="card-content">
<h2 class="card-title">Moegi</h2>
</div>
<img data-src="https://i.pinimg.com/originals/25/de/af/25deaf7da91ee985d79d02d668c4b6c6.jpg" alt="Moegi" height="350px" width="250px">
</div>
<div class="flip-card-back">
<p class="card-text">Moegi (モエギ) is a kunoichi of Konohagakure and a member of Team 10.
She is known for her cheerful personality and her skills in ninjutsu. Moegi has a close
friendship with her teammates and often supports them in their missions.</p>
</div>
</div>
</div>
<!-- [Moegi] card end-->
<!-- [Sarada Uchiha] card start-->
<div class="flip-card animate__animated animate__flipInX good">
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="card-content">
<h2 class="card-title">Sarada Uchiha</h2>
</div>
<img data-src="./Images/Sarada_Infobox.webp" alt=Sarada height="300px" width="300px"
class="img_card">
</div>
<div class="flip-card-back">
<p class="card-text">Sarada Uchiha is the daughter of Sasuke Uchiha and Sakura Haruno.
She seems to have inherited traits from both her parents, like her mother's "Cha!"
verbal tic
and her father's aloofness and reluctance to acknowledge and commend others.
Sarada is the central character of Naruto: The Seventh Hokage and the Scarlet Spring,
searching for her estranged father while mistakenly feeling she and Sakura are not
related.
Gaining her Sharingan in the process,but not having a good first impression of her
father Sasuke,
Sarada feels hurt and betrayed when she incorrectly suspects being Karin's biological
child as the
two wear similar glasses. While Naruto helps her realize that family is not a matter of
blood,
Sarada eventually learns that Sakura is her biological mother as Karin later explains
she was Sakura's midwife. Before leaving again, Sasuke shows Sarada how much he loves
her by poking her
forehead, and promises to come home soon. Having admired Naruto and his dedication to
his village,
Sarada makes it her goal to become the next Hokage. Sarada is voiced by Kokoro Kikuchi
in Japanese,
while in the English version she is voiced by Laura Bailey in Naruto Shippuden: Ultimate
Ninja
Storm 4 and by Cherami Leigh in all subsequent appearances.</p>
</div>
</div>
</div>
<!--[Sarada Uchiha] card end-->
<!-- Villian [Toneri Ōtsutsuki] card start-->
<div class="flip-card animate__animated animate__flipInX evil">
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="card-content">
<h2 class="card-title">Toneri Ōtsutsuki</h2>
</div>
<img data-src="./Images/Toneri Ōtsutsuki.jpg" alt="Toneri Ōtsutsuki" height="250px"
width="300px" class="img_card">
</div>
<div class="flip-card-back">
<p class="card-text"></p>
<p>Toneri Ōtsutsuki is a descendant of Hamura Ōtsutsuki and the sole survivor of the
Ōtsutsuki Clan's branch family on the Moon.
Toneri carries hatred towards mankind for weaponising chakra and once plotted to destroy
humanity as punishment,
a goal which he states that the branch family of his clan desired for a thousand years.
He usually displays a calm and cool demeanour driven to completing the Thousand Year
Plan to wipe out the shinobi world.
</p>
</div>
</div>
</div>
<!-- Villian [Toneri Ōtsutsuki] card end-->
<!-- [Sumire kakei] card start-->
<div class="flip-card animate__animated animate__flipInX good">
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="card-content">
<h2 class="card-title">Sumire Kakei</h2>
</div>
<img src="./Images/sumire.jpg" alt="Sumire Kakei" height="393px" width="737px"
class="img_card">
</div>
<div class="flip-card-back">
<p class="card-text">
Sumire Kakei is a former member of Team 15 and a kunoichi of Konohagakure's Scientific
Ninja Weapons Team.
She served as the Ninja Academy's Class Representative for Boruto's class. After
Danzo Shimura passed away and the village learned of Root's existence and its deeds, all
of its members, including Sumire's family, were shunned.
This led to Sumire's mother's illness and eventual death.
Sumire was profoundly affected by the loss because one of her few delights was brushing
her hair with her mother.
Over time, Sumire lost even the memory of her mother's voice.
Tanuki Shigaraki, Sumire's father and a crazed Danzo devotee, raised her with the goal
of exacting revenge on Root.
He eventually awarded her the Gozu Tenno.</p>
</div>
</div>
</div>
<!--[Sumire Kakei] card end-->
<!--[SAKUMO HATAKE] card start-->
<div class="flip-card animate__animated animate__flipInX good">
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="card-content">
<h2 class="card-title">Sakumo Hatake</h2>
</div>
<img data-src="./Images/Sakumo_Hatake_pic.jpg" alt="Sakumo Hatake" height="350px"
width="250px">
</div>
<div class="flip-card-back">
<p class="card-text">Sakumo Hatake is the father of Kakashi Hatake. He was classified in the
same bracket as the Legendary Sannin. Sakumo earned the epithet of " White Fang of the
Hidden Leaf." His name was known throughout the other villages. Sakumo was also
responsible for the killing of Sasori's parents. Sakumo's life took a turn for the worse
when he chose to save the lives of his comrades instead of completing the mission.
Sakumo was rebuked for his decision and in the end, he fell into despair and then
committed suicide.</p>
</div>
</div>
</div>
<!-- [SAKUMO HATAKE] card end-->
<!-- [Itachi Uchiha] card start-->
<div class="flip-card animate__animated animate__flipInX good">
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="card-content">
<h2 class="card-title">Itachi Uchiha</h2>
</div>
<img data-src="./Images/Itachi_Uchiha.jpg" alt="Could not load image" height="300px"
width="300px">
</div>
<div class="flip-card-back">
<p class="card-text">Itachi Uchiha is a character in the Naruto manga and anime series
created by Masashi Kishimoto. Itachi is the older brother of Sasuke Uchiha, and is
responsible for killing all the members of their clan, sparing only Sasuke</p>
</div>
</div>
</div>
<div class="flip-card animate__animated animate__flipInX evil">
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="card-content">
<h2 class="card-title">Code</h2>
</div>
<img data-src="https://comicvine.gamespot.com/a/uploads/square_small/11112/111121983/7944995-6688316931-latest.png"
alt="Black Zetsu" height="300px" width="300px">
</div>
<div class="flip-card-back">
<p class="card-text">Code is the last active Inner from Kara. Carrying Isshiki Ōtsutsuki's
legacy within him..</p>
</div>
</div>
</div>
<!-- [Hayate Gekko] card start-->
<div class="flip-card animate__animated animate__flipInX good">
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="card-content">
<h2 class="card-title">Hayate Gekko</h2>
</div>
<img data-src="./Images/gekko.jpeg" alt="Hayate Gekko" height="300px" width="300px"
class="img_card">
</div>
<div class="flip-card-back">
<p class="card-text">Hayate was a tokubetsu jounin from the Hidden village of Konoha. He
served as the
proctor for the final round of the chunnin exams. He died fighting Baki from the Hidden
village of
Sand and was replaced by Genma Shiranui as the proctor for the chunnin exams. He was
later reanimated
by Kabuto during the fourth great ninja war.</p>
</div>
</div>
</div>
<!--[Hayate Gekko] card end-->
<!--[Princess Kasumi] card start-->
<div class="flip-card animate__animated animate__flipInX good">
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="card-content">
<h2 class="card-title">Princess Kasumi</h2>
</div>
<img data-src="./Images/Princess_kasumi.jpg" alt="Princess Kasumi" height="250px"
width="250px">
</div>
<div class="flip-card-back">
<p class="card-text">Kasumi (かすみ, Kasumi) or Princess Dusk (キリ姫, Kiri-hime) The main
antagonist of Naruto: Ultimate Ninja Heroes 2. She thirsts for revenge against Konoha
Village, but her anger is amplified by Orochimaru's manipulation.</p>
</div>
</div>
</div>
<!--[Princess Kasumi] card end-->
<!-- [Sai] card start-->
<div class="flip-card animate__animated animate__flipInX good">
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="card-content">
<h2 class="card-title">Sai Yamanaka</h2>
</div>
<img data-src="./Images/Sai_Infobox.png" alt="Sai Yamanaka" height="300px" width="300px">
</div>
<div class="flip-card-back">
<p class="card-text">Sai Yamanaka (山中サイ, Yamanaka Sai) is the Anbu Chief of
Konohagakure's Yamanaka clan. Prior to this, he was a Root member.
As per standard Root training, Sai was conditioned to remove all emotions and as such,
had difficulty connecting with others. When he is added to Team Kakashi as a replacement
for the rogue Sasuke Uchiha, Sai begins to learn more about people's feelings and tries
to develop his
personality and identity by forming genuine bonds and rediscovering the emotions he was
taught to suppress..</p>
</div>
</div>
</div>
<!--[Sai] card end-->
<!-- [Anko Mitarashi] card start-->
<div class="flip-card animate__animated animate__flipInX good">
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="card-content">
<h2 class="card-title">Anko Mitarashi</h2>
</div>
<img data-src="./Images/anko.jpg" alt="Anko Mitarashi" height="300px" width="300px">
</div>
<div class="flip-card-back">
<p class="card-text">The proctor of the survival leg of the Chuunin exams, she goes through
her enemies like a blazing inferno. She was once tutored by Orochimaru, but was
abandoned by him when she refused to follow his evil path.
Anko Mitarashi is a Jonin of the Hidden Leaf Village. She was a proctor of the survival
portion of the Chunin exams. She was also a former student of longtime series
antagonist, Orochimaru, but did not share his vision and refused to follow him further.
</p>
</div>
</div>
</div>
<!--[Anko Mitarashi] card end-->
<!-- [Chiriku] card start-->
<div class="flip-card animate__animated animate__flipInX good">
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="card-content">
<h2 class="card-title">Chiriku</h2>
</div>
<img data-src="./Images/chiriku.jpg" alt="Chiriku" height="300px" width="300px">
</div>
<div class="flip-card-back">
<p class="card-text">Chiriku is a Fire Temple monk, formerly a member of the “12 Guardian
Ninjas” of the Lord of the Fire Land. There he will meet Asuma Sarutobi, son of the
third Hokage. Their mission was to escort and protect the Daimyo of the Land of
Fire.</p>
<p>Today he lives in the Temple of Fire with his disciples. He took under his wing a young
man named Sora, the son of one of the 12 deceased guardian ninjas. His head having been
put on a price of 30 million ryos, he was assassinated by Kakuzu and Hidan during a
fight at the Fire temple. After this clash, the Fire Temple was destroyed. Hidan and
Kakuzu then returned the body to collect the bounty. And thus fill the crates of
Akatsuki.</p>
</div>
</div>
</div>
<!--[Chiriku] card end-->
<!-- [Fukusaku] card start-->
<div class="flip-card animate__animated animate__flipInX good">
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="card-content">
<h2 class="card-title">Fukusaku</h2>
</div>
<img src="./Images/Fukusaku.jpg" alt="Fukusaku" height="225px" width="300px"
class="img_card">
</div>
<div class="flip-card-back">
<p class="card-text">When Jiraiya accidentally reverse-summoned himself to Mount Myōboku,
Fukasaku greeted the young shinobi and stated that the Great Toad Sage was expecting
him.
Some time after this, Fukasaku taught Jiraiya senjutsu.
Fukasaku was later present when the Great Toad Sage called
for Jiraiya to tell him about his prophecy.</p>
<p>Fukasaku, like his wife Shima, is considered very wise and is greatly respected
by all who know them well enough. In reality, he constantly bickers with Shima
over small things when they should focus on the bigger picture, such as the fact
that a battle will cause them to miss dinner. They are still close, as Shima
is heartbroken after Fukasaku is killed by Pain. Though Fukasaku remains serious
in even the worst situation, he and his wife will constantly find a reason to bicker
with each other. He also has a tendency to call the Great Toad Sage, "senile" for
constantly forgetting everything</p>
</div>
</div>
</div>
<!--[Fukusaku] card end-->
<!-- [ten tails] card start-->
<div class="flip-card animate__animated animate__flipInX evil">
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="card-content">
<h2 class="card-title">Ten Tails - Juubi</h2>
</div>
<img data-src="./Images/ten tails.jpeg" alt="Ten Tails - Juubi" height="270px"
width="300px">
</div>
<div class="flip-card-back">
<p class="card-text">This Ten-Tails (十尾, Jūbi) is the combined form of Kaguya Ōtsutsuki and
the God Tree, created to reclaim the chakra inherited by her sons, Hagoromo and Hamura.
It is regarded as the progenitor of chakra, and is tied to the legend of the Sage of Six
Paths and the birth of shinobi. To end the beast's rampage, the Sage became the
Ten-Tails' jinchūriki and later split its chakra into the nine tailed beasts to prevent
it from causing further harm. Centuries later, its revival became the objective of
Madara and Obito Uchiha, who both sought to become the beast's jinchūriki in order to
further their objectives.</p>
</div>
</div>
</div>
<!--[ten tails] card end-->
<!-- [Eight Tails] card start -->
<div class="flip-card animate__animated animate__flipInX good">
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="card-content">
<h2 class="card-title">Eight Tails - Gyuki</h2>
</div>
<img data-src="./Images/Gyuki-Eight-Tails-in-Naruto.webp" alt="Eight Tails - Gyuki"
height="300px" width="300px">
</div>
<div class="flip-card-back">
<p class="card-text">Gyuki was sold to the Hidden Cloud village along with Matatabi, but the
nation struggled to find a Jinchuriki who could control it. One of these was Blue B, the
nephew of the Third Raikage, but after Gyuki went on a rampage, the Raikage was
forced to seal him away, causing his nephew's tragic death. Gyuki was ultimately sealed
within Killer Bee, the Third Raikage's adopted son, who surprisingly proved himself a
compatible host. Bee befriended his Bijuu through the power of rap, and their
relationship became perfectly two-way, allowing the ninja to draw out Eight-Tails' power
at will. Gyuki is an ox-like yokai with sheep horns and tentacle tails, and is regarded
as the second strongest bijuu.</p>
</div>
</div>
</div>
<!-- [Eight Tails] card end -->
<!-- [Seven Tails] card start -->
<div class="flip-card animate__animated animate__flipInX good">
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="card-content">
<h2 class="card-title">Seven-Tails - Chomei</h2>
</div>
<img data-src="./Images/Chomei-Seven-Tails-in-Naruto.webp" alt="Seven Tails - Chomei"
height="300px" width="300px">
</div>
<div class="flip-card-back">
<p class="card-text">Chomei was formerly sealed within Fu, a female ninja from the Hidden
Waterfall, after being sold to the village by Hashirama. This was unusual, since the
Waterfall isn't one of Naruto's five major nations, but were considered powerful enough
to be included in the arrangement. Naruto flashbacks show each of the tailed beasts as
babies, soon after their creation by the Sage of Six Paths, but while most of these
young creatures are cuter, smaller versions of their present-day selves, Chomei actually
took a larval state, reflecting its insect-like design as an adult. Chomei is similar to
a Japanese rhinoceros beetle, and compared to its Bijuu kin, is remarkably placid and
laid-back, which is likely why Chomei doesn't resemble typical demons in anime.</p>
</div>
</div>
</div>
<!-- [Seven Tails] card end -->
<!-- [Asura] card start-->
<div class="flip-card animate__animated animate__flipInX good">
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="card-content">
<h2 class="card-title">Asura</h2>
</div>
<img data-src="./Images/Asura.png" alt="Asura" height="300px" width="300px">
</div>
<div class="flip-card-back">
<p class="card-text">Asura Ōtsutsuki (大筒木アシュラ, Ōtsutsuki Ashura) was the younger son of
Hagoromo Ōtsutsuki. Though not the obvious choice to most, he would go on to inherit his
father's teachings, and as a result, would have to clash bitterly against his elder
brother Indra. Asura is also credited with being the progenitor of both the Senju and
Uzumaki clans.</p>
<p>With the power entrusted to him by his father, Asura gained access to the Six Paths
Senjutsu, allowing him to augment himself and his various techniques. In this state, he
could fly and manifest a giant three-faced, six-armed avatar, Six Paths: Kunitsukami.
</p>
</div>
</div>
</div>
<!--[Asura] card end-->
<!-- Hero Yoshino Nara card start-->
<div class="flip-card animate__animated animate__flipInX good">
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="card-content">
<h2 class="card-title">Yoshino Nara</h2>
</div>
<img data-src="./Images/YoshinoNara.jfif" alt="Yoshino Nara" height="300px" width="300px"
class="img_card">
</div>
<div class="flip-card-back">
<p class="card-text">
Yoshino Nara is a character in the "Naruto" series,
created by Masashi Kishimoto. She is a member of the Nara Clan,
a prominent and influential family in the Hidden Leaf Village.
Yoshino is the wife of Shikaku Nara and the mother of Shikamaru Nara,
who is one of the central characters in the series.</p>
<p>Yoshino Nara, while not a central character in the "Naruto" series,
is an important part of the Nara Clan and the broader Hidden Leaf Village community.
Her character reflects the strong family bonds and the supportive relationships
that are often explored in the series.
Yoshino Nara is not depicted as either good or evil in the "Naruto" series.
She is a neutral character and is primarily portrayed as a loving mother
and supportive wife. Yoshino's character does not engage
in acts of villainy or evil,
nor does she take on a hero or protagonist role. </p>
</div>
</div>
</div>
<!-- Hero Yoshino Nara card end-->
<!-- [Inuzuka Hana] card start-->
<div class="flip-card animate__animated animate__flipInX good">
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="card-content">
<h2 class="card-title">Inuzuka Hana</h2>
</div>
<img data-src="./Images/inuzuka_hana.jpg" alt="Inuzuka Hana" height="300px" width="300px">
</div>
<div class="flip-card-back">
<p class="card-text">Hana is a kunoichi from Konoha village. She is Kiba's sister and
Tsume's daughter</p>
<p>Hana also specializes in animal medicine: she is a veterinarian. His companions are 3 dog
brothers: Les Trois Frères Haimaru.</p>
</div>
</div>
</div>
<!-- Izumi Uchiha card start -->
<div class="flip-card animate__animated animate__flipInX good">
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="card-content">
<h2 class="card-title"> Izumi Uchiha </h2>
</div>
<img data-src="./Images/Izumi_Uchiha.jpg" alt="Izumi Uchiha" height="350px" width="380px">
</div>
<div class="flip-card-back">
<p class="card-text">Izumi was the daughter of Hazuki Uchiha. Unlike her mother, Izumi's
father was not an Uchiha.During the Nine-Tailed Demon Fox's Attack, her father died
while protecting her.From the grief brought on by his death, as well as feelings of
guilt that he would not have died had Izumi been stronger,Izumi eventually awakened her
Sharingan. She and her mother afterwards rejoined the Uchiha clan.</p>
<p>Izumi enrolled in Konoha's Academy a few years later.Like other girls her age, Izumi
developed a crush on Itachi Uchiha, a boy in the class next to hers.As such, she tried
to talk with him during school breaks, walk home with him after lessons, and defend him
from their peers' criticism. Itachi initially took the same disinterest in Izumi that he
had in all the other girls until discovering that she had the Sharingan, which he
himself had yet to awaken.He afterwards became warmer to her whenever their paths
crossed. </p>
</div>
</div>
</div>
<!-- Izumi Uchiha card end -->
<!-- [Neji Hyuga] card start-->
<div class="flip-card animate__animated animate__flipInX good">
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="card-content">
<h2 class="card-title">Neji Hyuga </h2>
</div>
<img data-src="./Images/neji-hyuga.jpg" alt="Neji Hyuga" height="300px" width="300px">
</div>
<div class="flip-card-back">
<p class="card-text">Neji Hyuga was a shinobi of Konohagakure's Hyūga clan. Though a prodigy
even by the Hyūga's standards, Neji was a member of the clan's branch house; no matter
how skilled he became, he would always be in service to the Hyūga's main house. </p>
<p>As a member of Team Guy he sought the strength necessary to make the future he wanted for
his family and friends, and ultimately sacrificed his life to protect the very same
person who taught him about the freedom of one's choice of fate, Naruto.</p>
</div>
</div>
</div>
<!--[Neji Hyuga] card end-->
<!-- Rôshi Card start -->
<div class="flip-card animate__animated animate__flipInX good">
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="card-content">
<h2 class="card-title">Rôshi</h2>
</div>
<img data-src="./Images/roshi.jpg" alt="Rôshi" height="300px" width="300px">
</div>
<div class="flip-card-back">
<p class="card-text">Rôshi was the last Jinchûriki of Yonbi, the 4-tailed demon. He was
killed by Kisame Hoshigaki, a former member of the Akatsuki, who aimed to reunite all
the Biju.</p>
<p>Rôshi will be resurrected later during the Fourth Great Ninja War by Kabuto Yakushi. He
will fight Bee and Naruto.</p>
</div>
</div>
</div>
<!--[Rôshi] card end-->
<!-- [Suigetsu] card start-->
<div class="flip-card animate__animated animate__flipInX evil">
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="card-content">
<h2 class="card-title">Suigetsu</h2>
</div>
<img data-src="./Images/Suigetsu.jpeg" alt="Suigetsu" height="300px" width="300px">
</div>
<div class="flip-card-back">
<p class="card-text">
Suigetsu was a member of Sasuke's renegade group consisting of himself, Suigetsu, Karin,
and Jugo. Of the quartet, Suigetsu was the self-styled comedian. He had plenty of
sarcastic lines and made every effort he could to get under Karin's skin.
</p>
<p>The above line was especially funny coming from Suigetsu, as the audience got the
distinct impression that he probably wasn't a true believer in Sasuke's dream. It was
even funnier in the moment, as he made a decisive gesture with a spoon he was using at
the time.</p>
</div>
</div>
</div>
<!--[Suigetsu] card end-->
<!-- [Boruto] card start -->
<div class="flip-card animate__animated animate__flipInX good">
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="card-content">
<h2 class="card-title"> Boruto Uzumaki</h2>
</div>
<img data-src="./Images/boruto.jpg" alt="Boruto Uzumaki" height="350px" width="380px">
</div>
<div class="flip-card-back">
<p class="card-text">Boruto Uzumaki (うずまきボルト, Uzumaki Boruto) is a shinobi from
Konohagakure's Uzumaki Clan and a direct descendant of the Hyūga clan through his
mother. Initially nonchalant in his duties as a member of Team 7 and resentful of his
father and the office of Hokage because it left him with no time for his family; Boruto
eventually comes to respect and reconcile with his father and his role as Hokage, yet
vows to become like his mentor Sasuke Uchiha — a support system for the Hokage and the
village.</p>
</div>
</div>
</div>
<!-- [Boruto] card end-->
<!-- Yukimaru card start -->
<div class="flip-card animate__animated animate__flipInX good">
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="card-content">
<h2 class="card-title"> Yukimaru </h2>
</div>
<img data-src="./Images/yukimaru.png" alt="Yukimaru" height="350px" width="380px">
</div>
<div class="flip-card-back">
<p class="card-text">Yukimaru is a young orphan who became one of Orochimaru's test
subjects, due to his ability to partially control the Three-Tails.</p>
<p>Yukimaru lived with his mother in a village that was attacked by Orochimaru's followers
when Yukimaru was a child.</p>
</div>
</div>
</div>
<!-- Yukimaru card end-->
<!-- Yamato card start-->
<div class="flip-card animate__animated animate__flipInX good">
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="card-content">
<h2 class="card-title">Yamato</h2>
</div>
<img data-src="./Images/yamato.png" alt="Yamato" height="300px" width="300px">
</div>
<div class="flip-card-back">
<p class="card-text">Yamato is a very discreet, cautious, careful and well prepared person.
He projects a calm, stoic demeanour in stressful situations. He takes his missions very
seriously, even insisting on being referred to by whatever his current codename</p>
<p>Yamato is one of the main supporting characters in the Naruto anime/manga series and the
Boruto: Naruto Next Generations anime/manga series. He is an ANBU in the service of
Konohagakure. Because of his unique jutsu, he is added to Team Kakashi as a temporary
for Kakashi Hatake. Though Kakashi eventually returns to the team, Yamato stays on to
provide assistance when he's needed.</p>
</div>
</div>
</div>
<!-- [Hanabi Hyuga] card start-->
<div class="flip-card animate__animated animate__flipInX good">
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="card-content">
<h2 class="card-title">Hanabi Hyuga</h2>
</div>
<img data-src="Images/download.jfif" alt="Hanabi Hyuga" height="350px" width="380px">
</div>
<div class="flip-card-back">
<p class="card-text">Hanabi is the younger sister of Hinata. She plays an important role in
The Last: Naruto the Movie. Her father is Hiashi Hyuga and is auntie to Hinata's
children, Boruto and Himawari. Her cousin is Neji Hyuga.
Naruto Uzumaki is her brother-in-law.</p>
</div>
</div>
</div>
<!--[Hanabi hyuga] card end-->
<!-- [Tsunade] card start-->
<div class="flip-card animate__animated animate__flipInX good">
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="card-content">
<h2 class="card-title">Tsunade</h2>
</div>
<img data-src="Images/Tsunade.jpg" alt="Tsunade" height="300px" width="300px">
</div>
<div class="flip-card-back">
<p class="card-text">Tsunade is a kunoichi from the Hidden Leaf Village and posses
Monstrous physical strength, extremely advanced healing and regenerative techniques,
physician/surgeon
level of knowledge of the human body and great Chakra control. At once formed part of
"The Legendary
Sannin" along with
Jiraiya and Orochimaru, and under the tutelage of the Third Hokage. Currently, she
has become the Fifth Hokage of The Hidden Leaf Village. Her grandparents are revealed to
be Hashirama
Senju and Mito Uzumaki.</p>
<p>Tsunade's trademark ability is her inhuman strength, which is derived from her
excellent chakra control. By storing chakra and releasing it at the point of contact,
she can enhance her strength to the point where she can break through boulders her bare
hands. She is also an extremely talented Medical-nin, and can heal wounds that most
others would consider impossible.
She went as far as to use the Shadow Seal: Release to store her chakra in her forehead
to Creation Rebirth, a technique that releases the chakra to rapidly regenerate the
cells in her body to heal any wound. It gives her a "immortality" in battle thateven
Orochimaru envied. However, because of the rapid cell regeneration, the technique
shortens her life similar to the Four-Tailed
transformation, however more controlled. Because of the risk associated with the
technique, Tsunade has made the choice to only use Creation Rebirth in extremely
desperate situations.</p>
</div>
</div>
</div>
<!--[Tsunade] card end-->
<!-- [Jirobo] card start-->
<div class="flip-card animate__animated animate__flipInX evil">
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="card-content">
<h2 class="card-title">Jirobo</h2>
</div>
<img data-src="https://www.giantbomb.com/a/uploads/scale_small/0/5756/330799-jirobo.jpg"
alt="Jirobo" height="300px" width="300px">
</div>
<div class="flip-card-back">
<p class="card-text">A ninja from The Hidden Sound Village and member of The Sound Five.he
was the physically strongest member of the Sound Four, but the weakest overall.
According to the other members of the group, nevertheless, he was a formidable opponent.
Furthermore, Shikamaru stated that Jirōbō's prowess was at jōnin-level. In the anime,
another testament to his prowess was him being chosen for reincarnation by Kabuto.</p>
</div>
</div>
</div>
<!-- [Jirobo] card end-->
<!-- [Hanare] card start-->
<div class="flip-card animate__animated animate__flipInX good">
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="card-content">
<h2 class="card-title">Hanare</h2>
</div>
<img data-src="https://qph.fs.quoracdn.net/main-qimg-85fae3ac8ec01ad91d4a5304cf3a2b1a"
alt="Hanare" height="300px" width="300px">
</div>
<div class="flip-card-back">
<p class="card-text">Hanare (ハナレ, Hanare) is a kunoichi from the Jōmae Village. </p>
<p>As a young child, Hanare was said to be very lonely since she had never known her family
or seen
her own village. She was trained from an early age in the art of espionage. One day, she
was
found crying in a place near her village by the young Kakashi, who spotted her and
carried her
on his back. He then explained to her that she can look up to the clouds above and find
her way.
They both were then seen by a ninja from Hanare's village and Kakashi put her down on
her feet,
said goodbye and left. She was then excited that someone like Kakashi was able to help
her in
her life.
At one point, she met Kakashi Hatake and developed romantic feelings for him. Hanare, a
spy from
Jōmae Village from the Land of Keys, was summoned to infiltrate the Land of Fire and to
investigate Konoha affairs. She was captured by Anbu and placed in the Honesty Room to
be
tortured. </p>
</div>
</div>
</div>
<!--[Hanare] card end-->
<!--[Fūka] card start-->
<div class="flip-card animate__animated animate__flipInX evil">
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="card-content">
<h2 class="card-title">Fūka</h2>
</div>
<img data-src="./Images/fuka.jpg" alt="Fūka" height="300px" width="300px">
</div>
<div class="flip-card-back">
<p class="card-text">Fūka was portrayed as a seductive vixen as a way to lure her prey in
and kill them with an Execution by Kiss.</p>
<p>She would further speed up the process by giving her targets a choice between a French or
traditional kiss. Her most preferable victims were those with a natural affinity for
wind chakra. She took great pride in her appearance and would become infuriated when any
harm came to her physical being, especially her hair, the very casing of her soul.
During her second fight against Naruto Uzumaki, she showcased a sadistic side when she
delighted in Naruto's anguish. She has shown an intelligent side as seen when she
thought that Sora and Naruto were connected somehow.</p>
</div>
</div>
</div>
<!--Fūka card end-->
<!-- Mizuki card start-->
<div class="flip-card animate__animated animate__flipInX evil">
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="card-content">
<h2 class="card-title">Mizuki</h2>
</div>
<img data-src="Images/Mizuki.png" alt="Mizuki" height="300px" width="300px">
</div>
<div class="flip-card-back">
<p class="card-text">The first-ever person whom Naruto faced in a battle in order to know
his power and also get to know about his own ninja way. He thrashed him in the battle
against him while saving Iruka Umino his sensei in his elementary Training Academy</p>
<p> Mizuki duped Naruto Uzumaki into stealing Konoha's Scroll of Seals for him. Originally,
Mizuki had the plan set up to have Naruto as a scapegoat and kill him to hide the truth
of his deception and secretly leave the village with the scroll in his possession.
However, Mizuki's plan is derailed when Iruka found Naruto first and decided to reveal
Naruto's identity as the Nine-Tails's jinchūriki to ensure he runs off disillusioned.
However, overhearing Iruka standing up for him, Naruto comes to his teacher's aid and
uses the Multiple Shadow Clone Technique he had learned from the scroll to beat Mizuki
unconscious for harming Iruka.</p>
</div>
</div>
</div>
<!--Mizuki card end-->
<!-- The Demon Brothers card start-->
<div class="flip-card animate__animated animate__flipInX evil">
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="card-content">
<h2 class="card-title">The Demon Brothers</h2>
</div>
<img data-src="Images/Naruto-Demon-Brothers.jpg" alt="The Demon Brothers" height="300px"
width="300px">
</div>
<div class="flip-card-back">
<p class="card-text">Naruto's first battle against non-Konoha ninja happened at the start of
the Land of Waves Escort Mission arc. Two allies of Zabuza waited outside of Konoha in
order to ambush Tazuna, who was being escorted by Team 7.</p>
<p>These were two former Hidden Mist shinobi, known as the Demon Brothers, who had defected
from their village in order to join Zabuza's coup.
Kakashi and Sasuke were able to easily dispose of the Demon Brothers and keep Tazuna
alive. They were then tied up next to a tree and left to be arrested.
We never actually see the Demon Brothers being arrested in the manga and escaping from
being tied up is one of the most basic parts of ninja training. Were the Demon Brothers
able to escape? If so, did they choose to abandon Zabuza? Why did they never reappear in
the story afterward?</p>
</div>
</div>
</div>
<!--The Demon Brothers card end-->
<!-- Tayuya Card start -->
<div class="flip-card animate__animated animate__flipInX evil">
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="card-content">
<h2 class="card-title">Tayuya</h2>
</div>
<img data-src="./Images/tayuya.jpg" alt="Tayuya" height="300px" width="300px">
</div>
<div class="flip-card-back">
<p class="card-text">A kunoichi from The Hidden Sound Village and a member of The Sound
Five.</p>
<p>Tayuya is one of Orochimaru's Sound Four Ninja. She is foul mouthed and ill tempered yet
very powerful. Her only weapon is a flute which she can use to summon three giant demons
known as the Doki. Tayuya is also very intelligent and can think up excellent strategies
and tactics.</p>
</div>
</div>
</div>
<!-- Tayuya Card End -->
<!-- Kagura card start-->
<div class="flip-card animate__animated animate__flipInX good">
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="card-content">
<h2 class="card-title">Kagura</h2>
</div>
<img data-src="https://www.giantbomb.com/a/uploads/scale_small/16/164924/2399930-kagura.png"
alt="Kagura" height="300px" width="300px">
</div>
<div class="flip-card-back">
<p class="card-text">The main villain of Clash of Ninja Revolution 2, she's an ex-ANBU
member.</p>
</div>
</div>
</div>
<!-- Kagura card end-->
<!-- Itachi Uchiha card start-->
<div class="flip-card animate__animated animate__flipInX evil">
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="card-content">
<h2 class="card-title">Itachi Uchiha</h2>
</div>
<img data-src="Images/itachi.png" alt="Itachi Uchiha" height="300px" width="300px">
</div>
<div class="flip-card-back">
<p class="card-text">Itachi Uchiha is a fictional character in the Naruto manga and anime
series created by Masashi Kishimoto.</p>
<p>Itachi is the older brother of Sasuke Uchiha, and is responsible for killing all the
members of their clan, sparing only Sasuke. He appears working as a terrorist from the
organisation Akatsuki and serves as Sasuke's greatest enemy. During the second part of
the manga, Itachi becomes involved in attacks to ninjas possessing tailed-beast
creatures until facing Sasuke in a one-on-one battle. Although Itachi perishes during
the final duel, it is later revealed that Itachi had a secret reason for assassinating
the Uchiha clan.</p>
</div>
</div>
</div>
<!--Itachi Uchiha card end-->
<!-- Isaribi card start-->
<div class="flip-card animate__animated animate__flipInX good">
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="card-content">
<h2 class="card-title">Isaribi</h2>
</div>
<img data-src="Images/Isaribi.jpg" alt="Isaribi" height="280px" width="400px">
</div>
<div class="flip-card-back">
<p class="card-text"> Isaribi was a part sea creature whose charecter arc was similar to
that of Naruto. She received a lot of hate for not being/behaving like the other members
of her clan. Naruto shows her the power of friendship and fills her with hope. Amachi-
the scientist to made Isaribi into the sea creature clearly exrpesses he had no
intentions of killing her but only wnated to disscet her once she became worthless to
him.</p>
</div>
</div>
</div>
<!-- Isaribi end-->
<!-- Bansai Card start -->
<div class="flip-card animate__animated animate__flipInX evil">
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="card-content">
<h2 class="card-title">Bansai</h2>
</div>
<img data-src="./Images/bansai.png" alt="Bansai" height="300px" width="300px">
</div>
<div class="flip-card-back">
<p class="card-text">Bansai is an elder ninja monk in the Fire Temple as well as the Head
Monk of the temple.</p>
<p>Bansai is a very kind person who cares about his comrades deeply as seen when he said a
prayer for Asuma Sarutobi before he set out for battle.</p>
</div>
</div>
</div>
<!-- Minato card start -->
<div class="flip-card animate__animated animate__flipInX good">
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="card-content">
<h2 class="card-title">Minato Namikaze</h2>
</div>
<img data-src="Images/minatoNew.jpg" alt="Minato" height="300px" width="300px">
</div>
<div class="flip-card-back">
<p class="card-text">Minato Namikaze is a character in the Naruto universe. He is better
known as The Fourth Hokage or as Konoha's Yellow Flash for his ability to use the Flying
Thunder God Technique. He is also the father of series protagonist, Naruto. He is the
teacher of Kakashi Hatake, Obito Uchiha and Rin Nohara. He is also one of Jiraiya's
students.</p>
</div>
</div>
</div>
<!-- Rajulkoshta Card Start -->
<div class="flip-card animate__animated animate__flipInX evil">
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="card-content">
<h2 class="card-title">Kawaki</h2>
</div>
<img data-src="./Images/kawaki2.jpg" alt="Kawaki" height="300px" width="300px">
</div>
<div class="flip-card-back">
<p class="card-text">Kawaki (カワキ, Kawaki) is a tattooed youth who became a member of Kara
after being brought by Jigen from a drunkard father, bearing a tattoo of the Roman
numeral IX under his left eye and bestowed a Kama mark by Jigen to be made into a living
weapon for Kara. He was heavily modified with microscopic Shinobi-Ware implanted in his
body that give him abilities similar to Jugo's Sage Transformation in altering his
physiology at a cellular level.</p>
<p> For reasons yet to be revealed, Kawaki left Kara and encountered Boruto who brings him
to the Hidden Leaf as he lives with the Uzumaki family. The two would end up becoming
enemies as hinted in prologue of the Boruto series, an older Kawaki appearing to have
perpetrated Konoha's destruction as he confronts an older Boruto while declaring the age
of shinobi has come to an end. His voice actor in the Japanese anime is Yūma Uchida.</p>
</div>
</div>
</div>
<!-- Rajulkoshta Card End -->
<!-- Eida Card start -->
<div class="flip-card animate__animated animate__flipInX evil">
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="card-content">
<h2 class="card-title">Eida</h2>
</div>
<img data-src="./Images/eida.png" alt="Eida" height="350px" width="350px">
</div>
<div class="flip-card-back">
<p class="card-text">In his plot to kill Jigen, Amado heavily modified Eida, along with her
younger brother Daemon with Shinobi-Ware with capabilities exceeding that of Jigen.
The effects of her modifications left her forever despising Amado.
Because of her superior might, Jigen had ordered for her disposal.
Boro was given the order.
However, affected by Eida's powers, Boro could not bring himself to complete the task,
and instead hid Eida and Daemon in a remote location operated by his cult for his own
uses.</p>
<p> Eida is a very cold and indifferent person.
She cares little for the events around her.
This comes from having grown bored in the life that was forced upon her.
</p>
</div>
</div>
</div>
<!-- Eida Card End -->
<!-- Daemon Card start -->
<div class="flip-card animate__animated animate__flipInX evil">
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="card-content">
<h2 class="card-title">Daemon</h2>
</div>
<img data-src="./Images/Daemon.webp" alt="Daemon" height="350px" width="350px">
</div>
<div class="flip-card-back">
<p class="card-text">Daemon used to be a member of Kara.
He was one of the cyborgs that Isshiki ordered to be dismantled.
However, Boro was allured by Ada, and he couldn't bring himself to finish the task, and
he was manipulated to safely store Ada and Daemon in pods for several years.
Later on, the two would be awakened by Code.</p>
</div>
</div>
</div>
<!-- Eida Card End -->
<!-- card start -->
<div class="flip-card animate__animated animate__flipInX evil">
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="card-content">
<h2 class="card-title">Nagato Uzumaki</h2>
</div>
<img data-src="./Images/nagato.png" alt="Nagato Uzumaki" height="320px" width="380px">
</div>
<div class="flip-card-back">
<p class="card-text">Nagato was known primarily under the alias of Pain. Nagato is the
figurehead leader of the Akatsuki who wishes to capture the tailed beasts sealed into
various people around the shinobi world. After acquiring and sealing most
of the beasts within a statue, Nagato's superior sends him to capture the Nine-Tailed
Demon Fox sealed inside the series' protagonist , Naruto Uzumaki (whom he turns out to
be related to). Before leaving to capture Naruto,
Nagato engages in a mortal battle with his former mentor, Jiraiya. His past as a war
orphan, and his loss of his best friend are explored. Due to his traumatic experiences,
which stemmed from human conflict, Nagato aims
to create a new world, free from the chaos of war.</p>
</div>
</div>
</div>
<!--card start-->
<div class="flip-card animate__animated animate__flipInX evil">
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="card-content">
<h2 class="card-title">YAMATO</h2>
</div>
<img data-src="./Images/yamato.png" alt="Yamato" height="350px" width="380px">
</div>
<div class="flip-card-back">
<p class="card-text">Seeing how pivotal of a role Kakashi played as the leader of Team Seven
with Naruto, Sakura, and Sasuke, there were high expectations for Yamato when he
temporarily filled Kakashi's leadership position with the new Team Seven.
As a former Anbu who shares the same wood-style technique as the First Hokage, Yamato
had a mysterious aura about him in an attempt to spark curiosity amongst fans. However,
after Kabuto captured him and Kakashi reclaimed leadership over Team Seven, Yamato
disappeared into the abyss and was left as a character without any agency.</p>
</div>
</div>
</div>
<!--card end-->
<!-- card start -->
<!-- card start -->
<div class="flip-card animate__animated animate__flipInX evil">
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="card-content">
<h2 class="card-title"> Yahiko </h2>
</div>
<img data-src="./Images/Yahiko.png" alt="Yahiko" height="350px" width="380px">
</div>
<div class="flip-card-back">
<p class="card-text">Yahiko (弥彦, Yahiko) was a shinobi from Amegakure. Alongside his fellow
war orphans, Nagato and Konan, he founded and led the Akatsuki in an attempt to bring
peace. Following Yahiko's death, Nagato would turn his body into the
Deva Path of his Six Paths of Pain, which he used as the continued public image of
Akatsuki's leadership.</p>
<p> Yahiko was orphaned during the Second Shinobi World War, forcing him to steal food in
order to survive prior to teaming
up with a fellow war orphan named Konan. Soon after they found a place to call home,
Yahiko expressed his displeasure from Konan bringing another war orphan. </p>
</div>
</div>
</div>
<div class="flip-card animate__animated animate__flipInX evil">
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="card-content">
<h2 class="card-title">Deidara</h2>
</div>
<img data-src="./Images/deidara69.jpg" alt="Deidara" height="300px" width="300px">
</div>
<div class="flip-card-back">
<p class="card-text">Deidara is a member of the Akatsuki group, Deidara was partnered with
Sasori before his death, after which he partnered Tobi.</p>
<p>Deidara has a very unique ability, he uses his hands where his palms posses mouths that
when feed a certain clay explosive can create a flying bird or many small spiders that
can be controlled or control them self after which will explode on command or when they
deem suitable.</p>
</div>
</div>
</div>
<!--card end-->
<!-- card start -->
<div class="flip-card animate__animated animate__flipInX evil">
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="card-content">
<h2 class="card-title"> Tsuande </h2>
</div>
<img data-src="./Images/Tsunadexx.png" alt="Tsuande" height="350px" width="380px">
</div>
<div class="flip-card-back">
<p class="card-text">Tsunade (綱手, Tsunade) is a descendant of the Senju and Uzumaki Clan,
and is one of Konohagakure's Sannin. She is famed as the world's strongest kunoichi and
its greatest medical-nin. The repeated loss of her loved ones caused Tsunade to later
abandon the life of a shinobi for many years. She is eventually persuaded to return to
Konoha and take on the mantle of Fifth Hokage (五代目火影, Godaime Hokage, literally meaning:
Fifth Fire Shadow), where her skills prove invaluable to the village.</p>
</div>
</div>
</div>
<!--card end-->
<!-- card start -->
<div class="flip-card animate__animated animate__flipInX evil">
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="card-content">
<h2 class="card-title"> Mei Terumī </h2>
</div>
<img data-src="./Images/mei.png" alt="Mei" height="350px" width="380px">
</div>
<div class="flip-card-back">
<p class="card-text">Mei Terumī is one of the supporting characters of the Naruto franchise.
She is the Fifth Mizukage of Kirigakure. She became Mizukage in recent years, after the
dreadful reign o
gitextract_1zp2od4h/ ├── .github/ │ └── workflows/ │ └── static.yml ├── .gitignore ├── CODE_OF_CONDUCT.md ├── Game.html ├── Game.js ├── Images/ │ ├── Sora b.jfif │ ├── Tazuna.jfif │ ├── YoshinoNara.jfif │ ├── download.jfif │ └── tsuande.jfif ├── LICENSE ├── README.md ├── about.html ├── audio.js ├── contact.html ├── contact.js ├── contributors.js ├── css/ │ ├── Game.css │ ├── contact.css │ ├── index.css │ ├── style.css │ └── translate.css ├── index.html ├── index.md ├── js/ │ ├── aboutdarkmode.js │ ├── indexdarkmode.js │ ├── lazyload.js │ ├── scrollEffect.js │ ├── scrolltotop.js │ ├── searchbar.js │ ├── smooth-scroll.js │ ├── sound.js │ ├── switch-toggle.js │ └── translate.js └── manifest.json
SYMBOL INDEX (17 symbols across 8 files)
FILE: Game.js
function startGame (line 364) | function startGame() {
function checkAnswer (line 374) | function checkAnswer() {
FILE: audio.js
function playPause (line 4) | function playPause(song) {
function reset (line 12) | function reset(btn, song) {
function progress (line 20) | function progress(btn, song) {
FILE: contact.js
function handleFormSubmit (line 6) | async function handleFormSubmit(event) {
FILE: contributors.js
function fetchContributors (line 8) | async function fetchContributors(pageNumber) {
function fetchAllContributors (line 22) | async function fetchAllContributors() {
FILE: js/aboutdarkmode.js
function darkmode (line 10) | function darkmode(){
function lightmode (line 19) | function lightmode(){
FILE: js/indexdarkmode.js
function darkmode (line 4) | function darkmode(){
function lightmode (line 10) | function lightmode(){
FILE: js/lazyload.js
function preloadImg (line 3) | function preloadImg(img){
FILE: js/switch-toggle.js
function hideCharacters (line 37) | function hideCharacters(characters) {
function showCharacters (line 43) | function showCharacters(characters) {
function addSlideInAnimation (line 50) | function addSlideInAnimation(images) {
function hideSlideInAnimation (line 56) | function hideSlideInAnimation(images) {
Condensed preview — 35 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (414K chars).
[
{
"path": ".github/workflows/static.yml",
"chars": 1134,
"preview": "# Simple workflow for deploying static content to GitHub Pages\nname: Deploy static content to Pages\n\non:\n # Runs on pus"
},
{
"path": ".gitignore",
"chars": 96,
"preview": "### ignore IDE specific folders ###\n.vscode\n.idea\n\n### ignore MacOS specific files ###\n.DS_Store"
},
{
"path": "CODE_OF_CONDUCT.md",
"chars": 5198,
"preview": "# Contributor Covenant Code of Conduct\n\n## Our Pledge\n\nWe as members, contributors, and leaders pledge to make participa"
},
{
"path": "Game.html",
"chars": 11956,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n\n<head>\n <link href=\"https://allfont.net/allfont.css?fonts=ninja-naruto\" rel=\"sty"
},
{
"path": "Game.js",
"chars": 13768,
"preview": "//data\nconst characters = [\n {\n name: [\"Naruto\", \"Naruto Uzumaki\", \"Uzumaki Naruto\"],\n hints: [\n "
},
{
"path": "LICENSE",
"chars": 1070,
"preview": "MIT License\n\nCopyright (c) 2026 vikhyat singh\n\nPermission is hereby granted, free of charge, to any person obtaining a c"
},
{
"path": "README.md",
"chars": 4596,
"preview": "\n\nHacktoberfest, in its 10th year, is a month-long celebration of open source software run by DigitalOcean. It is a grea"
},
{
"path": "about.html",
"chars": 10803,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-wi"
},
{
"path": "audio.js",
"chars": 1002,
"preview": "var nyan = document.getElementById(\"nyan\");\nvar nyanBtn = document.getElementById(\"nyan-btn\");\n\nfunction playPause(song)"
},
{
"path": "contact.html",
"chars": 8845,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <link href=\"https://allfont.net/allfont.css?fonts=ninja-naruto\" rel=\"sty"
},
{
"path": "contact.js",
"chars": 1421,
"preview": "// Sending Data to Mail\n\n// Listenig to form\nconst contactForm = document.querySelector(\".contact__form\");\n\nasync functi"
},
{
"path": "contributors.js",
"chars": 2088,
"preview": "const cont = document.getElementById('contributor');\n\n// Replace these with the owner and repository name of the reposit"
},
{
"path": "css/Game.css",
"chars": 1157,
"preview": "/* Naruto-themed CSS styles */\n.game-body {\n font-family: 'Arial', sans-serif;\n background-color: #f4f4f4;\n mar"
},
{
"path": "css/contact.css",
"chars": 8748,
"preview": "@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro);\n\n.contact_body {\n\n /* background: url(\"/adi image"
},
{
"path": "css/index.css",
"chars": 5068,
"preview": ".lightmode{\n z-index: 9724790009779558!important;\n\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bo"
},
{
"path": "css/style.css",
"chars": 26445,
"preview": "@import url('https://fonts.googleapis.com/css2?family=Arima:wght@100..700&family=Oswald:wght@200..700&display=swap');\n\n\n"
},
{
"path": "css/translate.css",
"chars": 1300,
"preview": ".light-mode #google_translate_element select{\n background:#F5F5DC!important;\n color:black;\n border: none;\n border-ra"
},
{
"path": "index.html",
"chars": 261736,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n\n<head>\n <link href=\"https://allfont.net/allfont.css?fonts=ninja-naruto\" rel=\"sty"
},
{
"path": "index.md",
"chars": 907,
"preview": " <!-- card end-->\n <div class=\"card mb-3 card-bg my-4\" style=\"max-width: 100%;\">\n <div "
},
{
"path": "js/aboutdarkmode.js",
"chars": 959,
"preview": "let buttonText = document.getElementById(\"darkmode-button\");\nlet theme=localStorage.getItem('theme');\n// let theme=lo"
},
{
"path": "js/indexdarkmode.js",
"chars": 781,
"preview": " let buttonText = document.getElementById(\"switch\");\n let theme=localStorage.getItem('theme');\nvar bodyelem=docume"
},
{
"path": "js/lazyload.js",
"chars": 655,
"preview": "const imgs=document.querySelectorAll(\"[data-src]\")\nlet imgOptions={threshold:0,rootMargin:\"0px 0px 600px 0px\"}\nfunction "
},
{
"path": "js/scrollEffect.js",
"chars": 520,
"preview": "const cards = document.querySelectorAll('.card');\n\nconst Options = {\n thresold: 1,\n rootMargin: \"0px 0px -150px 0p"
},
{
"path": "js/scrolltotop.js",
"chars": 131,
"preview": "document.getElementById('scrolltopBtn').onclick = () => {\n window.scrollTo({\n top: 0,\n behavior: 'smoot"
},
{
"path": "js/searchbar.js",
"chars": 1088,
"preview": "const icon = document.querySelector('.icon');\nconst search = document.querySelector('.search');\nconst clearbtn = documen"
},
{
"path": "js/smooth-scroll.js",
"chars": 19256,
"preview": "/*! SmoothScroll v16.1.4 | (c) 2020 Chris Ferdinandi | MIT License | http://github.com/cferdinandi/smooth-scroll */\n(fun"
},
{
"path": "js/sound.js",
"chars": 161,
"preview": "\n\nsetTimeout(()=>{\n (()=>{\n let sound=document.getElementsByTagName('audio')[0];\n sound.play()\n "
},
{
"path": "js/switch-toggle.js",
"chars": 1926,
"preview": "/* \n Add the class good/evil to make the character show when the good or evil slider is toggled. Simply leave no clas"
},
{
"path": "js/translate.js",
"chars": 1822,
"preview": "$('document').ready(function () {\n$('#google_translate_element').on(\"click\", function () {\n $(\"iframe\").contents().fi"
},
{
"path": "manifest.json",
"chars": 401,
"preview": "{\n \"name\": \"Naruto-Shippuden\",\n \"version\": \"1.0.0\",\n \"description\": \"Character List\",\n \"manifest_version\": 3"
}
]
// ... and 5 more files (download for full content)
About this extraction
This page contains the full source code of the vikhyatsingh123/Naruto-Shippuden GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 35 files (385.8 KB), approximately 86.9k tokens, and a symbol index with 17 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.