cinnamon about page

<!DOCTYPE html>
<html>
<head>

<!-- cinnamon about page by heike @substats !
you can edit this as much as you want but dont remove credit or use as a base :)
all instructions are in the code, but feel free to message me if you any further questions!
also if you use this id love to see what you do with it!
-->

<!-- the shortcut icon is your favicon, pick a transparent image and insert the url here-->
<link rel="shortcut icon" href="https://png2.kisspng.com/sh/e7def979fef4e8a3503b80c5a4adab61/L0KzQYm3VMIxN5x1iZH0aYP2gLBuTfJ2bpdmhNG2d3nxd373ighmdF58gdDwcz3lfLLqi714cZ9si58AYXS8coG9V8dlOWNmSZC6Mkm5RoeBVcE2OmU3SacEMUG4QYO6TwBvbz==/kisspng-buffalo-wing-pixel-wings-black-wings-5ad9b0677d12a1.1296668515242159115123.png">


<!-- this is the title that appears next to your favicon-->
<title>write your title here</title>


<!-- in the <style> section youll find every option to custumise your page! heres how the sections work:

scrollbar: you can edit the thumb color, track color, the track shadow etc, or you can set the width to 0px and make it invsible!

body: you can add an url to have an image background or an hex code to use a color instead
if you use a image you can also decide if you want a cover background and the position!

title: you can edit the titles font, size, weight, shadow, color, blur effect and alignment

a and a:hover specify respectively the link and the link hover options, so you can choose color and text decoration for the link and how you want it to look when you hover on it
if you dont want the blur effect, delete the -webkit-filter:blur line

content: this is what youll put in the box! if you changed the font size heres where you change the line height
you can also edit the text shadow effect (or get rid of it) and the blur effect (or get rid of it)

box: your box! here too youre free to use an image background or an hex code
if you want to make the box shadow much bigger i suggest making the margin bigger too or it will cover the title!

floaty img: these options edit the size and position of your floating image
at the bottom of the code youll find <div id="floaty img"><img src="[...]"> where you have to add an url between the quotes to change image


-->

<style>

::-webkit-scrollbar {
width:10px;
}

/* Track */
::-webkit-scrollbar-track {
  background:#ffffff;
  box-shadow: inset 0 0 5px #808080;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #ffffff;
 box-shadow: inset 0 0 5px #000;
}


body {
font-family: times;
font-size:22px;
color:#000;
background-image:url('add your url here and keep the quotes!');
background-color: #ffffff;
background-size:cover;
background-position:center;
background-attachment:fixed;
text-align: center;
}


#title {
font-weight:bold;
margin:20px;
font-size:40px;
text-align: center;
color:#000;
text-shadow: 1px 1px 0.5px #000;
-webkit-filter:blur(1px);
}

a   {
text-decoration:none;
color:#000;
text-shadow: 1px 0.5px 0.5px #000;
}


a:hover {
color:#ffffff;
text-shadow: 1px 1px 0.5px #000;
-webkit-filter:blur(2px);
}

#content {
position:center;
line-height: 22px;
text-align:center;
text-shadow: 1px 1px 0.5px #808080;
-webkit-filter:blur(0.5px);
overflow:auto;
}


#box{
width: 500px;
height: 455px;
position:relative;
margin:10px auto;
box-shadow: 0px 0px 20px;
background-image:url('add your url here and keep the quotes!');
background-size:cover;
background-color: #ffffff;
padding: 0px;
border: 2px solid #0f102c;
overflow:auto;
}


#floaty img{
position: relative;
margin-top:-450px;
margin-left:-800px;
max-height:600px;
}

#credit{
position:fixed;
bottom:10px;
left:10px;
font-size:20px;
}

</style>

</head>


<body>

<div id=title>
sample title
</div>

<div id=box>

<div id=content>
<h2> this is a header </h2>
<h4>it can change sizes</h4>
<h1>from this</1> <h6>to this</h6>
<p>and this is how you add pics!
<img src="https://cdn.discordapp.com/attachments/276736337791549441/712727226344407061/ola.gif" style="align:center">

<p>a line break looks like this <hr></hr>
<p>and you add links like <a href="/" title="tooltip example">this</a>! </p>

<p> <button><a href="https://www.youtube.com/watch?v=rWKda4d9pKw" title="rock lee takes off his weights">this is a button with a link</a></button> </p>
<p> <button title="it can have hover tooltips too!">this is a button without a link</a></button> </p>

<ul>
  <li> and this</li>
  <li>is how you make</li>
  <li>an unordered list!</li>
</ul>
<p>
<ol>
  <li>while this</li>
  <li>is how you make</li>
  <li>an ordered list!</li>
</ol>
<p>thanks to scrollbars, you dont have to worry about running out of space! in fact, i will show you how to maintan preformatted text</p>
<pre>
Note Audio
Registro la voce sul telefono
Seduto sopra un muretto bianco
Mi sento tutto stanco, ipotesi di pianto
Ieri studiavo i lineamenti del tuo volto
Per rifarli a casa sopra un foglio
È tutto ciò che voglio
Ma forse non ricordo</pre>

<p>i think thats all? have fun with this code and let me know if you have any questions!

</div>
</div>
<div id=floaty img> <img src="https://i.pinimg.com/originals/80/d1/1e/80d11e6d4112e4d393fe46a68ded6785.png"></div>

<div id="credit"><a href="https://substats.tumblr.com/" title="cinnamon about page">🐇</a></div>

</body>
</html>