Compare commits
4 Commits
68b21a1102
...
1f94ed1081
Author | SHA1 | Date |
---|---|---|
waifu | 1f94ed1081 | 4 months ago |
waifu | ad19627ce8 | 4 months ago |
waifu | f2de8fb32d | 4 months ago |
waifu | da8bc41a03 | 4 months ago |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -1,7 +1,35 @@ |
|||||||
|
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.
@ -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: #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