snippet.host

minimal text and code snippet hosting

welcome, guest. why not login or register?

example toybox page

created: language: html views: 57 size: 7.69 KiB lines: 249 clone raw download
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>toybox!</title>
<link href="/style.css" rel="stylesheet" type="text/css" media="all">
<link rel="shortcut icon" type="image/jpg" href="/usahana.gif"/>
<style>

html {
cursor: url(strawb.png) 10 10, pointer;
}

body {
background-image: url("dot-03-18.gif");
font-family: "basiicmedium";
font-size: 14px;
color: #ff66a6;
}

html, body { margin: 0; padding: 0; }

a {
color: #ffa6c1;
font-weight: 700;
}

#first {
top: 20px;
width: 28%;
margin: 0 auto;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-width:7px;
border-style:solid;
border-image: url("https://i.imgur.com/8Tk8PKV.gif") 7 fill round;
z-index: 999;
line-height: 22px;
overflow: auto;
}

#title {
width: 300px;
height: 20px;
margin: 0;
padding: 0;
border-width: 2px;
border-style: solid;
border-color: #ffa6c1;
border-radius: 15px;
background-image: url("che_e01s.gif");
font-family: "basiicmedium";
font-size: 20px;
margin-top: 10px;
margin-bottom: -15px;
}

#title2 {
width: 200px;
height: 20px;
margin: 0;
padding: 0;
border-width: 2px;
border-style: solid;
border-color: #ffa6c1;
border-radius: 15px;
background-image: url("che_e01s.gif");
font-family: "basiicmedium";
font-size: 13px;
margin-top: 10px;
margin-bottom: -15px;
}

#title3 {
width: 200px;
height: 20px;
margin: 0;
padding: 0;
border-width: 2px;
border-style: solid;
border-color: #ffa6c1;
border-radius: 15px;
background-image: url("che_e01s.gif");
font-family: "basiicmedium";
font-size: 13px;
margin-top: -8px;
margin-bottom: -15px;
}

