In this page I put all my Free To Use web templates ! So you could ( hopefully ) use them on ur site ♡‧₊˚

Please rememeber that while I am giving you those for free , these still take time and effort to make - and I dont have to do all that . So please respect my terms <3 Thank you for understanding.

Feel free to customise my templates however you`d like - just dont do any changes to my credits. If its something small like colours, contact me to get my approval. Sorry !

( p . s . these arent all of my templates , let me know if you`d like me to add my older ones as well ~ )

Milo
Click the image to preview .
Tags : cute , colourful , frog

HTML

<head>

TERMS - MUST READ ︶🐸꒷꒦︶ ๋࣭ ⭑
       ﹒˚ ₊ ︵﹒⊹ ๑ ︵︵ ๑ ⊹﹒︵
       1. You are allowed to hotlink images
       From My Pillow Fort. You dont have
       to change URLs of images that are
       already here unless you'd want to.
       
       2. You are not allowed to change,
       remove or edit .cred1 or anything
       in it, CSS and HTML without
       permission from me
       
       3. Thats it ! Enjoy milo :)

TUTORIAL - HOW TO USE ──★ ˙🍓 ̟ !!
       ⠂⠄⠄⠂⠁⠁⠂⠄⠄⠂⠁⠁⠂⠄⠄⠂ ⠂⠄⠄⠂☆
       
       First of all, copy all this code to your own website
       and paste it inside your index.html file.
               
            ୨୧ Q & A ‧˚₊🐸`๑ ෆ
       
       Q: How to change "milo" text on the header ?
        ︵⏜︵⏜ ︵⏜ ︵⏜ ︵⏜ ︵⏜︵⏜ ︵⏜ ︵⏜ ︵⏜ ︵⏜ ︵
       A: line 231 -> change milo to your chosen site name.
       if your site name is too long, change the number in line
       228 to a smaller one to make the text fit.
       
       
       Q: How to change or remove "on the net" text (header) ?
        ︵⏜︵⏜ ︵⏜ ︵⏜ ︵⏜ ︵⏜︵⏜ ︵⏜ ︵⏜ ︵⏜ ︵⏜ ︵
       A: line 501 -> to remove change "on the net" to nothing
       ( literally just put a space there ) , to keep but change
       the text just replace "on the net" with your own text
       
       
       Q: How to change the moving text (marquee) ?
        ︵⏜︵⏜ ︵⏜ ︵⏜ ︵⏜ ︵⏜︵⏜ ︵⏜ ︵⏜ ︵⏜ ︵⏜ ︵
       A: line 478 -> replace the text with your own
       
       
       Q: How to change the links to my own links ?
        ︵⏜︵⏜ ︵⏜ ︵⏜ ︵⏜ ︵⏜︵⏜ ︵⏜ ︵⏜ ︵⏜ ︵⏜ ︵
       A: line 443 to line 467 -> change "link" to the
       title of the page (about, blog, links etc) and change "URL"
       to the URL of the page

if you have any more questions , feel free to contact
       me at https://mypillowfort.net/?z=/profile2.html !
       enjoy milo ~

*/
        
        body {
background: url(https://mypillowfort.nekoweb.org/templates/milo/bg6.gif);
  background-size: 150px;
  margin: 0;
  image-rendering: pixelated;
  font-family: 'plushie', ms ui gothic, ms pgothic, sans-serif;
}
::selection {
  background-color: #FFBEBD95;
    text-shadow: 1px 1px white;
}
/* width */
::-webkit-scrollbar {
  width: 11px;
}

/* Track */
::-webkit-scrollbar-track {
    box-shadow: 0px 0px 5px 0px #EA762380 inset;
  background-color: #FAFFD9;
  border: 1px solid #EA7623;
  border-radius: 2px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
background: rgb(255,246,238);
background: linear-gradient(0deg, rgba(255,246,238,1) 0%, rgba(255,194,219,1) 7%, rgba(254,176,204,1) 22%, rgba(252,163,192,1) 32%, rgba(252,163,192,1) 33%, rgba(250,154,184,1) 51%, rgba(252,163,192,1) 69%, rgba(252,163,192,1) 71%, rgba(254,176,204,1) 78%, rgba(255,194,219,1) 93%, rgba(255,246,238,1) 100%);
  border-radius: 1px;
  border: 1px solid #EA2E83;
  box-shadow: 0px 0px 5px 0px rgba(255,255,255,1) inset;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: rgb(255,246,238);
background: linear-gradient(180deg, rgba(254,255,234,1) 0%, rgba(248,185,205,1) 7%, rgba(255,241,221,1) 22%, rgba(250,251,220,1) 32%, rgba(229,253,213,1) 41%, rgba(199,244,215,1) 54%, rgba(197,240,228,1) 62%, rgba(194,234,244,1) 74%, rgba(173,205,255,1) 87%, rgba(217,183,255,1) 94%, rgba(237,255,239,1) 100%);
  border-radius: 1px;
  border: 1px solid #EA2E83;
  box-shadow: 0px 0px 5px 0px rgba(255,255,255,1) inset;
}

.layout {
display: flex;
margin: 0rem;
  justify-content: center;
align-items: center;
  height: 95vh;
}

.grid {
  display: grid;
  grid-template-columns: 120px 95px 328px 175px;
  margin: auto;
  height: 34rem;
  width: 45rem;
  grid-template-rows: 120px 180px 180px 50px;
  gap: 0px 0px;
  grid-template-areas:
    "clock ban ban ban"
    "nav top top box1"
    "nav main main box2"
    "nav cred1 cred cred";
  gap: 5px 5px;
  padding: 5px;
}

.clock {
  grid-area: clock;
box-shadow: 0px 0px 0px 1px #683311 inset;
  border-radius: 100%;
  color: #683311;
  width: 85%;
  transform: rotate(-3deg);
  height: 85%;
position: relative;
top: 20px;
left: 5px;
  border: solid 5px #B5E84F;
  outline: 1px solid #683311;
  background: #FFFCDD;
  text-align: center;
line-height: 100px;
  font-family: plushie, ms pgothic, ms ui gothic, sans-serif;
  font-size: 20px;
  font-weight: 600;
  z-index: 3;
}

.clock::after {
  border: solid 5px #B5E84F;
  outline: 1px solid #683311;
  background: #FFFCDD;
  content: '    ...';
  color: transparent;
  position: relative;
top: -52px;
  left: 36px;
  padding: 7px;
  margin-left: -42px;
  z-index: 1;
  height: 70px;
  width: 70px !important;
  border-radius: 100%;
  box-shadow: 0px 0px 0px 1px #683311 inset, 0px 0px 0px 8px #FFFCDD inset, 0px 0px 0px 50px #683311 inset;
}

.clock::before {
  border: solid 5px #B5E84F;
  outline: 1px solid #683311;
  background: #FFFCDD;
  content: '    ....';
  color: transparent;
  position: relative;
top: -52px;
  left: 7.5px;
  padding: 7px;
  margin-left: -41px;
  z-index: 1;
  height: 70px;
  width: 70px !important;
  border-radius: 100%;
  box-shadow: 0px 0px 0px 1px #683311 inset, 0px 0px 0px 8px #FFFCDD inset, 0px 0px 0px 50px #683311 inset;
}

.nav {
  grid-area: nav;
  position: relative;
top: -3px;
}

.top {
  grid-area: top;
  BACKGROUND: #FFFCDD;
  border: 1px solid #683311;
  box-shadow: 0px -7px 0px 0px inset #B9E879, 0px -14px 0px 0px inset #ECF9A1;
  height: 35px;
font-family: plushie, ms ui gothic, ms pgothic, sans-serif;
  color: #FFC4D2;
text-shadow: 1px 1px 0px #683311, 1px 0px 0px #683311;
  font-weight: bold;
  line-height: 30px;
}

.ban {
  grid-area: ban;
  box-shadow: 0px 0px 0px 1px #FFF8CC inset;
  border: 1px solid #683311;
  height: 60%;
  position: relative;
top: 40%;
background: rgb(255,237,243);
background: radial-gradient(circle, rgba(255,237,243,1) 45%, rgba(255,224,231,1) 45%, rgba(255,224,231,1) 56%, rgba(236,249,161,1) 57%, rgba(236,249,161,1) 91%, rgba(185,232,121,1) 91%);
font-family: plushie, ms ui gothic, ms pgothic, sans-serif;
  color: #FFC4D2;
text-shadow: 1px 1px 0px #683311, 1px 0px 0px #683311;
  font-weight: bold;
}

.ban::before {
  line-height: 0px;
  font-size: 80px;
  font-family: times new roman;
font-weight: bold;
content: 'milo';
  font-style: italic;
letter-spacing: 8px;
  position: relative;
top: -10px;
  left: 30px;
 text-shadow: none;
background: rgb(247,136,163);
background: linear-gradient(0deg, rgba(247,136,163,1) 16%, rgba(255,115,150,1) 37%, rgba(255,113,149,1) 44%, rgba(255,143,170,1) 48%, rgba(255,143,170,1) 59%, rgba(255,201,214,1) 100%);
     -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-background-clip: text;
    -moz-text-fill-color:transparent;
  
  
  
filter: drop-shadow(1px 1px 0px #683311);
}

.cred1 {
  grid-area: cred1; 
  color: #FFC0CF;
text-shadow: 1px 1px 1px #683311;
  font-family: plushie, ms ui gothic, ms pgothic, sans-serif;
text-align: right;
font-size: 12px;
  font-weight: bold;
}

.box1 {
    grid-area: box1;
    padding-top: -3px;
    padding-left: 1px;
    position: relative;
    top: 0px;
}

.cred {
  grid-area: cred;
 border: 1px solid #683311;
  box-shadow: 0px 0px 0px 3px inset #FFB9CA, 0px 0px 0px 6px inset #FFF2A8;
  background: #FFFCDD;
    color: #683311;
  font-family: plushie, ms ui gothic, ms pgothic, sans-serif;
  height: 70%;
  line-height: 32px;
  text-align: center;
}

.main {
  grid-area: main;
  height: 323px;
  position: relative;
  overflow: hidden;
top: -145px;
  border: 1px solid #683311;
  box-shadow: 0px 0px 0px 3px inset #FFB9CA, 0px 0px 0px 6px inset #D0F582, 0px 0px 0px 9px inset #FFF2A8;
  background: #FFFCDD;
    color: #683311;
  font-family: plushie, ms ui gothic, ms pgothic, sans-serif;
}

.textbox {
margin: 10px;
  margin-right: 3px;
overflow: auto;
  overflow-x: hidden;
  height: 302px;
}

.box2 {
  grid-area: box2;
 border: 1px solid #683311;
  box-shadow: 0px 0px 0px 3px inset #D0F582, 0px 0px 0px 6px inset #FFF2A8;
  background: #FFFCDD;
  padding: 13px;
    color: #683311;
    height: 80%; position: relative; font-family: plushie, ms ui gothic, ms pgothic, sans-serif; top: 8px;
}

.top1 {
text-align: center;
background: rgb(247,136,163);
background: linear-gradient(0deg, rgba(247,136,163,1) 16%, rgba(255,115,150,1) 37%, rgba(255,113,149,1) 44%, rgba(255,143,170,1) 48%, rgba(255,143,170,1) 59%, rgba(255,201,214,1) 100%);
  color: #FFFCDD;
font-family: plushie, ms ui gothic, ms pgothic, sans-serif;
  font-weight: bold;
  text-shadow: 1px 1px #683311, 1px 0px #683311;
  height: 40px;
  line-height: 37px;
  box-shadow: 0px 0px 0px 1px #FFF8CC inset;
  border: 1px solid #683311;
border-top-left-radius: 100%;
  border-top-right-radius: 100%;
}

.yellow {
background: rgb(254,227,135);
background: linear-gradient(0deg, rgba(254,227,135,1) 16%, rgba(255,211,115,1) 37%, rgba(255,220,113,1) 44%, rgba(255,239,143,1) 48%, rgba(255,239,143,1) 59%, rgba(255,244,201,1) 100%);
    color: #FFFCDD;
font-family: plushie, ms ui gothic, ms pgothic, sans-serif;
  font-weight: bold;
  text-shadow: 1px 1px #683311, 1px 0px #683311;
  height: 33px;
  line-height: 30px;
  box-shadow: 0px 0px 0px 1px #FFF8CC inset;
  border: 1px solid #683311;
    border-top: transparent 1px solid;
  text-align: center;
}

.green {
background: rgb(202,233,126);
background: linear-gradient(0deg, rgba(202,233,126,1) 16%, rgba(181,233,112,1) 37%, rgba(185,241,114,1) 44%, rgba(208,246,133,1) 48%, rgba(208,245,129,1) 59%, rgba(242,255,197,1) 100%);
    color: #FFFCDD;
font-family: plushie, ms ui gothic, ms pgothic, sans-serif;
  font-weight: bold;
  text-shadow: 1px 1px #683311, 1px 0px #683311;
  height: 33px;
  line-height: 30px;
  box-shadow: 0px 0px 0px 1px #FFF8CC inset;
  border: 1px solid #683311;
    border-top: transparent 1px solid;
  text-align: center;
}

.bottom1 {
text-align: center;
background: rgb(247,136,163);
background: linear-gradient(0deg, rgba(247,136,163,1) 16%, rgba(255,115,150,1) 37%, rgba(255,113,149,1) 44%, rgba(255,143,170,1) 48%, rgba(255,143,170,1) 59%, rgba(255,201,214,1) 100%);
  color: #FFFCDD;
font-family: plushie, ms ui gothic, ms pgothic, sans-serif;
  font-weight: bold;
  text-shadow: 1px 1px #683311, 1px 0px #683311;
  height: 40px;
  line-height: 37px;
  box-shadow: 0px 0px 0px 1px #FFF8CC inset;
  border: 1px solid #683311;
border-bottom-left-radius: 100%;
  border-bottom-right-radius: 100%;
  border-top: transparent;
}

.marq {
animation-name: marq;
  display: block;
position: relative;
    animation-duration: 2s;

animation: 1.75s linear .1s marq;
    animation-iteration-count: infinite;
}

@keyframes marq {
  0% { left: 2px; }
  50% { left: 70px; }
    100% { left: 2px; }
}

a {
color: #3897B5;
}

a:visited {
color: #3897B5;
}

a.nav {
color: #FFFCDD !important;
  text-decoration: none;
 position: relative;
top: 0px;
}

</style>
        </head>
        <body>
        <div class="layout">
   <script>
    function clock() {// We create a new Date object and assign it to a variable called "time".
var time = new Date(),
    
    // Access the "getHours" method on the Date object with the dot accessor.
    hours = time.getHours(),
    
    // Access the "getMinutes" method with the dot accessor.
    minutes = time.getMinutes(),
    
    
    seconds = time.getSeconds();

document.querySelectorAll('.clock')[0].innerHTML = harold(hours) + ":" + harold(minutes) + ":" + harold(seconds);
  
  function harold(standIn) {
    if (standIn < 10) {
      standIn = '0' + standIn
    }
    return standIn;
  }
}
setInterval(clock, 1000);
</script>
<div class="grid">
  <div class="clock"></div>
  <div class="nav">
    
    <div class="top1">
      navigation
    </div>
    <div class="green">
<a href="URL" class="nav">link</a>
</div>
        <div class="yellow">
<a href="URL" class="nav">link</a>
</div>
        <div class="green">
<a href="URL" class="nav">link</a>
</div>
        <div class="yellow">
<a href="URL" class="nav">link</a>
</div>
        <div class="green">
<a href="URL" class="nav">link</a>
</div>
        <div class="yellow">
<a href="URL" class="nav">link</a>
</div>
            <div class="green">
<a href="URL" class="nav">link</a>
</div>
            <div class="yellow">
<a href="URL" class="nav">link</a>
</div>
            <div class="green">
<a href="URL" class="nav">link</a>
</div>
        <div class="bottom1">
      tank yew~
    </div>
    
    
    
  </div>
  <div class="top">
<span class="marq">
Any text that you`d like to put here , moves ! </span>
    
