f2u layouts

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>

sampo
posted: June 19, 2025.

to celebrate 400 followers, here's a template for you all. credit inspo to this pin.

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>template 01</title>

<!--

rice.place template 01.

please read rules on templates.html for info.

-->
        
  <style>

/**  link styling  **/
a:link {
  color: black;
  text-decoration:underline;
}

a:visited {
  color: black;
}

a:hover {
  color: grey;
}

a:active {
  color: black;
}
/**  end of link styleing  **/

body {
font-family:ms ui gothic;
font-size:16px;
color:black;
background-color:#F5F9FF;
background-image:url("");
padding:10px;
overflow:auto;
}

/**  div that holds everything  **/
.container {  
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 0.2fr 1.2fr 1fr 1fr 1.8fr 0.2fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "bar bar bar . . ."
    "header header header header box box"
    "main main main main main main"
    "main main main main main main"
    "main main main main main main"
    "footer footer footer footer footer footer";
  margin:auto;
  width:700px;
  height:900px;
}

/**  top left div  **/
.bar { 
grid-area: bar; 
border:1px solid black;
border-bottom:none;
border-radius:20px 20px 0px 0px;
padding:10px;
text-align:right;
box-shadow: -1px -1.4px 1px inset #9e9699, 2px 3px 1.5px inset white, 0px 0px 2px #cccacb;
background-color:white;
}

/**  the header div  **/
.header { 
grid-area: header; 
border:1px solid black;
border-right:none;
box-shadow: -1px -1.4px 1px inset #9e9699, 2px 3px 1.5px inset white, 0px 0px 2px #cccacb;
background-image:url("https://rice.nekoweb.org/image/48b01a4d7f2627a2b51043f8e2965994.gif");
display:flex;
}

/**  site title styling  **/
.sitetitle {
align-self: flex-end;
font-size:40px;
font-weight:bold;
width:100%;
padding:10px;
text-shadow: -1px -1px 0 #ffffff, 1px -1px 0 #ffffff, -1px 1px 0 #ffffff, 1px 1px 0 #ffffff;
}

/**  div next to header  **/
.box { 
grid-area: box; 
border:1px solid black;
border-radius:0px 20px 0px 0px;
padding:10px;
box-shadow: -1px -1.4px 1px inset #9e9699, 2px 3px 1.5px inset white, 0px 0px 2px #cccacb;
background-color:white;
}

/**  the main div  **/
.main {  
  display: grid;
  grid-template-columns: 0.5fr 1.5fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "navigation content content"
    "navigation content content"
    "navigation content content"
    "navigation content content"
    "navigation content content"
    "navigation content content";
  grid-area: main;
}

/**  the navigation div  **/
.navigation { 
grid-area: navigation; 
border:1px solid black;
border-top:none;
box-shadow: -1px -1.4px 1px inset #9e9699, 2px 3px 1.5px inset white, 0px 0px 2px #cccacb;
background-color:white;
}

/**  the navigation title div  **/
.title {
padding:10px;
box-sizing: border-box;
margin:auto;
text-align:center;
}

/**  where the link buttons are in  **/
.button {
width:170px;
padding:10px 10px 10px 20px;
border:1px solid black;
border-left:none;
border-right:none;
border-bottom:none;
background-image:url("https://rice.nekoweb.org/rice/c028-6.gif");
box-shadow: -1px -1.4px 1px inset #cccacb, 2px 3px 1.5px inset white, 0px 0px 2px #9e9699;
}

/**  hovered link buttons  **/
.button:hover {
width:170px;
padding:10px 10px 10px 20px;
border:1px solid black;
border-left:none;
border-right:none;
border-bottom:none;
background-image:url("https://rice.nekoweb.org/rice/c028-7.gif");
box-shadow: -1px -1.4px 1px inset #9e9699, 2px 3px 1.5px inset white, 0px 0px 2px #cccacb;
}

/**  beneath the buttons  **/
.intro {
padding:10px;
}

/**  ..right side content  **/
.content { 
grid-area: content; 
border:1px solid black;
border-top:none;
border-left:none;
box-shadow: -1px -1.4px 1px inset #9e9699, 2px 3px 1.5px inset white, 0px 0px 2px #cccacb;
padding:10px;
overflow:auto;
background-color:white;
}

/**  blue box  **/
.box1 {
width:100%;
padding:10px;
background-color:#B3CBE8;
border:1px solid black;
box-sizing: border-box;
box-shadow: -1px -1.4px 1px inset #9e9699, 2px 3px 1.5px inset white, 0px 0px 2px #cccacb;
}

/**  text inside blue box  **/
.text {
width:100%;
background-color:#ffffff;
border:1px solid black;
padding:10px;
box-sizing: border-box;
margin-top:10px;
box-shadow: -1px -1.4px 1px inset #9e9699, 2px 3px 1.5px inset white, 0px 0px 2px #cccacb;
}

