navigation: outlined

[transilience]

style #1

basics history threads open post contact

copy & paste

<div style="width: 540px; height: 260px; display: grid; grid-template-columns: 200px auto; grid-template-areas: 'one main' 'two main' 'three main' 'four main' 'five main'; grid-gap: 5px; padding: 5px; margin: auto; box-sizing: border-box; background: url(IMGURL) gray; background-size: cover; font-family: 'Century Gothic', 'Gill Sans', sans-serif; font-size: 22pt; border-radius: 5px; box-shadow: 2px 2px 5px #333;"> <div style="grid-area: main;"></div> <a style="grid-area: one; background: rgba(0,0,0,0.3); text-align: center; display: flex; justify-content: center; align-items: center; color: #DDEEEE; outline: 1px solid #ccc; outline-offset: -3px; text-decoration: none;" href="URL1"> LINK1 </a> <a style="grid-area: two; background: rgba(0,0,0,0.4); text-align: center; display: flex; justify-content: center; align-items: center; color: #B2CDCF; outline: 1px solid #ccc; outline-offset: -3px; text-decoration: none;" href="URL2"> LINK2 </a> <a style="grid-area: three; background: rgba(0,0,0,0.5); text-align: center; display: flex; justify-content: center; align-items: center; color: #80BCBA; outline: 1px solid #ccc; outline-offset: -3px; text-decoration: none;" href="URL3"> LINK3 </a> <a style="grid-area: four; background: rgba(0,0,0,0.6); text-align: center; display: flex; justify-content: center; align-items: center; color: #00A894; outline: 1px solid #ccc; outline-offset: -3px; text-decoration: none;" href="URL4"> LINK4 </a> <a style="grid-area: five; background: rgba(0,0,0,0.7); text-align: center; display: flex; justify-content: center; align-items: center; color: #01836B; outline: 1px solid #ccc; outline-offset: -3px; text-decoration: none;" href="URL5"> LINK5 </a> </div>

find & replace

link colors: #DDEEEE, #B2CDCF, #80BCBA, #00A894, #01836B

style #2

basics history threads open post contact

copy & paste

<div style="width: 540px; height: 260px; display: grid; grid-gap: 5px; grid-template-columns: 200px auto; grid-template-areas: 'one main' 'two main' 'three main' 'four main' 'five main'; padding: 5px; margin: auto; box-sizing: border-box; background: #800088; font-family: 'Book Antiqua', serif; font-style: italic; font-size: 22pt; border-radius: 5px; box-shadow: 2px 2px 5px #333;"> <div style="grid-area: main; background: url(IMGURL); background-size: cover; outline: 1px solid #ccc; outline-offset: -3px;"></div> <a style="grid-area: one; background: rgba(0,0,0,0.3); text-align: center; display: flex; justify-content: center; align-items: center; color: #FFDEED; outline: 1px solid #ccc; outline-offset: -3px; text-decoration: none;" href="URL1"> LINK1 </a> <a style="grid-area: two; background: rgba(0,0,0,0.4); text-align: center; display: flex; justify-content: center; align-items: center; color: #D6B4D3; outline: 1px solid #ccc; outline-offset: -3px; text-decoration: none;" href="URL2"> LINK2 </a> <a style="grid-area: three; background: rgba(0,0,0,0.5); text-align: center; display: flex; justify-content: center; align-items: center; color: #E398C9; outline: 1px solid #ccc; outline-offset: -3px; text-decoration: none;" href="URL3"> LINK3 </a> <a style="grid-area: four; background: rgba(0,0,0,0.6); text-align: center; display: flex; justify-content: center; align-items: center; color: #D762A8; outline: 1px solid #ccc; outline-offset: -3px; text-decoration: none;" href="URL4"> LINK4 </a> <a style="grid-area: five; background: rgba(0,0,0,0.7); text-align: center; display: flex; justify-content: center; align-items: center; color: #C82179; outline: 1px solid #ccc; outline-offset: -3px; text-decoration: none;" href="URL5"> LINK5 </a> </div>

find & replace

background: #800088 • link colors: #FFDEED, #D6B4D3, #E398C9, #D762A8, #C82179

style #3

basics history threads open post contact

copy & paste

<div style="width: 540px; height: 260px; display: grid; grid-template-columns: 200px auto; grid-template-areas: 'one main' 'two main' 'three main' 'four main' 'five main'; grid-gap: 5px; padding: 5px; margin: auto; box-sizing: border-box; background: url(IMGURL) gray; background-size: cover; font-family: 'Consolas', 'Monaco', monospace; text-transform: uppercase; letter-spacing: 3px; font-size: 18pt; border-radius: 5px; box-shadow: 2px 2px 5px #333;"> <div style="grid-area: main;"></div> <a style="grid-area: one; background: #215392; text-align: center; display: flex; justify-content: center; align-items: center; color: #DDD; padding-left: 3px; outline: 1px solid #EEE; outline-offset: -3px; text-decoration: none;" href="URL1"> LINK1 </a> <a style="grid-area: two; background: #3E8092; text-align: center; display: flex; justify-content: center; align-items: center; color: #DDD; padding-left: 3px; outline: 1px solid #EEE; outline-offset: -3px; text-decoration: none;" href="URL2"> LINK2 </a> <a style="grid-area: three; background: #478776; text-align: center; display: flex; justify-content: center; align-items: center; color: #DDD; padding-left: 3px; outline: 1px solid #EEE; outline-offset: -3px; text-decoration: none;" href="URL3"> LINK3 </a> <a style="grid-area: four; background: #5A715C; text-align: center; display: flex; justify-content: center; align-items: center; color: #DDD; padding-left: 3px; outline: 1px solid #EEE; outline-offset: -3px; text-decoration: none;" href="URL4"> LINK4 </a> <a style="grid-area: five; background: #7E7346; text-align: center; display: flex; justify-content: center; align-items: center; color: #DDD; padding-left: 3px; outline: 1px solid #EEE; outline-offset: -3px; text-decoration: none;" href="URL5"> LINK5 </a> </div>

find & replace

link text: #ddd • link boxes: #215392, #3E8092, #478776, #5A715C, #7E7346

Comments

[repatch]

This is so gorgeous and easy to customize! Thank you for sharing!

[transilience]

you're welcome, I'm glad it's useful!