im finally finished with a template code :3

Rēsh-1

<!--
PLEASEEE PLEASE PLEASE PLEASE credit me for my
code @laraiia ok ok thank you byeeeeeeeee--
-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&family=Roboto&display=swap" rel="stylesheet">

<div class="container">
  <div class="cube">
    <div class="face left">image placeholder</div>
    <div class="face right">image placeholder</div>
    <div class="face front">image placeholder</div>
    <div class="face back">image placeholder</div>
  </div>
</div>
<style>
.container {
  width: 200px;
  height: 200px;
  perspective: 500px;
  margin: 100px;
 position: relative;
 top: 20px;
 left: 150px;
}

@keyframes turn {
  from { transform: rotate3d(0, 0, 0, 0); }
  to { transform: rotate3d(0, 1, 0, 360deg); }
}

.cube {
  position: relative;
  width: 200px;
  height: 200px;
  transform-style: preserve-3d;
  animation: turn 5s linear infinite;
}

.face {
  width: 200px;
  height: 200px;
  background: #fff;
  border: 2px dashed #6f93b0;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Arial, sans-serif;
  font-size: 2rem;
  outline: 2px solid rgba(233, 240, 241, 0.75);
  transition: outline 0.65s ease 0s;
  opacity: 0.6;
  transition: opacity 0.65s ease 0s;
}

.cube:hover {
  animation-play-state:paused;
}

.face:hover {
  outline: 7px solid rgba(223, 245, 236, 0.85);
  opacity: 1;
  }

.front {
  transform: translateZ(125px);
}

.back {
  transform: translateZ(-125px) rotateY(180deg);
}

.left {
  transform: translateX(-125px) rotateY(-90deg);
}

.right {
  transform: translateX(125px) rotateY(90deg);
}

.top {
  transform: translateY(-100px) rotateX(90deg);
  display: none;
}

.bottom {
  transform: translateY(100px) rotateX(-90deg);
  display: none;
}

