Single navigation with collapsible menu

OPEN

PERMISSIONS

Singillatim

APPLICATION

INVENTORY

LODGING

ACTIVITY

BULLETIN

THREAD TRACKER

PAGE 7

PAGE 8

PAGE 9

PAGE 10

PAGE 11

PAGE 12

code

<div style="width:100%; max-width: 600px; display: inline-block; margin: 0 auto; font-family: Arial, Helvetica, sans-serif; text-transform: uppercase; font-weight: 700; font-size: 80%; letter-spacing: 0.1em;">  <div style="width: 100%; display: flex; flex-wrap: wrap; text-align: center;"> <div style="background: #EDF2EE; flex: 12em; margin: 0.375em;"> <a href="https://pacificator.dreamwidth.org/3062.html" style="color: #040509;text-decoration: none; display: block; padding: 1em;">OPEN </a> </div> <div style="background: #ABB5B2; flex: 12em; margin: 0.375em;"> <a href="https://pacificator.dreamwidth.org/312.html" style="color: #040509;text-decoration: none; display: block; padding: 1em;">PERMISSIONS </a> </div> </div>   <div style="height: 300px; display: flex; background: url('https://i.pinimg.com/564x/c6/eb/e7/c6ebe7a83d71e338f3dbd91e841b1d4b.jpg')center; background-size: cover; margin: 0.375em;"> </div>   <div style="display: flex; width: 100%; flex-wrap: nowrap; flex-direction: column;">  <details style="background: #EEF3EF; color: #040509; margin: 0.375em;"> <summary style="text-align: center; list-style: none; padding: 1em; cursor: pointer;">Singillatim </summary> <div style="width: 95%; margin: auto; display: flex; flex-wrap: wrap; text-align: center;"> <div style="background: #FFF; flex-grow: 1; margin: 0.375em;"> <a href="https://pacificator.dreamwidth.org/1578.html" style="color: #040509;text-decoration: none; display: block; padding: 1em;">APPLICATION </a> </div> <div style="background: #ABB5B2; flex-grow: 1; margin: 0.375em;"> <a href="https://pacificator.dreamwidth.org/3360.html" style="color: #040509;text-decoration: none; display: block; padding: 1em;">INVENTORY </a> </div> <div style="background: #D9DBD6; flex-grow: 1; margin: 0.375em;"> <a href="https://pacificator.dreamwidth.org/2235.html" style="color: #040509;text-decoration: none; display: block; padding: 1em;">LODGING </a> </div> <div style="background: #C4CDCE; flex-grow: 1; margin: 0.375em;"> <a href="" style="color: #040509;text-decoration: none; display: block; padding: 1em;">ACTIVITY </a> </div> <div style="background: #FFF; flex-grow: 1; margin: 0.375em;"> <a href="" style="color: #040509;text-decoration: none; display: block; padding: 1em;">BULLETIN </a> </div> <div style="background: #ABB5B2; flex-grow: 1; margin: 0.375em;"> <a href="https://pacificator.dreamwidth.org/3145.html" style="color: #040509;text-decoration: none; display: block; padding: 1em;">THREAD TRACKER </a> </div> <div style="background: #D9DBD6; flex-grow: 1; margin: 0.375em;"> <a href="" style="color: #040509;text-decoration: none; display: block; padding: 1em;">PAGE 7 </a> </div> <div style="background: #C4CDCE; flex-grow: 1; margin: 0.375em;"> <a href="" style="color: #040509;text-decoration: none; display: block; padding: 1em;">PAGE 8 </a> </div> <div style="background: #FFF; flex-grow: 1; margin: 0.375em;"> <a href="" style="color: #040509;text-decoration: none; display: block; padding: 1em;">PAGE 9 </a> </div> <div style="background: #ABB5B2; flex-grow: 1; margin: 0.375em;"> <a href="" style="color: #040509;text-decoration: none; display: block; padding: 1em;">PAGE 10 </a> </div> <div style="background: #D9DBD6; flex-grow: 1; margin: 0.375em;"> <a href="" style="color: #040509;text-decoration: none; display: block; padding: 1em;">PAGE 11 </a> </div> <div style="background: #C4CDCE; flex-grow: 1; margin: 0.375em;"> <a href="" style="color: #040509;text-decoration: none; display: block; padding: 1em;">PAGE 12 </a> </div> </div> </details>  </div>   <div style="height: 20px; display: flex; background: url('https://i.pinimg.com/564x/c6/eb/e7/c6ebe7a83d71e338f3dbd91e841b1d4b.jpg')bottom; background-size: cover; margin: 0.375em;"> </div>   <div style="margin: 0.375em; text-align: right; font-size: 0.75em;"><a href="https://teacodes.dreamwidth.org/" style="opacity: 0.75; text-decoration: none;">code</a> </div>  </div>

Two navigations, one linking to the other

OPEN

PERMISSIONS

SINGILLATIM

code

SINGILLATIM

APPLICATION

INVENTORY

LODGING

ACTIVITY

BULLETIN

THREAD TRACKER

PAGE 7

PAGE 8

PAGE 9

PAGE 10

PAGE 11

PAGE 12

code

