site name

text

hello! welcome to my third layout! its based off of dva! 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/blackchecker.jpg);
background-size: 200px;
font-family: helvetica;
animation: movingbg 30s linear infinite;
animation-direction: normal;
}
@keyframes movingbg{
    0%{background-position: 0% 0%;}
    100%{background-position: 100% 0%;}
}
.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>third template!!!</title>
<body>
<div class="flex" style="width: 1920px;height: 946px;background-image: url(imagesnwhatevs/dvatemplate.png);margin: -10px;"></div>
<div class="flex" style="margin-top: -880px;">
<div style="border-left: 1px outset #5a5a5a;padding-left: 10px;border-radius: 150px 0px 0px 150px;">
<div style="border-left: 3px outset #5a5a5a;padding-left: 10px;border-radius: 150px 0px 0px 150px;">
<div style="width: 700px;height: 700px;background-color: #282828;border: 5px outset #5a5a5a;border-radius: 150px 10px 10px 150px;filter: drop-shadow(0px 0px 30px black);">
<div class="flex" style="width: 660px;height: 100px;background-image: linear-gradient(to right, #282828, #55314c, #ff52d4);margin: 10px 0px 10px 30px;border-radius: 150px 10px 0px 0px;">
<h1 style="margin: 30px;">site name</h1>
</div>
<div class="flex">
<div style="width: 400px;height: 500px;background-color: white;border-radius: 50px 0px 0px 50px;">
<div class="flex" style="width: 400px;height: 80px;background-image: linear-gradient(to right, white, #60ff52);border-radius: 50px 0px 0px 0px;">
<h1>text</h1>
</div>
<div style="width: 400px;height: 420px;overflow: scroll;scrollbar-width: none;border-radius: 0px 0px 0px 50px;">

</div>
</div>
<div class="flex2">
<div style="width: 270px;height: 380px;background-color: #5a5a5a;margin-left: 10px;">
<div style="width: 255px;height: 365px;border: 2px solid #282828;margin: 5px;">
<div class="flex" style="width: 245px;height: 355px;background-color: #282828;margin: 5px;overflow: scroll;scrollbar-width: none;">
<p style="margin: 5px;">text</p>
</div>
</div>
</div>
<div style="width: 270px;height: 110px;background-color: #60ff52;margin-left: 10px;margin-top: 10px;">
<div class="flex" style="width: 255px;height: 100px;border-left: 3px solid #ff52d4;border-right: 3px solid #ff52d4;margin: 5px;overflow: scroll;scrollbar-width: none;">
<p style="margin: 5px;">text</p>
</div>
</div>
</div>
</div>
<div class="flex" style="width: 630px;height: 60px;background-image: linear-gradient(to right, #282828, #55314c, #ff52d4);margin: 10px 0px 10px 60px;border-radius: 0px 0px 10px 60px;">
<h1 style="margin: 10px;">footer</h1>
</div>
</div>
</div>
</div>
<div style="border-right: 1px outset #5a5a5a;padding-right: 10px;border-radius: 0px 150px 150px 0px;margin-top: 100px;margin-left: 10px;height: 510px;">
<div style="border-right: 3px outset #5a5a5a;padding-right: 10px;border-radius: 0px 150px 150px 0px;">
<div style="width: 200px;height: 500px;background-color: #282828;border: 5px outset #5a5a5a;border-radius: 10px 150px 150px 10px;filter: drop-shadow(0px 0px 30px black);">
<div style="width: 180px;height: 480px;background-color: #5a5a5a;margin: 10px;border-radius: 0px 150px 150px 0px;overflow: hidden;">
<div style="width: 200px;height: 80px;background-image: linear-gradient(to right, #60ff52, #5a5a5a);">
</div>
<a href="ur link">
<div class="flex" style="width: 140px;height: 40px;background-image: linear-gradient(#ff52d4, white, #ff52d4);border: 5px outset #ff52d4;margin-left: 10px;margin-top: 15px;">
<p style="margin: 10px;">link 1</p>
</div>
</a>
<a href="ur link">
<div class="flex" style="width: 140px;height: 40px;background-image: linear-gradient(#60ff52, white, #60ff52);border: 5px outset #60ff52;margin-left: 10px;margin-top: 10px;">
<p style="margin: 10px;">link 2</p>
</div>
</a>
<a href="ur link">
<div class="flex" style="width: 140px;height: 40px;background-image: linear-gradient(#ff52d4, white, #ff52d4);border: 5px outset #ff52d4;margin-left: 10px;margin-top: 10px;">
<p style="margin: 10px;">link 3</p>
</div>
</a>
<a href="ur link">
<div class="flex" style="width: 140px;height: 40px;background-image: linear-gradient(#60ff52, white, #60ff52);border: 5px outset #60ff52;margin-left: 10px;margin-top: 10px;">
<p style="margin: 10px;">link 4</p>
</div>
</a>
<a href="ur link">
<div class="flex" style="width: 140px;height: 40px;background-image: linear-gradient(#ff52d4, white, #ff52d4);border: 5px outset #ff52d4;margin-left: 10px;margin-top: 10px;margin-bottom: 15px;">
<p style="margin: 10px;">link 5</p>
</div>
</a>
<div style="width: 200px;height: 80px;background-image: linear-gradient(to right, #ff52d4, #5a5a5a);">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="flex">
<small style="text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;">template created by <a href="https://miniwildpanda.neocities.org">mini</a>!</small>
</div>
</body>
</html>

text

footer

link 1

link 2

link 3

link 4

link 5