</div>
    <div class="main"><div class="textbox">
Welcome to the preview of my F2U Template - Milo !
<br>
<b>Bold text</b> <u>Underlined text</u> <a href="/">Hyperlinked text</a>
<br>
      <img src="https://mypillowfort.net/media2/tumblr_77d17e077a3f5dc583c613f395f2e7b4_6d1593e5_250.gif" style="float: left;"><br>
You are viewing a template made by Shai of MyPillowFort.
<br><br>
Terms for user of the template:
<br><br>
      Please dont change, remove or edit the class "cred1" at all. If its important for style-related issues, please contact me on <a href="https://mypillow.atabook.org/">my guestbook</a>.
<br>
<br>
p.s. feel free to hotlink images ! 
<br><br>
Thank you for using milo, and have a lovely day !
<br>

</div></div>
  <div class="ban">
    on the net
</div>
  <div class="cred1">
Layout by Shai
    <span style="color: #FFFF8E;">More templates</span> <a href="https://mypillowfort.net" style="color: #D4F78A;">mypillowfort.net</a>
    
  </div>
  <div class="box1">
    <iframe src="https://mypillowfort.net/templates/milo/calender.html" frameborder="0" scrolling="no" height="190px"></iframe>
  </div>
  <div class="cred">
    
    C Your Site Name 2009
    
  </div>
    <div class="box2">

