site name

some stuff

hello! welcome to my first layout! its based off of the little karin in the corner! it was very fun to make so i hope you enjoy! these templates wont really be intended for very beginners, it would be best if u went in with some knowledge of html and css! to save the images i use just right click and hit inspect, then find the image and download it! this template uses css within the html file btw! feel free to seperate them if ya wanna, this just makes it easier for me! now onto the code!

<!DOCTYPE html>
<html>
<style>
* {
cursor: url(ur image), auto !important;
}
body {
background-image: url(imagesnwhatevs/polka.gif);
font-family: "MS UI Gothic", Tahoma;
}
.flex {
display: flex;
flex-direction: row;
justify-content: center;
}
.flex2 {
display: flex;
flex-direction: column;
justify-content: center;
}
p {
color: black;
font-size: 16px;
}
h1 {
color: white;
font-size: 30px;
}
</style>
<link rel="icon" href="lilfavicons/pandacheer.gif">
<title>first template!!!</title>
<body>
<div class="flex">
<div style="border-image: url(imagesnwhatevs/laceyborder2.png) 95.5 fill round; border-width:32px; border-style:solid;width:664px;margin-top: 10px;height:864px;filter: drop-shadow(0px 0px 5px black);">
<div style="border-image: url(imagesnwhatevs/laceyborder22.png) 95.5 fill round; border-width:32px; border-style:solid;width:600px;height:800px;">
<div style="width: 600px;height: 800px;background-image: linear-gradient(#0d0d0d,grey,#0d0d0d);border: 5px ridge black;border-radius: 20px 50px 20px 50px;box-shadow: 0px 0px 10px #0d0d0d inset;margin-left: -5px;margin-top: -5px;">
<div style="width: 570px;height: 100px;background-image: linear-gradient(to right, black, white);margin: 10px;border: 5px ridge black;border-radius: 20px 50px 20px 20px;">
<h1 style="margin-top: 50px;margin-left: 20px;">site name</h1>
</div>
<div class="flex">
<div style="width: 390px;height: 580px;background-color: rgba(255, 255, 255, .4);border: 5px ridge black;border-radius: 20px 20px 20px 20px;margin-right: 10px;">
<div class="flex" style="width: 390px;height: 60px;background-image: linear-gradient(to right, black, white);border-radius: 20px 20px 0px 0px;border-bottom: 5px ridge black;">
<h1 style="margin-top: 10px;">some stuff</h1>
</div>
<div style="width: 390px;height: 515px;overflow: scroll;border-radius: 0px 0px 20px 20px;">

</div>
</div>
<div style="width: 160px;height: 580px;background-color: rgba(255, 255, 255, .4);border: 5px ridge black;border-radius: 20px;">
<div class="flex" style="width: 160px;height: 60px;background-image: linear-gradient(to right, black, white);border-radius: 20px 20px 0px 0px;border-bottom: 5px ridge black;">
<h1 style="margin-top: 10px;">links</h1>
</div>
<div style="flex2">
<a href="ur link">
<div class="flex" style="width: 140px;height: 50px;background-image: linear-gradient(#ffb0c7, white, #ffb0c7);border-radius: 10px;margin: 10px;">
<p>link 1</p>
</div>
</a>
<a href="ur link">
<div class="flex" style="width: 140px;height: 50px;background-image: linear-gradient(#ffb0c7, white, #ffb0c7);border-radius: 10px;margin: 10px;">
<p>link 2</p>
</div>
</a>
<a href="ur link">
<div class="flex" style="width: 140px;height: 50px;background-image: linear-gradient(#ffb0c7, white, #ffb0c7);border-radius: 10px;margin: 10px;">
<p>link 3</p>
</div>
</a>
<a href="ur link">
<div class="flex" style="width: 140px;height: 50px;background-image: linear-gradient(#ffb0c7, white, #ffb0c7);border-radius: 10px;margin: 10px;">
<p>link 4</p>
</div>
</a>
<a href="ur link">
<div class="flex" style="width: 140px;height: 50px;background-image: linear-gradient(#ffb0c7, white, #ffb0c7);border-radius: 10px;margin: 10px;">
<p>link 5</p>
</div>
</a>
<a href="ur link">
<div class="flex" style="width: 140px;height: 50px;background-image: linear-gradient(#ffb0c7, white, #ffb0c7);border-radius: 10px;margin: 10px;">
<p>link 6</p>
</div>
</a>
<a href="ur link">
<div class="flex" style="width: 140px;height: 50px;background-image: linear-gradient(#ffb0c7, white, #ffb0c7);border-radius: 10px;margin: 10px;">
<p>link 7</p>
</div>
</a>
<a href="ur link">
<div class="flex" style="width: 140px;height: 50px;background-image: linear-gradient(#ffb0c7, white, #ffb0c7);border-radius: 10px;margin: 10px;">
<p>link 8</p>
</div>
</a>

</div>
</div>
</div>
<div style="width: 570px;height: 50px;background-image: linear-gradient(to right, black, white);border: 5px ridge black;border-radius: 20px 20px 20px 50px;margin: 10px;">
<div class="flex"><h1 style="margin-top: 5px;">footer</h1></div>
</div>
</div>
</div>
</div>
<img src="imagesnwhatevs/cherryfloat.gif" style="position: absolute;margin-top: 680px;margin-left: 600px;pointer-events: none;">
</div>
<div class="flex">
<small>template created by <a href="https://miniwildpanda.neocities.org">mini</a>!</small>
</div>
<img src="imagesnwhatevs/karinbunny.png" style="right: 0px;bottom: 0px;position: fixed;height: 600px;">
</body>
</html>

now! im gonna give ya extra images i think match this template in case ya wanna use em!

links

link 1

link 2

link 3

link 4

link 5

link 6

link 7

link 8