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