itinerae: bug friendly zone

🐛 🐝 bug friendly zone

Bold text Italic text Link 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.

THE CODE // do not remove the credits ♥

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

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

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.

a Buttefly

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.

a Bug

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.

an Ant

Curabitur non magna nec diam vestibulum tristique. Donec pulvinar nisl ac dolor tincidunt scelerisque. Vestibulum laoreet massa non augue pretium, nec imperdiet justo ultrices.

a honeybee

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.

a Cricket

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.

a Cockroach

Quisque mollis aliquet urna at blandit. Phasellus elementum congue urna, quis viverra enim hendrerit eget.

a Scorpion

In sed elit tortor. Aenean velit orci, pulvinar non mattis eget, pellentesque in ipsum. Vivamus suscipit volutpat pharetra.

a Spider

Ut in nisi placerat, iaculis ipsum eu, lacinia orci. Aenean vel massa sit amet elit volutpat rhoncus. Proin eget ultrices tellus, sed euismod nunc.