Anything you`d like
      
</div>
</div>
  
</div>
    </body>

Divisive
Click the image to preview .
Tags : pastel , cold , simple

HTML

</div>
    
      <div class="flex3">
  
              <div class="top">
  
                <div class="t1">
 your site name
</div>

</div>
                
  </div>
        
                      <div class="middle">
  
                        <div class="m1">

<div class="textbox">
Welcome to divisive - a free to use template made by me , for you to use on your websites .
<br>
<br>
    <b>This is Some Bold text,</b>  <u>Undrlined text,</u> <i> and this is A bit Of italic Text.</i> <a href="">This is a link.</a>                    
                            <br>
<br>
<b>Terms :</b>
<br>
Do not change, remove, edit or delete anything on class b2 ( the credits ) .
<br>
Feel free to edit or change stuff up a bit , just please dont remove/change/edit the credits .
<br>
<br><br>
Thank you for using divisive , and have a great day♥️
<br>
<br><br>
If you have any questions feel free to email me at shai.mpf@gmail.com , or dm me on discord at xoxo.shai
<br><br>
<br>
xo xo shai
</div>
                          
</div>
                        
                                                <div class="m2">

</div>
                        
                        
  </div>
        
                      <div class="bottom">
  
                        
                                        <div class="b1">
c Your Site 2000
</div>

<div class="b2">
Layout by Shai ♥️
  <br>
More Templates over at
<br>
<a href="https://mypillowfort.nekoweb.org" style="text-decoration: none; color: #C091C1;">mypillowfort.nekoweb.org</a>
</div>
                        
                        
  </div>
        
  </div>
    
  </div>
  
</div>

/* Chrome, Edge and Safari */
*::-webkit-scrollbar {
  height: 7px;
  width: 7px;
}
*::-webkit-scrollbar-track {
  border-radius: 3px;
  background-color: #E4AFC5;
  border: 1px dotted #FFFFFF;
}

*::-webkit-scrollbar-track:hover {
  background-color: #F1B9D0;
}

*::-webkit-scrollbar-track:active {
  background-color: #FBC1D9;
}

*::-webkit-scrollbar-thumb {
  border-radius: 20px;
  background-color: #FFCCEA;
  border: 1px dotted #FFFFFF;
}

*::-webkit-scrollbar-thumb:hover {
  background-color: #F7D4FF;
}

*::-webkit-scrollbar-thumb:active {
  background-color: #CED9FF;
}

.layout {
margin: 0rem;
  height: 100vh;
  display: flex;
justify-content: center;
align-items: center;
}

.flex1 {
  height: 29rem;
  width: 56rem;
  display: flex;
  flex-direction: row;
}

.flex2 {
width: 20%;
    position: relative;
  z-index: 5;
  filter: drop-shadow(5px 5px 10px white);
}

.flex3 {
  width: 60%;
  display: flex;
  flex-direction: column;
}

.top {
  height: 25%;
  position: relative;
  top: 1.7rem;
  display: flex;
flex-direction: row;
  gap: 1rem;
  align-items: flex-end;
}

.t1 {
  width: 75%;
  height: 50%;
border-top-left-radius: 2rem 0.75rem;  
  border-top-right-radius: 2rem 0.75rem;  
  border-bottom-left-radius:2rem 0.75rem;  
  border-bottom-right-radius:2rem 0.75rem;  
  border: 1px solid white;
  z-index: 3;
background: rgb(223,244,245);
background: linear-gradient(180deg, rgba(223,244,245,1) 14%, rgba(235,249,250,1) 14%, rgba(235,249,250,1) 28%, rgba(255,255,255,1) 28%);
padding-top: 50px;
  font-size: 14px;
  color: #E096B7;
  letter-spacing: 15px;
  text-shadow: 1px 1px #FFE4F0;
}

.clock {
  height: 32%;
  width: 20%;
border-top-left-radius: 1rem 0.45rem;  
  border-top-right-radius: 1rem 0.45rem;  
  border-bottom-left-radius:1rem 0.45rem;  
  border-bottom-right-radius: 1rem 0.45rem;  
background: rgb(248,254,255);
background: linear-gradient(180deg,  rgba(255,250,251,1) 60%,   rgba(255,243,249,1) 60%,   rgba(255,243,249,1) 80%, rgba(251,237,248,1) 80%);
    border: 1px solid white;
  z-index: 2;
  text-align: center;
line-height: 30px;
  letter-spacing: 2px;
  color: #E2AAD7;
  text-shadow: 1px 1px white, -1px -1px white, -1px 1px white, 1px -1px white;
  font-weight: bold;
}

.middle {
  height: 90%;
  top: -1rem;
    position: relative;
  display: flex;
  align-items: center;
justify-content: center;
  gap: 2rem;
}

.m1 {
  height: 100%;
  width: 100%;
    position: relative;
  left: 3rem;
border-top-left-radius: 1rem 0.25rem;  
  border-top-right-radius: 2rem 0.75rem;  
  border-bottom-left-radius: 2rem 0.75rem;  
  border-bottom-right-radius: 2rem 0.75rem;  
background: rgb(248,254,255);
background: linear-gradient(0deg,  rgba(255,250,251,1) 80%,   rgba(255,243,249,1) 80%,   rgba(255,243,249,1) 86%, rgba(251,237,248,1) 86%);
    border: 1px solid #f6eaf2;
  z-index: 1;
}

.m2 {
  width: 18%;
  position: relative;
  height: 70%;
  top: 1rem;
left: -3rem;
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 5px;
justify-content: center;
}

.bottom {
    height: 9%;
    position: relative;
  display: flex;
  flex-direction: row;
}

.b1 {
  width: 40%;
  border-top-left-radius: 1rem 0.45rem;  
  border-top-right-radius: 1rem 0.45rem;  
  border-bottom-left-radius: 1rem 0.45rem;  
  border-bottom-right-radius: 1rem 0.45rem;  
background: rgb(223,244,245);
background: linear-gradient(0deg, rgba(223,244,245,1) 14%, rgba(235,249,250,1) 14%, rgba(235,249,250,1) 28%, rgba(255,255,255,1) 28%);
  z-index: 2;
  top: -1.5rem;
  position: relative;
    border: 1px solid white;
  text-align: center;
line-height: 40px;
  font-size: 14px;
  letter-spacing: 2px;
  word-spacing: 4px;
    color: #8CADCC;
}

.b2 {
    width: 30%;
  position: relative;
left: 0.5rem;
  font-size: 10px;
color: #E096B7;
  top: -0.8rem;
  text-shadow: 2px 2px white, -2px 2px white, -1px 1px white, 1px 1px white;
  z-index: 5;
  opacity: 0.6;
}

.nav {
border-top-left-radius: 2rem 1rem;  
  border-top-right-radius: 2rem 1rem;  
  border-bottom-left-radius:1rem 0.45rem;  
  border-bottom-right-radius: 1rem 0.45rem;  
background: rgb(232,223,245);
background: linear-gradient(180deg, rgba(232,223,245,1) 24%, rgba(247,240,252,1) 24%, rgba(247,240,252,1) 48%, rgba(255,255,255,1) 48%);
    border: 1px solid white;
  z-index: 2;
width: 80%;
height: 2rem;
text-align: center;
font-size: 16px;
  margin: auto;
    margin-top: 0rem;
      margin-bottom: 0rem;
  line-height: 2rem;
  color: #A4A6DB;
  font-weight: bold;
  text-shadow: 1px 1px white, -1px 1px white, -1px -1px white, 1px -1px white;
}

.link {
  width: 100%;
  height: 20px;
border-top-left-radius: 1rem 0.75rem;  
  border-top-right-radius: 1rem 0.75rem;  
  border-bottom-left-radius:1rem 0.75rem;  
  border-bottom-right-radius:1rem 0.75rem;  
  border: 1px solid white;
  z-index: 3;
background: rgb(223,244,245);
background: linear-gradient(180deg, rgba(223,244,245,1) 24%, rgba(235,249,250,1) 24%, rgba(235,249,250,1) 48%, rgba(255,255,255,1) 48%);
  text-align: center;
line-height: 23px;
  letter-spacing: 1px;
  font-size: 10px;
  color: #8CADCC;
}

a {
color: #8CADCC;
  text-decoration: none;
}

a:visited {
color: #A4A6DB;
  text-decoration: none;
}

.textbox {
margin-top: 65px;
  margin-right: 65px;
  height: 250px;
  margin-left: 10px;
  padding: 3px;
  color: #E0AAC0;
  letter-spacing: 1.5px;
  overflow: auto;
  overflow-x: hidden;
}
</style>

Cuddle
Click the image to preview .
Tags : cute , strawberry , pink - yellow

HTML

/* 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;
}

* {
zoom: 98%;
  font-family: arial;
          // ᴺᴼᵀᴱ ˚₊ · this ⤴ is the font . you can change `arial` to any other deafult web font if you`d like . if the font you want isnt a deafult web font , follow my custom fonts tutorial on mypillowfort.nekoweb.org <3 ♡ ✧˖°
            // ᴺᴼᵀᴱ ˚₊ · dont change unless you know what youre doing ♡ ✧˖°
}

