AUGUST?

Layout by Tohar ♥

Anything you'd like!

Text

Anything you'd like!

Welcome to AUGUST? ( ´ ▽ ` )
Terms
1. DO NOT remove, edit, change or hide the "layout by tohar".
2. DO Feel free to customise the code, but please DO NOT remove the credit!
3. DO NOT hotlink the images used in the template! Please save them to your computer and upload them to your own site. Thank you!

Code (html)

<!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>

If you need help with setting up this template or have any other questions, you can contact me here!

(ﾉ´ヮ`)ﾉ*: ･ﾟ♡

Text

Anything you'd like!

Text

Link
Link
Link
Link