TEMPLATES

strawberry love!
posted: i guess July 11, 2024.

i just love strawberries i guess and i was inspired by this person.

calendar tutorial! / Edit calendar here!

Live Preview!

<!DOCTYPE html>
<html lang="en">
<head>

<!--
messy fucking code. (figured it out hehe)
i am not good at explaining, but fujoshi uses grids like me. check her out.
if you want this theme, just credit me somewhere.⠀⠀

theme inspired by oooeee@nekoweb.org

calendar code is from https://www.javascriptfreecode.com/36.htm !
-->

<link href="style.css" rel="stylesheet" type="text/css" media="all">

<link rel="icon" type="image/png" href="favicon.png">
  
  
  <title>strawberry love</title>
        
  <style>

/* link styling! do whatever!! */
a:link {
text-decoration: none;
color:black;
}

a:visited {
text-decoration: none;
color:black;
}

a:hover {
text-decoration: none;
font-style:italic;
color:#FFEFEF;
font-weight:bold;
}

a:active {
text-decoration: none;
color:black;
}
/* end of link styling */

/* these are what you need. background color/image, font color and what font you want to use */
body{
font-family:ms gothic;
font-size:14px;
color:#5D5D5D;
background-color:#FFEFEF;
background-image:url("");
background-size:cover;
background-attachment: fixed;
padding:10px;
overflow:auto;
}

/* this is the container. the mother grid. */
.container {  
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    ". 오이 오이 오이 오이 ."
    ". 오이 오이 오이 오이 ."
    ". 오이 오이 오이 오이 ."
    ". 오이 오이 오이 오이 ."
    ". 오이 오이 오이 오이 ."
    ". 오이 오이 오이 오이 .";
  height:800px;
  width:900px;
  margin:auto;
  padding:0px;
  position:relative;
}

/* these are the mother grids kids! */
.오이 {  
  display: grid;
  grid-template-columns: 0.8fr 1.2fr 1fr;
  grid-template-rows: 1.9fr 0.1fr 1.6fr 1fr 1.8fr 0.1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "우유 우유 우유"
    "딸기 딸기 딸기"
    "수박 복숭이 복숭이"
    "수박 복숭이 복숭이"
    "수박 복숭이 복숭이"
    "사과 사과 사과";
  grid-area: 오이;
}

/* header shit! */
.우유 { 
grid-area: 우유; 
border:1px solid black;
border-bottom:none;
background-color:white;
background-image:url("https://file.garden/ZgMuVg_U3BIqPawa/strawberry.png");
}

/* that little cute text under the header! */
.딸기 { 
grid-area: 딸기; 
border:1px solid black;
padding:1px;
background-color:white;
text-align:center;
}

/* this is where the .떡 and .ㅅㅂ is. */
/* you can erase those and make an entirely new navigation style! */
.수박 { 
grid-area: 수박; 
border:1px solid black;
border-top:none;
border-right:none;
border-bottom:none;
background-color:white;
padding:0px 0px 5px 0px;
}

/* this is the mother grids grandkids */
.복숭이 { 
  display: grid; 
  grid-auto-rows: 1fr; 
  grid-template-columns: 1fr 0.7fr 1.3fr; 
  grid-template-rows: 1.1fr 1fr 1fr; 
  gap: 0px 0px; 
  grid-template-areas: 
    "포도 포도 ㅠㅠ"
    "씨발 씨발 씨발"
    "씨발 씨발 씨발"; 
grid-area: 복숭이; 
border:1px solid black;
border-top:none;
border-bottom:none;
background-color:white;
padding:5px;
}

/* this is the site info on the left! */
.포도 { 
grid-area: 포도; 
padding:5px;
line-height:110%;
}

/* this is for the calendar! on the right! */
.ㅠㅠ { 
grid-area: ㅠㅠ; 
padding:0px;
float:right;
}

/* more area under the site info and calendar divs! */
.씨발 { 
grid-area: 씨발; 
padding:5px;
line-height:110%;
}

/* this is the footer! */
.사과 { 
grid-area: 사과; 
border:1px solid black;
text-align:center;
padding:1px;
background-color:white;
}

/* this is the navigation area where they have their own divs */
/* of course you can change this! doesn't have to be in it's own div box! */
.떡 {
background-color: #FFD0D0;
background-image:url("");
border:1px groove black;
border-left:none;
border-right:none;
border-radius:0px;
color: #5d5d5d;
padding:5px;
text-align:center;
}

