/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="//fonts.googleapis.com/css?family=Megrim%7CLato" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css2?family=Pixelify+Sans:wght@400..700&display=swap" rel="stylesheet">
<title>itinerae: bug friendly zone</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;}

body {
font-family: 'lato', Arial, sans-serif;
font-size:9px;
background: #f0f0f0 url(https://44.media.tumblr.com/3a5e42cdffeb5c8db8c1c6aca341e895/b0fdf67c9e7b4bd6-fa/s75x75_c1_f1/e19b6493aca8f7011bfa0952fda3a7d973162036.gifv);
display: flex;
justify-content: center;
letter-spacing:1px;
text-shadow:0px 0px 1px;
color:#82BD7D;
padding: 8px 0;}

textarea {font:9px calibri;letter-spacing:1;color:#999;background:#eee;}
  
a:link,a:visited,a:active {
color: #499657;
cursor:pointer;
text-decoration: none;}

a:hover {
color: #888;text-decoration:underline;}

b {font-weight:bold;font-style:normal;}
i {color:#97ED27;letter-spacing:1px;font-family:monospace;font-size:9px;font-style:normal;font-weight:bold;text-transform:uppercase;letter-spacing:2px;}
u {text-decoration:none;font-style:italic;}

.container {
width: 700px;
max-width: 95%;
background-color: #fff;
border-radius: 4px;
overflow: hidden;
box-shadow: 0 1px 5px rgba(0,0,0,0.1);
border:1px dashed #97ed27;}

.header {
width: 100%;
height: 220px;
background: url(https://64.media.tumblr.com/79db1d3365ef90c242e277a71eb6b0eb/d8ed731e26c00892-23/s500x750/554e9e911041e448d432a9584a14c1e430875037.gifv) center;
background-size: cover;
background-position: center;
border-bottom: 1px solid #ddd;
text-align:center;}
  
.sitename {font:23px 'pixelify sans';letter-spacing:3px;text-shadow:1px 1px 2px #fff;border-bottom:1px solid #eee;padding-top:126px;}

.layout {
display: flex;
flex-wrap: wrap;}

.leftside {
width: 160px;
background-color: #fff;
padding: 5px;
flex-shrink: 0;
border-right:1px solid #ddd;}

.navi {
display: block;
padding: 6px 5px;
border-radius: 3px;
transition: background 0.2s;
background: linear-gradient(145deg, #EFFDE9, #ADDAA1);
margin-bottom:4px;
text-transform:uppercase;
font-weight:bold;
letter-spacing:3px;}
  
.navi:hover { background-color: #ddd; }

.sublinks {
display: none;
padding-left: 8px;
margin-top: 0px;
cursor:pointer;}
  
.sublinks a {
display: block;
padding: 4px 0;
color: #499657;
text-decoration: none;}
  
.sublinks a:hover { color: #666; }

.rightside { flex: 1; padding: 8px; }

.mainbox {
width: 100%;
background-color: #eee;
padding: 8px;
text-align: justify;
margin-bottom: 8px;
border-radius: 4px;}
  
.maintitle {
text-transform:uppercase;font-weight:bold;border-bottom:1px solid #ABEBA5;margin-bottom:4px;padding-top:2px;
letter-spacing:3px;font:15px 'ms gothic', courier new, arial;padding-left:5px;}

.grid {
column-count: 3;
column-gap: 8px;}

.box {
background-color: #f9f9f9;
border-radius: 4px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
margin-bottom: 8px;
text-align:justify;
padding: 4px;
display: inline-block;
width: 100%;}
  
/* Heights */
.box:nth-child(1) { height: 180px; }
.box:nth-child(2) { height: 140px; }
.box:nth-child(3) { height: 90px; }
.box:nth-child(4) { height: 120px; }
.box:nth-child(5) { height: 110px; }
.box:nth-child(6) { height: 100px; }
.box:nth-child(7) { height: 130px; }
.box:nth-child(8) { height: 95px; }
  
.boxleft {
background-color: #f9f9f9;
border-radius: 4px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
text-align:justify;
margin-top:5px;
padding: 4px;
display: inline-block;
width:100%;}
  
.boxtitle {
text-transform:uppercase;font-weight:bold;border-bottom:1px solid #ABEBA5;margin-bottom:4px;padding-top:0px;
letter-spacing:3px;font:10px 'ms gothic', courier new, arial;padding-left:5px;}

@media (max-width: 800px) { .grid { column-count: 2; } }
@media (max-width: 600px) {
.layout { flex-direction: column; }
.leftside { width: 100%; }
.grid { column-count: 1; }
}
</style>
</head>
  
  
 
<body>
  
  
<div class="container">
<div class="header"><div class="sitename"><img src="https://64.media.tumblr.com/1e702b063d7856372b98b24ac16236d0/a6e1b1f4cc313c5d-5e/s75x75_c1/3ae719e4fe7d0a5ffbe0801d9bea3d48fda505ed.gifv" alt="x"> site name <img src="https://64.media.tumblr.com/1e702b063d7856372b98b24ac16236d0/a6e1b1f4cc313c5d-5e/s75x75_c1/3ae719e4fe7d0a5ffbe0801d9bea3d48fda505ed.gifv" alt="x"></div></div>

  
  
<div class="layout">
  
<aside class="leftside">
<div class="boxtitle"><img src="https://64.media.tumblr.com/982c3de220a0e2bc093e3c7de962350d/74cbf2cc22e0d6df-a7/s1280x1920/7c23d42b4ee2e8a031742acecd600e192bde2404.gifv" alt="x"> Navigation</div>
  
<div class="navi" onclick="toggleSublinks('menu1')"><img src="https://64.media.tumblr.com/c8227268cf1f0b9a80abea6e6e513501/74cbf2cc22e0d6df-c9/s1280x1920/138a67678260893d70de6a14d32c969662eb2511.gifv" alt="x"> one</div>
<div class="sublinks" id="menu1">
<a href="#">Link 1.1</a>
<a href="#">Link 1.2</a>
</div>

<div class="navi" onclick="toggleSublinks('menu2')"><img src="https://64.media.tumblr.com/c8227268cf1f0b9a80abea6e6e513501/74cbf2cc22e0d6df-c9/s1280x1920/138a67678260893d70de6a14d32c969662eb2511.gifv" alt="x"> two</div>
<div class="sublinks" id="menu2">
<a href="#">Link 2.1</a>
<a href="#">Link 2.2</a>
</div>

<div class="navi" onclick="toggleSublinks('menu3')"><img src="https://64.media.tumblr.com/c8227268cf1f0b9a80abea6e6e513501/74cbf2cc22e0d6df-c9/s1280x1920/138a67678260893d70de6a14d32c969662eb2511.gifv" alt="x"> three</div>
<div class="sublinks" id="menu3">
<a href="#">Link 3.1</a>
<a href="#">Link 3.2</a>
</div>
      
      
<div class="navi" onclick="toggleSublinks('menu4')"><img src="https://64.media.tumblr.com/c8227268cf1f0b9a80abea6e6e513501/74cbf2cc22e0d6df-c9/s1280x1920/138a67678260893d70de6a14d32c969662eb2511.gifv" alt="x"> four </div>
<div class="sublinks" id="menu4">
<a href="#">Link 4.1</a>
<a href="#">Link 4.2</a>
</div>
      
     
<div class="boxleft">
<div class="boxtitle"><img src="https://64.media.tumblr.com/982c3de220a0e2bc093e3c7de962350d/74cbf2cc22e0d6df-a7/s1280x1920/7c23d42b4ee2e8a031742acecd600e192bde2404.gifv" alt="x"> Credits</div>

<!-- Credit section, do NOT delete this part of the code !! -->
<b>Layout:</b> <a href="https://itinerae.blogspot.com/" target="_blank">Itinerae.</a> <br>
<b>Bg</b> <a href="https://www.glitter-graphics.com/backgrounds/abstract/6WSm-mint-love" target="_blank">Glitter graphics.</a><br>
<b>Banner</b> <a href="https://fi.pinterest.com/pin/182747697374626045/" target="_blank">Pinterest.</a> <br>
<b>Pixels</b> <a href="https://foollovers.com/" target="_blank">Fool lovers.</a> 
</div>
      
</aside>

  
<main class="rightside">
  
<div class="mainbox"><div class="maintitle">🐛 🐝  bug friendly zone</div> 
<b>Bold text</b> <i>Italic text</i> <a href="">Link</a> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in tempor mauris, nec tincidunt ex. In sed elit tortor. Aenean velit orci, pulvinar non mattis eget, pellentesque in ipsum. Vivamus suscipit volutpat pharetra. Maecenas justo turpis, accumsan ac molestie a, malesuada eu risus. Donec ante metus, luctus sit amet iaculis ac, accumsan ut justo. Nullam non lacus porttitor, varius mi sit amet, dapibus sapien. Nullam molestie odio eu tincidunt consectetur. Aliquam sodales nec sem id feugiat. Ut in nisi placerat, iaculis ipsum eu, lacinia orci. Aenean vel massa sit amet elit volutpat rhoncus. Proin eget ultrices tellus, sed euismod nunc.
<br><br>
Mauris sit amet ex sed risus consequat vestibulum a et risus. Duis varius tellus a lacus finibus, ac posuere nisi tempus. Morbi vehicula tristique est nec consectetur. Aenean arcu lectus, sollicitudin at enim sed, finibus condimentum orci. Curabitur non magna nec diam vestibulum tristique. Donec pulvinar nisl ac dolor tincidunt scelerisque. Vestibulum laoreet massa non augue pretium, nec imperdiet justo ultrices. Aenean euismod porta augue, at consequat ligula iaculis rhoncus. Maecenas ultricies augue et erat porta sodales. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis vel lorem ultrices, congue odio sed, sodales lacus. Fusce placerat placerat nulla quis tempus. Quisque mollis aliquet urna at blandit. Phasellus elementum congue urna, quis viverra enim hendrerit eget. Aliquam eleifend, odio a pharetra pulvinar, tellus turpis pellentesque lorem, pellentesque luctus odio mi eu metus. Aliquam commodo a dolor at faucibus.
</div>
  
  
<div class="grid">
  
<div class="box"> 
<div class="boxtitle">
<img src="https://64.media.tumblr.com/982c3de220a0e2bc093e3c7de962350d/74cbf2cc22e0d6df-a7/s1280x1920/7c23d42b4ee2e8a031742acecd600e192bde2404.gifv" alt="x"> a  Buttefly </div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in tempor mauris, nec tincidunt ex. In sed elit tortor. Aenean velit orci, pulvinar non mattis eget, pellentesque in ipsum. Vivamus suscipit volutpat pharetra.</div>
  
<div class="box">
<div class="boxtitle">
<img src="https://64.media.tumblr.com/982c3de220a0e2bc093e3c7de962350d/74cbf2cc22e0d6df-a7/s1280x1920/7c23d42b4ee2e8a031742acecd600e192bde2404.gifv" alt="x"> a Bug</div> 
Vivamus suscipit volutpat pharetra. Maecenas justo turpis, accumsan ac molestie a, malesuada eu risus. Donec ante metus, luctus sit amet iaculis ac, accumsan ut justo.</div>
  
<div class="box">
<div class="boxtitle">
<img src="https://64.media.tumblr.com/982c3de220a0e2bc093e3c7de962350d/74cbf2cc22e0d6df-a7/s1280x1920/7c23d42b4ee2e8a031742acecd600e192bde2404.gifv" alt="x"> an Ant </div> 
Curabitur non magna nec diam vestibulum tristique. Donec pulvinar nisl ac dolor tincidunt scelerisque. Vestibulum laoreet massa non augue pretium, nec imperdiet justo ultrices.</div>

<div class="box">
<div class="boxtitle">
<img src="https://64.media.tumblr.com/982c3de220a0e2bc093e3c7de962350d/74cbf2cc22e0d6df-a7/s1280x1920/7c23d42b4ee2e8a031742acecd600e192bde2404.gifv" alt="x"> a honeybee</div>  
Vestibulum laoreet massa non augue pretium, nec imperdiet justo ultrices. Aenean euismod porta augue, at consequat ligula iaculis rhoncus. Maecenas ultricies augue et erat porta sodales. Interdum et malesuada fames ac ante ipsum primis in faucibus. </div>
  
<div class="box">
<div class="boxtitle">
<img src="https://64.media.tumblr.com/982c3de220a0e2bc093e3c7de962350d/74cbf2cc22e0d6df-a7/s1280x1920/7c23d42b4ee2e8a031742acecd600e192bde2404.gifv" alt="x">  a Cricket </div> 
Nullam molestie odio eu tincidunt consectetur. Aliquam sodales nec sem id feugiat. Ut in nisi placerat, iaculis ipsum eu, lacinia orci. Aenean vel massa sit amet elit volutpat rhoncus.</div>

<div class="box">
<div class="boxtitle">
<img src="https://64.media.tumblr.com/982c3de220a0e2bc093e3c7de962350d/74cbf2cc22e0d6df-a7/s1280x1920/7c23d42b4ee2e8a031742acecd600e192bde2404.gifv" alt="x"> a Cockroach</div> 
Quisque mollis aliquet urna at blandit. Phasellus elementum congue urna, quis viverra enim hendrerit eget.</div>
  
<div class="box">
<div class="boxtitle"><img src="https://64.media.tumblr.com/982c3de220a0e2bc093e3c7de962350d/74cbf2cc22e0d6df-a7/s1280x1920/7c23d42b4ee2e8a031742acecd600e192bde2404.gifv" alt="x"> a Scorpion</div> 
In sed elit tortor. Aenean velit orci, pulvinar non mattis eget, pellentesque in ipsum. Vivamus suscipit volutpat pharetra. </div>
  
<div class="box">
<div class="boxtitle">
<img src="https://64.media.tumblr.com/982c3de220a0e2bc093e3c7de962350d/74cbf2cc22e0d6df-a7/s1280x1920/7c23d42b4ee2e8a031742acecd600e192bde2404.gifv" alt="x"> a Spider  </div> 
Ut in nisi placerat, iaculis ipsum eu, lacinia orci. Aenean vel massa sit amet elit volutpat rhoncus. Proin eget ultrices tellus, sed euismod nunc.</div>
</div>
  
</main>
  
</div>
</div>

  
<script>
function toggleSublinks(id) {
  const submenu = document.getElementById(id);
  submenu.style.display = submenu.style.display === 'block' ? 'none' : 'block';}
</script>
  
  
</body>
</html>
<style>
hi :3