body {
background-color: black;
background-image: url(https://lh3.googleusercontent.com/dzFs--TWTnmXCP9dudzRmBMSp8vWDk4kBDBE_iOaeytNRHcyXTmgCXveeE2wA2JyhX9r-OJPt56vMRyRPGZN3hpC9znwc4FPR4BtFVr05AlovHpTo4s_PsTXYvKV24m-bjvWqFjnrfkd1fBfByh5A4cpa6dhUWUuO_wd67D-EK6GEL4BQuP1Pqc6mY9QMatLgKNsj8b18BZJL3KE7hu6tE7cug8M_pKoF7BfyZRlFOOGQyl6mH1luBRINH0R3ID4OC8OCwKApNS0fkfbLoXJr3u5zrJ8oM3y0F-EsQq6y77fmDJFU-0Cx93AaQvstLDXgFfbzNqC4W3GIm1t3sxmGmAv4FoNEDsdn_OgL89qwE7TAkfL0rSlW3VcElfXpBrMJIy4Mzaq1lIxzp9QATYoB9P5GzXN9eaQtXYlMK0WAMO7U7ZZEZdP3FvyhVXsl0j_fXwX1wtyBEDCsVMWh9-GQwO07PasfPpcA5KuGtG0R9kbsSM-52v1yWtZP-JDmDE17bIenX-OD1DvCy_Y2-TEKuWuzfFTeAKo4CPfnHuQEk4TS8eQoBk4a1FIb-EBU0wkKgXe6XI90WlLFAFTyl8-qIjDYdUH1tA3fxZDAfK-VlfyT_2A7Eg_gr-TIwJXHFev3_B0Hx6CJ1g9Vj7Ty5Pz5hyGT7vkhmOUhwrP2ZrwO9qMGFeCrqsQipKn42zEb4O9IW_PIbf8k5OB9GcYzc6xy4HGDLUX7Si1fjnau3At9_3XREbP8tfT7zyIw0R9Ht15CEXY4og3YN288jEiVKfOCdPTMfrnBYbpud9KZIKnZGX-Dui1sZomvAjQGVaqiMEX92lHW0GN7Y_MFNxeBY1MArhXXmQ5tIVTVyfjpOSlnbvdN3GKjNdTxd8j-sa8Wfery8aQrCKPbRDr6wekd0bDDCyUIqiQebLP351HPhODjn2NIqXQ=w436-h273-no?authuser=0);
background-repeat: no-repeat;
background-attachment:fixed;
background-position:center;
background-size: 1250px;
overflow:hidden;
}

p {
color: white;
font-family:'Open Sans', sans-serif;
}

/* Done. */

.real {
left:700px;
opacity: 0.65;
position:fixed;
padding: 2px;
}

.counter {
margin-bottom: 1.5px;
position: relative;
left: 152.5px;
}

.background {
width: 325px;
height: 400px;
border-radius: 162.5px 162.5px 7.5px 7.5px;
background: rgb(119,145,177);
background: linear-gradient(0deg, rgba(119,145,177,1) 0%, rgba(225,250,251,1) 95%);
overflow: hidden;
border: 2px solid #999;
box-shadow: 0px 0px 10px black;
}

@keyframes meow {
	0% {
		transform: translateY(0);
        opacity: 0.65;
	}

	100% {
		transform: translateY(-375px);
        opacity: 1;
	}
}

.real:hover {
animation: meow 0.75s ease 0.01s 1 normal forwards;
}

.header {
background:white;
max-width: 325px;
height:150px;
background-image: url(https://lh3.googleusercontent.com/9KtNIhBkgbrTOBt4L--1kPHaj7n8FgiCPMgX1zY8mbkjkHUx_gzjBAH1rme7RtGyyhp8KaYbm0DDwdJ5BoyccxYogKIxY7Hvu9YSeSCAA3KPw9GPJT_JFAAEWpRz7wMGi1ohFYki93qcGo1VUXxEzneBTgCkbkrFr8KonQ3GWOS01vGkCQ41Ypw2r77V95Q5mhuW2UM9QYfFPn6-Q_GqLifUGPLH6vOgaq0mvGXZWFxKkYQvRYcl-wMc2ULKqUIA1322AjmQfj3p9htIhRwqBAp9AUONQ_hKAMP0a6UVDhDbPcW57JzLFRzUF7ywLLP4CTOju8lgUclW7vQBZu2lttJPK91-1jkwwgPoLuGOtAcnvdlwfzJGMEAdLLH7W3lko1A2ZsOcqmNA-1ot54ccNnTJd525OthC-EuK0a0N19ISZOhFOZ-IprrmgowJenaZBWVLfYenhMXHz4Qy37WMbUlCRzEJKfs9jk2-0iNAK5UonR3k4LAEIIuNc3PiU2uOlYiTzQLQCDDa6MXOLaMLfJW0kLrAHA28GoXcmEkq2Va1_Y7ujg9joKnD7CjrEzJV4KWQbRr5Xj2Z5j-zo5LLUWjRFRatdrj53oYeQM7XKGXsa6bufSnBDODyYNEgUS0wcqBIC2-WVVdfv4EhaMk-z7JLPpbp9gxMZ7aykb_QI20dzNepDvUoOoNzAqk4RHHR90CcmqhanOEmd6YVJE5JByTY4EiCBJp51KCCqqcitk_c543_h0RCS0NtA9tb3e_OSnc_Anl0TYafnxUFRgKo0RszH5fH3zhhBfnekeaYp5vfAow9HSj12td2bM0fO3kasD5b6bDHxE4QOD_4l1-mEKmu2cH0kCEpMWerVvfUnhTn_mWsoWG4KcJ32bjSivMKmziKpsHBVs15fkFeGoHqH9DDKlYuBwgjfZOct6w5aDOgLRMY=w500-h313-no?authuser=0);
background-position: bottom;
border-bottom: 2px solid #999;
}

.heading1 {
position: relative;
top: 65px;
text-align: center;
font-family:'Bohemian Soul';
font-size: 70px;
color: #94b7d6;
text-shadow: 1.5px 1.5px 0px #3f5161;
}

@font-face {
font-family:'Bohemian Soul';
src: url(https://dl.dropbox.com/s/l097qw7rndxd53a/Bohemian%20Soul.otf);
}

mark {
background-color: #7097ba;
display: inline-block;
cursor: pointer;
margin: auto;
position: relative;
bottom: 15px;
border-radius:25px;
padding: 4.5px;
padding-left: 5.5px;
padding-right: 5.5px;
left: 115px;
border: 2px dashed #41515e;
text-decoration: none;
text-align: center;
z-index: 1;
}

a {
color: white;
text-decoration: none;
font-family: 'Open Sans', sans-serif;
}

a:hover {
letter-spacing:1.25px;
color:white;
transition:.3s;
text-decoration: none;
}
a { letter-spacing:normal; transition:.3s;}
.poop {
-webkit-transform: rotateZ(350deg);
transform: rotateZ(350deg);
z-index:222222;
animation: pop 1s infinite;
-webkit-animation: pop 1s infinite;
 
}
@keyframes pop {
from {
transform:scale(0.90)
}
50% {
transform:scale(1.01)
}
to {
transform:scale(0.90)
}
}
@-webkit-keyframes pop {
from {
-
webkit-transform:scale(0.95)
}
50% {
-webkit-transform:scale(1)
}
to {
-webkit-transform:scale(0.95)
}
}

.writing {
background: #dfe5eb;
position: relative;
bottom:20px;
left: 20px;
width: 275px;
height: 215px;
padding: 3.5px;
border-radius: 5px;
border: 2px solid #999;
overflow-x: hidden;
overflow-y: scroll;
color: #353536;
font-family: 'Roboto', sans-serif;
font-size: 13.5px;
}

::-webkit-scrollbar {
width: 16px
}
 
::-webkit-scrollbar:horizontal {
height: 17px
}
 
::-webkit-scrollbar-corner {
background: #eee
}
 
::-webkit-scrollbar-track:vertical {
background: linear-gradient(90deg, #e5e5e5, #f0f0f0 20%)
}
 
::-webkit-scrollbar-track:horizontal {
background: linear-gradient(180deg, #e5e5e5, #f0f0f0 20%)
}
 
::-webkit-scrollbar-thumb {
border: 1.5px solid #888;
border-radius: 3px;
box-shadow: inset 0 -1px 1px #fff, inset 0 1px 1px #fff;
background-color: #eee;
}
 
::-webkit-scrollbar-thumb:vertical {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAKCAIAAADpZ+PpAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAADrSURBVChTTc5LboJQGAXguyoCu4ERCzAGlRk7UOwGWIDh0s4M4kxb06RSq/jAB6AxJkJ4lTDrue3AnvyzP+fLId+/yfM8juP7PQmCCOf7B3e+ZD+O40RRVFW12VQUpd3r9U3T2m4OpKoqWZYNwzBZLEqfh0N7NnvfrPcEWlEUWZb9mWF4Ph6D0ylcLbfM5HkeJrhGA2hb15/QXnv+w7RYXsDatjOdvnmrHSnLEizMNE2v11sUXQBCnn98kbquBUGQJAlmq9WB2e3qg4HJdqKkaRql1HGc0WgMcDJ5dd0F24kediZJ8t/ELT69H+8py0CYSIO5AAAAAElFTkSuQmCC") no-repeat 50%, linear-gradient(90deg, #eee 45%, #ddd 0, #bbb)
}
 
::-webkit-scrollbar-thumb:horizontal {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAJCAYAAAALpr0TAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAADcSURBVChTNZBLqoUwEEQrURQUxZGCvy24ACfiityJi7tv8GauQoPxk5tquA2RQ9vVVYk6z9NZaxFFEe77htYazjk8z4MwDIVZ+rourOuKaZrwvi+WZcE8z1BKCbPPCjk4DAO2bRP1OI7wLiL6Mbd7J408z1GWpQwWRYGqqiQG+03TgMu0MacfUN4qANmn8UOv9MjW3sKaSm7iIdOSlziOQ3LScd93aPonSYK6riVLlmVo21aYfVqzND9pmqLrOlGT+76XbcxLZkb19/l3fEP+oF0cx8KMEASBsDEGX2/CgZCHkg+8AAAAAElFTkSuQmCC") no-repeat 50%, linear-gradient(180deg, #eee 45%, #ddd 0, #bbb)
}
 
::-webkit-scrollbar-button:horizontal:end:increment,
::-webkit-scrollbar-button:horizontal:start:decrement,
::-webkit-scrollbar-button:vertical:end:increment,
::-webkit-scrollbar-button:vertical:start:decrement {
display: block
}
 
::-webkit-scrollbar-button:vertical {
height: 17px
}
 
::-webkit-scrollbar-button:vertical:start:decrement {
background: white;
background-image: url("https://cdn.discordapp.com/attachments/904308736712138793/1001299199633141851/download.png");
background-repeat: no-repeat;
background-position: center;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
 
::-webkit-scrollbar-button:vertical:start:increment {
display: none;
}
 
::-webkit-scrollbar-button:vertical:end:decrement {
display: none;
}
 
::-webkit-scrollbar-button:vertical:end:increment {
background: white;
background-image: url("https://cdn.discordapp.com/attachments/904308736712138793/1001299200052576387/87ae92e1-3894-4469-b1b9-aedf5f04975c.png");
background-repeat: no-repeat;
background-position: center;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

/* End. */
</style>
<body>
<p>
<div class="real">
<div class="counter"><script type="text/javascript" src="//counter.websiteout.net/js/36/0/0/0"></script></div>
<div class="background">
<div class="header"><div class="heading1">Laraiia</div></div>
<div id="hover"><mark><a href="URL">🏹</a></mark> <mark><a href="URL">Carrd</a></mark> <mark><a href="URL">Resources</a></mark></div>
<div class="writing">filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler</div>
</div>
</div>
</p>
</body>

Rēsh-1

@laraiia make sureee your website supports html + javascript

A Former User

Congrats lol

Rēsh-1

@I_Løve_Zøf here are the screenshots

im finally finished with a template code :3

2

1.0k

63.4k

557.1k