TEMPLATES ^_

CSS index (iframe)

body {
background: rgb(255,255,255);
background: linear-gradient(0deg, rgba(255,255,255,1) 46%, rgba(246,215,229,1) 90%);
background-size: cover;
height: 100vh;
margin: 0em;
font-family: Arial, Helvetica, sans-serif;
background-attachment: fixed;
}

.layout {
display: flex;
height: 32rem;
justify-content: center;
  flex-direction: column;
  order: 2;
gap: 0rem;
filter: drop-shadow(0px 0px 1px white)
drop-shadow(0px 0px 0.5px white)
drop-shadow(0px 0px 0px white);
}

.top {
height: 27rem;
width: 35rem;
margin-top: auto;
margin-left: auto;
margin-right: auto;
justify-content: center;
  flex-direction: column;
}

.bottom {
height: 3rem;
margin-bottom: auto;
margin-left: auto;
margin-right: auto;
width: 45rem;
display: flex;
gap: 2rem;
}

.footer {
margin: 2px;
border: 1px solid #F7888F;
outline: 1px solid white;
width: 36rem;
border-top-right-radius: 14px;
border-bottom-right-radius: 35px;
box-shadow: 0px 0px 1px 1.5px white inset,
0px 0px 5px 2px #ffd0d3 inset;
background: rgb(255,239,240);
background: linear-gradient(0deg, 
rgba(255,208,211,1) 0%, 
rgba(255,239,240,1) 35%, 
rgba(255,239,240,1) 65%, rgba(255,208,211,1) 100%);
text-align: center;
line-height: 2.5rem;
font-size: 1rem;
color: #FFF9EF;
text-shadow:
-1px -1px #FFE4B4,
0px -1px #FFE4B4,
-1px 0px #FFE4B4,
-1px 0.5px #FFE4B4,

0px 1px #E0C296,
1px -1px #E0C296,
-1px 1px #E0C296,
1px 1px #E0C296,
0px -1px #E0C296,
-0px 1px #E0C296,
1px 0px #E0C296,
-1px 0px #E0C296,
-1px -1px #E0C296,

0px 0.5px #E0C296,
0.5px -0.5px #E0C296,
-0.5px 1px #E0C296,
0.5px 0.5px #E0C296,
0px -0.5px #E0C296,
-0px 0.5px #E0C296,
0.5px 0px #E0C296,
-0.5px 0px #E0C296,
-1px -0.5px #E0C296,
-0.5px -0.5px #E0C296,
-0.5px -1px #E0C296,

0px 0.5px #E0C296,
1px -0.5px #E0C296,
-1px 0.5px #E0C296,
1px 0.5px #E0C296,
0px -0.5px #E0C296,
-0px 0.5px #E0C296,
1px 0px #E0C296,
-1px 0px #E0C296,

0px 1px #E0C296,
0.5px -1px #E0C296,
-0.5px 1px #E0C296,
0.5px 1px #E0C296,
0px -1px #E0C296,
-0px 1px #E0C296,
0.5px 0px #E0C296,
-0.5px 0px #E0C296;
}

.button {
margin: 2px;
width: 6rem;
font-size: x-small;
line-height: 0.9rem;
color: #FAA71F;
}

.float {
float: left;
image-rendering: pixelated;
position: fixed;
margin-top: -12.3rem;
margin-left: -23rem;
}

@media only screen and (max-width: 767px) {
 .float {
   float: left;
image-rendering: pixelated;
position: absolute;
margin-right: 4rem;
 }
 
 body {
   max-width: 100vw;
 }
 
 .layout {
  margin-left: 9rem; 
 }
 
  .credits {
  margin-left: 16rem; 
  width: 8rem;
 }
}