@font-face {
font-family: 'basiicmedium';
src: url('basiic_2-webfont.woff2') format('woff2'),
url('basiic_2-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;

}

@font-face {
font-family: 'basiicmedium';
src: url((https://sugarangel.neocities.org/outlfot_kor/basiic_2-webfont.woff);
}

.scroll {
width: 300px;
height: 127px;
overflow: scroll;
overflow-x: hidden;
overflow-y: scroll;
}
.scroll::-webkit-scrollbar {
width: 16px;
height: 16px;
}

.scroll::-webkit-scrollbar-track {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAIAAAD91JpzAAAAFElEQVQIW2M4fPz0////GYAYyAIASnoKpV3w4kgAAAAASUVORK5CYII=");
image-rendering: pixelated;
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
}

.scroll::-webkit-scrollbar-track:active {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAIAAAD91JpzAAAAEElEQVQIW2No6+pjgAAgCwAWogM9VKrgGQAAAABJRU5ErkJggg==");
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
}

.scroll::-webkit-scrollbar-thumb {
border-top: 1px solid #cccccc;
border-left: 1px solid #cccccc;
border-right: 1px solid black;
border-bottom: 1px solid black;
box-shadow: inset 1px 1px 0 0 white, inset -1px -1px 0 0 #868a8e;
width: 16px;
height: 16px;
background-color: #cccccc;
z-index: 1;
}

.scroll::-webkit-scrollbar-corner {
background-color: #cccccc;
}

.scroll::-webkit-resizer {
width: 16px;
height: 16px;
background-color: #cccccc;
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAN0lEQVR4Ae3MgQUAMBRDwU5fFF05lb/CARTBw2Ulof0DxPtcwp3hNuEYnjbcEW4TjuFpwx3h9gMWGgZ2Y/PT2gAAAABJRU5ErkJggg==");
background-position: bottom right;
background-repeat: no-repeat;
image-rendering: pixelated;
}

.scroll::-webkit-scrollbar-button, .scroll::-webkit-scrollbar-button {
border-top: 1px solid #cccccc;
border-left: 1px solid #cccccc;
border-right: 1px solid black;
border-bottom: 1px solid black;
box-shadow: inset 1px 1px 0 0 white, inset -1px -1px 0 0 #868a8e;
display: block;
width: 16px;
height: 16px;
background-color: #cccccc;
image-rendering: pixelated;
background-repeat: no-repeat;
background-position: center center;
}

.scroll::-webkit-scrollbar-button:active, .scroll::-webkit-scrollbar-button:active {
background-position: 2px 2px;
}

.scroll::-webkit-scrollbar-button:horizontal:decrement, .scroll::-webkit-scrollbar-button:horizontal:decrement {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAQAAAD8fJRsAAAAHklEQVQY02NgoBT8xyX8H5fwf1zCpOjAYwceV1EEAAO2D/HsQ4vsAAAAAElFTkSuQmCC");
}

.scroll::-webkit-scrollbar-button:horizontal:increment, .scroll::-webkit-scrollbar-button:horizontal:increment {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAQAAAD8fJRsAAAAHUlEQVQY02NgIB/8xy3xH7fEf9wS/0nUQZqrKAYAK44P8ZRmzLQAAAAASUVORK5CYII=");
}

.scroll::-webkit-scrollbar-button:vertical:decrement, .scroll::-webkit-scrollbar-button:vertical:decrement {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAGklEQVR4AWMYxuA/SYphmETFhDX9x4mHGQAAcL4P8dQiMq8AAAAASUVORK5CYII=");
}

.scroll::-webkit-scrollbar-button:vertical:increment, .scroll::-webkit-scrollbar-button:vertical:increment {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAQAAAD8fJRsAAAAF0lEQVQY02NgoBf4jwJxSOHQhcNAOgMAWWAP8Rv2U3UAAAAASUVORK5CYII=");
}

.scroll::-webkit-scrollbar-button:horizontal:increment:start, .scroll::-webkit-scrollbar-button:horizontal:increment:start {
display: none;
}

.scroll::-webkit-scrollbar-button:horizontal:decrement:end, .scroll::-webkit-scrollbar-button:horizontal:decrement:end {
display: none;
}

.scroll::-webkit-scrollbar-button:vertical:increment:start, .scroll::-webkit-scrollbar-button:vertical:increment:start {
display: none;
}

.scroll::-webkit-scrollbar-button:vertical:decrement:end, .scroll::-webkit-scrollbar-button:vertical:decrement:end {
display: none;
}

::-webkit-scrollbar-button:active, ::-webkit-scrollbar-button:active {
border-top: 1px solid #868a8e;
border-left: 1px solid #868a8e;
border-bottom: 1px solid #868a8e;
border-right: 1px solid #868a8e;
box-shadow: none;
}
</style>
</head>
<body>
<div id="first"><center>
<img src="strawbbanner.gif">
<div id="title"><center><strong>welcome to the toybox!</strong></center></div>
<br>
here is a little corner of my website where you can take in adoptables either made by me, or other webmasters! :3 <strong> if an adoptable is from another site, the link is embedded into the image! just click on the image to see it's source!</strong>
<img src="divider3.gif" width="120px;">
<br>
<div id="title2"><strong>adoptables from other sites</strong></div>
<br>
<div class="scroll"><a href="https://cinni.net"><img src="sakuracat.gif"></a> <a href="https://cinni.net"><img src="berryhammie1.gif"></a> <a href="https://cinni.net"><img src="sugary-star.net_char228xy.gif"></a> <a href="https://cinni.net"><img src="pair-o-goats.gif"></a><br>
<a href="https://nostalgic.neocities.org/goodies/adoptioncentre/adopts4u"><img src="scm2.gif"></a> <a href="https://www.lejlart.com/apple.html"><img src="ucky2.gif"></a> <a href="https://www.lejlart.com/apple.html"><img src="gudetama_cheeksquish.gif"></a> <a href="https://www.lejlart.com/apple.html"><img src="pup1.gif"></a> <a href="https://www.lejlart.com/apple.html"><img src="toki_dolce.gif"></a></div>
<br>
<div id="title3"><strong>adoptables made by me</strong></div>
<br>
content coming soon
<br>
<img src="divider3.gif" width="120px;">
<br>
<a href="index.html">ready to go back?</a>
</center>
</div>
<img src="rin.png" width="200px;">
</body>
</html>