cannotSeeThemAll

You won't see the three of them walking together. 你不能见到他们同行。

This repository contains:

For pages built based on HTML, CSS and js, you can see a sample on CannotSeeThemAll.

The webpage can adapt to the window and support changing into different roles, which is easy to use. If you want to create such a web page for your favorite IP characters, it is a good choice.

cannotSeeThemAll

Background

The characters Roland, Algalia and Angelica in the game Libraryofruina developed by Project Moon have complex character relationships and plots. Because of the video you can't always see them together... Inspiration,I created a web page with similar functions to those in the video.

Note: This second creation may not be applicable to anyone. If you find that you can't control your emotions during use and have a strong emotional fluctuation due to resonance with the character story, please seek the help of a psychologist in time.

Remember: This is just a derivative work.

Install

This project uses git. Go check them out if you don't have them locally installed.

$ git clone git@github.com:Petalzu/cannotSeeThemAll.git

Or Github CLI.

$ gh repo clone Petalzu/cannotSeeThemAll

Or download the. zip package directly.

Usage

If you want to use it personally, you can deploy it on Github Page. Fork it directly to your own warehouse. After modifying its content, you can directly use GitHub Page for deployment and use your own domain name resolution.

For example:

<div class="switch-box" >
  <input id="switchButton" type="checkbox" class="switch" onclick="check()"/>
  <label for="switchButton"></label>
  <p style="position:relative;top:-40px;right:-60px;">罗兰</p>
  <img src="roland.png" alt="roland" style="position:relative;top:-120px;right: -80px ;height:120px">
</div>

You can modify the content of the label and the picture of the character to achieve the effect of changing the character.The position of the picture may not be in the right position. You need to adjust its $top: -120px; Right: -80px; Height: 120px$.

By the way, footer can also be changed into your own information. If you think it is redundant, you can delete it directly.

Related Efforts

None at present.

Maintainers

@Petalzu.

Contributing

Feel free to dive in! Open an issue or submit PRs.

Petalzu/cannotSeeThemAll