Landing page
<div style="width:100%; max-width: 600px; display: inline-block; margin: 0 auto; font-family: Arial, Helvetica, sans-serif; text-transform: uppercase; font-weight: 700; font-size: 80%; letter-spacing: 0.1em;">  <div style="width: 100%; display: flex; flex-wrap: wrap; text-align: center;"> <div style="background: #EDF2EE; flex: 12em; margin: 0.375em;"> <a href="https://pacificator.dreamwidth.org/3062.html" style="color: #040509;text-decoration: none; display: block; padding: 1em;">OPEN </a> </div> <div style="background: #ABB5B2; flex: 12em; margin: 0.375em;"> <a href="https://pacificator.dreamwidth.org/312.html" style="color: #040509;text-decoration: none; display: block; padding: 1em;">PERMISSIONS </a> </div> </div>   <div style="height: 300px; display: flex; background: url('https://i.pinimg.com/564x/c6/eb/e7/c6ebe7a83d71e338f3dbd91e841b1d4b.jpg')center; background-size: cover; margin: 0.375em;"> </div>   <div style="width: 100%; display: flex; flex-wrap: wrap; text-align: center;"> <div style="background: #EEF3EF; flex-grow: 1; margin: 0.375em;"> <a href="LINK TO SUBMENU GOES HERE" style="color: #040509;text-decoration: none; display: block; padding: 1em;">SINGILLATIM </a> </div> </div>   <div style="height: 20px; display: flex; background: url('https://i.pinimg.com/564x/c6/eb/e7/c6ebe7a83d71e338f3dbd91e841b1d4b.jpg')bottom; background-size: cover; margin: 0.375em;"> </div>   <div style="margin: 0.375em; text-align: right; font-size: 0.75em;"><a href="https://teacodes.dreamwidth.org/" style="opacity: 0.75; text-decoration: none;">code</a> </div>  </div>

Submenu page
<div style="width:100%; max-width: 600px; display: inline-block; margin: 0 auto; font-family: Arial, Helvetica, sans-serif; text-transform: uppercase; font-weight: 700; font-size: 80%; letter-spacing: 0.1em;">  <div style="width: 100%; display: flex; flex-wrap: wrap; text-align: center;"> <div style="flex: 12em; margin: 0.375em;"> <span style="text-decoration: none; display: block; padding: 1em;">SINGILLATIM </span> </div> </div>   <div style="height: 300px; display: flex; background: url('https://i.pinimg.com/564x/c6/eb/e7/c6ebe7a83d71e338f3dbd91e841b1d4b.jpg')center; background-size: cover; margin: 0.375em;"> </div>   <div style="width: 100%; display: flex; flex-wrap: wrap; text-align: center;"> <div style="background: #EEF3EF; flex-grow: 1; margin: 0.375em;"> <a href="https://pacificator.dreamwidth.org/1578.html" style="color: #040509;text-decoration: none; display: block; padding: 1em;">APPLICATION </a> </div> <div style="background: #ABB5B2; flex-grow: 1; margin: 0.375em;"> <a href="https://pacificator.dreamwidth.org/3360.html" style="color: #040509;text-decoration: none; display: block; padding: 1em;">INVENTORY </a> </div> <div style="background: #D9DBD6; flex-grow: 1; margin: 0.375em;"> <a href="https://pacificator.dreamwidth.org/2235.html" style="color: #040509;text-decoration: none; display: block; padding: 1em;">LODGING </a> </div> <div style="background: #C4CDCE; flex-grow: 1; margin: 0.375em;"> <a href="" style="color: #040509;text-decoration: none; display: block; padding: 1em;">ACTIVITY </a> </div> <div style="background: #EEF3EF; flex-grow: 1; margin: 0.375em;"> <a href="" style="color: #040509;text-decoration: none; display: block; padding: 1em;">BULLETIN </a> </div> <div style="background: #ABB5B2; flex-grow: 1; margin: 0.375em;"> <a href="https://pacificator.dreamwidth.org/3145.html" style="color: #040509;text-decoration: none; display: block; padding: 1em;">THREAD TRACKER </a> </div> <div style="background: #D9DBD6; flex-grow: 1; margin: 0.375em;"> <a href="" style="color: #040509;text-decoration: none; display: block; padding: 1em;">PAGE 7 </a> </div> <div style="background: #C4CDCE; flex-grow: 1; margin: 0.375em;"> <a href="" style="color: #040509;text-decoration: none; display: block; padding: 1em;">PAGE 8 </a> </div> <div style="background: #EEF3EF; flex-grow: 1; margin: 0.375em;"> <a href="" style="color: #040509;text-decoration: none; display: block; padding: 1em;">PAGE 9 </a> </div> <div style="background: #ABB5B2; flex-grow: 1; margin: 0.375em;"> <a href="" style="color: #040509;text-decoration: none; display: block; padding: 1em;">PAGE 10 </a> </div> <div style="background: #D9DBD6; flex-grow: 1; margin: 0.375em;"> <a href="" style="color: #040509;text-decoration: none; display: block; padding: 1em;">PAGE 11 </a> </div> <div style="background: #C4CDCE; flex-grow: 1; margin: 0.375em;"> <a href="" style="color: #040509;text-decoration: none; display: block; padding: 1em;">PAGE 12 </a> </div> </div>   <div style="height: 20px; display: flex; background: url('https://i.pinimg.com/564x/c6/eb/e7/c6ebe7a83d71e338f3dbd91e841b1d4b.jpg')bottom; background-size: cover; margin: 0.375em;"> </div>   <div style="margin: 0.375em; text-align: right; font-size: 0.75em;"><a href="https://teacodes.dreamwidth.org/" style="opacity: 0.75; text-decoration: none;">code</a> </div>  </div>

S	M	T	W	T	F	S
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

Tea Codes

Nov. 19th, 2024

Nov. 19th, 2024

The Heir's Navigation

Single navigation with collapsible menu

Two navigations, one linking to the other

Profile

November 2024

Most Popular Tags

Page Summary

Expand Cut Content