image can now expand
This commit is contained in:
ameyoyo
parent
0929c7dbb9
commit
0fa88b8368
105
index.html
105
index.html
|
|
@ -6,6 +6,13 @@
|
|||
<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">×</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">
|
||||
|
|
@ -55,7 +62,7 @@
|
|||
<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 src="">
|
||||
<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>
|
||||
|
|
@ -72,7 +79,7 @@
|
|||
<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 src="">
|
||||
<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'm wishing you all the happiness and love in the world. 今日の主役は君なんだので楽しみください！！
|
||||
</p>
|
||||
|
|
@ -89,7 +96,7 @@
|
|||
<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 src="">
|
||||
<img class="myImages" id="myImg" src="">
|
||||
<p class="text-gray-700 text-base mt-2">
|
||||
happy birthday mama nanaaa!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
|
||||
</p>
|
||||
|
|
@ -106,7 +113,7 @@
|
|||
<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 src="">
|
||||
<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>
|
||||
|
|
@ -123,7 +130,7 @@
|
|||
<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 src="">
|
||||
<img class="myImages" id="myImg" src="">
|
||||
<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>
|
||||
|
|
@ -140,7 +147,7 @@
|
|||
<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 src="">
|
||||
<img class="myImages" id="myImg" src="">
|
||||
<p class="text-gray-700 text-base mt-2">
|
||||
ナナさん、お誕生日おめでとうございます！！<br>あやめちゃんなど愛された娘たち産まれて、そしていつも神(楽)絵やお歌ありがとうございます！<br>これからよろしくおねがいします！！！
|
||||
</p>
|
||||
|
|
@ -157,7 +164,7 @@
|
|||
<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 src="">
|
||||
<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>
|
||||
|
|
@ -174,7 +181,7 @@
|
|||
<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 src="">
|
||||
<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'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>
|
||||
|
|
@ -191,7 +198,7 @@
|
|||
<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 src="">
|
||||
<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's to another year of fun memories~! ^w^)
|
||||
</p>
|
||||
|
|
@ -208,7 +215,7 @@
|
|||
<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 src="">
|
||||
<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'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>
|
||||
|
|
@ -225,7 +232,7 @@
|
|||
<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 src="">
|
||||
<img class="myImages" id="myImg" src="">
|
||||
<p class="text-gray-700 text-base mt-2">
|
||||
ナナさん、お誕生日おめでとうございます。<br>ナナさんのデザインと声が途轍もなく好きです。<br><br>この特別な日をあなたの好きなように過ごせれば幸いです。<br>応援しています！
|
||||
</p>
|
||||
|
|
@ -242,7 +249,7 @@
|
|||
<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 src="">
|
||||
<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's have more fun!! I love you <3
|
||||
</p>
|
||||
|
|
@ -259,7 +266,7 @@
|
|||
<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 src="">
|
||||
<img class="myImages" id="myImg" src="">
|
||||
<p class="text-gray-700 text-base mt-2">
|
||||
ななさん、お誕生日おめでとうございます！<br>今年歌ってみた動画や可愛いイラストをいっぱい投稿してくれてありがとう！いつも本当に元気もらいます。これからも色々楽しみにしてます！<br>幸せな一年になるますように！
|
||||
</p>
|
||||
|
|
@ -276,7 +283,7 @@
|
|||
<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 src="">
|
||||
<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'll continue to support you this year too! I love you Nana!
|
||||
</p>
|
||||
|
|
@ -293,7 +300,7 @@
|
|||
<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 src="">
|
||||
<img class="myImages" id="myImg" src="">
|
||||
<p class="text-gray-700 text-base mt-2">
|
||||
ナナちゃんお誕生日おめでとう！ いつも面白いの配信をしてくれてありがとう！これからも一緒に楽しいこと楽しみ！ずっと応援するよ！
|
||||
</p>
|
||||
|
|
@ -310,7 +317,7 @@
|
|||
<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 src="">
|
||||
<img class="myImages" id="myImg" src="">
|
||||
<p class="text-gray-700 text-base mt-2">
|
||||
ナナさん、お誕生日おめでとうございます！<br>いつも私たちのために頑張ってくれてありがとうございます ！<br><br>ナナさんは素晴らしいイラストレーターや歌手やVTuberです！<br>尊敬しています! 私もいつかナナさんのようになりたいです!<br><br>お身体も大切になさってくださいね（っ ' ᵕ ' ｃ）
|
||||
</p>
|
||||
|
|
@ -327,7 +334,7 @@
|
|||
<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 src="">
|
||||
<img class="myImages" id="myImg" src="">
|
||||
<p class="text-gray-700 text-base mt-2">
|
||||
It'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>
|
||||
|
|
@ -344,7 +351,7 @@
|
|||
<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 src="">
|
||||
<img class="myImages" id="myImg" src="">
|
||||
<p class="text-gray-700 text-base mt-2">
|
||||
Happy Birthday
|
||||
</p>
|
||||
|
|
@ -361,7 +368,7 @@
|
|||
<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 src="">
|
||||
<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'll always be here to support you! With that said, have an amazing happy birthday and the year ahead! much luv <3
|
||||
</p>
|
||||
|
|
@ -378,7 +385,7 @@
|
|||
<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 src="https://cdn.discordapp.com/attachments/847870734059044904/928974617316573204/HBD_NANA_147.png">
|
||||
<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>
|
||||
|
|
@ -395,7 +402,7 @@
|
|||
<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 src="">
|
||||
<img class="myImages" id="myImg" src="">
|
||||
<p class="text-gray-700 text-base mt-2">
|
||||
Happy Birthday, Nana. Let's have fun on this year's birthday too!
|
||||
</p>
|
||||
|
|
@ -412,7 +419,7 @@
|
|||
<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 src="">
|
||||
<img class="myImages" id="myImg" src="">
|
||||
<p class="text-gray-700 text-base mt-2">
|
||||
Happy Birthday, Nana! I'm watching you for a long time, and it's always was great. Covers, streams, drawings. Simply everything is great. I wish you to achieve every goal you set for this year!
|
||||
</p>
|
||||
|
|
@ -429,7 +436,7 @@
|
|||
<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 src="">
|
||||
<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>
|
||||
|
|
@ -446,7 +453,7 @@
|
|||
<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 src="">
|
||||
<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>
|
||||
|
|
@ -463,7 +470,7 @@
|
|||
<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 src="">
|
||||
<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'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>
|
||||
|
|
@ -480,7 +487,7 @@
|
|||
<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 src="">
|
||||
<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. It’s been a pleasure watching you. And I definitely am not a DD, #OnlyNana
|
||||
</p>
|
||||
|
|
@ -497,7 +504,7 @@
|
|||
<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 src="">
|
||||
<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>
|
||||
|
|
@ -514,7 +521,7 @@
|
|||
<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 src="">
|
||||
<img class="myImages" id="myImg" src="">
|
||||
<p class="text-gray-700 text-base mt-2">
|
||||
なな先生、お誕生日おめでとうございます！！！<br>先生の絵や歌声、姿をさまざまな場でたくさん見ることができてとても幸せです！<br>辛い事や大変な事も沢山あったと思います。それでも諦めずに頑張る先生の姿に元気をもらいました！これからも先生のやりたい事が達成できることを応援しています。<br>新しい1年もなな先生、ナナちゃん共に素晴らしい1年になりますように♪
|
||||
</p>
|
||||
|
|
@ -531,7 +538,7 @@
|
|||
<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 src="">
|
||||
<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 "DD Time" 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>
|
||||
|
|
@ -548,7 +555,7 @@
|
|||
<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 src="">
|
||||
<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>
|
||||
|
|
@ -565,7 +572,7 @@
|
|||
<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 src="">
|
||||
<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>
|
||||
|
|
@ -582,7 +589,7 @@
|
|||
<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 src="">
|
||||
<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>
|
||||
|
|
@ -599,7 +606,7 @@
|
|||
<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 src="">
|
||||
<img class="myImages" id="myImg" src="">
|
||||
<p class="text-gray-700 text-base mt-2">
|
||||
ナナ大好き！！！
|
||||
</p>
|
||||
|
|
@ -616,7 +623,7 @@
|
|||
<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 src="https://cdn.discordapp.com/attachments/911843747258581024/928791226017263647/Nana_bday.png">
|
||||
<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>
|
||||
|
|
@ -633,7 +640,7 @@
|
|||
<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 src="./img/Nana-Shadow_Tisalode.png">
|
||||
<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've been a great inspiration and have been part of the inspiration that really got me to start drawing. Otanjoubi omedetou.
|
||||
</p>
|
||||
|
|
@ -650,7 +657,7 @@
|
|||
<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 src="">
|
||||
<img class="myImages" id="myImg" src="">
|
||||
<p class="text-gray-700 text-base mt-2">
|
||||
ナナママ、お誕生日おめでとうございます！！<br>ナナママのイラストと声にとても好きです。ナナママの歌はよく聞きますが、とてもいいです。これからも応援しています
|
||||
</p>
|
||||
|
|
@ -693,7 +700,31 @@
|
|||
</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
|
||||
|
|
@ -809,6 +840,8 @@ particlesJS('particles-js', {
|
|||
},
|
||||
"retina_detect": true
|
||||
})
|
||||
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -6,6 +6,13 @@
|
|||
<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">×</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">
|
||||
|
|
@ -56,7 +63,7 @@
|
|||
<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 src="{{ image_link }}">
|
||||
<img class="myImages" id="myImg" src="{{ image_link }}">
|
||||
<p class="text-gray-700 text-base mt-2">
|
||||
{{ breaklines content }}
|
||||
</p>
|
||||
|
|
@ -100,7 +107,31 @@
|
|||
</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
|
||||
|
|
@ -216,6 +247,8 @@ particlesJS('particles-js', {
|
|||
},
|
||||
"retina_detect": true
|
||||
})
|
||||
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
85
style.css
85
style.css
|
|
@ -188421,3 +188421,88 @@ body {
|
|||
opacity: 1;
|
||||
}
|
||||
|
||||
#myImg {
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
#myImg:hover {opacity: 0.7;}
|
||||
|
||||
/* The Modal (background) */
|
||||
.modal {
|
||||
display: none; /* Hidden by default */
|
||||
position: fixed; /* Stay in place */
|
||||
z-index: 1; /* Sit on top */
|
||||
padding-top: 100px; /* Location of the box */
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%; /* Full width */
|
||||
height: 100%; /* Full height */
|
||||
overflow: auto; /* Enable scroll if needed */
|
||||
background-color: rgb(0,0,0); /* Fallback color */
|
||||
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
|
||||
}
|
||||
|
||||
/* Modal Content (image) */
|
||||
.modal-content {
|
||||
margin: auto;
|
||||
display: block;
|
||||
width: 80%;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
/* Caption of Modal Image */
|
||||
#caption {
|
||||
margin: auto;
|
||||
display: block;
|
||||
width: 80%;
|
||||
max-width: 700px;
|
||||
text-align: center;
|
||||
color: #ccc;
|
||||
padding: 10px 0;
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
/* Add Animation */
|
||||
.modal-content, #caption {
|
||||
-webkit-animation-name: zoom;
|
||||
-webkit-animation-duration: 0.6s;
|
||||
animation-name: zoom;
|
||||
animation-duration: 0.6s;
|
||||
}
|
||||
|
||||
@-webkit-keyframes zoom {
|
||||
from {-webkit-transform:scale(0)}
|
||||
to {-webkit-transform:scale(1)}
|
||||
}
|
||||
|
||||
@keyframes zoom {
|
||||
from {transform:scale(0)}
|
||||
to {transform:scale(1)}
|
||||
}
|
||||
|
||||
/* The Close Button */
|
||||
.close {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
right: 35px;
|
||||
color: #f1f1f1;
|
||||
font-size: 40px;
|
||||
font-weight: bold;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.close:hover,
|
||||
.close:focus {
|
||||
color: #bbb;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* 100% Image Width on Smaller Screens */
|
||||
@media only screen and (max-width: 700px){
|
||||
.modal-content {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue