ame/kaguranana-birthday-project
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
ee8a55c66b
kaguranana-birthday-project/index.html

443 lines
20 KiB
HTML
Raw Normal View History

initial
2021-12-12 21:49:32 -05:00
<!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>
update
2021-12-17 14:13:08 -05:00
initial
2021-12-12 21:49:32 -05:00
<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>
update
2021-12-17 14:13:08 -05:00
<div class="container mx-auto pt-6 z-10">
<section class="container flex flex-col justify-center">
update responses
2021-12-17 20:52:41 -05:00
<h1 class="text-center font-sans text-7xl font-bold p-6" data-aos="fade-in" data-aos-duration="1500"
update
2021-12-17 14:13:08 -05:00
style="font-family: 'Yomogi', cursive;">
ナナちゃん、<br>
お誕生日おめでとう！
</h1>
<h1 class="text-center text-4xl font-normal" data-aos="fade-in">
initial
2021-12-12 21:49:32 -05:00
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>
a
2021-12-13 17:19:05 -05:00
<h3 class="text-center text-3xl font-normal" style="font-family: 'Yomogi', cursive;">なな辛軍からのメッセージ</h3>
initial
2021-12-12 21:49:32 -05:00
<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">
update
2021-12-17 14:13:08 -05:00
<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>
initial
2021-12-12 21:49:32 -05:00
</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">
update
2021-12-17 14:13:08 -05:00
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! I’m a big fan and I’ll 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!!
initial
2021-12-12 21:49:32 -05:00
</p>
</div>
</div>
update
2021-12-17 20:54:07 -05:00
<!-- 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>
update responses
2021-12-20 11:05:49 -05:00
<!-- 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>
update responses
2021-12-21 19:35:43 -05:00
<!-- 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>
<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>
<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>
update responses
2021-12-26 19:55:56 -05:00
<!-- 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>
<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>
<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>
<p class="text-gray-700 text-base mt-2">
ナナちゃんお誕生日おめでとう！ いつも面白いの配信をしてくれてありがとう！これからも一緒に楽しいこと楽しみ！ずっと応援するよ！
</p>
</div>
</div>
initial
2021-12-12 21:49:32 -05:00
</div>
</section>
</div>
update
2021-12-13 17:16:56 -05:00
updated fade in on credits
2021-12-15 08:53:47 -05:00
<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">
a
2021-12-13 21:32:33 -05:00
<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>
update responses
2021-12-17 20:52:41 -05:00
<div class="grid grid-flow-col grid-cols-3 justify-center" data-aos="fade-in">
a
2021-12-13 21:32:33 -05:00
<div class="text-center">
<h4 class="text-2xl">Art</h4>
updated credits
2021-12-15 11:43:58 -05:00
<h4 class="text-lg" style="font-family: 'Yomogi', cursive;">イラスト</h4>
<a href="https://www.youtube.com/channel/UCH8iKou-ecNiJhTqGFfjqWQ">- 五十嵐苺</a>
a
2021-12-13 21:32:33 -05:00
<br>
updated credits
2021-12-15 11:43:58 -05:00
<a href="https://twitter.com/terminusashbell">- Terminus Ashbell</a>
</div>
<div class="text-center">
<h4 class="text-2xl">Site</h4>
a
2021-12-13 21:32:33 -05:00
<h4 class="text-xl" style="font-family: 'Yomogi', cursive;">サイト</h4>
updated credits
2021-12-15 11:43:58 -05:00
<a href="https://twitter.com/amedayooooo">- ame。</a>
a
2021-12-13 21:32:33 -05:00
</div>
update responses
2021-12-17 20:52:41 -05:00
update
2021-12-17 20:55:27 -05:00
<div class="text-center">
update responses
2021-12-17 20:52:41 -05:00
<h4 class="text-2xl">Thanks</h4>
<a href="https://twitter.com/suiutoko">- すいうとこ</a>
</div>
a
2021-12-13 21:32:33 -05:00
</div>
</footer>
</body>
update
2021-12-13 17:16:56 -05:00
initial
2021-12-12 21:49:32 -05:00
<script>
update
2021-12-17 14:13:08 -05:00
initial
2021-12-12 21:49:32 -05:00
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>
Reference in New Issue Copy Permalink