kaguranana-birthday-project/index.html

1243 lines
67 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Kagura Nana 2022 Birthday Project</title>
<meta name="description" content="Kagura Nana BDay Project desu.">
<!-- The Modal -->
<div id="myModal" class="modal">
<span class="close">&times;</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>
<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=Yomogi&display=swap" rel="stylesheet">
<link href="./style.css" rel="stylesheet">
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/granim/2.0.0/granim.min.js"
integrity="sha512-CmlPTWm5+a1Gt2YSNk2rGZVvbH3Zge6imS7M4/vrhC8d+A1RcehmLxWMqUdv8aEu7pwfTo74EtnrR+8Cf8KdCA=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js"></script>
</head>
<body>
<div id="particles-js" class="w-screen h-full fixed -z-10"></div>
<div class="absolute top-0 right-0">
<img src="./img/chili_7.png" width="50" height="50" class="transform -translate-x-2 rotate-12"
title="大好きだぁ゛">
</div>
<div class="container mx-auto pt-6 z-10">
<section class="container flex flex-col justify-center">
<h1 class="text-center font-sans text-7xl font-bold p-6" data-aos="fade-in" data-aos-duration="1500"
style="font-family: 'Yomogi', cursive;">
ナナちゃん、<br>
お誕生日おめでとう!
</h1>
<h1 class="text-center text-4xl font-normal" data-aos="fade-in">
Happy Birthday, Nana-chan!
</h1>
<p>
<section class="container pt-12 pb-6">
<h1 class="text-center text-3xl font-normal">Messages from Chililians</h1>
<h3 class="text-center text-3xl font-normal" style="font-family: 'Yomogi', cursive;">なな辛軍からのメッセージ</h3>
<div class="container grid grid-cols-1 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 place-items-center">
<!-- Card -->
<div class="w-11/12 md:w-md lg:w-md xl:w-lg rounded shadow-lg bg-white mt-4 mb-4" data-aos="fade-up" data-aos-anchor-placement="center-bottom">
<div class="px-4 py-4">
<div class="flex flex-row flex-nowrap justify-between">
<div class="flex flex-col">
<p class="font-bold text-xl">Sebas</p>
<p class="text-gray-500 text-sm font-mono">@sebazabe</p>
</div>
<img src="./img/chili_7.png" width="50" height="50"
class="transition transform rotate-12 translate-x-4 -translate-y-4 hover:scale-125">
</div>
<img class="myImages" id="myImg" src="">
<p class="text-gray-700 text-base mt-2">
HAPPY BIRTHDAY NANAAAAA.<br>I hope you have a great day! <br>Nana is life, Nana is Love~ <br>Big and Strong hug ❤
</p>
</div>
</div>
<!-- Card -->
<div class="w-11/12 md:w-md lg:w-md xl:w-lg rounded shadow-lg bg-white mt-4 mb-4" data-aos="fade-up" data-aos-anchor-placement="center-bottom">
<div class="px-4 py-4">
<div class="flex flex-row flex-nowrap justify-between">
<div class="flex flex-col">
<p class="font-bold text-xl">Raymond Laurence</p>
<p class="text-gray-500 text-sm font-mono">@raymond_lcl</p>
</div>
<img src="./img/chili_7.png" width="50" height="50"
class="transition transform rotate-12 translate-x-4 -translate-y-4 hover:scale-125">
</div>
<img class="myImages" id="myImg" src="">
<p class="text-gray-700 text-base mt-2">
Hey, Nana! You deserve to eat and drink your favorites today because it is your birthday! Happy Birthday! I&#x27;m wishing you all the happiness and love in the world. 今日の主役は君なんだので楽しみください!!
</p>
</div>
</div>
<!-- Card -->
<div class="w-11/12 md:w-md lg:w-md xl:w-lg rounded shadow-lg bg-white mt-4 mb-4" data-aos="fade-up" data-aos-anchor-placement="center-bottom">
<div class="px-4 py-4">
<div class="flex flex-row flex-nowrap justify-between">
<div class="flex flex-col">
<p class="font-bold text-xl">exile</p>
<p class="text-gray-500 text-sm font-mono">@Exile_something</p>
</div>
<img src="./img/chili_7.png" width="50" height="50"
class="transition transform rotate-12 translate-x-4 -translate-y-4 hover:scale-125">
</div>
<img class="myImages" id="myImg" src="">
<p class="text-gray-700 text-base mt-2">
happy birthday mama nanaaa!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
</p>
</div>
</div>
<!-- Card -->
<div class="w-11/12 md:w-md lg:w-md xl:w-lg rounded shadow-lg bg-white mt-4 mb-4" data-aos="fade-up" data-aos-anchor-placement="center-bottom">
<div class="px-4 py-4">
<div class="flex flex-row flex-nowrap justify-between">
<div class="flex flex-col">
<p class="font-bold text-xl">Monkinator</p>
<p class="text-gray-500 text-sm font-mono">@InarThe</p>
</div>
<img src="./img/chili_7.png" width="50" height="50"
class="transition transform rotate-12 translate-x-4 -translate-y-4 hover:scale-125">
</div>
<img class="myImages" id="myImg" src="">
<p class="text-gray-700 text-base mt-2">
Hi, Nana! I was introduced to you by ame, the project contributor, since then I get to learn more about you and what you did! Such as illustrating for Ayame, singing for Tantei wa mo Shinderu and many more! I love your motivation for gaming (no win no end), I love how dedicated you are to a project! Dai suki!
</p>
</div>
</div>
<!-- Card -->
<div class="w-11/12 md:w-md lg:w-md xl:w-lg rounded shadow-lg bg-white mt-4 mb-4" data-aos="fade-up" data-aos-anchor-placement="center-bottom">
<div class="px-4 py-4">
<div class="flex flex-row flex-nowrap justify-between">
<div class="flex flex-col">
<p class="font-bold text-xl">Sale</p>
<p class="text-gray-500 text-sm font-mono">@yuri_trash_</p>
</div>
<img src="./img/chili_7.png" width="50" height="50"
class="transition transform rotate-12 translate-x-4 -translate-y-4 hover:scale-125">
</div>
<img class="myImages" id="myImg" src="">
<p class="text-gray-700 text-base mt-2">
Happy birthday Kagura Nana! Im a big fan and Ill continue to support you forever!!!!!!
</p>
</div>
</div>
<!-- Card -->
<div class="w-11/12 md:w-md lg:w-md xl:w-lg rounded shadow-lg bg-white mt-4 mb-4" data-aos="fade-up" data-aos-anchor-placement="center-bottom">
<div class="px-4 py-4">
<div class="flex flex-row flex-nowrap justify-between">
<div class="flex flex-col">
<p class="font-bold text-xl">NoBreadEatLead</p>
<p class="text-gray-500 text-sm font-mono">@nobreadeatlead</p>
</div>
<img src="./img/chili_7.png" width="50" height="50"
class="transition transform rotate-12 translate-x-4 -translate-y-4 hover:scale-125">
</div>
<img class="myImages" id="myImg" src="">
<p class="text-gray-700 text-base mt-2">
ナナさん、お誕生日おめでとうございます!!<br>あやめちゃんなど愛された娘たち産まれて、そしていつも神(楽)絵やお歌ありがとうございます!<br>これからよろしくおねがいします!!!
</p>
</div>
</div>
<!-- Card -->
<div class="w-11/12 md:w-md lg:w-md xl:w-lg rounded shadow-lg bg-white mt-4 mb-4" data-aos="fade-up" data-aos-anchor-placement="center-bottom">
<div class="px-4 py-4">
<div class="flex flex-row flex-nowrap justify-between">
<div class="flex flex-col">
<p class="font-bold text-xl">ScarLetHrt</p>
<p class="text-gray-500 text-sm font-mono">@HrtScarlet</p>
</div>
<img src="./img/chili_7.png" width="50" height="50"
class="transition transform rotate-12 translate-x-4 -translate-y-4 hover:scale-125">
</div>
<img class="myImages" id="myImg" src="">
<p class="text-gray-700 text-base mt-2">
Kagura-mama—! ! Happy Birthday~! ! ! I wish the best for you. I hope that you will be happy this year too!!
</p>
</div>
</div>
<!-- Card -->
<div class="w-11/12 md:w-md lg:w-md xl:w-lg rounded shadow-lg bg-white mt-4 mb-4" data-aos="fade-up" data-aos-anchor-placement="center-bottom">
<div class="px-4 py-4">
<div class="flex flex-row flex-nowrap justify-between">
<div class="flex flex-col">
<p class="font-bold text-xl">Fufu</p>
<p class="text-gray-500 text-sm font-mono">@FuFuwithaGun</p>
</div>
<img src="./img/chili_7.png" width="50" height="50"
class="transition transform rotate-12 translate-x-4 -translate-y-4 hover:scale-125">
</div>
<img class="myImages" id="myImg" src="">
<p class="text-gray-700 text-base mt-2">
Hi Nana-Sensei,<br><br>Happy Birthday yaayyyyyy and thank you so much for everything you done so far. The first time i started to watch you i knew it that your going to be my favourite VTuber. I really like your art, character and your soft, lovley voice. Everytime when i watch your stream i forget everything in my mind and just having fun watching you. Your actually helped me a lot with your character and thats why you are special for me. Even tho i&#x27;m a boy i want to be like you i literally look up at you. Have a nice birthday party with your friends and a lot of fun <br><br>Dear Fufu
</p>
</div>
</div>
<!-- Card -->
<div class="w-11/12 md:w-md lg:w-md xl:w-lg rounded shadow-lg bg-white mt-4 mb-4" data-aos="fade-up" data-aos-anchor-placement="center-bottom">
<div class="px-4 py-4">
<div class="flex flex-row flex-nowrap justify-between">
<div class="flex flex-col">
<p class="font-bold text-xl">Drake_Grazer</p>
<p class="text-gray-500 text-sm font-mono">@Drake_Grazer</p>
</div>
<img src="./img/chili_7.png" width="50" height="50"
class="transition transform rotate-12 translate-x-4 -translate-y-4 hover:scale-125">
</div>
<img class="myImages" id="myImg" src="">
<p class="text-gray-700 text-base mt-2">
Happy birthday Nana-chan! Your singing and streams always make me smile. Here&#x27;s to another year of fun memories~! ^w^)
</p>
</div>
</div>
<!-- Card -->
<div class="w-11/12 md:w-md lg:w-md xl:w-lg rounded shadow-lg bg-white mt-4 mb-4" data-aos="fade-up" data-aos-anchor-placement="center-bottom">
<div class="px-4 py-4">
<div class="flex flex-row flex-nowrap justify-between">
<div class="flex flex-col">
<p class="font-bold text-xl">アコニー(Acony)</p>
<p class="text-gray-500 text-sm font-mono">@vtakonitto</p>
</div>
<img src="./img/chili_7.png" width="50" height="50"
class="transition transform rotate-12 translate-x-4 -translate-y-4 hover:scale-125">
</div>
<img class="myImages" id="myImg" src="">
<p class="text-gray-700 text-base mt-2">
ななかぐら先生、カグラナナ様、誕生日おめでとうございます。昨年は自らが掲げていた目標を見事に達成し、感動しました。今後ますます活動の幅が広がるかと思いますが、これからも応援しています。<br>Happy birthday to Nanakagura-sensei and Kaguranana!<br>Last year you achieved a goal that you set yourself and it was very impressive.<br>I&#x27;m sure that you will be expanding your activities more and more in the future, and I will continue to root for you.<br>[Using the DeepL translation]
</p>
</div>
</div>
<!-- Card -->
<div class="w-11/12 md:w-md lg:w-md xl:w-lg rounded shadow-lg bg-white mt-4 mb-4" data-aos="fade-up" data-aos-anchor-placement="center-bottom">
<div class="px-4 py-4">
<div class="flex flex-row flex-nowrap justify-between">
<div class="flex flex-col">
<p class="font-bold text-xl">Jin Teramachi</p>
<p class="text-gray-500 text-sm font-mono">@JTeramachi</p>
</div>
<img src="./img/chili_7.png" width="50" height="50"
class="transition transform rotate-12 translate-x-4 -translate-y-4 hover:scale-125">
</div>
<img class="myImages" id="myImg" src="">
<p class="text-gray-700 text-base mt-2">
ナナさん、お誕生日おめでとうございます。<br>ナナさんのデザインと声が途轍もなく好きです。<br><br>この特別な日をあなたの好きなように過ごせれば幸いです。<br>応援しています!
</p>
</div>
</div>
<!-- Card -->
<div class="w-11/12 md:w-md lg:w-md xl:w-lg rounded shadow-lg bg-white mt-4 mb-4" data-aos="fade-up" data-aos-anchor-placement="center-bottom">
<div class="px-4 py-4">
<div class="flex flex-row flex-nowrap justify-between">
<div class="flex flex-col">
<p class="font-bold text-xl">光Joel</p>
<p class="text-gray-500 text-sm font-mono">@hikarijoel</p>
</div>
<img src="./img/chili_7.png" width="50" height="50"
class="transition transform rotate-12 translate-x-4 -translate-y-4 hover:scale-125">
</div>
<img class="myImages" id="myImg" src="">
<p class="text-gray-700 text-base mt-2">
Nana-san, happy birthday! May god bless you, and let&#x27;s have more fun!! I love you &lt;3
</p>
</div>
</div>
<!-- Card -->
<div class="w-11/12 md:w-md lg:w-md xl:w-lg rounded shadow-lg bg-white mt-4 mb-4" data-aos="fade-up" data-aos-anchor-placement="center-bottom">
<div class="px-4 py-4">
<div class="flex flex-row flex-nowrap justify-between">
<div class="flex flex-col">
<p class="font-bold text-xl">IAmVisco</p>
<p class="text-gray-500 text-sm font-mono">@IAmVisco</p>
</div>
<img src="./img/chili_7.png" width="50" height="50"
class="transition transform rotate-12 translate-x-4 -translate-y-4 hover:scale-125">
</div>
<img class="myImages" id="myImg" src="">
<p class="text-gray-700 text-base mt-2">
ななさん、お誕生日おめでとうございます!<br>今年歌ってみた動画や可愛いイラストをいっぱい投稿してくれてありがとう!いつも本当に元気もらいます。これからも色々楽しみにしてます!<br>幸せな一年になるますように!
</p>
</div>
</div>
<!-- Card -->
<div class="w-11/12 md:w-md lg:w-md xl:w-lg rounded shadow-lg bg-white mt-4 mb-4" data-aos="fade-up" data-aos-anchor-placement="center-bottom">
<div class="px-4 py-4">
<div class="flex flex-row flex-nowrap justify-between">
<div class="flex flex-col">
<p class="font-bold text-xl">versita</p>
<p class="text-gray-500 text-sm font-mono">@versitawaa</p>
</div>
<img src="./img/chili_7.png" width="50" height="50"
class="transition transform rotate-12 translate-x-4 -translate-y-4 hover:scale-125">
</div>
<img class="myImages" id="myImg" src="">
<p class="text-gray-700 text-base mt-2">
Happy Birthday Nana! I really enjoy watching your streams and listening to your singing so I&#x27;ll continue to support you this year too! I love you Nana!
</p>
</div>
</div>
<!-- Card -->
<div class="w-11/12 md:w-md lg:w-md xl:w-lg rounded shadow-lg bg-white mt-4 mb-4" data-aos="fade-up" data-aos-anchor-placement="center-bottom">
<div class="px-4 py-4">
<div class="flex flex-row flex-nowrap justify-between">
<div class="flex flex-col">
<p class="font-bold text-xl">Cres ー クレス</p>
<p class="text-gray-500 text-sm font-mono">@</p>
</div>
<img src="./img/chili_7.png" width="50" height="50"
class="transition transform rotate-12 translate-x-4 -translate-y-4 hover:scale-125">
</div>
<img class="myImages" id="myImg" src="">
<p class="text-gray-700 text-base mt-2">
ナナちゃんお誕生日おめでとう! いつも面白いの配信をしてくれてありがとう!これからも一緒に楽しいこと楽しみ!ずっと応援するよ!
</p>
</div>
</div>
<!-- Card -->
<div class="w-11/12 md:w-md lg:w-md xl:w-lg rounded shadow-lg bg-white mt-4 mb-4" data-aos="fade-up" data-aos-anchor-placement="center-bottom">
<div class="px-4 py-4">
<div class="flex flex-row flex-nowrap justify-between">
<div class="flex flex-col">
<p class="font-bold text-xl">Deyui</p>
<p class="text-gray-500 text-sm font-mono">@</p>
</div>
<img src="./img/chili_7.png" width="50" height="50"
class="transition transform rotate-12 translate-x-4 -translate-y-4 hover:scale-125">
</div>
<img class="myImages" id="myImg" src="https://cdn.discordapp.com/attachments/930390441721991238/930391106242367519/public_wm.jpg">
<p class="text-gray-700 text-base mt-2">
ナナさん、お誕生日おめでとうございます!,<br>いつも私たちのために頑張ってくれてありがとうございます <br><br>ナナさんは素晴らしいイラストレーターや歌手やVTuberです<br>尊敬しています! 私もいつかナナさんのようになりたいです!<br><br>お身体も大切になさってくださいね(っ &#x27;&#x27;
</p>
</div>
</div>
<!-- Card -->
<div class="w-11/12 md:w-md lg:w-md xl:w-lg rounded shadow-lg bg-white mt-4 mb-4" data-aos="fade-up" data-aos-anchor-placement="center-bottom">
<div class="px-4 py-4">
<div class="flex flex-row flex-nowrap justify-between">
<div class="flex flex-col">
<p class="font-bold text-xl">AyaVi</p>
<p class="text-gray-500 text-sm font-mono">@AyaVi8</p>
</div>
<img src="./img/chili_7.png" width="50" height="50"
class="transition transform rotate-12 translate-x-4 -translate-y-4 hover:scale-125">
</div>
<img class="myImages" id="myImg" src="https://cdn.discordapp.com/attachments/930047253492666408/930047365660934194/nana-birthday.jpg">
<p class="text-gray-700 text-base mt-2">
It&#x27;s your special day today Nana-san! Happy birthday Nana-san! Well, since it is your birthday today Nana-san, enjoy it to the fullest cause you bought us so much surprises, joy, and fun and today is the day you become the recipient of joy! Happy birthday again Nana-san!
</p>
</div>
</div>
<!-- Card -->
<div class="w-11/12 md:w-md lg:w-md xl:w-lg rounded shadow-lg bg-white mt-4 mb-4" data-aos="fade-up" data-aos-anchor-placement="center-bottom">
<div class="px-4 py-4">
<div class="flex flex-row flex-nowrap justify-between">
<div class="flex flex-col">
<p class="font-bold text-xl">Enma</p>
<p class="text-gray-500 text-sm font-mono">@</p>
</div>
<img src="./img/chili_7.png" width="50" height="50"
class="transition transform rotate-12 translate-x-4 -translate-y-4 hover:scale-125">
</div>
<img class="myImages" id="myImg" src="">
<p class="text-gray-700 text-base mt-2">
Happy Birthday
</p>
</div>
</div>
<!-- Card -->
<div class="w-11/12 md:w-md lg:w-md xl:w-lg rounded shadow-lg bg-white mt-4 mb-4" data-aos="fade-up" data-aos-anchor-placement="center-bottom">
<div class="px-4 py-4">
<div class="flex flex-row flex-nowrap justify-between">
<div class="flex flex-col">
<p class="font-bold text-xl">Pororo</p>
<p class="text-gray-500 text-sm font-mono">@poro_rororo</p>
</div>
<img src="./img/chili_7.png" width="50" height="50"
class="transition transform rotate-12 translate-x-4 -translate-y-4 hover:scale-125">
</div>
<img class="myImages" id="myImg" src="">
<p class="text-gray-700 text-base mt-2">
hey hey hey! From streaming, to singing, and seeing your illustrations, I saw them all! Thank you for putting so much passion, time and work. I am always very grateful and happy to see you do the things you love. Keep up the amazing work and I&#x27;ll always be here to support you! With that said, have an amazing happy birthday and the year ahead! much luv &lt;3
</p>
</div>
</div>
<!-- Card -->
<div class="w-11/12 md:w-md lg:w-md xl:w-lg rounded shadow-lg bg-white mt-4 mb-4" data-aos="fade-up" data-aos-anchor-placement="center-bottom">
<div class="px-4 py-4">
<div class="flex flex-row flex-nowrap justify-between">
<div class="flex flex-col">
<p class="font-bold text-xl">UMR_7520</p>
<p class="text-gray-500 text-sm font-mono">@UMR_Hungry</p>
</div>
<img src="./img/chili_7.png" width="50" height="50"
class="transition transform rotate-12 translate-x-4 -translate-y-4 hover:scale-125">
</div>
<img class="myImages" id="myImg" src="https://cdn.discordapp.com/attachments/847870734059044904/928974617316573204/HBD_NANA_147.png">
<p class="text-gray-700 text-base mt-2">
ナナ、お誕生日おめでとう〜!🎉🎉<br>ナナの配信と歌めっちゃくちゃ好き!✨<br>ナナは世界で一番かわいいと優しな人✨✨<br>ナナの優しな声めっちゃ好き!❤️<br>ナナ大好き!❤️<br><br>Happy Birthday Nana! 🎁💝<br>I wish you happiness and joy and hope you can smile always! \(≧▽≦)/
</p>
</div>
</div>
<!-- Card -->
<div class="w-11/12 md:w-md lg:w-md xl:w-lg rounded shadow-lg bg-white mt-4 mb-4" data-aos="fade-up" data-aos-anchor-placement="center-bottom">
<div class="px-4 py-4">
<div class="flex flex-row flex-nowrap justify-between">
<div class="flex flex-col">
<p class="font-bold text-xl">Destiny</p>
<p class="text-gray-500 text-sm font-mono">@</p>
</div>
<img src="./img/chili_7.png" width="50" height="50"
class="transition transform rotate-12 translate-x-4 -translate-y-4 hover:scale-125">
</div>
<img class="myImages" id="myImg" src="">
<p class="text-gray-700 text-base mt-2">
Happy Birthday, Nana. Let&#x27;s have fun on this year&#x27;s birthday too!
</p>
</div>
</div>
<!-- Card -->
<div class="w-11/12 md:w-md lg:w-md xl:w-lg rounded shadow-lg bg-white mt-4 mb-4" data-aos="fade-up" data-aos-anchor-placement="center-bottom">
<div class="px-4 py-4">
<div class="flex flex-row flex-nowrap justify-between">
<div class="flex flex-col">
<p class="font-bold text-xl">Eien</p>
<p class="text-gray-500 text-sm font-mono">@Eien_chi</p>
</div>
<img src="./img/chili_7.png" width="50" height="50"
class="transition transform rotate-12 translate-x-4 -translate-y-4 hover:scale-125">
</div>
<img class="myImages" id="myImg" src="">
<p class="text-gray-700 text-base mt-2">
Happy Birthday, Nana! I&#x27;m watching you for a long time, and it&#x27;s always was great. Covers, streams, drawings. Simply everything is great. I wish you to achieve every goal you set for this year!
</p>
</div>
</div>
<!-- Card -->
<div class="w-11/12 md:w-md lg:w-md xl:w-lg rounded shadow-lg bg-white mt-4 mb-4" data-aos="fade-up" data-aos-anchor-placement="center-bottom">
<div class="px-4 py-4">
<div class="flex flex-row flex-nowrap justify-between">
<div class="flex flex-col">
<p class="font-bold text-xl">Sakitos</p>
<p class="text-gray-500 text-sm font-mono">@</p>
</div>
<img src="./img/chili_7.png" width="50" height="50"
class="transition transform rotate-12 translate-x-4 -translate-y-4 hover:scale-125">
</div>
<img class="myImages" id="myImg" src="">
<p class="text-gray-700 text-base mt-2">
Happy birthday, Nana-mama, cutest mama in the world.
</p>
</div>
</div>
<!-- Card -->
<div class="w-11/12 md:w-md lg:w-md xl:w-lg rounded shadow-lg bg-white mt-4 mb-4" data-aos="fade-up" data-aos-anchor-placement="center-bottom">
<div class="px-4 py-4">
<div class="flex flex-row flex-nowrap justify-between">
<div class="flex flex-col">
<p class="font-bold text-xl">Kevin Shi</p>
<p class="text-gray-500 text-sm font-mono">@KevinShi3</p>
</div>
<img src="./img/chili_7.png" width="50" height="50"
class="transition transform rotate-12 translate-x-4 -translate-y-4 hover:scale-125">
</div>
<img class="myImages" id="myImg" src="">
<p class="text-gray-700 text-base mt-2">
I hope you have a great birthday! Looking forward to your streams this year as well!
</p>
</div>
</div>
<!-- Card -->
<div class="w-11/12 md:w-md lg:w-md xl:w-lg rounded shadow-lg bg-white mt-4 mb-4" data-aos="fade-up" data-aos-anchor-placement="center-bottom">
<div class="px-4 py-4">
<div class="flex flex-row flex-nowrap justify-between">
<div class="flex flex-col">
<p class="font-bold text-xl">Panpeko</p>
<p class="text-gray-500 text-sm font-mono">@</p>
</div>
<img src="./img/chili_7.png" width="50" height="50"
class="transition transform rotate-12 translate-x-4 -translate-y-4 hover:scale-125">
</div>
<img class="myImages" id="myImg" src="">
<p class="text-gray-700 text-base mt-2">
Happy Birthday Nana!! Congratulations on all that you have achieved since your last birthday, and we can&#x27;t wait to see more of your content. Thank you for all your hard work, please keep doing what you love no matter how difficult times get! Again, Happy Birthday and love from Texas!
</p>
</div>
</div>
<!-- Card -->
<div class="w-11/12 md:w-md lg:w-md xl:w-lg rounded shadow-lg bg-white mt-4 mb-4" data-aos="fade-up" data-aos-anchor-placement="center-bottom">
<div class="px-4 py-4">
<div class="flex flex-row flex-nowrap justify-between">
<div class="flex flex-col">
<p class="font-bold text-xl">UnsavouryHanji</p>
<p class="text-gray-500 text-sm font-mono">@unsavoured</p>
</div>
<img src="./img/chili_7.png" width="50" height="50"
class="transition transform rotate-12 translate-x-4 -translate-y-4 hover:scale-125">
</div>
<img class="myImages" id="myImg" src="">
<p class="text-gray-700 text-base mt-2">
Happy Birthday Nana san, watching you has always been really fun. I always try to turn up for your streams. Its been a pleasure watching you. And I definitely am not a DD, #OnlyNana
</p>
</div>
</div>
<!-- Card -->
<div class="w-11/12 md:w-md lg:w-md xl:w-lg rounded shadow-lg bg-white mt-4 mb-4" data-aos="fade-up" data-aos-anchor-placement="center-bottom">
<div class="px-4 py-4">
<div class="flex flex-row flex-nowrap justify-between">
<div class="flex flex-col">
<p class="font-bold text-xl">Aura</p>
<p class="text-gray-500 text-sm font-mono">@</p>
</div>
<img src="./img/chili_7.png" width="50" height="50"
class="transition transform rotate-12 translate-x-4 -translate-y-4 hover:scale-125">
</div>
<img class="myImages" id="myImg" src="">
<p class="text-gray-700 text-base mt-2">
Happy birthday nana chan~<br>thank for always keep doing your best!!!<br>hope you always having fun and enjoy yourself \o/<br>take care and stay well always~<br>wish you the best in the future too!!
</p>
</div>
</div>
<!-- Card -->
<div class="w-11/12 md:w-md lg:w-md xl:w-lg rounded shadow-lg bg-white mt-4 mb-4" data-aos="fade-up" data-aos-anchor-placement="center-bottom">
<div class="px-4 py-4">
<div class="flex flex-row flex-nowrap justify-between">
<div class="flex flex-col">
<p class="font-bold text-xl">ミリナノ</p>
<p class="text-gray-500 text-sm font-mono">@miri689</p>
</div>
<img src="./img/chili_7.png" width="50" height="50"
class="transition transform rotate-12 translate-x-4 -translate-y-4 hover:scale-125">
</div>
<img class="myImages" id="myImg" src="">
<p class="text-gray-700 text-base mt-2">
なな先生、お誕生日おめでとうございます!!!<br>先生の絵や歌声、姿をさまざまな場でたくさん見ることができてとても幸せです!<br>辛い事や大変な事も沢山あったと思います。それでも諦めずに頑張る先生の姿に元気をもらいました!これからも先生のやりたい事が達成できることを応援しています。<br>新しい1年もなな先生、ナナちゃん共に素晴らしい1年になりますように♪
</p>
</div>
</div>
<!-- Card -->
<div class="w-11/12 md:w-md lg:w-md xl:w-lg rounded shadow-lg bg-white mt-4 mb-4" data-aos="fade-up" data-aos-anchor-placement="center-bottom">
<div class="px-4 py-4">
<div class="flex flex-row flex-nowrap justify-between">
<div class="flex flex-col">
<p class="font-bold text-xl">Mr JD</p>
<p class="text-gray-500 text-sm font-mono">@Mister_Jadey</p>
</div>
<img src="./img/chili_7.png" width="50" height="50"
class="transition transform rotate-12 translate-x-4 -translate-y-4 hover:scale-125">
</div>
<img class="myImages" id="myImg" src="">
<p class="text-gray-700 text-base mt-2">
Hello! first of all, im not that active in the youtube chat, but i always watch and wait for your stream, even though sometimes i cannot finish the stream, but still its fun interacting with you on youtube especially when &quot;DD Time&quot; is there and you strangle us to death, anyways 誕生日おめでとう, hoping that this year it will be great to you that you will face all the hardships and challenges<br>PS. Nihonggo wa muzukashi desu
</p>
</div>
</div>
<!-- Card -->
<div class="w-11/12 md:w-md lg:w-md xl:w-lg rounded shadow-lg bg-white mt-4 mb-4" data-aos="fade-up" data-aos-anchor-placement="center-bottom">
<div class="px-4 py-4">
<div class="flex flex-row flex-nowrap justify-between">
<div class="flex flex-col">
<p class="font-bold text-xl">Cheliax</p>
<p class="text-gray-500 text-sm font-mono">@Cheliax</p>
</div>
<img src="./img/chili_7.png" width="50" height="50"
class="transition transform rotate-12 translate-x-4 -translate-y-4 hover:scale-125">
</div>
<img class="myImages" id="myImg" src="">
<p class="text-gray-700 text-base mt-2">
Happy Birthday, Nana!! Thank you for everything! I hope you have a wonderful 2022!
</p>
</div>
</div>
<!-- Card -->
<div class="w-11/12 md:w-md lg:w-md xl:w-lg rounded shadow-lg bg-white mt-4 mb-4" data-aos="fade-up" data-aos-anchor-placement="center-bottom">
<div class="px-4 py-4">
<div class="flex flex-row flex-nowrap justify-between">
<div class="flex flex-col">
<p class="font-bold text-xl">Fiilea</p>
<p class="text-gray-500 text-sm font-mono">@</p>
</div>
<img src="./img/chili_7.png" width="50" height="50"
class="transition transform rotate-12 translate-x-4 -translate-y-4 hover:scale-125">
</div>
<img class="myImages" id="myImg" src="">
<p class="text-gray-700 text-base mt-2">
Hello Nana, Happy Birthday!!! I really enjoyed your streams and singing!! CAKE CAKE CAKE CAKE CHILLI-
</p>
</div>
</div>
<!-- Card -->
<div class="w-11/12 md:w-md lg:w-md xl:w-lg rounded shadow-lg bg-white mt-4 mb-4" data-aos="fade-up" data-aos-anchor-placement="center-bottom">
<div class="px-4 py-4">
<div class="flex flex-row flex-nowrap justify-between">
<div class="flex flex-col">
<p class="font-bold text-xl">Emil</p>
<p class="text-gray-500 text-sm font-mono">@Limeyomnicron</p>
</div>
<img src="./img/chili_7.png" width="50" height="50"
class="transition transform rotate-12 translate-x-4 -translate-y-4 hover:scale-125">
</div>
<img class="myImages" id="myImg" src="">
<p class="text-gray-700 text-base mt-2">
Happy Birthday Nana! Hoping you have a great day and rest of the year!!
</p>
</div>
</div>
<!-- Card -->
<div class="w-11/12 md:w-md lg:w-md xl:w-lg rounded shadow-lg bg-white mt-4 mb-4" data-aos="fade-up" data-aos-anchor-placement="center-bottom">
<div class="px-4 py-4">
<div class="flex flex-row flex-nowrap justify-between">
<div class="flex flex-col">
<p class="font-bold text-xl">Hitomaru</p>
<p class="text-gray-500 text-sm font-mono">@HitomaruKonpaku</p>
</div>
<img src="./img/chili_7.png" width="50" height="50"
class="transition transform rotate-12 translate-x-4 -translate-y-4 hover:scale-125">
</div>
<img class="myImages" id="myImg" src="">
<p class="text-gray-700 text-base mt-2">
ナナ大好き!!!
</p>
</div>
</div>
<!-- Card -->
<div class="w-11/12 md:w-md lg:w-md xl:w-lg rounded shadow-lg bg-white mt-4 mb-4" data-aos="fade-up" data-aos-anchor-placement="center-bottom">
<div class="px-4 py-4">
<div class="flex flex-row flex-nowrap justify-between">
<div class="flex flex-col">
<p class="font-bold text-xl">Mika</p>
<p class="text-gray-500 text-sm font-mono">@mikayu_1</p>
</div>
<img src="./img/chili_7.png" width="50" height="50"
class="transition transform rotate-12 translate-x-4 -translate-y-4 hover:scale-125">
</div>
<img class="myImages" id="myImg" src="https://cdn.discordapp.com/attachments/911843747258581024/928791226017263647/Nana_bday.png">
<p class="text-gray-700 text-base mt-2">
お誕生日おめでとうございます!今年もよろしくお願いします!( ̄^ ̄)ゞ
</p>
</div>
</div>
<!-- Card -->
<div class="w-11/12 md:w-md lg:w-md xl:w-lg rounded shadow-lg bg-white mt-4 mb-4" data-aos="fade-up" data-aos-anchor-placement="center-bottom">
<div class="px-4 py-4">
<div class="flex flex-row flex-nowrap justify-between">
<div class="flex flex-col">
<p class="font-bold text-xl">Shadow Tisalode</p>
<p class="text-gray-500 text-sm font-mono">@tisalode</p>
</div>
<img src="./img/chili_7.png" width="50" height="50"
class="transition transform rotate-12 translate-x-4 -translate-y-4 hover:scale-125">
</div>
<img class="myImages" id="myImg" src="./img/Nana-Shadow_Tisalode.png">
<p class="text-gray-700 text-base mt-2">
Thank you for making my days better with your streams, covers, and art. You&#x27;ve been a great inspiration and have been part of the inspiration that really got me to start drawing. Otanjoubi omedetou.
</p>
</div>
</div>
<!-- Card -->
<div class="w-11/12 md:w-md lg:w-md xl:w-lg rounded shadow-lg bg-white mt-4 mb-4" data-aos="fade-up" data-aos-anchor-placement="center-bottom">
<div class="px-4 py-4">
<div class="flex flex-row flex-nowrap justify-between">
<div class="flex flex-col">
<p class="font-bold text-xl">死神キラキ</p>
<p class="text-gray-500 text-sm font-mono">@kiraki_reaper</p>
</div>
<img src="./img/chili_7.png" width="50" height="50"
class="transition transform rotate-12 translate-x-4 -translate-y-4 hover:scale-125">
</div>
<img class="myImages" id="myImg" src="">
<p class="text-gray-700 text-base mt-2">
ナナママ、お誕生日おめでとうございます!!<br>ナナママのイラストと声にとても好きです。ナナママの歌はよく聞きますが、とてもいいです。これからも応援しています
</p>
</div>
</div>
<!-- Card -->
<div class="w-11/12 md:w-md lg:w-md xl:w-lg rounded shadow-lg bg-white mt-4 mb-4" data-aos="fade-up" data-aos-anchor-placement="center-bottom">
<div class="px-4 py-4">
<div class="flex flex-row flex-nowrap justify-between">
<div class="flex flex-col">
<p class="font-bold text-xl">Doggie</p>
<p class="text-gray-500 text-sm font-mono">@nodoggie_</p>
</div>
<img src="./img/chili_7.png" width="50" height="50"
class="transition transform rotate-12 translate-x-4 -translate-y-4 hover:scale-125">
</div>
<img class="myImages" id="myImg" src="">
<p class="text-gray-700 text-base mt-2">
I can&#x27;t give you a gift because I haven&#x27;t found a talent to use to make a gift. You make my heart explode and I love you Nana! I wish you a happy birthday, and I hope your year gets better. &lt;3
</p>
</div>
</div>
<!-- Card -->
<div class="w-11/12 md:w-md lg:w-md xl:w-lg rounded shadow-lg bg-white mt-4 mb-4" data-aos="fade-up" data-aos-anchor-placement="center-bottom">
<div class="px-4 py-4">
<div class="flex flex-row flex-nowrap justify-between">
<div class="flex flex-col">
<p class="font-bold text-xl">五十嵐苺</p>
<p class="text-gray-500 text-sm font-mono">@sassahuaranga</p>
</div>
<img src="./img/chili_7.png" width="50" height="50"
class="transition transform rotate-12 translate-x-4 -translate-y-4 hover:scale-125">
</div>
<img class="myImages" id="myImg" src="">
<iframe width="350" height="200" src="https://www.youtube.com/embed/1K0W92xm6tY" allowfullscreen></iframe>
<p class="text-gray-700 text-base mt-2">
Happy birthday Nana-chan!<br>I wish for you to be healthy and successful in everything you do! You are working so hard to make us happy with amazing videos/streams and art. Thank you for that. I hope that on this special day you get to enjoy yourself and have a lot of fun! Nana-chan daisuki! https://youtu.be/1K0W92xm6tY
</p>
</div>
</div>
<!-- Card -->
<div class="w-11/12 md:w-md lg:w-md xl:w-lg rounded shadow-lg bg-white mt-4 mb-4" data-aos="fade-up" data-aos-anchor-placement="center-bottom">
<div class="px-4 py-4">
<div class="flex flex-row flex-nowrap justify-between">
<div class="flex flex-col">
<p class="font-bold text-xl">HarrisD</p>
<p class="text-gray-500 text-sm font-mono">@</p>
</div>
<img src="./img/chili_7.png" width="50" height="50"
class="transition transform rotate-12 translate-x-4 -translate-y-4 hover:scale-125">
</div>
<img class="myImages" id="myImg" src="./img/IMG_20220108_183123_7-HarrisD.jpeg">
<p class="text-gray-700 text-base mt-2">
Nana happy birthday<br>For the time that passed, for the new goals to accomplish and the new memories to create in this year, let&#x27;s give the best with a smile !!!!
</p>
</div>
</div>
<!-- Card -->
<div class="w-11/12 md:w-md lg:w-md xl:w-lg rounded shadow-lg bg-white mt-4 mb-4" data-aos="fade-up" data-aos-anchor-placement="center-bottom">
<div class="px-4 py-4">
<div class="flex flex-row flex-nowrap justify-between">
<div class="flex flex-col">
<p class="font-bold text-xl">夜桜時秒</p>
<p class="text-gray-500 text-sm font-mono">@yozakura_jby</p>
</div>
<img src="./img/chili_7.png" width="50" height="50"
class="transition transform rotate-12 translate-x-4 -translate-y-4 hover:scale-125">
</div>
<img class="myImages" id="myImg" src="">
<p class="text-gray-700 text-base mt-2">
ナナちゃん誕生日おめでとう(つ≧▽≦)つ<br>私の友達になってくれてほどにありがとうあの時私とても嬉しいです<br>ナナちゃん優しいくて面白いとてもかわいい 大好き絶対DDしないよ<br>つどナナちゃんを応援する<br>ナナちゃんと出会えよかった(๑╹◡╹๑)ノ♬
</p>
</div>
</div>
<!-- Card -->
<div class="w-11/12 md:w-md lg:w-md xl:w-lg rounded shadow-lg bg-white mt-4 mb-4" data-aos="fade-up" data-aos-anchor-placement="center-bottom">
<div class="px-4 py-4">
<div class="flex flex-row flex-nowrap justify-between">
<div class="flex flex-col">
<p class="font-bold text-xl">シャケはっちゃん</p>
<p class="text-gray-500 text-sm font-mono">@SyakeTaisa</p>
</div>
<img src="./img/chili_7.png" width="50" height="50"
class="transition transform rotate-12 translate-x-4 -translate-y-4 hover:scale-125">
</div>
<img class="myImages" id="myImg" src="">
<p class="text-gray-700 text-base mt-2">
ナナさんお誕生日おめでとうございます!<br>一時期Катюшаにハマっていたときがありそのときに歌ってみたを見つけて綺麗な歌声や銀髪などに惹かれました!これからも活動応援してます!
</p>
</div>
</div>
<!-- Card -->
<div class="w-11/12 md:w-md lg:w-md xl:w-lg rounded shadow-lg bg-white mt-4 mb-4" data-aos="fade-up" data-aos-anchor-placement="center-bottom">
<div class="px-4 py-4">
<div class="flex flex-row flex-nowrap justify-between">
<div class="flex flex-col">
<p class="font-bold text-xl">ニセちゃん</p>
<p class="text-gray-500 text-sm font-mono">@nisechan1022</p>
</div>
<img src="./img/chili_7.png" width="50" height="50"
class="transition transform rotate-12 translate-x-4 -translate-y-4 hover:scale-125">
</div>
<img class="myImages" id="myImg" src="">
<p class="text-gray-700 text-base mt-2">
お誕生日おめでとうございます!<br>いつも色々な形で僕達にパワーを下さってありがとうございます。それらは見えないところでのななさんの努力の成果だと思っています。努力を絶やさず、新しいことに挑戦し続けているななさんを心から尊敬しています。ななさんの創る世界をこれからも楽しみにしています。応援しています。
</p>
</div>
</div>
<!-- Card -->
<div class="w-11/12 md:w-md lg:w-md xl:w-lg rounded shadow-lg bg-white mt-4 mb-4" data-aos="fade-up" data-aos-anchor-placement="center-bottom">
<div class="px-4 py-4">
<div class="flex flex-row flex-nowrap justify-between">
<div class="flex flex-col">
<p class="font-bold text-xl">たなゆー</p>
<p class="text-gray-500 text-sm font-mono">@tanayu786</p>
</div>
<img src="./img/chili_7.png" width="50" height="50"
class="transition transform rotate-12 translate-x-4 -translate-y-4 hover:scale-125">
</div>
<img class="myImages" id="myImg" src="">
<p class="text-gray-700 text-base mt-2">
こんかぐら!誕生日おめでとうございます!<br>この1年間、活動休止と復帰やコラボカフェ、夢だったアニメ主題歌の担当になったりと本当に様々なことがあった1年だったと思います。<br>色んなことに挑戦して更に夢を叶えた姿を見て、自分も勇気づけられました。そして痛車を作った事で多くの方と知り合い、楽しい日々を過ごせてます。<br>本当にナナさんのおかげです!感謝しきれません!これからもずっと応援します!カグラナナしか勝たん!
</p>
</div>
</div>
<!-- Card -->
<div class="w-11/12 md:w-md lg:w-md xl:w-lg rounded shadow-lg bg-white mt-4 mb-4" data-aos="fade-up" data-aos-anchor-placement="center-bottom">
<div class="px-4 py-4">
<div class="flex flex-row flex-nowrap justify-between">
<div class="flex flex-col">
<p class="font-bold text-xl">すいうとこ</p>
<p class="text-gray-500 text-sm font-mono">@suiutoko</p>
</div>
<img src="./img/chili_7.png" width="50" height="50"
class="transition transform rotate-12 translate-x-4 -translate-y-4 hover:scale-125">
</div>
<img class="myImages" id="myImg" src="">
<p class="text-gray-700 text-base mt-2">
誕生日おめでとうございます!!<br>ななさんのお歌、絵、優しい所、全てが大好きです!楽しい毎日をありがとう!これからも推していきます!
</p>
</div>
</div>
<!-- Card -->
<div class="w-11/12 md:w-md lg:w-md xl:w-lg rounded shadow-lg bg-white mt-4 mb-4" data-aos="fade-up" data-aos-anchor-placement="center-bottom">
<div class="px-4 py-4">
<div class="flex flex-row flex-nowrap justify-between">
<div class="flex flex-col">
<p class="font-bold text-xl">つのわれ</p>
<p class="text-gray-500 text-sm font-mono">@</p>
</div>
<img src="./img/chili_7.png" width="50" height="50"
class="transition transform rotate-12 translate-x-4 -translate-y-4 hover:scale-125">
</div>
<img class="myImages" id="myImg" src="">
<p class="text-gray-700 text-base mt-2">
ななかぐらさん、お誕生日おめでとうございます!<br>2021年は世間的にも、ななかぐらさんご自身にとってもとても大変な年だったかと思います。<br>けど、であるなら、今年はより良くなっていくのみ!<br>素敵な出来事に溢れる一年となりますよう心より祈っております。<br>これまでもこれからも、ななかぐらさんを応援していくファンの一人として見守っていきます…!
</p>
</div>
</div>
<!-- Card -->
<div class="w-11/12 md:w-md lg:w-md xl:w-lg rounded shadow-lg bg-white mt-4 mb-4" data-aos="fade-up" data-aos-anchor-placement="center-bottom">
<div class="px-4 py-4">
<div class="flex flex-row flex-nowrap justify-between">
<div class="flex flex-col">
<p class="font-bold text-xl">Edu Lima</p>
<p class="text-gray-500 text-sm font-mono">@</p>
</div>
<img src="./img/chili_7.png" width="50" height="50"
class="transition transform rotate-12 translate-x-4 -translate-y-4 hover:scale-125">
</div>
<img class="myImages" id="myImg" src="">
<p class="text-gray-700 text-base mt-2">
Hello Nana! Happy Birthday! Hope you have a wonderful day! I&#x27;m really happy that Nana is a vtuber! Nana is cute!!!
</p>
</div>
</div>
<!-- Card -->
<div class="w-11/12 md:w-md lg:w-md xl:w-lg rounded shadow-lg bg-white mt-4 mb-4" data-aos="fade-up" data-aos-anchor-placement="center-bottom">
<div class="px-4 py-4">
<div class="flex flex-row flex-nowrap justify-between">
<div class="flex flex-col">
<p class="font-bold text-xl">Siruenyian</p>
<p class="text-gray-500 text-sm font-mono">@siruenyian</p>
</div>
<img src="./img/chili_7.png" width="50" height="50"
class="transition transform rotate-12 translate-x-4 -translate-y-4 hover:scale-125">
</div>
<img class="myImages" id="myImg" src="./img/nanavtuber-Sirue_N.jpeg">
<p class="text-gray-700 text-base mt-2">
Hello and Happy Birthday Nana!! On this special day I hope you are doing well and best of luck on your future plans. I just want to say that your songs are amazing and your drawings are beautiful, I like them a lot. Keep up the amazing work!!
</p>
</div>
</div>
<!-- Card -->
<div class="w-11/12 md:w-md lg:w-md xl:w-lg rounded shadow-lg bg-white mt-4 mb-4" data-aos="fade-up" data-aos-anchor-placement="center-bottom">
<div class="px-4 py-4">
<div class="flex flex-row flex-nowrap justify-between">
<div class="flex flex-col">
<p class="font-bold text-xl">Lurking</p>
<p class="text-gray-500 text-sm font-mono">@Lurking11219281</p>
</div>
<img src="./img/chili_7.png" width="50" height="50"
class="transition transform rotate-12 translate-x-4 -translate-y-4 hover:scale-125">
</div>
<img class="myImages" id="myImg" src="">
<p class="text-gray-700 text-base mt-2">
カグラナナ-san, お誕生日おめでとうございます! 私は日本語を話すことができません、DeepLを使用しています。この一年、本当にお疲れ様でした,今年もよろしくお願いします!
</p>
</div>
</div>
<!-- Card -->
<div class="w-11/12 md:w-md lg:w-md xl:w-lg rounded shadow-lg bg-white mt-4 mb-4" data-aos="fade-up" data-aos-anchor-placement="center-bottom">
<div class="px-4 py-4">
<div class="flex flex-row flex-nowrap justify-between">
<div class="flex flex-col">
<p class="font-bold text-xl">夜神ノラ</p>
<p class="text-gray-500 text-sm font-mono">@</p>
</div>
<img src="./img/chili_7.png" width="50" height="50"
class="transition transform rotate-12 translate-x-4 -translate-y-4 hover:scale-125">
</div>
<img class="myImages" id="myImg" src="">
<p class="text-gray-700 text-base mt-2">
ななかぐら先生/カグラナナ様!!お誕生日おめでとうございます!!この誤字星色々と大変だと思いますが、ななかぐら先生/カグラナナ様が良き一年となるように願ってます!!<br>ハッピーパーティーです!!
</p>
</div>
</div>
<!-- Card -->
<div class="w-11/12 md:w-md lg:w-md xl:w-lg rounded shadow-lg bg-white mt-4 mb-4" data-aos="fade-up" data-aos-anchor-placement="center-bottom">
<div class="px-4 py-4">
<div class="flex flex-row flex-nowrap justify-between">
<div class="flex flex-col">
<p class="font-bold text-xl">れいにー</p>
<p class="text-gray-500 text-sm font-mono">@rainymoon1111</p>
</div>
<img src="./img/chili_7.png" width="50" height="50"
class="transition transform rotate-12 translate-x-4 -translate-y-4 hover:scale-125">
</div>
<img class="myImages" id="myImg" src="">
<p class="text-gray-700 text-base mt-2">
お誕生日おめでとうございます!ナナさまにとって素敵な一年になりますようお祈りしています!
</p>
</div>
</div>
<!-- Card -->
<div class="w-11/12 md:w-md lg:w-md xl:w-lg rounded shadow-lg bg-white mt-4 mb-4" data-aos="fade-up" data-aos-anchor-placement="center-bottom">
<div class="px-4 py-4">
<div class="flex flex-row flex-nowrap justify-between">
<div class="flex flex-col">
<p class="font-bold text-xl">:のらり</p>
<p class="text-gray-500 text-sm font-mono">@</p>
</div>
<img src="./img/chili_7.png" width="50" height="50"
class="transition transform rotate-12 translate-x-4 -translate-y-4 hover:scale-125">
</div>
<img class="myImages" id="myImg" src="">
<p class="text-gray-700 text-base mt-2">
ナナちゃん誕生日おめでとうございます!<br>この一年が素敵な日々になりますように♪
</p>
</div>
</div>
<!-- Card -->
<div class="w-11/12 md:w-md lg:w-md xl:w-lg rounded shadow-lg bg-white mt-4 mb-4" data-aos="fade-up" data-aos-anchor-placement="center-bottom">
<div class="px-4 py-4">
<div class="flex flex-row flex-nowrap justify-between">
<div class="flex flex-col">
<p class="font-bold text-xl">Sincronic</p>
<p class="text-gray-500 text-sm font-mono">@Sincronic12</p>
</div>
<img src="./img/chili_7.png" width="50" height="50"
class="transition transform rotate-12 translate-x-4 -translate-y-4 hover:scale-125">
</div>
<img class="myImages" id="myImg" src="./img/Nanahug_-_Sincronic12.gif">
<p class="text-gray-700 text-base mt-2">
Happy Birthday Nana sensei!<br><br>I wish you lots and lots of happiness in this year. May all your dreams come true! &lt;3<br>I tried to animate something for you, but it&#x27;s my first time. I hope you like it!
</p>
</div>
</div>
<!-- Card -->
<div class="w-11/12 md:w-md lg:w-md xl:w-lg rounded shadow-lg bg-white mt-4 mb-4" data-aos="fade-up" data-aos-anchor-placement="center-bottom">
<div class="px-4 py-4">
<div class="flex flex-row flex-nowrap justify-between">
<div class="flex flex-col">
<p class="font-bold text-xl">ame。</p>
<p class="text-gray-500 text-sm font-mono">@amedayooooo</p>
</div>
<img src="./img/chili_7.png" width="50" height="50"
class="transition transform rotate-12 translate-x-4 -translate-y-4 hover:scale-125">
</div>
<img class="myImages" id="myImg" src="">
<iframe width="100%" height="300" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/1194042607&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"></iframe><div style="font-size: 10px; color: #cccccc;line-break: anywhere;word-break: normal;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; font-family: Interstate,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Garuda,Verdana,Tahoma,sans-serif;font-weight: 100;"><a href="https://soundcloud.com/candyfuru" title="ame。mk2" target="_blank" style="color: #cccccc; text-decoration: none;">ame。mk2</a> · <a href="https://soundcloud.com/candyfuru/vocaloid-4" title="鼓動Kodou)鏡音リン「VOCALOIDカバー」" target="_blank" style="color: #cccccc; text-decoration: none;">鼓動Kodou)鏡音リン「VOCALOIDカバー」</a></div>
<p class="text-gray-700 text-base mt-2">
カグラナナちゃん、<br>お誕生日おめでとうです!<br>素敵な年になりますように🙏<br><br>「鼓動」のボカロカバー作りましたので、ぜひ聴いてみて!
</p>
</div>
</div>
<!-- Card -->
<div class="w-11/12 md:w-md lg:w-md xl:w-lg rounded shadow-lg bg-white mt-4 mb-4" data-aos="fade-up" data-aos-anchor-placement="center-bottom">
<div class="px-4 py-4">
<div class="flex flex-row flex-nowrap justify-between">
<div class="flex flex-col">
<p class="font-bold text-xl">Yue Yuishia</p>
<p class="text-gray-500 text-sm font-mono">@</p>
</div>
<img src="./img/chili_7.png" width="50" height="50"
class="transition transform rotate-12 translate-x-4 -translate-y-4 hover:scale-125">
</div>
<img class="myImages" id="myImg" src="">
<p class="text-gray-700 text-base mt-2">
Happy birthday Nana!!! On this special day I wish you lots of happiness and joy and that you can make tons of lovely memories throughout this year and for years to come. I love you Nana!! ღゝ◡╹)ノ♡
</p>
</div>
</div>
<!-- Card -->
<div class="w-11/12 md:w-md lg:w-md xl:w-lg rounded shadow-lg bg-white mt-4 mb-4" data-aos="fade-up" data-aos-anchor-placement="center-bottom">
<div class="px-4 py-4">
<div class="flex flex-row flex-nowrap justify-between">
<div class="flex flex-col">
<p class="font-bold text-xl">Cosy</p>
<p class="text-gray-500 text-sm font-mono">@2BCosy</p>
</div>
<img src="./img/chili_7.png" width="50" height="50"
class="transition transform rotate-12 translate-x-4 -translate-y-4 hover:scale-125">
</div>
<img class="myImages" id="myImg" src="">
<p class="text-gray-700 text-base mt-2">
Hi Nana! I&#x27;m still a pretty new fan, but I wanted to take the chance and say Happy Birthday!!! Nana always makes my days happier and I hope Nana has a great day and a AMAZING 2022!!! Nana daisuki!!!
</p>
</div>
</div>
<!-- Card -->
<div class="w-11/12 md:w-md lg:w-md xl:w-lg rounded shadow-lg bg-white mt-4 mb-4" data-aos="fade-up" data-aos-anchor-placement="center-bottom">
<div class="px-4 py-4">
<div class="flex flex-row flex-nowrap justify-between">
<div class="flex flex-col">
<p class="font-bold text-xl">Shuvi</p>
<p class="text-gray-500 text-sm font-mono">@Shuvi_Schwarze</p>
</div>
<img src="./img/chili_7.png" width="50" height="50"
class="transition transform rotate-12 translate-x-4 -translate-y-4 hover:scale-125">
</div>
<img class="myImages" id="myImg" src="./img/Nana-f-Shuvi_Schwarze.png">
<p class="text-gray-700 text-base mt-2">
Happy birthday Nana,<br>This is my first time sharing my drawings to others so I wanted to have you as an inspiration, both as someone who I admire to and adore.<br>Wish you well and good luck this year too!
</p>
</div>
</div>
</div>
</section>
</div>
<footer class="pt-6 pb-6 backdrop-filter backdrop-brightness-50 backdrop-blur-lg mix-blend-darker w-full text-white" data-aos="fade-in">
<h2 class="text-center text-3xl font-normal" data-aos="fade-in">
Credit
</h2>
<h3 class="text-center text-2xl font-normal" data-aos="fade-in">
クレジット
</h3>
<br>
<div class="grid grid-flow-col grid-cols-3 justify-center" data-aos="fade-in">
<div class="text-center">
<h4 class="text-2xl">Art</h4>
<h4 class="text-lg" style="font-family: 'Yomogi', cursive;">イラスト</h4>
<a href="https://www.youtube.com/channel/UCH8iKou-ecNiJhTqGFfjqWQ">- 五十嵐苺</a> 背景background
<br>
<a href="https://twitter.com/terminusashbell">- Terminus Ashbell</a>バナナBaNana
</div>
<div class="text-center">
<h4 class="text-2xl">Site</h4>
<h4 class="text-xl" style="font-family: 'Yomogi', cursive;">サイト</h4>
<a href="https://twitter.com/amedayooooo">- ame。</a>
</div>
<div class="text-center">
<h4 class="text-2xl">Thanks</h4>
<a href="https://twitter.com/suiutoko">- すいうとこ</a>日本語翻訳JPN TL
</div>
</div>
</footer>
</body>
<script>
// create references to the modal...
var modal = document.getElementById('myModal');
// to all images -- note I'm using a class!
var images = document.getElementsByClassName('myImages');
// the image in the modal
var modalImg = document.getElementById("img01");
// and the caption in the modal
var captionText = document.getElementById("caption");
// Go through all of the images with our custom class
for (var i = 0; i < images.length; i++) {
var img = images[i];
// and attach our click listener for this image.
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
AOS.init({
once: true
});
particlesJS('particles-js', {
"particles": {
"number": {
"value": 160,
"density": {
"enable": true,
"value_area": 800
}
},
"color": {
"value": "#7a7a7a"
},
"shape": {
"type": "circle",
"stroke": {
"width": 0,
"color": "#000000"
},
"polygon": {
"nb_sides": 5
},
"image": {
"src": "img/github.svg",
"width": 100,
"height": 100
}
},
"opacity": {
"value": 1,
"random": true,
"anim": {
"enable": true,
"speed": 1,
"opacity_min": 0,
"sync": false
}
},
"size": {
"value": 3,
"random": true,
"anim": {
"enable": false,
"speed": 4,
"size_min": 0.3,
"sync": false
}
},
"line_linked": {
"enable": false,
"distance": 150,
"color": "#ffffff",
"opacity": 0.4,
"width": 1
},
"move": {
"enable": true,
"speed": 1,
"direction": "none",
"random": true,
"straight": false,
"out_mode": "out",
"bounce": false,
"attract": {
"enable": false,
"rotateX": 600,
"rotateY": 600
}
}
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": {
"enable": true,
"mode": "bubble"
},
"onclick": {
"enable": false,
"mode": "repulse"
},
"resize": true
},
"modes": {
"grab": {
"distance": 400,
"line_linked": {
"opacity": 1
}
},
"bubble": {
"distance": 250,
"size": 0,
"duration": 2,
"opacity": 0,
"speed": 3
},
"repulse": {
"distance": 400,
"duration": 0.4
},
"push": {
"particles_nb": 4
},
"remove": {
"particles_nb": 2
}
}
},
"retina_detect": true
})
</script>
</body>
</html>