/* this is the navigation area but on hover */
.떡:hover {
background-color: #CA8787;
background-image:url("");
border:1px groove black;
border-left:none;
border-right:none;
border-radius:0px;
font-style:italic;
color:#FFEFEF;
font-weight:bold;
padding:5px;
text-align:center;
}

/* this is that little description info under the navigation area. it has its own div */
.ㅅㅂ {
padding:5px;
}

</style>
        
</head>
    
  <body>

<div class="container">

<div class="오이">

<div class="우유">
  
      
    </div>
    
    
    <div class="딸기">
    ｡･ﾟ･( craving all the <font color="#D37676">strawberry cakes</font> in the world )･ﾟ･｡
    </div>
    
    
    <div class="수박">
    
    	
    	
    	
    	<div class="떡" style="border-bottom:none;border-top:none;background-color:#CA8787;">
        <b>navigation</b>
        </div>
        <div class="떡" style="border-bottom:none;">
        <a href="" style="cursor: not-allowed;">index</a>
        </div>
        <div class="떡" style="border-bottom:none;">
        <a href="" style="cursor: not-allowed;">profile</a>
        </div>
        <div class="떡" style="border-bottom:none;">
        <a href="" style="cursor: not-allowed;">journal</a>
        </div>
        <div class="떡" style="border-bottom:none;">
        <a href="" style="cursor: not-allowed;">links</a>
        </div>
        <div class="떡" style="border-bottom:none;background-color:#CA8787;">
        <b>personal</b>
        </div>
        <div class="떡" style="border-bottom:none;">
        <a href="" style="cursor: not-allowed;">shrines</a>
        </div>
        <div class="떡" style="border-bottom:none;">
        <a href="" style="cursor: not-allowed;">plushies</a>
        </div>
        <div class="떡" style="border-bottom:none;">
        <a href="" style="cursor: not-allowed;">projects</a>
        </div>
        <div class="떡" style="border-bottom:none;">
        <a href="" style="cursor: not-allowed;">artworks</a>
        </div>
        <div class="떡" style="border-bottom:none;background-color:#CA8787;">
        <b>offsite</b>
        </div>
        <div class="떡" style="border-bottom:none;">
        <a href="" style="cursor: not-allowed;">guestbook</a>
        </div>
        <div class="떡">
        <a href="" style="cursor: not-allowed;">discord</a>
        </div>
        
     
     <div class="ㅅㅂ">this specimen is in the works of perfection! check back later!
     
     
     <center><img src="https://file.garden/ZgMuVg_U3BIqPawa/trinket.png" style="width:140px;margin-top:2px;border:1px solid black;"></center>
     </div>
    </div>
    
    
    <div class="복숭이">
        
    	<div class="포도">
      <img src="https://file.garden/ZgMuVg_U3BIqPawa/tumblr_inline_pabkliYUj41t78dpp_75sq.webp" style="float:left;padding-right:5px;"> welcome to the specimen! here lies the construction work of <i>site name</i> that is in the process of perfection! this site is made with blood sweat and tears but also using grid.layout! made by <a href="https://rice.nekoweb.org/">rice</a>!<br><br>
      thank you so much for visiting my site, consinder dropping a comment on my guestbook? <br>|ｮ･ω･｀*)ｽｷｯ.｡.･ﾟ 
      </div>
      
       <div class="ㅠㅠ">
      <iframe id="frame" src="https://rice.nekoweb.org/misc/calendar3.html" width="100%" height="100%" frameborder="0"></iframe>
        </div>
        
        <div class="씨발">
        
        <center><img src="https://file.garden/ZgMuVg_U3BIqPawa/cytmylmvmp.png" style="border:1px solid black;"></center>
        strawberry cakes are a must. it is beautiful, tasty and very delicious. <img src="https://file.garden/ZgMuVg_U3BIqPawa/tumblr_52d95f8a46919c10a266437d4c057802_70803193_250.webp" style="float:right;"> the cream is rich, the strawberries are sweet, the cake is soft and white. and all together, is the most delicious treat in the world. <br><br>
        check out this website for information and recipe on <a href="https://www.justonecookbook.com/japanese-strawberry-shortcake/">japanese strawberry shortcake</a> (いちごのショートケーキ)!
        </div>
    </div>
    
    
    <div class="사과">
    hosted on (<b>知るかぼけ</b>) 2024, made with love.
    </div>
    
  </div>
  
