TEMPLATES ^_

HTML index

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AUGUST?</title>
    
             <meta name="darkreader-lock">
<style>
body {
background: #fffef6;
margin: 0px;
height: 95vh;
    font-family: Arial, Helvetica, sans-serif;
}

.layout {
display: flex;
margin: 0.5rem;
height: 29.5rem;
justify-content: center;
align-items: center;
flex-direction: column;
filter: drop-shadow(0px 0px 2px #FFBAFF);
}

.sub {
margin: auto;
margin-bottom: 0rem;
margin-top: 0rem;
display: flex;
width: 38rem;
justify-content: space-between;
}

.top {
margin: auto;
margin-bottom: 0rem;
height: 8rem;
width: 38rem;
display: flex;
}

.middle {
margin: auto;
height: 17rem;
margin-top: -0.4rem;
width: 38rem;
display: flex;
justify-content: center;
}

.bottom {
margin: auto;
height: 2rem;
margin-top: 0rem;
width: 38rem;
}

.header {
background: rgb(255,186,255);
background: linear-gradient(0deg, rgba(255,186,255,1) 20%, rgba(255,233,255,1) 20%, rgba(255,233,255,1) 40%, rgba(255,255,255,1) 40%, rgba(255,255,255,1) 60%, rgba(255,233,255,1) 60%, rgba(255,233,255,1) 80%, rgba(255,186,255,1) 80%);
border: 2px solid #7A7A7A;
image-rendering: pixelated;
border-radius: 5px;
border-bottom-right-radius: 65px;
border-top-left-radius: 65px;
width: 80%;
margin: 6px;
text-align: right;
box-shadow: 0px 0px 1px 2px white inset;
line-height: 6.9rem;
font-size: 3rem;
    font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
padding-right: 2rem;
color: #CBFF9B;
text-shadow:
0px 3px #FFFFB2,
3px -3px #FFFFB2,
-3px 3px #FFFFB2,
3px 3px #FFFFB2,
0px -3px #FFFFB2,
-0px 3px #FFFFB2,
3px 0px #FFFFB2,
-3px 0px #FFFFB2,
-3px -3px #FFFFB2,

0px 1.5px #FFFFB2,
1.5px -1.5px #FFFFB2,
-1.5px 3px #FFFFB2,
1.5px 1.5px #FFFFB2,
0px -1.5px #FFFFB2,
-0px 1.5px #FFFFB2,
1.5px 0px #FFFFB2,
-1.5px 0px #FFFFB2,
-3px -1.5px #FFFFB2,
-1.5px -1.5px #FFFFB2,
-1.5px -3px #FFFFB2,

0px 1.5px #FFFFB2,
3px -1.5px #FFFFB2,
-3px 1.5px #FFFFB2,
3px 1.5px #FFFFB2,
0px -1.5px #FFFFB2,
-0px 1.5px #FFFFB2,
3px 0px #FFFFB2,
-3px 0px #FFFFB2,

0px 3px #FFFFB2,
1.5px -3px #FFFFB2,
-1.5px 3px #FFFFB2,
1.5px 3px #FFFFB2,
0px -3px #FFFFB2,
-0px 3px #FFFFB2,
1.5px 0px #FFFFB2,
-1.5px 0px #FFFFB2,

0px 5px white,
5px -5px white,
-5px 5px white,
5px 5px white,
0px -5px white,
-0px 5px white,
5px 0px white,
-5px 0px white,
-5px -5px white,

0px 2.5px white,
2.5px -2.5px white,
-2.5px 5px white,
2.5px 2.5px white,
0px -2.5px white,
-0px 2.5px white,
2.5px 0px white,
-2.5px 0px white,
-5px -2.5px white,
-2.5px -2.5px white,
-2.5px -5px white,

0px 2.5px white,
5px -2.5px white,
-5px 2.5px white,
5px 2.5px white,
0px -2.5px white,
-0px 2.5px white,
5px 0px white,
-5px 0px white,

0px 5px white,
2.5px -5px white,
-2.5px 5px white,
2.5px 5px white,
0px -5px white,
-0px 5px white,
2.5px 0px white,
-2.5px 0px white,

0px 6px #7A7A7A,
6px -6px #7A7A7A,
-6px 6px #7A7A7A,
6px 6px #7A7A7A,
0px -6px #7A7A7A,
-0px 6px #7A7A7A,
6px 0px #7A7A7A,
-6px 0px #7A7A7A,
-6px -6px #7A7A7A,

0px 3px #7A7A7A,
3px -3px #7A7A7A,
-3px 6px #7A7A7A,
3px 3px #7A7A7A,
0px -3px #7A7A7A,
-0px 6px #7A7A7A,
3px 0px #7A7A7A,
-3px 0px #7A7A7A,
-6px -3px #7A7A7A,
-3px -3px #7A7A7A,
-3px -6px #7A7A7A,

0px 3px #7A7A7A,
6px -3px #7A7A7A,
-6px -3px #7A7A7A,
-6px 3px #7A7A7A,
-6px 0px #7A7A7A,
-6px 6px #7A7A7A,
-6px -6px #7A7A7A,
6px 3px #7A7A7A,
0px -3px #7A7A7A,
-0px 3px #7A7A7A,
6px 0px #7A7A7A,
-6px 0px #7A7A7A,

0px 6px #7A7A7A,
3px -6px #7A7A7A,
-3px 6px #7A7A7A,
3px 6px #7A7A7A,
0px -6px #7A7A7A,
-0px 6px #7A7A7A,
3px 0px #7A7A7A,
-3px 0px #7A7A7A;
letter-spacing: 1rem;
}

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

.left {
margin: 0.5rem;
width: 20%;
display: flex;
flex-direction: column;
gap: 0.4rem;
margin-top: 1.1rem;
}

.right {
margin: 0.5rem;
width: 20%;
display: flex;
flex-direction: column;
gap: 0.5rem;
margin-top: 1.1rem;
}

.box {
border: 2px solid #7A7A7A;
image-rendering: pixelated;
border-radius: 45px;
margin: 0.8rem;
width: 60%;
background: rgb(255,255,251);
background: linear-gradient(0deg, rgba(255,255,251,1) 85%, rgba(224,246,255,1) 100%);
box-shadow: 0px 0px 1px 2px white inset;
}

.credits {
    font-family: Arial, Helvetica, sans-serif;
font-size: 0.8rem;
color: #CCE3FF;
text-shadow: 1px 1px #7A7A7A;
margin-left: 4rem;
}

.marquee {
    font-family: Arial, Helvetica, sans-serif;
font-size: 0.8rem;
color: #CBFF9B;
text-shadow: 1px 1px #7A7A7A;
width: 25rem;
}

a.cre {
color: #FFBAFF;
}

a.cre:hover {
color: #FFBAFF;
letter-spacing: 0.05rem;
}

.box1 {
border: 2px solid #7A7A7A;
height: 7rem;
box-shadow: 0px 0px 1px 2px white inset;
border-radius: 5px;
border-bottom-left-radius: 35px;
background: rgb(255,245,214);
background: linear-gradient(0deg, rgba(255,245,214,1) 10%, rgba(255,251,237,1) 10%, rgba(255,251,237,1) 20%, rgba(255,255,255,1) 20%, rgba(255,255,255,1) 80%, rgba(255,251,237,1) 80%, rgba(255,251,237,1) 90%, rgba(255,245,214,1) 90%);
color: #7A7A7A;
font-size: 0.7rem;
}

.box2 {
border: 2px solid #7A7A7A;
height: 7rem;
box-shadow: 0px 0px 1px 2px white inset;
border-radius: 5px;
border-bottom-left-radius: 35px;
background: rgb(255,230,255);
background: linear-gradient(0deg, rgba(255,230,255,1) 10%, rgba(255,243,255,1) 10%, rgba(255,243,255,1) 20%, rgba(255,255,255,1) 20%, rgba(255,255,255,1) 80%, rgba(255,243,255,1) 80%, rgba(255,243,255,1) 90%, rgba(255,230,255,1) 90%);
color: #7A7A7A;
font-size: 0.7rem;
}

.box3 {
border: 2px solid #7A7A7A;
height: 7rem;
box-shadow: 0px 0px 1px 2px white inset;
border-radius: 5px;
border-bottom-right-radius: 35px;
background: rgb(255,245,214);
background: linear-gradient(0deg, rgba(255,245,214,1) 10%, rgba(255,251,237,1) 10%, rgba(255,251,237,1) 20%, rgba(255,255,255,1) 20%, rgba(255,255,255,1) 80%, rgba(255,251,237,1) 80%, rgba(255,251,237,1) 90%, rgba(255,245,214,1) 90%);
color: #7A7A7A;
font-size: 0.7rem;
}

.box4 {
border: 2px solid #7A7A7A;
height: 7rem;
box-shadow: 0px 0px 1px 2px white inset;
border-radius: 5px;
border-bottom-right-radius: 35px;
background: rgb(255,230,255);
background: linear-gradient(0deg, rgba(255,230,255,1) 10%, rgba(255,243,255,1) 10%, rgba(255,243,255,1) 20%, rgba(255,255,255,1) 20%, rgba(255,255,255,1) 80%, rgba(255,243,255,1) 80%, rgba(255,243,255,1) 90%, rgba(255,230,255,1) 90%);
color: #7A7A7A;
font-size: 0.7rem;
}

.title {
color: #CBFF9B;
text-shadow: 1px 1px #7A7A7A;
font-weight: 900;
text-align: center;
position: relative;
  text-transform: uppercase;
top: -0.6rem;
font-size: 1rem;
}

.footer {
border: 2px solid #7A7A7A;
height: inherit;
border-bottom-left-radius: 300px;
border-bottom-right-radius: 300px;
box-shadow: 0px 0px 1px 2px white inset,
0px 0px 15px 3px #dfffd6 inset;
background: rgb(255,255,251);
background: radial-gradient(circle, rgba(255,255,251,1) 0%, rgba(223,255,214,1) 100%);
text-align: center;
line-height: 1.9rem;
color: white;
text-shadow: 1px 1px #FFA3FF;
}

a.b {
color: #7A7A7A;
text-decoration: none;
}

a.b:hover {
color: #7A7A7A;
text-decoration: none;
font-style: italic;
font-weight: 600;
margin-left: 0.25rem;
}

.textbox {
margin: 0.8rem;
height: 13.4rem;
color: #7A7A7A;
font-size: 0.8rem;
overflow: auto;
}

b1 {
font-size: 0.95rem;
font-weight: 600;
color: #FFBAFF;
text-shadow: 1px 1px #7A7A7A;
}

b2 {
font-size: 0.8rem;
font-weight: 600;
color: #FFBAFF;
text-shadow: 1px 1px #7A7A7A;
}

b3 {
font-size: 0.8rem;
font-weight: 600;
color: #CBFF9B;
text-shadow: 1px 1px #7A7A7A;
}

textarea {
border: 1px dashed #FFBAFF;
border-radius: 5px;
color: #FFBAFF;
width: 17rem;
}

@media only screen and (max-width: 767px) {
  .layout {
   margin-left: 3rem; 
   margin-top: 6rem;
  }
  
  .float {
   position: relative; 
   left: 9rem;
  }
}
</style>
</head>
  <body>
<div class="layout">

<div class="header">
<img src="https://mypillowfort.neocities.org/media/614.png" class="float" height="150px">

AUGUST? 
</div>

</div>

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

<div class="marquee">
<marquee behavior="alternate">Anything you'd like!</marquee>
</div>

</div>

Anything you'd like!

</div>

<div class="textbox">
<img src="https://mypillowfort.neocities.org/media/615.png" style="float: left;" height="60px"> <b1>Welcome to AUGUST? <font color="CBFF9B">( ´ ▽ ` )</font></b1>
<br>
<b>Terms</b>
<br>
1. <b2>DO NOT</b2> remove, edit, change or hide the "layout by tohar".
<br>
2. <b3>DO</b3> Feel free to customise the code, but please <b2>DO NOT</b2> remove the credit!
<br>
3. <b2>DO NOT</b2> hotlink the images used in the template! Please save them to your computer and upload them to your own site. Thank you!
<br>
<br>
If you need help with setting up this template or have any other questions, you can <a href="https://mypillowfort.neocities.org/about-me/?z=/about-me/contact">contact me here!</a> 
<br>
<br><b1>(ﾉ´ヮ`)ﾉ*: ･ﾟ♡</b1>
</div>

</div>

Anything you'd like!

</div>

</div>

</div>

</div>
  </body>
</html>

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!

Thank you and enjoy AUGUST? ♡