/**  THE footer  **/
.footer { 
grid-area: footer; 
border:1px solid black;
border-top:none;
border-radius:0px 0px 20px 20px;
padding:10px;
text-align:center;
box-shadow: -1px -1.4px 1px inset #9e9699, 2px 3px 1.5px inset white, 0px 0px 2px #cccacb;
background-color:white;
}

</style>
        
</head>
    
  <body>

<div class="bar">
  title or whateva
  </div>
  
  <div class="header">
  
  	<div class="sitetitle">site title</div>
  
  </div>
  
  <div class="box">
  this can be a list, update, whatever you want it to be. <br><br>
  template heavily re-created by <a href="https://www.pinterest.com/pin/534028468374558840/">this pin</a>.
  </div>
  
  <div class="main">
  
    <div class="navigation">
    
    	<div class="title">navigation</div>
        <div class="button"><img src="https://rice.nekoweb.org/rice/ball_s_06s.gif"> <a href="">link</a></div>
        <div class="button"><img src="https://rice.nekoweb.org/rice/ball_s_06s.gif"> <a href="">link</a></div>
        <div class="button"><img src="https://rice.nekoweb.org/rice/ball_s_06s.gif"> <a href="">link</a></div>
        <div class="button"><img src="https://rice.nekoweb.org/rice/ball_s_06s.gif"> <a href="">link</a></div>
        <div class="button"><img src="https://rice.nekoweb.org/rice/ball_s_06s.gif"> <a href="">link</a></div>
        <div class="button"><img src="https://rice.nekoweb.org/rice/ball_s_06s.gif"> <a href="">link</a></div>
        <div class="button"><img src="https://rice.nekoweb.org/rice/ball_s_06s.gif"> <a href="">link</a></div>
        <div class="button"><img src="https://rice.nekoweb.org/rice/ball_s_06s.gif"> <a href="">link</a></div>
        <div class="button"><img src="https://rice.nekoweb.org/rice/ball_s_06s.gif"> <a href="">link</a></div>
        <div class="button" style="border-bottom:1px solid black;"><img src="https://rice.nekoweb.org/rice/ball_s_06s.gif"> <a href="">link</a></div>
        
        <div class="intro">
        put whatever you want here.
        </div>
    
    </div>
    
    <div class="content">
    
    	<div class="box1">
        Gingerbread muffin liquorice pie muffin soufflé cake.
        	<div class="text">
            Cupcake ipsum dolor sit amet cupcake croissant. Chupa chups shortbread icing tart jelly beans cotton candy danish pie sesame snaps. Gingerbread muffin liquorice pie muffin soufflé cake.
            </div>
        
        </div>
        
        <div class="box1" style="margin-top:10px;"> 
        Gingerbread muffin liquorice pie muffin soufflé cake.
        	<div class="text">
            Powder I love candy canes jelly beans cake cake cake carrot cake muffin. Chocolate cake oat cake muffin gummies jelly-o donut. I love bonbon macaroon wafer wafer cotton candy. Sesame snaps shortbread chocolate icing gummies ice cream fruitcake. Jelly-o donut I love chocolate cake sweet shortbread wafer. Muffin pie danish dessert cheesecake. Carrot cake gummi bears chocolate bar jelly I love I love I love jelly-o cake. Liquorice icing cookie candy canes marshmallow.
            </div>
        
        </div>
        
        <div class="box1" style="margin-top:10px;">
        Gingerbread muffin liquorice pie muffin soufflé cake.
        	<div class="text">
            Cupcake ipsum dolor sit amet cupcake croissant. Chupa chups shortbread icing tart jelly beans cotton candy danish pie sesame snaps. Gingerbread muffin liquorice pie muffin soufflé cake.
            </div>
        
        </div>
        
        <div class="box1" style="margin-top:10px;">
        Gingerbread muffin liquorice pie muffin soufflé cake.
        	<div class="text">
            Powder I love candy canes jelly beans cake cake cake carrot cake muffin. Chocolate cake oat cake muffin gummies jelly-o donut. I love bonbon macaroon wafer wafer cotton candy. Sesame snaps shortbread chocolate icing gummies ice cream fruitcake. Jelly-o donut I love chocolate cake sweet shortbread wafer. Muffin pie danish dessert cheesecake. Carrot cake gummi bears chocolate bar jelly I love I love I love jelly-o cake. Liquorice icing cookie candy canes marshmallow.
            </div>
        
        </div>
    
    </div>
    
  </div>
  
  <div class="footer">
  this is a footer. hosted on nekoweb, coded with love. 2025.
  </div>
  
</div>

</body>
    
</html>