kaguranana-birthday-project/index.html
2021-12-20 08:05:49 -08:00

363 lines
15 KiB
HTML
Raw 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.">
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
</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>
<br>
<a href="https://twitter.com/terminusashbell">- Terminus Ashbell</a>
</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>
</div>
</div>
</footer>
</body>
<script>
AOS.init({
once: true
});
particlesJS('particles-js', {
"particles": {
"number": {
"value": 77,
"density": {
"enable": true,
"value_area": 777
}
},
"color": {
"value": "#242d33"
},
"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": true,
"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>