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