.title {
margin: 2px;
height: fit-content;
font-size: 3rem;
text-align: right;
position: relative;
z-index: 2;
top: 3.3rem;
font-weight: bold;
font-style: italic;
background: rgb(249,136,22);
background: linear-gradient(0deg, rgba(249,136,22,1) 52%, rgba(250,181,35,1) 57%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
filter: drop-shadow(0px 0px 1px #FBE167)
drop-shadow(0px 0px 1px #FBE167)
drop-shadow(0px 0px 0px #FBE167)
drop-shadow(0px 0px 1px #FBE167)
drop-shadow(0px 0px 0px #FBE167)
drop-shadow(0px 0px 0px #DA9921);
}

.navigation {
margin: 2px;
height: 2rem;
position: relative;
top: 1.35rem;
display: flex;
padding-left: 4rem;
gap: 0.3rem;
}

.box {
border: 1px solid #ffb046;
margin: 2px;
height: 20rem;
background: rgb(255,242,186);
background: linear-gradient(0deg, rgba(255,242,186,1) 90%, rgba(255,214,106,1) 100%);
border-radius: 5px;
border-top-left-radius: 80px;
border-bottom-right-radius: 80px;
box-shadow: 0px 0px 25px 0px #FFD66A inset;
}

.credits {
color: hotpink;
text-align: center;
margin-bottom: -8rem;
margin-top: 0.5rem;
position: relative;
font-size: 0.7rem;
}

a.cred {
color: #FAB523;
}

a.cred:active {
color: #FAB523;
}

a.cred:visited {
color: #FAB523;
}

a.cred:hover {
color: #FAB523;
font-style: italic;
letter-spacing: 1px;
}

.button1 {
border: 1px solid #F7888F;
height: 2rem;
margin-top: 0.7rem;
width: 3.5rem;
outline: 1px solid white;
box-shadow: 0px 0px 1px 1.5px white inset,
0px 0px 5px 2px #ffd0d3 inset,
0px 4px 2px 0px #FFD66A80;
background: rgb(255,239,240);
background: linear-gradient(0deg, rgba(255,239,240,1) 46%, rgba(255,208,211,1) 90%, rgba(255,192,196,1) 100%);
border-radius: 5px;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;
text-align: center;
line-height: 2rem;
font-size: 0.7rem;
color: #FFF9EF;
text-shadow:
-1px -1px #FFE4B4,
0px -1px #FFE4B4,
-1px 0px #FFE4B4,
-1px 0.5px #FFE4B4,

0px 1px #FCD392,
1px -1px #FCD392,
-1px 1px #FCD392,
1px 1px #FCD392,
0px -1px #FCD392,
-0px 1px #FCD392,
1px 0px #FCD392,
-1px 0px #FCD392,
-1px -1px #FCD392,

0px 0.5px #FCD392,
0.5px -0.5px #FCD392,
-0.5px 1px #FCD392,
0.5px 0.5px #FCD392,
0px -0.5px #FCD392,
-0px 0.5px #FCD392,
0.5px 0px #FCD392,
-0.5px 0px #FCD392,
-1px -0.5px #FCD392,
-0.5px -0.5px #FCD392,
-0.5px -1px #FCD392,

0px 0.5px #FCD392,
1px -0.5px #FCD392,
-1px 0.5px #FCD392,
1px 0.5px #FCD392,
0px -0.5px #FCD392,
-0px 0.5px #FCD392,
1px 0px #FCD392,
-1px 0px #FCD392,

0px 1px #FCD392,
0.5px -1px #FCD392,
-0.5px 1px #FCD392,
0.5px 1px #FCD392,
0px -1px #FCD392,
-0px 1px #FCD392,
0.5px 0px #FCD392,
-0.5px 0px #FCD392;
}

.button2 {
border: 1px solid #f6a866;
height: 2rem;
margin-top: 0.7rem;
width: 3.5rem;
outline: 1px solid white;
box-shadow: 0px 0px 1px 1.5px white inset,
0px 0px 5px 2px #ffe5b3 inset,
0px 4px 2px 0px #FFD66A80;
background: rgb(255,249,239);
background: linear-gradient(0deg, rgba(255,249,239,1) 46%, rgba(255,229,179,1) 90%, rgba(255,214,164,1) 100%);
border-radius: 5px;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;
text-align: center;
line-height: 2rem;
font-size: 0.7rem;
color: #FFEFF0;
text-shadow:
-1px -1px #FFCFD3,
0px -1px #FFCFD3,
-1px 0px #FFCFD3,
-1px 0.5px #FFCFD3,

0px 1px #FFB5BB,
1px -1px #FFB5BB,
-1px 1px #FFB5BB,
1px 1px #FFB5BB,
0px -1px #FFB5BB,
-0px 1px #FFB5BB,
1px 0px #FFB5BB,
-1px 0px #FFB5BB,
-1px -1px #FFB5BB,

0px 0.5px #FFB5BB,
0.5px -0.5px #FFB5BB,
-0.5px 1px #FFB5BB,
0.5px 0.5px #FFB5BB,
0px -0.5px #FFB5BB,
-0px 0.5px #FFB5BB,
0.5px 0px #FFB5BB,
-0.5px 0px #FFB5BB,
-1px -0.5px #FFB5BB,
-0.5px -0.5px #FFB5BB,
-0.5px -1px #FFB5BB,

0px 0.5px #FFB5BB,
1px -0.5px #FFB5BB,
-1px 0.5px #FFB5BB,
1px 0.5px #FFB5BB,
0px -0.5px #FFB5BB,
-0px 0.5px #FFB5BB,
1px 0px #FFB5BB,
-1px 0px #FFB5BB,

0px 1px #FFB5BB,
0.5px -1px #FFB5BB,
-0.5px 1px #FFB5BB,
0.5px 1px #FFB5BB,
0px -1px #FFB5BB,
-0px 1px #FFB5BB,
0.5px 0px #FFB5BB,
-0.5px 0px #FFB5BB;

}

a.pink {
color: #FFF9EF;
text-decoration: none;
}

a.pink:visited {
color: #FFF9EF;
text-decoration: none;
}

a.pink:hover {
color: #FFF9EF;
text-decoration: none;
font-style: italic;
font-size: 0.64rem;
}

a.orange {
color: #FFEFF0;
text-decoration: none;
}

a.orange:visited {
color: #FFEFF0;
text-decoration: none;
}

a.orange:hover {
color: #FFEFF0;
text-decoration: none;
font-style: italic;
font-size: 0.64rem;
}

HTML index (iframe)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title of your own site</title>
         <script src="https://melonking.net/scripts/frame-link.js"></script>
             <meta name="darkreader-lock">
                              <link href=" your css file " rel="stylesheet" type="text/css" media="all">
</head>
  <body>

<div class="layout">
 
   
 
<div class="credits">
Layout by <a href="https://mypillowfort.neocities.org" target="_blank" class="cred">Tohar</a> ♥ 
</div>

<div class="title">
Orange Blossom!
</div>

</div>

</div>

C Your Site 2009

</div>

<div class="button">
You can put your button here or just remove this!
</div>

</div>

</body>
</html>

CSS iFrame Page

body { 
    font-size: 10px;
font-family: Arial, Helvetica, sans-serif;
background: transparent;
margin: 7px;
}
::selection {
color: #FFB0D9;
background: white;
font-style: italic;
font-weight: bold;
text-shadow: 1px 1px 3px;
}
/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    box-shadow: 0px 0px 2px 0px #F7D9B4 inset;
  background-color: #FFFFEC;
  border: 1px solid #F7D9B4;
  border-radius: 10px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
background: #FFDDE8;
  border-radius: 10px;
  border: 1px solid #FFCCDB;
  box-shadow: 0px 0px 5px 0px white inset;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #FFA7AC;
  border-radius: 10px;
  border: 1px solid #E87FA5;
}

@media only screen and (max-width: 508px) {
  * {
  font-size: 0.65rem;  
  }
}

p {
  color: #E28A31;
  margin: 2px;
}

b1 {
color:  #F4959B;
text-shadow: 1px 1px 3px;
}

.fl {
float: left;
}

.fr {
float: right;
}

.bar {
    border: 0px solid black;
    height: fit-content;
    padding: 3px;
    background: #BBF7E1;
    color: #FFFFE0;
    margin: 0px;
    font-family: ms pgothic;
    font-weight: bold;
    text-shadow: 1px 1px #9ACEC6;
    box-shadow: 1px 1px 0px #9ACEC6;
}

.line {
 border-top: 1px dashed #D1CABA;
 margin-left: 5px;
 margin-right: 5px;
}

a {
 color: #FF888F; 
 text-shadow: 0px 0px 0px;
}

a:hover {
 color: #FF888F; 
 text-shadow: 1px 1px 2px;
}

ul {
font-family:Arial, Helvetica, sans-serif;
  color: #E28A31;
}

li {
font-family:Arial, Helvetica, sans-serif;
  color: #E28A31;
}

textarea {
 border: 1px solid #E28A31;
 border-radius: 5px;
 color: #E28A31;
 background: #F9D18130;
 box-shadow: 0px 0px 10px 2px #F9D181 inset;
 font-size: 9.5px;
 width: 30rem;
}

.center {
text-align: center;
}

HTML index (no iframe)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title of your own site</title>
         <script src="https://melonking.net/scripts/frame-link.js"></script>
             <meta name="darkreader-lock">
                 <link href=" your css file " rel="stylesheet" type="text/css" media="all">
</head>
  <body>

<div class="layout">
 
   
 
<div class="credits">
Layout by <a href="https://mypillowfort.neocities.org" target="_blank" class="cred">Tohar</a> ♥ 
</div>

<div class="title">
Orange Blossom!
</div>

</div>

<div class="textbox">
  
<big><b>Terms</b></big>
<p>
<u><b>Do</b></u>
<li>Keep the "Layout by Tohar" intact</li>
<li>Respect my terms</li>
<br><p>
<u><b>Don't</b></u>
<li>Remove/Hide/Change the "Layout by Tohar". Please dont even change the location.</li>
<li>Claim as yours</li>
<br>
<p>Feel free to customise but please, do <font color="#F4959B">not</font> remove the credits! <font color="#F4959B">Thank you ♥</font>
  
</div>

</div>

C Your Site 2009

</div>

<div class="button">
You can put your button here or just remove this!
</div>

</div>

</body>
</html>

CSS index (no iframe)

.top {
height: 27rem;
width: 35rem;
margin-top: auto;
margin-left: auto;
margin-right: auto;
justify-content: center;
  flex-direction: column;
}

.bottom {
height: 3rem;
margin-bottom: auto;
margin-left: auto;
margin-right: auto;
width: 45rem;
display: flex;
gap: 2rem;
}

0px 1px #E0C296,
1px -1px #E0C296,
-1px 1px #E0C296,
1px 1px #E0C296,
0px -1px #E0C296,
-0px 1px #E0C296,
1px 0px #E0C296,
-1px 0px #E0C296,
-1px -1px #E0C296,

0px 0.5px #E0C296,
1px -0.5px #E0C296,
-1px 0.5px #E0C296,
1px 0.5px #E0C296,
0px -0.5px #E0C296,
-0px 0.5px #E0C296,
1px 0px #E0C296,
-1px 0px #E0C296,

0px 1px #E0C296,
0.5px -1px #E0C296,
-0.5px 1px #E0C296,
0.5px 1px #E0C296,
0px -1px #E0C296,
-0px 1px #E0C296,
0.5px 0px #E0C296,
-0.5px 0px #E0C296;
}

.button {
margin: 2px;
width: 6rem;
font-size: x-small;
line-height: 0.9rem;
color: #FAA71F;
}

.float {
float: left;
image-rendering: pixelated;
position: fixed;
margin-top: -12.3rem;
margin-left: -23rem;
}

.navigation {
margin: 2px;
height: 2rem;
position: relative;
top: 1.35rem;
display: flex;
padding-left: 4rem;
gap: 0.3rem;
}

.credits {
color: hotpink;
text-align: center;
margin-bottom: -8rem;
margin-top: 0.5rem;
position: relative;
font-size: 0.7rem;
}

a.cred {
color: #FAB523;
}

a.cred:active {
color: #FAB523;
}

a.cred:visited {
color: #FAB523;
}

a.cred:hover {
color: #FAB523;
font-style: italic;
letter-spacing: 1px;
}

0px 1px #FCD392,
1px -1px #FCD392,
-1px 1px #FCD392,
1px 1px #FCD392,
0px -1px #FCD392,
-0px 1px #FCD392,
1px 0px #FCD392,
-1px 0px #FCD392,
-1px -1px #FCD392,

0px 0.5px #FCD392,
1px -0.5px #FCD392,
-1px 0.5px #FCD392,
1px 0.5px #FCD392,
0px -0.5px #FCD392,
-0px 0.5px #FCD392,
1px 0px #FCD392,
-1px 0px #FCD392,

0px 1px #FCD392,
0.5px -1px #FCD392,
-0.5px 1px #FCD392,
0.5px 1px #FCD392,
0px -1px #FCD392,
-0px 1px #FCD392,
0.5px 0px #FCD392,
-0.5px 0px #FCD392;
}

0px 1px #FFB5BB,
1px -1px #FFB5BB,
-1px 1px #FFB5BB,
1px 1px #FFB5BB,
0px -1px #FFB5BB,
-0px 1px #FFB5BB,
1px 0px #FFB5BB,
-1px 0px #FFB5BB,
-1px -1px #FFB5BB,

0px 0.5px #FFB5BB,
1px -0.5px #FFB5BB,
-1px 0.5px #FFB5BB,
1px 0.5px #FFB5BB,
0px -0.5px #FFB5BB,
-0px 0.5px #FFB5BB,
1px 0px #FFB5BB,
-1px 0px #FFB5BB,

0px 1px #FFB5BB,
0.5px -1px #FFB5BB,
-0.5px 1px #FFB5BB,
0.5px 1px #FFB5BB,
0px -1px #FFB5BB,
-0px 1px #FFB5BB,
0.5px 0px #FFB5BB,
-0.5px 0px #FFB5BB;

}

a.pink {
color: #FFF9EF;
text-decoration: none;
}

a.pink:visited {
color: #FFF9EF;
text-decoration: none;
}

a.pink:hover {
color: #FFF9EF;
text-decoration: none;
font-style: italic;
font-size: 0.64rem;
}

a.orange {
color: #FFEFF0;
text-decoration: none;
}

a.orange:visited {
color: #FFEFF0;
text-decoration: none;
}

a.orange:hover {
color: #FFEFF0;
text-decoration: none;
font-style: italic;
font-size: 0.64rem;
}

.textbox {
font-size: 0.7rem;
height: 16.5rem;
margin: 2rem;
margin-top: 2.5rem;
margin-left: 1.2rem;
width: 31.6rem;
border-bottom-right-radius: 55px;
border-top-left-radius: 40px;
padding-left: 0.5rem;
color: #E28A31;
}

1. Do not hotlink my images. This means you must save them to your own computer, upload them to your own neocities (or whatever server youre using), and link the images from your own site. Hotlinking slows down my site, which is already very slow and laggy, so I would really appreacite it if you could show your support by not doing this.

2. Do not remove my credits. The little "Layout by Tohar" text, Please do not remove, hide, change, or edit it. At all. After all, I am giving you these layouts for free and out of my own will to help beginners so the least you could do is keep the credits up. It would also help other people find my site and templates!

P.S. When using the css files, remove the  stuff so it could work ^__^

Thank you and enjoy orange blossom ♡