diff --git a/home/grimoire/index.html b/home/grimoire/index.html new file mode 100644 index 0000000..b56ba93 --- /dev/null +++ b/home/grimoire/index.html @@ -0,0 +1,96 @@ + + + + + + + + + + + Online Grimoire + + + + +
+
+

Online Grimoire

+
+
+

Think about your breathing patterns, also, did you drink water today?

+
+
+
+
+

Books

+
+
+ +
+

LINK 1

+
+
+

LINK 2

+
+
+

LINK 3

+
+
+

LINK 4

+
+
+

LINK 5

+
+
+

LINK 5

+
+

LINK 5

+
+

LINK 5

+
+

LINK 5

+
+

LINK 5

+
+

LINK 5

+
+

LINK 5

+
+

LINK 5

+
+

LINK 5

+
+

LINK 5

+
+
+

ADD HOWEVER MANY LINKS YOU WANT! THIS BOX SCROLLS

+
+
+
+
+
+ this text is bigger. and its even bold! put anything you want here. talk about your site if you want. i dont know. im not your mom. +
bold text looks like this. links look like this. +
this box scrolls, by the way. +
+
+ + + + + + + + + +
+
+
+ +
+ + + \ No newline at end of file diff --git a/home/grimoire/static/bg.png b/home/grimoire/static/bg.png new file mode 100644 index 0000000..3cc32de --- /dev/null +++ b/home/grimoire/static/bg.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:06930f419396b7f57dd2bdf77099c9036396540cbd35420fcbee3ce792bbf0ac +size 167598 diff --git a/home/grimoire/styles.css b/home/grimoire/styles.css new file mode 100644 index 0000000..3cc2842 --- /dev/null +++ b/home/grimoire/styles.css @@ -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; +} \ No newline at end of file