contact / moodboard: parterre

[transilience]

a couple of groovy smol moodboards for your ~aesthetics~, post headers, etc. x-posted to rpresources

version 1: centerpiece

 

 

 

 

 

 

 

earth laughs in flowers
– ralph waldo emerson

<div style="box-sizing: border-box; display: grid; grid-template-columns: 25% 25% 25% 25%; grid-template-rows: 33% 33% 34%; grid-template-areas: 'red orange yellow green' 'aqua blue purple pink' 'text text text text'; grid-gap: 10px; width: 500px; height: 375px; background-color: transparent; margin: 2em auto; padding: 5px; font-size: 16px;"> <div style="grid-area: red; background: red url(IMGURL) center; background-size: cover; border: 2px solid #333; border-radius: 50%; border-top-right-radius: 0;">   </div> <div style="grid-area: orange; background: orange url(IMGURL) center; background-size: cover; border: 2px solid #333; border-radius: 0 50%;"> <img src="IMGURL" style="box-sizing: border-box; background: gray; object-fit: cover; width: 100px; height: 100px; border-radius: 50%; border: 2px solid #333; position: relative; top: 75px; left: 75px;"> </div> <div style="grid-area: yellow; background: yellow url(IMGURL) center; background-size: cover; border: 2px solid #333; border-radius: 50% 0;">   </div> <div style="grid-area: green; background: green url(IMGURL) center; background-size: cover; border: 2px solid #333; border-radius: 50%; border-top-left-radius: 0;">   </div> <div style="grid-area: aqua; background: aqua url(IMGURL) center; background-size: cover; border: 2px solid #333; border-radius: 50%; border-bottom-right-radius: 0;">   </div> <div style="grid-area: blue; background: blue url(IMGURL) center; background-size: cover; border: 2px solid #333; border-radius: 50% 0;">   </div> <div style="grid-area: purple; background: purple url(IMGURL) center; background-size: cover; border: 2px solid #333; border-radius: 0 50%;">   </div> <div style="grid-area: pink; background: pink url(IMGURL) center; background-size: cover; border: 2px solid #333; border-radius: 50%; border-bottom-left-radius: 0;">   </div> <div style="grid-area: text; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; color: #444; font-family: book antiqua, georgia, serif; font-size: 22px; font-style: italic; text-transform: uppercase; letter-spacing: 0.1em; line-height: 1.5; padding: 1em; border-radius: 50px;"> Lorem Ipsum dolor sit amet, Consectetur adipiscing elit </div> </div>

version 2: footpath

 

 

 

 

Olivia D'Cruz dryad for hire

 

 

 

 

<div style="box-sizing: border-box; display: grid; grid-template-columns: 20% 20% 20% 20% 20%; grid-template-rows: 50% 50%; grid-template-areas: 'red orange text yellow green' 'aqua blue text purple pink'; grid-gap: 10px; width: 675px; height: 250px; background-color: transparent; margin: 2em auto; padding: 5px; line-height: 1.5;"> <div style="grid-area: red; background: red url(IMGURL) center; background-size: cover; border: 2px solid #333; border-radius: 50%; border-bottom-right-radius: 0;">   </div> <div style="grid-area: orange; background: orange url(IMGURL) center; background-size: cover; border: 2px solid #333; border-radius: 50% 0;">   </div> <div style="grid-area: yellow; background: yellow url(IMGURL) center; background-size: cover; border: 2px solid #333; border-radius: 0 50%;">   </div> <div style="grid-area: green; background: green url(IMGURL) center; background-size: cover; border: 2px solid #333; border-radius: 50%; border-bottom-left-radius: 0;">   </div> <div style="grid-area: text; display: flex; flex-direction: column; justify-content: center; align-items: space-between; text-align: center; color: #444; font-family: book antiqua, georgia, serif; font-size: 16px; font-style: italic; text-transform: uppercase; letter-spacing: 0.1em; padding: 1em; overflow: hidden;"> <span>UPPER</span> <img src="ICONURL" style="width: 100px; height: 100px; border-radius: 45px; border: 2px solid #333; margin: 1em auto;"> <span>LOWER</span> </div> <div style="grid-area: aqua; background: aqua url(IMGURL) center; background-size: cover; border: 2px solid #333; border-radius: 50%; border-top-right-radius: 0;">   </div> <div style="grid-area: blue; background: blue url(IMGURL) center; background-size: cover; border: 2px solid #333; border-radius: 0 50%;">   </div> <div style="grid-area: purple; background: purple url(IMGURL) center; background-size: cover; border: 2px solid #333; border-radius: 50% 0;">   </div> <div style="grid-area: pink; background: pink url(IMGURL) center; background-size: cover; border: 2px solid #333; border-radius: 50%; border-top-left-radius: 0;">   </div> </div>

notes

- works in Firefox, Chrome, Opera, and Edge. does not work in Explorer.
- the areas are color-coded to help you remember what goes where.
- you can change the background-color properties when you're done, if you want to; I recommend you do NOT change grid-area or grid-template-areas
- if you're confused now, don't worry about it, just plug in your image URLs and you're good

Comments

[camalyng]

Hello! I'm using the centerpiece version over here and the, well, centerpiece looks a bit low instead of being vertically centered (tested in both Firefox and Chrome). All I did for that piece was plug in my image URL :S Any ideas on how to get it back where it belongs?

[transilience]

Sorry about the radio silence. It looks like you have an extra <br> right before the image code; deleting that should fix it.