HTML codes

These are some fun elements I've created, free for you to use in your own HTML projects. None of these codes have been tested or optimized for mobile unless stated otherwise.

Terms of use

Codes may not be used for primarily commercial projects. Personal projects that also facilitate commerce (e.g. a personal website with a shop or links to Patreon) are okay.
Credit is appreciated, but not required. Additionally, credit does not have to be given on the same page in which the code is used.
Codes can be modified, edited, and restyled for personal use in any way desired.
Codes may not be redistributed, regardless of the level of modification.
Codes may not be used in any project that significantly promotes or platforms NFTS/cryptocurrency or those who create/promote them.

If you like my code and want to give thanks, you can leave a message on my guestbook, or support me on ko-fi!

Square icon with popout text box

Mouse over the image, and a text box will pop out next to it!

HTML

<div class="boxcontainer">
<div class="boxicon" style="width:200px;">
<img src="your image goes here" width="200" height="200"/>
</div>
<div class="hide">your text goes here</div>
</div>

CSS

.boxcontainer {
display:flex;
  width:700px;
  height:200px;
  margin-right:auto;
  margin-left:auto;
}

.hide {
 visibility: hidden;
  width: 0px;
  transition: width .5s;
  overflow:hidden;
}
    
.boxcontainer:hover .hide {
visibility: visible;
  color: black;
  background-color:lightgrey;
  padding:15px;
  width:400px; 
  margin-left:auto;
  margin-right:auto;
   overflow: hidden;
}

.boxicon {
  
 margin-left:auto;
  margin-right:auto;
}

This element has only been tested with square images; images with other aspect ratios may require modification to work right.

Book div with editable pages

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nisl rhoncus mattis rhoncus urna neque viverra justo. Sed risus ultricies tristique nulla aliquet enim. Metus vulputate eu scelerisque felis imperdiet proin fermentum. Ullamcorper morbi tincidunt ornare massa eget egestas purus. Volutpat blandit aliquam etiam erat velit scelerisque in dictum non. Risus ultricies tristique nulla aliquet. Rutrum tellus pellentesque eu tincidunt tortor aliquam nulla. Vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras. Pharetra pharetra massa massa ultricies mi quis hendrerit dolor magna. Penatibus et magnis dis parturient montes nascetur ridiculus. Arcu odio ut sem nulla pharetra diam sit amet. Turpis egestas maecenas pharetra convallis posuere. Sagittis purus sit amet volutpat consequat mauris nunc congue nisi. Vestibulum lectus mauris ultrices eros in cursus. Vitae tempus quam pellentesque nec. Aenean vel elit scelerisque mauris pellentesque pulvinar pellentesque. Donec massa sapien faucibus et molestie ac feugiat sed. Vitae justo eget magna fermentum iaculis eu non diam phasellus.

HTML

<div class="book">

  <div class="page1">
  Left page text goes here
  </div>
  
  <div class="page2">
  Right page text goes here
  </div>
</div>

CSS

.book ::-webkit-scrollbar {
  width: 0;
}


.book {
  font-size: 16px;  
  display: flex;
  background-image: url(https://i.imgur.com/mFnFbk3.png);
  background-size: cover;
  width: 600px;
  height: 400px;
  padding:50px;
  color:#1f1211;
}

.page1 {
  height:400px;
  width:225px;
  margin-top: -10px;
  margin-left:50px;
  overflow-y:scroll;
}

.page2 {
  height:400px;
  width:225px;

  margin-top: -10px;
  margin-left:50px;
  overflow-y:scroll;
}

The background image for the div is hosted on imgur. It is recommended to download the image from the included link and host it on your own server to prevent link rot.
The div is set at a specific size and will need to be modified in order to appear larger/smaller.

Simple floating pagedoll

HTML

<img src="your image here" class="doll" width=400px>

CSS

.doll {
  
  display:block;
  position:relative;
  animation: dollmove 3.5s infinite;
filter: drop-shadow(5px 10px 4px rgba(0,0,0,.2));
}

@keyframes dollmove {
  0%   {top: -15px;}
  50%  {top: 15px;}
  100% {top:-15px;}
}