grimoire
This commit is contained in:
parent
f2de8fb32d
commit
ad19627ce8
3 changed files with 270 additions and 0 deletions
96
home/grimoire/index.html
Normal file
96
home/grimoire/index.html
Normal file
|
|
@ -0,0 +1,96 @@
|
||||||
|
<!-- BUTCHER'S VEIN - neocities template by lorekeeping -->
|
||||||
|
|
||||||
|
<style>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width">
|
||||||
|
<title>Online Grimoire</title>
|
||||||
|
<link rel="stylesheet" href="./styles.css">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div class="maindiv">
|
||||||
|
<div class="header">
|
||||||
|
<h1>Online Grimoire</h1>
|
||||||
|
</div>
|
||||||
|
<div class="bar">
|
||||||
|
<h3>Think about your breathing patterns, also, did you drink water today?</h3>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="navigation">
|
||||||
|
<div class="titlebar">
|
||||||
|
<h3>Books</h3>
|
||||||
|
</div>
|
||||||
|
<div class="buttonholder">
|
||||||
|
<!--you can add however many links you like. you can remove any links youre not using, too.-->
|
||||||
|
<div class="navigationbutton">
|
||||||
|
<h4><a href="link" style="color:var(--bordercolor);">LINK 1</a></h4>
|
||||||
|
</div>
|
||||||
|
<div class="navigationbutton">
|
||||||
|
<h4><a href="link" style="color:var(--bordercolor);">LINK 2</a></h4>
|
||||||
|
</div>
|
||||||
|
<div class="navigationbutton">
|
||||||
|
<h4><a href="link" style="color:var(--bordercolor);">LINK 3</a></h4>
|
||||||
|
</div>
|
||||||
|
<div class="navigationbutton">
|
||||||
|
<h4><a href="link" style="color:var(--bordercolor);">LINK 4</a></h4>
|
||||||
|
</div>
|
||||||
|
<div class="navigationbutton">
|
||||||
|
<h4><a href="link" style="color:var(--bordercolor);">LINK 5</a></h4>
|
||||||
|
</div>
|
||||||
|
<div class="navigationbutton">
|
||||||
|
<h4><a href="link" style="color:var(--bordercolor);">LINK 5</a></h4>
|
||||||
|
</div><div class="navigationbutton">
|
||||||
|
<h4><a href="link" style="color:var(--bordercolor);">LINK 5</a></h4>
|
||||||
|
</div><div class="navigationbutton">
|
||||||
|
<h4><a href="link" style="color:var(--bordercolor);">LINK 5</a></h4>
|
||||||
|
</div><div class="navigationbutton">
|
||||||
|
<h4><a href="link" style="color:var(--bordercolor);">LINK 5</a></h4>
|
||||||
|
</div><div class="navigationbutton">
|
||||||
|
<h4><a href="link" style="color:var(--bordercolor);">LINK 5</a></h4>
|
||||||
|
</div><div class="navigationbutton">
|
||||||
|
<h4><a href="link" style="color:var(--bordercolor);">LINK 5</a></h4>
|
||||||
|
</div><div class="navigationbutton">
|
||||||
|
<h4><a href="link" style="color:var(--bordercolor);">LINK 5</a></h4>
|
||||||
|
</div><div class="navigationbutton">
|
||||||
|
<h4><a href="link" style="color:var(--bordercolor);">LINK 5</a></h4>
|
||||||
|
</div><div class="navigationbutton">
|
||||||
|
<h4><a href="link" style="color:var(--bordercolor);">LINK 5</a></h4>
|
||||||
|
</div><div class="navigationbutton">
|
||||||
|
<h4><a href="link" style="color:var(--bordercolor);">LINK 5</a></h4>
|
||||||
|
</div>
|
||||||
|
<div class="navigationbutton">
|
||||||
|
<h4><a href="link" style="color:var(--bordercolor);">ADD HOWEVER MANY LINKS YOU WANT! THIS BOX SCROLLS</a></h4>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="column" style="width:75%">
|
||||||
|
<div class="box1">
|
||||||
|
<span class="bigtext">this text is bigger. and its even bold!</span> put anything you want here. talk about your site if you want. i dont know. im not your mom.
|
||||||
|
<br><strong>bold text looks like this.</strong> <a href="link">links look like this.</a>
|
||||||
|
<br>this box scrolls, by the way.
|
||||||
|
</div>
|
||||||
|
<div class="box2">
|
||||||
|
<!-- remove the <marquee> tag to stop the scrolling -->
|
||||||
|
<marquee behavior="alternate">
|
||||||
|
<img src="https://file.garden/ZZ2PUl9MPilKgIvB/85dae5a2.jpg"/>
|
||||||
|
<img src="https://file.garden/ZZ2PUl9MPilKgIvB/3e9a21b1.png"/>
|
||||||
|
<img src="https://file.garden/ZZ2PUl9MPilKgIvB/c4b47f26.png"/>
|
||||||
|
<img src="https://file.garden/ZZ2PUl9MPilKgIvB/cb1f10c3.jpg"/>
|
||||||
|
<img src="https://file.garden/ZZ2PUl9MPilKgIvB/fb1ba12e.png"/>
|
||||||
|
<img src="https://file.garden/ZZ2PUl9MPilKgIvB/a7c2b901.gif"/>
|
||||||
|
</marquee>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
BIN
home/grimoire/static/bg.png
(Stored with Git LFS)
Normal file
BIN
home/grimoire/static/bg.png
(Stored with Git LFS)
Normal file
Binary file not shown.
171
home/grimoire/styles.css
Normal file
171
home/grimoire/styles.css
Normal file
|
|
@ -0,0 +1,171 @@
|
||||||
|
html {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
font-family:rotunda;
|
||||||
|
background-color: #0d1030;
|
||||||
|
--accentcolor:#0e0eac;
|
||||||
|
--accentcolordark: #050768;
|
||||||
|
--accentcolor2: #121d92;
|
||||||
|
--bordercolor:black;
|
||||||
|
--header-border:white;
|
||||||
|
--bgcolor:rgb(0, 0, 0);
|
||||||
|
--gapsize: 10px;
|
||||||
|
color: whitesmoke;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: rotunda;
|
||||||
|
src: url(./static/Designer-Notes-Bold.ttf);
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: friendolin;
|
||||||
|
src: url(./static/Friedolin.ttf);
|
||||||
|
}
|
||||||
|
|
||||||
|
.maindiv {
|
||||||
|
width:70vw;
|
||||||
|
height: 90vb;
|
||||||
|
margin:auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
box-shadow: 6px 6px 0px -1px var(--accentcolor);
|
||||||
|
border:2px solid var(--accentcolordark);
|
||||||
|
outline:2px solid var(--bordercolor);
|
||||||
|
height:10vb;
|
||||||
|
background-color:var(--bgcolor);
|
||||||
|
background-image:url(./static/bg.png);
|
||||||
|
background-size:cover;
|
||||||
|
background-position:center;
|
||||||
|
margin-bottom:var(--gapsize);
|
||||||
|
}
|
||||||
|
|
||||||
|
.bar {
|
||||||
|
box-shadow: 6px 6px 0px -1px var(--accentcolor);
|
||||||
|
border:2px solid var(--accentcolordark);
|
||||||
|
outline:2px solid var(--bordercolor);
|
||||||
|
background-color:var(--bgcolor);
|
||||||
|
margin-bottom: var(--gapsize);
|
||||||
|
text-align:center;
|
||||||
|
padding-top:7px;
|
||||||
|
padding-bottom:7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
margin:0px;
|
||||||
|
color: #050768;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin:0px;
|
||||||
|
color: #6464e8;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-family:rotunda;
|
||||||
|
font-size:50px;
|
||||||
|
margin:5px;
|
||||||
|
margin-left:10px;
|
||||||
|
position:relative;
|
||||||
|
top:20px;
|
||||||
|
filter: drop-shadow(0px 0px 5px var(--accentcolor));
|
||||||
|
}
|
||||||
|
|
||||||
|
.row {
|
||||||
|
display:flex;
|
||||||
|
gap:var(--gapsize);
|
||||||
|
height:auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navigation {
|
||||||
|
box-shadow: 6px 6px 0px -1px var(--accentcolor);
|
||||||
|
border:2px solid var(--accentcolordark);
|
||||||
|
outline:2px solid var(--bordercolor);
|
||||||
|
background-color:var(--bgcolor);
|
||||||
|
text-align:center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
width:25%;
|
||||||
|
height:auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.titlebar {
|
||||||
|
background-color: var(--accentcolor);
|
||||||
|
border-bottom:2px solid var(--accentcolordark);
|
||||||
|
padding:4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.buttonholder {
|
||||||
|
padding-left:10px;
|
||||||
|
padding-right:10px;
|
||||||
|
overflow-y:auto;
|
||||||
|
height:70vb;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navigationbutton {
|
||||||
|
margin:5px;
|
||||||
|
padding:5px;
|
||||||
|
border:2px solid var(--bordercolor);
|
||||||
|
background-color: var(--accentcolor2);
|
||||||
|
}
|
||||||
|
|
||||||
|
h4 {
|
||||||
|
margin:0px;
|
||||||
|
color: #0e0eac;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: var(--accentcolor);
|
||||||
|
}
|
||||||
|
|
||||||
|
.box1 {
|
||||||
|
box-shadow: 6px 6px 0px -1px var(--accentcolor);
|
||||||
|
border:2px solid var(--accentcolordark);
|
||||||
|
outline:2px solid var(--bordercolor);
|
||||||
|
background-color:var(--bgcolor);
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding:10px;
|
||||||
|
width:100%;
|
||||||
|
height:60vb;
|
||||||
|
overflow-y:auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bigtext {
|
||||||
|
font-size:large;
|
||||||
|
font-weight:bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
strong {
|
||||||
|
color:var(--accentcolordark);
|
||||||
|
}
|
||||||
|
|
||||||
|
.box2 {
|
||||||
|
box-shadow: 6px 6px 0px -1px var(--accentcolor);
|
||||||
|
border:2px solid var(--accentcolordark);
|
||||||
|
outline:2px solid var(--bordercolor);
|
||||||
|
background-color:var(--bgcolor);
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding:10px;
|
||||||
|
width:100%;
|
||||||
|
height:80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.column {
|
||||||
|
display:flex;
|
||||||
|
flex-wrap:wrap;
|
||||||
|
gap:10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
box-shadow: 6px 6px 0px -1px var(--accentcolor);
|
||||||
|
border:2px solid var(--accentcolordark);
|
||||||
|
outline:2px solid var(--bordercolor);
|
||||||
|
background-color:var(--bgcolor);
|
||||||
|
margin-top:var(--gapsize);
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding:10px;
|
||||||
|
width:100%;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
Loading…
Add table
Reference in a new issue