Compare commits
No commits in common. '1f94ed1081ea9776af644c74d8d01e922aba3559' and '68b21a1102877280991fad2468ebf1efc87a846e' have entirely different histories.
1f94ed1081
...
68b21a1102
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -1,35 +1,7 @@ |
|||||||
body, html { |
|
||||||
display: flex; |
|
||||||
justify-content: center; |
|
||||||
align-items: center; |
|
||||||
flex-direction: column; |
|
||||||
} |
|
||||||
|
|
||||||
#header{ |
|
||||||
justify-content: center; |
|
||||||
} |
|
||||||
|
|
||||||
#menu{ |
#menu{ |
||||||
border-style: double; |
border-style: double; |
||||||
border-width: 20px; |
border-width: 20px; |
||||||
display: flex; |
display: flex; |
||||||
flex-flow: row; |
flex-flow: row; |
||||||
flex-wrap: wrap; |
|
||||||
justify-content: center; |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
#menu div { |
|
||||||
display: flex; |
|
||||||
flex-direction: column; |
|
||||||
align-items: center; |
|
||||||
margin: 0 10px; /* Adjust margin as needed */ |
|
||||||
} |
|
||||||
|
|
||||||
#menu h2 { |
|
||||||
text-align: center; |
|
||||||
} |
|
||||||
|
|
||||||
#menu h3 { |
|
||||||
text-align: center; |
|
||||||
} |
} |
Binary file not shown.
@ -1,96 +0,0 @@ |
|||||||
<!-- 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.
@ -1,171 +0,0 @@ |
|||||||
html { |
|
||||||
height: 100%; |
|
||||||
width: 100%; |
|
||||||
font-family:rotunda; |
|
||||||
background-color: #300d0d; |
|
||||||
--accentcolor:#ac0e0e; |
|
||||||
--accentcolordark: #68050c; |
|
||||||
--accentcolor2: #921218; |
|
||||||
--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:20vb; |
|
||||||
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: #68050c; |
|
||||||
} |
|
||||||
|
|
||||||
p { |
|
||||||
margin:0px; |
|
||||||
color: #e8646d; |
|
||||||
} |
|
||||||
|
|
||||||
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; |
|
||||||
} |
|
Binary file not shown.
Binary file not shown.
Binary file not shown.
Loading…
Reference in new issue