.flex {
height: 33rem;
display: flex;
justify-content: center;
}

.layout {
height: 33rem;
width: 43rem;
margin: auto;

display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(5, 1fr);
grid-column-gap: 1rem;
grid-row-gap: 0.5rem;
          // ᴺᴼᵀᴱ ˚₊ · dont change unless you know what youre doing ♡ ✧˖°
}

.div1 {
grid-area: 2 / 5 / 4 / 6;
  color: #A57352;
  text-align: center;
font-size: 0.8rem;
font-weight: bold;
  padding-top: 0.5rem;
  line-height: 1rem;
border: 1px solid #A57352;
box-shadow:
0 0 0 2px #A57352, 0px 0px 20px 5px #FFFDA3 inset, 0px 0px 10px 2.5px #FFA3BE inset;
  border-top-left-radius: 4rem 3rem;
    border-top-right-radius: 4rem 3rem;
  
    border-bottom-left-radius: 0.5rem 0.5rem;
    border-bottom-right-radius: 0.5rem;
outline: 1px solid white;
  width: 8rem;
  height: 11.5rem;
  background: #FFFBD8;
            // ᴺᴼᵀᴱ ˚₊ · these are the settings of the div with the pink link buttons . ♡ ✧˖°
}

.div2 {
 grid-area: 2 / 3 / 3 / 5;
  height: 2rem;
  width: 22rem;
             // ᴺᴼᵀᴱ ˚₊ · dont change unless you know what youre doing ♡ ✧˖°
}

