[66] Business Card Muselist

[lina_trinch]

Code:
<div style="margin: auto; width: 600px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; display: flex; flex-wrap: wrap; justify-content: space-between;"> <!--block--> <div style="width: 290px;"> <div style="width: 150px; height: 80px; background: #222; float: right; margin: 0 -1px 1px 0;"></div> <div style="width: 150px; height: 80px; background: #222; float: left; margin: -57px 0 0 -3px;"></div> <div style="background: #eee; width: 290px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; border: 1px solid #eee; margin-top: -103px; float: right; box-shadow: 0 0 4px #aaa;"> <div style="width: 100px; height: 100px; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 1px;"> <div style="background: center/cover url('IMAGE_URL'); grid-area: 1 / 1 / 3 / 2;"></div> <div style="background: center/cover url('IMAGE_URL'); grid-area: 1 / 2 / 2 / 3;"></div> <div style="background: center/cover url('IMAGE_URL'); grid-area: 2 / 2 / 3 / 3;"></div> </div> <div style="width: 190px; text-align: center;"> <div style="font-style: italic; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 18px; color: #222;"> Character </div> <div style="text-transform: lowercase; font-variant: small-caps; font-weight: bold; font-size: 10px; color: #222;"> Canon </div> <a href="URL" style="text-decoration: none; color: #222; font-size: 20px;"> ✧ </a> </div> </div> </div> <!--block--> <div style="width: 290px;"> <div style="width: 150px; height: 80px; background: #222; float: right; margin: 0 -1px 1px 0;"></div> <div style="width: 150px; height: 80px; background: #222; float: left; margin: -57px 0 0 -3px;"></div> <div style="background: #eee; width: 290px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; border: 1px solid #eee; margin-top: -103px; float: right; box-shadow: 0 0 4px #aaa;"> <div style="width: 100px; height: 100px; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 1px;"> <div style="background: center/cover url('IMAGE_URL'); grid-area: 1 / 1 / 3 / 2;"></div> <div style="background: center/cover url('IMAGE_URL'); grid-area: 1 / 2 / 2 / 3;"></div> <div style="background: center/cover url('IMAGE_URL'); grid-area: 2 / 2 / 3 / 3;"></div> </div> <div style="width: 190px; text-align: center;"> <div style="font-style: italic; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 18px; color: #222;"> Character </div> <div style="text-transform: lowercase; font-variant: small-caps; font-weight: bold; font-size: 10px; color: #222;"> Canon </div> <a href="URL" style="text-decoration: none; color: #222; font-size: 20px;"> ✧ </a> </div> </div> </div> <!--block--> <div style="width: 290px;"> <div style="width: 150px; height: 80px; background: #222; float: right; margin: 0 -1px 1px 0;"></div> <div style="width: 150px; height: 80px; background: #222; float: left; margin: -57px 0 0 -3px;"></div> <div style="background: #eee; width: 290px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; border: 1px solid #eee; margin-top: -103px; float: right; box-shadow: 0 0 4px #aaa;"> <div style="width: 100px; height: 100px; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 1px;"> <div style="background: center/cover url('IMAGE_URL'); grid-area: 1 / 1 / 3 / 2;"></div> <div style="background: center/cover url('IMAGE_URL'); grid-area: 1 / 2 / 2 / 3;"></div> <div style="background: center/cover url('IMAGE_URL'); grid-area: 2 / 2 / 3 / 3;"></div> </div> <div style="width: 190px; text-align: center;"> <div style="font-style: italic; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 18px; color: #222;"> Character </div> <div style="text-transform: lowercase; font-variant: small-caps; font-weight: bold; font-size: 10px; color: #222;"> Canon </div> <a href="URL" style="text-decoration: none; color: #222; font-size: 20px;"> ✧ </a> </div> </div> </div> <!--block--> <div style="width: 290px;"> <div style="width: 150px; height: 80px; background: #222; float: right; margin: 0 -1px 1px 0;"></div> <div style="width: 150px; height: 80px; background: #222; float: left; margin: -57px 0 0 -3px;"></div> <div style="background: #eee; width: 290px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; border: 1px solid #eee; margin-top: -103px; float: right; box-shadow: 0 0 4px #aaa;"> <div style="width: 100px; height: 100px; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 1px;"> <div style="background: center/cover url('IMAGE_URL'); grid-area: 1 / 1 / 3 / 2;"></div> <div style="background: center/cover url('IMAGE_URL'); grid-area: 1 / 2 / 2 / 3;"></div> <div style="background: center/cover url('IMAGE_URL'); grid-area: 2 / 2 / 3 / 3;"></div> </div> <div style="width: 190px; text-align: center;"> <div style="font-style: italic; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 18px; color: #222;"> Character </div> <div style="text-transform: lowercase; font-variant: small-caps; font-weight: bold; font-size: 10px; color: #222;"> Canon </div> <a href="URL" style="text-decoration: none; color: #222; font-size: 20px;"> ✧ </a> </div> </div> </div> <!--ADD MORE ABOVE THIS LINE--> </div> <div style="width: 600px; margin: auto; font-size: 8px; font-family: monospace; font-weight: bold; letter-spacing: 2px; text-align: left; color: #333; text-transform: uppercase;"> <a href="https://www.patreon.com/killthecake" style="color: #333; text-decoration: none;"> CODE </a> </div></center>

❖ These codes were released early on the Patreon! Feel free to check out things over there if you want early codes or some exclusive content. ❖ Make sure Disable Auto-Formatting is checked when you copy/paste the code into your post. ❖ If you want to change the little star icon, you can find more HTML friendly symbols at SYMBL! ❖ If you add more links, it'll try to create a column of them. To make them inline, simply replace the current code for the link with this: <div> <a href="URL" style="text-decoration: none; color: #222; font-size: 20px;"> ✧ </a> <a href="URL" style="text-decoration: none; color: #222; font-size: 20px;"> ✧ </a> </div> Ctrl+F & Replace: ❖ IMAGE_URL - For each of the image placeholders. ❖ Character/Canon - The header and subheader placeholder of each block. ❖ URL - For the link URL. #eee Background and borders of the blocks. #aaa Shadows. #333 Credit link. #222 Outline along the right top/left bottom edges, text color.