<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Top 10 Anime</title>
<link href="https://fonts.googleapis.com/css2?
family=Poppins:wght@300;500;700&display=swap" rel="stylesheet">
<style>
* { box-sizing: border-box; }
body {
margin: 0;
padding: 0;
background-image: url('https://images.hdqwalls.com/wallpapers/tanjiro-
kamado-demon-slayer-ot.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
background-color: #000;
}
h1 {
text-align: center;
font-size: 3em;
margin-bottom: 50px;
text-shadow: 0 0 10px #000;
color: white;
}
h3 {
text-align: center;
font-size: 1em;
margin-top: 100px;
color: white;
}
.anime-container {
display: grid;
gap: 30px;
max-width: 1200px;
margin: auto;
}
.anime-card {
display: flex;
justify-content: space-between;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-radius: 15px;
padding: 20px;
box-shadow: 0 8px 16px rgba(0,0,0,0.3);
flex-wrap: wrap;
}
.anime-info {
flex: 1;
min-width: 250px;
padding-right: 20px;
}
.anime-card h2 {
margin-top: 0;
}
.dropdown-content {
display: none;
font-size: 0.95em;
line-height: 1.6;
}
.dropdown-btn {
margin-top: 20px;
background: none;
border: 1px solid #fff;
padding: 8px 12px;
border-radius: 5px;
color: #fff;
cursor: pointer;
transition: 0.2s;
}
.dropdown-btn:hover {
background-color: rgba(255, 255, 255, 0.2);
}
.anime-image {
flex-shrink: 0;
width: 150px;
height: 225px;
object-fit: cover;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0,0,0,0.4);
}
.intro-text {
opacity: 1;
transition: opacity 0.3s ease;
}
.intro-text.hide {
opacity: 0;
height: 0;
overflow: hidden;
}
@media (max-width: 768px) {
.anime-card {
flex-direction: column;
align-items: center;
text-align: center;
}
.anime-info {
padding: 0;
}
.anime-image {
margin-top: 20px;
width: 80%;
height: auto;
}
.background-overlay {
position: fixed;
top: 0; left: 0;
width: 100%;
height: 100%;
background-image: url('your-image.jpg');
background-size: cover;
background-position: center;
filter: brightness(-20%) blur(3px);
z-index: -1;
}
}
</style>
</head>
<body>
<div class="background-overlay"></div>
<h1>Top 10 Anime Series/Movie</h1>
<div class="anime-container">
<div class="anime-card">
<div class="anime-info">
<h2>1. Demon Slayer: Kimetsu no Yaiba</h2>
<p class="intro-text"><b>Studio: Ufotable – Year Released: 2019 – Genre:
Action, Supernatural Award: Tokyo Anime Award (Anime of the Year 2020)</b><br>
A visually stunning tale of a young boy, Tanjiro, who becomes a demon slayer after
his family is slaughtered and his sister is turned into a demon.</p>
<button class="dropdown-btn" onclick="toggleDropdown(this)">Show
Details</button>
<div class="dropdown-content">
<p>This anime is absolute perfection. From the plot to the action scenes,
it's the pinnacle of anime. I'm beyond excited for the movie coming out this
year.</p>
<p><strong>Rating:</strong> 10/10</p>
</div>
</div>
<img src="https://encrypted-tbn0.gstatic.com/images?
q=tbn:ANd9GcQz1kXkuLZ6JxUL66L60OTzNX-JemrDrt-lnQ&usqp=CAU" class="anime-image"
alt="DS">
</div>
<div class="anime-card">
<div class="anime-info">
<h2>2. Attack on Titan</h2>
<p class="intro-text"><b>Studio: Wit Studio / MAPPA – Year Released: 2013 –
Genre: Action, Drama, Dark Fantasy Award: Tokyo Anime Award (Animation of the Year
2014)</b><br>
In a world under siege by man-eating giants, a group of soldiers fights for
humanity’s survival, uncovering dark secrets along the way.</p>
<button class="dropdown-btn" onclick="toggleDropdown(this)">Show
Details</button>
<div class="dropdown-content">
<p>I remember binge-watching this series before the pandemic hit. It was
an emotional rollercoaster for me, and I’m still haunted by Sasha’s death.</p>
<p><strong>Rating:</strong> 9.8/10</p>
</div>
</div>
<img src="https://encrypted-tbn0.gstatic.com/images?
q=tbn:ANd9GcQh9EzBCPAVFSuw3HGRMyVx9Du1rKaSlLvkZQ&usqp=CAU" class="anime-image"
alt="aot">
</div>
<div class="anime-card">
<div class="anime-info">
<h2>Your Name: Kimi no Na Wa</h2>
<p class="intro-text"><b>Studio: CoMix Wave Films – Year Released: 2016 –
Genre: Romance, Fantasy, Drama Award: Japan Academy Prize for Animation of the
Year</b><br>
Two teenagers mysteriously swap bodies and form a deep connection that transcends
time, distance, and memory.</p>
<button class="dropdown-btn" onclick="toggleDropdown(this)">Show
Details</button>
<div class="dropdown-content">
<p>The first time I watched this movie was during Holy Week when it aired
on television. It was my first-ever anime film, and I was so surprised that it made
me cry. At the time, I thought it was strange to be moved by an anime, but it was
truly magical. Even now, I still find myself crying every time I watch it.</p>
<p><strong>Rating:</strong> 9.6/10</p>
</div>
</div>
<img src="https://encrypted-tbn0.gstatic.com/images?
q=tbn:ANd9GcTOH31Bmyba2oyfFRZNZLKCS5HhYTRMcaPt2Q&usqp=CAU" class="anime-image"
alt="YN">
</div>
<div class="anime-card">
<div class="anime-info">
<h2>4. Jujutsu Kaisen</h2>
<p class="intro-text"><b>Studio: MAPPA – Year Released: 2020 – Genre:
Action, Supernatural, Dark Fantasy Award: Crunchyroll Anime of the Year
2021</b><br>
A high school student gains cursed powers and joins a secret organization fighting
deadly supernatural beings.</p>
<button class="dropdown-btn" onclick="toggleDropdown(this)">Show
Details</button>
<div class="dropdown-content">
<p>What I love about this anime is its unique power system; I’d love to
live in that world. Please bring back Nobara!</p>
<p><strong>Rating:</strong> 9.5/10</p>
</div>
</div>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTh-
TXtzYihN3O_lyOaJ6CY9VqGqi5c9HzLuw&usqp=CAU" class="anime-image" alt="JJK">
</div>
<div class="anime-card">
<div class="anime-info">
<h2>5. Chainsawman</h2>
<p class="intro-text"><b>Studio: MAPPA – Year Released: 2022 – Genre:
Action, Horror, Dark Fantasy Award: Crunchyroll Anime Awards 2023 (Best New
Series)</b><br>
Denji, a debt-ridden teen, merges with his pet devil and becomes Chainsaw Man,
battling devils in a gritty, chaotic world.</p>
<button class="dropdown-btn" onclick="toggleDropdown(this)">Show
Details</button>
<div class="dropdown-content">
<p>Just like JJK, the power system in this series is also top-notch. I
really appreciate the unpredictability it offers. My favorite character has to be
Angel.?</p>
<p><strong>Rating:</strong> 9.4/10</p>
</div>
</div>
<img src="https://encrypted-tbn0.gstatic.com/images?
q=tbn:ANd9GcTId_6LTcn1d5zlUYvssZfGftM0-KJvibYhNQ&usqp=CAU" class="anime-image"
alt="CM">
</div>
<div class="anime-card">
<div class="anime-info">
<h2>6. Black Clover</h2>
<p class="intro-text"><b>Studio: Studio Pierrot – Year Released: 2017 –
Genre: Action, Fantasy, Adventure Award: Nominated in multiple anime awards</b><br>
Two orphaned boys compete to become the Wizard King in a magic-filled kingdom,
overcoming hardships and rivalry.</p>
<button class="dropdown-btn" onclick="toggleDropdown(this)">Show
Details</button>
<div class="dropdown-content">
<p>Although the animation in this series can be inconsistent, I still
love the characters. This anime taught me the value of friendship and the
importance of never giving up.</p>
<p><strong>Rating:</strong> 9.2/10</p>
</div>
</div>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT4m2-
8tMnth_So_HAqFeck-k12ny80bh8FxQ&usqp=CAU" class="anime-image" alt="BC">
</div>
<div class="anime-card">
<div class="anime-info">
<h2>7. A Promised Neverland</h2>
<p class="intro-text"><b>Studio: CloverWorks – Year Released: 2019 – Genre:
Thriller, Mystery, Dark Fantasy Award: Tokyo Anime Award Festival (Top 100)</b><br>
A group of gifted children discovers a horrifying truth about their orphanage and
plans a daring escape.</p>
<button class="dropdown-btn" onclick="toggleDropdown(this)">Show
Details</button>
<div class="dropdown-content">
<p>The story of this anime is incredibly gut-wrenching and sad. I never
expected to be rooting for kids to escape. While the ending wasn't exactly what I
had hoped for, it was still a great experience overall.</p>
<p><strong>Rating:</strong> 9.0/10</p>
</div>
</div>
<img src="https://encrypted-tbn0.gstatic.com/images?
q=tbn:ANd9GcSGyCFbSZOyusC03jF4G8l4vmYwZ9d3C5Dv9A&usqp=CAU" class="anime-image"
alt="APN">
</div>
<div class="anime-card">
<div class="anime-info">
<h2>Fairytail</h2>
<p class="intro-text"><b>Studio: A-1 Pictures / Satelight – Year Released:
2009 – Genre: Adventure, Fantasy, Action Award: Anime Grand Prix 2010</b><br>
Follow Natsu and his friends from the Fairy Tail guild as they take on powerful
enemies and form unbreakable bonds.</p>
<button class="dropdown-btn" onclick="toggleDropdown(this)">Show
Details</button>
<div class="dropdown-content">
<p>This is a classic. I watched it a long time ago, and to be honest, I
can’t remember most of it, but I know I enjoyed it back then. It has a similar vibe
to Black Clover.</p>
<p><strong>Rating:</strong> 8.8/10</p>
</div>
</div>
<img src="https://encrypted-tbn0.gstatic.com/images?
q=tbn:ANd9GcTNnBHiFN_FuGH9HtXkOOXtX3yjzhRXls-Gjw&usqp=CAU" class="anime-image"
alt="F">
</div>
<div class="anime-card">
<div class="anime-info">
<h2>9. A Silent Voice</h2>
<p class="intro-text"><b>Studio: Kyoto Animation – Year Released: 2016 –
Genre: Drama, Slice of Life Award: Japan Movie Critics Awards (Best
Animation)</b><br>
A heartfelt story of redemption and forgiveness, as a boy who once bullied a deaf
girl tries to make amends.</p>
<button class="dropdown-btn" onclick="toggleDropdown(this)">Show
Details</button>
<div class="dropdown-content">
<p>Similar to Your Name, I also watched this anime during Holy Week a
long time ago. It was a sad watch, but it taught me that your past mistakes don’t
define who you are.</p>
<p><strong>Rating:</strong> 8.8/10</p>
</div>
</div>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS9n5yBOIj-
e3bFp4SyL3KSLEifziE7hgMXoQ&usqp=CAU" class="anime-image" alt="ASV">
</div>
<div class="anime-card">
<div class="anime-info">
<h2>10. Frieren: Beyond Journey's End</h2>
<p class="intro-text"><b>Studio: Madhouse – Year Released: 2023 – Genre:
Fantasy, Adventure, Drama Award: Anime Trending Awards 2024 (Anime of the
Year)</b><br>
An elf mage reflects on her past after a hero’s journey ends, exploring grief,
growth, and the passage of time.</p>
<button class="dropdown-btn" onclick="toggleDropdown(this)">Show
Details</button>
<div class="dropdown-content">
<p>This is the only anime on the list that I haven't watched yet; I’ve
only seen short clips of it on TikTok. My best friend has said a lot of great
things about it, and I think if I watch it, it would definitely rise in my
rankings.</p>
<p><strong>Rating:</strong> 8.5/10</p>
</div>
</div>
<img src="https://encrypted-tbn0.gstatic.com/images?
q=tbn:ANd9GcQpPXaoWuNVmaPOhyY8b_vxYppNgcJeMrd2jA&usqp=CAU" class="anime-image"
alt="FR">
</div>
<script>
function toggleDropdown(btn) {
const dropdown = btn.nextElementSibling;
const introText = btn.previousElementSibling;
const isVisible = dropdown.style.display === 'block';
dropdown.style.display = isVisible ? 'none' : 'block';
if (introText && introText.classList.contains('intro-text')) {
introText.classList.toggle('hide');
}
btn.textContent = isVisible ? 'Show Details' : 'Hide Details';
}
</script>
<h3>Author: Mark S. Omaguing</h3>
</body>
</html>
