parent
f2de8fb32d
commit
ad19627ce8
@ -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> |
||||||
Binary file not shown.
@ -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…
Reference in new issue