, A F2U CODE
Mobile Friendly?: Sorta
Use: Can be used anywhere, can be modified, can be inspired by, can be merged with credits
Dori recommends: Read the disclaimer on the top of the code!!!
<!-- ATTENTION!!! For this code you need 2 variants of thumbnails images.
One will be the main one the viewer will see (without interactingh)
Two iwll be the other image the viewer will see (HOVERING/interacting)
This is important to make it work. If you wish to remove this turn this code:
<img src="IMAGE_LINK" class="thumbnail"
onmouseover="this.src='IMAGE_LINK_ONHOVER'"
onmouseout="this.src='IMAGE_LINK'"/>
To: (eliminating both onmouse js)
<img src="IMAGE_LINK" class="thumbnail">
Lower quality images are faster at loading, keep this in mind.
I had this code in the drafts for as long as I remember lol
-->
<style>
body {background-color:rgb(73, 70, 70)}
h1 {font-family:helvetica;margin:3px}
p,a {letter-spacing:0.7;margin:2px;font-family:ms pgothic}
a {color:black}
a:hover {background-color:black;color:white}
/* colours, starts with initials */
.r:hover {color:red}
.o:hover {color:orange}
.y:hover {color:yellow}
.g:hover {color:chartreuse}
.b:hover {color:dodgerblue}
.m:hover {color:magenta}
::selection {background-color:black;color:white}
.box {display: flex;background-color:black;border-radius:20px;max-width:50%;margin:auto;border: 2px solid black;}
.box > div {border-radius:20px;width:100%;background-color:#ffffff;border:3px solid black;padding: 10px;}
table {white-space: normal;}
td {gap:5px}
.thumbnail { width: 80%;
height: auto;margin:auto;display:block}
.header {background-color:black;color:white;width:100%;padding:0.5px}
hr {padding:0px;border:1.8px solid black}
.info {height:100px;overflow-y:scroll;scrollbar-width: 0px;}
</style>
</head>
<body>
<div class="box">
<div>
<p style="float:right"> <b>January 1, 1999 00:00 0%</b> </p>
<hr/>
<marquee style="background-color:black;width:100%" behavior="alternate"
direction="right">
<h1 class="header"> Colors <span style="font-size:13px;text-decoration:underline">colours, colores</span></h1></marquee>
<br>
<p> Welcome to the colours page <i>(colours or colors?)</i>. This page ironically has <span style="text-decoration:underline">not many colors</span>. </p>
<br>
<p> Here is a <span style="text-decoration:underline">list</span> of the current colors and what each page represents. Each one of these will redirect you to something I'm quite passionate about. Have a look around...! <a onclick="history.back()"> I'm not interested.</a></p><br>
<hr/>
<table>
<tr>
<td>
<a href="LINK_HERE">
<img src="https://i.ibb.co/Qv5cnyXc/BLACK.png" class="thumbnail"
onmouseover="this.src='https://i.ibb.co/93rZC2KF/HOVERred.png'"
onmouseout="this.src='https://i.ibb.co/Qv5cnyXc/BLACK.png'"/>
</A>
<h1 class="header r"> Red <span style="font-size:13px;color:white">entertainment</span></h1>
<div class="info">
<p> Red is full of my favorite <span style="text-decoration:underline">TV shows</span>, <span style="text-decoration:underline">movies</span>, <span style="text-decoration:underline">books</span> and <span style="text-decoration:underline">animes</span>. In general, medias I enjoy devulging time in.</p>
</div>
</td>
<td>
<a href="LINK_HERE">
<img src="https://i.ibb.co/Qv5cnyXc/BLACK.png" class="thumbnail"
onmouseover="this.src='https://i.ibb.co/svGPY2DG/HOVERorange.png'"
onmouseout="this.src='https://i.ibb.co/Qv5cnyXc/BLACK.png'"/>
</A>
<h1 class="header o"> Orange <span style="font-size:13px;color:white">diy</span></h1>
<div class="info">
<p> Orange is a manual section. This is where handmade <span style="text-decoration:underline">arts</span> and <span style="text-decoration:underline">crafts</span> come into play.</p>
</div>
</td>
<td>
<a href="LINK_HERE">
<img src="https://i.ibb.co/Qv5cnyXc/BLACK.png" class="thumbnail"
onmouseover="this.src='https://i.ibb.co/HpPv17Zv/HOVERyellow.png'"
onmouseout="this.src='https://i.ibb.co/Qv5cnyXc/BLACK.png'"/>
</A>
<h1 class="header y"> Yellow <span style="font-size:13px;color:white">scientific</span></h1>
<div class="info">
<p> Yellow is warmly radioactive, like <span style="text-decoration:underline">chemistry!</span> You'll see some cool science/web stuff. </p>
</div>
</td>
</tr>
<br>
<tr>
<td>
<a href="LINK_HERE">
<img src="https://i.ibb.co/Qv5cnyXc/BLACK.png" class="thumbnail"
onmouseover="this.src='https://i.ibb.co/h1WQpzqf/HOVERgreen.png'"
onmouseout="this.src='https://i.ibb.co/Qv5cnyXc/BLACK.png'"/>
</A>
<h1 class="header g"> Green <span style="font-size:13px;color:white">nature</span></h1>
<div class="info">
<p> Green is <span style="text-decoration:underline">soothing</span> and <span style="text-decoration:underline">fresh</span>. The scents of plants and nature will hit you upon visiting this section. </p>
</div>
</td>
<td>
<a href="LINK_HERE">
<img src="https://i.ibb.co/Qv5cnyXc/BLACK.png" class="thumbnail"
onmouseover="this.src='https://i.ibb.co/zK9nCJm/HOVERblue.png'"
onmouseout="this.src='https://i.ibb.co/Qv5cnyXc/BLACK.png'"/>
</A>
<h1 class="header b"> Blue <span style="font-size:13px;color:white">world</span></h1>
<div class="info">
<p> Blue is the color of <span style="text-decoration:underline">peace</span> and <span style="text-decoration:underline">unity</span>. Let's learn about countries, laws, culture and tradition! </p>
</div>
</td>
<td>
<a href="LINK_HERE">
<img src="https://i.ibb.co/Qv5cnyXc/BLACK.png" class="thumbnail"
onmouseover="this.src='https://i.ibb.co/k6Q9fmWf/HOVERpink.png'"
onmouseout="this.src='https://i.ibb.co/Qv5cnyXc/BLACK.png'"/>
</A>
<h1 class="header m"> Pink <span style="font-size:13px;color:white">edible</span></h1>
<div class="info">
<p> Pink is a <span style="text-decoration:underline">natural disaster</span> when it comes to cooking and baking. Pink likes to make things from <span style="text-decoration:underline">recipes </span>too.</p>
</div>
</td>
</tr>
</table>
<hr/>
<img src="IMAGE_HEREcanbeanything" style="float:right">
<p> What colour do you feel like today?</p>
<br>
<p>
<a target="_blank" href="doritochan001.neocities.org"><b>painted by doritochan001.neocities.org</b></p>
</div>
</div>
</body>
</html>