</div>

</body>
    
</html>

grayscale
posted: November 09, 2024.

idk...just wanted to try a black and white theme. was a project at first but hey i released it as a f2u layout!

calendar tutorial! / Edit calendar here!

Live Preview!

<!DOCTYPE html>
<html lang="en">
<head>
    
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="icon" type="image/png" href=""> 
  <title>grayscale</title> 
  
  
        
  <style>

/* link styling! do whatever!! */
a:link {
text-decoration: none;
color:white;
}

a:visited {
text-decoration: none;
color:white;
}

a:hover {
text-decoration: none;
font-style:italic;
color:gray;
font-weight:bold;
}

a:active {
text-decoration: none;
color:black;
}
/* end of link styling */

/* these are what you need. background color/image, font color and what font you want to use */
body {
font-family:ms gothic;
font-size:14px;
color:#fff;
background-color:black;
background-image:url("");
padding:10px;
}

/* this is the container. the mother grid. */
.container {  
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1.2fr 1.6fr 1fr 0.1fr;
  gap: 10px 10px;
  grid-auto-flow: row;
  grid-template-areas:
    "header header header header"
    "sidebar1 content content sidebar2"
    "sidebar1 content content sidebar2"
    "footer footer footer footer";
  margin:auto;
  border:1px dotted #fff;
  border-radius:20px;
  width:800px;
  height:900px;
  padding:20px;
  background-color:black;
  position:relative;
}

/* the header */
.header { 
grid-area: header; 
border:1px dotted #fff;
background-image:url("https://file.garden/ZgMuVg_U3BIqPawa/neko.png"); /* it is much prefered to use background image then a image itself! */
border-radius:10px 10px 0px 0px;
background-color:black;
}

/* the left sidebar! */
.sidebar1 { 
grid-area: sidebar1; 
border:0px dotted #fff;
border-radius:;
background-color:none;
padding:0px;
}

/* the right sidebar! */
.sidebar2 { 
grid-area: sidebar2; 
border:0px dotted #fff;
background-color:none;
padding:0px;
}

/* the middle div! */
.content { 
grid-area: content; 
border:0px dotted #fff;
background-color:none;
padding:0px;
}

/* footer shit! */
.footer { 
grid-area: footer; 
border:1px dotted #fff;
border-radius:0px 0px 10px 10px;
background-color:black;
text-align:center;
padding:10px;
}

/* this is used to tell what div it is for example; onsite, personal, offsite. */
.title {
background: rgb(255,255,255);
background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(181,181,181,1) 9%, rgba(87,87,87,1) 24%, rgba(0,0,0,1) 38%, rgba(0,0,0,1) 55%, rgba(67,67,67,1) 70%, rgba(72,72,72,1) 71%, rgba(139,139,139,1) 84%, rgba(255,255,255,1) 100%);
border-radius:15px;
color: #000;
font-weight:bold;
padding:7px;
text-align:center;
text-shadow: -1px -1px 0 #ffffff, 1px -1px 0 #ffffff, -1px 1px 0 #ffffff, 1px 1px 0 #ffffff;
}

/* list! */
ul {
list-style:url("https://file.garden/ZgMuVg_U3BIqPawa/g01-icon-circle.gif");
padding-left:20px; /* this is to move the list left or right. */
}

/* list class. you can remove this as this is just for link example! */
.poop {
text-decoration:underline;
}
 /* list class but on hover */
.poop:hover {
text-decoration:underline;
font-style:italic;
font-weight:bold;
cursor: pointer;
}

/* this div is for the update log and navigation */
.box {
border:1px dotted #fff;
background-color:black;
padding:10px;
}

/* used for content! */
.info {
border:1px dotted #fff;
background-color:black;
padding:10px;
}

/* start of floating images! */
#pic {
position:absolute;
right:-200px;
top:-20px;
z-index:1;
}

#heart {
position:absolute;
left:-300px;
bottom:100px;
z-index:-1;
transform: rotate(-30deg);
}

#star {
position:absolute;
left:-150px;
top:140px;
z-index:1;
}

#ribbon {
position:absolute;
right:-300px;
bottom:60px;
z-index:-1;
}
/* end of floating images */