.CREDITCLASS {
color: #A57352;
font-size: 0.9rem;
  width: 9rem;
  position: relative;
top: 20.5rem;
left: 14rem;
  margin-left: -1.5rem;
text-shadow: 1px 1px white;
              // ᴺᴼᵀᴱ ˚₊ · DONT CHANGE OR EDIT OR REMOVE !  ♡ ✧˖°
}

.two2 {
  background-color: #FFA3BE;
padding: 1rem;
width: 21rem;
  margin-left: -2rem;
  text-align: center;
  border-radius: 2rem;
    position: relative;
  height: 0.8rem;
  color: #FFFBD4;
  letter-spacing: 0.2rem;
font-weight: bold;
 margin-top: -0.4rem;
text-shadow: 1px 1px #A57352;
  line-height: 0.8rem;
  
  border: 1px solid #A57352;
box-shadow:
0 0 0 2px #A57352;
outline: 1px solid white;
            // ᴺᴼᵀᴱ ˚₊ · dont change unless you know what youre doing ( anything you`d like button ) ♡ ✧˖°
}

.two2:before {
content: "";
height: 50%;
position: absolute;
top: 0.05rem;
left: 0.4rem;
width: 22.2rem;
  border-radius: 5rem;
  background: transparent;
  background-image: linear-gradient(#fff 0, rgba(255, 255, 255, 0) 100%);
  opacity: 0.6;
            // ᴺᴼᵀᴱ ˚₊ · dont change unless you know what youre doing ♡ ✧˖°
}

.div3 {
grid-area: 1 / 3 / 2 / 6;
font-size: 4.5rem;
  line-height: 10rem;
  height: 7.34rem;
  margin-left: -2.5rem;
  font-weight: bold;
font-style: italic;
background: rgb(255,150,183);
background: linear-gradient(0deg, rgba(255,150,183,1) 32%, rgba(255,188,208,1) 40%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
filter: drop-shadow(0px 0px 1px #FBF5CF)
drop-shadow(0px 0px 1px #FBF5CF)
drop-shadow(0px 0px 0px #FBF5CF)
drop-shadow(0px 0px 1px #FBF5CF)
drop-shadow(0px 0px 0px #FBF5CF)
drop-shadow(0px 0px 1px #A57352);
           // ᴺᴼᵀᴱ ˚₊ · div3 is the element of the title " CUDDLE " . change to your own site name . if your site name is too long , try making the font size a bit smaller . ♡ ✧˖° 
}

.div4 {
grid-area: 3 / 1 / 5 / 5;
border: 1px solid #A57352;
box-shadow:
0 0 0 2px #A57352, 0px 0px 30px 10px #FFFDA3 inset, 0px 0px 20px 5px #FFA3BE inset;
  border-top-left-radius: 0.5rem 0.5rem;
    border-top-right-radius: 5rem 2.5rem;
  
    border-bottom-left-radius: 0.5rem 0.5rem;
    border-bottom-right-radius: 0.5rem;
outline: 1px solid white;
  height: 15rem;
margin-top: -3.5rem;
    background: #FFFBD8;
  color: #A57352;
  padding: 2rem;
   // ᴺᴼᵀᴱ ˚₊ · the main textbox . dont change unless you know what youre doing ♡ ✧˖°
}

.div5 {
grid-area: 1 / 1 / 3 / 3;
width: 10rem;
height: 12rem;
  margin-left: 1rem;
  margin-top: 0.5rem;
     // ᴺᴼᵀᴱ ˚₊ · the place for the big image . dont change unless you know what youre doing ♡ ✧˖°
}

.div6 {
grid-area: 5 / 1 / 6 / 5;
  background-color: #FFA3BE;
padding: 1rem;
width: 25rem;
  text-align: center;
  border-radius: 2rem;
    position: relative;
  height: 0.8rem;
  color: #FFFBD4;
  letter-spacing: 0.2rem;
font-weight: bold;
text-shadow: 1px 1px #A57352;
  line-height: 0.8rem;
  
  border: 1px solid #A57352;
box-shadow:
0 0 0 2px #A57352;
outline: 1px solid white;
       // ᴺᴼᵀᴱ ˚₊ · the "c your site name 2000 " . dont change unless you know what youre doing ♡ ✧˖°
}

.div6:before {
content: "";
height: 50%;
position: absolute;
top: 0.05rem;
left: 0.4rem;
width: 26.2rem;
  border-radius: 5rem;
  background: transparent;
  background-image: linear-gradient(#fff 0, rgba(255, 255, 255, 0) 100%);
  opacity: 0.6;
       // ᴺᴼᵀᴱ ˚₊ · dont change unless you know what youre doing ♡ ✧˖°
}

.div7 {
 grid-area: 4 / 5 / 6 / 6; 
border: 1px solid #A57352;
    color: #A57352;
  text-align: center;
font-size: 0.8rem;
font-weight: bold;
line-height: 1.5rem;
box-shadow:
0 0 0 2px #A57352, 0px 0px 20px 5px #FFA3BE inset;
  border-bottom-left-radius: 4rem 3rem;
    border-bottom-right-radius: 4rem 3rem;
  
    border-top-left-radius: 0.5rem 0.5rem;
    border-top-right-radius: 0.5rem;
outline: 1px solid white;
  background: #FFD2DF;
  height: 12rem;
  margin-top: -1.45rem;
       // ᴺᴼᵀᴱ ˚₊ · the pink textbox on the right . ♡ ✧˖°
}

a {
color: #F7809A;
      // ᴺᴼᵀᴱ ˚₊ · link styling ♡ ✧˖°
}

.nav1 {
position: relative;
top: -16.22rem;
  left: 38.8rem;
  image-rendering: pixelated;
      // ᴺᴼᵀᴱ ˚₊ · the position of the image " navigation " between the right sidebars . dont change unless you know what youre doing ♡ ✧˖°
}

.pink-button {
color: #A57352;
  text-align: left;
  width: 7rem;  border: transparent;
background: #FFB3CA;
font-size: 0.6rem;
  padding: 0.3rem;
  text-transform: uppercase;
font-weight: bold;
border: 0.5px solid #FFFBCD;
        // ᴺᴼᵀᴱ ˚₊ · the style of the buttons in the yellow right sidebar . ♡ ✧˖°
}

.pink-button:hover {
background: #FFC1D3;
        // ᴺᴼᵀᴱ ˚₊ · the style of these buttons when being hovered ( when the cursor is on them ) ♡ ✧˖°
}

.textbox {
margin: 0.5rem;
text-align: left;
  font-weight: 1;
  font-size: 1rem;
  line-height: 1rem;
        // ᴺᴼᵀᴱ ˚₊ · textbox of the pink right sidebar . dont change unless you know what youre doing ♡ ✧˖°
}
    
    
  </style>

<div class="div1">TITLE
  
<br>
<button class="pink-button" href="URL">one</button>
    
  <button class="pink-button" href="URL">two</button>
      
    <button class="pink-button" href="URL">three</button>
      
      <button class="pink-button" href="URL">four</button>
      
        <button class="pink-button" href="URL">five</button>
      
          <button class="pink-button" href="URL">six</button>
      
            <button class="pink-button" href="URL">seven</button>
      
  </div>

<div class="div2">
<div class="two2">
<marquee behavior="alternate">Anything you'd like!</marquee>
      
</div>
  <div class="CREDITCLASS">
    
Layout by Shai ♥
More templates at <a href="https://mypillowfort.nekoweb.org/" style="letter-spacing: 0.05rem; text-decoration: none;">mypillowfort.nekoweb.org</a>
   
</div>
  
 </div>
<div class="div3">
C U D D L E
     
 </div>
<div class="div4">
<b style="color: hotpink;">W</b> e l c o m e  t o  c u d d l e <b>!</b> <span style="color: hotpink;">(´ ω `♡)</span>
<br>
This is a personal template preview that I am offering to you, the reader, for free!
<br>
You could use it for your website , blog , whatever you`d like <span style="color: hotpink;">♥♥♥</span>
<br>
<small><i>  p.s. credit to <a href="https://softteddypaws.neocities.org/">Micky</a> for the gradient button code !</i></small>
<br><br>
<img src="https://mypillowfort.nekoweb.org/media5/tumblr_d431679b889b0c889237a0a943e50047_3c3cb7af_75.gif" style="float: left; margin-right: 0.5rem;">
<i>This time you can hotlink the images if you`d like ! You could also change them , but I dont mind the hotlinking .</i>
<br>
Enjoy Cuddle !~ <span style="color: hotpink;">( ´ ▽ ` ) </span>
</div>
<div class="div5">
<img src="https://mypillowfort.nekoweb.org/media3/tumblr_aed11ffdfa6359546a4bb1ba9b5dd055_dd3e16ef_100.gif" height=95%"">
        
 </div>
<div class="div6"> 
© Your Site Name 2000
     
</div>
  <div class="div7"> TITLE
     
<div class="textbox">
You can also put text in here ! For example , you can put stasticts like a counter : )
    
</div>
 </div>

</div>