moodboard: whirlpool

[transilience]

 

 

 

 

 

 

 

 

copy & paste

- 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

<div style="box-sizing: border-box; display: grid; grid-template-columns: 25% auto 25%; grid-template-rows: 25% auto 25%; grid-template-areas: 'red red orange yellow' 'green white white yellow' 'aqua white white blue' 'aqua purple pink pink'; grid-gap: 5px; width: 600px; height: 600px; margin: 2em auto; background: transparent; position: relative;"> <div style="grid-area: red; background-color: red; background-image: url(IMGURL); border: 1px solid #555; background-size: cover; background-position: center; border-top-left-radius: 150px;">&nbsp;</div> <div style="grid-area: orange; background-color: orange; background-image: url(IMGURL); border: 1px solid #555; background-size: cover; background-position: center;"> &nbsp;</div> <div style="grid-area: yellow; background-color: yellow; background-image: url(IMGURL); border: 1px solid #555; background-size: cover; background-position: center; border-top-right-radius: 150px;"> &nbsp;</div> <div style="grid-area: green; background-color: green; background-image: url(IMGURL); border: 1px solid #555; background-size: cover; background-position: center;"> &nbsp;</div> <div style="grid-area: aqua; background-color: aqua; background-image: url(IMGURL); border: 1px solid #555; background-size: cover; background-position: center; border-bottom-left-radius: 150px;">&nbsp;</div> <div style="grid-area: blue; background-color: blue; background-image: url(IMGURL); border: 1px solid #555; background-size: cover; background-position: center;"> &nbsp;</div> <div style="grid-area: purple; background-color: purple; background-image: url(IMGURL); border: 1px solid #555; background-size: cover; background-position: center;"> &nbsp;</div> <div style="grid-area: pink; background-color: pink; background-image: url(IMGURL); border: 1px solid #555; background-size: cover; background-position: center; border-bottom-right-radius: 150px;"> &nbsp;</div> <div style="grid-area: white; background-color: white; background-image: url(IMGURL); border: 1px solid #555; background-size: cover; background-position: center;"> <img src="CIRCLEIMAGEURL" style="background: #fff; object-fit: cover; border: 1px solid #555; box-shadow: 0 0 0 5px #FFF; width: 200px; height: 200px; border-radius: 50%; position: relative; top: 100px; left: 100px;"> </div> </div>

Comments

[brewberrywitch]

I think something with my journal style is messing with the div height, but I adjusted where the circle sits and I'm happy with the effect as is. Thank you for making it!