</style>
        
</head>
    
  <body>
  
<div class="container">

<div id="pic"><img src="https://file.garden/ZgMuVg_U3BIqPawa/ezgif-7-19f4d9b060.png"></div>
<div id="heart"><img src="https://file.garden/ZgMuVg_U3BIqPawa/ezgif-7-2bb4657a50.png"></div>
<div id="star"><img src="https://file.garden/ZgMuVg_U3BIqPawa/ezgif-4-c823fb02bd.png"></div>
<div id="ribbon"><img src="https://file.garden/ZgMuVg_U3BIqPawa/ezgif-4-d93f03e710.png"></div>

<div class="header">
  
  </div>
  
  
  <div class="sidebar1">
  	
  	<div class="box">
    	<div class="title">
        onsite 
        </div>
        <ul>
        <li class="poop">homepage</li>
        <li class="poop">information</li>
        <li class="poop">inquiry desk</li>
        <li class="poop">88x31 buttons</li>
        <li class="poop">resources</li>
        <li class="poop">sitemap</li>
        </ul>
        <div class="title">
        personal 
        </div>
        <ul> 
        <li class="poop">profile</li>
        <li class="poop">newsletter</li>
        <li class="poop">blog</li>
        <li class="poop">shrines</li>
        <li class="poop">manga</li>
        <li class="poop">media</li>
        <li class="poop">plushie</li>
        <li class="poop">projects</li>
        <li class="poop">f2u templates</li>
        </ul>
        <div class="title">
        offsite 
        </div> 
        <ul> 
        <li class="poop">links</li>
        <li class="poop">guestbook</li>
        <li class="poop">discord</li>
        <li class="poop">email</li>
        </ul>
    </div>
    
    
    <div class="box" style="margin-top:10px;">  
    this is a project website! please refrain from stealing! do check out my f2u page! other than that, thanks for viewing this project!
    </div>
  </div>
  
  
  <div class="sidebar2"> 
    
  	<div class="box" style="text-align:center;padding:0px 0px 0px 5px;height:180px;"> 
  		
    <iframe id="frame" src="https://rice.nekoweb.org/misc/calendar4.html" width="100%" height="100%" frameborder="0"></iframe>
    </div>
    
    
    <div class="box" style="margin-top:10px;height:100px;overflow:auto;"> 
    	<div class="title">
        updates 
        </div><br>
        <b><u>23082024</u></b>: thought of coding this.
        <br><br>
        <b><u>26082024</u></b>: in the process of coding.
    </div>
    
    
    <div class="box" style="margin-top:10px;text-align:center;"> 
    <img src="https://file.garden/ZgMuVg_U3BIqPawa/kara.png"><br><br>
    <div class="title">
    WELCOME!!
    </div>
    <br><font style="text-align:left;"> 
    created: 08/26/2024<br>
    updated: 08/26/2024<br>
    followers: 2000<br>
    visits: 35000
    </font>
    </div>
  </div>
  
  
  <div class="content">
  	
  	<div class="info">
    <img src="https://file.garden/ZgMuVg_U3BIqPawa/keychain.png" style="float:left;padding:0px 5px 0px 0px;"> hello and welcome to my simple website! i, <b><i>[name]</i></b>, am the webmistress of this site! this is my little corner of the internet where i will share a part of my life here as well as work on my projects and my art pieces i have! plus other things i have planned for this site!
    <br><br>this site may not be much but i put my heart and soul into this! please feel free to leave a comment in my guestbook, if not i really appreciate the visit!
    </div>
    
    <div class="info" style="margin-top:10px;"> 
    <b><u>warning!</u></b> this site will always and constantly be under construction as i am never satisfied! if any links are broken, please also do let me know! otherwise pages might also be under construction too!
    </div>
    
    <div class="info" style="margin-top:10px;"> 
      <div class="title">
      webrings, etc!
      </div><br>
      currently no webrings as this is a projects page!
      <br><br>
      <center><img src="https://file.garden/ZgMuVg_U3BIqPawa/betterperson.png"><br><br>project coded by <a href="https://rice.nekoweb.org/house.html">rice</a>!</center>
      
    </div>
  </div>
  
  
  <div class="footer">
  simple black & white project / hosted on nekoweb 2024-??
  </div>
  
</div>
  
  </body>
    
</html>